KATRIN-BORA
/
BORA


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
							<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>{{ data['title'] }} Status display</title>
  <meta name="description" 
          content="Status display generated by BORA.">
  <link rel="stylesheet" href="{{ static_url("style.css") }}">
  <link rel="stylesheet" href="{{ static_url("jquery-ui.min.css") }}">
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

<div id="page_info">{{ data['title'] }} data monitoring. Last refreshed</div>
<div id="page_title_cache" style="display:none;">{{ data['title'] }}</div>
    
{% 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; background-color:{{ data['style'][key]['background_color'] }};' 
{% 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"> --- </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'] }}" 
{% else %}
<div tooltip="{{ key }}" 
{% end %}
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 "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%}
{% 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 %}
{% if "exponential" in data['style'][key] %}
data-exponential="{{ data['style'][key]['exponential'] }}"
{% else %}
{% end %}
{% if "linkhtml" in data['style'][key] %}
{% 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');"
{% else %}
{% end %}
{% else %}
{% end %}
{% else %}
{% end %}


{% 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>
</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>
</div>
{% end %}

{% else %}
{% end %}

{% if data['style'][key]['type'] == "icon" %}
{% if data['style'][key]['icon'] == "valve" %}
{% if "ref" in data['style'][key] %}
<div tooltip="{{ data['style'][key]['ref'] }}"
{% else %}
<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' %}
{% 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');"
{% else %}
{% end %}
{% else %}
{% 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 }}">
<img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
</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 }}">
<img width='100%' height='100%' src='{{ static_url("valve_inactive.png") }}'></img>
{% end %}

{% else %}
{% end %}

{% if data['style'][key]['icon'] == "commbit" %}
{% if "ref" in data['style'][key] %}
<div tooltip="{{ data['style'][key]['ref'] }}"
{% else %}
<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' %}
{% 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');"
{% else %}
{% end %}
{% else %}
{% 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 }}">
<img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
</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 }}">
<img width='100%' height='100%' src='{{ static_url("commbit_inactive.svg") }}'></img>
</div>
{% end %}

{% else %}
{% end %}

{% if data['style'][key]['icon'] == "alarm" %}
{% if "ref" in data['style'][key] %}
<div tooltip="{{ data['style'][key]['ref'] }}"
{% else %}
<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' %}
{% 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');"
{% else %}
{% end %}
{% else %}
{% 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 }}">
<img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
</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 }}">
<img width='100%' height='100%' src='{{ static_url("alarm_inactive.svg") }}'></img>
</div>
{% end %}

{% else %}
{% end %}

{% if data['style'][key]['icon'] == "tmp" %}
{% if "ref" in data['style'][key] %}
<div tooltip="{{ data['style'][key]['ref'] }}"
{% else %}
<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' %}
{% 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');"
{% else %}
{% end %}
{% else %}
{% 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 }}">
<img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
</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 }}">
<img width='100%' height='100%' src='{{ static_url("TMP_inactive.svg") }}'></img>
</div>
{% end %}

{% else %}
{% end %}
{% else %}
{% end %}

{% if data['style'][key]['type'] == "integer-to-string" %}
<div tooltip="{{ key }}" 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 "background_color" in data['style'][key] %}
background-color:{{ data['style'][key]['background_color'] }};'
{% else%}
'
{% end%}

{% if "cond" in data['style'][key] %}
data-cond="{{ data['style'][key]['cond'] }}"
{% else %}
{% end %}

