Added on-/off-linking feature.

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

designer.html

@@ -74,6 +74,10 @@
  data-larger="{{ data['style'][key]['larger'] }}"
 {% else %}
 {% end %}
+{% if "linkhtml" in data['style'][key] %}
+ data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
+{% else %}
+{% end %}
 {% if "exponential" in data['style'][key] %}
  data-exponential="{{ data['style'][key]['exponential'] }}"
 {% else %}
@@ -85,22 +89,37 @@
 {% end %}
 
 
-{% if data['style'][key]['type'] == "ventil" %}
-<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;' data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
+{% if data['style'][key]['type'] == "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;'
+{% if "linkhtml" in data['style'][key] %}
+ data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
+{% else %}
+{% end %}
+ data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
 </div>
 {% else %}
 {% end %}
 
 {% if data['style'][key]['type'] == "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;' data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
+<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;'
+{% if "linkhtml" in data['style'][key] %}
+ data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
+{% else %}
+{% end %}
+ data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("Bit_inactive.svg") }}'></img>
 </div>
 {% else %}
 {% end %}
 
 {% if data['style'][key]['type'] == "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;' data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
+<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;'
+{% if "linkhtml" in data['style'][key] %}
+ data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
+{% else %}
+{% end %}
+ data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
 {% else %}
@@ -115,6 +134,10 @@
  data-cond="{{ data['style'][key]['cond'] }}"
 {% else%}
 {% end%}
+{% if "linkhtml" in data['style'][key] %}
+ data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
+{% else %}
+{% end %}
  data-dict="{{ data['style'][key]['dict'] }}" data-type="{{ data['style'][key]['type'] }}" class='varbox' id="{{ key }}">
 <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><br /><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval">??? </span></p>
 </div>
@@ -185,7 +208,6 @@
 <span class="info">Value</span>
 <input type="text" id="elem_unit_text" placeholder="unit" style="font-size:16pt; width=100px;"/>
 <input type="text" id="elem_unit_size" placeholder="size" style="font-size:16pt; width=100px;"/>
-
 <input type="text" id="elem_condition_range" placeholder="condition (red)" style="font-size:16pt; width=100px;"/>
 <input type="text" id="elem_formula" placeholder="Equation" style="font-size:16pt; width=100px;"/>
 <select id="elem_unit_style" style="font-size:16pt;">
@@ -196,6 +218,7 @@
 <br /><br />
 <span class="info">Background colour</span>
 <input type="text" id="background_color" placeholder="hex code" style="font-size:16pt; width=100px;"/>
+<span class="info">Link</span><input type="checkbox" id="elem_linkhtml" style="font-size:16pt; width:20px; height:20px;"/>
 <br /><br />
 <button class="button save" onclick="backup()">Backup</button>
 <button style="display:none;" id="buttonHighlight" class="button highlight" onclick="highlight({{ data['cache'] }})">Highlight</button>
@@ -254,7 +277,6 @@ function add() {
     if (virtual_id == "") {
         virtual_id = "0";
     }
-    
     if ($('#elem_exponential').is(":checked")) {
         data_exponential = true;
         $("#"+key).attr("data-exponential", true);
@@ -262,7 +284,14 @@ function add() {
         data_exponential = false;
         $("#"+key).attr("data-exponential", false);
     }
-    
+    if ($('#elem_linkhtml').is(":checked")) {
+        data_linkhtml = true;
+        $("#"+key).attr("data-linkhtml", true);
+    } else {
+        data_linkhtml = false;
+        $("#"+key).attr("data-linkhtml", false);
+    }
+ 
     data_lesser = $("#elem_lesser_range").val();
     data_larger = $("#elem_larger_range").val();
     background_color = $("#background_color").val(); 
@@ -270,13 +299,10 @@ function add() {
     varname = $("#varname option:selected").text();
     vartype = $("#vartype option:selected").val();
     varattr = $("#varattr option:selected").val();
-
-
     console.log("Selected");
     console.log(varattr);
     console.log(virtual_id);
     console.log(vartype);
-
     console.log(title_text, unit_text, background_color, varname, varval, vartype);
     
         
@@ -312,6 +338,7 @@ function add() {
                     "' data-lesser='" + data_lesser + 
  		            "' data-larger='" + data_larger + 
                     "' data-exponential='" + data_exponential +
+                    "' data-linkhtml='" + data_linkhtml +
                     "'>" +
                     "<p>" +
                     "<span style='color: " + title_color + ";" + 
@@ -362,7 +389,6 @@ function add() {
                 $('#elem_title_text').addClass('glowing_border');
             }
             
-
         } else if (vartype == "calc") {
             console.log("Calc");
             if (data_formula.length > 0) {
@@ -407,7 +433,6 @@ function add() {
                 html_text = "";
                 $('#elem_formula').addClass('glowing_border');
             }
-
             
         } else if (vartype == "valve") {
             
@@ -424,37 +449,34 @@ function add() {
                 }
                 varname = virtual_name;
             }
-
-
             console.log("Ventil");
             if (unit_text.length > 0) {
                 var token = JSON.parse(unit_text);
                 data_on = token["on"];
                 data_off = token["off"];
-
                  html_text = "<div " +
                     "style='position: absolute; " +
                            "top:0; " +
                            "left:0;' " +
-                    "class='varbox box_highlight' " + 
+                    "class='varbox box_highlight' " +
                     "id='" + varname +
                     "' data-type='" + vartype +
                     "' data-cond='" + data_condition +
-                    "' data-lesser='" + data_lesser + 
- 		            "' data-larger='" + data_larger + 
- 		            "' data-on='" + data_on + 
- 		            "' data-off='" + data_off + 
+                    "' data-lesser='" + data_lesser +
+                            "' data-larger='" + data_larger +
+                            "' data-on='" + data_on +
+                            "' data-off='" + data_off +
+                    "' data-linkhtml='" + data_linkhtml +
                     "'>" +
- 		            "<img width='100%' height='100%' " + 
+                            "<img width='100%' height='100%' " +
                     "src='{{ static_url("ventil_inactive.png") }}'></img>" +
-        	        "</div>";
+                        "</div>";
                  $('#elem_unit_text').removeClass('glowing_border');
             } else{
                 console.log("NoInput");
                 html_text = "";
                 $('#elem_unit_text').addClass('glowing_border');
             }
-
         } else if (vartype == "commbit") {
            
             if (varattr=="virtual") {
@@ -470,13 +492,11 @@ function add() {
                 }
                 varname = virtual_name;
             }
-
             console.log("commbit");
             if (unit_text.length > 0) {
                 var token = JSON.parse(unit_text);
                 data_on = token["on"];
                 data_off = token["off"];
-
                  html_text = "<div " +
                     "style='position: absolute; " +
                            "top:0; " +
@@ -489,6 +509,7 @@ function add() {
                             "' data-larger='" + data_larger +
                             "' data-on='" + data_on +
                             "' data-off='" + data_off +
+                    "' data-linkhtml='" + data_linkhtml +
                     "'>" +
                             "<img width='100%' height='100%' " +
                     "src='{{ static_url("Bit_inactive.svg") }}'></img>" +
@@ -499,9 +520,7 @@ function add() {
                 html_text = "";
                 $('#elem_unit_text').addClass('glowing_border');
             }
-
         } else if (vartype == "alarm") {
-
             if (varattr=="virtual") {
                 virtual_name = "virtual_" + varname + "_" + virtual_id;
                 if ( $("#" + virtual_name).length > 0 ) {
@@ -515,13 +534,11 @@ function add() {
                 }
                 varname = virtual_name;
             }
-
             console.log("alarm");
             if (unit_text.length > 0) {
                 var token = JSON.parse(unit_text);
                 data_on = token["on"];
                 data_off = token["off"];
-
                  html_text = "<div " +
                     "style='position: absolute; " +
                            "top:0; " +
@@ -534,6 +551,7 @@ function add() {
                             "' data-larger='" + data_larger +
                             "' data-on='" + data_on +
                             "' data-off='" + data_off +
+                    "' data-linkhtml='" + data_linkhtml +
                     "'>" +
                             "<img width='100%' height='100%' " +
                     "src='{{ static_url("alarm_inactive.svg") }}'></img>" +
@@ -544,8 +562,20 @@ function add() {
                 html_text = "";
                 $('#elem_unit_text').addClass('glowing_border');
             }
-
 	} else if (vartype == "integer-to-string") {
+            if (varattr=="virtual") {
+                virtual_name = "virtual_" + varname + "_" + virtual_id;
+                if ( $("#" + virtual_name).length > 0 ) {
+                    for (i = 0; i < 50; i++) {
+                        virtual_name = "virtual_" + varname + "_" + i.toString();
+                        console.log($("#" + virtual_name).length);
+                        if (!$("#" + virtual_name).length){
+                            break;
+                         }
+                    }
+                }
+                varname = virtual_name;
+            }
             console.log("Integer2String");
             
             if (unit_text.length > 0) {
@@ -559,6 +589,7 @@ function add() {
                         "' data-type='" + vartype +
                         "' data-dict='" + unit_text +
                         "' data-cond='" + data_condition +
+                        "' data-linkhtml='" + data_linkhtml +
                         "'>" +
                         "<p>" +
                         "<span style='color: " + title_color + ";" + 
@@ -597,7 +628,6 @@ function myremove() {
         console.log(varname +" removed.");
     }
 }
-
 function mysave(data) {
     console.log("saving...");
     varname = $("#varname option:selected").text();
@@ -616,7 +646,6 @@ function mysave(data) {
             tmp["width"] = $("#"+key).width();
             tmp["height"] = $("#"+key).height();
             tmp["type"] = $("#"+key).attr("data-type");
-
             if ( $("#"+key).attr("data-type") == "data" ) {
                 if ( (varname == key) && (varattr == "normal") ) {
                     tmp["condition"] = $("#elem_condtion_range").val();
@@ -624,17 +653,26 @@ function mysave(data) {
              	    tmp["lesser"] = $("#elem_lesser_range").val();
             	    tmp["larger"] = $("#elem_larger_range").val();
                     if ($('#elem_exponential').is(":checked")) {
-                        tmp["exponential"] = true;
+                        tmp["exponential"] = "true";
+			$("#"+key).attr("data-exponential", "true");
+                    } else {
+                        tmp["exponential"] = "false";
+			$("#"+key).attr("data-exponential", "false");
+                    }
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+			$("#"+key).attr("data-linkhtml", "true");
                     } else {
-                        tmp["exponential"] = false;
+                        tmp["linkhtml"] = "false";
+			$("#"+key).attr("data-linkhtml","false");
                     }
             	    if ($('#background_color').val().length > 0) {
                         tmp["background_color"] = $('#background_color').val();
                     } else {
                         tmp["background_color"] = '#0000ffff';
                     } 
-                    console.log('Hi');
-                    console.log($("#"+key).css("background-color"));
+                    //console.log('Hi');
+                    //console.log($("#"+key).css("background-color"));
                     header = {};
             	    header["title"] = $("#elem_title_text").val().trim();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -645,7 +683,7 @@ function mysave(data) {
                     $(".title", "#"+key).text(header["title"]);
                     $(".title", "#"+key).css("font-size", header["size"] + "px");
                     $(".title", "#"+key).css("font-weight", header["weight"]);
-                    
+
  
             	    unit = {};
             	    unit["title"] = $("#elem_unit_text").val().trim();
@@ -656,13 +694,14 @@ function mysave(data) {
                     $(".unit_title", "#"+key).css("font-size", unit["size"] + "px");
                     $(".unit_title", "#"+key).css("font-weight", unit["weight"]);                    
                     $(".varval", "#"+key).css("font-weight", unit["weight"]);
-                    
+
                 } else {
             	    tmp["condition"] = $("#"+key).attr("data-cond");
             	    tmp["formula"] = $("#"+key).attr("data-formula");
              	    tmp["lesser"] = $("#"+key).attr("data-lesser");
             	    tmp["larger"] = $("#"+key).attr("data-larger");
                     tmp["exponential"] = $("#"+key).attr("data-exponential");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
              	    //tmp["min"] = $("#"+key).attr("min");
            	    //tmp["max"] = $("#"+key).attr("max");
                     header = {};
@@ -678,7 +717,6 @@ function mysave(data) {
             	        header["weight"] = "400";
                     }
                     
-
             
             	    unit = {};
             	    unit["title"] = $(".unit_title", "#"+key).text();
@@ -692,7 +730,6 @@ function mysave(data) {
             	        unit["weight"] = "400";
                     }
                 }
-
             	tmp["header"] = header;
             	tmp["unit"] = unit;
             //} else if ( $("#"+key).attr("data-type") == "header" ) {
@@ -701,28 +738,43 @@ function mysave(data) {
 	    //	header["size"] = $(".title", "#"+key).css("font-size");
 	    //	header["weight"] = $(".title", "#"+key).css("font-weight");
             //	tmp["header"] = header;
-            } else if ( $("#"+key).attr("data-type") == "valve" ) {
+           } else if ( $("#"+key).attr("data-type") == "valve" ) {
                 if ((varname == key) && (varattr == "normal")) {
                     var unit_text = $("#elem_unit_text").val();
                     unit_text = unit_text.trim();
                     var dtoken = JSON.parse(unit_text);
                     tmp["on"] = dtoken["on"];
                     tmp["off"] = dtoken["off"];
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                 } else {
-            	    tmp["on"] = $("#"+key).attr("data-on");
-            	    tmp["off"] = $("#"+key).attr("data-off");
-                }
-
-            } else if ( $("#"+key).attr("data-type") == "commbit" ) {
+                    tmp["on"] = $("#"+key).attr("data-on");
+                    tmp["off"] = $("#"+key).attr("data-off");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                } 
+           } else if ( $("#"+key).attr("data-type") == "commbit" ) {
                 if ((varname == key) && (varattr == "normal")) {
                     var unit_text = $("#elem_unit_text").val();
                     unit_text = unit_text.trim();
                     var dtoken = JSON.parse(unit_text);
                     tmp["on"] = dtoken["on"];
                     tmp["off"] = dtoken["off"];
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                 } else {
                     tmp["on"] = $("#"+key).attr("data-on");
                     tmp["off"] = $("#"+key).attr("data-off");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                 }
             } else if ( $("#"+key).attr("data-type") == "alarm" ) {
                 if ((varname == key) && (varattr == "normal")) {
@@ -731,26 +783,37 @@ function mysave(data) {
                     var dtoken = JSON.parse(unit_text);
                     tmp["on"] = dtoken["on"];
                     tmp["off"] = dtoken["off"];
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                 } else {
                     tmp["on"] = $("#"+key).attr("data-on");
                     tmp["off"] = $("#"+key).attr("data-off");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                 }
-
             } else if ( $("#"+key).attr("data-type") == "integer-to-string" ) {
                 if ((varname == key)&& (varattr == "normal")) {
                     var unit_text = $("#elem_unit_text").val();
                     unit_text = unit_text.trim();
                     var data_condition = $("#elem_condition_range").val();
-
             	    tmp["cond"] = data_condition;
             	    tmp["dict"] = unit_text;
-             	    
+             	    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    } 
                     if ($('#background_color').val().length > 0) {
                         tmp["background_color"] = $('#background_color').val();
                     } else {
                         tmp["background_color"] = '#0000ffff';
                     }
-
             	    header = {};
             	    header["title"] = $("#elem_title_text").val().trim();
             	    header["size"] = $("#elem_title_size").val();
@@ -764,6 +827,7 @@ function mysave(data) {
             	    tmp["dict"] = $("#"+key).attr("data-dict");
             	    tmp["cond"] = $("#"+key).attr("data-cond");
             	    tmp["background_color"] = $("#"+key).css("background-color");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                     header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -776,11 +840,9 @@ function mysave(data) {
             	    unit["size"] = $(".varval", "#"+key).css("font-size");
             	    unit["weight"] = $(".varval", "#"+key).css("font-weight");
                 }
-
             	tmp["header"] = header;
             	tmp["unit"] = unit;
             }
-
             position[key] = tmp;
         }
     }
@@ -790,7 +852,6 @@ function mysave(data) {
     
     var clean_text = title_text.replace(/[^a-zA-Z0-9 ]/g, "")
     var token = "header_" + clean_text.replace(/\s+/g, '-').toLowerCase();
-
     $('[id^=virtual_]').each(function( index ) {
         var tmp = {};
         var key = this.id;
@@ -800,7 +861,6 @@ function mysave(data) {
 	ref = ref.join("_");
 	//ref = ref[1];
         if (key != "virtual_id_text") {
-
             
         console.log("Check this");
         console.log(key);
@@ -811,9 +871,7 @@ function mysave(data) {
             tmp["width"] = $("#"+key).width();
             tmp["height"] = $("#"+key).height();
             tmp["type"] = $("#"+key).attr("data-type");
-
             
-
             if ( $("#"+key).attr("data-type") == "data" ) {
                 if (varname == key) {
             	    tmp["condition"] = $("#elem_condtion_range").val();
@@ -826,6 +884,13 @@ function mysave(data) {
             	    //header["color"] = $(".title", "#"+key).css("color");
             	    header["size"] = $("#elem_title_size").val();
             	    header["weight"] = $("#elem_title_style option:selected").val();
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                     if ($('#background_color').val().length > 0) {
                         tmp["background_color"] = $('#background_color').val();
                     } else {
@@ -853,7 +918,8 @@ function mysave(data) {
             	    tmp["larger"] = $("#"+key).attr("data-larger");
              	    //tmp["min"] = $("#"+key).attr("min");
            	    //tmp["max"] = $("#"+key).attr("max");
-                    tmp["background_color"] = $("#"+key).css("background-color"); 
+                    tmp["background_color"] = $("#"+key).css("background-color");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml"); 
             	    header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -866,7 +932,6 @@ function mysave(data) {
             	    unit["size"] = parseInt($(".varval", "#"+key).css("font-size")) || 28;
             	    unit["weight"] = parseInt($(".varval", "#"+key).css("font-weight")) || 28;
                 }
-
             	tmp["header"] = header;
             	tmp["unit"] = unit;
             //} else if ( $("#"+key).attr("data-type") == "header" ) {
@@ -882,11 +947,18 @@ function mysave(data) {
                     var dtoken = JSON.parse(unit_text);
                     tmp["on"] = dtoken["on"];
                     tmp["off"] = dtoken["off"];
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                 } else {
             	    tmp["on"] = $("#"+key).attr("data-on");
             	    tmp["off"] = $("#"+key).attr("data-off");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                 }
-
             } else if ( $("#"+key).attr("data-type") == "commbit" ) {
                 if (varname == key) {
                     var unit_text = $("#elem_unit_text").val();
@@ -894,9 +966,17 @@ function mysave(data) {
                     var dtoken = JSON.parse(unit_text);
                     tmp["on"] = dtoken["on"];
                     tmp["off"] = dtoken["off"];
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                 } else {
                     tmp["on"] = $("#"+key).attr("data-on");
                     tmp["off"] = $("#"+key).attr("data-off");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                 }
             } else if ( $("#"+key).attr("data-type") == "alarm" ) {
                 if (varname == key) {
@@ -905,11 +985,18 @@ function mysave(data) {
                     var dtoken = JSON.parse(unit_text);
                     tmp["on"] = dtoken["on"];
                     tmp["off"] = dtoken["off"];
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
                 } else {
                     tmp["on"] = $("#"+key).attr("data-on");
                     tmp["off"] = $("#"+key).attr("data-off");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                 }
-
             } else if ( $("#"+key).attr("data-type") == "integer-to-string" ) {
                 if (varname == key) {
                     var unit_text = $("#elem_unit_text").val();
@@ -920,6 +1007,13 @@ function mysave(data) {
                     } else {
                         tmp["background_color"] = '#0000ffff';
                     }
+                    if ($('#elem_linkhtml').is(":checked")) {
+                        tmp["linkhtml"] = "true";
+                        $("#"+key).attr("data-linkhtml", "true");
+                    } else {
+                        tmp["linkhtml"] = "false";
+                        $("#"+key).attr("data-linkhtml","false");
+                    }
             	    tmp["cond"] = data_condition;
             	    tmp["dict"] = unit_text;
              	    
@@ -936,6 +1030,7 @@ function mysave(data) {
             	    tmp["dict"] = $("#"+key).attr("data-dict");
             	    tmp["cond"] = $("#"+key).attr("data-cond");
             	    tmp["background_color"] = $("#"+key).css("background-color");
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
                     header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -948,16 +1043,13 @@ function mysave(data) {
             	    unit["size"] = $(".varval", "#"+key).css("font-size");
             	    unit["weight"] = $(".varval", "#"+key).css("font-weight");
                 }
-
             	tmp["header"] = header;
             	tmp["unit"] = unit;
             }
-
             position[key] = tmp;
         }
         }
     });
-
     $('[id^=header_]').each(function( index ) {
         tmp = {};
         var hkey = $( this ).attr('id');
@@ -968,7 +1060,6 @@ function mysave(data) {
         tmp["width"] = $("#"+hkey).width();
         tmp["height"] = $("#"+hkey).height();
         tmp["type"] = $("#"+hkey).attr("data-type");
-
         header = {};
         if (token == hkey) {
             header["title"] = $("#elem_title_text").val().trim();
@@ -980,12 +1071,10 @@ function mysave(data) {
             } else {
                 tmp["background_color"] = '#0000ffff';
             }
-
             // update field
             $(".title", "#"+hkey).css("font-size", header["size"] + "px");
             $(".title", "#"+hkey).css("font-weight", header["weight"]);
             
-
         } else {
             header["title"] = $(".title", "#"+hkey).text();
             //header["color"] = $(".title", "#"+hkey).css("color");
@@ -1000,7 +1089,6 @@ function mysave(data) {
 		header["weight"] = "400";
 	    }
         }
-
         tmp["header"] = header;
         position[hkey] = tmp;
         //console.log( index + ": " + $( this ).text() );
@@ -1016,7 +1104,6 @@ function mysave(data) {
             tmp["width"] = $("#"+key).width();
             tmp["height"] = $("#"+key).height();
             tmp["type"] = $("#"+key).attr("data-type");
-
             if ( $("#"+key).attr("data-type") == "calc" ) {
                 if (varname == key) {
             	    tmp["condition"] = $("#elem_condtion_range").val();
@@ -1062,7 +1149,6 @@ function mysave(data) {
             	    unit["size"] = $(".varval", "#"+key).css("font-size");
             	    unit["weight"] = $(".varval", "#"+key).css("font-weight");
                 }
-
             	tmp["header"] = header;
             	tmp["unit"] = unit;
             }
@@ -1090,12 +1176,10 @@ function mysave(data) {
     
 function highlight(mydata) {
     console.log("highlight");
-
     varname = $("#varname option:selected").text();
     vartype = $("#"+varname).attr("data-type");
     $("#vartype").val(vartype);
     console.log(varname, vartype);
-
     // clear values
     $("#elem_title_text").val("");
     $("#elem_title_size").val("");
@@ -1107,7 +1191,8 @@ function highlight(mydata) {
     $("#elem_formula").val("");
     $("#virtual_id_text").val("");
     $("#background_color").val("");
-    $('#elem_exponential').prop('checked', false); 
+    $('#elem_exponential').prop('checked', false);
+    $('#elem_linkhtml').prop('checked', false); 
     $('#elem_unit_text').removeClass('glowing_border');  
     $('#elem_title_text').removeClass('glowing_border');
     $('#elem_formula').removeClass('glowing_border');
@@ -1134,12 +1219,16 @@ function highlight(mydata) {
         }
     } else if (vartype == "data") {
         
-        if ($("#"+varname).attr("data-exponential")) {
+        if (($("#"+varname).attr("data-exponential")) == "true" || ($("#"+varname).attr("data-exponential")) == "true") {
             $('#elem_exponential').prop('checked', true); 
         } else {
             $('#elem_exponential').prop('checked', false); 
         }
-         
+        if (($("#"+varname).attr("data-linkhtml")) == "true" || ($("#"+varname).attr("data-linkhtml")) == "true") {
+            $('#elem_linkhtml').prop('checked', true);
+        } else {
+            $('#elem_linkhtml').prop('checked', false);
+        } 
         $("#elem_title_text").val($("#"+varname + " .title").text().trim());
         $("#elem_title_size").val("");
         if ($("#"+varname + " .title").css("font-size")) {
@@ -1183,7 +1272,6 @@ function highlight(mydata) {
             $("#elem_unit_style").val("700"); 
         }
    
-
     } else if (vartype == "calc") {
         var vid = varname.split("_");
         vid = vid[1];
@@ -1220,12 +1308,27 @@ function highlight(mydata) {
         if ($("#"+varname).css("background-color") ) {
             $("#background_color").val($("#"+varname).css("background-color"));
         }
-    } else if (vartype == "valve") {
+     } else if (vartype == "valve") {
         $("#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") {
+            $('#elem_linkhtml').prop('checked', true);
+        } else {
+            $('#elem_linkhtml').prop('checked', false);
+        }
     } else if (vartype == "commbit") {
         $("#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") {
+            $('#elem_linkhtml').prop('checked', true);
+        } else {
+            $('#elem_linkhtml').prop('checked', false);
+        }
     } else if (vartype == "alarm") {
         $("#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") {
+            $('#elem_linkhtml').prop('checked', true);
+        } else {
+            $('#elem_linkhtml').prop('checked', false);
+        }
     } else if (vartype == "integer-to-string") {
         $("#elem_title_text").val($("#"+varname + " .title").text().trim());
         $("#elem_title_size").val("");
@@ -1240,9 +1343,13 @@ function highlight(mydata) {
         $("#background_color").val("");
         if ($("#"+varname).css("background-color") ) {
             $("#background_color").val($("#"+varname).css("background-color"));
+        }
+        if (($("#"+varname).attr("data-linkhtml")) == "true" || ($("#"+varname).attr("data-linkhtml")) == "true") {
+            $('#elem_linkhtml').prop('checked', true);
+        } else {
+            $('#elem_linkhtml').prop('checked', false);
         } 
     }
-
     for(key in mydata) {
         //console.log(key, varname);
         if(($("#" + key).length > 0) && (key == varname) ) {
@@ -1254,8 +1361,6 @@ function highlight(mydata) {
         }
     }
 }
-
-
 jQuery(window).load(function () {
     $("#varname > option").each(function() {
         if ($('#'+this.text).length){
@@ -1271,7 +1376,6 @@ jQuery(window).load(function () {
     });
     
     $("#buttonHighlight").trigger("click"); 
-
     $("#varname").change(function() {
         varval = $( "#varname option:selected").val();
         varname = $("#varname option:selected").text();
@@ -1295,8 +1399,6 @@ jQuery(window).load(function () {
                 $("#background_color").val("");
         }       
     });
-
-
 });
 </script>
 </body>

status.html

@@ -71,15 +71,19 @@ data-larger="{{ data['style'][key]['larger'] }}"
 {% else %}
 {% end %}
 {% if "exponential" in data['style'][key] %}
- data-exponential="{{ data['style'][key]['exponential'] }}"
+data-exponential="{{ data['style'][key]['exponential'] }}"
+{% else %}
+{% end %}
+{% if data['style'][key]['linkhtml'] == 'true' %}
+onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
 {% else %}
 {% end %}
 {% if "ref" in data['style'][key] %}
-data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" id="{{ key }}">
 <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> --- </span><span class='unit_title' style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};"> {{ data['style'][key]['unit']['title'] }}</span></p>
 </div>
 {% else %}
-data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" id="{{ key }}">
 <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> --- </span><span class='unit_title' style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};"> {{ data['style'][key]['unit']['title'] }}</span></p>
 </div>
 {% end %}
@@ -95,12 +99,16 @@ data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://pcebes
 <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;'
+{% if data['style'][key]['linkhtml'] == 'true' %}
+onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
+{% else %}
+{% end %}
 {% if "ref" in data['style'][key] %}
-data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
 </div>
 {% else %}
-data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
 {% end %}
 
@@ -114,12 +122,16 @@ data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['of
 <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;'
+{% if data['style'][key]['linkhtml'] == 'true' %}
+onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
+{% else %}
+{% end %}
 {% if "ref" in data['style'][key] %}
-data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("Bit_inactive.svg") }}'></img>
 </div>
 {% else %}
-data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("Bit_inactive.svg") }}'></img>
 </div>
 {% end %}
@@ -134,12 +146,16 @@ data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['of
 <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;'
+{% if data['style'][key]['linkhtml'] == 'true' %}
+onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
+{% else %}
+{% end %}
 {% if "ref" in data['style'][key] %}
-data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
 {% else %}
-data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
 <img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
 {% end %}
@@ -158,7 +174,11 @@ data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['of
 data-cond="{{ data['style'][key]['cond'] }}"
 {% else %}
 {% end %}
- data-dict="{{ data['style'][key]['dict'] }}" data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
+{% if data['style'][key]['linkhtml'] == 'true' %}
+onclick="window.open('http://pcebessadei.competence-e.kit.edu/adei-battery/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
+{% else %}
+{% end %}
+ data-dict="{{ data['style'][key]['dict'] }}" data-type="{{ data['style'][key]['type'] }}" class='databox' id="{{ key }}">
 <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><br /><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval">--- </span></p>
 </div>
 {% else %}
@@ -194,10 +214,8 @@ data-cond="{{ data['style'][key]['cond'] }}"
 <script src="{{ static_url("math.min.js") }}"></script>
 <script>
 jQuery(window).load(function () {
-
 myTimer();
 var myVar = setInterval(myTimer, 10000);
-
 function myTimer() {
     var dataToSend = {};
     $.ajax({
@@ -234,6 +252,12 @@ function myTimer() {
 			                datavalue = "---";
 			                set_color = "black";
 		                }
+                        /*if ( ($("#" + key).attr('data-linkhtml')) == "False" || ($("#" + key).attr('data-linkhtml')) == "false" ) {
+                            document.getElementById("{{key}}").removeAttribute("onclick");
+                            console.log("Ash");
+                        } else {
+                            console.log("Jack");
+                        }*/
                         $(".varval", "#" + key).text(datavalue);
                         var condition_attr = $("#" + key).attr('data-cond');
                         var lesser_attr = $("#" + key).attr('data-lesser');
@@ -386,7 +410,6 @@ function myTimer() {
                                     if (parseFloat(response[ref]) == parseFloat(off_attr)) {
                                         $("img", "#" + key).attr("src", "{{ static_url('alarm_inactive.svg') }}");
                                 }
-
 		            } else if (data_type == "integer-to-string") {
                         var dict_attr = JSON.parse($("#" + key).attr('data-dict'));
                         var dict_cond;
@@ -437,7 +460,6 @@ function myTimer() {
                     } else {
                         val = teststring[i];
                     }
-
                     finalstring += val;
                     finalstring += " ";
                 }
@@ -481,10 +503,7 @@ function myTimer() {
         }
     });
 }
-
 });
-
-
 </script>
 </body>
 </html>