use fetch and update js and add some buttons for webpage
This commit is contained in:
parent
ca938ef3dd
commit
3145949020
@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<head>
|
||||
<title>ESP8266 Treppenlicht</title>
|
||||
<link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
|
||||
@ -10,6 +11,12 @@
|
||||
<body>
|
||||
<div class="topbar">Treppenlicht</div>
|
||||
|
||||
<div class="param_block">
|
||||
<input type="button" class="control" data-action="s_oben" value="sensor_oben">
|
||||
<input type="button" class="control" data-action="s_unten" value="sensor_unten">
|
||||
<input type="button" class="control" data-action="on_off" value="on_off">
|
||||
</div>
|
||||
|
||||
<div class="param_block">
|
||||
Active Brightness: <output id="out_act_pwm" class="val_range">50</output> %
|
||||
<div class="slider">
|
||||
@ -17,7 +24,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="param_block">
|
||||
Idle Brightness Maximum: <output id="out_idl_pwm" class="val_range">50</output> %
|
||||
<label id="note">[100% == Active Brightness]</label>
|
||||
@ -51,7 +57,7 @@
|
||||
|
||||
|
||||
<div class="terminal">
|
||||
<input type="button" id="clear_term" value="clear" onclick="clearTerminal();">
|
||||
<input type="button" id="clear_term" value="clear">
|
||||
<input type="checkbox" id="scroll" name="scroll" value="scroll" checked>
|
||||
<label for="scroll"> autoscroll </label>
|
||||
<textarea id="term">waiting for log messages ... </textarea>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
let rangeValues = {};
|
||||
let xhrUpd = new XMLHttpRequest();
|
||||
|
||||
xhrUpd.onreadystatechange = function(){
|
||||
if(xhrUpd.readyState == 4) {
|
||||
if (xhrUpd.status == 200){
|
||||
xhrUpd.onreadystatechange = function () {
|
||||
if (xhrUpd.readyState == 4) {
|
||||
if (xhrUpd.status == 200) {
|
||||
console.log(xhrUpd.responseText);
|
||||
}
|
||||
else {
|
||||
@ -15,9 +15,9 @@ xhrUpd.onreadystatechange = function(){
|
||||
function reloadRangeValues() {
|
||||
let url = "/update";
|
||||
// if there are scheduled updates, send them
|
||||
if(Object.keys(rangeValues).length > 0) {
|
||||
if (Object.keys(rangeValues).length > 0) {
|
||||
let params = [];
|
||||
for(let p in rangeValues)
|
||||
for (let p in rangeValues)
|
||||
params.push(encodeURIComponent(p) + "=" + encodeURIComponent(rangeValues[p]));
|
||||
params = params.join("&");
|
||||
|
||||
@ -28,20 +28,14 @@ function reloadRangeValues() {
|
||||
rangeValues = {};
|
||||
}
|
||||
|
||||
setTimeout(reloadRangeValues, 1000);
|
||||
};
|
||||
reloadRangeValues();
|
||||
|
||||
function sendRangeValue(range, val) {
|
||||
rangeValues[range] = val;
|
||||
console.log(rangeValues);
|
||||
};
|
||||
|
||||
// connect actions to range inputs
|
||||
function rangeToOutput(range, output) {
|
||||
document.getElementById(range).oninput = function() {
|
||||
document.getElementById(range).oninput = function () {
|
||||
document.getElementById(output).innerHTML = this.value;
|
||||
sendRangeValue(this.id, this.value);
|
||||
// add to pending range changes
|
||||
rangeValues[range] = val;
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,15 +46,15 @@ rangeToOutput("range_tim_ldr", "out_tim_ldr");
|
||||
rangeToOutput("range_ldr_shw", "out_ldr_shw");
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.onreadystatechange = function(){
|
||||
if(xhr.readyState == 4) {
|
||||
if (xhr.status == 200){
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status == 200) {
|
||||
console.log(xhr.responseText);
|
||||
terminal = document.getElementById("term");
|
||||
autoscroll = document.getElementById("scroll");
|
||||
terminal.innerHTML += xhr.responseText;
|
||||
if(autoscroll.checked)
|
||||
if (autoscroll.checked)
|
||||
terminal.scrollTop = terminal.scrollHeight;
|
||||
}
|
||||
else {
|
||||
@ -71,9 +65,23 @@ xhr.onreadystatechange = function(){
|
||||
function reloadTerminal() {
|
||||
xhr.open("POST", "/terminal", true);
|
||||
xhr.send();
|
||||
setTimeout(reloadTerminal, 1000);
|
||||
};
|
||||
reloadTerminal();
|
||||
function clearTerminal() {
|
||||
document.getElementById("term").innerHTML = '';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setInterval(reloadTerminal, 1000);
|
||||
setInterval(reloadRangeValues, 1000);
|
||||
});
|
||||
|
||||
// use data- attributes for action
|
||||
document.querySelectorAll('.control').forEach((button) => {
|
||||
button.onclick = () => {
|
||||
fetch(`/action=${button.dataset.action}`)
|
||||
.then(response => console.log(response))
|
||||
.catch(error => console.log('Error:', error));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.querySelector('#clear_term').onclick = () => {
|
||||
document.querySelector("#term").innerHTML = '';
|
||||
};
|
||||
@ -36,7 +36,10 @@ auto HTTPServer::start() -> bool {
|
||||
}
|
||||
|
||||
void HTTPServer::start_apps() {
|
||||
// application handler
|
||||
this->on("/action=s_oben", [this]() {
|
||||
// treppe->setsensor("oben")
|
||||
send(200, "text/plain", "accepted");
|
||||
});
|
||||
|
||||
this->on("/update", HTTP_POST, [this]() {
|
||||
if (args()) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user