index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE html>
  2. <html style="width: fit-content">
  3. <head>
  4. <link rel="icon" href="favicon.ico" type="image/x-icon">
  5. <title>jomjol - AI on the edge</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <style>
  9. .h_iframe iframe {width:995px;height:605px;}
  10. .h_iframe {width:995px;height:605px;}
  11. h1 {font-size: 2em; margin-block-end: 0.3em;}
  12. h2 {font-size: 1.5em;margin-block-start: 0.3em;}
  13. h3 {font-size: 1.2em;}
  14. p {font-size: 1em;}
  15. ul {
  16. list-style-type: none;
  17. margin: 0;
  18. padding: 0;
  19. overflow: hidden;
  20. background-color: #333;
  21. width:1000px;
  22. }
  23. li {
  24. float: left;
  25. font-family: arial;
  26. font-size: 18px;
  27. }
  28. li a, .dropbtn {
  29. display: inline-block;
  30. color: white;
  31. text-align: center;
  32. padding: 14px 16px;
  33. text-decoration: none;
  34. }
  35. li a:hover, .dropdown:hover .dropbtn {
  36. background-color: red;
  37. }
  38. li.dropdown {
  39. display: inline-block;
  40. }
  41. .dropdown-content {
  42. display: none;
  43. position: absolute;
  44. background-color: #f9f9f9;
  45. min-width: 160px;
  46. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  47. z-index: 1;
  48. font-family: arial;
  49. }
  50. .dropdown-content a {
  51. color: black;
  52. padding: 12px 16px;
  53. text-decoration: none;
  54. display: block;
  55. text-align: left;
  56. }
  57. .dropdown-content a:hover {background-color: #f1f1f1;}
  58. .dropdown:hover .dropdown-content {
  59. display: block;
  60. }
  61. </style>
  62. </head>
  63. <body style="font-family: arial">
  64. <table style="border: none">
  65. <tr><td style="padding-right: 10px;"><img src="favicon.ico"></td>
  66. <td><h1 id="id_title"> Digitizer - AI on the edge</h1>
  67. <h2>An ESP32 all inclusive neural network recognition system for meter digitalization</h2>
  68. </td></tr>
  69. </table>
  70. <ul>
  71. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
  72. <li class="dropdown">
  73. <a href="javascript:void(0)" class="dropbtn">Configuration</a>
  74. <div class="dropdown-content">
  75. <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a>
  76. <a href="index_configure.html">Edit Configuration</a>
  77. </div>
  78. </li>
  79. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Recognition</a></li>
  80. <li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
  81. <li class="dropdown">
  82. <a href="javascript:void(0)" class="dropbtn">System</a>
  83. <div class="dropdown-content">
  84. <a href="#"onclick="document.getElementById('maincontent').src = '/backup.html';">Backup/Restore</a>
  85. <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
  86. <a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/log/message/?readonly=true';">Log Viewer</a>
  87. <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
  88. <a href="#"onclick="document.getElementById('maincontent').src = '/info.html';">Info</a>
  89. </div>
  90. </ul>
  91. <p>
  92. <div class="h_iframe">
  93. <iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
  94. </div>
  95. <script type="text/javascript" src="./gethost.js"></script>
  96. <script type="text/javascript" src="./readconfigcommon.js"></script>
  97. <script type="text/javascript" src="./readconfigparam.js"></script>
  98. <script type="text/javascript">
  99. var basepath = "http://192.168.178.22";
  100. function LoadHostname() {
  101. _basepath = getbasepath();
  102. var xhttp = new XMLHttpRequest();
  103. xhttp.addEventListener('load', function(event) {
  104. if (xhttp.status >= 200 && xhttp.status < 300) {
  105. hostname = xhttp.responseText;
  106. document.title = hostname + " - jomjol - AI on the edge";
  107. document.getElementById("id_title").innerHTML = "Digitizer - AI on the edge - " + hostname;
  108. } else {
  109. console.warn(request.statusText, request.responseText);
  110. }
  111. });
  112. // var xhttp = new XMLHttpRequest();
  113. try {
  114. url = _basepath + '/version?type=Hostname';
  115. xhttp.open("GET", url, true);
  116. xhttp.send();
  117. }
  118. catch (error)
  119. {
  120. // alert("Loading Hostname failed");
  121. }
  122. }
  123. LoadHostname();
  124. </script>
  125. </body>
  126. </html>