added a calculation box.

- used to show results from calculation of multiple data
  items.

Signed-off-by: Nicholas Tan Jerome <nicholas.jerome@kit.edu>

designer.html

@@ -21,6 +21,34 @@
 
 {% if data['style'] %}
 {% for key in data['style'] %}
+    
+{% if data['style'][key]['type'] == "calc" %}
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
+    data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
+    height:{{ data['style'][key]['height'] }}px;' 
+{% if "condition" in data['style'][key] %}
+ data-cond="{{ data['style'][key]['condition'] }}"
+{% else%}position
+{% end%}
+{% if "formula" in data['style'][key] %}
+ data-formula="{{ data['style'][key]['formula'] }}"
+{% else %}
+{% end %}
+{% if "lesser" in data['style'][key] %}
+ data-lesser="{{ data['style'][key]['lesser'] }}"
+{% else %}
+{% end %}
+{% if "larger" in data['style'][key] %}
+ data-larger="{{ data['style'][key]['larger'] }}"
+{% else %}
+{% end %}
+ 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><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX <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></p>
+</div>
+{% else %}
+{% end %}
+
+    
 {% if data['style'][key]['type'] == "data" %}
 <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
     data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
@@ -105,6 +133,7 @@
   <option value="ventil">ventil</option>
   <option value="integer-to-string">integer-to-string</option>
   <option value="header">header</option>
+  <option value="calc">calc</option>
 </select>
 <span class="info">Attribute</span>
 <select id="varattr" style="font-size:16pt;">
@@ -284,6 +313,42 @@ function add() {
             $('#varname').val(varname);
             
 
+        } else if (vartype == "calc") {
+            console.log("Calc");
+            var clean_text = title_text.replace(/[^a-zA-Z0-9 ]/g, "")
+            varname = "calc_" + clean_text.replace(/\s+/g, '-').toLowerCase();
+            html_text = "<div " +
+                    "style='position: absolute; " +
+                           "top:0; " +
+                           "left:0;' " +
+                    "class='varbox box_highlight' " + 
+                    "id='" + varname +
+                    "' data-type='" + vartype +
+                    "' data-cond='" + data_condition +
+                    "' data-lesser='" + data_lesser + 
+ 		            "' data-larger='" + data_larger +
+                    "' data-formula='" + data_formula +
+                    "'>" +
+                    "<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>" +
+        	    "</div>";
+            
+            $('#varname').append($('<option>', {
+                value: varname,
+                text: varname
+            }));
+            $('#varname').val(varname);
+            
+
         } else if (vartype == "ventil") {
             console.log("Ventil");
             var token = JSON.parse(unit_text);
@@ -593,6 +658,92 @@ function mysave(data) {
         }
     });
 
