diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index 3682501..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')) { @@ -404,7 +412,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++) @@ -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 caa7f53..d38a0ef 100644 --- a/firmware/data/style.css +++ b/firmware/data/style.css @@ -63,4 +63,38 @@ background-color: #4CAF50; } .toast.error { background-color: #f44336; -} \ No newline at end of file +} +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/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 7b6b029..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() { @@ -479,7 +489,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); @@ -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 caa7f53..d38a0ef 100644 --- a/firmware/html/style.css +++ b/firmware/html/style.css @@ -63,4 +63,38 @@ background-color: #4CAF50; } .toast.error { background-color: #f44336; -} \ No newline at end of file +} +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/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 64ace7c..cbec150 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; } @@ -440,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"] + " "); 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 +