update webserver html,js,css
This commit is contained in:
parent
f62a18fe66
commit
2754bd5247
@ -3,61 +3,46 @@
|
||||
|
||||
<head>
|
||||
<title>ESP8266 Treppenlicht</title>
|
||||
<!-- main style sheet -->
|
||||
<link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
|
||||
<link href="/style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="kopfzeile" style="text-align: center;">
|
||||
<b>Treppenlicht</b>
|
||||
<div class="topbar">Treppenlicht</div>
|
||||
|
||||
<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 class="ueberschrift">
|
||||
Helligkeit
|
||||
<!--<label id="label_pwm">
|
||||
</label>-->
|
||||
<div class="slider">
|
||||
<input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50"
|
||||
oninput="amount1.value=helligkeit.value">
|
||||
<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 class="param_block">
|
||||
Idle Brightness: <output id="out_idl_pwm" class="val_range">50</output> %
|
||||
<div class="slider">
|
||||
<input type="range" class="regler" id="range_idl_pwm" min="0" max="100" value="50"
|
||||
oninput="amount2.value=helligkeit_dunkel.value">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ueberschrift">
|
||||
Laufgeschwindigkeit
|
||||
<!--<label id="label_geschwindigkeit">
|
||||
</label>-->
|
||||
<div class="slider">
|
||||
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
|
||||
oninput="amount3.value=geschwindigkeit.value">
|
||||
<br>
|
||||
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
|
||||
</div>
|
||||
<div class="param_block">
|
||||
Time per stair: <output id="out_tim_sta" class="val_range">50</output> %
|
||||
|
||||
<div class="slider">
|
||||
<input type="range" class="regler" id="range_tim_sta" min="0" max="100" value="50"
|
||||
oninput="amount3.value=geschwindigkeit.value">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ueberschrift">
|
||||
Licht-An-Zeit
|
||||
<!-- <label id="label_time">
|
||||
</label>-->
|
||||
<div class="slider">
|
||||
<input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50"
|
||||
oninput="amount4.value=time.value">
|
||||
<br>
|
||||
<output name="amount4" id="amount4" for="time">50</output>
|
||||
</div>
|
||||
<div class="param_block">
|
||||
On Time: <output id="out_tim_on" class="val_range">50</output> %
|
||||
<div class="slider">
|
||||
<input type="range" class="regler" id="range_tim_on" min="0" max="100" value="50"
|
||||
oninput="amount4.value=time.value">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="terminal">
|
||||
|
||||
@ -1,12 +1,54 @@
|
||||
// var slider = document.getElementById("helligkeit");
|
||||
// var output = document.getElementById("l_pwm");
|
||||
// output.innerHTML = slider.value; // Display the default slider value
|
||||
let rangeValues = {};
|
||||
let xhrUpd = new XMLHttpRequest();
|
||||
|
||||
// // Update the current slider value (each time you drag the slider handle)
|
||||
// slider.oninput = function() {
|
||||
// output.innerHTML = this.value;
|
||||
// }
|
||||
xhrUpd.onreadystatechange = function(){
|
||||
if(xhrUpd.readyState == 4) {
|
||||
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();
|
||||
@ -26,15 +68,12 @@ xhr.onreadystatechange = function(){
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reloadTerminal() {
|
||||
xhr.open("POST", "/app=terminal", true);
|
||||
xhr.open("POST", "/terminal", true);
|
||||
xhr.send();
|
||||
setTimeout(reloadTerminal, 1000);
|
||||
};
|
||||
|
||||
reloadTerminal();
|
||||
|
||||
function clearTerminal() {
|
||||
document.getElementById("term").innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +1,44 @@
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-family: sans-serif, Arial, Helvetica;
|
||||
background-color: #d4d4d4;
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
background-repeat: repeat;
|
||||
background-size: 150% 150%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
border-radius: 3;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 1em;
|
||||
background-color: #1f1f1f;
|
||||
padding: 10px;
|
||||
background-color: #585858;
|
||||
color: white;
|
||||
font-size: x-large;
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ueberschrift{
|
||||
color: #ffffff;
|
||||
font-size: 50px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.param_block{
|
||||
padding: 1em;
|
||||
color: #000000;
|
||||
border: 1px solid darkred;
|
||||
font-size: x-large;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.val_range {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.regler{
|
||||
|
||||
-webkit-appearance: none;
|
||||
height: 30px;
|
||||
/* -webkit-appearance: none; */
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
outline: black;
|
||||
background-color: rgb(176, 188, 228);
|
||||
}
|
||||
.regler::-webkit-slider-thumb{
|
||||
/* .regler::-webkit-slider-thumb{
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 5%;
|
||||
@ -46,29 +46,21 @@ body {
|
||||
border-radius: 10px;
|
||||
background-color: rgb(107, 122, 192);
|
||||
cursor:pointer;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb{
|
||||
} */
|
||||
/* input[type=range]::-webkit-slider-thumb{
|
||||
-webkit-appearance: none;
|
||||
border:none;
|
||||
height: 30px;
|
||||
width: 4%;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.slider {
|
||||
width: 100%;
|
||||
}
|
||||
} */
|
||||
|
||||
.kopfzeile{
|
||||
color: #1f1f1f;
|
||||
font-size: 50px;
|
||||
width: 100%;
|
||||
background-color: #8d8a8a;
|
||||
.slider {
|
||||
margin: 1%;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------------------------------------*/
|
||||
|
||||
|
||||
/*Switch:
|
||||
.switch {
|
||||
position: relative;
|
||||
|
||||
@ -58,11 +58,24 @@ void HTTPServer::logt(const char *format, ...) {
|
||||
|
||||
void HTTPServer::start_apps() {
|
||||
// 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) {
|
||||
send(200, "text/plain", tbuf);
|
||||
tbuf_head = 0;
|
||||
}
|
||||
else {
|
||||
send(202, "text/plain", "");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
@ -17,7 +17,7 @@ class Treppe {
|
||||
private:
|
||||
const uint8_t stufen;
|
||||
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 active_brightness = 700;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user