Added new feature-div box rotation

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

designer.html

@@ -31,7 +31,7 @@
 {% if data['style'][key]['type'] == "calc" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
-    height:{{ data['style'][key]['height'] }}px;
+    height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};
 
     {% if "background_color" in data['style'][key] %}
         background-color:{{ data['style'][key]['background_color'] }};' 
@@ -68,7 +68,7 @@
 {% if data['style'][key]['type'] == "data" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
-    height:{{ data['style'][key]['height'] }}px;
+    height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};
     
 {% if "background_color" in data['style'][key] %}
 background-color:{{ data['style'][key]['background_color'] }};'
@@ -111,7 +111,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 
 {% if data['style'][key]['type'] == "icon" %}
 {% if data['style'][key]['icon'] == "valve" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -139,7 +139,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% end %}
 
 {% if data['style'][key]['icon'] == "commbit" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -167,7 +167,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% end %}
 
 {% if data['style'][key]['icon'] == "alarm" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -195,7 +195,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% end %}
 
 {% if data['style'][key]['icon'] == "TMP" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -223,7 +223,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% end %}
 
 {% if data['style'][key]['icon'] == "relay" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -251,7 +251,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% end %}
 
 {% if data['style'][key]['icon'] == "switch" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -279,7 +279,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% end %}
 
 {% if data['style'][key]['icon'] == "bottle" %}
-<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};'
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
@@ -312,7 +312,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% if data['style'][key]['type'] == "integer-to-string" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
-    height:{{ data['style'][key]['height'] }}px;
+    height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};
     
 {% if "background_color" in data['style'][key] %}
 background-color:{{ data['style'][key]['background_color'] }};' 
