69 lines
2.1 KiB
C
69 lines
2.1 KiB
C
// HTML web page
|
|
const char index_html[] = R"rawliteral(
|
|
<!DOCTYPE HTML><html>
|
|
<head>
|
|
<title>Greenhousino Irrigation System</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
|
|
.button {
|
|
padding: 10px 20px;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
outline: none;
|
|
color: #fff;
|
|
background-color: #2f4468;
|
|
border: none;
|
|
border-radius: 5px;
|
|
box-shadow: 0 6px #999;
|
|
cursor: pointer;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
.button:hover {background-color: #1f2e45}
|
|
.button:active {
|
|
background-color: #1f2e45;
|
|
box-shadow: 0 4px #666;
|
|
transform: translateY(2px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Greenhousino Irrigation System</h1>
|
|
Pump state: <span id="state"></span><br/><br/>
|
|
<button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">PUMP!</button><br/><br/>
|
|
<button class="button" onmouseup="toggleCheckbox('on');" ontouchend="toggleCheckbox('on');">On!</button><br/><br/>
|
|
<button class="button" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">Off!</button><br/><br/>
|
|
<script>
|
|
setInterval(getState, 500);
|
|
function toggleCheckbox(x) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/" + x, true);
|
|
xhr.send();
|
|
}
|
|
|
|
function getState() {
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState === 4) {
|
|
displayState(xhr.response);
|
|
}
|
|
}
|
|
|
|
xhr.open("GET","/state", true);
|
|
xhr.send();
|
|
}
|
|
|
|
function displayState(state) {
|
|
document.getElementById("state").innerHTML = state;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>)rawliteral"; |