schmidtsi76327/ESP8266_Treppenlicht
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use fetch and update js and add some buttons for webpage

Browse Source
This commit is contained in:
Simon Schmidt 2021-07-22 03:42:51 +02:00
parent ca938ef3dd
commit 3145949020
3 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
data/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> <head>
<title>ESP8266 Treppenlicht</title> <title>ESP8266 Treppenlicht</title>
<link href="/favicon.png" rel="icon" type="image/png" sizes="10x10"> <link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
@ -10,6 +11,12 @@
<body> <body>
<div class="topbar">Treppenlicht</div> <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"> <div class="param_block">
Active Brightness: <output id="out_act_pwm" class="val_range">50</output> % Active Brightness: <output id="out_act_pwm" class="val_range">50</output> %
<div class="slider"> <div class="slider">
@ -17,7 +24,6 @@
</div> </div>
</div> </div>
<div class="param_block"> <div class="param_block">
Idle Brightness Maximum: <output id="out_idl_pwm" class="val_range">50</output> % Idle Brightness Maximum: <output id="out_idl_pwm" class="val_range">50</output> %
<label id="note">[100% == Active Brightness]</label> <label id="note">[100% == Active Brightness]</label>
@ -51,7 +57,7 @@
<div class="terminal"> <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> <input type="checkbox" id="scroll" name="scroll" value="scroll" checked>
<label for="scroll"> autoscroll </label> <label for="scroll"> autoscroll </label>
<textarea id="term">waiting for log messages ...&#10;</textarea> <textarea id="term">waiting for log messages ...&#10;</textarea>

56
data/input.js
View File

@ -1,9 +1,9 @@
let rangeValues = {}; let rangeValues = {};
let xhrUpd = new XMLHttpRequest(); let xhrUpd = new XMLHttpRequest();
xhrUpd.onreadystatechange = function(){ xhrUpd.onreadystatechange = function () {
if(xhrUpd.readyState == 4) { if (xhrUpd.readyState == 4) {
if (xhrUpd.status == 200){ if (xhrUpd.status == 200) {
console.log(xhrUpd.responseText); console.log(xhrUpd.responseText);
} }
else { else {
@ -15,9 +15,9 @@ xhrUpd.onreadystatechange = function(){
function reloadRangeValues() { function reloadRangeValues() {
let url = "/update"; let url = "/update";
// if there are scheduled updates, send them // if there are scheduled updates, send them
if(Object.keys(rangeValues).length > 0) { if (Object.keys(rangeValues).length > 0) {
let params = []; let params = [];
for(let p in rangeValues) for (let p in rangeValues)
params.push(encodeURIComponent(p) + "=" + encodeURIComponent(rangeValues[p])); params.push(encodeURIComponent(p) + "=" + encodeURIComponent(rangeValues[p]));
params = params.join("&"); params = params.join("&");
@ -28,20 +28,14 @@ function reloadRangeValues() {
rangeValues = {}; rangeValues = {};
} }
setTimeout(reloadRangeValues, 1000);
};
reloadRangeValues();
function sendRangeValue(range, val) {
rangeValues[range] = val;
console.log(rangeValues);
}; };
// connect actions to range inputs // connect actions to range inputs
function rangeToOutput(range, output) { function rangeToOutput(range, output) {
document.getElementById(range).oninput = function() { document.getElementById(range).oninput = function () {
document.getElementById(output).innerHTML = this.value; 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"); rangeToOutput("range_ldr_shw", "out_ldr_shw");
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){ xhr.onreadystatechange = function () {
if(xhr.readyState == 4) { if (xhr.readyState == 4) {
if (xhr.status == 200){ if (xhr.status == 200) {
console.log(xhr.responseText); console.log(xhr.responseText);
terminal = document.getElementById("term"); terminal = document.getElementById("term");
autoscroll = document.getElementById("scroll"); autoscroll = document.getElementById("scroll");
terminal.innerHTML += xhr.responseText; terminal.innerHTML += xhr.responseText;
if(autoscroll.checked) if (autoscroll.checked)
terminal.scrollTop = terminal.scrollHeight; terminal.scrollTop = terminal.scrollHeight;
} }
else { else {
@ -71,9 +65,23 @@ xhr.onreadystatechange = function(){
function reloadTerminal() { function reloadTerminal() {
xhr.open("POST", "/terminal", true); xhr.open("POST", "/terminal", true);
xhr.send(); xhr.send();
setTimeout(reloadTerminal, 1000);
}; };
reloadTerminal();
function clearTerminal() { document.addEventListener('DOMContentLoaded', () => {
document.getElementById("term").innerHTML = ''; 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 = '';
};

5
lib/httpserver/httpserver.cpp
View File

@ -36,7 +36,10 @@ auto HTTPServer::start() -> bool {
} }
void HTTPServer::start_apps() { 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]() { this->on("/update", HTTP_POST, [this]() {
if (args()) { if (args()) {