templates
/
KiBot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[KiRi] Removed the use of iconify 

- Now the icons are included in the images folder
This commit is contained in:
Salvador E. Tropea 2023-12-26 13:46:11 -03:00
parent 7b520924e8
commit cf2a0ab495
16 changed files with 181 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
kibot/out_kiri.py
View File

@ -22,7 +22,7 @@ Dependencies:
import datetime
import pwd
import os
from shutil import copy2, rmtree
from shutil import copy2, rmtree, copytree
from subprocess import CalledProcessError
from tempfile import mkdtemp, NamedTemporaryFile
from .error import KiPlotConfigurationError
@ -41,11 +41,6 @@ UNDEF_COLOR = '#DBDBDB'
LAYER_COLORS_HEAD = """/* ==============================
Layer colors
** ============================*/
.layer_color_margin {
margin-left:0.5em;
margin-right:0.1em;
}
"""
@ -190,11 +185,11 @@ class KiRiOptions(VariantOptions):
copy2(os.path.join(src_dir, 'kiri-server'), os.path.join(self.cache_dir, 'kiri-server'))
web_dir = os.path.join(self.cache_dir, 'web')
os.makedirs(web_dir, exist_ok=True)
copy2(os.path.join(src_dir, 'blank.svg'), os.path.join(web_dir, 'blank.svg'))
copy2(os.path.join(src_dir, 'favicon.ico'), os.path.join(web_dir, 'favicon.ico'))
copy2(os.path.join(src_dir, 'kiri.css'), os.path.join(web_dir, 'kiri.css'))
copy2(os.path.join(src_dir, 'kiri.js'), os.path.join(web_dir, 'kiri.js'))
copy2(os.path.join(src_dir, 'index.html'), os.path.join(web_dir, 'index.html'))
copytree(os.path.join(src_dir, 'images'), os.path.join(web_dir, 'images'), dirs_exist_ok=True)
# Colors for the layers
with open(os.path.join(web_dir, 'layer_colors.css'), 'wt') as f:
f.write(LAYER_COLORS_HEAD)

0
kibot/resources/kiri/blank.svg → kibot/resources/kiri/images/blank.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

1
kibot/resources/kiri/images/center-to-fit.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M8 2H2v6h2V4h4zm16 0h6v6h-2V4h-4zM8 30H2v-6h2v4h4zm16 0h6v-6h-2v4h-4zm0-6H8a2.002 2.002 0 0 1-2-2V10a2.002 2.002 0 0 1 2-2h16a2.002 2.002 0 0 1 2 2v12a2.002 2.002 0 0 1-2 2M8 10v12h16V10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

1
kibot/resources/kiri/images/circuit-board.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M14.5 1h-13l-.5.5v13l.5.5h13l.5-.5v-13zM14 14H5v-2h2.3c.3.6 1 1 1.7 1c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2H4v3H2V2h2v2.3c-.6.3-1 1-1 1.7c0 1.1.9 2 2 2s2-.9 2-2h2c0 1.1.9 2 2 2s2-.9 2-2s-.9-2-2-2c-.7 0-1.4.4-1.7 1H6.7c-.3-.6-1-1-1.7-1V2h9zm-6-3c0-.6.4-1 1-1s1 .4 1 1s-.4 1-1 1s-1-.4-1-1M5 5c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1m6 0c.6 0 1 .4 1 1s-.4 1-1 1s-1-.4-1-1s.4-1 1-1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

1
kibot/resources/kiri/images/code-branch-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#FFFFFF" d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 957 B

1
kibot/resources/kiri/images/info.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 7h.01"/><path stroke-linecap="round" stroke-linejoin="round" d="M10 11h2v5m-2 0h4"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 301 B

1
kibot/resources/kiri/images/layers-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M7.697 1.04a.5.5 0 0 0-.394 0l-7 3a.5.5 0 0 0 0 .92l7 3a.5.5 0 0 0 .394 0l7-3a.5.5 0 0 0 0-.92z"/><path fill="currentColor" d="M7.5 9.956L.697 7.04l-.394.92L7.5 11.044l7.197-3.084l-.394-.92z"/><path fill="currentColor" d="m.697 10.04l-.394.92L7.5 14.044l7.197-3.084l-.394-.92L7.5 12.956z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

1
kibot/resources/kiri/images/next-page.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 8h-8V6h8zm4-4v8l-6 6H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2m-2 0H8v12h6v-4a2 2 0 0 1 2-2h4zM4 6a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2H4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

