From 4b02bba607c3ade24c0836e3fafddd9aa06ab3b6 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 10 May 2023 10:48:50 +0200 Subject: [PATCH] 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"] + " ");