mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-08 12:36:52 +03:00
Update html-style
Update of HTML
This commit is contained in:
jomjol
@@ -5,7 +5,7 @@
|
||||
<title>Make Alignment</title>
|
||||
</head>
|
||||
|
||||
<div class="body-content">
|
||||
<div class="body-content" style="font-family: arial">
|
||||
|
||||
<div id="createrefernce">
|
||||
<div style="padding-left: 30px">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>Make Alignment</title>
|
||||
</head>
|
||||
|
||||
<div class="body-content">
|
||||
<div class="body-content" style="font-family: arial">
|
||||
|
||||
<div id="createrefernce">
|
||||
<div style="padding-left: 30px">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<html>
|
||||
<body>
|
||||
<body style="font-family: arial">
|
||||
|
||||
<table>
|
||||
<tr><td>Result:</td></tr>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<html>
|
||||
<body>
|
||||
<body style="font-family: arial">
|
||||
|
||||
<table>
|
||||
<tr><td>Config.ini:</td></tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<textarea id="inputTextToSave" cols="80" rows="25"></textarea>
|
||||
<textarea id="inputTextToSave" cols="100" rows="40"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<table>
|
||||
<tr><td>Config.ini:</td></tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<textarea id="inputTextToSave" cols="80" rows="25"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button onclick="saveTextAsFile()">Update Config.ini</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function loadConfig() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function () {
|
||||
// alert(this.responseText);
|
||||
document.getElementById("inputTextToSave").value = this.responseText;
|
||||
};
|
||||
url = '/fileserver/config/config.ini';
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
||||
function saveTextAsFile()
|
||||
{
|
||||
if (confirm("Are you sure you want to update \"config.ini\"?")) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
/* first delete the old firmware */
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4) {
|
||||
if (xhttp.status == 200) {
|
||||
/* keine Reaktion, damit sich das Dokument nicht ändert */
|
||||
} else if (xhttp.status == 0) {
|
||||
alert("Server closed the connection abruptly!");
|
||||
location.reload()
|
||||
} else {
|
||||
alert(xhttp.status + " Error!\n" + xhttp.responseText);
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
};
|
||||
xhttp.open("POST", "/delete/config/config.ini", false);
|
||||
xhttp.send();
|
||||
/* ----------------------------- */
|
||||
|
||||
var textToSave = document.getElementById("inputTextToSave").value;
|
||||
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4) {
|
||||
if (xhttp.status == 200) {
|
||||
alert("Update \"config.ini\" successfull!\n\nTo make it active you need to reboot.")
|
||||
document.reload();
|
||||
} else if (xhttp.status == 0) {
|
||||
alert("Server closed the connection abruptly!");
|
||||
location.reload()
|
||||
} else {
|
||||
alert(xhttp.status + " Error!\n" + xhttp.responseText);
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
upload_path = "/upload/config/config.ini";
|
||||
|
||||
xhttp.open("POST", upload_path, true);
|
||||
xhttp.send(textToSave);
|
||||
}
|
||||
}
|
||||
|
||||
loadConfig();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>Make Alignment</title>
|
||||
</head>
|
||||
|
||||
<div class="body-content">
|
||||
<div class="body-content" style="font-family: arial">
|
||||
|
||||
<div id="createrefernce">
|
||||
<div style="padding-left: 30px">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>Make refernce</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="font-family: arial">
|
||||
<h3>Create Reference out of Raw Image</h3>
|
||||
<div style="padding-left: 30px">
|
||||
<table>
|
||||
|
||||
@@ -1,115 +1,98 @@
|
||||
<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">
|
||||
nav > ul {
|
||||
list-style: none;
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.h_iframe iframe {width:995px;height:700px;}
|
||||
.h_iframe {width:995px;height:700px;}
|
||||
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
p {font-size: 1em;}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
width:1000px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 1.5em;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
font-family: arial;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 45em) {
|
||||
nav > ul {
|
||||
flex-direction: row;
|
||||
}
|
||||
nav li {
|
||||
flex: 1;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
padding: 0.4em;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
li a, .dropbtn {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border: 1px solid darkblue;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 10px white inset;
|
||||
color: gold;
|
||||
background-color: darkblue;
|
||||
transition: all .25s ease-in;
|
||||
}
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav li[aria-current] a {
|
||||
background-color: firebrick;
|
||||
color: gold;
|
||||
}
|
||||
li a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
nav a:focus,
|
||||
nav a:hover,
|
||||
nav li[aria-current] a:focus,
|
||||
nav li[aria-current] a:hover {
|
||||
color: darkblue;
|
||||
background-color: gold;
|
||||
}
|
||||
li.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height:100%;
|
||||
width:100%;
|
||||
margin:0;
|
||||
}
|
||||
.h_iframe iframe {
|
||||
width:98%;
|
||||
height:80%;
|
||||
}
|
||||
.h_iframe {
|
||||
height: 80%;
|
||||
width:98%;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
//]]>
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
</script>
|
||||
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Watermeter - AI on the edge - an ESP32 all in neural network recognition system</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li aria-current="page"><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">wasserzaehler</a>
|
||||
<ul class="submenu">
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a> </li>
|
||||
<li><a href="index_configure.html">Edit Configuration</a> </li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">/wasserzaehler.html?full</a> </li>
|
||||
</ul>
|
||||
</li>
|
||||
<body style="font-family: arial">
|
||||
|
||||
<li><a href="#" onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a> </li>
|
||||
<h1>Watermeter - AI on the edge</h1>
|
||||
<h2>An ESP32 all in neural network recognition system</h2>
|
||||
|
||||
<li><a href="#">System</a>
|
||||
<ul class="submenu">
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/starttime';">Start time</a> </li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a> </li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a> </li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<p>
|
||||
|
||||
<div class="h_iframe">
|
||||
<iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
|
||||
<ul>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">Configuration</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a>
|
||||
<a href="index_configure.html">Edit Configuration</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Watermeter</a></li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">System</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
|
||||
</div>
|
||||
</ul>
|
||||
<p>
|
||||
<div class="h_iframe">
|
||||
<iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,72 +2,68 @@
|
||||
<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">
|
||||
nav > ul {
|
||||
list-style: none;
|
||||
<style>
|
||||
|
||||
.h_iframe iframe {width:995px;height:760px;}
|
||||
.h_iframe {width:995px;height:760px;}
|
||||
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
p {font-size: 1em;}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
width:1000px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 1.5em;
|
||||
flex: 1 1 0%;
|
||||
li {
|
||||
float: left;
|
||||
font-family: arial;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 45em) {
|
||||
nav > ul {
|
||||
flex-direction: row;
|
||||
}
|
||||
nav li {
|
||||
flex: 1;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
padding: 0.4em;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
li a, .dropbtn {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border: 1px solid darkblue;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 10px white inset;
|
||||
color: gold;
|
||||
background-color: darkblue;
|
||||
transition: all .25s ease-in;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav li[aria-current] a {
|
||||
background-color: firebrick;
|
||||
color: gold;
|
||||
li a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
nav a:focus,
|
||||
nav a:hover,
|
||||
nav li[aria-current] a:focus,
|
||||
nav li[aria-current] a:hover {
|
||||
color: darkblue;
|
||||
background-color: gold;
|
||||
li.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height:100%;
|
||||
width:100%;
|
||||
margin:0;
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.h_iframe iframe {
|
||||
width:98%;
|
||||
height:150%;
|
||||
}
|
||||
.h_iframe {
|
||||
height: 150%;
|
||||
width:98%;
|
||||
|
||||
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
@@ -77,40 +73,32 @@
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Configure watermeter</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<body style="font-family: arial">
|
||||
|
||||
<h1>Configure Watermeter</h1>
|
||||
|
||||
<li><a href="#" onclick="document.getElementById('maincontent').src = 'edit_config.html';">CONFIG.INI direct</a> </li>
|
||||
<li><a href="#">Alignment</a>
|
||||
<ul class="submenu">
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a> </li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a> </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Regions of interest</a>
|
||||
<ul class="submenu">
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a> </li>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a> </li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><a href="#" onclick="document.getElementById('maincontent').src = 'edit_check.html';">Check</a> </li>
|
||||
<li aria-current="page"><a href="index.html">Main</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<p>
|
||||
|
||||
<div class="h_iframe">
|
||||
<iframe name="maincontent" id="maincontent" src="edit_config.html" title="fileserver"></iframe>
|
||||
<ul>
|
||||
<li aria-current="page"><a href="index.html">Main Page</a>
|
||||
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_config.html';">CONFIG.INI direct</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">Alignment</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a>
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">Regions Of Interest (ROI)</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a>
|
||||
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#" onclick="document.getElementById('maincontent').src = 'edit_check.html';">Check</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
<div class="h_iframe">
|
||||
<iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="edit_config.html" title="fileserver"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -9,7 +9,7 @@
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="font-family: arial">
|
||||
<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">
|
||||
|
||||
@@ -9,13 +9,50 @@
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
p {font-size: 1em;}
|
||||
</style>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<body style="font-family: arial">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
Current Value:<p>
|
||||
<iframe name="currentvalue" id ="currentvalue" src="/setPreValue.html" title="fileserver" allowfullscreen></iframe>
|
||||
<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"
|
||||
@@ -24,8 +61,8 @@
|
||||
<button type="button" onclick="setprevalue()">Set PreValue</button>
|
||||
</tr>
|
||||
<tr>
|
||||
Result:<p>
|
||||
<iframe name="result" id ="result" src="" title="fileserver" allowfullscreen></iframe>
|
||||
<h2>Result:</h2><p>
|
||||
<div id="result"> </div>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
@@ -34,10 +71,14 @@
|
||||
function setprevalue() {
|
||||
var inputVal = document.getElementById("myInput").value;
|
||||
inputVal = inputVal.replace(",", ".");
|
||||
_value = "/setPreValue.html?value="+inputVal;
|
||||
document.getElementById('result').src = _value;
|
||||
_value = "<object data=" + "/setPreValue.html?value=" + inputVal + " ></object>";
|
||||
document.getElementById("result").innerHTML=_value;
|
||||
// location.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
includeHTML();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@@ -9,26 +9,28 @@
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="font-family: arial">
|
||||
|
||||
<h2>Do you really want to reboot your system now?</h2>
|
||||
|
||||
<table class="fixed" border="0">
|
||||
<tr>
|
||||
<td>
|
||||
<button id="reboot" type="button" onclick="doReboot()">Reboot</button>
|
||||
<button id="reboot" type="button" onclick="doReboot()">Yes, please reboot now</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
function doReboot() {
|
||||
if (confirm("Are you sure you want to reboot the ESP32?")) {
|
||||
// if (confirm("Are you sure you want to reboot the ESP32?")) {
|
||||
var stringota = "/reboot";
|
||||
window.location = stringota;
|
||||
window.location.href = stringota;
|
||||
window.location.assign(stringota);
|
||||
window.location.replace(stringota);
|
||||
}
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -1,4 +1,4 @@
|
||||
<table class="fixed" border="0">
|
||||
<table class="fixed" border="0" style="font-family: arial">
|
||||
<col width="300px" /><col width="200px" />
|
||||
<tr><td>
|
||||
<h2>ESP32 File Server</h2>
|
||||
|
||||
@@ -3,95 +3,91 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style type="text/css" media="screen">
|
||||
nav > ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 1.5em;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
@media (min-width: 45em) {
|
||||
nav > ul {
|
||||
flex-direction: row;
|
||||
}
|
||||
nav li {
|
||||
flex: 1;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
padding: 0.4em;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: 1px solid darkblue;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 10px white inset;
|
||||
color: gold;
|
||||
background-color: darkblue;
|
||||
transition: all .25s ease-in;
|
||||
}
|
||||
|
||||
nav li[aria-current] a {
|
||||
background-color: firebrick;
|
||||
color: gold;
|
||||
}
|
||||
|
||||
nav a:focus,
|
||||
nav a:hover,
|
||||
nav li[aria-current] a:focus,
|
||||
nav li[aria-current] a:hover {
|
||||
color: darkblue;
|
||||
background-color: gold;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height:100%;
|
||||
width:100%;
|
||||
margin:0;
|
||||
}
|
||||
.h_iframe iframe {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.h_iframe {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
}
|
||||
.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>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table style="width:100%">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<body style="font-family: arial">
|
||||
|
||||
<table class="tg">
|
||||
<tr>
|
||||
<td> <img src="/img_tmp/alg_roi.jpg" alt="ROI-Image"> </td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
Raw Value:<p>
|
||||
<iframe name="maincontent1" id ="maincontent1" src="/wasserzaehler.html?rawvalue=true" title="fileserver" allowfullscreen></iframe>
|
||||
<td class="tg-hfl5" rowspan="8"><img src="/img_tmp/alg_roi.jpg" alt="ROI-Image"></td>
|
||||
<th class="th">
|
||||
Raw Value:
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
Corrected Value:<p>
|
||||
<iframe name="maincontent2" id ="maincontent2" src="/wasserzaehler.html" title="fileserver" allowfullscreen></iframe>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/wasserzaehler.html?rawvalue=true"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<tr>
|
||||
<th class="th">
|
||||
Corrected Value:
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/wasserzaehler.html"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th">
|
||||
Current Value:
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/setPreValue.html"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th">
|
||||
Start Time:
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tg-hfl5">
|
||||
<div w3-include-html="/starttime"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
includeHTML();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user