+    $('[id^=header_]').each(function( index ) {
+        tmp = {};
+        var hkey = $( this ).attr('id');
+        console.log(hkey);
+        tmp["left"] = $("#"+hkey).css("left");
+        tmp["top"] = $("#"+hkey).css("top");
+        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();
+            //header["color"] = $(".title", "#"+key).css("color");
+            header["size"] = $("#elem_title_size").val();
+            header["weight"] = $("#elem_title_style option:selected").val();
+        } else {
+            header["title"] = $(".title", "#"+hkey).text();
+            //header["color"] = $(".title", "#"+hkey).css("color");
+            header["size"] = $(".title", "#"+hkey).css("font-size");
+            header["weight"] = $(".title", "#"+hkey).css("font-weight");
+        }
+
+        tmp["header"] = header;
+        position[hkey] = tmp;
+        //console.log( index + ": " + $( this ).text() );
+    });
+    
+    $('[id^=calc_]').each(function( index ) {
+      var tmp = {};
+        var key = this.id;
+        if($("#" + key).length > 0 ) {
+            tmp["ref"] = "";
+            tmp["left"] = $("#"+key).css("left");
+            tmp["top"] = $("#"+key).css("top");
+            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();
+            	    tmp["formula"] = $("#elem_formula").val();
+             	    tmp["lesser"] = $("#elem_lesser_range").val();
+            	    tmp["larger"] = $("#elem_larger_range").val();
+            
+            	    header = {};
+            	    header["title"] = $("#elem_title_text").val().trim();
+            	    //header["color"] = $(".title", "#"+key).css("color");
+            	    header["size"] = $("#elem_title_size").val();
+            	    header["weight"] = $("#elem_title_style option:selected").val();
+            
+            	    unit = {};
+            	    unit["title"] = $("#elem_unit_text").val().trim();
+            	    //unit["color"] = $(".varval", "#"+key).css("color");
+            	    unit["size"] = $("#elem_unit_size").val();
+            	    unit["weight"] = $("#elem_unit_style option:selected").val();
+                    
+                } 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["min"] = $("#"+key).attr("min");
+           	        //tmp["max"] = $("#"+key).attr("max");
+            
+            	    header = {};
+            	    header["title"] = $(".title", "#"+key).text();
+            	    //header["color"] = $(".title", "#"+key).css("color");
+            	    header["size"] = $(".title", "#"+key).css("font-size");
+            	    header["weight"] = $(".title", "#"+key).css("font-weight");
+            
+            	    unit = {};
+            	    unit["title"] = $(".unit_title", "#"+key).text();
+            	    //unit["color"] = $(".varval", "#"+key).css("color");
+            	    unit["size"] = $(".varval", "#"+key).css("font-size");
+            	    unit["weight"] = $(".varval", "#"+key).css("font-weight");
+                }
+
+            	tmp["header"] = header;
+            	tmp["unit"] = unit;
+            }
+            position[key] = tmp;
+        }
+    });
+    
     //console.log("Check here");
     //console.log(position);
     var dataToSend = JSON.stringify(position);
