mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-07 12:06:58 +03:00
Update HTML / Autorefresh
- 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
@@ -1,101 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>
|
||||
|
||||
<div class="body-content" style="font-family: arial">
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
|
||||
<div id="createrefernce">
|
||||
<div style="padding-left: 30px">
|
||||
<h3>Define Alignment Structure in Reference Image</h3>
|
||||
<h2>Define Alignment Structure in Reference Image</h2>
|
||||
|
||||
<div style="padding-left: 30px">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<canvas id="canvas" crossorigin></canvas>
|
||||
</td>
|
||||
<td><canvas id="canvas" crossorigin></canvas></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td>Select Reference:
|
||||
<select id="index" name="reference" onchange="ChangeSelection()">
|
||||
<option value="0" selected>Reference 0</option>
|
||||
<option value="1" >Reference 1</option>
|
||||
</select>
|
||||
Storage path/name: <input type="text" name="name" id="name">
|
||||
</td>
|
||||
<td colspan="2">Storage Path/Name: <input type="text" name="name" id="name"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-top: 10px">x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()"></td>
|
||||
<td style="padding-top: 10px">dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchanged()"></td>
|
||||
<td rowspan="2" style="padding-top: 10px"><input class="button" type="button" value="Update Reference" onclick="CutOutReference()"></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>
|
||||
<td style="padding-top: 10px">Original Image:</td>
|
||||
<td style="padding-top: 10px">Reference Image:</td>
|
||||
<td rowspan="2"><input class="button" type="button" id="enhancecontrast" value="Enhance Contrast" onclick="EnhanceContrast()"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg"></td>
|
||||
<td><img id="img_ref" src = "/img_tmp/ref_zw.jpg"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<td>
|
||||
<input type="button" value="Update Reference" onclick="CutOutReference()">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Original Image
|
||||
</td>
|
||||
<td>
|
||||
Reference Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg">
|
||||
</td>
|
||||
<td>
|
||||
<img id="img_ref" src = "/img_tmp/ref_zw.jpg">
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" id="enhancecontrast" value="Enhance Contrast" onclick="EnhanceContrast()">
|
||||
</td>
|
||||
<td colspan="2"><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save to Config.ini"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<input type="submit" name="saveroi" onclick="SaveToConfig()" value="Save to Config.ini">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
<script type="text/javascript" src="./readconfig.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
<script type="text/javascript" src="./readconfig.js"></script>
|
||||
|
||||
<script language="JavaScript">
|
||||
<script language="JavaScript">
|
||||
var canvas = document.getElementById('canvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
imageObj = new Image(),
|
||||
@@ -364,7 +361,5 @@ function dataURLtoBlob(dataurl) {
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,87 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Make Alignment</title>
|
||||
<meta charset="utf-8"/>
|
||||
<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>
|
||||
|
||||
<div class="body-content" style="font-family: arial">
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
|
||||
<div id="createrefernce">
|
||||
<div style="padding-left: 30px">
|
||||
<h3>Edit Analog</h3>
|
||||
<h2>Edit Analog</h2>
|
||||
|
||||
<div style="padding-left: 30px">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<canvas id="canvas" crossorigin></canvas>
|
||||
</td>
|
||||
<td><canvas id="canvas" crossorigin></canvas></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="submit" id= "newROI" name="newROI" onclick="newROI()" value="New ROI (after current)">
|
||||
<input type="submit" id= "deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI">
|
||||
</td>
|
||||
<td><input class="button" type="submit" id= "newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"></td>
|
||||
<td><input class="button" type="submit" id= "deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select id="index" name="index" onchange="ChangeSelection()">
|
||||
<option value="0" selected>ROI 0</option>
|
||||
<option value="1" >ROI 1</option>
|
||||
</select>
|
||||
name: <input type="text" name="name" id="name" onchange="onNameChange()">
|
||||
<input type="submit" id="moveNext" onclick="moveNext()" value="move Next">
|
||||
<input type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">
|
||||
</td>
|
||||
<td>Name: <input type="text" name="name" id="name" onchange="onNameChange()" size="13"></td>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
|
||||
</tr>
|
||||
</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="./readconfig.js"></script>
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
<script type="text/javascript" src="./readconfig.js"></script>
|
||||
|
||||
<script language="JavaScript">
|
||||
<script language="JavaScript">
|
||||
var canvas = document.getElementById('canvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
imageObj = new Image(),
|
||||
@@ -391,8 +412,6 @@ function ParseIni(_basepath) {
|
||||
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,26 +1,49 @@
|
||||
<!DOCTYPE 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">
|
||||
|
||||
<table>
|
||||
<tr><td>Result:</td></tr>
|
||||
<tr><td colspan="2">Result:</td></tr>
|
||||
<tr>
|
||||
<td>
|
||||
<iframe name="maincontent" id ="maincontent" width="800px" height="800px"></iframe>
|
||||
<iframe name="maincontent" id ="maincontent" width="700px" height="700px"></iframe>
|
||||
</td>
|
||||
<td>
|
||||
<td style="padding-left: 15px;">
|
||||
<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>
|
||||
<input type="submit" id="align" onclick="doAlign()" value="2. Align Image"><br>
|
||||
Takes up to 2 Minutes!
|
||||
</p>
|
||||
Digits and Analog recognition not yet implemented.
|
||||
<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>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,15 +1,39 @@
|
||||
<!DOCTYPE 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>
|
||||
<tr><td>Config.ini:</td></tr>
|
||||
<tr><td><h2>Config.ini:</h2></td></tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<textarea id="inputTextToSave" cols="100" rows="40"></textarea>
|
||||
<textarea id="inputTextToSave" cols="117" rows="38"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button onclick="saveTextAsFile()">Update Config.ini</button></td>
|
||||
<td><button class="button" onclick="saveTextAsFile()">Update Config.ini</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -1,87 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Make Alignment</title>
|
||||
<meta charset="utf-8"/>
|
||||
<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>
|
||||
|
||||
<div class="body-content" style="font-family: arial">
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
|
||||
<div id="createrefernce">
|
||||
<div style="padding-left: 30px">
|
||||
<h3>Edit Digits</h3>
|
||||
<h2>Edit Digits</h2>
|
||||
|
||||
<div style="padding-left: 30px">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<canvas id="canvas" crossorigin></canvas>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="submit" id="newROI" name="newROI" onclick="newROI()" value="New ROI (after current)">
|
||||
<input type="submit" id="deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI">
|
||||
</td>
|
||||
<td><input class="button" type="submit" id="newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"></td>
|
||||
<td><input class="button" type="submit" id="deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<tr>
|
||||
<td>
|
||||
<select id="index" name="index" onchange="ChangeSelection()">
|
||||
<option value="0" selected>ROI 0</option>
|
||||
<option value="1" >ROI 1</option>
|
||||
</select>
|
||||
name: <input type="text" name="name" id="name" onchange="onNameChange()">
|
||||
<input type="submit" id="moveNext" onclick="moveNext()" value="move Next">
|
||||
<input type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">
|
||||
</td>
|
||||
<td>Name: <input type="text" name="name" id="name" onchange="onNameChange()" size="13"></td>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
|
||||
</tr>
|
||||
</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="./readconfig.js"></script>
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
<script type="text/javascript" src="./readconfig.js"></script>
|
||||
|
||||
<script language="JavaScript">
|
||||
<script language="JavaScript">
|
||||
var canvas = document.getElementById('canvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
imageObj = new Image(),
|
||||
@@ -390,8 +411,7 @@ function ParseIni(_basepath) {
|
||||
|
||||
|
||||
init();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,75 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Make refernce</title>
|
||||
<title>Make Reference</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;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 5px 10px;
|
||||
width: 210px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="font-family: arial">
|
||||
<h3>Create Reference out of Raw Image</h3>
|
||||
<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>
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
<h2>Create Reference out of Raw Image</h2>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="submit" id="take" onclick="doTake()" value="Make new raw image (raw.jpg)">
|
||||
</td>
|
||||
<td><input class="button" type="button" value="Show Actual Reference" onclick="showReference()"></td>
|
||||
<td><input class="button" type="button" value="Create New Reference" onclick="loadRawImage()"></td>
|
||||
<td><input class="button" type="submit" id="take" onclick="doTake()" value="New Raw Image (raw.jpg)"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="mirror">Mirror image</label>
|
||||
</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>
|
||||
<td style="padding-top: 10px"><label for="mirror">Mirror Image:</label></td>
|
||||
<td style="padding-top: 10px"><input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Fine Alignment
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">°
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td><label for="mirror">Pre-rotate Angle:</label></td>
|
||||
<td><input type="number" id="prerotateangle" name="prerotateangle" value=0 min="-360" max="360" onchange="drawRotated()">Degrees</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="mirror">Fine Alignment:</label></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>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<canvas id="canvas"></canvas>
|
||||
</td>
|
||||
<td><canvas id="canvas"></canvas></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()">
|
||||
</td>
|
||||
<td><input class="button" type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
<script type="text/javascript" src="./readconfig.js"></script>
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.h_iframe iframe {width:995px;height:700px;}
|
||||
.h_iframe {width:995px;height:700px;}
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
<style>
|
||||
.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;}
|
||||
|
||||
ul {
|
||||
@@ -91,7 +96,7 @@ li.dropdown {
|
||||
</ul>
|
||||
<p>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -1,48 +1,51 @@
|
||||
<html><head>
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
.h_iframe iframe {width:995px;height:760px;}
|
||||
.h_iframe {width:995px;height:760px;}
|
||||
<style>
|
||||
.h_iframe iframe {width:995px;height:765px;}
|
||||
.h_iframe {width:995px;height:765px;}
|
||||
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
p {font-size: 1em;}
|
||||
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;}
|
||||
|
||||
ul {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
width:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
li {
|
||||
float: left;
|
||||
font-family: arial;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
li a, .dropbtn {
|
||||
li a, .dropbtn {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
li a:hover, .dropdown:hover .dropbtn {
|
||||
li a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
li.dropdown {
|
||||
li.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
@@ -50,28 +53,22 @@
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
font-family: arial;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
//]]>
|
||||
|
||||
</script>
|
||||
</head>
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="font-family: arial">
|
||||
|
||||
|
||||
2
sd-card/html/jquery-3.5.1.min.js
vendored
Normal file
2
sd-card/html/jquery-3.5.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,15 +1,33 @@
|
||||
<html><head>
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
//]]>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OTA Update</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<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>
|
||||
|
||||
</script>
|
||||
</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>
|
||||
<h2>1. Firmware Update</h2>
|
||||
<table class="fixed" border="0">
|
||||
@@ -17,8 +35,8 @@
|
||||
<td>
|
||||
<table border="0">
|
||||
<tr>
|
||||
<td>
|
||||
<label for="newfile">Select the firmware file</label>
|
||||
<td style="width: 230px">
|
||||
<label for="newfile">Select the firmware file:</label>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<input id="newfile" type="file" onchange="setpath()" style="width:100%;">
|
||||
@@ -26,7 +44,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="filepath">Set path on server</label>
|
||||
<label for="filepath">Set path on server:</label>
|
||||
</td>
|
||||
<td>
|
||||
<input id="filepath" type="text" style="width:100%;" readonly>
|
||||
@@ -40,19 +58,28 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>2. Update /html directory</h2>
|
||||
<h2>2. Update "/html" directory</h2>
|
||||
<table class="fixed" border="0">
|
||||
<tr>
|
||||
<td>
|
||||
<table border="0">
|
||||
<tr>
|
||||
<td>
|
||||
<label for="newfilehtml">Select the zipped /html content</label>
|
||||
<td style="width: 230px">
|
||||
<label for="newfilehtml">Select the zipped /html content:</label>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<input id="newfilehtml" type="file" onchange="setpathhtml()" style="width:100%;">
|
||||
@@ -60,7 +87,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="filepathhtml">Set path on server</label>
|
||||
<label for="filepathhtml">Set path on server:</label>
|
||||
</td>
|
||||
<td>
|
||||
<input id="filepathhtml" type="text" style="width:100%;" readonly>
|
||||
@@ -74,7 +101,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -82,7 +109,7 @@
|
||||
<table class="fixed" border="0">
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -317,6 +344,5 @@ function uploadhtml() {
|
||||
init();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,72 +1,48 @@
|
||||
<html><head>
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
//]]>
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set PreValue</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style>
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
h3 {font-size: 1.2em;}
|
||||
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>
|
||||
|
||||
</head>
|
||||
|
||||
<script src="/jquery-3.5.1.min.js"></script>
|
||||
<script>
|
||||
function includeHTML() {
|
||||
var z, i, elmnt, file, xhttp;
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
$ (document).ready(function() {
|
||||
$("#prevalue").load("/setPreValue.html");
|
||||
});
|
||||
</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>
|
||||
function setprevalue() {
|
||||
var inputVal = document.getElementById("myInput").value;
|
||||
@@ -77,8 +53,29 @@ function setprevalue() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
includeHTML();
|
||||
</script>
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
<h3>Set the previous value for consistency check and substitution for NaN</h3>
|
||||
|
||||
<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>
|
||||
@@ -1,22 +1,32 @@
|
||||
<html><head>
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
//]]>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reboot</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<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>
|
||||
|
||||
</script>
|
||||
</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">
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -33,4 +43,5 @@ function doReboot() {
|
||||
}
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,93 +1,107 @@
|
||||
<html><head>
|
||||
<title>jomjol - AI on the edge</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style type="text/css" media="screen">
|
||||
.tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;}
|
||||
.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 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 .tg-hfl5{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
|
||||
</style>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Overview</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style>
|
||||
.tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;height:585px;}
|
||||
.tg td{font-size:14px;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-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>
|
||||
|
||||
</head>
|
||||
|
||||
<script src="/jquery-3.5.1.min.js"></script>
|
||||
|
||||
<script>
|
||||
function includeHTML() {
|
||||
var z, i, elmnt, file, xhttp;
|
||||
/* 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();
|
||||
function addZero(i) {
|
||||
if (i < 10) {
|
||||
i = "0" + i;
|
||||
}
|
||||
return i;
|
||||
}
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
/* Exit the function: */
|
||||
return;
|
||||
|
||||
$ (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>
|
||||
|
||||
<body style="font-family: arial">
|
||||
|
||||
<table class="tg">
|
||||
<tr>
|
||||
<td class="tg-hfl5" rowspan="8"><img src="/img_tmp/alg_roi.jpg" alt="ROI-Image"></td>
|
||||
<th class="th">
|
||||
Raw Value:
|
||||
</th>
|
||||
<td class="tg-1" rowspan="9"><div id="img"></div></td>
|
||||
<th class="th">Raw Value:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/wasserzaehler.html?rawvalue=true"></div>
|
||||
<td class="tg-2">
|
||||
<div id="raw"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th">
|
||||
Corrected Value:
|
||||
</th>
|
||||
<th class="th">Corrected Value:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/wasserzaehler.html"></div>
|
||||
<td class="tg-2">
|
||||
<div id="corrected"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th">
|
||||
Checked Value:
|
||||
</th>
|
||||
<th class="th">Checked Value:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/setPreValue.html"></div>
|
||||
<td class="tg-2">
|
||||
<div id="checked"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th">
|
||||
Start Time:
|
||||
</th>
|
||||
<th class="th">Start Time:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/starttime"></div>
|
||||
<td class="tg-2">
|
||||
<div id="start"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-3">
|
||||
<div id="timestamp"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
includeHTML();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user