bug fixes on data attributes visualization.

https://github.com/kit-ipe/bora/issues/6
https://github.com/kit-ipe/bora/issues/5

Signed-off-by: nicolaisi <nicholas.jerome@kit.edu>

.gitignore

@@ -1,2 +1,3 @@
 config.yaml
+cache.yaml
 .tmp.yaml

designer.html

@@ -21,9 +21,8 @@
 
 {% if data['style'] %}
 {% for key in data['style'] %}
-<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;' min="{{ data['style'][key]['min'] }}" max="{{ data['style'][key]['max'] }}" lesser="{{ data['style'][key]['lesser'] }}" larger="{{ data['style'][key]['larger'] }}" class='varbox' id="{{ key }}">
-<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
-<span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX <span class='unit_title'> {{ data['style'][key]['unit']['title'] }}</span></span></p>
+<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-cond="{{ data['style'][key]['condition'] }}" data-lesser="{{ data['style'][key]['lesser'] }}" data-larger="{{ data['style'][key]['larger'] }}" class='varbox' id="{{ key }}">
+<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; 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'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX <span class='unit_title'> {{ data['style'][key]['unit']['title'] }}</span></span></p>
 </div>
 {% end %}
 {% else %}
@@ -55,8 +54,7 @@
 <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_min_range" placeholder="minimum (green)" style="font-size:16pt; width=100px;"/>
-<input type="text" id="elem_max_range" placeholder="maximum (green)" style="font-size:16pt; width=100px;"/>
+<input type="text" id="elem_condition_range" placeholder="condition (red)" style="font-size:16pt; width=100px;"/>
 
 <select id="elem_unit_style" style="font-size:16pt;">
   <option value="400">normal</option>
