From 3c39f91082e7e5651acb0f9151956b0d41fa269b Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Tue, 9 May 2023 13:35:35 +0200 Subject: [PATCH 1/5] Improved html generator script skills. --- tools/html_gen_files.sh | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/tools/html_gen_files.sh b/tools/html_gen_files.sh index 61222d8..dd5c37b 100755 --- a/tools/html_gen_files.sh +++ b/tools/html_gen_files.sh @@ -1,5 +1,18 @@ #!/bin/bash +# Prüfen, ob wir im data-Verzeichnis sind +if [[ $(basename "$PWD") != "data" ]]; then + echo "Fehler: Bitte wechseln Sie in das 'data'-Verzeichnis" + exit 1 +fi + +# Prüfen, ob der HTML-Ordner im übergeordneten Verzeichnis existiert +if [[ ! -d "../html" ]]; then + echo "Fehler: Das Verzeichnis '../html' existiert nicht" + exit 1 +fi + +echo "Creating html files..." bash ../../tools/html2string.sh ../html/index_template_top.html > index_template_top.html bash ../../tools/html2string.sh ../html/index_template_middle.html > index_template_middle.html bash ../../tools/html2string.sh ../html/index_template_bottom.html > index_template_bottom.html @@ -7,4 +20,5 @@ bash ../../tools/html2string.sh ../html/config_template.html > config_template.h bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html bash ../../tools/html2string.sh ../html/top.js > top.js bash ../../tools/html2string.sh ../html/bottom.js > bottom.js -cp -av ../html/style.css . +cp -av ../html/style.css . > /dev/null + From a14f3aa0d54e1a938ceeddfdd6d9e4a738e35a89 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Tue, 9 May 2023 13:41:07 +0200 Subject: [PATCH 2/5] Added css rules to modify the html sliders --- firmware/data/style.css | 33 +++++++++++++++++++++++++++++++++ firmware/html/style.css | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) diff --git a/firmware/data/style.css b/firmware/data/style.css index caa7f53..1b7d199 100644 --- a/firmware/data/style.css +++ b/firmware/data/style.css @@ -63,4 +63,37 @@ background-color: #4CAF50; } .toast.error { background-color: #f44336; +} +input[type=range] { +-webkit-appearance: none; +width: 70%; +height: 7px; +margin: 4px 0; +background-color: #ddd; +} +input[type=range]:focus { +outline: none; +} +input[type=range]::-webkit-slider-thumb { +-webkit-appearance: none; +appearance: none; +width: 15px; +height: 15px; +border-radius: 10%; +background-color: #a1a1a1; +cursor: pointer; +} +input[type=range]::-moz-range-thumb { +width: 15px; +height: 15px; +border-radius: 10%; +background-color: #a1a1a1; +cursor: pointer; +} +input[type=range]::-ms-thumb { +width: 15px; +height: 15px; +border-radius: 10%; +background-color: #a1a1a1; +cursor: pointer; } \ No newline at end of file diff --git a/firmware/html/style.css b/firmware/html/style.css index caa7f53..1b7d199 100644 --- a/firmware/html/style.css +++ b/firmware/html/style.css @@ -63,4 +63,37 @@ background-color: #4CAF50; } .toast.error { background-color: #f44336; +} +input[type=range] { +-webkit-appearance: none; +width: 70%; +height: 7px; +margin: 4px 0; +background-color: #ddd; +} +input[type=range]:focus { +outline: none; +} +input[type=range]::-webkit-slider-thumb { +-webkit-appearance: none; +appearance: none; +width: 15px; +height: 15px; +border-radius: 10%; +background-color: #a1a1a1; +cursor: pointer; +} +input[type=range]::-moz-range-thumb { +width: 15px; +height: 15px; +border-radius: 10%; +background-color: #a1a1a1; +cursor: pointer; +} +input[type=range]::-ms-thumb { +width: 15px; +height: 15px; +border-radius: 10%; +background-color: #a1a1a1; +cursor: pointer; } \ No newline at end of file From eea9c75c2157e011f583f2973c5ff82fdb2263f6 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 10 May 2023 08:24:54 +0200 Subject: [PATCH 3/5] Minutes are only set in a step of 10 --- firmware/data/bottom.js | 2 +- firmware/html/bottom.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index 3682501..f063b0f 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -404,7 +404,7 @@ var tr = document.createElement("tr"); var tdHour = createSelectCell(23, 0, 1); tdHour.id = "hour" + i; tr.appendChild(tdHour); -var tdMinute = createSelectCell(59, 0, 1); +var tdMinute = createSelectCell(59, 0, 10); tdMinute.id = "minute" + i; tr.appendChild(tdMinute); for (var j = 1; j <=4; j++) diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index 7b6b029..5a83187 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -479,7 +479,7 @@ function createTable() { tr.appendChild(tdHour); // Minute - var tdMinute = createSelectCell(59, 0, 1); + var tdMinute = createSelectCell(59, 0, 10); tdMinute.id = "minute" + i; tr.appendChild(tdMinute); From f935948402c5c51779f17b5edeee4ea28797ae35 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 10 May 2023 08:33:12 +0200 Subject: [PATCH 4/5] Fixed end of the timing data setup, all values will be set to zero. --- firmware/timing_control.ino | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/firmware/timing_control.ino b/firmware/timing_control.ino index 64ace7c..41dce4c 100644 --- a/firmware/timing_control.ino +++ b/firmware/timing_control.ino @@ -165,6 +165,16 @@ void tc_update_main() { // no new predecessor or successor found, start over current_target_data_block = 255; + + // disable the lights + for (uint8_t i = 0; i < LIGHTS_COUNT; i++) + { + light_state[i] = false; + bri[i] = 0; + current_bri[i] = 0; + current_pwm[i] = 0; + } + return; } From 4b02bba607c3ade24c0836e3fafddd9aa06ab3b6 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 10 May 2023 10:48:50 +0200 Subject: [PATCH 5/5] Disabled slider button styles. Fixed minute range in tc editor. Fixed transition time after sliders were changed in non tc mode. Fixed indention in lights control thml page. Added color gradient to tc editor. --- firmware/data/bottom.js | 21 +++++++-- firmware/data/style.css | 3 +- firmware/data/top.js | 8 +++- firmware/firmware.ino | 3 ++ firmware/html/bottom.js | 25 ++++++++-- firmware/html/light_control_template.html | 56 +++++++++++------------ firmware/html/style.css | 3 +- firmware/html/top.js | 9 +++- firmware/timing_control.ino | 4 +- 9 files changed, 90 insertions(+), 42 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index f063b0f..a95bcd4 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -258,6 +258,14 @@ dash: 'dot' }] }; Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout); +var plot = document.getElementById('tc_plot_chart'); +} +function rgbaToHex(rgba) { +var hex = rgba.map(function (value) { +var hexValue = Math.round(value * 255).toString(16); +return hexValue.length === 1 ? '0' + hexValue : hexValue; +}); +return '#' + hex.join('').toUpperCase(); } setInterval(function() { if (document.getElementById('tab-tde').classList.contains('visible')) { @@ -419,6 +427,10 @@ container.innerHTML = ""; container.classList.add("pure-form"); container.appendChild(table); } +function rgb2Hex(r, g, b) { +var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); +return hex; +} function createSlider(id, max, value, step) { var input = document.createElement("input"); input.type = "range"; @@ -426,15 +438,16 @@ input.min = 0; input.max = max; input.step = step; input.value = value; +input.style = "1px solod darkgray"; input.classList.add("pure-slider-range"); if (id.startsWith("ch1_")) { -input.style.backgroundColor = "blue"; +input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; } else if (id.startsWith("ch2_")) { -input.style.backgroundColor = "orange"; +input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; } else if (id.startsWith("ch3_")) { -input.style.backgroundColor = "green"; +input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; } else if (id.startsWith("ch4_")) { -input.style.backgroundColor = "red"; +input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; } div = document.createElement("div"); div.appendChild(input); diff --git a/firmware/data/style.css b/firmware/data/style.css index 1b7d199..d38a0ef 100644 --- a/firmware/data/style.css +++ b/firmware/data/style.css @@ -74,6 +74,7 @@ background-color: #ddd; input[type=range]:focus { outline: none; } +/* input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; @@ -96,4 +97,4 @@ height: 15px; border-radius: 10%; background-color: #a1a1a1; cursor: pointer; -} \ No newline at end of file +}*/ \ No newline at end of file diff --git a/firmware/data/top.js b/firmware/data/top.js index 559e94e..f243c0a 100644 --- a/firmware/data/top.js +++ b/firmware/data/top.js @@ -80,7 +80,13 @@ x = x - 1; clearTimeout(timeoutId); timeoutId = setTimeout(() => { var value = document.getElementById(`bri${x}`).value; -var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}`; +var trans = document.getElementById('transition').value; +if (isNaN(trans) || parseInt(trans) != trans) +{ +showToast("Error the transition is not a valid integer number.", "error"); +return false; +} +var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}&transition=`+parseInt(trans); fetch(url).then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); diff --git a/firmware/firmware.ino b/firmware/firmware.ino index dda1e36..69180ef 100644 --- a/firmware/firmware.ino +++ b/firmware/firmware.ino @@ -274,7 +274,10 @@ void setup() SPIFFS.begin(); +#ifdef DEVELOPMENT + // Serial is not used in non development mode Serial.begin(SERIAL_BAUD_RATE); +#endif Serial.flush(); delay(1000); diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index 5a83187..ec510b5 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -299,6 +299,16 @@ function loadTCGraphData() { }; Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout); + var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird +} + +function rgbaToHex(rgba) { + var hex = rgba.map(function (value) { + var hexValue = Math.round(value * 255).toString(16); + return hexValue.length === 1 ? '0' + hexValue : hexValue; + }); + + return '#' + hex.join('').toUpperCase(); } setInterval(function() { @@ -499,6 +509,12 @@ function createTable() { container.appendChild(table); } +function rgb2Hex(r, g, b) { + // RGB-Werte in hexadezimale Werte umwandeln + var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); + return hex; +} + function createSlider(id, max, value, step) { // Create a new input element of type range var input = document.createElement("input"); @@ -507,16 +523,17 @@ function createSlider(id, max, value, step) { input.max = max; input.step = step; input.value = value; + input.style = "1px solod darkgray"; input.classList.add("pure-slider-range"); // Change the color of the slider based on the id if (id.startsWith("ch1_")) { - input.style.backgroundColor = "blue"; + input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; } else if (id.startsWith("ch2_")) { - input.style.backgroundColor = "orange"; + input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; } else if (id.startsWith("ch3_")) { - input.style.backgroundColor = "green"; + input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; } else if (id.startsWith("ch4_")) { - input.style.backgroundColor = "red"; + input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; } div = document.createElement("div"); diff --git a/firmware/html/light_control_template.html b/firmware/html/light_control_template.html index bc62ab1..ddedcd2 100644 --- a/firmware/html/light_control_template.html +++ b/firmware/html/light_control_template.html @@ -1,29 +1,29 @@

