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">
Active Brightness: <output id="out_act_pwm" class="val_range">50</output> %
<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>
@ -28,7 +28,7 @@
Idle Brightness Maximum: <output id="out_idl_pwm" class="val_range">50</output> %
<label id="note">[100% == Active Brightness]</label>
<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>
<label id="note">idle brightness gets controlled via LDR measurments</label>
</div>
@ -37,21 +37,21 @@
Time per stair [ms]: <output id="out_tim_sta" class="val_range">300</output> ms
<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 class="param_block">
Time LDR [ms]: <output id="out_tim_ldr" class="val_range">500</output> ms
<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 class="param_block">
LDR Schwelle [%]: <output id="out_ldr_shw" class="val_range">50</output> %
<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>

73
data/input.js
View File

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