clones/8800-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update the design of switch buttons

This commit is contained in:
wixette 2020-03-08 16:06:51 +08:00
parent 4043a4f9f4
commit a15dd897ae
8 changed files with 90 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
design/switch-down.afdesign
View File

Binary file not shown.

25
design/switch-down.svg
View File

@ -5,21 +5,24 @@
<circle cx="373" cy="548" r="9" style="fill:rgb(41,41,41);"/>
</g>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(132,132,132);"/>
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(170,170,170);"/>
</g>
<g transform="matrix(0.325165,0,0,0.325165,-111.873,-162.191)">
<circle cx="373" cy="548" r="9" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.079C367.524,538.079 363.079,542.524 363.079,548C363.079,553.476 367.524,557.921 373,557.921C378.476,557.921 382.921,553.476 382.921,548C382.921,542.524 378.476,538.079 373,538.079ZM373,538.5C378.243,538.5 382.5,542.757 382.5,548C382.5,553.243 378.243,557.5 373,557.5C367.757,557.5 363.5,553.243 363.5,548C363.5,542.757 367.757,538.5 373,538.5ZM373,539.5C368.309,539.5 364.5,543.309 364.5,548C364.5,552.691 368.309,556.5 373,556.5C377.691,556.5 381.5,552.691 381.5,548C381.5,543.309 377.691,539.5 373,539.5ZM373,539.921C377.459,539.921 381.079,543.541 381.079,548C381.079,552.459 377.459,556.079 373,556.079C368.541,556.079 364.921,552.459 364.921,548C364.921,543.541 368.541,539.921 373,539.921Z" style="fill:rgb(81,81,81);"/>
</g>
<g transform="matrix(-0.968511,0.830669,-0.415125,-0.48401,21.6275,7.55916)">
<path d="M18.63,3.057L14.934,-9.454L9.832,-0.566L11.858,6.975L18.63,3.057Z" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.27848,0,0,0.27848,-93.8731,-137.607)">
<circle cx="373" cy="548" r="9" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.520392,0,0,0.520392,-187.619,-261.491)">
<circle cx="373" cy="548" r="9" style="fill:rgb(90,90,90);"/>
<g transform="matrix(-0.708254,0.607453,-0.311769,-0.363504,18.3339,5.97349)">
<path d="M14.762,1.213L11.911,-7.678L22.437,-16.222L23.583,-12.409L14.762,1.213Z" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.351922,0,0,0.351922,-125.784,-169.17)">
<circle cx="373" cy="548" r="9" style="fill:rgb(110,110,110);"/>
<g transform="matrix(0.573144,0,0,0.573144,-206.783,-289.274)">
<circle cx="373" cy="548" r="9" style="fill:rgb(108,110,138);"/>
</g>
<g transform="matrix(0.156118,0,0,0.100562,-54.1495,-31.9118)">
<circle cx="373" cy="548" r="9" style="fill:rgb(204,204,204);"/>
<g transform="matrix(0.387597,0,0,0.387597,-138.644,-187.716)">
<circle cx="373" cy="548" r="9" style="fill:rgb(147,152,172);"/>
</g>
<g transform="matrix(0.171944,0,0,0.110756,-59.4563,-36.7216)">
<circle cx="373" cy="548" r="9" style="fill:rgb(225,230,242);"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
design/switch-mid.afdesign
View File

Binary file not shown.

22
design/switch-mid.svg
View File