Light {{LIGHT_NUMBER}}

-
- - ON - OFF -
-
- - -   - 9 - % -
- - -   - - % - -
+
+ + ON + OFF +
+
+ + +   + 9 + % +
+ + +   + + % + +
diff --git a/firmware/html/style.css b/firmware/html/style.css index 1b7d199..d38a0ef 100644 --- a/firmware/html/style.css +++ b/firmware/html/style.css @@ -74,6 +74,7 @@ background-color: #ddd; input[type=range]:focus { outline: none; } +/* input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; @@ -96,4 +97,4 @@ height: 15px; border-radius: 10%; background-color: #a1a1a1; cursor: pointer; -} \ No newline at end of file +}*/ \ No newline at end of file diff --git a/firmware/html/top.js b/firmware/html/top.js index 0f07a78..3cb6dbe 100644 --- a/firmware/html/top.js +++ b/firmware/html/top.js @@ -87,7 +87,14 @@ function sendSliderValue(x) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { var value = document.getElementById(`bri${x}`).value; - var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}`; + var trans = document.getElementById('transition').value; + if (isNaN(trans) || parseInt(trans) != trans) + { + showToast("Error the transition is not a valid integer number.", "error"); + return false; + } + + var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}&transition=`+parseInt(trans); fetch(url).then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); diff --git a/firmware/timing_control.ino b/firmware/timing_control.ino index 41dce4c..cbec150 100644 --- a/firmware/timing_control.ino +++ b/firmware/timing_control.ino @@ -450,8 +450,8 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string) int minute = obj["min"]; if (minute < 0) { minute = 0; - } else if (minute > 59) { - minute = 59; + } else if (minute > 50) { + minute = 50; } tc_data[i].mm = minute; Serial.print("minute = " + (String)tc_data[i].mm + " " + (String)obj["min"] + " ");