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

update webserver html,js,css

Browse Source
This commit is contained in:
Simon Schmidt 2021-07-05 18:15:57 +02:00
parent f62a18fe66
commit 2754bd5247
5 changed files with 117 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
data/index.html
View File

@ -3,61 +3,46 @@
<head> <head>
<title>ESP8266 Treppenlicht</title> <title>ESP8266 Treppenlicht</title>
<!-- main style sheet -->
<link href="/favicon.png" rel="icon" type="image/png" sizes="10x10"> <link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
<link href="/style.css" rel="stylesheet" type="text/css"> <link href="/style.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<div class="kopfzeile" style="text-align: center;"> <div class="topbar">Treppenlicht</div>
<b>Treppenlicht</b>
<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"
oninput="amount1.value=helligkeit.value">
</div>
</div> </div>
<div class="ueberschrift">
Helligkeit <div class="param_block">
<!--<label id="label_pwm"> Idle Brightness: <output id="out_idl_pwm" class="val_range">50</output> %
</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="helligkeit" name="rangeInput" min="0" max="100" value="50" oninput="amount2.value=helligkeit_dunkel.value">
oninput="amount1.value=helligkeit.value"> </div>
<br>
<output name="amount1" id="amount1" for="helligkeit">50</output>
</div>
</div>
<div class="ueberschrift">
Helligkeit bei Dunkelheit
<!--<label id="label_pwm_dark">
</label>-->
<div class="slider">
<input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50"
oninput="amount2.value=helligkeit_dunkel.value">
<br>
<output name="amount2" id="amount2" for="helligkeit_dunkel">50</output>
</div>
</div> </div>
<div class="ueberschrift"> <div class="param_block">
Laufgeschwindigkeit Time per stair: <output id="out_tim_sta" class="val_range">50</output> %
<!--<label id="label_geschwindigkeit">
</label>--> <div class="slider">
<div class="slider"> <input type="range" class="regler" id="range_tim_sta" min="0" max="100" value="50"
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50" oninput="amount3.value=geschwindigkeit.value">
oninput="amount3.value=geschwindigkeit.value"> </div>
<br>
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
</div>
</div> </div>
<div class="ueberschrift"> <div class="param_block">
Licht-An-Zeit On Time: <output id="out_tim_on" class="val_range">50</output> %
<!-- <label id="label_time"> <div class="slider">
</label>--> <input type="range" class="regler" id="range_tim_on" min="0" max="100" value="50"
<div class="slider"> oninput="amount4.value=time.value">
<input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50" </div>
oninput="amount4.value=time.value">
<br>
<output name="amount4" id="amount4" for="time">50</output>
</div>
</div> </div>
<div class="terminal"> <div class="terminal">

61
data/input.js
View File

@ -1,12 +1,54 @@
// var slider = document.getElementById("helligkeit"); let rangeValues = {};
// var output = document.getElementById("l_pwm"); let xhrUpd = new XMLHttpRequest();
// output.innerHTML = slider.value; // Display the default slider value
// // Update the current slider value (each time you drag the slider handle) xhrUpd.onreadystatechange = function(){
// slider.oninput = function() { if(xhrUpd.readyState == 4) {
// output.innerHTML = this.value; if (xhrUpd.status == 200){
// } console.log(xhrUpd.responseText);
}
else {
console.log("status:", xhrUpd.status);
}
}
}
function reloadRangeValues() {
let url = "/update";
// if there are scheduled updates, send them
if(Object.keys(rangeValues).length > 0) {
let params = [];
for(let p in rangeValues)
params.push(encodeURIComponent(p) + "=" + encodeURIComponent(rangeValues[p]));
params.join("&");
xhrUpd.open("POST", url, true);
xhrUpd.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhrUpd.send(params);
rangeValues = {};
}
setTimeout(reloadRangeValues, 500);
};
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(output).innerHTML = this.value;
sendRangeValue(this.id, this.value);
}
}
rangeToOutput("range_act_pwm", "out_act_pwm");
rangeToOutput("range_idl_pwm", "out_idl_pwm");
rangeToOutput("range_tim_sta", "out_tim_sta");
rangeToOutput("range_tim_on", "out_tim_on");
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
@ -26,15 +68,12 @@ xhr.onreadystatechange = function(){
} }
} }
} }
function reloadTerminal() { function reloadTerminal() {
xhr.open("POST", "/app=terminal", true); xhr.open("POST", "/terminal", true);
xhr.send(); xhr.send();
setTimeout(reloadTerminal, 1000); setTimeout(reloadTerminal, 1000);
}; };
reloadTerminal(); reloadTerminal();
function clearTerminal() { function clearTerminal() {
document.getElementById("term").innerHTML = ''; document.getElementById("term").innerHTML = '';
} }