1
kibot/resources/kiri/images/pages.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16 8H8V6h8zm0 2H8v2h8zm4-6v12l-6 6H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2m-2 10V4H6v16h6v-4a2 2 0 0 1 2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 240 B

1
kibot/resources/kiri/images/schematics.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27 19.001A4.006 4.006 0 0 0 23 15H9a2.003 2.003 0 0 1-2-2V9.857A3.995 3.995 0 0 0 9.858 7h12.284a4 4 0 1 0 0-2H9.858A3.992 3.992 0 1 0 5 9.858v3.141A4.006 4.006 0 0 0 9.001 17H23a2.003 2.003 0 0 1 2 2.001V22h-3v3H9.858a4 4 0 1 0 0 2H22v3h8v-8h-3ZM26 4a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2.002 2.002 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2m22-4v4h-4v-4Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 506 B

1
kibot/resources/kiri/images/square-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M1.5 0A1.5 1.5 0 0 0 0 1.5v12A1.5 1.5 0 0 0 1.5 15h12a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 13.5 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

1
kibot/resources/kiri/images/zoom-in.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0ZM10.5 7v3.5m0 0V14m0-3.5H14m-3.5 0H7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

1
kibot/resources/kiri/images/zoom-out.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0Zm-6 0H8"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 250 B

63
kibot/resources/kiri/index.html
View File

