Solved 'Remove redundant timer calls #37'

https://github.com/kit-ipe/bora/issues/37

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

designer.html

@@ -78,6 +78,10 @@
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "exponential" in data['style'][key] %}
  data-exponential="{{ data['style'][key]['exponential'] }}"
 {% else %}
@@ -96,6 +100,10 @@
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "on_condition" in data['style'][key] %}
  data-onexpression="{{ data['style'][key]['on_condition'] }}"
 {% else %}
@@ -120,6 +128,10 @@
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "on_condition" in data['style'][key] %}
  data-onexpression="{{ data['style'][key]['on_condition'] }}"
 {% else %}
@@ -144,6 +156,10 @@
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "on_condition" in data['style'][key] %}
  data-onexpression="{{ data['style'][key]['on_condition'] }}"
 {% else %}
@@ -168,6 +184,10 @@
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "on_condition" in data['style'][key] %}
  data-onexpression="{{ data['style'][key]['on_condition'] }}"
 {% else %}
@@ -192,6 +212,10 @@
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "on_condition" in data['style'][key] %}
  data-onexpression="{{ data['style'][key]['on_condition'] }}"
 {% else %}
@@ -224,6 +248,10 @@
 {% if "linkhtml" in data['style'][key] %}
  data-linkhtml="{{ data['style'][key]['linkhtml'] }}"
 {% else %}
