schmidtsi76327
/
ESP8266_Treppenlicht
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 12 Wiki Activity
Browse Source

use fetch and update js and add some buttons for webpage

tags/v1.0.0
Simon Schmidt 2 years ago
parent
ca938ef3dd
commit
3145949020
3 changed files with 45 additions and 28 deletions
Split View Show Diff Stats
  1. 9
    3
      data/index.html
  2. 32
    24
      data/input.js
  3. 4
    1
      lib/httpserver/httpserver.cpp

+ 9
- 3
data/index.html View File

@@ -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 ...&#10;</textarea>

+ 32
- 24
data/input.js View File

@@ -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 = '';
};

+ 4
- 1
lib/httpserver/httpserver.cpp View File

@@ -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()) {

Write Preview
Loading…
Cancel
Save