Skip to content

Commit d011bc2

Browse files
BojanJurcaBojanJurca
authored
Add files via upload
1 parent 63fa8b1 commit d011bc2

File tree

8 files changed

+735
-124
lines changed

8 files changed

+735
-124
lines changed

‎html/example02.html‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,62 @@
11
<html>
2-
Example 02 - static HTML page calling REST functions<br><br>
3-
<hr />
4-
Led is <span id='ledState'>...</span>.
5-
<hr />
2+
<style>
3+
4+
dialog[open] {
5+
font-family: verdana;
6+
font-size: 28px;
7+
color: white;
8+
background-color:rgb(200 0 0 / 0.90);
9+
border: solid rgb(200 0 0 / 0.90) 0px;
10+
border-radius: 12px;
11+
/*
12+
position: absolute;
13+
left: 50%;
14+
top: 50%;
15+
transform: translate(-50%, -50%);
16+
*/
17+
}
18+
19+
</style>
20+
21+
<body>
22+
23+
Example 02 - static HTML page calling REST functions<br><br>
24+
<hr />
25+
Led is <span id='ledState'>...</span>.
26+
<hr />
27+
28+
<!-- error message -->
29+
<dialog id="errDialog"></dialog>
30+
31+
</body>
32+
633
<script type='text/javascript'>
734

835
// mechanism that makes REST calls and get their replies
936
var httpClient = function () {
1037
this.request = function (url, method, callback) {
1138
var httpRequest = new XMLHttpRequest ();
12-
var httpRequestTimeout;
39+
var httpRequestTimeout = null;
40+
1341
httpRequest.onreadystatechange = function () {
1442
// console.log (httpRequest.readyState);
1543
if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
16-
httpRequestTimeout = setTimeout (function () { alert ('Server did not reply (in time).'); }, 5000);
44+
clearTimeout (httpRequestTimeout);
45+
httpRequestTimeout = setTimeout (function () {
46+
// alert ('Server did not reply (in time).');
47+
errorMessage ('Server did not reply (in time).');
48+
}, 5000);
1749
}
1850
if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
1951
clearTimeout (httpRequestTimeout);
20-
console.log (httpRequest.responseText);
21-
if (httpRequest.status == 200) callback (httpRequest.responseText); // 200 = OK
22-
else alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
52+
switch (httpRequest.status) {
53+
case 200: callback (httpRequest.responseText); // 200 = OK
54+
break;
55+
case 0: break;
56+
default: // alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
57+
errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
58+
break;
59+
}
2360
}
2461
}
2562
httpRequest.open (method, url, true);
@@ -34,5 +71,16 @@
3471
document.getElementById('ledState').innerText = (JSON.parse (json).builtInLed);
3572
});
3673

74+
// error message
75+
var errorMessageTimeout = null;
76+
function errorMessage (msg) {
77+
clearTimeout (errorMessageTimeout);
78+
document.getElementById ('errDialog').textContent = msg;
79+
document.getElementById ('errDialog').showModal ();
80+
errorMessageTimeout = setTimeout (function () {
81+
document.getElementById ('errDialog').close ();
82+
}, 3000);
83+
}
84+
3785
</script>
3886
</html>

‎html/example03.html‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,36 @@
11
<html>
2-
Example 03 - HTML page interacting with ESP32<br><br>
3-
<hr />
4-
Led: <input type='checkbox' disabled id='ledSwitch' onClick='turnLed (this.checked)'>
5-
<hr />
2+
3+
<style>
4+
5+
dialog[open] {
6+
font-family: verdana;
7+
font-size: 28px;
8+
color: white;
9+
background-color:rgb(200 0 0 / 0.90);
10+
border: solid rgb(200 0 0 / 0.90) 0px;
11+
border-radius: 12px;
12+
/*
13+
position: absolute;
14+
left: 50%;
15+
top: 50%;
16+
transform: translate(-50%, -50%);
17+
*/
18+
}
19+
20+
</style>
21+
22+
<body>
23+
24+
Example 03 - HTML page interacting with ESP32<br><br>
25+
<hr />
26+
Led: <input type='checkbox' disabled id='ledSwitch' onClick='turnLed (this.checked)'>
27+
<hr />
28+
29+
<!-- error message -->
30+
<dialog id="errDialog"></dialog>
31+
32+
</body>
33+
634
<script type='text/javascript'>
735

