| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Overview</title>
- <meta charset="utf-8">
- <style>
- .tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;height:585px;}
- .tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
- .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}
- .tg .tg-1{width:77%;font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
- .tg .tg-2{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
- .tg .tg-3{height: 15px;font-size:14px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
- </style>
- </head>
- <script src="/jquery-3.5.1.min.js"></script>
- <script>
- function addZero(i) {
- if (i < 10) {
- i = "0" + i;
- }
- return i;
- }
- $ (document).ready(function() {
- var d = new Date();
- var h = addZero(d.getHours());
- var m = addZero(d.getMinutes());
- var s = addZero(d.getSeconds());
- $('#img').html('<img src="/img_tmp/alg_roi.jpg" style="width:100%; max-height:555px;"></img>');
- $("#raw").load("/wasserzaehler.html?rawvalue=true");
- $("#corrected").load("/wasserzaehler.html");
- $("#checked").load("/setPreValue.html");
- $("#start").load("/starttime");
- $('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
- refresh();
- });
- function refresh() {
- setTimeout (function() {
- var time = new Date();
- var timestamp = new Date().getTime();
- var d = new Date();
- var h = addZero(d.getHours());
- var m = addZero(d.getMinutes());
- var s = addZero(d.getSeconds());
- // reassign the url to be like alg_roi.jpg?timestamp=456784512 based on timestamp
- $('#img').html('<img src="/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'" style="width:100%; max-height:555px;"></img>');
- $("#raw").load("/wasserzaehler.html?rawvalue=true");
- $("#corrected").load("/wasserzaehler.html");
- $("#checked").load("/setPreValue.html");
- $("#start").load("/starttime");
- $('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
- refresh();
- }, 300000);
- }
- </script>
- <body style="font-family: arial">
- <table class="tg">
- <tr>
- <td class="tg-1" rowspan="9"><div id="img"></div></td>
- <th class="th">Raw Value:</th>
- </tr>
- <tr>
- <td class="tg-2">
- <div id="raw"></div>
- </td>
- </tr>
- <tr>
- <th class="th">Corrected Value:</th>
- </tr>
- <tr>
- <td class="tg-2">
- <div id="corrected"></div>
- </td>
- </tr>
- <tr>
- <th class="th">Checked Value:</th>
- </tr>
- <tr>
- <td class="tg-2">
- <div id="checked"></div>
- </td>
- </tr>
- <tr>
- <th class="th">Start Time:</th>
- </tr>
- <tr>
- <td class="tg-2">
- <div id="start"></div>
- </td>
- </tr>
- <tr>
- <td class="tg-3">
- <div id="timestamp"></div>
- </td>
- </tr>
- </table>
- </body>
- </html>
|