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

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

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;
-}
+}*/

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}`);

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

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");

firmware/html/light_control_template.html

@@ -1,29 +1,29 @@
 <h4>Light {{LIGHT_NUMBER}}</h4>
-                        <div class="pure-control-group">
+<div class="pure-control-group">
-                            <label for="power">
+    <label for="power">
-                                <strong>Power</strong>
+        <strong>Power</strong>
-                            </label>
+    </label>
-                            <a id="on{{LIGHT_NUMBER_DEC}}_on" class="pure-button" href="#">ON</a>
+    <a id="on{{LIGHT_NUMBER_DEC}}_on" class="pure-button" href="#">ON</a>
-                            <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
+    <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
-                        </div>
+</div>
-                        <div class="pure-control-group">
+<div class="pure-control-group">
-                            <label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
+    <label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
-                            <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
+    <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
-                            &nbsp;
+    &nbsp;
-                            <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
+    <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
-                            %
+    %
-                            <br>
+    <br>
-                            <label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
+    <label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
-                            <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
+    <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
-                            &nbsp;
+    &nbsp;
-                            <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
+    <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
-                            %
+    %
-                            <script>
+    <script>
-                            var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
+        var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
-                            var output{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}_val");
+        var output{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}_val");
-                            output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
+        output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
-                            slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
+        slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
-                                output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
+            output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
-                            }
+        }
-                            </script>
+    </script>
-                        </div>
+</div>

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;
-}
+}*/

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}`);

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) {
+    } else if (minute > 50) {
-      minute = 59;
+      minute = 50;
     }
     tc_data[i].mm = minute;
     Serial.print("minute = " + (String)tc_data[i].mm + " " + (String)obj["min"] + " ");