index.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!DOCTYPE html>
  2. <html style="width: fit-content">
  3. <head>
  4. <link rel="icon" href="data:,">
  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. <h1 id="id_title">Digitizer - AI on the edge</h1>
  65. <h2>An ESP32 all inclusive neural network recognition system for meter digitalization</h2>
  66. <ul>
  67. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
  68. <li class="dropdown">
  69. <a href="javascript:void(0)" class="dropbtn">Configuration</a>
  70. <div class="dropdown-content">
  71. <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a>
  72. <a href="index_configure.html">Edit Configuration</a>
  73. </div>
  74. </li>
  75. <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Recognition</a></li>
  76. <li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
  77. <li class="dropdown">
  78. <a href="javascript:void(0)" class="dropbtn">System</a>
  79. <div class="dropdown-content">
  80. <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
  81. <a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/log/message/?readonly=true';">Log Viewer</a>
  82. <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
  83. <a href="#"onclick="document.getElementById('maincontent').src = '/info.html';">Info</a>
  84. </div>
  85. </ul>
  86. <p>
  87. <div class="h_iframe">
  88. <iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
  89. </div>
  90. <script type="text/javascript" src="./gethost.js"></script>
  91. <script type="text/javascript" src="./readconfigcommon.js"></script>
  92. <script type="text/javascript" src="./readconfigparam.js"></script>
  93. <script type="text/javascript">
  94. var basepath = "http://192.168.178.22";
  95. function LoadHostname() {
  96. _basepath = getbasepath();
  97. var xhttp = new XMLHttpRequest();
  98. xhttp.addEventListener('load', function(event) {
  99. if (xhttp.status >= 200 && xhttp.status < 300) {
  100. hostname = xhttp.responseText;
  101. document.title = "jomjol - AI on the edge - " + hostname;
  102. document.getElementById("id_title").innerHTML = "Digitizer - AI on the edge - " + hostname;
  103. } else {
  104. console.warn(request.statusText, request.responseText);
  105. }
  106. });
  107. // var xhttp = new XMLHttpRequest();
  108. try {
  109. url = _basepath + '/version?type=Hostname';
  110. xhttp.open("GET", url, true);
  111. xhttp.send();
  112. }
  113. catch (error)
  114. {
  115. // alert("Loading Hostname failed");
  116. }
  117. }
  118. LoadHostname();
  119. </script>
  120. </body>
  121. </html>