Updated non-dev binary files.

Merge branch 'develop'
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.
2023-05-10 11:05:01 +02:00 · 2023-05-10 11:02:00 +02:00 · 2023-05-10 10:48:50 +02:00 · 2023-05-10 08:33:12 +02:00 · 2023-05-10 08:24:54 +02:00 · 2023-05-09 13:41:07 +02:00
12 changed files with 183 additions and 45 deletions
--- a/firmware/20230510_firmware.ino.bin
+++ b/firmware/20230510_firmware.ino.bin
--- a/firmware/20230510_firmware.spiffs.bin
+++ b/firmware/20230510_firmware.spiffs.bin
--- 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);
--- a/firmware/data/style.css
+++ b/firmware/data/style.css
@ -63,4 +63,38 @@ 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;
+}*/
--- 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}`);
--- 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);
--- 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");
--- a/firmware/html/light_control_template.html
+++ b/firmware/html/light_control_template.html
@ -1,29 +1,29 @@
 <h4>Light {{LIGHT_NUMBER}}</h4>
-                        <div class="pure-control-group">
-                            <label for="power">
-                                <strong>Power</strong>
-                            </label>
-                            <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>
-                        </div>
-                        <div class="pure-control-group">
-                            <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">
-                            &nbsp;
-                            <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
-                            %
-                            <br>
-                            <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>
-                            &nbsp;
-                            <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
-                            %
-                            <script>
-                            var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
-                            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);
-                            slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
-                                output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
-                            }
-                            </script>
-                        </div>
+<div class="pure-control-group">
+    <label for="power">
+        <strong>Power</strong>
+    </label>
+    <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>
+</div>
+<div class="pure-control-group">
+    <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">
+    &nbsp;
+    <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
+    %
+    <br>
+    <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>
+    &nbsp;
+    <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
+    %
+    <script>
+        var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
+        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);
+        slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
+            output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
+        }
+    </script>
+</div>
--- a/firmware/html/style.css
+++ b/firmware/html/style.css
@ -63,4 +63,38 @@ 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;
+}*/
--- 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}`);
--- 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"] + " ");
--- 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
+
Author	SHA1	Message	Date
Kai Lauterbach	a2f70bf5ec	Updated non-dev binary files.	2023-05-10 11:05:01 +02:00
Kai Lauterbach	2446632324	Merge branch 'develop'	2023-05-10 11:02:00 +02:00
Kai Lauterbach	4b02bba607	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.	2023-05-10 10:48:50 +02:00
Kai Lauterbach	f935948402	Fixed end of the timing data setup, all values will be set to zero.	2023-05-10 08:33:12 +02:00
Kai Lauterbach	eea9c75c21	Minutes are only set in a step of 10	2023-05-10 08:24:54 +02:00
Kai Lauterbach	a14f3aa0d5	Added css rules to modify the html sliders	2023-05-09 13:41:07 +02:00
Kai Lauterbach	3c39f91082	Improved html generator script skills.	2023-05-09 13:35:35 +02:00