@ -3,8 +3,11 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.rawgit.com/ccampbell/mousetrap/825ce50c/mousetrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- <script src="./jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdn.rawgit.com/ccampbell/mousetrap/825ce50c/mousetrap.min.js"></script> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="./bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
@ -35,8 +38,7 @@
</div>
<!-- Commits -->
<p class="text-light">
<span class="iconify icon-commits" data-icon="fa-solid:code-branch" data-inline="false"></span>
Commits
<span class="icon-commits"></span> Commits
</p>
<div class="form-check scrollbox ui-commits-list">
<form id="commits_form" class="overflow-auto scrollbox-content">
@ -57,11 +59,11 @@
<div id="view_mode" class="form-group row btn-group btn-group-toggle" data-toggle="buttons" role="group" aria-label="View Mode">
<label id="show_sch_lbl" data-toggle="tooltip" title="Schematic View (s)" class="btn btn-secondary active" onclick="show_sch()">
<input id="show_sch" type="radio" name="view_mode" value="show_sch" checked>
<span class="iconify icon-control" data-icon="carbon:schematics" data-inline="false"></span>
<div class="icon-control-sch"></div>
</label>
<label id="show_pcb_lbl" data-toggle="tooltip" title="Layout View (s)" class="btn btn-secondary" onclick="show_pcb()">
<input id="show_pcb" type="radio" name="view_mode" value="show_pcb" >
<span class="iconify icon-control" data-icon="codicon:circuit-board" data-inline="false"></span>
<div class="icon-control-pcb"></div>
</label>
</div>
</form>
@ -71,13 +73,13 @@
<form class="inline ui-controls-svg">
<div id="svg_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Zoom Level">
<button id="zoom-in" data-toggle="tooltip" title="Zoom In (+)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
<span class="iconify icon-control" data-icon="akar-icons:zoom-in" data-inline="false"></span>
<span class="icon-control-zin"></span>
</button>
<button id="zoom-out" data-toggle="tooltip" title="Zoom Out (-)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
<span class="iconify icon-control" data-icon="akar-icons:zoom-out" data-inline="false"></span>
<span class="icon-control-zout"></span>
</button>
<button id="zoom-fit" data-toggle="tooltip" title="Fit View (0)" name="svg_controls" type="button" aria-pressed="false" class="btn btn-secondary" onclick="this.blur();">
<span class="iconify icon-control" data-icon="carbon:center-to-fit" data-inline="false"></span>
<span class="icon-control-center"></span>
</button>
</div>
</form>
@ -85,9 +87,9 @@
<span class="ui-controls-sep2"></span>
<form class="inline ui-controls-info">
<div id="info_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Info">
<div id="info_controls" class="form-group btn-group btn-group-toggle" role="group" aria-label="Info" >
<button id="info-btn" data-toggle="modal" title="Info (i)" name="info_controls" type="button" aria-pressed="false" class="btn btn-secondary" data-target="#shortcuts-modal" onclick="this.blur();">
<span class="iconify icon-control" data-icon="akar-icons:info" data-inline="false"></span>
<span class="icon-control-info"></span>
</button>
</div>
</form>
@ -101,7 +103,7 @@
<div id="legend" class="rounded no-gutters ui-legend">
<iframe name="hidden_post_target" class="hidden_iframe"></iframe>
<div id="commit1" class="commit1" style="visibility: visible;">
<span id="commit1_legend" class="iconify icon-commit1 icon-commit1-color" data-icon="teenyicons-square-solid"></span>
<span id="commit1_legend" class="icon-commit1 icon-commit1-color"></span>
<small id="commit1_legend_text" class="text-sm text-light">
Newer
<span class="text-monospace">
@ -115,7 +117,7 @@
</div>
<span class="ui-legend-sep1"></span>
<div id="commit2" class="commit2" style="visibility: visible;">
<span id="commit2_legend" class="iconify icon-commit2 icon-commit2-color" data-icon="teenyicons-square-solid"></span>
<span id="commit2_legend" class="icon-commit2 icon-commit2-color"></span>
<small id="commit2_legend_text" class="text-sm text-light">
Older
<span class="text-monospace">
@ -128,7 +130,7 @@
</small>
</div>
<div id="commit3" class="commit3" style="visibility: visible;">
<span id="commit3_legend" class="iconify icon-commit3" data-icon="teenyicons-square-solid"></span>
<span id="commit3_legend" class="icon-commit3"></span>
<small id="commit3_legend_text" class="text-sm text-light">
Unchanged
</small>
@ -149,8 +151,7 @@
<!-- Sheets form -->
<div class="form-check no-gutters ui-sheets-form">
<p class="text-light">
<span class="iconify icon-sheets" data-icon="gridicons:next-page" data-inline="false"></span>
Pages
<span class="icon-sheets"></span> Pages
</p>
<div class="row ui-sheets-form-row">
<div class="col ui-sheets-form-col">
@ -167,8 +168,7 @@
<div class="list-group no-gutters" id="layers_list" style="display: none;">
<div class="form-check no-gutters ui-sheets-form">
<p class="text-light">
<span class="iconify icon-sheets" data-icon="teenyicons:layers-solid" data-inline="false"></span>
Layers
<span class="icon-layers"></span> Layers
</p>
<div class="row ui-sheets-form-row">
<div class="col ui-sheets-form-col">
@ -202,19 +202,19 @@
<table>
<tbody>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-up" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E7;</kbd></small></td>
<td>Move commits par upwards</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-down" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E9;</kbd></small></td>
<td>Move commits par downwards</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>[</kbd> or <kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-up" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>[</kbd> or <kbd>Ctrl+&#x21E7;</kbd></small></td>
<td>Move 2nd commit upwards</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>]</kbd> or <kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-down" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>]</kbd> or <kbd>Ctrl+&#x21E9;</kbd></small></td>
<td>Move 2nd commit downwards</td>
</tr>
<tr>
@ -242,19 +242,19 @@
<td>Toggle visibility of older commit</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-right" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E8;</kbd></small></td>
<td>Select next page/layer</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd><span class="iconify" data-icon="typcn-arrow-left" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>&#x21E6;</kbd></small></td>
<td>Select previous page/layer</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-right" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + &#x21E8;</kbd></small></td>
<td>Select next page/layer (cycling)</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + <span class="iconify" data-icon="typcn-arrow-left" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Ctrl + &#x21E6;</kbd></small></td>
<td>Select previous page/layer (cycling)</td>
</tr>
</tbody>
@ -278,19 +278,19 @@
<td>Zoom fit</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-up" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E7;</kbd></small></td>
<td>Pan svg up</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-down" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E9;</kbd></small></td>
<td>Pan svg down</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-left" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E8;</kbd></small></td>
<td>Pan svg left</td>
</tr>
<tr>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + <span class="iconify" data-icon="typcn-arrow-right" data-inline="false"></span></kbd></small></td>
<td class="shortcut_col"><small class="text-sm text-muted"><kbd>Alt + &#x21E6;</kbd></small></td>
<td>Pan svg right</td>
</tr>
</tbody>
@ -322,8 +322,9 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://code.iconify.design/2/2.2.1/iconify.min.js" integrity=""></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> -->
<!-- <script src="./bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> -->
<!-- <script src="https://code.iconify.design/2/2.2.1/iconify.min.js" integrity=""></script> -->
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js" integrity=""></script>
<script src="./kiri.js" integrity="" crossorigin="anonymous"></script>
</body>

141
kibot/resources/kiri/kiri.css
View File

