Mirror/AI-on-the-edge-device
1
0
Fork 0
mirror of https://github.com/jomjol/AI-on-the-edge-device.git synced 2025-12-07 20:16:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update HTML / Autorefresh

Browse Source 
- Update HTML-Content (SD-Card)
- Implementation of Auto-Refresh (Picture & Values)  on Overview-Page (300s)
- Implementation of "jquery-3.5.1.min.js"
This commit is contained in:
michaeljoos72
2020-09-19 19:07:26 +02:00
committed by GitHub
parent bb05957d33
commit 0d1b58542b
13 changed files with 684 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
sd-card/html/edit_alignment.html
View File

@@ -1,96 +1,93 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/>
<title>Make Alignment</title> <title>Make Alignment</title>
<meta charset="utf-8"/>
<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
input[type=number] {
width: 100px;
margin-right: 10px;
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
input[type=text] {
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
select {
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
margin-right: 10px;
}
.button {
padding: 5px 10px;
width: 210px;
font-size: 16px;
}
</style>
</head> </head>
<div class="body-content" style="font-family: arial"> <body style="font-family: arial; padding: 0px 10px;">
<div id="createrefernce"> <h2>Define Alignment Structure in Reference Image</h2>
<div style="padding-left: 30px">
<h3>Define Alignment Structure in Reference Image</h3>
<div style="padding-left: 30px">
<table> <table>
<tr> <tr>
<td> <td><canvas id="canvas" crossorigin></canvas></td>
<canvas id="canvas" crossorigin></canvas>
</td>
</tr> </tr>
<tr> </table>
<td>
<table> <table>
<tr> <tr>
<tr> <td>Select Reference:
<td>
<select id="index" name="reference" onchange="ChangeSelection()"> <select id="index" name="reference" onchange="ChangeSelection()">
<option value="0" selected>Reference 0</option> <option value="0" selected>Reference 0</option>
<option value="1" >Reference 1</option> <option value="1" >Reference 1</option>
</select> </select>
Storage path/name: <input type="text" name="name" id="name">
</td>
</tr>
<td>
<table>
<tr>
<td>
x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()">
</td>
<td>
dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchanged()">
</td> </td>
<td colspan="2">Storage Path/Name: <input type="text" name="name" id="name"></td>
</tr> </tr>
<tr> <tr>
<td> <td style="padding-top: 10px">x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()"></td>
y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()"> <td style="padding-top: 10px">dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchanged()"></td>
</td> <td rowspan="2" style="padding-top: 10px"><input class="button" type="button" value="Update Reference" onclick="CutOutReference()"></td>
<td>
dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()">
</td>
</tr> </tr>
<tr> <tr>
<td> <td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()"></td>
<input type="button" value="Update Reference" onclick="CutOutReference()"> <td>dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()"></td>
</td>
</tr>
</table>
</td>
</tr>
<table>
<tr>
<td>
Original Image
</td>
<td>
Reference Image
</td>
</tr> </tr>
<tr> <tr>
<td> <td style="padding-top: 10px">Original Image:</td>
<img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg"> <td style="padding-top: 10px">Reference Image:</td>
</td> <td rowspan="2"><input class="button" type="button" id="enhancecontrast" value="Enhance Contrast" onclick="EnhanceContrast()"></td>
<td> </tr>
<img id="img_ref" src = "/img_tmp/ref_zw.jpg"> <tr>
</td> <td><img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg"></td>
<td> <td><img id="img_ref" src = "/img_tmp/ref_zw.jpg"></td>
<input type="button" id="enhancecontrast" value="Enhance Contrast" onclick="EnhanceContrast()">
</td>
</tr> </tr>
</table> </table>
<table>
<tr> <tr>
<td> <td colspan="2"><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save to Config.ini"></td>
<input type="submit" name="saveroi" onclick="SaveToConfig()" value="Save to Config.ini">
</td>
</tr> </tr>
</table> </table>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="./gethost.js"></script> <script type="text/javascript" src="./gethost.js"></script>
<script type="text/javascript" src="./readconfig.js"></script> <script type="text/javascript" src="./readconfig.js"></script>
@@ -364,7 +361,5 @@ function dataURLtoBlob(dataurl) {
init(); init();
</script> </script>
</div>
</body> </body>
</html> </html>

127
sd-card/html/edit_analog.html
View File

@@ -2,81 +2,102 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Make Alignment</title> <title>Make Analog Alignment</title>
<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
input[type=number] {
width: 100px;
margin-right: 10px;
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
input[type=text] {
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
select {
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
margin-right: 10px;
}
.button {
padding: 5px 10px;
width: 210px;
font-size: 16px;
}
.move {
padding: 4px 4px;
width: 100px;
font-size: 12px;
}
th, td {
padding: 5px 5px 5px 0px;
}
</style>
</head> </head>
<div class="body-content" style="font-family: arial"> <body style="font-family: arial; padding: 0px 10px;">
<div id="createrefernce"> <h2>Edit Analog</h2>
<div style="padding-left: 30px">
<h3>Edit Analog</h3>
<div style="padding-left: 30px">
<table> <table>
<tr> <tr>
<td> <td><canvas id="canvas" crossorigin></canvas></td>
<canvas id="canvas" crossorigin></canvas>
</td>
</tr> </tr>
<tr> </table>
<td>
<table> <table>
<tr> <tr>
<td> <td><input class="button" type="submit" id= "newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"></td>
<input type="submit" id= "newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"> <td><input class="button" type="submit" id= "deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"></td>
<input type="submit" id= "deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"> <td></td>
</td>
</tr> </tr>
<tr>
<tr> <tr>
<td> <td>
<select id="index" name="index" onchange="ChangeSelection()"> <select id="index" name="index" onchange="ChangeSelection()">
<option value="0" selected>ROI 0</option> <option value="0" selected>ROI 0</option>
<option value="1" >ROI 1</option> <option value="1" >ROI 1</option>
</select> </select>
name: <input type="text" name="name" id="name" onchange="onNameChange()"> </td>
<input type="submit" id="moveNext" onclick="moveNext()" value="move Next"> <td>Name: <input type="text" name="name" id="name" onchange="onNameChange()" size="13"></td>
<input type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous"> <td>
<input class="move" type="submit" id="moveNext" onclick="moveNext()" value="move Next">
<input class="move" type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">
</td> </td>
</tr> </tr>
<tr>
<td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()"></td>
<td>dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()"></td>
<td rowspan="2"><label for="lockAR"> Lock aspect ratio: </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked></td>
</tr>
<tr>
<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()"></td>
<td>dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()"></td>
</tr>
</table>
<td>
<table> <table>
<tr> <tr>
<td> <td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()">
</td>
<td>
dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()">
</td>
<td>
<input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked>
<label for="lockAR"> lock aspect ratio</label><br>
</td>
</tr>
<tr>
<td>
y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()">
</td>
<td>
dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()">
</td>
</tr> </tr>
</table> </table>
</td>
</tr>
<tr>
<td>
<input type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="./gethost.js"></script> <script type="text/javascript" src="./gethost.js"></script>
<script type="text/javascript" src="./readconfig.js"></script> <script type="text/javascript" src="./readconfig.js"></script>
@@ -392,7 +413,5 @@ function ParseIni(_basepath) {
init(); init();
</script> </script>
</div>
</body> </body>
</html> </html>

37
sd-card/html/edit_check.html
View File

@@ -1,26 +1,49 @@
<!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8"/>
<title>Check</title>
<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
.button {
padding: 5px 10px;
width: 210px;
font-size: 16px;
}
</style>
</head>
<body style="font-family: arial"> <body style="font-family: arial">
<table> <table>
<tr><td>Result:</td></tr> <tr><td colspan="2">Result:</td></tr>
<tr> <tr>
<td> <td>
<iframe name="maincontent" id ="maincontent" width="800px" height="800px"></iframe> <iframe name="maincontent" id ="maincontent" width="700px" height="700px"></iframe>
</td> </td>
<td> <td style="padding-left: 15px;">
<p> <p>
<input type="submit" id="take" onclick="doTake()" value="1. Take Picture"> <input class="button" type="submit" id="take" onclick="doTake()" value="1. Take Picture">
</p>
<p>
<input class="button" type="submit" id="align" onclick="doAlign()" value="2. Align Image"><br>
</p> </p>
<p> <p>
<input type="submit" id="align" onclick="doAlign()" value="2. Align Image"><br>
Takes up to 2 Minutes! Takes up to 2 Minutes!
</p> </p>
Digits and Analog recognition not yet implemented. Digits and Analog recognition not yet implemented.
<p> <p>
<input type="submit" id="digits" onclick="doDigits()" value="3a. Analyse Digits"> <input class="button" type="submit" id="digits" onclick="doDigits()" value="3a. Analyse Digits">
</p> </p>
<p> <p>
<input type="submit" id="analog" onclick="doAnalog()" value="3b Analyse Analog"> <input class="button" type="submit" id="analog" onclick="doAnalog()" value="3b Analyse Analog">
</p> </p>
</td> </td>
</tr> </tr>

32
sd-card/html/edit_config.html
View File

@@ -1,15 +1,39 @@
<!DOCTYPE html>
<html> <html>
<body style="font-family: arial"> <head>
<title>Edit Config</title>
<meta charset="utf-8">
<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
.button {
padding: 5px 20px;
width: 211px;
font-size: 16px;
}
textarea {
font-size: 14px;
}
</style>
</head>
<body style="font-family: arial; padding: 0px 10px;">
<table> <table>
<tr><td>Config.ini:</td></tr> <tr><td><h2>Config.ini:</h2></td></tr>
<tr> <tr>
<td colspan="3"> <td colspan="3">
<textarea id="inputTextToSave" cols="100" rows="40"></textarea> <textarea id="inputTextToSave" cols="117" rows="38"></textarea>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><button onclick="saveTextAsFile()">Update Config.ini</button></td> <td><button class="button" onclick="saveTextAsFile()">Update Config.ini</button></td>
</tr> </tr>
</table> </table>

124
sd-card/html/edit_digits.html
View File

@@ -2,81 +2,102 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Make Alignment</title> <title>Make Digital Alignment</title>
<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
input[type=number] {
width: 100px;
margin-right: 10px;
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
input[type=text] {
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
select {
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
margin-right: 10px;
}
.button {
padding: 5px 10px;
width: 210px;
font-size: 16px;
}
.move {
padding: 4px 4px;
width: 100px;
font-size: 12px;
}
th, td {
padding: 5px 5px 5px 0px;
}
</style>
</head> </head>
<div class="body-content" style="font-family: arial"> <body style="font-family: arial; padding: 0px 10px;">
<div id="createrefernce"> <h2>Edit Digits</h2>
<div style="padding-left: 30px">
<h3>Edit Digits</h3>
<div style="padding-left: 30px">
<table> <table>
<tr> <tr>
<td>
<canvas id="canvas" crossorigin></canvas> <canvas id="canvas" crossorigin></canvas>
</td>
</tr> </tr>
<tr> </table>
<td>
<table> <table>
<tr> <tr>
<td> <td><input class="button" type="submit" id="newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"></td>
<input type="submit" id="newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"> <td><input class="button" type="submit" id="deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"></td>
<input type="submit" id="deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"> <td></td>
</td>
</tr> </tr>
<tr>
<tr> <tr>
<td> <td>
<select id="index" name="index" onchange="ChangeSelection()"> <select id="index" name="index" onchange="ChangeSelection()">
<option value="0" selected>ROI 0</option> <option value="0" selected>ROI 0</option>
<option value="1" >ROI 1</option> <option value="1" >ROI 1</option>
</select> </select>
name: <input type="text" name="name" id="name" onchange="onNameChange()"> </td>
<input type="submit" id="moveNext" onclick="moveNext()" value="move Next"> <td>Name: <input type="text" name="name" id="name" onchange="onNameChange()" size="13"></td>
<input type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous"> <td>
<input class="move" type="submit" id="moveNext" onclick="moveNext()" value="move Next">
<input class="move" type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">
</td> </td>
</tr> </tr>
<tr>
<td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()"></td>
<td>dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()"></td>
<td rowspan="2"><label for="lockAR"> lock aspect ratio </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked></td>
</tr>
<tr>
<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()"></td>
<td>dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()"></td>
</tr>
</table>
<td>
<table> <table>
<tr> <tr>
<td> <td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()">
</td>
<td>
dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()">
</td>
<td>
<input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked>
<label for="lockAR"> lock aspect ratio</label><br>
</td>
</tr>
<tr>
<td>
y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()">
</td>
<td>
dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()">
</td>
</tr> </tr>
</table> </table>
</td>
</tr>
<tr>
<td>
<input type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="./gethost.js"></script> <script type="text/javascript" src="./gethost.js"></script>
<script type="text/javascript" src="./readconfig.js"></script> <script type="text/javascript" src="./readconfig.js"></script>
@@ -392,6 +413,5 @@ function ParseIni(_basepath) {
init(); init();
</script> </script>
</div>
</body> </body>
</html> </html>

96
sd-card/html/edit_reference.html
View File

@@ -1,75 +1,69 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Make Reference</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Make refernce</title>
<style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
input[type=number] {
width: 100px;
margin-right: 10px;
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
.button {
padding: 5px 10px;
width: 210px;
font-size: 16px;
}
table {
padding: 5px;
}
</style>
</head> </head>
<body style="font-family: arial"> <body style="font-family: arial; padding: 0px 10px;">
<h3>Create Reference out of Raw Image</h3> <h2>Create Reference out of Raw Image</h2>
<div style="padding-left: 30px">
<table>
<tr>
<td>
<input type="button" value="Show actual Reference" onclick="showReference()">
</td>
<td>
<input type="button" value="Create new Reference" onclick="loadRawImage()">
</td>
</tr>
<tr>
<td>
<table> <table>
<tr> <tr>
<td> <td><input class="button" type="button" value="Show Actual Reference" onclick="showReference()"></td>
<input type="submit" id="take" onclick="doTake()" value="Make new raw image (raw.jpg)"> <td><input class="button" type="button" value="Create New Reference" onclick="loadRawImage()"></td>
</td> <td><input class="button" type="submit" id="take" onclick="doTake()" value="New Raw Image (raw.jpg)"></td>
</tr> </tr>
<tr> <tr>
<td> <td style="padding-top: 10px"><label for="mirror">Mirror Image:</label></td>
<label for="mirror">Mirror image</label> <td style="padding-top: 10px"><input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
</td>
<td>
<input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()">
</td>
</tr>
<tr>
<td>
Pre-rotate Angle
</td>
<td>
<input type="number" id="prerotateangle" name="prerotateangle" value=0 min="-360" max="360" onchange="drawRotated()">°
</td>
</tr> </tr>
<tr> <tr>
<td> <td><label for="mirror">Pre-rotate Angle:</label></td>
Fine Alignment <td><input type="number" id="prerotateangle" name="prerotateangle" value=0 min="-360" max="360" onchange="drawRotated()">Degrees</td>
</td> </tr>
<td> <tr>
<input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">° <td><label for="mirror">Fine Alignment:</label></td>
</td> <td><input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">Degrees</td>
</tr>
</table>
</td>
</tr> </tr>
</table> </table>
<table> <table>
<tr> <tr>
<td> <td><canvas id="canvas"></canvas></td>
<canvas id="canvas"></canvas>
</td>
</tr> </tr>
<tr> <tr>
<td> <td><input class="button" type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()"></td>
<input type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()">
</td>
</tr> </tr>
</table> </table>
</div>
<script type="text/javascript" src="./gethost.js"></script> <script type="text/javascript" src="./gethost.js"></script>
<script type="text/javascript" src="./readconfig.js"></script> <script type="text/javascript" src="./readconfig.js"></script>

17
sd-card/html/index.html
View File

@@ -1,12 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <title>jomjol - AI on the edge</title>
.h_iframe iframe {width:995px;height:700px;} <meta charset="utf-8">
.h_iframe {width:995px;height:700px;} <meta name="viewport" content="width=device-width, initial-scale=1.0">
h1 {font-size: 2em;} <style>
h2 {font-size: 1.5em;} .h_iframe iframe {width:995px;height:605px;}
.h_iframe {width:995px;height:605px;}
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;} p {font-size: 1em;}
ul { ul {
@@ -91,7 +96,7 @@ li.dropdown {
</ul> </ul>
<p> <p>
<div class="h_iframe"> <div class="h_iframe">
<iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe> <iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
</div> </div>
</body> </body>

23
sd-card/html/index_configure.html
View File

@@ -1,14 +1,17 @@
<html><head> <!DOCTYPE html>
<html>
<head>
<title>jomjol - AI on the edge</title> <title>jomjol - AI on the edge</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
.h_iframe iframe {width:995px;height:765px;}
.h_iframe {width:995px;height:765px;}
.h_iframe iframe {width:995px;height:760px;} h1 {font-size: 2em; margin-block-end: 0.3em;}
.h_iframe {width:995px;height:760px;} h2 {font-size: 1.5em;margin-block-start: 0.3em;}
h3 {font-size: 1.2em;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
p {font-size: 1em;} p {font-size: 1em;}
ul { ul {
@@ -66,12 +69,6 @@
display: block; display: block;
} }
</style> </style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</head>
<body style="font-family: arial"> <body style="font-family: arial">

2
sd-card/html/jquery-3.5.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

68
sd-card/html/ota_page.html
View File

@@ -1,15 +1,33 @@
<html><head> <!DOCTYPE html>
<title>jomjol - AI on the edge</title> <html>
<head>
<title>OTA Update</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
//<![CDATA[
//]]>
</script> <style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
input[type=number] {
width: 138px;
padding: 10px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
.button {
padding: 10px 20px;
width: 211px;
font-size: 16px;
}
</style>
</head> </head>
<body style="font-family: arial"> <body style="font-family: arial; padding: 0px 10px;">
<h3>It is strongly recommended to update firmware and content of /html directory on SD-card at the same time!</h3> <h3>It is strongly recommended to update firmware and content of /html directory on SD-card at the same time!</h3>
<h2>1. Firmware Update</h2> <h2>1. Firmware Update</h2>
<table class="fixed" border="0"> <table class="fixed" border="0">
@@ -17,8 +35,8 @@
<td> <td>
<table border="0"> <table border="0">
<tr> <tr>
<td> <td style="width: 230px">
<label for="newfile">Select the firmware file</label> <label for="newfile">Select the firmware file:</label>
</td> </td>
<td colspan="2"> <td colspan="2">
<input id="newfile" type="file" onchange="setpath()" style="width:100%;"> <input id="newfile" type="file" onchange="setpath()" style="width:100%;">
@@ -26,7 +44,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label for="filepath">Set path on server</label> <label for="filepath">Set path on server:</label>
</td> </td>
<td> <td>
<input id="filepath" type="text" style="width:100%;" readonly> <input id="filepath" type="text" style="width:100%;" readonly>
@@ -40,19 +58,28 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<button id="doUpdate" type="button" onclick="doUpdate()">Flash the firmware</button> (Takes about 60s) <table border="0">
<tr>
<td style="width: 230px">
<button class="button" id="doUpdate" type="button" onclick="doUpdate()">Flash the firmware</button>
</td>
<td>
(Takes about 60s)
</td>
</tr>
</table>
</td> </td>
</tr> </tr>
</table> </table>
<h2>2. Update /html directory</h2> <h2>2. Update "/html" directory</h2>
<table class="fixed" border="0"> <table class="fixed" border="0">
<tr> <tr>
<td> <td>
<table border="0"> <table border="0">
<tr> <tr>
<td> <td style="width: 230px">
<label for="newfilehtml">Select the zipped /html content</label> <label for="newfilehtml">Select the zipped /html content:</label>
</td> </td>
<td colspan="2"> <td colspan="2">
<input id="newfilehtml" type="file" onchange="setpathhtml()" style="width:100%;"> <input id="newfilehtml" type="file" onchange="setpathhtml()" style="width:100%;">
@@ -60,7 +87,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label for="filepathhtml">Set path on server</label> <label for="filepathhtml">Set path on server:</label>
</td> </td>
<td> <td>
<input id="filepathhtml" type="text" style="width:100%;" readonly> <input id="filepathhtml" type="text" style="width:100%;" readonly>
@@ -74,7 +101,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<button id="doUpdatehtml" type="button" onclick="doUpdatehtml()">Update "/html" directory</button> <button class="button" id="doUpdatehtml" type="button" onclick="doUpdatehtml()">Update "/html" directory</button>
</td> </td>
</tr> </tr>
</table> </table>
@@ -82,7 +109,7 @@
<table class="fixed" border="0"> <table class="fixed" border="0">
<tr> <tr>
<td> <td>
<button id="reboot" type="button" onclick="doReboot()">Reboot to activate updates</button> <button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate updates</button>
</td> </td>
</tr> </tr>
</table> </table>
@@ -317,6 +344,5 @@ function uploadhtml() {
init(); init();
</script> </script>
</body>
</html>
</body></html>

119
sd-card/html/prevalue_set.html
View File

@@ -1,72 +1,48 @@
<html><head> <!DOCTYPE html>
<title>jomjol - AI on the edge</title> <html>
<head>
<title>Set PreValue</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</head>
<style> <style>
h1 {font-size: 2em;} h1 {font-size: 2em;}
h2 {font-size: 1.5em;} h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;} p {font-size: 1em;}
div {
width: 200px;
padding: 10px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
max-height: 35px;
}
input[type=number] {
width: 125px;
padding: 10px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
}
.button {
padding: 10px 20px;
width: 211px;
font-size: 16px;
}
</style> </style>
</head>
<script src="/jquery-3.5.1.min.js"></script>
<script> <script>
function includeHTML() { $ (document).ready(function() {
var z, i, elmnt, file, xhttp; $("#prevalue").load("/setPreValue.html");
/* Loop through a collection of all HTML elements: */ });
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script> </script>
<body style="font-family: arial">
<table style="width:100%">
<tr>
<h2>Current Value:</h2><p>
<div w3-include-html="/setPreValue.html"></div>
</tr>
<tr>
<h2>Set Value:</h2><p>
Input (Format = 123.456):<p>
PreValue:
<input type="number" id="myInput" name="myInput"
pattern="[0-9]+([\.,][0-9]+)?" step="0.001"
title="This should be a number with up to 4 decimal places.">
<button type="button" onclick="setprevalue()">Set PreValue</button>
</tr>
<tr>
<h2>Result:</h2><p>
<div id="result"> </div>
</tr>
</table>
<script> <script>
function setprevalue() { function setprevalue() {
var inputVal = document.getElementById("myInput").value; var inputVal = document.getElementById("myInput").value;
@@ -77,8 +53,29 @@ function setprevalue() {
} }
</script> </script>
<script> <body style="font-family: arial; padding: 0px 10px;">
includeHTML(); <h3>Set the previous value for consistency check and substitution for NaN</h3>
</script>
<table style="width:100%">
<tr>
<h2>Current Value:</h2><p>
<div id="prevalue"></div>
</tr>
<tr>
<h2>Set Value:</h2><p>
Input (Format = 123.456):<p>
PreValue:
<input type="number" id="myInput" name="myInput"
pattern="[0-9]+([\.,][0-9]+)?" step="0.001"
title="This should be a number with up to 4 decimal places.">
<p></p>
<button class="button" type="button" onclick="setprevalue()">Set PreValue</button>
</tr>
<tr>
<h2>Result:</h2><p>
<div id="result" readonly></div>
</tr>
</table>
</body></html> </body></html>

33
sd-card/html/reboot_page.html
View File

@@ -1,22 +1,32 @@
<html><head> <!DOCTYPE html>
<title>jomjol - AI on the edge</title> <html>
<head>
<title>Reboot</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
//<![CDATA[
//]]>
</script> <style>
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
.button {
padding: 10px 20px;
width: 211px;
font-size: 16px;
}
</style>
</head> </head>
<body style="font-family: arial"> <body style="font-family: arial; padding: 0px 10px;">
<h2>Do you really want to reboot your system now?</h2> <h3>Do you really want to reboot your system now?</h3>
<table class="fixed" border="0"> <table class="fixed" border="0">
<tr> <tr>
<td> <td>
<button id="reboot" type="button" onclick="doReboot()">Yes, please reboot now</button> <button class="button" id="reboot" type="button" onclick="doReboot()">Yes, please reboot</button>
</td> </td>
</tr> </tr>
</table> </table>
@@ -33,4 +43,5 @@ function doReboot() {
} }
</script> </script>
</body></html> </body>
</html>

130
sd-card/html/wasserzaehler_roi.html
View File

@@ -1,42 +1,62 @@
<html><head> <!DOCTYPE html>
<title>jomjol - AI on the edge</title> <html>
<head>
<title>Overview</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" media="screen"> <style>
.tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;} .tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;height:585px;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:24px;font-weight:bold;text-align:left;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{height: 55px;font-size:24px;font-weight:bold;text-align:left;padding:0px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;background-color:#f0f0f0}
.tg .tg-hfl5{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;} .tg .tg-1{width:78%;font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
.tg .tg-2{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
.tg .tg-3{height: 15px;font-size:14px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
</style> </style>
</head> </head>
<script src="/jquery-3.5.1.min.js"></script>
<script> <script>
function includeHTML() { function addZero(i) {
var z, i, elmnt, file, xhttp; if (i < 10) {
/* Loop through a collection of all HTML elements: */ i = "0" + i;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
} }
return i;
} }
$ (document).ready(function() {
var d = new Date();
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
$('#img').html('<img src="/img_tmp/alg_roi.jpg" style="width:740px;max-height:100%"></img>');
$("#raw").load("/wasserzaehler.html?rawvalue=true");
$("#corrected").load("/wasserzaehler.html");
$("#checked").load("/setPreValue.html");
$("#start").load("/starttime");
$('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
refresh();
});
function refresh() {
setTimeout (function() {
var time = new Date();
var timestamp = new Date().getTime();
var d = new Date();
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
// reassign the url to be like alg_roi.jpg?timestamp=456784512 based on timestamp
$('#img').html('<img src="/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'" style="width:740px;max-height:100%"></img>');
$("#raw").load("/wasserzaehler.html?rawvalue=true");
$("#corrected").load("/wasserzaehler.html");
$("#checked").load("/setPreValue.html");
$("#start").load("/starttime");
$('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
refresh();
}, 300000);
} }
</script> </script>
@@ -44,50 +64,44 @@ function includeHTML() {
<table class="tg"> <table class="tg">
<tr> <tr>
<td class="tg-hfl5" rowspan="8"><img src="/img_tmp/alg_roi.jpg" alt="ROI-Image"></td> <td class="tg-1" rowspan="9"><div id="img"></div></td>
<th class="th"> <th class="th">Raw Value:</th>
Raw Value:
</th>
</tr> </tr>
<tr> <tr>
<td class="tg-hfl5"> <td class="tg-2">
<div w3-include-html="/wasserzaehler.html?rawvalue=true"></div> <div id="raw"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th class="th"> <th class="th">Corrected Value:</th>
Corrected Value:
</th>
</tr> </tr>
<tr> <tr>
<td class="tg-hfl5"> <td class="tg-2">
<div w3-include-html="/wasserzaehler.html"></div> <div id="corrected"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th class="th"> <th class="th">Checked Value:</th>
Checked Value:
</th>
</tr> </tr>
<tr> <tr>
<td class="tg-hfl5"> <td class="tg-2">
<div w3-include-html="/setPreValue.html"></div> <div id="checked"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th class="th"> <th class="th">Start Time:</th>
Start Time:
</th>
</tr> </tr>
<tr> <tr>
<td class="tg-hfl5"> <td class="tg-2">
<div w3-include-html="/starttime"></div> <div id="start"></div>
</td>
</tr>
<tr>
<td class="tg-3">
<div id="timestamp"></div>
</td> </td>
</tr> </tr>
</table> </table>
<script> </body>
includeHTML(); </html>
</script>
</body></html>