wasserzaehler_roi.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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: 50px;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. <body style="font-family: arial">
  16. <table class="tg">
  17. <tr>
  18. <td class="tg-1" rowspan="9"><div id="img"></div></td>
  19. <th class="th">Value:</th>
  20. </tr>
  21. <tr>
  22. <td class="tg-2">
  23. <div id="value"></div>
  24. </td>
  25. </tr>
  26. <tr>
  27. <th class="th">Previous Value:</th>
  28. </tr>
  29. <tr>
  30. <td class="tg-2">
  31. <div id="prevalue"></div>
  32. </td>
  33. </tr>
  34. <tr>
  35. <th class="th">Raw Value:</th>
  36. </tr>
  37. <tr>
  38. <td class="tg-2">
  39. <div id="raw"></div>
  40. </td>
  41. </tr>
  42. <tr>
  43. <th class="th">Error:</th>
  44. </tr>
  45. <tr>
  46. <td class="tg-2">
  47. <div id="error"></div>
  48. </td>
  49. </tr>
  50. <tr>
  51. <td class="tg-3">
  52. <div id="timestamp" ></div>
  53. </td>
  54. </tr>
  55. </table>
  56. </body>
  57. </html>
  58. <script src="/jquery-3.6.0.min.js"></script>
  59. <script type="text/javascript" src="./gethost.js"></script>
  60. <script type="text/javascript" src="./readconfigcommon.js"></script>
  61. <script type="text/javascript">
  62. function addZero(i) {
  63. if (i < 10) {
  64. i = "0" + i;
  65. }
  66. return i;
  67. }
  68. $(document).ready(function() {
  69. var d = new Date();
  70. var h = addZero(d.getHours());
  71. var m = addZero(d.getMinutes());
  72. var s = addZero(d.getSeconds());
  73. $('#img').html('<img src="/img_tmp/alg_roi.jpg" style="max-height:555px; display:block; margin-left:auto; margin-right:auto;"></img>');
  74. $('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
  75. refresh();
  76. });
  77. function refresh() {
  78. setTimeout (function() {
  79. var time = new Date();
  80. var timestamp = new Date().getTime();
  81. var d = new Date();
  82. var h = addZero(d.getHours());
  83. var m = addZero(d.getMinutes());
  84. var s = addZero(d.getSeconds());
  85. // reassign the url to be like alg_roi.jpg?timestamp=456784512 based on timestamp
  86. $('#img').html('<img src="/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'"max-height:555px; display:block; margin-left:auto; margin-right:auto;"></img>');
  87. $('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
  88. init();
  89. refresh();
  90. }, 300000);
  91. }
  92. var basepath = "http://192.168.178.22";
  93. function loadValue(_type, _div, _style) {
  94. url = basepath + '/wasserzaehler.html?all=true&type=' + _type;
  95. var xhttp = new XMLHttpRequest();
  96. xhttp.onreadystatechange = function() {
  97. if (this.readyState == 4 && this.status == 200) {
  98. var _rsp = xhttp.responseText;
  99. var _split = _rsp.split("\r");
  100. if (typeof _style == undefined)
  101. out = "<table>";
  102. else
  103. out = "<table style=\"" + _style + "\">";
  104. if (_split.length == 1)
  105. {
  106. var _zer = ZerlegeZeile(_split[0], "\t")
  107. if (_zer.length > 1)
  108. out = _zer[1];
  109. else
  110. out = "";
  111. }
  112. else
  113. {
  114. for (var j = 0; j < _split.length; ++j)
  115. {
  116. var _zer = ZerlegeZeile(_split[j], "\t")
  117. if (_zer.length == 1)
  118. out = out + "<tr><td>" + _zer[0] + "</td><td> </td></tr>";
  119. else
  120. out = out + "<tr><td>" + _zer[0] + "</td><td>" + _zer[1] + "</td></tr>";
  121. }
  122. out = out + "</table>"
  123. }
  124. document.getElementById(_div).innerHTML = out;
  125. }
  126. };
  127. xhttp.open("GET", url, true);
  128. xhttp.send();
  129. }
  130. function init(){
  131. basepath = getbasepath();
  132. loadValue("value", "value");
  133. loadValue("raw", "raw");
  134. loadValue("prevalue", "prevalue");
  135. loadValue("error", "error", "font-size:8px");
  136. }
  137. init();
  138. </script>