mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 11:36:51 +03:00
149 lines
4.5 KiB
HTML
149 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html style="width: fit-content">
|
|
<head>
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
<title>jomjol - AI on the edge</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<style>
|
|
.h_iframe iframe {width:995px;height:760px;}
|
|
.h_iframe {width:995px;height:605px;}
|
|
|
|
.h_iframe_explain iframe {width:995px;height:200px;}
|
|
.h_iframe_explain {width:995px;height:200px;}
|
|
|
|
h1 {font-size: 2em; margin-block-end: 0.3em;}
|
|
h2 {font-size: 1.5em;margin-block-start: 0.3em;}
|
|
h3 {font-size: 1.2em;}
|
|
p {font-size: 1em;}
|
|
|
|
.button {
|
|
padding: 5px 20px;
|
|
width: 211px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="font-family: arial">
|
|
|
|
<table style="border: none">
|
|
<tr><td style="padding-right: 10px;"><img src="favicon.ico"></td>
|
|
<td><h1 id="id_title"> Digitizer - Initial Setup</h1>
|
|
<h2>An ESP32 all inclusive neural network recognition system for meter digitalization</h2>
|
|
</td></tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<button class="button" id="previous" name="previous" onclick="clickPrevious()">Previous</button>
|
|
<button class="button" id="next" name="next" onclick="clickNext()">Next</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<div class="h_iframe_explain" id="h_iframe_explain">
|
|
<iframe name="explaincontent" id ="explaincontent" src="" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<div class="h_iframe">
|
|
<iframe name="maincontent" id ="maincontent" src="" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var canvas = document.getElementById('canvas'),
|
|
basepath = "http://192.168.178.22";
|
|
aktstatu = 0;
|
|
|
|
function clickNext() {
|
|
aktstatu++;
|
|
if (aktstatu > 6) {
|
|
aktstatu = 6;
|
|
}
|
|
LoadStep();
|
|
}
|
|
|
|
function clickPrevious() {
|
|
aktstatu--;
|
|
if (aktstatu < 0) {
|
|
aktstatu = 0;
|
|
}
|
|
LoadStep();
|
|
}
|
|
|
|
function LoadStep(){
|
|
switch (aktstatu) {
|
|
case 0:
|
|
document.getElementById('maincontent').src = '/edit_explain_0.html';
|
|
document.getElementById('h_iframe_explain').style.display = "none";
|
|
document.getElementById("previous").disabled = true;
|
|
document.getElementById("next").disabled = false;
|
|
break;
|
|
case 1:
|
|
document.getElementById('maincontent').src = '/edit_reference.html';
|
|
document.getElementById('explaincontent').src = '/explain_1.html';
|
|
document.getElementById('h_iframe_explain').style.display = "";
|
|
document.getElementById("previous").disabled = false;
|
|
document.getElementById("next").disabled = false;
|
|
break;
|
|
case 2:
|
|
document.getElementById('maincontent').src = '/edit_alignment.html';
|
|
document.getElementById('explaincontent').src = '/explain_2.html';
|
|
document.getElementById('h_iframe_explain').style.display = "";
|
|
document.getElementById("previous").disabled = false;
|
|
document.getElementById("next").disabled = false;
|
|
|
|
break;
|
|
case 3:
|
|
document.getElementById('maincontent').src = '/edit_digits.html';
|
|
document.getElementById('explaincontent').src = '/explain_3.html';
|
|
document.getElementById('h_iframe_explain').style.display = "";
|
|
document.getElementById("previous").disabled = false;
|
|
document.getElementById("next").disabled = false;
|
|
|
|
break;
|
|
case 4:
|
|
document.getElementById('maincontent').src = '/edit_analog.html';
|
|
document.getElementById('explaincontent').src = '/explain_4.html';
|
|
document.getElementById('h_iframe_explain').style.display = "";
|
|
document.getElementById("previous").disabled = false;
|
|
document.getElementById("next").disabled = false;
|
|
|
|
break;
|
|
case 5:
|
|
document.getElementById('maincontent').src = '/edit_config_param.html?InitialSetup=true';
|
|
document.getElementById('explaincontent').src = '/explain_5.html';
|
|
document.getElementById('h_iframe_explain').style.display = "";
|
|
document.getElementById("previous").disabled = false;
|
|
document.getElementById("next").disabled = false;
|
|
|
|
break;
|
|
case 6:
|
|
document.getElementById('maincontent').src = '/edit_explain_6.html';
|
|
document.getElementById('explaincontent').src = '/explain_6.html';
|
|
document.getElementById('h_iframe_explain').style.display = "none";
|
|
document.getElementById("previous").disabled = false;
|
|
document.getElementById("next").disabled = true;
|
|
|
|
break;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
LoadStep();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|