-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.h
90 lines (82 loc) · 3.06 KB
/
index.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Waterpool Monitor</title>
</head>
<body onload="getData();">
<h1>Waterpool monitor</h1>
<p>Temperatures: </br><span id="temp">-</span></p>
<p>Flow: <span id="flow">-</span> L/min</p>
<p>
Pump enabled: <span id="pump">-</span>
<button type="button" onclick="setData('pump', 'on')">ON</button>
<button type="button" onclick="setData('pump', 'off')">OFF</button>
</br>
Heating enabled: <span id="heat">-</span>
<button type="button" onclick="setData('heat', 'on')">ON</button>
<button type="button" onclick="setData('heat', 'off')">OFF</button>
</p>
<p>
Pump relay status: <span id="pumpRelay">-</span></br>
Heating relay status: <span id="heatRelay">-</span>
</p>
<p>Additional relays:<br/>
<span id="r3name">-</span> <span id="r3">-</span> <button type="button" onclick="setData('r3', 'on')">ON</button><button type="button" onclick="setData('r3', 'off')">OFF</button>
<br/>
<span id="r4name">-</span> <span id="r4">-</span> <button type="button" onclick="setData('r4', 'on')">ON</button><button type="button" onclick="setData('r4', 'off')">OFF</button>
</p>
<p>
<br />
<input type="button" value="Log graph" onclick="window.location.href='/graph.html'" />
<input type="button" value="Log table" onclick="window.location.href='/table.html'" />
<input type="button" value="Settings" onclick="window.location.href='/settings.html'" />
</p>
<p>Heap free: <span id="heap">-</span>
</p>
<script>
setInterval(function() {
getData();
}, 5000);
function setData(control, action) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(control).innerHTML = this.responseText;
}
};
xhttp.open("GET", control+"/"+action, true);
xhttp.send();
}
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
obj = JSON.parse(this.responseText);
var tempString = "";
for (i = 0; i < obj.temp.length; i++) {
tempString += " Temp" + (i+1) + ": " + obj.temp[i].toString().padStart(2, "0") + " °C</br>";
}
document.getElementById("temp").innerHTML = tempString;
document.getElementById("flow").innerHTML = obj.flow;
document.getElementById("pump").innerHTML = obj.pump;
document.getElementById("heat").innerHTML = obj.heat;
document.getElementById("pumpRelay").innerHTML = obj.relayPump;
document.getElementById("heatRelay").innerHTML = obj.relayHeat;
document.getElementById("r3name").innerHTML = obj.r3name;
document.getElementById("r4name").innerHTML = obj.r4name;
document.getElementById("r3").innerHTML = obj.r3;
document.getElementById("r4").innerHTML = obj.r4;
document.getElementById("heap").innerHTML = obj.heap;
}
};
xhttp.open("GET", "status", true);
xhttp.send();
}
</script>
</body>
</html>
)=====";