Add files via upload

BojanJurca · Dec 22, 2023 · d011bc2 · d011bc2
1 parent 63fa8b1
commit d011bc2
Show file tree

Hide file tree

Showing 8 changed files with 735 additions and 124 deletions.
diff --git a/html/example02.html b/html/example02.html
@@ -1,25 +1,62 @@
 <html>
-	Example 02 - static HTML page calling REST functions<br><br>
-	<hr />
-	Led is <span id='ledState'>...</span>.
-	<hr />
+	<style>
+
+		dialog[open] {
+			font-family: verdana; 
+			font-size: 28px; 
+			color: white;
+			background-color:rgb(200 0 0 / 0.90);
+			border: solid rgb(200 0 0 / 0.90) 0px;
+			border-radius: 12px;
+			/*
+			position: absolute;
+			  left: 50%;
+			  top: 50%;
+			  transform: translate(-50%, -50%);
+			*/
+		  }
+
+	</style>
+
+	<body>
+
+		Example 02 - static HTML page calling REST functions<br><br>
+		<hr />
+		Led is <span id='ledState'>...</span>.
+		<hr />
+
+		<!-- error message -->
+		<dialog id="errDialog"></dialog>
+
+	</body>
+
 	<script type='text/javascript'>
 
 		// mechanism that makes REST calls and get their replies
 		var httpClient = function () {
 			this.request = function (url, method, callback) {
 				var httpRequest = new XMLHttpRequest ();
-				var httpRequestTimeout;
+				var httpRequestTimeout = null;
+
 				httpRequest.onreadystatechange = function () {
 					// console.log (httpRequest.readyState);
 					if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
-						httpRequestTimeout = setTimeout (function () { alert ('Server did not reply (in time).'); }, 5000);
+						clearTimeout (httpRequestTimeout);
+						httpRequestTimeout = setTimeout (function () { 
+							// alert ('Server did not reply (in time).'); 
+							errorMessage ('Server did not reply (in time).');
+						}, 5000);
 					}
 					if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
 						clearTimeout (httpRequestTimeout);
-						console.log (httpRequest.responseText);
-						if (httpRequest.status == 200) callback (httpRequest.responseText); // 200 = OK
-						else alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
+						switch (httpRequest.status) {
+							case 200: 	callback (httpRequest.responseText); // 200 = OK
+										break;
+							case 0:		break;
+							default: 	// alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
+										errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
+										break;
+						}
 					}
 				}
 				httpRequest.open (method, url, true);
@@ -34,5 +71,16 @@
 			document.getElementById('ledState').innerText = (JSON.parse (json).builtInLed);
 		});
 
+		// error message
+		var errorMessageTimeout = null;
+		function errorMessage (msg) {
+			clearTimeout (errorMessageTimeout);
+			document.getElementById ('errDialog').textContent = msg;
+			document.getElementById ('errDialog').showModal ();
+			errorMessageTimeout = setTimeout (function () {
+				document.getElementById ('errDialog').close ();
+			}, 3000);				
+		}
+
 	</script>
 </html>
diff --git a/html/example03.html b/html/example03.html
@@ -1,8 +1,36 @@
 <html>
-	Example 03 - HTML page interacting with ESP32<br><br>
-	<hr />
-	Led: <input type='checkbox' disabled id='ledSwitch' onClick='turnLed (this.checked)'>
-	<hr />
+
+	<style>
+
+		dialog[open] {
+			font-family: verdana; 
+			font-size: 28px; 
+			color: white;
+			background-color:rgb(200 0 0 / 0.90);
+			border: solid rgb(200 0 0 / 0.90) 0px;
+			border-radius: 12px;
+			/*
+			position: absolute;
+			  left: 50%;
+			  top: 50%;
+			  transform: translate(-50%, -50%);
+			*/
+		  }
+
+	</style>
+
+	<body>
+
+		Example 03 - HTML page interacting with ESP32<br><br>
+		<hr />
+		Led: <input type='checkbox' disabled id='ledSwitch' onClick='turnLed (this.checked)'>
+		<hr />
+
+		<!-- error message -->
+		<dialog id="errDialog"></dialog>
+
+	</body>
+
 	<script type='text/javascript'>
 
 		// mechanism that makes REST calls and get their replies
@@ -16,17 +44,19 @@
 					if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
 						clearTimeout (httpRequestTimeout);
 						httpRequestTimeout = setTimeout (function () { 
-							alert ('Server did not reply (in time).'); 
-							// errorMessage ('Server did not reply (in time).');
+							// alert ('Server did not reply (in time).'); 
+							errorMessage ('Server did not reply (in time).');
 						}, 5000);
 					}
 					if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
 						clearTimeout (httpRequestTimeout);