+{% end %}
+{% if "trend" in data['style'][key] %}
+ data-trend="{{ data['style'][key]['trend'] }}"
+{% 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>
@@ -333,7 +361,7 @@
 <span class="info"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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;"/>
-
+<span class="info">Trend</span><input type="checkbox" id="elem_trend" style="font-size:16pt; width:20px; height:20px;"/>
 </div>
 
     
@@ -416,6 +444,14 @@ function add() {
         data_linkhtml = false;
         $("#"+key).attr("data-linkhtml", false);
     }
+     
+    if ($('#elem_trend').is(":checked")) {
+        data_trend = true;
+        $("#"+key).attr("data-trend", true);
+    } else {
+        data_trend = false;
+        $("#"+key).attr("data-trend", false);
+    }
  
     data_lesser = $("#elem_lesser_range").val();
     data_larger = $("#elem_larger_range").val();
@@ -469,6 +505,7 @@ function add() {
  		            "' data-larger='" + data_larger + 
                     "' data-exponential='" + data_exponential +
                     "' data-linkhtml='" + data_linkhtml +
+                    "' data-trend='" + data_trend +
                     "'>" +
                     "<p>" +
                     "<span style='color: " + title_color + ";" + 
@@ -598,6 +635,7 @@ function add() {
                                 "' data-offexpression='" + offexpression +
                                 "' data-off='" + offvalue +
                         "' data-linkhtml='" + data_linkhtml +
+                        "' data-trend='" + data_trend +
                         "'>" +
                                 "<img width='100%' height='100%' " +
                         "src='/static/" + icon + "_inactive.svg' ></img>" +
@@ -639,6 +677,7 @@ function add() {
                         "' data-dict='" + unit_text +
                         "' data-cond='" + data_condition +
                         "' data-linkhtml='" + data_linkhtml +
+                        "' data-trend='" + data_trend +
                         "'>" +
                         "<p>" +
                         "<span style='color: " + title_color + ";" + 
@@ -717,6 +756,13 @@ function mysave(data) {
                         tmp["linkhtml"] = "false";
 			$("#"+key).attr("data-linkhtml","false");
                     }
+                    if ($('#elem_trend').is(":checked")) {
+                        tmp["trend"] = "true";
+                        $("#"+key).attr("data-trend", "true");
+                    } else {
+                        tmp["trend"] = "false";
+                        $("#"+key).attr("data-trend","false");
+                    }
             	    if ($('#background_color').val().length > 0) {
                         tmp["background_color"] = $('#background_color').val();
                     } else {
@@ -752,6 +798,7 @@ function mysave(data) {
             	    tmp["larger"] = $("#"+key).attr("data-larger");
                     tmp["exponential"] = $("#"+key).attr("data-exponential");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                    tmp["trend"] = $("#"+key).attr("data-trend");
              	    //tmp["min"] = $("#"+key).attr("min");
            	    //tmp["max"] = $("#"+key).attr("max");
                     header = {};
@@ -805,6 +852,13 @@ function mysave(data) {
                         tmp["linkhtml"] = "false";
                         $("#"+key).attr("data-linkhtml","false");
                     }
+                    if ($('#elem_trend').is(":checked")) {
+                        tmp["trend"] = "true";
+                        $("#"+key).attr("data-trend", "true");
+                    } else {
+                        tmp["trend"] = "false";
+                        $("#"+key).attr("data-trend","false");
+                    }
                 } else {
                     tmp["icon"] = $("#"+key).attr("data-icon");
                     tmp["on"] = $("#"+key).attr("data-on");
@@ -812,6 +866,7 @@ function mysave(data) {
                     tmp["off"] = $("#"+key).attr("data-off");
                     tmp["off_condition"] = $("#"+key).attr("data-offexpression");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                    tmp["trend"] = $("#"+key).attr("data-trend");
                 }
            /* 
            } else if ( $("#"+key).attr("data-type") == "commbit" ) {
@@ -865,6 +920,13 @@ function mysave(data) {
                     } else {
                         tmp["linkhtml"] = "false";
                         $("#"+key).attr("data-linkhtml","false");
+                    }
+                    if ($('#elem_trend').is(":checked")) {
+                        tmp["trend"] = "true";
+                        $("#"+key).attr("data-trend", "true");
+                    } else {
+                        tmp["trend"] = "false";
+                        $("#"+key).attr("data-trend","false");
                     } 
                     if ($('#background_color').val().length > 0) {
                         tmp["background_color"] = $('#background_color').val();
@@ -885,6 +947,7 @@ function mysave(data) {
             	    tmp["cond"] = $("#"+key).attr("data-cond");
             	    tmp["background_color"] = $("#"+key).css("background-color");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                    tmp["trend"] = $("#"+key).attr("data-trend");
                     header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -948,6 +1011,13 @@ function mysave(data) {
                         tmp["linkhtml"] = "false";
                         $("#"+key).attr("data-linkhtml","false");
                     }
+                    if ($('#elem_trend').is(":checked")) {
+                        tmp["trend"] = "true";
+                        $("#"+key).attr("data-trend", "true");
+                    } else {
+                        tmp["trend"] = "false";
+                        $("#"+key).attr("data-trend","false");
+                    }
                     if ($('#background_color').val().length > 0) {
                         tmp["background_color"] = $('#background_color').val();
                     } else {
@@ -976,7 +1046,8 @@ function mysave(data) {
              	    //tmp["min"] = $("#"+key).attr("min");
            	    //tmp["max"] = $("#"+key).attr("max");
                     tmp["background_color"] = $("#"+key).css("background-color");
-                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml"); 
+                    tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                    tmp["trend"] = $("#"+key).attr("data-trend"); 
             	    header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -1014,6 +1085,13 @@ function mysave(data) {
                         tmp["linkhtml"] = "false";
                         $("#"+key).attr("data-linkhtml","false");
                     }
+                    if ($('#elem_trend').is(":checked")) {
+                        tmp["trend"] = "true";
+                        $("#"+key).attr("data-trend", "true");
+                    } else {
+                        tmp["trend"] = "false";
+                        $("#"+key).attr("data-trend","false");
+                    }
                 } else {
 		    tmp["icon"] = $("#"+key).attr("data-icon");
                     tmp["on"] = $("#"+key).attr("data-on");
@@ -1021,6 +1099,7 @@ function mysave(data) {
                     tmp["off"] = $("#"+key).attr("data-off");
                     tmp["off_condition"] = $("#"+key).attr("data-offexpression");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                    tmp["trend"] = $("#"+key).attr("data-trend");
                 }
 		/*
             } else if ( $("#"+key).attr("data-type") == "commbit" ) {
@@ -1078,6 +1157,13 @@ function mysave(data) {
                         tmp["linkhtml"] = "false";
                         $("#"+key).attr("data-linkhtml","false");
                     }
+                    if ($('#elem_trend').is(":checked")) {
+                        tmp["trend"] = "true";
+                        $("#"+key).attr("data-trend", "true");
+                    } else {
+                        tmp["trend"] = "false";
+                        $("#"+key).attr("data-trend","false");
+                    }
             	    tmp["cond"] = data_condition;
             	    tmp["dict"] = unit_text;
              	    
@@ -1095,6 +1181,7 @@ function mysave(data) {
             	    tmp["cond"] = $("#"+key).attr("data-cond");
             	    tmp["background_color"] = $("#"+key).css("background-color");
                     tmp["linkhtml"] = $("#"+key).attr("data-linkhtml");
+                    tmp["trend"] = $("#"+key).attr("data-trend");
                     header = {};
             	    header["title"] = $(".title", "#"+key).text();
             	    //header["color"] = $(".title", "#"+key).css("color");
@@ -1258,7 +1345,8 @@ function highlight(mydata) {
     $("#virtual_id_text").val("");
     $("#background_color").val("");
     $('#elem_exponential').prop('checked', false);
-    $('#elem_linkhtml').prop('checked', false); 
+    $('#elem_linkhtml').prop('checked', false);
+    $('#elem_trend').prop('checked', false); 
     $('#elem_unit_text').removeClass('glowing_border');  
     $('#elem_title_text').removeClass('glowing_border');
     $('#elem_formula').removeClass('glowing_border');
@@ -1304,6 +1392,11 @@ function highlight(mydata) {
             $('#elem_linkhtml').prop('checked', true);
         } else {
             $('#elem_linkhtml').prop('checked', false);
+        }
+        if (($("#"+varname).attr("data-trend")) == "true" || ($("#"+varname).attr("data-trend")) == "true") {
+            $('#elem_trend').prop('checked', true);
+        } else {
+            $('#elem_trend').prop('checked', false);
         } 
         $("#elem_title_text").val($("#"+varname + " .title").text().trim());
         $("#elem_title_size").val("");
@@ -1408,6 +1501,11 @@ function highlight(mydata) {
         } else {
             $('#elem_linkhtml').prop('checked', false);
         }
+        if (($("#"+varname).attr("data-trend")) == "true" || ($("#"+varname).attr("data-trend")) == "true") {
+            $('#elem_trend').prop('checked', true);
+        } else {
+            $('#elem_trend').prop('checked', false);
+        }
         
         if (varname.includes("virtual")){
             $("#varattr").val("virtual");
@@ -1448,6 +1546,11 @@ function highlight(mydata) {
             $('#elem_linkhtml').prop('checked', true);
         } else {
             $('#elem_linkhtml').prop('checked', false);
+        }
+        if (($("#"+varname).attr("data-trend")) == "true" || ($("#"+varname).attr("data-trend")) == "true") {
+            $('#elem_trend').prop('checked', true);
+        } else {
+            $('#elem_trend').prop('checked', false);
         } 
     }
     for(key in mydata) {

status.html

@@ -80,6 +80,10 @@ data-larger="{{ data['style'][key]['larger'] }}"
 data-exponential="{{ data['style'][key]['exponential'] }}"
 {% else %}
 {% end %}
+{% if "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if "linkhtml" in data['style'][key] %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
@@ -94,11 +98,25 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 
 {% if "ref" in data['style'][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><span><img src="" alt="" class="popup"></span></p>
+<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>
+{% if "trend" in data['style'][key] %}
+{% if data['style'][key]['trend'] == 'true' %}
+</p>
+{% else %}
+{% end %}
+{% else %}
+{% end %}
 </div>
 {% else %}
 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><span><img src="" alt="" class="popup"></span></p>
+<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>
+{% if "trend" in data['style'][key] %}
+{% if data['style'][key]['trend'] == 'true' %}
+</p>
+{% else %}
+{% end %}
+{% else %}
+{% end %}
 </div>
 {% end %}
 
@@ -113,6 +131,10 @@ data-type="{{ data['style'][key]['type'] }}" id="{{ key }}">
 <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 "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
 onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
@@ -122,14 +144,21 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% end %}
 {% if "ref" in data['style'][key] %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if "trend" in data['style'][key] %}
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
 </div>
 </div>
 {% else %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
 </div>
@@ -146,6 +175,10 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 <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 "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
 onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
@@ -155,14 +188,18 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% end %}
 {% if "ref" in data['style'][key] %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
 </div>
@@ -179,6 +216,10 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 <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 "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
 onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
@@ -188,14 +229,18 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% end %}
 {% if "ref" in data['style'][key] %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
@@ -212,6 +257,10 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 <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 "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
 onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
@@ -221,14 +270,18 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% end %}
 {% if "ref" in data['style'][key] %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
 </div>
@@ -245,6 +298,10 @@ data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['i
 <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 "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
 onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');"
@@ -254,14 +311,18 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% end %}
 {% if "ref" in data['style'][key] %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("bottle_inactive.svg") }}'></img>
 </div>
 </div>
 {% else %}
 data-type="{{ data['style'][key]['type'] }}" data-icon="{{ data['style'][key]['icon'] }}" data-off="{{ data['style'][key]['off'] }}" data-offexpression="{{ data['style'][key]['off_condition'] }}" data-on="{{ data['style'][key]['on'] }}" data-onexpression="{{ data['style'][key]['on_condition'] }}" class='databox' id="{{ key }}">
-<span><img src="" alt="" class="popup"></span>
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
 <div class="icon">
 <img width='100%' height='100%' src='{{ static_url("bottle_inactive.svg") }}'></img>
 </div>
@@ -289,6 +350,11 @@ data-cond="{{ data['style'][key]['cond'] }}"
 {% else %}
 {% end %}
 
+{% if "trend" in data['style'][key] %}
+data-trend="{{ data['style'][key]['trend'] }}"
+{% else %}
+{% end %}
+
 {% if "linkhtml" in data['style'][key] %}
 {% if data['style'][key]['linkhtml'] == 'true' %}
 {% if "server" in data %}
@@ -300,7 +366,14 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 {% 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><span><img src="" alt="" class="popup"></span></p>
+<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>
+{% if "trend" in data['style'][key] %}
+{% if data['style'][key]['trend'] == 'true' %}
+{% else %}
+{% end %}
+{% else %}
+{% end %}
+</p>
 </div>
 {% else %}
 {% end %}
@@ -336,6 +409,14 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 <script>
 
 jQuery(window).load(function () {
+
+$(".databox").hover(function(){
+    var key = $(this).attr('id');
+    if ($("#" + key).attr('data-trend') == "true") {
+        $('#'+ key).append('<span class="popup"><img src="static/dataimage/'+key+'.png" width="600px" height="400px"/></span>');
+    }
+});
+
 myTimer();
 var myVar = setInterval(myTimer, 10000);
 function myTimer() {
@@ -660,11 +741,6 @@ function myTimer() {
    	    $("#page_info").text(datetime);
             console.log(datetime);
 
-            var timer = setInterval(function(){
-                var imgUrl = "static/dataimage/" + key + ".png?" + new Date().getTime();
-                $('.popup').attr("src",imgUrl);
-            },5000);
-
         },
         error: function () {
             console.log("Error.")