@ -5,21 +5,21 @@
<circle cx="373" cy="548" r="9" style="fill:rgb(41,41,41);"/>
</g>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(132,132,132);"/>
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(170,170,170);"/>
</g>
<g transform="matrix(0.380447,0,0,0.380447,-133.815,-192.259)">
<circle cx="373" cy="548" r="9" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.079C367.524,538.079 363.079,542.524 363.079,548C363.079,553.476 367.524,557.921 373,557.921C378.476,557.921 382.921,553.476 382.921,548C382.921,542.524 378.476,538.079 373,538.079ZM373,538.5C378.243,538.5 382.5,542.757 382.5,548C382.5,553.243 378.243,557.5 373,557.5C367.757,557.5 363.5,553.243 363.5,548C363.5,542.757 367.757,538.5 373,538.5ZM373,539.5C368.309,539.5 364.5,543.309 364.5,548C364.5,552.691 368.309,556.5 373,556.5C377.691,556.5 381.5,552.691 381.5,548C381.5,543.309 377.691,539.5 373,539.5ZM373,539.921C377.459,539.921 381.079,543.541 381.079,548C381.079,552.459 377.459,556.079 373,556.079C368.541,556.079 364.921,552.459 364.921,548C364.921,543.541 368.541,539.921 373,539.921Z" style="fill:rgb(81,81,81);"/>
</g>
<g transform="matrix(0.805188,0.989796,-0.494648,0.40239,4.35621,2.01601)">
<path d="M13.062,8.009L7.943,7.807L7.095,11.574L13.787,12.281L13.062,8.009Z" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.27848,0,0,0.27848,-93.8731,-137.607)">
<circle cx="373" cy="548" r="9" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.520392,0,0,0.520392,-188.79,-266.896)">
<circle cx="373" cy="548" r="9" style="fill:rgb(90,90,90);"/>
<g transform="matrix(0.573144,0,0,0.573144,-207.941,-298.925)">
<circle cx="373" cy="548" r="9" style="fill:rgb(108,110,138);"/>
</g>
<g transform="matrix(0.351922,0,0,0.351922,-126.923,-174.686)">
<circle cx="373" cy="548" r="9" style="fill:rgb(110,110,110);"/>
<g transform="matrix(0.387597,0,0,0.387597,-139.803,-197.367)">
<circle cx="373" cy="548" r="9" style="fill:rgb(147,152,172);"/>
</g>
<g transform="matrix(0.156118,0,0,0.100562,-55.0229,-37.589)">
<circle cx="373" cy="548" r="9" style="fill:rgb(204,204,204);"/>
<g transform="matrix(0.171944,0,0,0.110756,-60.6146,-46.3729)">
<circle cx="373" cy="548" r="9" style="fill:rgb(225,230,242);"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
design/switch-up.afdesign
View File

Binary file not shown.

25
design/switch-up.svg
View File

@ -5,21 +5,24 @@
<circle cx="373" cy="548" r="9" style="fill:rgb(41,41,41);"/>
</g>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(132,132,132);"/>
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(170,170,170);"/>
</g>
<g transform="matrix(0.325165,0,0,0.325165,-111.873,-164.24)">
<circle cx="373" cy="548" r="9" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.079C367.524,538.079 363.079,542.524 363.079,548C363.079,553.476 367.524,557.921 373,557.921C378.476,557.921 382.921,553.476 382.921,548C382.921,542.524 378.476,538.079 373,538.079ZM373,538.5C378.243,538.5 382.5,542.757 382.5,548C382.5,553.243 378.243,557.5 373,557.5C367.757,557.5 363.5,553.243 363.5,548C363.5,542.757 367.757,538.5 373,538.5ZM373,539.5C368.309,539.5 364.5,543.309 364.5,548C364.5,552.691 368.309,556.5 373,556.5C377.691,556.5 381.5,552.691 381.5,548C381.5,543.309 377.691,539.5 373,539.5ZM373,539.921C377.459,539.921 381.079,543.541 381.079,548C381.079,552.459 377.459,556.079 373,556.079C368.541,556.079 364.921,552.459 364.921,548C364.921,543.541 368.541,539.921 373,539.921Z" style="fill:rgb(81,81,81);"/>
</g>
<g transform="matrix(-0.968511,0.830669,-0.415125,-0.48401,21.6275,7.55916)">
<path d="M12.767,5.853L8.574,2.453L4.281,15.498L11.041,21.088L12.767,5.853Z" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.27848,0,0,0.27848,-93.8731,-137.607)">
<circle cx="373" cy="548" r="9" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.520392,0,0,0.520392,-187.619,-280.491)">
<circle cx="373" cy="548" r="9" style="fill:rgb(90,90,90);"/>
<g transform="matrix(-0.708254,0.607453,-0.311769,-0.363504,18.3339,5.97349)">
<path d="M15.46,-0.372L10.513,-4.513L7.785,17.064L9.354,18.31L15.46,-0.372Z" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.351922,0,0,0.351922,-125.28,-189.17)">
<circle cx="373" cy="548" r="9" style="fill:rgb(110,110,110);"/>
<g transform="matrix(0.573144,0,0,0.573144,-206.783,-308.893)">
<circle cx="373" cy="548" r="9" style="fill:rgb(108,110,138);"/>
</g>
<g transform="matrix(0.156118,0,0,0.100562,-53.1495,-52.3295)">
<circle cx="373" cy="548" r="9" style="fill:rgb(204,204,204);"/>
<g transform="matrix(0.387597,0,0,0.387597,-138.644,-207.335)">
<circle cx="373" cy="548" r="9" style="fill:rgb(147,152,172);"/>
</g>
<g transform="matrix(0.171944,0,0,0.110756,-59.4563,-56.3408)">
<circle cx="373" cy="548" r="9" style="fill:rgb(225,230,242);"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

