frank_tank/data/index.html

88 lines
2.4 KiB
HTML
Raw Normal View History

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>