Skip to content

Commit

Permalink
refactor(setup wizard): Streamline setup wizard (#179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Slider0007
Slider0007 authored Oct 17, 2024
1 parent dfb0b7c commit 6f7bcfd
Show file tree
Hide file tree
Showing 10 changed files with 94 additions and 193 deletions.
59 changes: 12 additions & 47 deletions sd-card/html/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
<button class="button" id="previous" onclick="clickPrevious()">Previous Step</button>
<button class="button" id="next" onclick="clickNext()">Next Step</button>
<button class="button" id="skip" onclick="clickAbort()">Abort Setup</button>
<span style="margin:0px; float:right;">Setup Progress:<br><progress id="progressBar" value="0" max="7" style="width:120px;"></progress></span>
<span style="margin:0px; float:right;">Setup Progress:<br><progress id="progressBar" value="0" max="5" style="width:120px;"></progress></span>
</td>
</tr>
</table>
Expand Down Expand Up @@ -130,7 +130,7 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
function clickAbort()
{
setupCompleted = false;
aktstep = 7;
aktstep = 5;
document.getElementById('stream').src = "";
document.getElementById('stream').style.display = "none"; // Make sure that stream iframe is always hidden
LoadStep();
Expand All @@ -140,8 +140,8 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
function clickNext()
{
aktstep++;
if (aktstep > 7) {
aktstep = 7;
if (aktstep > 5) {
aktstep = 5;
}
document.getElementById('stream').src = "";
document.getElementById('stream').style.display = "none"; // Make sure that stream iframe is always hidden
Expand Down Expand Up @@ -200,8 +200,9 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
document.getElementById("progressBar").value = 1;
setupCompleted = false;

// needs to be the last statement because it's blocking webserver
setTimeout(function() {
document.getElementById('stream').src = getDomainname() + '/camera?task=stream_flashlight'; // needs to be the last statement because it's kind of blocking
document.getElementById('stream').src = getDomainname() + '/camera?task=stream_flashlight';
document.getElementById('stream').style.display = "";
}, 500);
break;
Expand Down Expand Up @@ -243,8 +244,8 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
setupCompleted = false;
break;

case 4: // Digit ROIs
document.getElementById('maincontent').src = 'edit_digit.html?v=$COMMIT_HASH#description';
case 4: // Number sequences incl. ROIs
document.getElementById('maincontent').src = 'edit_sequence.html?v=$COMMIT_HASH#description';

document.getElementById('h_iframe_explain').style.display = "";
document.getElementById('h_iframe_explain').style="height:45px;"
Expand All @@ -258,53 +259,17 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
document.getElementById("skip").disabled = false;

document.getElementById("progressBar").value = 4;
setupCompleted = false;
break;

case 5: // Analog ROIs
document.getElementById('maincontent').src = 'edit_analog.html?v=$COMMIT_HASH#description';

document.getElementById('h_iframe_explain').style.display = "";
document.getElementById('h_iframe_explain').style="height:45px;"
document.getElementById('explaincontent').style="height:45px;"
document.getElementById('explaincontent').scrolling="no"
document.getElementById('explaincontent').src = 'setup_explain_5.html?v=$COMMIT_HASH';

document.getElementById("restart").disabled = false;
document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false;
document.getElementById("skip").disabled = false;

document.getElementById("progressBar").value = 5;
setupCompleted = false;
break;

case 6: // Config page
document.getElementById('maincontent').src = 'edit_config_param.html?v=$COMMIT_HASH#description';

document.getElementById('h_iframe_explain').style.display = "";
document.getElementById('h_iframe_explain').style="height:100px;"
document.getElementById('explaincontent').style="height:100px;"
document.getElementById('explaincontent').scrolling="no"
document.getElementById('explaincontent').src = 'setup_explain_6.html?v=$COMMIT_HASH';

document.getElementById("restart").disabled = false;
document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false;
document.getElementById("skip").disabled = false;

document.getElementById("progressBar").value = 6;
setupCompleted = true;
break;

case 7: // Setup completed / aborted
case 5: // Setup completed / aborted
document.getElementById('h_iframe').style="height:660px;"
document.getElementById('maincontent').style="height:660px;"
if (setupCompleted) {
document.getElementById('maincontent').src = 'setup_explain_7.html?v=$COMMIT_HASH';
document.getElementById('maincontent').src = 'setup_explain_5.html?v=$COMMIT_HASH';
}
else {
document.getElementById('maincontent').src = 'setup_explain_7_abort.html?v=$COMMIT_HASH';
document.getElementById('maincontent').src = 'setup_explain_5_abort.html?v=$COMMIT_HASH';
document.getElementById("previous").disabled = true;
}

Expand All @@ -314,7 +279,7 @@ <h4 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
document.getElementById("restart").disabled = false;
document.getElementById("next").disabled = true;

document.getElementById("progressBar").value = 7;
document.getElementById("progressBar").value = 5;
break;
}
}
Expand Down
32 changes: 12 additions & 20 deletions sd-card/html/setup_explain_0.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
Expand All @@ -21,7 +21,7 @@

<body style="font-family: arial">

<h2>Welcome to the setup of the AI-on-the-edge-device</h2>
<h2>Welcome to the setup of the AI-on-the-Edge Device</h2>

<p><img src="flow_overview.jpg" alt="" width="680" height="auto"></p>
<p>
Expand All @@ -39,24 +39,16 @@ <h2>Welcome to the setup of the AI-on-the-edge-device</h2>
This is an overview over the seven steps:
</p>
<ol>
<li><p>Adjust <b>lens focus</b> and check for <b>reflections of flashlight</b>.<br>
<li><p>Adjust <b>lens focus</b> and check for <b>reflections of flashlight</b><br>
Ensure you camera lens has proper focus to object and flashlight do not create any distoring reflections.</p></li>
<li><p>Create the <b>reference image</b>.<br>
It is the base for the position referencing and the identification of the digits and counters.</p></li>
<li><p>Define two unique <b>alignment marker</b>.<br>
They are used to perform an orientation alignment of the taken camera images before further processing</p></li>
<li><p>Define <b>ROI's</b> for the <b>digits</b>.<br>
They will be used to digitize the digit part of your meter.<br>
NOTE: If your meter has no digits, this step can be skipped.</p></li>
<li><p>Define <b>ROI's</b> for the <b>analog counters</b>.<br>
They will be used to digitize the analog part of your meter.<br>
NOTE: If your meter has no analog counters, this step can be skipped.</p></li>
<li><p><b>Additional configuration:</b> List of all parameters<br>
Further configuration of your device can be done here.<br>
NOTE: This can also be performed later with regular web interface, e.g. to setup any publishing service like MQTT</p>
</li>
<li><p><b>Setup Completion:</b> End/Abort setup mode<br>
In the final step the setup mode needs to be properly terminated by pushing the button in this page.<br>
<li><p>Creation of the <b>reference image</b><br>
This image is used as base image to allow positioning of alignment marker, digit and analog ROIs.</p></li>
<li><p>Defintion of <b>alignment marker</b>.<br>
They are used to perform an orientation alignment of the camera image before further processing.</p></li>
<li><p>Definition of <b>number sequences</b><br>
A number sequence contains digit and/or analog ROIs which will be processed together to get a reading result.<br></p></li>
<li><p><b>Setup Completion:</b> Complete / abort setup mode<br>
In the final step the setup mode needs to be properly terminated by pushing the button on this page.<br>
NOTE: This is important, otherwise the setup mode is recalled again after reboot.</p>
</li>
</ol>
Expand All @@ -65,7 +57,7 @@ <h2>Welcome to the setup of the AI-on-the-edge-device</h2>

<p>If you need support, have a look to the <a href=https://jomjol.github.io/AI-on-the-edge-device-docs target=_blank>documentation</a> or the <a href=https://github.com/jomjol/AI-on-the-edge-device/discussions target=_blank>discussion</a> pages.</p>

<p><b>Have fun with your AI-on-the-edge-device!</b></p>
<p><b>Have fun with your AI-on-the-Edge Device!</b></p>

</body>
</html>
4 changes: 2 additions & 2 deletions sd-card/html/setup_explain_1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
Expand All @@ -21,7 +21,7 @@

<body style="font-family: arial">

<h4>Step 1 / 7: Adjust Focus And Verify Flashlight</h4>
<h4>Step 1 / 5: Adjust Focus And Verify Flashlight</h4>
Firstly you have find a proper mounting position and potentially have to adjust the focus of the camera lens to get a sharp and crisp image.
This <b>live stream with flashlight on</b> could be helpful for this task. More details about adjusting the camera lens can be found here:
<a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/#focus target=_blank>Focus Adjustment</a><br>
Expand Down
4 changes: 2 additions & 2 deletions sd-card/html/setup_explain_2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
Expand All @@ -21,7 +21,7 @@

<body style="font-family: arial">

<h4>Step 2 / 7: Create A Reference Image</h4>
<h4>Step 2 / 5: Create A Reference Image</h4>

</body>
</html>
4 changes: 2 additions & 2 deletions sd-card/html/setup_explain_3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
Expand All @@ -21,7 +21,7 @@

<body style="font-family: arial">

<h4>Step 3 / 7: Definement Of Alignment Marker</h4>
<h4>Step 3 / 5: Definement Of Alignment Marker</h4>

</body>
</html>
4 changes: 2 additions & 2 deletions sd-card/html/setup_explain_4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
Expand All @@ -21,7 +21,7 @@

<body style="font-family: arial">

<h4>Step 4 / 7: Configuration Of ROIs For Digit Numbers</h4>
<h4>Step 4 / 5: Configuration Of Number Sequences and ROIs</h4>

</body>
</html>
64 changes: 60 additions & 4 deletions sd-card/html/setup_explain_5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,82 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
p {font-size: 1em; text-align: justify}

body, html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

.button {
padding: 5px 10px;
width: 205px;
font-size: 16px;
}
</style>

<script src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
<script src="firework.js?v=$COMMIT_HASH"></script>
</head>

<body style="font-family: arial">

<h4>Step 5 / 7: Configuration Of ROIs For Analog Counters</h4>
<h4>Step 5 / 5: Initial setup completed</h4>

<p>
Congratulations! You have completed the initial setup and you are now ready to switch to the regular web interface!
</p>
<p>
Once you push the button below, the setup mode will be completed and the device will be automatically switch to
regular web interface. If configuration is error free, the device will automatically start with first processing.
It will take some time until you get the first reading.
</p>
<p>
<button class="button" onclick="completeSetup()">Complete Setup</button>
</p>

<script src="global_common.js?v=$COMMIT_HASH"></script>
<script src="global_data.js?v=$COMMIT_HASH"></script>
<script>

function reboot()
{
firework.launch('Setup completed', 'success', 5000);
jsonConfig = getConfigFromStorage(); // Get config
jsonConfig.operationmode.opmode = 1;

saveConfig(JSON.stringify(jsonConfig)).then(() => {
setTimeout(function() {
reloadConfig();
}, 500);
});

firework.launch('Regular web interface gets loaded in a few seconds...', 'success', 10000);
setTimeout(function() {
let stringota = getDomainname();
parent.location = stringota;
parent.location.href = stringota;
parent.location.assign(stringota);
parent.location.replace(stringota);
}, 7000);
}


function completeSetup()
{
if (confirm("Do you want to complete the setup mode and switch to regular web interface?"))
loadConfig().then(() => reboot());
}

</script>

</body>
</html>
</html>
4 changes: 2 additions & 2 deletions sd-card/html/setup_explain_7_abort.html → sd-card/html/setup_explain_5_abort.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<title>AI on the edge</title>
<title>AI-on-the-Edge</title>

<style>
h1 {font-size: 1.8em;}
Expand Down Expand Up @@ -30,7 +30,7 @@

<body style="font-family: arial">

<h4>Initial setup aborted!</h4>
<h4>Initial setup aborted</h4>

<p>You have <b>aborted</b> the initial setup!</p>
<p>Once you push the button below, the setup mode will be ended and the device will be automatically switch to regular web interface.
Expand Down
29 changes: 0 additions & 29 deletions sd-card/html/setup_explain_6.html
View file

This file was deleted.

Loading

0 comments on commit 6f7bcfd

Please sign in to comment.