status.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Status display</title>
  6. <meta name="description"
  7. content="Status display generated by BORA.">
  8. <link rel="stylesheet" href="{{ static_url("style.css") }}">
  9. <link rel="stylesheet" href="{{ static_url("jquery-ui.min.css") }}">
  10. <!--[if IE]>
  11. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12. <![endif]-->
  13. </head>
  14. <body>
  15. <div id="page_info">{{ data['title'] }} data monitoring. Last refreshed</div>
  16. <div id="page_title_cache" style="display:none;">{{ data['title'] }}</div>
  17. {% if data['style'] %}
  18. {% for key in data['style'] %}
  19. {% if data['style'][key]['type'] == "calc" %}
  20. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
  21. data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
  22. height:{{ data['style'][key]['height'] }}px;'
  23. {% if "condition" in data['style'][key] %}
  24. data-cond="{{ data['style'][key]['condition'] }}"
  25. {% else%}position
  26. {% end%}
  27. {% if "formula" in data['style'][key] %}
  28. data-formula="{{ data['style'][key]['formula'] }}" tooltip="{{ data['style'][key]['formula'] }}"
  29. {% else %}
  30. {% end %}
  31. {% if "lesser" in data['style'][key] %}
  32. data-lesser="{{ data['style'][key]['lesser'] }}"
  33. {% else %}
  34. {% end %}
  35. {% if "larger" in data['style'][key] %}
  36. data-larger="{{ data['style'][key]['larger'] }}"
  37. {% else %}
  38. {% end %}
  39. data-type="{{ data['style'][key]['type'] }}" class='databox' id="{{ key }}">
  40. <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>
  41. </div>
  42. {% else %}
  43. {% end %}
  44. {% if data['style'][key]['type'] == "data" %}
  45. {% if "ref" in data['style'][key] %}
  46. <div tooltip="{{ data['style'][key]['ref'] }}"
  47. {% else %}
  48. <div tooltip="{{ key }}"
  49. {% end %}
  50. 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;'
  51. {% if "condition" in data['style'][key] %}
  52. data-cond="{{ data['style'][key]['condition'] }}"
  53. {% else%}
  54. {% end%}
  55. {% if "formula" in data['style'][key] %}
  56. data-formula="{{ data['style'][key]['formula'] }}"
  57. {% else %}
  58. {% end %}
  59. {% if "lesser" in data['style'][key] %}
  60. data-lesser="{{ data['style'][key]['lesser'] }}"
  61. {% else %}
  62. {% end %}
  63. {% if "larger" in data['style'][key] %}
  64. data-larger="{{ data['style'][key]['larger'] }}"
  65. {% else %}
  66. {% end %}
  67. {% if "exponential" in data['style'][key] %}
  68. data-exponential="{{ data['style'][key]['exponential'] }}"
  69. {% else %}
  70. {% end %}
  71. {% if "ref" in data['style'][key] %}
  72. data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][data['style'][key]['ref']] }}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" id="{{ key }}">
  73. <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>
  74. </div>
  75. {% else %}
  76. data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" id="{{ key }}">
  77. <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>
  78. </div>
  79. {% end %}
  80. {% else %}
  81. {% end %}
  82. {% if data['style'][key]['type'] == "ventil" %}
  83. <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;' data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
  84. <img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
  85. </div>
  86. {% else %}
  87. {% end %}
  88. {% if data['style'][key]['type'] == "integer-to-string" %}
  89. <div tooltip="{{ key }}" style='position: absolute; top: {{
  90. data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }};
  91. width:{{ data['style'][key]['width'] }}px; height:{{
  92. data['style'][key]['height'] }}px;'
  93. {% if "cond" in data['style'][key] %}
  94. data-cond="{{ data['style'][key]['cond'] }}"
  95. {% else %}
  96. {% end %}
  97. data-dict="{{ data['style'][key]['dict'] }}" data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][key]}}&experiment=-&window=86400&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
  98. <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>
  99. </div>
  100. {% else %}
  101. {% end %}
  102. {% if data['style'][key]['type'] == "header" %}
  103. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
  104. data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
  105. height:{{ data['style'][key]['height'] }}px;' data-type="{{
  106. data['style'][key]['type'] }}" class='databox' id="{{ key }}">
  107. <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>
  108. </div>
  109. {% else %}
  110. {% end %}
  111. {% end %}
  112. {% else %}
  113. {% end %}
  114. {% if "background" in data %}
  115. <img src="{{ static_url( data['background'] ) }}"></img>
  116. {% else %}
  117. <img src="{{ static_url( 'background.png' ) }}"></img>
  118. {% end %}
  119. <!-- java script -->
  120. <script src="{{ static_url("jquery-1.12.3.min.js") }}"></script>
  121. <script src="{{ static_url("jquery-ui.min.js") }}"></script>
  122. <script src="{{ static_url("math.min.js") }}"></script>
  123. <script>
  124. jQuery(window).load(function () {
  125. myTimer();
  126. var myVar = setInterval(myTimer, 10000);
  127. function myTimer() {
  128. var dataToSend = {};
  129. $.ajax({
  130. url: '/getdata/',
  131. type: 'GET',
  132. data: dataToSend,
  133. success: function (response) {
  134. //var objresponse = JSON.parse(response);
  135. console.log(response);
  136. for (var key in response) {
  137. //console.log(key, response[key]);
  138. data_type = $("#" + key).attr('data-type');
  139. if($("#" + key).length > 0) {
  140. if (data_type == "data") {
  141. //console.log("data");
  142. var datavalue, set_color, formula;
  143. var formula_attr = $("#" + key).attr('data-formula');
  144. if (response[key]) {
  145. if (formula_attr) {
  146. datavalue = parseFloat(response[key]).toFixed(2);
  147. formula = formula_attr.replace("x", datavalue.toString());
  148. datavalue = math.round(math.eval(formula),2);
  149. datavalue = datavalue.toFixed(2);
  150. } else {
  151. if ( ($("#" + key).attr('data-exponential')) == "True" || ($("#" + key).attr('data-exponential')) == "true" ) {
  152. datavalue = parseFloat(response[key]);
  153. datavalue = datavalue.toExponential(2)
  154. } else {
  155. datavalue = parseFloat(response[key]).toFixed(2);
  156. }
  157. }
  158. set_color = "green";
  159. } else {
  160. datavalue = "---";
  161. set_color = "black";
  162. }
  163. $(".varval", "#" + key).text(datavalue);
  164. var condition_attr = $("#" + key).attr('data-cond');
  165. var lesser_attr = $("#" + key).attr('data-lesser');
  166. var larger_attr = $("#" + key).attr('data-larger');
  167. //console.log(condition_attr);
  168. if (condition_attr) {
  169. if (response[key] == condition_attr) {
  170. set_color = "red";
  171. }
  172. }
  173. if (lesser_attr) {
  174. if (parseFloat(response[key]) < parseFloat(lesser_attr)) {
  175. set_color = "red";
  176. }
  177. }
  178. if (larger_attr) {
  179. if (parseFloat(response[key]) > parseFloat(larger_attr)) {
  180. set_color = "red";
  181. }
  182. }
  183. $(".varval", "#" + key).css("color", set_color);
  184. $(".unit_title", "#" + key).css("color", set_color);
  185. } else if (data_type == "ventil") {
  186. //console.log("ventil");
  187. var on_attr = $("#" + key).attr('data-on');
  188. var off_attr = $("#" + key).attr('data-off');
  189. if (parseFloat(response[key]) == parseFloat(on_attr)) {
  190. $("img", "#" + key).attr("src", "{{ static_url('ventil_green.png') }}");
  191. }
  192. if (parseFloat(response[key]) == parseFloat(off_attr)) {
  193. $("img", "#" + key).attr("src", "{{ static_url('ventil_red.png') }}");
  194. }
  195. } else if (data_type == "integer-to-string") {
  196. //console.log("integer-to-string");
  197. var dict_attr = JSON.parse($("#" + key).attr('data-dict'));
  198. var dict_cond;
  199. if ($("#"+key).attr("data-cond")) {
  200. dict_cond = JSON.parse($("#" + key).attr('data-cond'));
  201. } else {
  202. dict_cond = {};
  203. }
  204. var dict_color = "";
  205. if (key in response) {
  206. var token = response[key];
  207. if (token in dict_cond) {
  208. dict_color = dict_cond[token];
  209. }
  210. }
  211. $(".varval", "#" + key).css("color", dict_color);
  212. $(".varval", "#" + key).text(dict_attr[response[key]]);
  213. }
  214. }
  215. }
  216. $('[id^=virtual_]').each(function( index ) {
  217. var key = this.id;
  218. var ref = key.split("_");
  219. ref = ref[1];
  220. data_type = $("#" + key).attr('data-type');
  221. if($("#" + key).length > 0) {
  222. if (data_type == "data") {
  223. console.log(key);
  224. var datavalue, set_color, formula;
  225. var formula_attr = $("#" + key).attr('data-formula');
  226. if (response[ref]) {
  227. if (formula_attr) {
  228. datavalue = parseFloat(response[ref]).toFixed(2);
  229. formula = formula_attr.replace("x", datavalue.toString());
  230. datavalue = math.round(math.eval(formula),2);
  231. datavalue = datavalue.toFixed(2);
  232. } else {
  233. datavalue = parseFloat(response[ref]).toFixed(2);
  234. }
  235. set_color = "green";
  236. } else {
  237. datavalue = "---";
  238. set_color = "black";
  239. }
  240. $(".varval", "#" + key).text(datavalue);
  241. var condition_attr = $("#" + key).attr('data-cond');
  242. var lesser_attr = $("#" + key).attr('data-lesser');
  243. var larger_attr = $("#" + key).attr('data-larger');
  244. //console.log(condition_attr);
  245. if (condition_attr) {
  246. if (response[ref] == condition_attr) {
  247. set_color = "red";
  248. }
  249. }
  250. if (lesser_attr) {
  251. if (parseFloat(response[ref]) < parseFloat(lesser_attr)) {
  252. set_color = "red";
  253. }
  254. }
  255. if (larger_attr) {
  256. if (parseFloat(response[ref]) > parseFloat(larger_attr)) {
  257. set_color = "red";
  258. }
  259. }
  260. $(".varval", "#" + key).css("color", set_color);
  261. $(".unit_title", "#" + key).css("color", set_color);
  262. } else if (data_type == "ventil") {
  263. var on_attr = $("#" + key).attr('data-on');
  264. var off_attr = $("#" + key).attr('data-off');
  265. if (parseFloat(response[ref]) == parseFloat(on_attr)) {
  266. $("img", "#" + key).attr("src", "{{ static_url('ventil_green.png') }}");
  267. }
  268. if (parseFloat(response[ref]) == parseFloat(off_attr)) {
  269. $("img", "#" + key).attr("src", "{{ static_url('ventil_red.png') }}");
  270. }
  271. } else if (data_type == "integer-to-string") {
  272. var dict_attr = JSON.parse($("#" + key).attr('data-dict'));
  273. var dict_cond;
  274. if ($("#"+key).attr("data-cond")) {
  275. dict_cond = JSON.parse($("#" + key).attr('data-cond'));
  276. } else {
  277. dict_cond = {};
  278. }
  279. var dict_color = "";
  280. if (ref in response) {
  281. var token = response[ref];
  282. if (token in dict_cond) {
  283. dict_color = dict_cond[token];
  284. }
  285. }
  286. $(".varval", "#" + key).css("color", dict_color);
  287. $(".varval", "#" + key).text(dict_attr[response[ref]]);
  288. }
  289. }
  290. });
  291. $('[id^=calc_]').each(function( index ) {
  292. console.log(this.id);
  293. console.log($(this).attr('data-formula'));
  294. var myformula = $(this).attr('data-formula').trim();
  295. /*
  296. myformula = myformula.replace(/\[.*?\]/g, '__');
  297. console.log(myformula);
  298. */
  299. var data = myformula;
  300. var re= /\[(.*?)\]/g;
  301. var buffer = []
  302. for(m = re.exec(data); m; m = re.exec(data)){
  303. buffer.push(m[1]);
  304. }
  305. console.log("Debug:");
  306. console.log(buffer);
  307. var finalstring = "";
  308. var pattern = /\[(.*?)\]/g;
  309. var teststring = myformula.split(/[\[\]]+/);
  310. console.log(teststring);
  311. console.log(finalstring);
  312. for (var i = 0; i < teststring.length; i++) {
  313. var val = "";
  314. if (teststring[i] in response) {
  315. val = response[teststring[i]];
  316. } else {
  317. val = teststring[i];
  318. }
  319. finalstring += val;
  320. finalstring += " ";
  321. }
  322. finalstring = finalstring.trim();
  323. console.log(finalstring);
  324. var myvalue = math.round(math.eval(finalstring),2);
  325. myvalue = myvalue.toFixed(2);
  326. set_color = "green";
  327. console.log(myvalue);
  328. $(".varval", "#" + this.id).text(myvalue);
  329. var condition_attr = $("#" + this.id).attr('data-cond');
  330. var lesser_attr = $("#" + this.id).attr('data-lesser');
  331. var larger_attr = $("#" + this.id).attr('data-larger');
  332. //console.log(condition_attr);
  333. if (condition_attr) {
  334. if (myvalue == condition_attr) {
  335. set_color = "red";
  336. }
  337. }
  338. if (lesser_attr) {
  339. if (parseFloat(myvalue) < parseFloat(lesser_attr)) {
  340. set_color = "red";
  341. }
  342. }
  343. if (larger_attr) {
  344. if (parseFloat(myvalue) > parseFloat(larger_attr)) {
  345. set_color = "red";
  346. }
  347. }
  348. $(".varval", "#" + this.id).css("color", set_color);
  349. $(".unit_title", "#" + this.id).css("color", set_color);
  350. });
  351. var page_title_cache = $("#page_title_cache").text();
  352. var datetime = page_title_cache + " data monitoring page. Last Sync: " + response["time"];
  353. $("#page_info").text(datetime);
  354. console.log(datetime);
  355. },
  356. error: function () {
  357. console.log("Error.")
  358. }
  359. });
  360. }
  361. });
  362. </script>
  363. </body>
  364. </html>