setup.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE html>
  2. <html style="width: fit-content">
  3. <head>
  4. <link rel="icon" href="favicon.ico" type="image/x-icon">
  5. <title>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:760px;}
  10. .h_iframe {width:995px;height:605px;}
  11. .h_iframe_explain iframe {width:995px;height:200px;}
  12. .h_iframe_explain {width:995px;height:200px;}
  13. h1 {font-size: 2em; margin-block-end: 0.3em;}
  14. h2 {font-size: 1.5em;margin-block-start: 0.3em;}
  15. h3 {font-size: 1.2em;}
  16. p {font-size: 1em;}
  17. .button {
  18. padding: 5px 20px;
  19. width: 211px;
  20. font-size: 16px;
  21. }
  22. </style>
  23. </head>
  24. <body style="font-family: arial">
  25. <table style="border: none">
  26. <tr><td style="padding-right: 10px;"><img src="favicon.ico"></td>
  27. <td><h1 id="id_title"> Digitizer - Initial Setup</h1>
  28. <h2>An ESP32 all inclusive neural network recognition system for meter digitalization</h2>
  29. </td></tr>
  30. </table>
  31. <table>
  32. <tr>
  33. <td>
  34. <button class="button" id="previous" name="previous" onclick="clickPrevious()">Previous</button>
  35. <button class="button" id="next" name="next" onclick="clickNext()">Next</button>
  36. If you need help. have a look on the <a href=https://github.com/jomjol/AI-on-the-edge-device/wiki target=_blank>Wiki</a> and the <a href=https://github.com/jomjol/AI-on-the-edge-device/discussions target=_blank>Discussion</a> pages.
  37. </td>
  38. </tr>
  39. </table>
  40. <div class="h_iframe_explain" id="h_iframe_explain">
  41. <iframe name="explaincontent" id ="explaincontent" src="" allowfullscreen></iframe>
  42. </div>
  43. <div class="h_iframe">
  44. <iframe name="maincontent" id ="maincontent" src="" allowfullscreen></iframe>
  45. </div>
  46. <script type="text/javascript">
  47. var canvas = document.getElementById('canvas'),
  48. basepath = "http://192.168.178.22";
  49. aktstatu = 0;
  50. function clickNext() {
  51. aktstatu++;
  52. if (aktstatu > 6) {
  53. aktstatu = 6;
  54. }
  55. LoadStep();
  56. }
  57. function clickPrevious() {
  58. aktstatu--;
  59. if (aktstatu < 0) {
  60. aktstatu = 0;
  61. }
  62. LoadStep();
  63. }
  64. function LoadStep(){
  65. switch (aktstatu) {
  66. case 0:
  67. document.getElementById('maincontent').src = '/edit_explain_0.html';
  68. document.getElementById('h_iframe_explain').style.display = "none";
  69. document.getElementById("previous").disabled = true;
  70. document.getElementById("next").disabled = false;
  71. break;
  72. case 1:
  73. document.getElementById('maincontent').src = '/edit_reference.html';
  74. document.getElementById('explaincontent').src = '/explain_1.html';
  75. document.getElementById('h_iframe_explain').style.display = "";
  76. document.getElementById("previous").disabled = false;
  77. document.getElementById("next").disabled = false;
  78. break;
  79. case 2:
  80. document.getElementById('maincontent').src = '/edit_alignment.html';
  81. document.getElementById('explaincontent').src = '/explain_2.html';
  82. document.getElementById('h_iframe_explain').style.display = "";
  83. document.getElementById("previous").disabled = false;
  84. document.getElementById("next").disabled = false;
  85. break;
  86. case 3:
  87. document.getElementById('maincontent').src = '/edit_digits.html';
  88. document.getElementById('explaincontent').src = '/explain_3.html';
  89. document.getElementById('h_iframe_explain').style.display = "";
  90. document.getElementById("previous").disabled = false;
  91. document.getElementById("next").disabled = false;
  92. break;
  93. case 4:
  94. document.getElementById('maincontent').src = '/edit_analog.html';
  95. document.getElementById('explaincontent').src = '/explain_4.html';
  96. document.getElementById('h_iframe_explain').style.display = "";
  97. document.getElementById("previous").disabled = false;
  98. document.getElementById("next").disabled = false;
  99. break;
  100. case 5:
  101. document.getElementById('maincontent').src = '/edit_config_param.html?InitialSetup=true';
  102. document.getElementById('explaincontent').src = '/explain_5.html';
  103. document.getElementById('h_iframe_explain').style.display = "";
  104. document.getElementById("previous").disabled = false;
  105. document.getElementById("next").disabled = false;
  106. break;
  107. case 6:
  108. document.getElementById('maincontent').src = '/edit_explain_6.html';
  109. document.getElementById('explaincontent').src = '/explain_6.html';
  110. document.getElementById('h_iframe_explain').style.display = "none";
  111. document.getElementById("previous").disabled = false;
  112. document.getElementById("next").disabled = true;
  113. break;
  114. }
  115. }
  116. LoadStep();
  117. </script>
  118. </body>
  119. </html>