setup.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  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: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. </td>
  37. </tr>
  38. </table>
  39. <div class="h_iframe_explain" id="h_iframe_explain">
  40. <iframe name="explaincontent" id ="explaincontent" src="" allowfullscreen></iframe>
  41. </div>
  42. <div class="h_iframe">
  43. <iframe name="maincontent" id ="maincontent" src="" allowfullscreen></iframe>
  44. </div>
  45. <script type="text/javascript">
  46. var canvas = document.getElementById('canvas'),
  47. basepath = "http://192.168.178.22";
  48. aktstatu = 0;
  49. function clickNext() {
  50. aktstatu++;
  51. if (aktstatu > 6) {
  52. aktstatu = 6;
  53. }
  54. LoadStep();
  55. }
  56. function clickPrevious() {
  57. aktstatu--;
  58. if (aktstatu < 0) {
  59. aktstatu = 0;
  60. }
  61. LoadStep();
  62. }
  63. function LoadStep(){
  64. switch (aktstatu) {
  65. case 0:
  66. document.getElementById('maincontent').src = '/edit_explain_0.html';
  67. document.getElementById('h_iframe_explain').style.display = "none";
  68. document.getElementById("previous").disabled = true;
  69. document.getElementById("next").disabled = false;
  70. break;
  71. case 1:
  72. document.getElementById('maincontent').src = '/edit_reference.html';
  73. document.getElementById('explaincontent').src = '/explain_1.html';
  74. document.getElementById('h_iframe_explain').style.display = "";
  75. document.getElementById("previous").disabled = false;
  76. document.getElementById("next").disabled = false;
  77. break;
  78. case 2:
  79. document.getElementById('maincontent').src = '/edit_alignment.html';
  80. document.getElementById('explaincontent').src = '/explain_2.html';
  81. document.getElementById('h_iframe_explain').style.display = "";
  82. document.getElementById("previous").disabled = false;
  83. document.getElementById("next").disabled = false;
  84. break;
  85. case 3:
  86. document.getElementById('maincontent').src = '/edit_digits.html';
  87. document.getElementById('explaincontent').src = '/explain_3.html';
  88. document.getElementById('h_iframe_explain').style.display = "";
  89. document.getElementById("previous").disabled = false;
  90. document.getElementById("next").disabled = false;
  91. break;
  92. case 4:
  93. document.getElementById('maincontent').src = '/edit_analog.html';
  94. document.getElementById('explaincontent').src = '/explain_4.html';
  95. document.getElementById('h_iframe_explain').style.display = "";
  96. document.getElementById("previous").disabled = false;
  97. document.getElementById("next").disabled = false;
  98. break;
  99. case 5:
  100. document.getElementById('maincontent').src = '/edit_config_param.html?InitialSetup=true';
  101. document.getElementById('explaincontent').src = '/explain_5.html';
  102. document.getElementById('h_iframe_explain').style.display = "";
  103. document.getElementById("previous").disabled = false;
  104. document.getElementById("next").disabled = false;
  105. break;
  106. case 6:
  107. document.getElementById('maincontent').src = '/edit_explain_6.html';
  108. document.getElementById('explaincontent').src = '/explain_6.html';
  109. document.getElementById('h_iframe_explain').style.display = "none";
  110. document.getElementById("previous").disabled = false;
  111. document.getElementById("next").disabled = true;
  112. break;
  113. }
  114. }
  115. LoadStep();
  116. </script>
  117. </body>
  118. </html>