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
Unified 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

<!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">
<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">
</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>




<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>

+ 32
- 24
data/input.js View File

let rangeValues = {}; let rangeValues = {};
let xhrUpd = new XMLHttpRequest(); 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); console.log(xhrUpd.responseText);
} }
else { else {
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("&");


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;
} }
} }


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(){
if(xhr.readyState == 4) {
if (xhr.status == 200){
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
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 {
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.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

} }


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

Write Preview
Loading…
Cancel
Save