-						if (httpRequest.status == 200) {
-							callback (httpRequest.responseText); // 200 = OK
-						} else {
-							alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
-							// errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
+						switch (httpRequest.status) {
+							case 200: 	callback (httpRequest.responseText); // 200 = OK
+										break;
+							case 0:		break;
+							default: 	// alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
+										errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
+										break;
 						}
 					}
 				}
@@ -35,7 +65,6 @@
 			}
 		}
 
-		var client = new httpClient ();
 
 		// make a REST call and initialize/populate this page
 		var client = new httpClient ();
@@ -53,5 +82,16 @@
 			});
 		}
 
+		// error message
+		var errorMessageTimeout = null;
+		function errorMessage (msg) {
+			clearTimeout (errorMessageTimeout);
+			document.getElementById ('errDialog').textContent = msg;
+			document.getElementById ('errDialog').showModal ();
+			errorMessageTimeout = setTimeout (function () {
+				document.getElementById ('errDialog').close ();
+			}, 3000);				
+		}
+
 	</script>
 </html>
diff --git a/html/example04.html b/html/example04.html
@@ -19,13 +19,32 @@
 		.slider.round {border-radius: 34px}
 		.slider.round:before {border-radius: 50%}
 		input:disabled+.slider {background-color: #aaa}
+
+		dialog[open] {
+			font-family: verdana; 
+			font-size: 28px; 
+			color: white;
+			background-color:rgb(200 0 0 / 0.90);
+			border: solid rgb(200 0 0 / 0.90) 0px;
+			border-radius: 12px;
+			/*
+			position: absolute;
+			  left: 50%;
+			  top: 50%;
+			  transform: translate(-50%, -50%);
+			*/
+		  }
+
 	</style>
 
 	<body>
 
 		<br><h1>Example 04 - user interface with style</h1>
-
 		<hr />
+
+		<!-- error message -->
+		<dialog id="errDialog"></dialog>
+
 		<div class='d1'>
 			<div class='d2'>&nbsp;Led</div>
 			<div class='d3'>
@@ -36,38 +55,50 @@
 
 		<script type='text/javascript'>
 
-		// mechanism that makes REST calls and get their replies
-		var httpClient = function () {
-			this.request = function (url, method, callback) {
-				var httpRequest = new XMLHttpRequest ();
-				var httpRequestTimeout = null;
-
-				httpRequest.onreadystatechange = function () {
-					// console.log (httpRequest.readyState);
-					if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
-						clearTimeout (httpRequestTimeout);
-						httpRequestTimeout = setTimeout (function () { 
-							alert ('Server did not reply (in time).'); 
-							// errorMessage ('Server did not reply (in time).');
-						}, 5000);
-					}
-					if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
-						clearTimeout (httpRequestTimeout);
-						if (httpRequest.status == 200) {
-							callback (httpRequest.responseText); // 200 = OK
-						} else {
-							alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
-							// errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
+			// mechanism that makes REST calls and get their replies
+			var httpClient = function () {
+				this.request = function (url, method, callback) {
+					var httpRequest = new XMLHttpRequest ();
+					var httpRequestTimeout = null;
+
+					httpRequest.onreadystatechange = function () {
+						// console.log (httpRequest.readyState);
+						if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
+							clearTimeout (httpRequestTimeout);
+							httpRequestTimeout = setTimeout (function () { 
+								// alert ('Server did not reply (in time).'); 
+								errorMessage ('Server did not reply (in time).');
+							}, 5000);
+						}
+						if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
+							clearTimeout (httpRequestTimeout);
+							switch (httpRequest.status) {
+								case 200: 	callback (httpRequest.responseText); // 200 = OK
+											break;
+								case 0:		break;
+								default: 	// alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
+											errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
+											break;
+							}
 						}
 					}
+					httpRequest.open (method, url, true);
+					httpRequest.send (null);
 				}
-				httpRequest.open (method, url, true);
-				httpRequest.send (null);
 			}
-		}
 
-		var client = new httpClient ();
+			var client = new httpClient ();
 
+			// error message
+			var errorMessageTimeout = null;
+			function errorMessage (msg) {
+				clearTimeout (errorMessageTimeout);
+				document.getElementById ('errDialog').textContent = msg;
+				document.getElementById ('errDialog').showModal ();
+				errorMessageTimeout = setTimeout (function () {
+					document.getElementById ('errDialog').close ();
+				}, 3000);				
+			}
 
 			// make a REST call and initialize/populate this page
 			var client = new httpClient ();