52
data/style.css
View File

@ -1,44 +1,44 @@
html { html {
font-size: 16px; font-size: 16px;
font-family: sans-serif, Arial, Helvetica; font-family: sans-serif, Arial, Helvetica;
background-color: #d4d4d4; background-color: #ffffff;
height: 100%; height: 100%;
background-repeat: repeat;
background-size: 150% 150%;
} }
body { body {
height: 100%; height: 100%;
margin: 0 auto;
border: none;
border-radius: 3; border-radius: 3;
} }
.topbar { .topbar {
padding: 1em; padding: 10px;
background-color: #1f1f1f; background-color: #585858;
color: white; color: white;
font-size: x-large; font-size: xx-large;
text-align: center; text-align: center;
} }
.ueberschrift{ .param_block{
color: #ffffff; padding: 1em;
font-size: 50px; color: #000000;
width: 100%; border: 1px solid darkred;
text-align: center; font-size: x-large;
width: 80%;
}
.val_range {
font-weight: bold;
} }
.regler{ .regler{
/* -webkit-appearance: none; */
-webkit-appearance: none; height: 50px;
height: 30px;
width: 100%; width: 100%;
border-radius: 20px; border-radius: 20px;
outline: black; outline: black;
background-color: rgb(176, 188, 228); background-color: rgb(176, 188, 228);
} }
.regler::-webkit-slider-thumb{ /* .regler::-webkit-slider-thumb{
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 5%; width: 5%;
@ -46,29 +46,21 @@ body {
border-radius: 10px; border-radius: 10px;
background-color: rgb(107, 122, 192); background-color: rgb(107, 122, 192);
cursor:pointer; cursor:pointer;
} } */
input[type=range]::-webkit-slider-thumb{ /* input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none; -webkit-appearance: none;
border:none; border:none;
height: 30px; height: 30px;
width: 4%; width: 4%;
border-radius: 30px; border-radius: 30px;
} } */
.slider {
width: 100%;
}
.kopfzeile{ .slider {
color: #1f1f1f; margin: 1%;
font-size: 50px;
width: 100%;
background-color: #8d8a8a;
} }
/*-------------------------------------------------------*/ /*-------------------------------------------------------*/
/*Switch: /*Switch:
.switch { .switch {
position: relative; position: relative;

15
lib/httpserver/httpserver.cpp
View File

@ -58,11 +58,24 @@ void HTTPServer::logt(const char *format, ...) {
void HTTPServer::start_apps() { void HTTPServer::start_apps() {
// application handler // application handler
this->on("/app=terminal", HTTP_POST, [this]() {
this->on("/update", HTTP_POST, [this]() {
// Serial.printf("got /update with args()=%d\n", args());
for(int i=0; i<args(); i++) {
Serial.printf("%s=%s\n", argName(i).c_str(), arg(i).c_str());
}
send(200, "text/plain", "accepted");
});
this->on("/terminal", HTTP_POST, [this]() {
// Serial.printf("got /terminal\n");
if(tbuf_head) { if(tbuf_head) {
send(200, "text/plain", tbuf); send(200, "text/plain", tbuf);
tbuf_head = 0; tbuf_head = 0;
} }
else {
send(202, "text/plain", "");
}
}); });
} }

2
lib/treppe/treppe.h
View File

@ -17,7 +17,7 @@ class Treppe {
private: private:
const uint8_t stufen; const uint8_t stufen;
uint16_t time_per_stair = 300; // dimmtime per stair [ms] uint16_t time_per_stair = 300; // dimmtime per stair [ms]
uint16_t idle_brightness = 400; uint16_t idle_brightness = 100;
uint16_t idle_bright_internal = 0; uint16_t idle_bright_internal = 0;
uint16_t active_brightness = 700; uint16_t active_brightness = 700;