{% if "linkhtml" in data['style'][key] %}
{% 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');"
{% else %}
{% end %}
{% else %}
{% end %}
{% 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 %}
{% end %}

{% if data['style'][key]['type'] == "header" %}
<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; background-color:{{ data['style'][key]['background_color'] }};' 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></p>
</div>
{% else %}
{% end %}


{% end %}
{% else %}
{% end %}


{% if "background" in data %}
<img src="{{ static_url( data['background'] ) }}"></img>    
{% else %}
<img src="{{ static_url( 'background.png' ) }}"></img>
{% end %}

   
<!-- java script -->
<script src="{{ static_url("jquery-1.12.3.min.js") }}"></script>
<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);
function myTimer() {
    var dataToSend = {};
    $.ajax({
        url: '/getdata/',
        type: 'GET',
        data: dataToSend,
        success: function (response) {
            //var objresponse = JSON.parse(response);
            console.log(response);
            for (var key in response) {
                //console.log(key, response[key]); 
                data_type = $("#" + key).attr('data-type');
                if($("#" + key).length > 0) {
                    if (data_type == "data") {
                        //console.log("data");
                        var datavalue, set_color, formula;
                        var formula_attr = $("#" + key).attr('data-formula');
			if (response[key]) {
                            if (formula_attr) {
                                datavalue = parseFloat(response[key]).toFixed(2);
 			        formula = formula_attr.replace("x", datavalue.toString());
                                datavalue = math.round(math.eval(formula),2);
                                datavalue = datavalue.toFixed(2);
		    	    } else {
                                if ( ($("#" + key).attr('data-exponential')) == "True" || ($("#" + key).attr('data-exponential')) == "true" ) {
                                    datavalue = parseFloat(response[key]);
                                    datavalue = datavalue.toExponential(2)
                                } else {
                                    datavalue = parseFloat(response[key]).toFixed(2);
                                }
                            }
 		    	    set_color = "green";
		        } else {
			    datavalue = "---";
			    set_color = "black";
		        }
                        $(".varval", "#" + key).text(datavalue);
                        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 (condition_attr) {
 			    if (response[key] == condition_attr) {
 			        set_color = "red";
      			    }
		    	}
 		    	if (lesser_attr) {
 			    if (parseFloat(response[key]) < parseFloat(lesser_attr)) {
 			    	set_color = "red";
      			    }
		    	}
  		        if (larger_attr) {
 			    if (parseFloat(response[key]) > parseFloat(larger_attr)) {
 			    	set_color = "red";
      			    }
		    	}
		    	$(".varval", "#" + key).css("color", set_color);
		    	$(".unit_title", "#" + key).css("color", set_color);
                    
		    } else if (data_type == "icon") {
                        //console.log("ventil");
                        var on_attr = $("#" + key).attr('data-on');
                        var off_attr = $("#" + key).attr('data-off');
			var on_condition = $("#" + key).attr('data-onexpression');
			var off_condition = $("#" + key).attr('data-offexpression');
                        if (on_condition == 'onequal'){
		            if (parseFloat(response[key]) == parseFloat(on_attr)) {
                                $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
                            }
                        } else if (on_condition == 'onsmaller'){	 
 			    if (parseFloat(response[key]) < parseFloat(on_attr)) {
 			        $("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");
      			    }
                        }
                        if (off_condition == 'offequal'){
                            if (parseFloat(response[key]) == parseFloat(off_attr)) {
                                $("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");
                            }
                        } else if (off_condition == 'offgreater'){
                            if (parseFloat(response[key]) > parseFloat(off_attr)) {
                                $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                            }
                        }
			/*
                    } else if (data_type == "commbit") {
                        //console.log("commbit");
                        var on_attr = $("#" + key).attr('data-on');
                        var off_attr = $("#" + key).attr('data-off');
                        if (parseFloat(response[key]) == parseFloat(on_attr)) {
                            $("img", "#" + key).attr("src", "{{ static_url('commbit_green.svg') }}");
                        }
                        if (parseFloat(response[key]) == parseFloat(off_attr)) {
                            $("img", "#" + key).attr("src", "{{ static_url('commbit_red.svg') }}");
                        }
                    } else if (data_type == "alarm") {
                        //console.log("alarm");
                        var on_attr = $("#" + key).attr('data-on');
                        var off_attr = $("#" + key).attr('data-off');
                        if (parseFloat(response[key]) == parseFloat(on_attr)) {
                            $("img", "#" + key).attr("src", "{{ static_url('alarm_active.svg') }}");
                        }
                        if (parseFloat(response[key]) == parseFloat(off_attr)) {
                            $("img", "#" + key).attr("src", "{{ static_url('alarm_inactive.svg') }}");
                        }*/
		    } else if (data_type == "integer-to-string") {
                        //console.log("integer-to-string");
                        var dict_attr = JSON.parse($("#" + key).attr('data-dict'));
                        var dict_cond;
                        if ($("#"+key).attr("data-cond")) {
                            dict_cond = JSON.parse($("#" + key).attr('data-cond'));
                        } else {
                            dict_cond = {};
                        }
                        var dict_color = "";
                        if (key in response) {
                            var token = response[key];
                            if (token in dict_cond) {
                                dict_color = dict_cond[token];
                            }
                        }
                        $(".varval", "#" + key).css("color", dict_color);
                        $(".varval", "#" + key).text(dict_attr[response[key]]);
		    }
		}
            }
            $('[id^=virtual_]').each(function( index ) {
                var key = this.id;
		var ref = key.split("_");
                ref.shift();
		ref.pop();
		ref = ref.join("_");
		//ref = ref[1];
		console.log(ref, key);
                data_type = $("#" + key).attr('data-type');
                if($("#" + key).length > 0) {
                    if (data_type == "data") {
                        console.log(key);
                        var datavalue, set_color, formula;
                        var formula_attr = $("#" + key).attr('data-formula');
			            if (response[ref]) {
                            if (formula_attr) {
                                datavalue = parseFloat(response[ref]).toFixed(2);
 			                    formula = formula_attr.replace("x", datavalue.toString());
                                datavalue = math.round(math.eval(formula),2);
                                datavalue = datavalue.toFixed(2);
		    	            } else {
			                    datavalue = parseFloat(response[ref]).toFixed(2);
                            }
 		    	            set_color = "green";
			            } else {
			                datavalue = "---";
			                set_color = "black";
			            }
                        $(".varval", "#" + key).text(datavalue);
                        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 (condition_attr) {
 			                if (response[ref] == condition_attr) {
 			    	            set_color = "red";
      			            }
		    	        }
 		    	        if (lesser_attr) {
 			                if (parseFloat(response[ref]) < parseFloat(lesser_attr)) {
 			    	            set_color = "red";
      			            }
		    	        }
  		                if (larger_attr) {
 			                if (parseFloat(response[ref]) > parseFloat(larger_attr)) {
 			    	            set_color = "red";
      			            }
		    	        }
		    	        $(".varval", "#" + key).css("color", set_color);
		    	        $(".unit_title", "#" + key).css("color", set_color);
                    
		            } else if (data_type == "icon") {
                                var on_attr = $("#" + key).attr('data-on');
                                var off_attr = $("#" + key).attr('data-off');
                                var on_condition = $("#" + key).attr('data-onexpression');
                                var off_condition = $("#" + key).attr('data-offexpression');
                                if (on_condition == 'onequal'){
                                    if (parseFloat(response[ref]) == parseFloat(on_attr)) {
                                        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
                                    }
                                } else if (on_condition == 'onsmaller'){
                                    if (parseFloat(response[ref]) < parseFloat(on_attr)) {
                                        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
                                    }
                                } else if (on_condition == 'ongreater'){
                                    if (parseFloat(response[ref]) > parseFloat(on_attr)) {
                                        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_green.svg");
                                    }
                                }
                                if (off_condition == 'offequal'){
                                    if (parseFloat(response[ref]) == parseFloat(off_attr)) {
                                        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                                    }
                                } else if (off_condition == 'offsmaller'){
                                    if (parseFloat(response[ref]) < parseFloat(off_attr)) {
                                        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                                    }
                                } else if (off_condition == 'offgreater'){
                                    if (parseFloat(response[ref]) > parseFloat(off_attr)) {
                                        $("img", "#" + key).attr("src", "/static/" + $("#" + key).attr('data-icon') + "_red.svg");
                                    }
                                }
                            /*
                            } else if (data_type == "commbit") {
                        var on_attr = $("#" + key).attr('data-on');
                        var off_attr = $("#" + key).attr('data-off');
                                    if (parseFloat(response[ref]) == parseFloat(on_attr)) {
                                        $("img", "#" + key).attr("src", "{{ static_url('commbit_green.svg') }}");
                                }
                                    if (parseFloat(response[ref]) == parseFloat(off_attr)) {
                                        $("img", "#" + key).attr("src", "{{ static_url('commbit_red.svg') }}");
                                }
                            } else if (data_type == "alarm") {
                        var on_attr = $("#" + key).attr('data-on');
                        var off_attr = $("#" + key).attr('data-off');
                                    if (parseFloat(response[ref]) == parseFloat(on_attr)) {
                                        $("img", "#" + key).attr("src", "{{ static_url('alarm_active.svg') }}");
                                }
                                    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;
                        if ($("#"+key).attr("data-cond")) {
                            dict_cond = JSON.parse($("#" + key).attr('data-cond'));
                        } else {
                            dict_cond = {};
                        }
                        var dict_color = "";
                        if (ref in response) {
                            var token = response[ref];
                            if (token in dict_cond) {
                                dict_color = dict_cond[token];
                            }
                        }
                        $(".varval", "#" + key).css("color", dict_color);
                        $(".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("Debug:");
                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 (teststring[i] in response) {
                        val = response[teststring[i]];
                    } 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 page_title_cache = $("#page_title_cache").text();
	    var datetime = page_title_cache + " data monitoring page. Last Sync: " + response["time"];
   	    $("#page_info").text(datetime);
            console.log(datetime);
        },
        error: function () {
            console.log("Error.")
        }
    });
}
});
</script>
</body>
</html>