103 lines
2.8 KiB
HTML
103 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<title>ESP8266 Servo Control</title>
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container jumbotron text-center">
|
|
<h1 class="display-4">Water Heater Control</h1>
|
|
<br />
|
|
|
|
<h2 id="currentSeconds" class="display-4">Number of Seconds: 5</h2>
|
|
<input type="range" id="seconds" name="seconds" min="1" max="9" onchange="setSeconds(this.value)">
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<button type="button" class="btn btn-primary btn-lg" id="down">Down</button>
|
|
<button type="button" class="btn btn-danger btn-lg" id="stop">Stop</button>
|
|
<button type="button" class="btn btn-primary btn-lg" id="up">Up</button>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<h2 id="currentAngle" class="display-4">Current Action: STOPPED</h2>
|
|
</div>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script
|
|
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
|
|
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script>
|
|
|
|
var seconds = 5;
|
|
var currentTimeout = null;
|
|
|
|
const DOWN_ANGLE = 150;
|
|
const STOP_ANGLE = 160;
|
|
const UP_ANGLE = 170;
|
|
|
|
function setSeconds(to) {
|
|
seconds = to;
|
|
$("#currentSeconds").text("Number of Seconds: " + seconds);
|
|
}
|
|
|
|
|
|
function action(angle, direction) {
|
|
console.log(angle, direction)
|
|
if (currentTimeout !== null) {
|
|
console.log(currentTimeout)
|
|
clearTimeout(currentTimeout);
|
|
}
|
|
|
|
$.post("/angle", {
|
|
angle: angle,
|
|
});
|
|
$("#currentAngle").text("Current Action: " + direction);
|
|
|
|
|
|
|
|
if (angle == STOP_ANGLE){
|
|
$("#down").prop("disabled", false)
|
|
$("#up").prop("disabled", false)
|
|
} else {
|
|
$("#down").prop("disabled", true)
|
|
$("#up").prop("disabled", true)
|
|
currentTimeout = setTimeout(() => {
|
|
action(STOP_ANGLE, "STOPPED");
|
|
}, seconds * 1000);
|
|
}
|
|
}
|
|
|
|
|
|
$(document).ready(() => {
|
|
$("#down").on("click", () => {
|
|
action(DOWN_ANGLE, "decreasing")
|
|
});
|
|
$("#stop").on("click", () => {
|
|
action(STOP_ANGLE, "STOPPED")
|
|
});
|
|
$("#up").on("click", () => {
|
|
action(UP_ANGLE, "increasing")
|
|
});
|
|
|
|
action(STOP_ANGLE, "STOPPED")
|
|
|
|
setSeconds(seconds);
|
|
document.getElementById("seconds").value = seconds;
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|