Fixed bugs found in rotation transform feature

Signed-off-by: chanhoonseng <chanhoonseng3101@gmail.com>

designer.html

@@ -833,7 +833,6 @@ function mysave(data) {
             tmp["top"] = $("#"+key).css("top");
             tmp["width"] = $("#"+key).width();
             tmp["height"] = $("#"+key).height();
-            tmp["rotate"] = $("#"+key).css("transform");
             tmp["type"] = $("#"+key).attr("data-type");
             if ( $("#"+key).attr("data-type") == "data" ) {
                 if ( (varname == key) && (varattr == "normal") ) {
@@ -879,7 +878,8 @@ function mysave(data) {
                     $(".title", "#"+key).css("font-size", header["size"] + "px");
                     $(".title", "#"+key).css("font-weight", header["weight"]);
 
- 
+                    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
+
             	    unit = {};
             	    unit["title"] = $("#elem_unit_text").val().trim();
             	    //unit["color"] = $(".varval", "#"+key).css("color");
@@ -905,7 +905,9 @@ function mysave(data) {
             	    //header["color"] = $(".title", "#"+key).css("color");
             	    header["size"] = parseInt($(".title", "#"+key).css("font-size")) || 28;
                     tmp["background_color"] = $("#"+key).css("background-color");
-		    
+		    tmp["rotate"] = $("#"+key).css("transform");
+
+
                     var fontWeight = $(".title", "#"+key).css("font-weight");
                     if (fontWeight == 'bold' || fontWeight == '700') {
             	        header["weight"] = "700";
@@ -944,6 +946,7 @@ function mysave(data) {
                     tmp["off"] = $("#offvalue").val();
                     tmp["off_condition"] = $("#offexpression").val();
                     tmp["icon"] = $("#"+key).attr("data-icon");
+		    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
                     if ($('#elem_linkhtml').is(":checked")) {
                         tmp["linkhtml"] = "true";
                         $("#"+key).attr("data-linkhtml", "true");
@@ -966,6 +969,7 @@ function mysave(data) {
                     tmp["off_condition"] = $("#"+key).attr("data-offexpression");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                     tmp["trend"] = $("#"+key).attr("data-trend");
+		    tmp["rotate"] = $("#"+key).css("transform");
                 }
            /* 
            } else if ( $("#"+key).attr("data-type") == "commbit" ) {
@@ -1013,6 +1017,7 @@ function mysave(data) {
                     var data_condition = $("#elem_condition_range").val();
             	    tmp["cond"] = data_condition;
             	    tmp["dict"] = unit_text;
+		    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
              	    if ($('#elem_linkhtml').is(":checked")) {
                         tmp["linkhtml"] = "true";
                         $("#"+key).attr("data-linkhtml", "true");
@@ -1047,6 +1052,7 @@ function mysave(data) {
             	    tmp["background_color"] = $("#"+key).css("background-color");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                     tmp["trend"] = $("#"+key).attr("data-trend");
+		    tmp["rotate"] = $("#"+key).css("transform");
                     header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -1089,7 +1095,6 @@ function mysave(data) {
             tmp["top"] = $("#"+key).css("top");
             tmp["width"] = $("#"+key).width();
             tmp["height"] = $("#"+key).height();
-            tmp["rotate"] = $("#"+key).css("transform");
             tmp["type"] = $("#"+key).attr("data-type");
             
             if ( $("#"+key).attr("data-type") == "data" ) {
@@ -1098,6 +1103,7 @@ function mysave(data) {
             	    tmp["formula"] = $("#elem_formula").val();
              	    tmp["lesser"] = $("#elem_lesser_range").val();
             	    tmp["larger"] = $("#elem_larger_range").val();
+		    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
             
             	    header = {};
             	    header["title"] = $("#elem_title_text").val().trim();
@@ -1147,7 +1153,8 @@ function mysave(data) {
            	    //tmp["max"] = $("#"+key).attr("max");
                     tmp["background_color"] = $("#"+key).css("background-color");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
-                    tmp["trend"] = $("#"+key).attr("data-trend"); 
+                    tmp["trend"] = $("#"+key).attr("data-trend");
+		    tmp["rotate"] = $("#"+key).css("transform");
             	    header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -1178,6 +1185,8 @@ function mysave(data) {
                     tmp["off"] = $("#offvalue").val();
                     tmp["off_condition"] = $("#offexpression").val();
 		    tmp["icon"] = $("#"+key).attr("data-icon");
+		    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
+
                     if ($('#elem_linkhtml').is(":checked")) {
                         tmp["linkhtml"] = "true";
                         $("#"+key).attr("data-linkhtml", "true");
@@ -1193,6 +1202,7 @@ function mysave(data) {
                         $("#"+key).attr("data-trend","false");
                     }
                 } else {
+		    tmp["rotate"] = $("#"+key).css("transform");
 		    tmp["icon"] = $("#"+key).attr("data-icon");
                     tmp["on"] = $("#"+key).attr("data-on");
                     tmp["on_condition"] = $("#"+key).attr("data-onexpression");
@@ -1266,6 +1276,7 @@ function mysave(data) {
                     }
             	    tmp["cond"] = data_condition;
             	    tmp["dict"] = unit_text;
+		    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
              	    
             	    header = {};
             	    header["title"] = $("#elem_title_text").val().trim();
@@ -1282,6 +1293,7 @@ function mysave(data) {
             	    tmp["background_color"] = $("#"+key).css("background-color");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                     tmp["trend"] = $("#"+key).attr("data-trend");
+		    tmp["rotate"] = $("#"+key).css("transform");
                     header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -1309,7 +1321,6 @@ function mysave(data) {
         tmp["top"] = $("#"+hkey).css("top");
         tmp["width"] = $("#"+hkey).width();
         tmp["height"] = $("#"+hkey).height();
-        tmp["rotate"] = $("#"+hkey).css("transform");
         tmp["type"] = $("#"+hkey).attr("data-type");
         header = {};
         if (token == hkey) {
@@ -1317,6 +1328,7 @@ function mysave(data) {
             //header["color"] = $(".title", "#"+key).css("color");
             header["size"] = $("#elem_title_size").val();
             header["weight"] = $("#elem_title_style option:selected").val();
+	    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
             if ($('#background_color').val().length > 0) {
                 tmp["background_color"] = $('#background_color').val();
             } else {
@@ -1332,6 +1344,7 @@ function mysave(data) {
             header["size"] = parseInt($(".title", "#"+hkey).css("font-size")) || 28;
             header["weight"] = parseInt($(".title", "#"+hkey).css("font-weight")) || 28;
             tmp["background_color"] = $("#"+hkey).css("background-color");
+	    tmp["rotate"] = $("#"+hkey).css("transform");
          
 	    var fontWeight = $(".title", "#"+hkey).css("font-weight");
 	    if (fontWeight == 'bold' || fontWeight == '700') {
@@ -1355,7 +1368,6 @@ function mysave(data) {
             tmp["top"] = $("#"+key).css("top");
             tmp["width"] = $("#"+key).width();
             tmp["height"] = $("#"+key).height();
-            tmp["rotate"] = $("#"+key).css("transform");
             tmp["type"] = $("#"+key).attr("data-type");
             //if ( $("#"+key).attr("data-type") == "calc" ) {
                 if (varname == key) {
@@ -1363,6 +1375,7 @@ function mysave(data) {
             	    tmp["formula"] = $("#elem_formula").val();
              	    tmp["lesser"] = $("#elem_lesser_range").val();
             	    tmp["larger"] = $("#elem_larger_range").val();
+		    tmp["rotate"] = "rotate(" + $("#rotate").val() + "deg)";
             
             	    header = {};
             	    header["title"] = $("#elem_title_text").val().trim();
@@ -1387,6 +1400,7 @@ function mysave(data) {
             	    tmp["formula"] = $("#"+key).attr("data-formula");
              	    tmp["lesser"] = $("#"+key).attr("data-lesser");
             	    tmp["larger"] = $("#"+key).attr("data-larger");
+		    tmp["rotate"] = $("#"+key).css("transform");
              	    //tmp["min"] = $("#"+key).attr("min");
            	        //tmp["max"] = $("#"+key).attr("max");
                     tmp["background_color"] = $("#"+key).css("background-color"); 
@@ -1427,6 +1441,7 @@ function mysave(data) {
             console.log("Error.")
         }
     });
+
 }
     
 function highlight(mydata) {
@@ -1491,8 +1506,6 @@ function highlight(mydata) {
             $("#background_color").val($("#"+varname).css("background-color"));
         }
   
-        var style = $(el).attr('style'),
-        rotation = parseInt(style.substr(style.indexOf("rotate("+7));
         $("#rotate").val($("#"+varname).css("transform"));
 
     } else if (vartype == "data") {

static/relay_inactive.svg

@@ -10,8 +10,8 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="124.70694mm"
-   height="56.792034mm"
-   viewBox="0 0 441.87498 201.23162"
+   height="70.152382mm"
+   viewBox="0 0 441.87498 248.57144"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -26,10 +26,10 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="-409.10718"
-     inkscape:cy="364.9541"
+     inkscape:cx="-1176.25"
+     inkscape:cy="390.66836"
      inkscape:document-units="px"
-     inkscape:current-layer="layer2"
+     inkscape:current-layer="layer1"
      showgrid="false"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -55,7 +55,8 @@
   <g
      inkscape:groupmode="layer"
      id="layer2"
-     inkscape:label="Ebene 2">
+     inkscape:label="Ebene 2"
+     transform="translate(-2.475586e-6,21.625532)">
     <rect
        style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:14;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
        id="rect4134"
@@ -68,7 +69,7 @@
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-624.73212,-696.0847)">
+     transform="translate(-624.73214,-674.45917)">
     <path
        style="fill:#000000"
        d="m 774.84375,896.01981 c -6.94347,-2.31673 -16.34637,-12.19926 -18.21699,-19.14621 l -1.54444,-5.73562 -65.1751,0 -65.1751,0 0,-3.50694 0,-3.50695 65.1751,0 65.1751,0 1.54444,-5.73562 c 0.95758,-3.55621 3.85579,-8.04696 7.62726,-11.81844 9.87305,-9.87305 21.8044,-11.68483 34.51488,-5.24108 26.9248,13.64992 18.29247,54.34134 -11.86797,55.94372 -3.93903,0.20927 -9.36476,-0.35451 -12.05718,-1.25286 z m 24.23561,-9.8298 c 6.76913,-5.16308 9.89483,-12.38755 9.07064,-20.96507 -1.16268,-12.10021 -9.07514,-19.5369 -21.72889,-20.42232 -6.76032,-0.47303 -8.88369,-0.0229 -12.96116,2.74807 -7.52816,5.11585 -11.25561,11.62523 -11.25561,19.65606 0,10.10536 5.26203,18.38393 14.0285,22.07054 6.08366,2.5584 17.46019,1.02107 22.84652,-3.08728 z m 96.24906,-62.73379 c -22.18718,-11.72682 -21.94152,-41.93696 0.43462,-53.44671 6.47766,-3.33195 19.19812,-3.54364 25.76231,-0.42872 6.64127,3.15149 14.19149,11.97967 16.00481,18.7138 l 1.53232,5.69061 63.77232,0 c 62.8371,0 63.7723,0.0411 63.7723,2.80556 0,2.76441 -0.9352,2.80556 -63.7723,2.80556 l -63.77232,0 -1.51588,5.62953 c -1.8608,6.91048 -8.46896,14.66868 -15.58758,18.30033 -7.04867,3.59596 -19.75783,3.56257 -26.6306,-0.07 z m 26.42073,-7.23023 c 13.57355,-8.38892 13.23982,-30.6878 -0.58718,-39.23335 -15.39199,-9.51278 -35.51318,1.70452 -35.51318,19.79812 0,18.62757 19.99212,29.39066 36.10036,19.43523 z M 770.26379,751.97686 c -6.82045,-4.3254 -12.84443,-12.11134 -14.43864,-18.66179 l -0.93884,-3.85764 -65.0771,0 -65.07709,0 0,-3.50695 0,-3.50694 65.1751,0 65.1751,0 1.54444,-5.73563 c 2.14201,-7.95482 11.50846,-17.051 20.00807,-19.43075 26.35978,-7.38028 48.14305,20.98146 33.95851,44.21388 -8.52499,13.96285 -27.19321,18.81664 -40.32955,10.48582 z m 24.76597,-4.83587 c 2.57386,-1.07543 6.4989,-4.34035 8.72231,-7.25539 3.44307,-4.5141 4.04255,-6.58058 4.04255,-13.93512 0,-7.35454 -0.59948,-9.42102 -4.04255,-13.93512 -13.54762,-17.76184 -41.54773,-8.3706 -41.54773,13.93512 0,17.02447 16.81563,27.87983 32.82542,21.19051 z"

static/switch_green.svg

@@ -9,9 +9,9 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="283.02859mm"
-   height="61.242222mm"
-   viewBox="0 0 1002.8572 217.00001"
+   width="283.02856mm"
+   height="43.502579mm"
+   viewBox="0 0 1002.8571 154.14301"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -26,8 +26,8 @@
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="289.99992"
-     inkscape:cy="158.93764"
+     inkscape:cx="712.85709"
+     inkscape:cy="-255.34802"
      inkscape:document-units="px"
      inkscape:current-layer="layer2"
      showgrid="false"
@@ -48,7 +48,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -56,23 +56,28 @@
      inkscape:groupmode="layer"
      id="layer2"
      inkscape:label="Ebene 2"
-     transform="translate(2.8571253,95.511443)">
+     transform="translate(2.8571265,27.567448)">
     <rect
        style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:14;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
        id="rect4134"
-       width="1000"
+       width="1000.0001"
        height="154.14301"
-       x="-2.8571863"
-       y="-64.082947" />
+       x="-2.857157"
+       y="-27.567444" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:15.00000191;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 637.14281,-19.138743 c -280,0 -291.42857,0 -291.42857,0"
+       id="path4136"
+       inkscape:connector-curvature="0" />
   </g>
   <g
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-290.31042,-360.01413)">
+     transform="translate(-207.45324,-122.87116)">
     <path
        style="fill:#000000"
-       d="m 623.77644,537.5018 c -15.82454,-8.93336 -31.11511,-30.80785 -34.06325,-48.73045 l -2.01412,-12.24464 -147.26575,0 c -144.90301,0 -147.26577,-0.11558 -147.26577,-7.20502 0,-7.07519 2.63773,-7.222 146.35069,-8.14635 l 146.35069,-0.94131 5.91189,-17.76394 c 7.52899,-22.62298 19.26597,-36.53831 37.64099,-44.62707 13.18504,-5.80413 28.88184,-6.40032 168.50768,-6.40032 153.54562,0 154.0049,0.0224 167.31889,8.13763 16.13563,9.83514 29.87067,28.51662 34.55444,46.99848 l 3.46058,13.65522 144.9521,0.94167 c 142.3142,0.92454 144.9521,1.07279 144.9521,8.14636 0,7.08699 -2.3606,7.20465 -144.5441,7.20465 -134.8753,0 -144.6616,0.42383 -146.3008,6.33606 -11.84505,42.71991 -33.19877,62.45528 -67.57661,62.45528 -19.999,0 -30.89804,-4.72615 -44.34706,-19.2302 -26.63397,-28.72327 -30.04604,-79.97557 -7.21624,-108.39582 l 7.9981,-9.95665 -96.11424,0 -96.11427,0 7.94591,10.76982 c 18.31854,24.82881 19.93428,68.30528 3.52586,94.87343 -18.8819,30.57311 -56.61403,41.07794 -86.64771,24.12317 z m 51.93084,-13.4755 c 22.95863,-12.02376 35.39551,-37.29882 31.80184,-64.62984 -2.75984,-20.98942 -23.27027,-46.25656 -40.53201,-49.93209 -27.9773,-5.95718 -54.54067,12.85763 -62.85921,44.5231 -7.22692,27.51014 5.56949,57.29148 30.07,69.98235 16.28499,8.43535 25.49652,8.44788 41.51938,0.0565 z m 274.74404,3.20397 c 12.76439,-4.04422 29.57407,-22.20359 34.58506,-37.36202 12.38738,-37.47242 -14.44237,-82.13287 -49.34123,-82.13287 -13.89246,0 -36.68051,14.51835 -44.88286,28.59505 -11.12878,19.0989 -10.09423,48.98596 2.37523,68.61784 5.24901,8.26408 9.8919,15.05013 10.31747,15.08012 0.42551,0.03 6.488,2.40236 13.47215,5.27197 15.35172,6.30764 18.99427,6.51766 33.47418,1.92991 z"
+       d="m 540.91926,268.87459 c -15.82454,-8.99503 -31.1151,-31.02056 -34.06325,-49.06692 l -2.01412,-12.32918 -147.26575,0 c -144.90301,0 -147.26577,-0.11637 -147.26577,-7.25478 0,-7.12403 2.63773,-7.27186 146.35069,-8.2026 l 146.35069,-0.9478 5.89065,-17.82234 c 7.42003,-22.44949 16.68492,-34.08333 34.43995,-43.24585 25.4485,-13.13275 57.60126,-7.10061 77.22917,14.48888 21.09429,23.20244 24.47622,71.59097 6.99546,100.09086 -18.88191,30.78421 -56.61404,41.36158 -86.64772,24.28973 z m 51.93084,-13.56854 c 22.95863,-12.10678 35.39552,-37.55636 31.80184,-65.0761 -2.75984,-21.13435 -23.27027,-46.57595 -40.53201,-50.27686 -27.9773,-5.99831 -54.54067,12.9464 -62.85921,44.83053 -7.22692,27.70009 5.56949,57.68707 30.07,70.46556 16.28499,8.49359 25.49652,8.50621 41.51938,0.0568 z m 231.74605,16.25738 c -21.47378,-11.03927 -39.68253,-43.43924 -39.68253,-70.60961 0,-45.79885 28.70604,-78.44491 68.65622,-78.07963 29.03709,0.26552 55.44979,22.95814 63.37577,54.44961 l 3.46056,13.74951 144.95213,0.94817 c 142.3142,0.93092 144.9521,1.0802 144.9521,8.20261 0,7.13592 -2.3606,7.2544 -144.544,7.2544 -134.87537,0 -144.66162,0.42675 -146.30088,6.3798 -8.62619,31.32542 -20.035,47.64493 -40.00548,57.22475 -14.36771,6.89214 -41.92228,7.1334 -54.86389,0.48039 z m 42.99797,-13.03128 c 12.76445,-4.07215 29.57413,-22.35691 34.58512,-37.62001 12.38737,-37.73116 -14.44237,-82.69998 -49.34129,-82.69998 -13.89246,0 -36.68051,14.61859 -44.88286,28.7925 -11.12878,19.23078 -10.09417,49.32419 2.37523,69.09163 5.24908,8.32114 9.8919,15.15405 10.31747,15.18424 0.42557,0.0302 6.48806,2.41896 13.47215,5.30838 15.35172,6.3512 18.99426,6.56266 33.47418,1.94324 z"
        id="path4134"
        inkscape:connector-curvature="0" />
   </g>

static/switch_inactive.svg

@@ -10,8 +10,8 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="283.02856mm"
-   height="61.242218mm"
-   viewBox="0 0 1002.8571 217"
+   height="43.502579mm"
+   viewBox="0 0 1002.8571 154.14301"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -26,7 +26,7 @@
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="-100.32162"
+     inkscape:cx="712.85709"
      inkscape:cy="-255.34802"
      inkscape:document-units="px"
      inkscape:current-layer="layer2"
@@ -48,7 +48,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -56,7 +56,7 @@
      inkscape:groupmode="layer"
      id="layer2"
      inkscape:label="Ebene 2"
-     transform="translate(2.8571265,90.424439)">
+     transform="translate(2.8571265,27.567448)">
     <rect
        style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:14;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
        id="rect4134"
@@ -69,7 +69,7 @@
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-207.45324,-60.014164)">
+     transform="translate(-207.45324,-122.87116)">
     <path
        style="fill:#000000"
        d="m 540.91926,268.87459 c -15.82454,-8.99503 -31.1151,-31.02056 -34.06325,-49.06692 l -2.01412,-12.32918 -147.26575,0 c -144.90301,0 -147.26577,-0.11637 -147.26577,-7.25478 0,-7.12403 2.63773,-7.27186 146.35069,-8.2026 l 146.35069,-0.9478 5.89065,-17.82234 c 7.42003,-22.44949 16.68492,-34.08333 34.43995,-43.24585 25.4485,-13.13275 57.60126,-7.10061 77.22917,14.48888 21.09429,23.20244 24.47622,71.59097 6.99546,100.09086 -18.88191,30.78421 -56.61404,41.36158 -86.64772,24.28973 z m 51.93084,-13.56854 c 22.95863,-12.10678 35.39552,-37.55636 31.80184,-65.0761 -2.75984,-21.13435 -23.27027,-46.57595 -40.53201,-50.27686 -27.9773,-5.99831 -54.54067,12.9464 -62.85921,44.83053 -7.22692,27.70009 5.56949,57.68707 30.07,70.46556 16.28499,8.49359 25.49652,8.50621 41.51938,0.0568 z m 231.74605,16.25738 c -21.47378,-11.03927 -39.68253,-43.43924 -39.68253,-70.60961 0,-45.79885 28.70604,-78.44491 68.65622,-78.07963 29.03709,0.26552 55.44979,22.95814 63.37577,54.44961 l 3.46056,13.74951 144.95213,0.94817 c 142.3142,0.93092 144.9521,1.0802 144.9521,8.20261 0,7.13592 -2.3606,7.2544 -144.544,7.2544 -134.87537,0 -144.66162,0.42675 -146.30088,6.3798 -8.62619,31.32542 -20.035,47.64493 -40.00548,57.22475 -14.36771,6.89214 -41.92228,7.1334 -54.86389,0.48039 z m 42.99797,-13.03128 c 12.76445,-4.07215 29.57413,-22.35691 34.58512,-37.62001 12.38737,-37.73116 -14.44237,-82.69998 -49.34129,-82.69998 -13.89246,0 -36.68051,14.61859 -44.88286,28.7925 -11.12878,19.23078 -10.09417,49.32419 2.37523,69.09163 5.24908,8.32114 9.8919,15.15405 10.31747,15.18424 0.42557,0.0302 6.48806,2.41896 13.47215,5.30838 15.35172,6.3512 18.99426,6.56266 33.47418,1.94324 z"

static/switch_red.svg

@@ -9,9 +9,9 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="282.22223mm"
-   height="61.242222mm"
-   viewBox="0 0 1000 217.00001"
+   width="283.02856mm"
+   height="43.502579mm"
+   viewBox="0 0 1002.8571 154.14301"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -26,8 +26,8 @@
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="1114.5778"
-     inkscape:cy="-50.740919"
+     inkscape:cx="712.85709"
+     inkscape:cy="-255.34802"
      inkscape:document-units="px"
      inkscape:current-layer="layer2"
      showgrid="false"
@@ -48,7 +48,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -56,23 +56,28 @@
      inkscape:groupmode="layer"
      id="layer2"
      inkscape:label="Ebene 2"
-     transform="translate(2.8571289,0.19727124)">
+     transform="translate(2.8571265,27.567448)">
     <rect
        style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:14;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
        id="rect4134"
-       width="1000.0002"
-       height="285.51703"
-       x="-2.8571899"
-       y="-34.428547" />
+       width="1000.0001"
+       height="154.14301"
+       x="-2.857157"
+       y="-27.567444" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:16.61470604;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 665.39692,-16.955091 C 380.31727,-149.89383 380.31727,-149.89383 380.31727,-149.89383"
+       id="path4138"
+       inkscape:connector-curvature="0" />
   </g>
   <g
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-261.11405,-264.62129)">
+     transform="translate(-207.45324,-122.87116)">
     <path
        style="fill:#000000"
-       d="m 591.72294,507.92577 c -15.82455,-8.85017 -31.11511,-30.52099 -34.06325,-48.27674 l -2.01413,-12.13061 -147.26577,0 c -144.90302,0 -147.26578,-0.1145 -147.26578,-7.13795 0,-7.0093 2.63773,-7.15476 146.35071,-8.0705 l 146.3507,-0.93254 5.89065,-17.53531 c 7.42004,-22.08796 16.68493,-33.53444 34.43996,-42.54942 25.4485,-12.92125 57.60127,-6.98624 77.22918,14.25556 21.09429,22.82876 24.47623,70.43803 6.99546,98.47895 -18.88191,30.28846 -56.61404,40.69547 -86.64773,23.89856 z m 51.93084,-13.35003 c 22.95864,-11.9118 35.39553,-36.95153 31.80185,-64.02808 -2.75984,-20.79401 -23.27027,-45.82589 -40.53202,-49.46719 -27.9773,-5.9017 -54.54068,12.73791 -62.85922,44.10856 -7.22692,27.25401 5.5695,56.75806 30.07002,69.33076 16.28498,8.35681 25.49651,8.36923 41.51937,0.0559 z m 231.74607,16.11619 c -12.90233,-6.36257 -31.69567,-30.55743 -36.49313,-46.98185 -3.41954,-11.70685 -3.24514,-26.81363 0.61446,-53.23957 0.74234,-5.08264 -23.85533,-24.86703 -109.2584,-87.87871 -60.61903,-44.72563 -110.2619,-82.22139 -110.31748,-83.32394 -0.0555,-1.10251 1.68466,-4.58975 3.8672,-7.74939 3.49297,-5.05667 17.22811,4.08027 114.67162,76.28247 l 110.70346,82.02723 10.90047,-9.39401 c 38.16893,-32.89364 94.70154,-13.24704 107.66127,37.41519 l 3.4606,13.52808 144.95218,0.93291 c 142.3142,0.91592 144.9521,1.06279 144.9521,8.0705 0,7.02101 -2.3606,7.13758 -144.544,7.13758 -134.87541,0 -144.66175,0.41988 -146.30101,6.27705 -8.62614,30.82095 -20.03494,46.87763 -40.00547,56.30319 -14.26367,6.73207 -41.81127,7.02998 -54.86387,0.59327 z m 42.998,-12.94204 c 12.76447,-4.00657 29.57414,-21.99687 34.58514,-37.01416 12.38733,-37.12352 -14.44247,-81.36814 -49.34134,-81.36814 -13.89247,0 -36.68047,14.38316 -44.88287,28.3288 -11.12873,18.92108 -10.0942,48.52986 2.37527,67.97895 5.24907,8.18715 9.89187,14.91001 10.31747,14.93973 0.4256,0.0297 6.488,2.37999 13.47213,5.22287 15.35173,6.24891 18.99427,6.45697 33.4742,1.91195 z"
+       d="m 540.91926,268.87459 c -15.82454,-8.99503 -31.1151,-31.02056 -34.06325,-49.06692 l -2.01412,-12.32918 -147.26575,0 c -144.90301,0 -147.26577,-0.11637 -147.26577,-7.25478 0,-7.12403 2.63773,-7.27186 146.35069,-8.2026 l 146.35069,-0.9478 5.89065,-17.82234 c 7.42003,-22.44949 16.68492,-34.08333 34.43995,-43.24585 25.4485,-13.13275 57.60126,-7.10061 77.22917,14.48888 21.09429,23.20244 24.47622,71.59097 6.99546,100.09086 -18.88191,30.78421 -56.61404,41.36158 -86.64772,24.28973 z m 51.93084,-13.56854 c 22.95863,-12.10678 35.39552,-37.55636 31.80184,-65.0761 -2.75984,-21.13435 -23.27027,-46.57595 -40.53201,-50.27686 -27.9773,-5.99831 -54.54067,12.9464 -62.85921,44.83053 -7.22692,27.70009 5.56949,57.68707 30.07,70.46556 16.28499,8.49359 25.49652,8.50621 41.51938,0.0568 z m 231.74605,16.25738 c -21.47378,-11.03927 -39.68253,-43.43924 -39.68253,-70.60961 0,-45.79885 28.70604,-78.44491 68.65622,-78.07963 29.03709,0.26552 55.44979,22.95814 63.37577,54.44961 l 3.46056,13.74951 144.95213,0.94817 c 142.3142,0.93092 144.9521,1.0802 144.9521,8.20261 0,7.13592 -2.3606,7.2544 -144.544,7.2544 -134.87537,0 -144.66162,0.42675 -146.30088,6.3798 -8.62619,31.32542 -20.035,47.64493 -40.00548,57.22475 -14.36771,6.89214 -41.92228,7.1334 -54.86389,0.48039 z m 42.99797,-13.03128 c 12.76445,-4.07215 29.57413,-22.35691 34.58512,-37.62001 12.38737,-37.73116 -14.44237,-82.69998 -49.34129,-82.69998 -13.89246,0 -36.68051,14.61859 -44.88286,28.7925 -11.12878,19.23078 -10.09417,49.32419 2.37523,69.09163 5.24908,8.32114 9.8919,15.15405 10.31747,15.18424 0.42557,0.0302 6.48806,2.41896 13.47215,5.30838 15.35172,6.3512 18.99426,6.56266 33.47418,1.94324 z"
        id="path4134"
        inkscape:connector-curvature="0" />
   </g>

status.html

@@ -156,7 +156,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("valve_inactive.png") }}'></img>
 </div>
 </div>
 {% else %}
@@ -165,7 +165,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("valve_inactive.png") }}'></img>
 </div>
 </div>
 {% end %}
@@ -197,7 +197,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("commbit_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
@@ -206,7 +206,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("commbit_inactive.svg") }}'></img>
 </div>
 </div>
 {% end %}
@@ -238,7 +238,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
@@ -247,7 +247,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
 </div>
 {% end %}
@@ -279,7 +279,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("TMP_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
@@ -288,7 +288,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("TMP_inactive.svg") }}'></img>
 </div>
 </div>
 {% end %}
@@ -320,7 +320,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("relay_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("relay_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
@@ -329,7 +329,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("relay_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("relay_inactive.svg") }}'></img>
 </div>
 </div>
 {% end %}
@@ -361,7 +361,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("switch_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("switch_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
@@ -370,7 +370,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("switch_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("switch_inactive.svg") }}'></img>
 </div>
 </div>
 {% end %}
@@ -402,7 +402,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("bottle_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("bottle_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
@@ -411,7 +411,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 {% end %}
 <div class="icon">
-<img width='100%' height='100%' src='{{ static_url("bottle_inactive.svg") }}'></img>
+<img width="{{ data['style'][key]['width'] }}px" height="{{ data['style'][key]['height'] }}px" src='{{ static_url("bottle_inactive.svg") }}'></img>
 </div>
 </div>
 {% end %}