82
index.html
View File

@ -451,7 +451,7 @@
<path d="M1420,108.734C1426.21,108.734 1431.24,113.778 1431.24,120L1431.24,730C1431.24,736.222 1426.21,741.266 1420,741.266L30,741.266C23.791,741.266 18.757,736.222 18.757,730L18.757,120C18.757,113.778 23.791,108.734 30,108.734L1420,108.734ZM41.243,131.266L41.243,718.734L1408.76,718.734L1408.76,131.266L41.243,131.266Z" style="fill:rgb(105,168,216);"/>
</g>
<svg id="led-on" x="100" y="100" width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:none;">
<svg id="led-on" x="0" y="0" width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.09178,0,0,1.09178,-234.48,-360.035)">
<circle cx="223.927" cy="338.927" r="8.927" style="fill:rgb(101,29,28);"/>
</g>
@ -466,7 +466,7 @@
</g>
</svg>
<svg id="led-off" x="130" y="100" width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:none;">
<svg id="led-off" x="0" y="0" width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.04197,0,0,1.04197,-222.88,-342.706)">
<g transform="matrix(1.04781,0,0,1.04781,-11.1324,-16.6304)">
<circle cx="223.927" cy="338.927" r="8.927" style="fill:rgb(69,23,22);"/>
@ -483,75 +483,81 @@
</g>
</svg>
<svg id="switch-mid" x="100" y="150" width="20" height="30" viewBox="0 0 20 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:none;">
<svg id="switch-up" x="0" y="0" width="20" height="30" viewBox="0 0 20 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<circle cx="373" cy="548" r="9" style="fill:rgb(41,41,41);"/>
</g>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(132,132,132);"/>
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(170,170,170);"/>
</g>
<g transform="matrix(0.380447,0,0,0.380447,-133.815,-192.259)">
<circle cx="373" cy="548" r="9" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.079C367.524,538.079 363.079,542.524 363.079,548C363.079,553.476 367.524,557.921 373,557.921C378.476,557.921 382.921,553.476 382.921,548C382.921,542.524 378.476,538.079 373,538.079ZM373,538.5C378.243,538.5 382.5,542.757 382.5,548C382.5,553.243 378.243,557.5 373,557.5C367.757,557.5 363.5,553.243 363.5,548C363.5,542.757 367.757,538.5 373,538.5ZM373,539.5C368.309,539.5 364.5,543.309 364.5,548C364.5,552.691 368.309,556.5 373,556.5C377.691,556.5 381.5,552.691 381.5,548C381.5,543.309 377.691,539.5 373,539.5ZM373,539.921C377.459,539.921 381.079,543.541 381.079,548C381.079,552.459 377.459,556.079 373,556.079C368.541,556.079 364.921,552.459 364.921,548C364.921,543.541 368.541,539.921 373,539.921Z" style="fill:rgb(81,81,81);"/>
</g>
<g transform="matrix(0.805188,0.989796,-0.494648,0.40239,4.35621,2.01601)">
<path d="M13.062,8.009L7.943,7.807L7.095,11.574L13.787,12.281L13.062,8.009Z" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.27848,0,0,0.27848,-93.8731,-137.607)">
<circle cx="373" cy="548" r="9" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.520392,0,0,0.520392,-188.79,-266.896)">
<circle cx="373" cy="548" r="9" style="fill:rgb(90,90,90);"/>
<g transform="matrix(-0.708254,0.607453,-0.311769,-0.363504,18.3339,5.97349)">
<path d="M15.46,-0.372L10.513,-4.513L7.785,17.064L9.354,18.31L15.46,-0.372Z" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.351922,0,0,0.351922,-126.923,-174.686)">
<circle cx="373" cy="548" r="9" style="fill:rgb(110,110,110);"/>
<g transform="matrix(0.573144,0,0,0.573144,-206.783,-308.893)">
<circle cx="373" cy="548" r="9" style="fill:rgb(108,110,138);"/>
</g>
<g transform="matrix(0.156118,0,0,0.100562,-55.0229,-37.589)">
<circle cx="373" cy="548" r="9" style="fill:rgb(204,204,204);"/>
<g transform="matrix(0.387597,0,0,0.387597,-138.644,-207.335)">
<circle cx="373" cy="548" r="9" style="fill:rgb(147,152,172);"/>
</g>
<g transform="matrix(0.171944,0,0,0.110756,-59.4563,-56.3408)">
<circle cx="373" cy="548" r="9" style="fill:rgb(225,230,242);"/>
</g>
</svg>
<svg id="switch-up" x="130" y="150" width="20" height="30" viewBox="0 0 20 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:none;">
<svg id="switch-mid" x="0" y="0" width="20" height="30" viewBox="0 0 20 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<circle cx="373" cy="548" r="9" style="fill:rgb(41,41,41);"/>
</g>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(132,132,132);"/>
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(170,170,170);"/>
</g>
<g transform="matrix(0.325165,0,0,0.325165,-111.873,-164.24)">
<circle cx="373" cy="548" r="9" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.079C367.524,538.079 363.079,542.524 363.079,548C363.079,553.476 367.524,557.921 373,557.921C378.476,557.921 382.921,553.476 382.921,548C382.921,542.524 378.476,538.079 373,538.079ZM373,538.5C378.243,538.5 382.5,542.757 382.5,548C382.5,553.243 378.243,557.5 373,557.5C367.757,557.5 363.5,553.243 363.5,548C363.5,542.757 367.757,538.5 373,538.5ZM373,539.5C368.309,539.5 364.5,543.309 364.5,548C364.5,552.691 368.309,556.5 373,556.5C377.691,556.5 381.5,552.691 381.5,548C381.5,543.309 377.691,539.5 373,539.5ZM373,539.921C377.459,539.921 381.079,543.541 381.079,548C381.079,552.459 377.459,556.079 373,556.079C368.541,556.079 364.921,552.459 364.921,548C364.921,543.541 368.541,539.921 373,539.921Z" style="fill:rgb(81,81,81);"/>
</g>
<g transform="matrix(-0.968511,0.830669,-0.415125,-0.48401,21.6275,7.55916)">
<path d="M12.767,5.853L8.574,2.453L4.281,15.498L11.041,21.088L12.767,5.853Z" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.27848,0,0,0.27848,-93.8731,-137.607)">
<circle cx="373" cy="548" r="9" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.520392,0,0,0.520392,-187.619,-280.491)">
<circle cx="373" cy="548" r="9" style="fill:rgb(90,90,90);"/>
<g transform="matrix(0.573144,0,0,0.573144,-207.941,-298.925)">
<circle cx="373" cy="548" r="9" style="fill:rgb(108,110,138);"/>
</g>
<g transform="matrix(0.351922,0,0,0.351922,-125.28,-189.17)">
<circle cx="373" cy="548" r="9" style="fill:rgb(110,110,110);"/>
<g transform="matrix(0.387597,0,0,0.387597,-139.803,-197.367)">
<circle cx="373" cy="548" r="9" style="fill:rgb(147,152,172);"/>
</g>
<g transform="matrix(0.156118,0,0,0.100562,-53.1495,-52.3295)">
<circle cx="373" cy="548" r="9" style="fill:rgb(204,204,204);"/>
<g transform="matrix(0.171944,0,0,0.110756,-60.6146,-46.3729)">
<circle cx="373" cy="548" r="9" style="fill:rgb(225,230,242);"/>
</g>
</svg>
<svg id="switch-down" x="160" y="150" width="20" height="30" viewBox="0 0 20 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:none;">
<svg id="switch-down" x="0" y="0" width="20" height="30" viewBox="0 0 20 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<circle cx="373" cy="548" r="9" style="fill:rgb(41,41,41);"/>
</g>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(132,132,132);"/>
<path d="M373,538.289C367.641,538.289 363.289,542.641 363.289,548C363.289,553.359 367.641,557.711 373,557.711C378.359,557.711 382.711,553.359 382.711,548C382.711,542.641 378.359,538.289 373,538.289ZM373,539.711C377.575,539.711 381.289,543.425 381.289,548C381.289,552.575 377.575,556.289 373,556.289C368.425,556.289 364.711,552.575 364.711,548C364.711,543.425 368.425,539.711 373,539.711Z" style="fill:rgb(170,170,170);"/>
</g>
<g transform="matrix(0.325165,0,0,0.325165,-111.873,-162.191)">
<circle cx="373" cy="548" r="9" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.988744,0,0,0.988744,-358.802,-526.832)">
<path d="M373,538.079C367.524,538.079 363.079,542.524 363.079,548C363.079,553.476 367.524,557.921 373,557.921C378.476,557.921 382.921,553.476 382.921,548C382.921,542.524 378.476,538.079 373,538.079ZM373,538.5C378.243,538.5 382.5,542.757 382.5,548C382.5,553.243 378.243,557.5 373,557.5C367.757,557.5 363.5,553.243 363.5,548C363.5,542.757 367.757,538.5 373,538.5ZM373,539.5C368.309,539.5 364.5,543.309 364.5,548C364.5,552.691 368.309,556.5 373,556.5C377.691,556.5 381.5,552.691 381.5,548C381.5,543.309 377.691,539.5 373,539.5ZM373,539.921C377.459,539.921 381.079,543.541 381.079,548C381.079,552.459 377.459,556.079 373,556.079C368.541,556.079 364.921,552.459 364.921,548C364.921,543.541 368.541,539.921 373,539.921Z" style="fill:rgb(81,81,81);"/>
</g>
<g transform="matrix(-0.968511,0.830669,-0.415125,-0.48401,21.6275,7.55916)">
<path d="M18.63,3.057L14.934,-9.454L9.832,-0.566L11.858,6.975L18.63,3.057Z" style="fill:rgb(164,164,164);"/>
<g transform="matrix(0.27848,0,0,0.27848,-93.8731,-137.607)">
<circle cx="373" cy="548" r="9" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.520392,0,0,0.520392,-187.619,-261.491)">
<circle cx="373" cy="548" r="9" style="fill:rgb(90,90,90);"/>
<g transform="matrix(-0.708254,0.607453,-0.311769,-0.363504,18.3339,5.97349)">
<path d="M14.762,1.213L11.911,-7.678L22.437,-16.222L23.583,-12.409L14.762,1.213Z" style="fill:rgb(208,208,208);"/>
</g>
<g transform="matrix(0.351922,0,0,0.351922,-125.784,-169.17)">
<circle cx="373" cy="548" r="9" style="fill:rgb(110,110,110);"/>
<g transform="matrix(0.573144,0,0,0.573144,-206.783,-289.274)">
<circle cx="373" cy="548" r="9" style="fill:rgb(108,110,138);"/>
</g>
<g transform="matrix(0.156118,0,0,0.100562,-54.1495,-31.9118)">
<circle cx="373" cy="548" r="9" style="fill:rgb(204,204,204);"/>
<g transform="matrix(0.387597,0,0,0.387597,-138.644,-187.716)">
<circle cx="373" cy="548" r="9" style="fill:rgb(147,152,172);"/>
</g>
<g transform="matrix(0.171944,0,0,0.110756,-59.4563,-36.7216)">
<circle cx="373" cy="548" r="9" style="fill:rgb(225,230,242);"/>
</g>
</svg>

7
js/panel.js
View File

@ -607,6 +607,9 @@ panel.createLed = function(id, x, y) {
var ledOnElem = document.getElementById('led-on');
var ledOffElem = document.getElementById('led-off');
ledOnElem.style.display = 'none';
ledOffElem.style.display = 'none';
var onElem = ledOnElem.cloneNode(true);
onElem.id = id + '-on';
onElem.x.baseVal.value = '' + x;
@ -659,6 +662,10 @@ panel.createSwitch = function(id, type, x, y, upperCmd, lowerCmd) {
var switchUpElem = document.getElementById('switch-up');
var switchDownElem = document.getElementById('switch-down');
switchMidElem.style.display = 'none';
switchUpElem.style.display = 'none';
switchDownElem.style.display = 'none';
var midElem = switchMidElem.cloneNode(true);
midElem.id = id + '-mid';
midElem.x.baseVal.value = '' + x;