@ -258,11 +258,36 @@ hr {
.icon-sheet-page {
margin-left: 0.5em;
margin-right: 0.1em;
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
--svg: url('./images/pages.svg');
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-commits {
margin-left: 5px;
margin-right:0.5em;
/* Add dimensions to span */
display: inline-block;
width: 1em;
height: 1em;
/* Add background color */
background-color: currentColor;
/* Add mask image, use variable to reduce duplication */
--svg: url('./images/code-branch-solid.svg');
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-control {
@ -271,10 +296,61 @@ hr {
}
.icon-commit1, .icon-commit1-fs {
margin-right: 0.2em;
.icon-control-sch, .icon-control-pcb, .icon-control-zin, .icon-control-zout, .icon-control-center, .icon-control-info {
display: block;
width: 20px;
height: 20px;
margin: 0.2em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-control-sch {
--svg: url('./images/schematics.svg');
}
.icon-control-pcb {
--svg: url('./images/circuit-board.svg');
}
.icon-control-zin {
--svg: url('./images/zoom-in.svg');
}
.icon-control-zout {
--svg: url('./images/zoom-out.svg');
}
.icon-control-center {
--svg: url('./images/center-to-fit.svg');
}
.icon-control-info {
--svg: url('./images/info.svg');
}
.icon-commit1, .icon-commit1-fs, .icon-commit2, .icon-commit2-fs, .icon-commit3, .icon-commit3-fs {
display: inline-block;
width: 10px;
height: 10px;
background-color: currentColor;
--svg: url('./images/square-solid.svg');
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-commit1, .icon-commit1-fs {
margin-right: 0.2em;
}
.icon-commit1 {
@ -290,12 +366,9 @@ hr {
}
.icon-commit2, .icon-commit2-fs {
display: inline;
margin-left: 1em;
margin-right:0.2em;
color: #FF0000;
width: 10px;
height: 10px;
}
.icon-commit2-color {
@ -306,41 +379,74 @@ hr {
color: #A7A7A7;
}
.icon-commit3 {
.icon-commit3, .icon-commit3-fs {
margin-left:1em;
margin-right:0.2em;
color: #FFA000;
width: 10px;
height: 10px;
}
.icon-commit3-fs {
margin-left: 1em;
margin-right: 0.2em;
color: #FFA000;
width: 10px;
height: 10px;
}
.icon-sch-pcb-modif {
.icon-sch-modif, .icon-pcb-modif {
display: inline-block;
padding-left: 0px;
padding-right: 0px;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-sch-modif {
--svg: url('./images/schematics.svg');
color: #A6E22E;
}
.icon-pcb-modif {
--svg: url('./images/circuit-board.svg');
color: #F92672;
}
.icon-sheets {
.icon-sheets, .icon-layers {
margin-right:0.5em;
width: 20px;
height: 20px;
display: inline-block;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-sheets {
--svg: url('./images/next-page.svg');
}
.icon-layers {
--svg: url('./images/layers-solid.svg');
}
.layer_color_margin {
margin-left:0.5em;
margin-right:0.1em;
width: 0.7em;
height: 0.7em;
display: inline-block;
background-color: currentColor;
--svg: url('./images/square-solid.svg');
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.ui-style {
@ -541,3 +647,4 @@ hr {
.commit1, .commit2, .commit3 {
display: inline;
}

24
kibot/resources/kiri/kiri.js
View File

@ -43,9 +43,9 @@ var layers_commit2 = new Set();
// Displayed PCB layers
var current_layers_list = [];
// Icon to indicate the schematic was changed in a commit
const SCH_IMG = '<span class="iconify icon-sch-pcb-modif icon-sch-modif" data-inline="false"; data-icon="carbon:schematics"></span>';
const SCH_IMG = '<span class="icon-sch-modif"></span>';
// Icon to indicate the PCB was changed in a commit
const PCB_IMG = '<span class="iconify icon-sch-pcb-modif icon-pcb-modif" data-inline="false"; data-icon="codicon:circuit-board"></span>';
const PCB_IMG = '<span class="icon-pcb-modif"></span>';
// Color for the commit1
var commit1_legend_color;
// Color for the commit2
@ -548,13 +548,13 @@ function update_selected_page()
if (sheet_pages_commit1.has(page_filename)) {
image_path_1 = "../" + commit1.value + "/_KIRI_/sch/" + page_filename + ".svg";
} else {
image_path_1 = "blank.svg";
image_path_1 = "images/blank.svg";
}
if (sheet_pages_commit2.has(page_filename)) {
image_path_2 = "../" + commit2.value + "/_KIRI_/sch/" + page_filename + ".svg";
} else {
image_path_2 = "blank.svg";
image_path_2 = "images/blank.svg";
}
console.log("[SCH] page_filename =", page_filename);
@ -650,7 +650,7 @@ function update_sheets_list() {
var input_html = `
<input id="${sheet}" data-toggle="tooltip" title="${sheet}" type="radio" value="${sheet}" name="pages" onchange="change_selected_page(${index})">
<label for="${sheet}" data-toggle="tooltip" title="${sheet}" id="label-${sheet}" class="rounded text-sm-left list-group-item radio-box">
<span data-toggle="tooltip" title="${sheet}" class="iconify icon-sheet-page" data-icon="gridicons:pages" data-inline="false"></span>
<span data-toggle="tooltip" title="${sheet}" class="icon-sheet-page"></span>
<span class="${color_style}">${visible_sheet}</span>
</label>
</label>
@ -850,7 +850,7 @@ function update_layers_list()
<!-- Generated Layer ${id} -->
<input id="layer-${id_pad}" value="layer-${layer_names}" type="radio" name="layers" onchange="change_selected_layer(${index})">
<label for="layer-${id_pad}" id="label-layer-${id_pad}" data-toggle="tooltip" title="${id}, ${layer_names}" class="rounded text-sm-left list-group-item radio-box">
<span class="iconify layer_color_margin layer_color_${id}" data-icon="teenyicons-square-solid" data-inline="false"></span>
<span class="layer_color_margin layer_color_${id}"></span>
<span class="${color_style}">${layer_names}</span>
</label>
`;
@ -909,12 +909,12 @@ function update_selected_layer() {
if (layers_commit1.has(layer_id)) {
image_path_1 = "../" + commit1.value + "/_KIRI_/pcb/layer" + "-" + layer_id + ".svg";
} else {
image_path_1 = "blank.svg";
image_path_1 = "images/blank.svg";
}
if (layers_commit2.has(layer_id)) {
image_path_2 = "../" + commit2.value + "/_KIRI_/pcb/layer" + "-" + layer_id + ".svg";
} else {
image_path_2 = "blank.svg";
image_path_2 = "images/blank.svg";
}
console.log("[PCB] layer_id =", layer_id);
@ -1149,6 +1149,7 @@ function createNewEmbed(src1, src2)
document.getElementById('diff-container').replaceWith(embed);
document.getElementById('diff-container').innerHTML = svg_element;
document.getElementById('diff-container').onfullscreenchange = fullscreenchanged;
console.log(">>> SVG: ", embed);
svgpanzoom_selector = "#svg-id";
@ -1283,7 +1284,7 @@ function update_fullscreen_label()
label = `
<div id="fullscreen_label" class="alert alert-dark border border-dark rounded-pill position-absolute top-10 start-50 translate-middle ui-fs-label" role="alert">
<div id="commit1_div_fs" class="commit1" style="visibility: ${vis1};">
<span id="commit1_legend_fs" class="iconify icon-commit1-fs icon-commit1-color" style="color: ${col1};" data-icon="teenyicons-square-solid"></span>
<span id="commit1_legend_fs" class="icon-commit1-fs icon-commit1-color" style="color: ${col1};"></span>
<small id="commit1_legend_text_fs" class="text-sm text-light">
Newer
<span id="commit1_fs" class="text-monospace">(<a id="commit1_legend_hash">${commit1.value}</a>)</span>
@ -1293,7 +1294,7 @@ function update_fullscreen_label()
<span class="ui-legend-sep1-fs"></span>
<div id="commit2_div_fs" class="commit2" style="visibility: ${vis2};">
<span id="commit2_legend_fs" class="iconify icon-commit2-fs icon-commit2-color" style="color: ${col2};" data-icon="teenyicons-square-solid"></span>
<span id="commit2_legend_fs" class="icon-commit2-fs icon-commit2-color" style="color: ${col2};"></span>
<small id=commit2_legend_text_fs class="text-sm text-light">
Older
<span id="commit2_fs" class="text-monospace">(<a id="commit2_legend_hash">${commit2.value}</a>)</span>
@ -1303,7 +1304,7 @@ function update_fullscreen_label()
<span class="ui-legend-sep1-fs"></span>
<div id="commit3_div_fs" class="commit3" style="visibility: ${vis3};">
<span id="commit3_legend_fs" class="iconify icon-commit3-fs" data-icon="teenyicons-square-solid"></span>
<span id="commit3_legend_fs" class="icon-commit3-fs"></span>
<small id="commit3_legend_text_fs" class="text-sm text-light">
Unchanged
</small>
@ -1372,4 +1373,3 @@ function fullscreenchanged(event) {
box.remove();
}
}
document.getElementById("diff-container").onfullscreenchange = fullscreenchanged;