Added new feature - showing trend (graph) on mouse hovering

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

core.py

@@ -83,7 +83,7 @@ def fetchDataADEI():
     cache_data = {}
     print time.time()
     curtime = int(time.time())
-    #time_range = str((curtime-3600)) + "-" + str(curtime)
+    time_image_range = str((curtime-3600)) + "-" + str(curtime)
     time_range = "-1"
     for param in varname:
         dest = config['server'] + config['script']
@@ -103,15 +103,21 @@ def fetchDataADEI():
         cache_data['time'] = current_timestamp
         #time_pattern = "%Y-%m-%d %H:%M:%S"
         #epoch_cur = int(time.mktime(time.strptime(current_timestamp, time_pattern)))
-    
+        urlimage = config['server'] + 'services/getimage.php' +  "?" + varname[param] + "&window=" + time_image_range + '&frame_width=300&frame_height=200'
+        image = requests.get(urlimage,
+                            auth=(config['username'],
+                                  config['password']))
+        
+        with open("static/dataimage/" + param + ".png",'wb') as handle:
+            for chunk in image.iter_content():
+                handle.write(chunk)
+            
     with open(".tmp.yaml", 'w') as stream_tmp:
         stream_tmp.write(yaml.dump(cache_data, default_flow_style=False))
     src_file = os.getcwd() + "/.tmp.yaml"
     dst_file = os.getcwd() + "/cache.yaml"
     shutil.copy(src_file, dst_file)
-    
-    
-    
+
 print "Start torrenting..."
 # it auto-starts, no need of rt.start()
 

designer.html

@@ -185,8 +185,6 @@
 </div>
 {% else %}
 {% end %}
-{% else %}
-{% 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;'

static/style.css

@@ -132,5 +132,15 @@ span,
     pointer-events: none;
 }
 
+div .popup {
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    visibility: hidden;
+}
 
-
+div:hover .popup {
+    visibility: visible;
+    top:0; left:250px;
+    z-index: 1;
+}

status.html

@@ -58,8 +58,8 @@ class="databox" style='position: absolute; top: {{ data['style'][key]['top'] }};
 {% if "background_color" in data['style'][key] %}
 background-color:{{ data['style'][key]['background_color'] }};'
 {% else%}
-'
 {% end%}
+
 {% if "condition" in data['style'][key] %}
 data-cond="{{ data['style'][key]['condition'] }}"
 {% else%}
@@ -94,11 +94,11 @@ 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></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><span><img src="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span></p>
 </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></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><span><img src="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span></p>
 </div>
 {% end %}
 
@@ -122,11 +122,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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<div class="icon">
 <img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
+</div>
+</div>
 {% end %}
 
 {% else %}
@@ -148,12 +155,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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<div class="icon">
 <img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
 </div>
+</div>
 {% end %}
 
 {% else %}
@@ -175,12 +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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<div class="icon">
 <img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
 </div>
+</div>
 {% end %}
 
 {% else %}
@@ -202,12 +221,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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<div class="icon">
 <img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
 </div>
+</div>
+{% end %}
+
+{% else %}
 {% end %}
 
 {% if data['style'][key]['icon'] == "bottle" %}
@@ -226,12 +254,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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<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="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span>
+<div class="icon">
 <img width='100%' height='100%' src='{{ static_url("bottle_inactive.svg") }}'></img>
 </div>
+</div>
 {% end %}
 
 {% else %}
@@ -266,7 +300,7 @@ 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></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><span><img src="static/dataimage/{{data['style'][key]['ref']}}.png" alt="" class="popup"></span></p>
 </div>
 {% else %}
 {% end %}
@@ -300,6 +334,7 @@ onclick="window.open( '{{ data["server"] }}#module=graph&{{ data['varname'][data
 <script src="{{ static_url("jquery-ui.min.js") }}"></script>
 <script src="{{ static_url("math.min.js") }}"></script>
 <script>
+
 jQuery(window).load(function () {
 myTimer();
 var myVar = setInterval(myTimer, 10000);
@@ -374,24 +409,24 @@ function myTimer() {
                             }
                         } else if (on_condition == 'onsmaller'){	 
  			    if (parseFloat(response[key]) < parseFloat(on_attr)) {
- 			        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
+ 			        $(".icon img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
                             }
       			} else if (on_condition == 'ongreater'){
  			    if (parseFloat(response[key]) > parseFloat(on_attr)) {
- 			        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
+ 			        $(".icon img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
       			    }
                         }
                         if (off_condition == 'offequal'){
                             if (parseFloat(response[key]) == parseFloat(off_attr)) {
-                                $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
+                                $(".icon img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                             }
                         } else if (off_condition == 'offsmaller'){
                             if (parseFloat(response[key]) < parseFloat(off_attr)) {
-                                $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
+                                $(".icon img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                             }
                         } else if (off_condition == 'offgreater'){
                             if (parseFloat(response[key]) > parseFloat(off_attr)) {
-                                $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
+                                $(".icon img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                             }
                         }
 			/*