Procházet zdrojové kódy

Update html-style

Update of HTML
jomjol před 5 roky
rodič
revize
40953091d7

+ 1 - 1
sd-card/html/edit_alignment.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">

+ 1 - 1
sd-card/html/edit_analog.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">

+ 1 - 1
sd-card/html/edit_check.html

@@ -1,5 +1,5 @@
 <html>
-<body>
+<body style="font-family: arial">
  
 <table>
     <tr><td>Result:</td></tr>

+ 2 - 2
sd-card/html/edit_config.html

@@ -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>

+ 0 - 82
sd-card/html/edit_config_old.html

@@ -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>

+ 1 - 1
sd-card/html/edit_digits.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">

+ 1 - 1
sd-card/html/edit_reference.html

@@ -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>

+ 88 - 105
sd-card/html/index.html

@@ -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;
-			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;
-		}
-		
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.h_iframe iframe {width:995px;height:700px;}
+.h_iframe {width:995px;height:700px;}
 
-		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[
-		//]]>
+h1 {font-size: 2em;}
+h2 {font-size: 1.5em;}
+p {font-size: 1em;}
 
-	</script>
-</head>
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+  width:1000px;
+}
+
+li {
+  float: left;
+  font-family: arial;
+  font-size: 18px;
+}
+
+li a, .dropbtn {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
 
-<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>	
+li a:hover, .dropdown:hover .dropbtn {
+  background-color: red;
+}
 
-			<li><a href="#" onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a> </li>					
-			 
-			<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>
+li.dropdown {
+  display: inline-block;
+}
 
-		</ul>
-	</nav>
-	
-	<p>
-	
-	<div class="h_iframe">
-		 <iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe> 
-	</div>
+.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;
+}
 
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1;}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+</style>
+</head>
 
+<body style="font-family: arial">
 
+<h1>Watermeter - AI on the edge</h1>
+<h2>An ESP32 all in neural network recognition system</h2>
 
+<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>

+ 90 - 102
sd-card/html/index_configure.html

@@ -2,115 +2,103 @@
 	<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;
-			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;
-		}
-		
+	<style>
 
-		html, body {
-			height:100%;
-			width:100%;
-			margin:0;
-		}
-		.h_iframe iframe {
-			width:98%;
-			height:150%;
-		}
-		.h_iframe {
-			height: 150%;
-			width:98%;
-		}
-	</style>
-	<script type="text/javascript">
-		//<![CDATA[
-		//]]>
+	.h_iframe iframe {width:995px;height:760px;}
+	.h_iframe {width:995px;height:760px;}
 
-	</script>
-</head>
+	h1 {font-size: 2em;}
+	h2 {font-size: 1.5em;}
+	p {font-size: 1em;}
+
+	ul {
+	  list-style-type: none;
+	  margin: 0;
+	  padding: 0;
+	  overflow: hidden;
+	  background-color: #333;
+	  width:1000px;
+	}
+
+	li {
+	  float: left;
+	  font-family: arial;
+	  font-size: 18px;
+	}
+
+	li a, .dropbtn {
+	  display: inline-block;
+	  color: white;
+	  text-align: center;
+	  padding: 14px 16px;
+	  text-decoration: none;
+	}
 
-<body>
-	<h1>Configure watermeter</h1>
-	<nav>
-		<ul>
+	li a:hover, .dropdown:hover .dropbtn {
+	  background-color: red;
+	}
 
-			 
-			<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.dropdown {
+	  display: inline-block;
+	}
 
-			<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> 
-	</div>
+	.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;
+	}
 
+	.dropdown-content a {
+	  color: black;
+	  padding: 12px 16px;
+	  text-decoration: none;
+	  display: block;
+	  text-align: left;
+	}
 
+	.dropdown-content a:hover {background-color: #f1f1f1;}
+
+	.dropdown:hover .dropdown-content {
+	  display: block;
+	}
+	</style>	
+	<script type="text/javascript">
+		//<![CDATA[
+		//]]>
+
+	</script>
+</head>
 
+<body style="font-family: arial">
 
+<h1>Configure Watermeter</h1>
 
-</body></html>
+<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>
+	</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>

+ 1 - 1
sd-card/html/ota_page.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">

+ 49 - 8
sd-card/html/prevalue_set.html

@@ -9,13 +9,50 @@
 	</script>
 </head>
 
-<body>
-<table  style="width:100%">
+<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>

+ 7 - 5
sd-card/html/reboot_page.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 - 1
sd-card/html/upload_script.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>

+ 80 - 84
sd-card/html/wasserzaehler_roi.html

@@ -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>
-			</tr>
-			<tr>
-				Corrected Value:<p>
-				<iframe name="maincontent2" id ="maincontent2" src="/wasserzaehler.html" title="fileserver" allowfullscreen></iframe>
-			</tr>
-		</table>
-	</td>
+    <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>	
+    <td class="tg-hfl5">
+	<div w3-include-html="/wasserzaehler.html?rawvalue=true"></div>	
+	</td>	
   </tr>
+  <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>