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

change terminal reload to fetch API, use promises, DOMContentLoaded etc.

Browse Source
This commit is contained in:
Simon Schmidt 2021-07-22 21:49:22 +02:00
parent 6807d0f0af
commit 7c770a7802
2 changed files with 53 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
data/index.html
View File

@ -20,7 +20,7 @@
<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">
<input type="range" class="regler" id="range_act_pwm" min="0" max="100" value="50"> <input type="range" class="regler" id="range_act_pwm" data-output="out_act_pwm" min="0" max="100" value="50">
</div> </div>
</div> </div>
@ -28,7 +28,7 @@
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="slider"> <div class="slider">
<input type="range" class="regler" id="range_idl_pwm" min="0" max="100" value="50"> <input type="range" class="regler" id="range_idl_pwm" data-output="out_idl_pwm" min="0" max="100" value="50">
</div> </div>
<label id="note">idle brightness gets controlled via LDR measurments</label> <label id="note">idle brightness gets controlled via LDR measurments</label>
</div> </div>
@ -37,21 +37,21 @@
Time per stair [ms]: <output id="out_tim_sta" class="val_range">300</output> ms Time per stair [ms]: <output id="out_tim_sta" class="val_range">300</output> ms
<div class="slider"> <div class="slider">
<input type="range" class="regler" id="range_tim_sta" min="0" max="5000" value="300"> <input type="range" class="regler" id="range_tim_sta" data-output="out_tim_sta" min="0" max="5000" value="300">
</div> </div>
</div> </div>
<div class="param_block"> <div class="param_block">
Time LDR [ms]: <output id="out_tim_ldr" class="val_range">500</output> ms Time LDR [ms]: <output id="out_tim_ldr" class="val_range">500</output> ms
<div class="slider"> <div class="slider">
<input type="range" class="regler" id="range_tim_ldr" min="0" max="5000" value="500"> <input type="range" class="regler" id="range_tim_ldr" data-output="out_tim_ldr" min="0" max="5000" value="500">
</div> </div>
</div> </div>
<div class="param_block"> <div class="param_block">
LDR Schwelle [%]: <output id="out_ldr_shw" class="val_range">50</output> % LDR Schwelle [%]: <output id="out_ldr_shw" class="val_range">50</output> %
<div class="slider"> <div class="slider">
<input type="range" class="regler" id="range_ldr_shw" min="0" max="100" value="50"> <input type="range" class="regler" id="range_ldr_shw" data-output="out_ldr_shw" min="0" max="100" value="50">
</div> </div>
</div> </div>

73
data/input.js
View File

@ -4,10 +4,10 @@ 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: ", xhrUpd.responseText);
} }
else { else {
console.log("status:", xhrUpd.status); console.log("xhrUpd: status=", xhrUpd.status);
} }
} }
} }
@ -30,50 +30,35 @@ function reloadRangeValues() {
}; };
// connect actions to range inputs function reloadTerminal() {
function rangeToOutput(range, output) { const terminal = document.querySelector("#term");
document.getElementById(range).oninput = function () { const autoscroll = document.querySelector("#scroll");
document.getElementById(output).innerHTML = this.value;
// add to pending range changes
rangeValues[this.id] = this.value;
}
}
rangeToOutput("range_act_pwm", "out_act_pwm"); fetch(`/terminal`, {
rangeToOutput("range_idl_pwm", "out_idl_pwm"); method: 'POST',
rangeToOutput("range_tim_sta", "out_tim_sta"); headers: {
rangeToOutput("range_tim_ldr", "out_tim_ldr"); 'Content-Type': 'application/x-www-form-urlencoded',
rangeToOutput("range_ldr_shw", "out_ldr_shw"); },
body: ''
let xhr = new XMLHttpRequest(); })
.then(response => response.text())
xhr.onreadystatechange = function () { .then(data => {
if (xhr.readyState == 4) { if(data.length > 0) {
if (xhr.status == 200) { terminal.innerHTML += data;
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; terminal.scrollTop = terminal.scrollHeight;
} }
else { })
console.log("status:", xhr.status); .catch(error => console.log('Error:', error));
}
}
}
function reloadTerminal() {
xhr.open("POST", "/terminal", true);
xhr.send();
}; };
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
setInterval(reloadTerminal, 1000); setInterval(reloadTerminal, 1000);
setInterval(reloadRangeValues, 1000); setInterval(reloadRangeValues, 1000);
});
// use data- attributes for action
document.querySelectorAll('.control').forEach((button) => { // use data- attributes for action
document.querySelectorAll('.control').forEach((button) => {
button.onclick = () => { button.onclick = () => {
fetch(`/action`, { fetch(`/action`, {
method: 'POST', method: 'POST',
@ -85,9 +70,19 @@ document.querySelectorAll('.control').forEach((button) => {
.then(response => console.log(response)) .then(response => console.log(response))
.catch(error => console.log('Error:', error)); .catch(error => console.log('Error:', error));
} }
});
document.querySelectorAll('.regler').forEach((regler) => {
regler.oninput = () => {
document.querySelector(`#${regler.dataset.output}`).innerHTML = regler.value;
rangeValues[regler.id] = regler.value;
}
});
document.querySelector('#clear_term').onclick = () => {
document.querySelector("#term").innerHTML = '';
};
}); });
document.querySelector('#clear_term').onclick = () => {
document.querySelector("#term").innerHTML = '';
};