2022-10-28 05:48:02 +00:00
|
|
|
<!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 />
|
|
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
<input type="range" id="temperature" name="temperature" min="90" max="120" onchange="setTemperature(this.value)">
|
2022-10-28 05:48:02 +00:00
|
|
|
|
|
|
|
|
<br />
|
2022-11-01 05:08:29 +00:00
|
|
|
<button type="button" class="btn btn-success btn-lg" id="toSlider">Set to [??]</button>
|
2022-10-28 05:48:02 +00:00
|
|
|
<br />
|
|
|
|
|
<br />
|
2022-11-01 05:08:29 +00:00
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-danger btn-sm" id="initialize">Initialize to 90</button>
|
2022-10-28 05:48:02 +00:00
|
|
|
</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>
|
|
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
var temperature = 90;
|
|
|
|
|
var timer = null;
|
2022-10-28 05:48:02 +00:00
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
function setTemperature(temp) {
|
|
|
|
|
temperature = temp;
|
|
|
|
|
$("#toSlider").text("Set Temperature: " + temperature)
|
|
|
|
|
console.log("Set Temperature: " + temperature);
|
2022-10-28 05:48:02 +00:00
|
|
|
}
|
|
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
function action(newTemperature) {
|
|
|
|
|
$("#toSlider").prop("disabled", true);
|
|
|
|
|
$("#temperature").prop("disabled", true);
|
|
|
|
|
console.log(newTemperature);
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
$("#toSlider").prop("disabled", false);
|
|
|
|
|
$("#temperature").prop("disabled", false);
|
2022-10-28 05:48:02 +00:00
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
}, 3000);
|
2022-10-28 05:48:02 +00:00
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
let rotations = newTemperature - 90; //base at 0;
|
2022-10-28 05:48:02 +00:00
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
$.post("/setTemperature", {
|
|
|
|
|
newTemperature,
|
|
|
|
|
rotations,
|
|
|
|
|
});
|
2022-10-28 05:48:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(() => {
|
2022-11-01 05:08:29 +00:00
|
|
|
$("#to90").on("click", () => {
|
|
|
|
|
action(90);
|
|
|
|
|
setTemperature(90);
|
|
|
|
|
document.getElementById("temperature").value = temperature;
|
2022-10-28 05:48:02 +00:00
|
|
|
});
|
2022-11-01 05:08:29 +00:00
|
|
|
$("#toSlider").on("click", () => {
|
|
|
|
|
action(temperature);
|
2022-10-28 05:48:02 +00:00
|
|
|
});
|
2022-11-01 05:08:29 +00:00
|
|
|
$("#initialize").on("click", () => {
|
|
|
|
|
$.post("/initialize");
|
|
|
|
|
})
|
|
|
|
|
|
2022-10-28 05:48:02 +00:00
|
|
|
|
|
|
|
|
|
2022-11-01 05:08:29 +00:00
|
|
|
document.getElementById("temperature").value = temperature;
|
|
|
|
|
setTemperature(temperature);
|
2022-10-28 05:48:02 +00:00
|
|
|
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
