123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <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">CPS data monitoring. Last refreshed</div>
-
- {% if data['style'] %}
- {% for key in data['style'] %}
- {% if data['style'][key]['type'] == "data" %}
- <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-type="{{ data['style'][key]['type'] }}" 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>
- {% else %}
- {% end %}
- {% if data['style'][key]['type'] == "ventil" %}
- <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-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='databox' id="{{ key }}">
- <img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
- </div>
- {% else %}
- {% end %}
- {% end %}
- {% else %}
- {% end %}
-
- <img src="{{ static_url('background.png') }}"></img>
-
- <!-- java script -->
- <script src="{{ static_url("jquery-1.12.3.min.js") }}"></script>
- <script src="{{ static_url("jquery-ui.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") {
- $(".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);
-
- } else if (data_type == "ventil") {
- console.log("The VENTIL way");
- 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('ventil_active.png') }}");
- }
- if (parseFloat(response[key]) == parseFloat(off_attr)) {
- $("img", "#" + key).attr("src", "{{ static_url('ventil_inactive.png') }}");
- }
- }
- }
- }
- 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() + "/"
- + ( (currentdate.getFullYear()<10?'0':'').toString() + (currentdate.getFullYear()).toString() ) + " @ "
- + ( (currentdate.getHours()<10?'0':'').toString() + (currentdate.getHours()).toString() ) + ":"
- + ( (currentdate.getMinutes()<10?'0':'').toString() + (currentdate.getMinutes()).toString() ) + ":"
- + ( (currentdate.getSeconds()<10?'0':'').toString() + (currentdate.getSeconds()).toString() );
- $("#page_info").text(datetime);
- console.log(datetime);
- },
- error: function () {
- console.log("Error.")
- }
- });
- }
- });
- </script>
- </body>
- </html>
|