From 2754bd5247da06914ad90de871288422a9389105 Mon Sep 17 00:00:00 2001 From: Simon Schmidt Date: Mon, 5 Jul 2021 18:15:57 +0200 Subject: [PATCH] update webserver html,js,css --- data/index.html | 73 ++++++++++++++--------------------- data/input.js | 63 ++++++++++++++++++++++++------ data/style.css | 52 +++++++++++-------------- lib/httpserver/httpserver.cpp | 15 ++++++- lib/treppe/treppe.h | 2 +- 5 files changed, 117 insertions(+), 88 deletions(-) diff --git a/data/index.html b/data/index.html index 5268123..1c435d4 100644 --- a/data/index.html +++ b/data/index.html @@ -3,61 +3,46 @@ ESP8266 Treppenlicht - -
- Treppenlicht +
Treppenlicht
+ +
+ Active Brightness: 50 % +
+ +
-
- Helligkeit - -
- -
- 50 -
-
-
- Helligkeit bei Dunkelheit - -
- -
- 50 -
+ +
+ Idle Brightness: 50 % +
+ +
-
- Laufgeschwindigkeit - -
- -
- 50 -
+
+ Time per stair: 50 % + +
+ +
-
- Licht-An-Zeit - -
- -
- 50 -
+
+ On Time: 50 % +
+ +
+
diff --git a/data/input.js b/data/input.js index 89ff368..53ed611 100644 --- a/data/input.js +++ b/data/input.js @@ -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 = ''; -} \ No newline at end of file +} diff --git a/data/style.css b/data/style.css index 8b0fd93..5898b3e 100644 --- a/data/style.css +++ b/data/style.css @@ -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; diff --git a/lib/httpserver/httpserver.cpp b/lib/httpserver/httpserver.cpp index cba3375..d4ae262 100644 --- a/lib/httpserver/httpserver.cpp +++ b/lib/httpserver/httpserver.cpp @@ -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; ion("/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", ""); + } }); } \ No newline at end of file diff --git a/lib/treppe/treppe.h b/lib/treppe/treppe.h index 3d88dff..124480d 100644 --- a/lib/treppe/treppe.h +++ b/lib/treppe/treppe.h @@ -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;