schmidtsi76327
/
ESP8266_Treppenlicht
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 12 Wiki Activity
Browse Source

update webserver html,js,css

tags/v1.0.0
Simon Schmidt 2 years ago
parent
f62a18fe66
commit
2754bd5247
5 changed files with 117 additions and 88 deletions
Split View Show Diff Stats
  1. 29
    44
      data/index.html
  2. 51
    12
      data/input.js
  3. 22
    30
      data/style.css
  4. 14
    1
      lib/httpserver/httpserver.cpp
  5. 1
    1
      lib/treppe/treppe.h

+ 29
- 44
data/index.html View File

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

+ 51
- 12
data/input.js View File

@@ -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 = '';
}
}

+ 22
- 30
data/style.css View File

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

.regler{
.val_range {
font-weight: bold;
}

-webkit-appearance: none;
height: 30px;
.regler{
/* -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;

+ 14
- 1
lib/httpserver/httpserver.cpp View File

@@ -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", "");
}
});

}

+ 1
- 1
lib/treppe/treppe.h View File

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

Write Preview
Loading…
Cancel
Save