@@ -339,7 +339,7 @@ background-color:{{ data['style'][key]['background_color'] }};'
 {% if data['style'][key]['type'] == "header" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
-    height:{{ data['style'][key]['height'] }}px;
+    height:{{ data['style'][key]['height'] }}px; transform:{{ data['style'][key]['rotate'] }};
 {% if "background_color" in data['style'][key] %}    
 background-color:{{ data['style'][key]['background_color'] }};'
 {% else%}
@@ -412,6 +412,8 @@ data-type="{{ data['style'][key]['type'] }}" class='varbox' id="{{ key }}">
   <option value="offgreater">></option>
 </select>
 <input type="text" id="offvalue" placeholder="number" style="font-size:16pt; width=100px;" disabled/>
+<span class="info">rotate</span>
+<input type="text" id="rotate" placeholder="degree" style="font-size:16pt; width=100px;"/>
 <br /><br />
 <span class="info">Title</span>:
 
@@ -549,6 +551,7 @@ function add() {
     offexpression = $("#offexpression option:selected").val();
     offvalue = $("#offvalue").val();
     varattr = $("#varattr option:selected").val();
+    rotate = $("#rotate").val(); 
     console.log("Selected");
     console.log(varattr);
     console.log(virtual_id);
@@ -579,6 +582,7 @@ function add() {
                     "style='position: absolute; " +
                            "top:0; " +
                            "left:0; " +
+                           "transform:rotate(" + rotate + "deg);" +
 			   "background-color:" + background_color + "'" +
                     "class='varbox box_highlight' " +
                     "id='" + varname +
@@ -615,6 +619,7 @@ function add() {
                         "style='position: absolute; " +
                                "top:0; " +
                                "left:0; " +
+                               "transform:rotate(" + rotate + "deg);" +
                                "background-color:" + background_color + "'" +
                         "class='varbox box_highlight' " + 
                         "id='" + varname +
@@ -653,6 +658,7 @@ function add() {
                         "style='position: absolute; " +
                                "top:0; " +
                                "left:0; " +
+                               "transform:rotate(" + rotate + "deg);" +
                                "background-color:" + background_color + "'" +
                         "class='varbox box_highlight' " + 
                         "id='" + varname +
@@ -712,7 +718,8 @@ function add() {
                     html_text = "<div " +
                         "style='position: absolute; " +
                                "top:0; " +
-                               "left:0;' " +
+                               "left:0; " +
+                               "transform:rotate(" + rotate + "deg);'" +
                         "class='varbox box_highlight' " +
                         "id='" + varname +
                         "' data-type='" + vartype +
@@ -760,6 +767,7 @@ function add() {
                         "style='position: absolute; " +
                                "top:0; " +
                                "left:0; " +
+                               "transform:rotate(" + rotate + "deg);" +
                                "background-color:" + background_color + "'" +
                         "class='varbox box_highlight' " + 
                         "id='" + varname +
@@ -825,6 +833,7 @@ 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") ) {
@@ -1080,6 +1089,7 @@ 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" ) {
@@ -1299,6 +1309,7 @@ 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) {
@@ -1344,6 +1355,7 @@ 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) {
@@ -1456,6 +1468,7 @@ function highlight(mydata) {
     $('#onvalue').val("");
     $('#offexpression').val('disabled', true);
     $('#offvalue').val("");
+    $("#rotate").val("");
  
     if (vartype == "header") {
         $("#elem_title_text").val($("#"+varname + " .title").text());
@@ -1477,6 +1490,11 @@ function highlight(mydata) {
         if ($("#"+varname).css("background-color") ) {
             $("#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") {
         
         if (($("#"+varname).attr("data-exponential")) == "true" || ($("#"+varname).attr("data-exponential")) == "true") {
@@ -1542,7 +1560,9 @@ function highlight(mydata) {
         } else {
             $("#varattr").val("normal");
         }
-   
+
+        $("#rotate").val($("#"+varname).css("transform"));
+
     } else if (vartype == "calc") {
         var vid = varname.split("_");
         vid = vid[1];
@@ -1579,6 +1599,9 @@ function highlight(mydata) {
         if ($("#"+varname).css("background-color") ) {
             $("#background_color").val($("#"+varname).css("background-color"));
         }
+
+        $("#rotate").val($("#"+varname).css("transform"));
+
      } else if (vartype == "icon") {
         $("#icon").val(icon);
         $('#icon').prop('disabled', false);
@@ -1590,6 +1613,7 @@ function highlight(mydata) {
         $('#onexpression').val($("#"+varname).attr("data-onexpression"))
         $('#offvalue').val($("#"+varname).attr("data-off"));
         $('#offexpression').val($("#"+varname).attr("data-offexpression"))
+        $("#rotate").val($("#"+varname).css("transform"));
         //$("#elem_unit_text").val('{"on":'+$("#"+varname).attr("data-on") + ',"off":'+$("#"+varname).attr("data-off")+'}' );
 
         if (($("#"+varname).attr("data-linkhtml")) == "true" || ($("#"+varname).attr("data-linkhtml")) == "true") {

static/relay_inactive.svg

@@ -26,10 +26,10 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="-369.10712"
+     inkscape:cx="-409.10718"
      inkscape:cy="364.9541"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer2"
      showgrid="false"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -52,6 +52,18 @@
       </cc:Work>
     </rdf:RDF>
   </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Ebene 2">
+    <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="440"
+       height="248.57143"
+       x="-3.3007814e-006"
+       y="-21.625532" />
+  </g>
   <g
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"

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="191.04041mm"
-   height="25.820105mm"
-   viewBox="0 0 676.91482 91.488561"
+   width="283.02859mm"
+   height="61.242222mm"
+   viewBox="0 0 1002.8572 217.00001"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -23,13 +23,13 @@
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="0"
-     inkscape:pageopacity="0.0"
+     inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="-470.38476"
-     inkscape:cy="14.651933"
+     inkscape:cx="289.99992"
+     inkscape:cy="158.93764"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer2"
      showgrid="false"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -48,18 +48,31 @@
         <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>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Ebene 2"
+     transform="translate(2.8571253,95.511443)">
+    <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"
+       height="154.14301"
+       x="-2.8571863"
+       y="-64.082947" />
+  </g>
   <g
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-293.16755,-455.52557)">
+     transform="translate(-290.31042,-360.01413)">
     <path
        style="fill:#000000"
-       d="m 516.96161,542.21617 c -10.71187,-5.30222 -21.06228,-18.28541 -23.05792,-28.92303 l -1.36339,-7.26757 -99.68637,0 c -98.08699,0 -99.68638,-0.0686 -99.68638,-4.27641 0,-4.19934 1.78552,-4.28648 99.06695,-4.83511 l 99.06695,-0.55869 4.00185,-10.54345 c 5.09648,-13.42744 13.04142,-21.68662 25.47974,-26.48755 8.92515,-3.44493 19.55055,-3.79879 114.06536,-3.79879 103.93731,0 104.2482,0.0133 113.26064,4.82994 10.92242,5.83746 20.21988,16.92549 23.39038,27.89505 l 2.34251,8.1048 98.12025,0.55891 c 96.33461,0.54874 98.12021,0.63673 98.12021,4.83511 0,4.20635 -1.5979,4.27619 -97.84399,4.27619 -91.29914,0 -97.9236,0.25155 -99.03324,3.76064 -8.01809,25.35559 -22.47272,37.06915 -45.74359,37.06915 -13.53761,0 -20.91534,-2.80512 -30.0192,-11.41372 -18.02893,-17.04815 -20.33858,-47.46798 -4.88477,-64.33628 l 5.41403,-5.90958 -65.06114,0 -65.06117,0 5.3787,6.39222 c 12.40009,14.73667 13.49381,40.5413 2.38671,56.31032 -12.78144,18.14609 -38.32288,24.38103 -58.65312,14.31785 z m 35.15275,-7.99813 c 15.54104,-7.13647 23.95975,-22.138 21.52714,-38.35981 -1.86818,-12.45787 -15.75199,-27.4547 -27.43672,-29.63624 -18.93825,-3.53577 -36.91939,7.6314 -42.55033,26.42584 -4.89201,16.32812 3.77007,34.00427 20.35483,41.53669 11.02355,5.00664 17.25897,5.01408 28.10508,0.0335 z m 185.9783,1.90166 c 8.64044,-2.40037 20.01916,-13.17852 23.41117,-22.17552 8.3852,-22.24104 -9.77626,-48.7484 -33.39984,-48.7484 -9.404,0 -24.82956,8.61709 -30.38187,16.97205 -7.53322,11.33579 -6.83291,29.07468 1.60783,40.72681 3.55316,4.90499 6.69598,8.93272 6.98405,8.95052 0.28806,0.0178 4.39184,1.42588 9.1195,3.12908 10.3918,3.74378 12.85749,3.86843 22.65916,1.14546 z"
+       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"
        id="path4134"
        inkscape:connector-curvature="0" />
   </g>

static/switch_inactive.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="191.04042mm"
-   height="25.643068mm"
-   viewBox="0 0 676.91487 90.861267"
+   width="283.02856mm"
+   height="61.242218mm"
+   viewBox="0 0 1002.8571 217"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -23,13 +23,13 @@
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="0"
-     inkscape:pageopacity="0.0"
+     inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="-264.11107"
-     inkscape:cy="-291.06232"
+     inkscape:cx="-100.32162"
+     inkscape:cy="-255.34802"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer2"
      showgrid="false"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -48,18 +48,31 @@
         <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>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Ebene 2"
+     transform="translate(2.8571265,90.424439)">
+    <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.0001"
+       height="154.14301"
+       x="-2.857157"
+       y="-27.567444" />
+  </g>
   <g
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-210.31037,-150.4386)">
+     transform="translate(-207.45324,-60.014164)">
     <path
        style="fill:#000000"
-       d="m 434.10443,236.50191 c -10.71187,-5.30222 -21.06228,-18.28541 -23.05792,-28.92303 l -1.36339,-7.26757 -99.68637,0 c -98.08699,0 -99.68638,-0.0686 -99.68638,-4.27641 0,-4.19934 1.78552,-4.28648 99.06695,-4.83511 l 99.06695,-0.55869 3.98747,-10.50557 c 5.02273,-13.2331 11.29427,-20.09079 23.31291,-25.49174 17.22647,-7.74124 38.99115,-4.18553 52.27757,8.54063 14.27904,13.67693 16.56832,42.20007 4.73533,58.99964 -12.78144,18.14609 -38.32288,24.38103 -58.65312,14.31785 z m 35.15275,-7.99813 c 15.54104,-7.13647 23.95975,-22.138 21.52714,-38.35981 -1.86818,-12.45787 -15.75199,-27.4547 -27.43672,-29.63624 -18.93825,-3.53577 -36.91939,7.6314 -42.55033,26.42584 -4.89201,16.32812 3.77007,34.00427 20.35483,41.53669 11.02355,5.00664 17.25897,5.01408 28.10508,0.0335 z m 156.87233,9.58309 c -14.53592,-6.50722 -26.8617,-25.60573 -26.8617,-41.6216 0,-26.99663 19.43154,-46.2402 46.47444,-46.02488 19.65561,0.15651 37.53476,13.53292 42.89999,32.09591 l 2.34251,8.1048 98.12025,0.55891 c 96.33457,0.54874 98.12025,0.63673 98.12025,4.83511 0,4.20635 -1.59797,4.27619 -97.84403,4.27619 -91.29914,0 -97.9236,0.25155 -99.03324,3.76064 -5.83916,18.46511 -13.56198,28.08482 -27.0803,33.73175 -9.72569,4.06265 -28.37781,4.20486 -37.13817,0.28317 z m 29.10597,-7.68143 c 8.64044,-2.40037 20.01916,-13.17852 23.41117,-22.17552 8.3852,-22.24104 -9.77626,-48.7484 -33.39984,-48.7484 -9.404,0 -24.82956,8.61709 -30.38187,16.97205 -7.53322,11.33579 -6.83291,29.07468 1.60783,40.72681 3.55316,4.90499 6.69598,8.93272 6.98405,8.95052 0.28806,0.0178 4.39184,1.42588 9.1195,3.12908 10.3918,3.74378 12.85749,3.86843 22.65916,1.14546 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_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="191.04041mm"
-   height="48.284966mm"
-   viewBox="0 0 676.91482 171.08847"
+   width="282.22223mm"
+   height="61.242222mm"
+   viewBox="0 0 1000 217.00001"
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
@@ -23,13 +23,13 @@
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="0"
-     inkscape:pageopacity="0.0"
+     inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
-     inkscape:cx="36.621382"
-     inkscape:cy="-96.455184"
+     inkscape:cx="1114.5778"
+     inkscape:cy="-50.740919"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer2"
      showgrid="false"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -48,18 +48,31 @@
         <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>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Ebene 2"
+     transform="translate(2.8571289,0.19727124)">
+    <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" />
+  </g>
   <g
      inkscape:label="Ebene 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-263.97118,-264.81856)">
+     transform="translate(-261.11405,-264.62129)">
     <path
        style="fill:#000000"
-       d="m 487.76521,431.10907 c -10.71187,-5.30222 -21.06228,-18.28541 -23.05792,-28.92303 l -1.36339,-7.26757 -99.68637,0 c -98.08699,0 -99.68638,-0.0686 -99.68638,-4.27641 0,-4.19934 1.78552,-4.28648 99.06695,-4.83511 l 99.06695,-0.55869 3.98747,-10.50557 c 5.02273,-13.2331 11.29427,-20.09079 23.31291,-25.49174 17.22647,-7.74124 38.99115,-4.18553 52.27757,8.54063 14.27904,13.67693 16.56832,42.20007 4.73533,58.99964 -12.78144,18.14609 -38.32288,24.38103 -58.65312,14.31785 z m 35.15275,-7.99813 c 15.54104,-7.13647 23.95975,-22.138 21.52714,-38.35981 -1.86818,-12.45787 -15.75199,-27.4547 -27.43672,-29.63624 -18.93825,-3.53577 -36.91939,7.6314 -42.55033,26.42584 -4.89201,16.32812 3.77007,34.00427 20.35483,41.53669 11.02355,5.00664 17.25897,5.01408 28.10508,0.0335 z m 156.87233,9.65536 c -8.73375,-3.81187 -21.45525,-18.30724 -24.70275,-28.14726 -2.31473,-7.01368 -2.19668,-16.06429 0.41595,-31.89631 0.50251,-3.04506 -16.14803,-14.89807 -73.95862,-52.64894 -41.03392,-26.79553 -74.63791,-49.25959 -74.67553,-49.92013 -0.0376,-0.66053 1.14037,-2.74976 2.61776,-4.64273 2.36444,-3.0295 11.66196,2.44453 77.62293,45.70152 l 74.93678,49.14326 7.37871,-5.62803 c 25.83707,-19.70688 64.10487,-7.93642 72.8775,22.41578 l 2.34251,8.1048 98.12025,0.55891 c 96.33457,0.54874 98.12025,0.63673 98.12025,4.83511 0,4.20635 -1.59797,4.27619 -97.84403,4.27619 -91.29914,0 -97.9236,0.25155 -99.03324,3.76064 -5.83916,18.46511 -13.56198,28.08482 -27.0803,33.73175 -9.65532,4.03325 -28.30267,4.21173 -37.13817,0.35544 z m 29.10597,-7.7537 c 8.64044,-2.40037 20.01916,-13.17852 23.41117,-22.17552 8.3852,-22.24104 -9.77626,-48.7484 -33.39984,-48.7484 -9.404,0 -24.82956,8.61709 -30.38187,16.97205 -7.53322,11.33579 -6.83291,29.07468 1.60783,40.72681 3.55316,4.90499 6.69598,8.93272 6.98405,8.95052 0.28806,0.0178 4.39184,1.42588 9.1195,3.12908 10.3918,3.74378 12.85749,3.86843 22.65916,1.14546 z"
+       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"
        id="path4134"
        inkscape:connector-curvature="0" />
   </g>

status.html

@@ -24,7 +24,7 @@
 {% if data['style'][key]['type'] == "calc" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
-    height:{{ data['style'][key]['height'] }}px;
+    height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};
     
 {% if "background_color" in data['style'][key] %}     
   background-color="{{ data['style'][key]['background_color'] }}"
@@ -58,7 +58,7 @@ data-type="{{ data['style'][key]['type'] }}" class='databox' id="{{ key }}">
 {% else %}
 <div tooltip="{{ key }}" 
 {% end %}
-class="databox" style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; 
+class="databox" style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }}; 
 
 {% if "background_color" in data['style'][key] %}
   background-color:{{ data['style'][key]['background_color'] }};'
@@ -135,7 +135,7 @@ data-type="{{ data['style'][key]['type'] }}" id="{{ key }}">
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -179,7 +179,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -220,7 +220,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -261,7 +261,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -302,7 +302,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -343,7 +343,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -384,7 +384,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 {% else %}
 <div tooltip="{{ key }}"
 {% end %}
-style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;'
+style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};'
 {% if "trend" in data['style'][key] %}
 data-trend="{{ data['style'][key]['trend'] }}"
 {% else %}
@@ -425,7 +425,7 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 <div tooltip="{{ key }}" style='position: absolute; top: {{
     data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }};
     width:{{ data['style'][key]['width'] }}px; height:{{
-    data['style'][key]['height'] }}px;
+    data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};
 {% if "background_color" in data['style'][key] %}
 background-color:{{ data['style'][key]['background_color'] }};'
 {% else%}
@@ -468,7 +468,7 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% if data['style'][key]['type'] == "header" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
-    height:{{ data['style'][key]['height'] }}px;
+    height:{{ data['style'][key]['height'] }}px; transform: {{ data['style'][key]['rotate'] }};
 {% if "background_color" in data['style'][key] %}
   background-color:{{ data['style'][key]['background_color'] }};'
 {% else %}