@@ -98,8 +96,8 @@ function add() {
     unit_size = $("#elem_unit_size").val();
     unit_style = $("#elem_unit_style option:selected").val();
     
-    data_min = $("#elem_min_range").val();
-    data_max = $("#elem_max_range").val();
+    data_condition = $("#elem_condition_range").val();
+    //data_max = $("#elem_max_range").val();
     
     data_lesser = $("#elem_lesser_range").val();
     data_larger = $("#elem_larger_range").val();
@@ -110,8 +108,8 @@ function add() {
     
     
     if($("#" + varname).length == 0) {
-        html_text = "<div style='position: absolute; top:0; left:0;' class='varbox' id='" + varname + "' min='" + data_min + "' max='" + data_max + "' lesser='" + data_lesser + "' larger='" + data_larger + "'>";
-        html_text += "<p><span style='color: " + title_color + "; font-size:" + title_size + "px; font-weight: " + title_style + ";' " + "class='title'>" + title_text + "</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: " + unit_color + "; font-size:" + unit_size + "px; font-weight: " + unit_style + ";' " + "class='varval'>" + parseFloat(varval).toFixed(2) + " </span><span class='unit_title'>" + unit_text + "</span></p>";
+        html_text = "<div style='position: absolute; top:0; left:0;' class='varbox' id='" + varname + "' data-cond='" + data_condition + "' data-lesser='" + data_lesser + "' data-larger='" + data_larger + "'>";
+        html_text += "<p><span style='color: " + title_color + "; font-size:" + title_size + "px; font-weight: " + title_style + ";' " + "class='title'>" + title_text + " </span><span style='color: " + unit_color + "; font-size:" + unit_size + "px; font-weight: " + unit_style + ";' " + "class='varval'>" + parseFloat(varval).toFixed(2) + " </span><span class='unit_title'>" + unit_text + "</span></p>";
         html_text += "</div>";
     
         $( "body" ).append(html_text);
@@ -144,9 +142,9 @@ function mysave(data) {
             //tmp["max"] = $("#elem_max_range").val();
             tmp["min"] = $("#"+key).attr("min");
             tmp["max"] = $("#"+key).attr("max");
-            
-            tmp["lesser"] = $("#"+key).attr("lesser");
-            tmp["larger"] = $("#"+key).attr("larger");
+            tmp["condition"] = $("#"+key).attr("data-cond");
+            tmp["lesser"] = $("#"+key).attr("data-lesser");
+            tmp["larger"] = $("#"+key).attr("data-larger");
             
             header = {};
             header["title"] = $(".title", "#"+key).text();

static/style.css

@@ -70,6 +70,10 @@ span,
     border: dashed 5px #ccc;
 }
 
+.databox {
+    border: dashed 5px rgba(0,0,0,0);
+}
+
 .statusbox {
     position: absolute;
     width: 50px;

status.html

@@ -19,9 +19,13 @@
     
 {% if data['style'] %}
 {% for key in data['style'] %}
-<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;' min="{{ data['style'][key]['min'] }}" max="{{ data['style'][key]['max'] }}" lesser="{{ data['style'][key]['lesser'] }}" larger="{{ data['style'][key]['larger'] }}" id="{{ key }}">
-<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
-    <span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX </span><span class='unit_title'> {{ data['style'][key]['unit']['title'] }}</span></p>
+<div class="databox" style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;' 
+{% if data['style'][key]['condition'] %}
+data-cond="{{ data['style'][key]['condition'] }}"
+{% else%}
+{% end%}
+data-lesser="{{ data['style'][key]['lesser'] }}" data-larger="{{ data['style'][key]['larger'] }}" id="{{ key }}">
+<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; 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'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX </span><span class='unit_title'> {{ data['style'][key]['unit']['title'] }}</span></p>
 </div>
 {% end %}
 {% else %}
@@ -54,10 +58,31 @@ function myTimer() {
                 console.log(key, response[key]);
                 if($("#" + key).length > 0) {
                     $(".varval", "#" + key).text(parseFloat(response[key]).toFixed(2));
+ 		    var set_color = "green";
+                    var condition_attr = $("#" + key).attr('data-cond');
+                    var lesser_attr = $("#" + key).attr('data-lesser');
+                    var larger_attr = $("#" + key).attr('data-larger');
+  		    //console.log(condition_attr);
+                    if (typeof(condition_attr) !== 'undefined' && condition_attr !== false) {
+ 			if (response[key] == condition_attr) {
+ 			    set_color = "red";
+      			}
+		    }
+ 		    if (typeof(lesser_attr) !== 'undefined' && lesser_attr !== false) {
+ 			if (parseFloat(response[key]) < parseFloat(lesser_attr)) {
+ 			    set_color = "red";
+      			}
+		    }
+  		    if (typeof(larger_attr) !== 'undefined' && larger_attr !== false) {
+ 			if (parseFloat(response[key]) > parseFloat(larger_attr)) {
+ 			    set_color = "red";
+      			}
+		    }
+		    $(".varval", "#" + key).css("color", set_color);
+		    $(".unit_title", "#" + key).css("color", set_color);
                 }
             }
 
-
 	    var currentdate = new Date(); 
 	    var datetime = "CPS data monitoring page. Last Sync: " + ( (currentdate.getDate()<10?'0':'').toString() + (currentdate.getDate()).toString() ) + "/"
                 + ( ((currentdate.getMonth()+1)<10?'0':'').toString() + (currentdate.getMonth()+1)).toString()  + "/" 

style.yaml

@@ -1,17 +1,32 @@
 320-RTP-3-1101:
+  condition: ''
   header:
     size: 28px
-    title: ''
+    title: '  '
     weight: '400'
-  height: 79.991
-  larger: '77'
-  left: 734.968px
+  height: 88.991
+  larger: '70'
+  left: 173.968px
+  lesser: '0'
+  top: 811.96px
+  unit:
+    size: 28px
+    title: '      K'
+    weight: '400'
+  width: 130.99099999999999
+320-RTY-3-2101:
+  condition: ''
+  header:
+    size: 28px
+    title: 'Temperature 1 '
+    weight: '400'
+  height: 112.991
+  larger: '4.5'
+  left: 423.972px
   lesser: ''
-  max: '77'
-  min: '0'
-  top: 266.946px
+  top: 359.963px
   unit:
     size: 28px
-    title: '  K'
+    title: K
     weight: '400'
-  width: 191.99099999999999
+  width: 233.99099999999999

varname.yaml

@@ -1 +1,2 @@
 320-RTP-3-1101: db_server=cscps&db_name=ControlSystem_CPS&db_group=320_STR_Strahlrohr&db_mask=all&window=-1&db_mask=180
+320-RTY-3-2101: db_server=cscps&db_name=ControlSystem_CPS&db_group=320_STR_Strahlrohr&db_mask=all&window=-1&db_mask=213