wasserzaehler_roi.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Overview</title>
  5. <meta charset="utf-8">
  6. <style>
  7. .tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;height:585px;}
  8. .tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
  9. .tg th{height: 55px;font-size:24px;font-weight:bold;text-align:left;padding:0px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;background-color:#f0f0f0}
  10. .tg .tg-1{width:77%;font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
  11. .tg .tg-2{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
  12. .tg .tg-3{height: 15px;font-size:14px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
  13. </style>
  14. </head>
  15. <script src="/jquery-3.5.1.min.js"></script>
  16. <script>
  17. function addZero(i) {
  18. if (i < 10) {
  19. i = "0" + i;
  20. }
  21. return i;
  22. }
  23. $ (document).ready(function() {
  24. var d = new Date();
  25. var h = addZero(d.getHours());
  26. var m = addZero(d.getMinutes());
  27. var s = addZero(d.getSeconds());
  28. $('#img').html('<img src="/img_tmp/alg_roi.jpg" style="width:100%; max-height:555px;"></img>');
  29. $("#raw").load("/wasserzaehler.html?rawvalue=true");
  30. $("#corrected").load("/wasserzaehler.html");
  31. $("#checked").load("/setPreValue.html");
  32. $("#start").load("/starttime");
  33. $('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
  34. refresh();
  35. });
  36. function refresh() {
  37. setTimeout (function() {
  38. var time = new Date();
  39. var timestamp = new Date().getTime();
  40. var d = new Date();
  41. var h = addZero(d.getHours());
  42. var m = addZero(d.getMinutes());
  43. var s = addZero(d.getSeconds());
  44. // reassign the url to be like alg_roi.jpg?timestamp=456784512 based on timestamp
  45. $('#img').html('<img src="/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'" style="width:100%; max-height:555px;"></img>');
  46. $("#raw").load("/wasserzaehler.html?rawvalue=true");
  47. $("#corrected").load("/wasserzaehler.html");
  48. $("#checked").load("/setPreValue.html");
  49. $("#start").load("/starttime");
  50. $('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
  51. refresh();
  52. }, 300000);
  53. }
  54. </script>
  55. <body style="font-family: arial">
  56. <table class="tg">
  57. <tr>
  58. <td class="tg-1" rowspan="9"><div id="img"></div></td>
  59. <th class="th">Raw Value:</th>
  60. </tr>
  61. <tr>
  62. <td class="tg-2">
  63. <div id="raw"></div>
  64. </td>
  65. </tr>
  66. <tr>
  67. <th class="th">Corrected Value:</th>
  68. </tr>
  69. <tr>
  70. <td class="tg-2">
  71. <div id="corrected"></div>
  72. </td>
  73. </tr>
  74. <tr>
  75. <th class="th">Checked Value:</th>
  76. </tr>
  77. <tr>
  78. <td class="tg-2">
  79. <div id="checked"></div>
  80. </td>
  81. </tr>
  82. <tr>
  83. <th class="th">Start Time:</th>
  84. </tr>
  85. <tr>
  86. <td class="tg-2">
  87. <div id="start"></div>
  88. </td>
  89. </tr>
  90. <tr>
  91. <td class="tg-3">
  92. <div id="timestamp"></div>
  93. </td>
  94. </tr>
  95. </table>
  96. </body>
  97. </html>