@@ -657,6 +808,33 @@ function highlight(mydata) {
         if ($("#"+varname).attr("data-formula") ) {
             $("#elem_formula").val($("#"+varname).attr("data-formula"));
         }
+    } else if (vartype == "calc") {
+        $("#elem_title_text").val($("#"+varname + " .title").text().trim());
+        $("#elem_title_size").val("");
+        if ($("#"+varname + " .title").css("font-size")) {
+            $("#elem_title_size").val(parseFloat($("#"+varname + " .title").css("font-size")));
+        }
+        $("#elem_unit_text").val($("#"+varname + " .unit_title").text().trim());
+        $("#elem_unit_size").val("");
+        if ($("#"+varname + " .varval").css("font-size")) {
+            $("#elem_unit_size").val(parseFloat($("#"+varname + " .varval").css("font-size")));
+        }
+        $("#elem_lesser_range").val("");
+        if ($("#"+varname).attr("data-lesser") ) {
+            $("#elem_lesser_range").val($("#"+varname).attr("data-lesser"));
+        }
+        $("#elem_larger_range").val("");
+        if ($("#"+varname).attr("data-larger") ) {
+            $("#elem_larger_range").val($("#"+varname).attr("data-larger"));
+        }
+        $("#elem_condition_range").val("");
+        if ($("#"+varname).attr("data-cond") ) {
+            $("#elem_condition_range").val($("#"+varname).attr("data-cond"));
+        }
+        $("#elem_formula").val("");
+        if ($("#"+varname).attr("data-formula") ) {
+            $("#elem_formula").val($("#"+varname).attr("data-formula"));
+        }
     } else if (vartype == "ventil") {
         $("#elem_unit_text").val("{'on':"+$("#"+varname).attr("data-on") + ",'off':"+$("#"+varname).attr("data-off")+"}" );
     } else if (vartype == "integer-to-string") {
@@ -714,17 +892,17 @@ jQuery(window).load(function () {
     
     $("#vartype").change(function() {
         vartype = $("#vartype option:selected").val();
-        if (vartype == "header"){
+        if ((vartype == "header") || (vartype == "calc")) {
             $("#varname").val("");
             // clear values
-	    $("#elem_title_text").val("");
-	    $("#elem_title_size").val("");
-	    $("#elem_unit_text").val("");
-	    $("#elem_unit_size").val("");
-	    $("#elem_lesser_range").val("");
-	    $("#elem_larger_range").val("");
-	    $("#elem_condition_range").val("");
-	    $("#elem_formula").val("");
+	        $("#elem_title_text").val("");
+	        $("#elem_title_size").val("");
+	        $("#elem_unit_text").val("");
+	        $("#elem_unit_size").val("");
+	        $("#elem_lesser_range").val("");
+	        $("#elem_larger_range").val("");
+	        $("#elem_condition_range").val("");
+	        $("#elem_formula").val("");
         }       
     });
 

status.html

@@ -20,6 +20,32 @@
 {% if data['style'] %}
 {% for key in data['style'] %}
 
+{% if data['style'][key]['type'] == "calc" %}
+<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
+    data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
+    height:{{ data['style'][key]['height'] }}px;' 
+{% if "condition" in data['style'][key] %}
+ data-cond="{{ data['style'][key]['condition'] }}"
+{% else%}position
+{% end%}
+{% if "formula" in data['style'][key] %}
+ data-formula="{{ data['style'][key]['formula'] }}" tooltip="{{ data['style'][key]['formula'] }}"
+{% else %}
+{% end %}
+{% if "lesser" in data['style'][key] %}
+ data-lesser="{{ data['style'][key]['lesser'] }}"
+{% else %}
+{% end %}
+{% if "larger" in data['style'][key] %}
+ data-larger="{{ data['style'][key]['larger'] }}"
+{% else %}
+{% end %}
+ 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><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX </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 %}
+{% end %}
+    
 {% if data['style'][key]['type'] == "data" %}
 {% if "ref" in data['style'][key] %}
 <div tooltip="{{ data['style'][key]['ref'] }}" 
@@ -266,6 +292,69 @@ function myTimer() {
                         $(".varval", "#" + key).text(dict_attr[response[ref]]);
 		            }
 		        }
+            });
+            
+            $('[id^=calc_]').each(function( index ) {
+                console.log(this.id);
+                console.log($(this).attr('data-formula'));
+                var myformula = $(this).attr('data-formula').trim();
+                /*
+                myformula = myformula.replace(/\[.*?\]/g, '__');
+                console.log(myformula);
+                */
+                var data = myformula;
+                var re= /\[(.*?)\]/g;
+                var buffer = []
+                for(m = re.exec(data); m; m = re.exec(data)){
+                    buffer.push(m[1]);
+                }
+                console.log(buffer);
+                var finalstring = "";
+                var pattern = /\[(.*?)\]/g;
+                var teststring = myformula.split(" ");
+                console.log(teststring);
+                console.log(finalstring);
+                for (var i = 0; i < teststring.length; i++) {
+                    var val = "";
+                    if (pattern.exec(teststring[i]) != null) {
+                        var cleanref = teststring[i].replace(/[\[\]']+/g,'');
+                        val = response[cleanref];
+                    } else {
+                        val = teststring[i];
+                        
+                    }
+                    finalstring += val;
+                    finalstring += " ";
+                }
+                finalstring = finalstring.trim();
+                console.log(finalstring);
+                var myvalue = math.round(math.eval(finalstring),2);
+                myvalue = myvalue.toFixed(2);
+ 		    	set_color = "green";
+                console.log(myvalue);
+                $(".varval", "#" + this.id).text(myvalue);
+                var condition_attr = $("#" + this.id).attr('data-cond');
+                var lesser_attr = $("#" + this.id).attr('data-lesser');
+                var larger_attr = $("#" + this.id).attr('data-larger');
+  		        //console.log(condition_attr);
+                if (condition_attr) {
+ 			        if (myvalue == condition_attr) {
+ 			            set_color = "red";
+      		        }
+		        }
+ 		    	if (lesser_attr) {
+ 			        if (parseFloat(myvalue) < parseFloat(lesser_attr)) {
+ 			            set_color = "red";
+      		        }
+		        }
+  		        if (larger_attr) {
+ 			        if (parseFloat(myvalue) > parseFloat(larger_attr)) {
+ 			            set_color = "red";
+      			    }
+		        }
+		        $(".varval", "#" + this.id).css("color", set_color);
+		        $(".unit_title", "#" + this.id).css("color", set_color);
+                
             });
 	        var datetime = "CPS data monitoring page. Last Sync: " + response["time"];
    	        $("#page_info").text(datetime);