836
// mechanism that makes REST calls and get their replies
@@ -16,17 +44,19 @@
1644
if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
1745
clearTimeout (httpRequestTimeout);
1846
httpRequestTimeout = setTimeout (function () {
19-
alert ('Server did not reply (in time).');
20-
// errorMessage ('Server did not reply (in time).');
47+
// alert ('Server did not reply (in time).');
48+
errorMessage ('Server did not reply (in time).');
2149
}, 5000);
2250
}
2351
if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
2452
clearTimeout (httpRequestTimeout);
25-
if (httpRequest.status == 200) {
26-
callback (httpRequest.responseText); // 200 = OK
27-
} else {
28-
alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
29-
// errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
53+
switch (httpRequest.status) {
54+
case 200: callback (httpRequest.responseText); // 200 = OK
55+
break;
56+
case 0: break;
57+
default: // alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
58+
errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
59+
break;
3060
}
3161
}
3262
}
@@ -35,7 +65,6 @@
3565
}
3666
}
3767

38-
var client = new httpClient ();
3968

4069
// make a REST call and initialize/populate this page
4170
var client = new httpClient ();
@@ -53,5 +82,16 @@
5382
});
5483
}
5584

85+
// error message
86+
var errorMessageTimeout = null;
87+
function errorMessage (msg) {
88+
clearTimeout (errorMessageTimeout);
89+
document.getElementById ('errDialog').textContent = msg;
90+
document.getElementById ('errDialog').showModal ();
91+
errorMessageTimeout = setTimeout (function () {
92+
document.getElementById ('errDialog').close ();
93+
}, 3000);
94+
}
95+
5696
</script>
5797
</html>

‎html/example04.html‎

Lines changed: 58 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,32 @@
1919
.slider.round {border-radius: 34px}
2020
.slider.round:before {border-radius: 50%}
2121
input:disabled+.slider {background-color: #aaa}
22+
23+
dialog[open] {
24+
font-family: verdana;
25+
font-size: 28px;
26+
color: white;
27+
background-color:rgb(200 0 0 / 0.90);
28+
border: solid rgb(200 0 0 / 0.90) 0px;
29+
border-radius: 12px;
30+
/*
31+
position: absolute;
32+
left: 50%;
33+
top: 50%;
34+
transform: translate(-50%, -50%);
35+
*/
36+
}
37+
2238
</style>
2339

2440
<body>
2541

2642
<br><h1>Example 04 - user interface with style</h1>
27-
2843
<hr />
44+
45+
<!-- error message -->
46+
<dialog id="errDialog"></dialog>
47+
2948
<div class='d1'>
3049
<div class='d2'>&nbsp;Led</div>
3150
<div class='d3'>
@@ -36,38 +55,50 @@
3655

3756
<script type='text/javascript'>
3857

39-
// mechanism that makes REST calls and get their replies
40-
var httpClient = function () {
41-
this.request = function (url, method, callback) {
42-
var httpRequest = new XMLHttpRequest ();
43-
var httpRequestTimeout = null;
44-
45-
httpRequest.onreadystatechange = function () {
46-
// console.log (httpRequest.readyState);
47-
if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
48-
clearTimeout (httpRequestTimeout);
49-
httpRequestTimeout = setTimeout (function () {
50-
alert ('Server did not reply (in time).');
51-
// errorMessage ('Server did not reply (in time).');
52-
}, 5000);
53-
}
54-
if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
55-
clearTimeout (httpRequestTimeout);
56-
if (httpRequest.status == 200) {
57-
callback (httpRequest.responseText); // 200 = OK
58-
} else {
59-
alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
60-
// errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
58+
// mechanism that makes REST calls and get their replies
59+
var httpClient = function () {
60+
this.request = function (url, method, callback) {
61+
var httpRequest = new XMLHttpRequest ();
62+
var httpRequestTimeout = null;
63+
64+
httpRequest.onreadystatechange = function () {
65+
// console.log (httpRequest.readyState);
66+
if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
67+
clearTimeout (httpRequestTimeout);
68+
httpRequestTimeout = setTimeout (function () {
69+
// alert ('Server did not reply (in time).');
70+
errorMessage ('Server did not reply (in time).');
71+
}, 5000);
72+
}
73+
if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
74+
clearTimeout (httpRequestTimeout);
75+
switch (httpRequest.status) {
76+
case 200: callback (httpRequest.responseText); // 200 = OK
77+
break;
78+
case 0: break;
79+
default: // alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
80+
errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
81+
break;
82+
}
6183
}
6284
}
85+
httpRequest.open (method, url, true);
86+
httpRequest.send (null);
6387
}
64-
httpRequest.open (method, url, true);
65-
httpRequest.send (null);
6688
}
67-
}
6889

69-
var client = new httpClient ();
90+
var client = new httpClient ();
7091

92+
// error message
93+
var errorMessageTimeout = null;
94+
function errorMessage (msg) {
95+
clearTimeout (errorMessageTimeout);
96+
document.getElementById ('errDialog').textContent = msg;
97+
document.getElementById ('errDialog').showModal ();
98+
errorMessageTimeout = setTimeout (function () {
99+
document.getElementById ('errDialog').close ();
100+
}, 3000);
101+
}
71102

72103
// make a REST call and initialize/populate this page
73104
var client = new httpClient ();

0 commit comments

Comments
 (0)