Removed the select boxes from the timing control editor and replaced them by sliders.

Replaces static code which generates the timing control data editor by a dynamic block.
Lights control main page newline removed
2023-05-08 10:27:35 +02:00 · 2023-05-08 10:05:10 +02:00 · 2023-05-08 09:47:55 +02:00 · 2023-05-08 09:46:25 +02:00 · 2023-05-08 09:30:37 +02:00
8 changed files with 258 additions and 59 deletions
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@ -190,7 +190,7 @@ break;
 }
 }
 if (lowerIndex === -1 || upperIndex === -1) {
-console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
 lowerIndex = 0;
 upperIndex = 1;
 var tmp1 = time[0].split(':');
@ -336,6 +336,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@ -376,6 +377,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@ -405,18 +407,11 @@ tr.appendChild(tdHour);
 var tdMinute = createSelectCell(59, 0, 1);
 tdMinute.id = "minute" + i;
 tr.appendChild(tdMinute);
-var tdCh1 = createSelectCell(100, 0, 1);
-tdCh1.id = "ch1_" + i;
-tr.appendChild(tdCh1);
-var tdCh2 = createSelectCell(100, 0, 1);
-tdCh2.id = "ch2_" + i;
-tr.appendChild(tdCh2);
-var tdCh3 = createSelectCell(100, 0, 1);
-tdCh3.id = "ch3_" + i;
-tr.appendChild(tdCh3);
-var tdCh4 = createSelectCell(100, 0, 1);
-tdCh4.id = "ch4_" + i;
-tr.appendChild(tdCh4);
+for (var j = 1; j <=4; j++)
+{
+var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
+tr.appendChild(tdCh);
+}
 table.appendChild(tr);
 }
 var container = document.getElementById("table-container");
@ -424,6 +419,36 @@ container.innerHTML = "";
 container.classList.add("pure-form");
 container.appendChild(table);
 }
+function createSlider(id, max, value, step) {
+var input = document.createElement("input");
+input.type = "range";
+input.min = 0;
+input.max = max;
+input.step = step;
+input.value = value;
+input.classList.add("pure-slider-range");
+if (id.startsWith("ch1_")) {
+input.style.backgroundColor = "blue";
+} else if (id.startsWith("ch2_")) {
+input.style.backgroundColor = "orange";
+} else if (id.startsWith("ch3_")) {
+input.style.backgroundColor = "green";
+} else if (id.startsWith("ch4_")) {
+input.style.backgroundColor = "red";
+}
+div = document.createElement("div");
+div.appendChild(input);
+var span = document.createElement("span");
+span.innerHTML = "&nbsp;" + value + " %";
+div.appendChild(span);
+input.oninput = function() {
+span.innerHTML = "&nbsp;" + this.value + " %";
+};
+var td = document.createElement("td");
+td.id = id;
+td.appendChild(div);
+return td;
+}
 function createSelectCell(max, value, step) {
 var select = document.createElement("select");
 for (var i = 0; i <= max; i += step) {
@ -446,10 +471,14 @@ for (var i = 0; i < tcdata.length; i++) {
 var row = document.getElementById("hour" + (i+1)).parentNode;
 row.cells[0].childNodes[0].value = tcdata[i].hour;
 row.cells[1].childNodes[0].value = tcdata[i].min;
-row.cells[2].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
-row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
-row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
-row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
+row.cells[2].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";
+row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
+row.cells[3].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[3].childNodes[0].childNodes[0].value + " %";
+row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
+row.cells[4].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[4].childNodes[0].childNodes[0].value + " %";
+row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+row.cells[5].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[5].childNodes[0].childNodes[0].value + " %";
 }
 loadTCGraphData();
 });
@ -457,22 +486,42 @@ loadTCGraphData();
 function createJsonFromTable() {
 var tableRows = document.querySelectorAll("table tr");
 var tcdata = [];
+var timeArr = [];
 for (var i = 1; i <= 10; i++) {
 var row = document.getElementById("hour" + i).parentNode;
 var hour = parseInt(row.cells[0].childNodes[0].value);
 var min = parseInt(row.cells[1].childNodes[0].value);
-var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
-var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55);
-var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55);
-var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].value) * 2.55);
+timeArr.push(hour * 60 + min);
+var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
+var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55);
+var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55);
+var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55);
 tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
 }
+for (var i = 0; i < timeArr.length - 1; i++) {
+if (timeArr[i] >= timeArr[i + 1]) {
+showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
+return null;
+}
+}
 var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
 var jsonData = {tcdata: tcdata, currenttime: currentTime};
 return JSON.stringify(jsonData);
 }
 function sendDataToServer() {
 var jsonData = createJsonFromTable();
+if (!jsonData) {
+button.classList.remove("pure-button-primary");
+button.classList.add("error");
+button.innerHTML = "Error!";
+setTimeout(function () {
+button.classList.remove("error");
+button.classList.add("pure-button-primary");
+button.innerHTML = "save";
+}, 2000);
+console.log('Error while generating timing control data.');
+return;
+}
 var urlEncodedData = encodeURIComponent(jsonData);
 var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
 var xhr = new XMLHttpRequest();
@ -499,6 +548,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "save";
 }, 2000);
+showToast('Error while sending timing control data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@ -506,3 +556,19 @@ console.log('Error while sending data to server.');
 xhr.send();
 loadTCGraphData();
 }
+function showToast(message, type) {
+const toast = document.querySelector('.toast');
+if (toast) {
+toast.textContent = message;
+toast.classList.remove('success', 'error');
+if (type === 'success') {
+toast.classList.add('success');
+} else if (type === 'error') {
+toast.classList.add('error');
+}
+toast.style.opacity = 1;
+setTimeout(() => {
+toast.style.opacity = 0;
+}, 5000);
+}
+}
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@ -15,6 +15,7 @@
 <body>
 <fieldset>
 <h3>{{LIGHT_NAME}}</h3>
+<div class="toast"></div>
 <div class="pure-form pure-form-aligned">
 <div class="pure-controls">
 <a href="/update" class="pure-button">update</a>
@ -44,7 +45,6 @@
 <br>
 <script src="http://{{IP_ADDRESS}}/js_top">
 </script>
-<br>
 <table border=0>
 <tr>
 <td class="top-align">
--- a/firmware/data/style.css
+++ b/firmware/data/style.css
@ -44,3 +44,23 @@ background-color: #333;
 .top-align {
 vertical-align: top;
 }
+.toast {
+position: fixed;
+bottom: 10px;
+left: 50%;
+transform: translateX(-50%);
+padding: 10px;
+border-radius: 5px;
+color: #fff;
+font-size: 16px;
+font-weight: bold;
+text-align: center;
+opacity: 0;
+transition: opacity 0.5s ease-in-out;
+}
+.toast.success {
+background-color: #4CAF50;
+}
+.toast.error {
+background-color: #f44336;
+}
--- a/firmware/data/top.js
+++ b/firmware/data/top.js
@ -26,6 +26,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@ -63,6 +64,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@ -84,6 +86,7 @@ if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 }).catch(error => {
+showToast(`Error sending slider value to ${url}: ${error}`, 'error');
 console.error(`Error sending slider value to ${url}: ${error}`);
 });
 }, 500);
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@ -225,7 +225,7 @@ function loadTCGraphData() {
        //console.log('lowerIndex=' + lowerIndex);
        //console.log('upperIndex=' + upperIndex);
        if (lowerIndex === -1 || upperIndex === -1) {
-            console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+            console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
            lowerIndex = 0;
            upperIndex = 1;
            var tmp1 = time[0].split(':');
@ -389,6 +389,7 @@ links.forEach(function(link) {
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "OFF";
                    }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                    console.log('Error while sending data to server.');
                }
            }
@ -437,6 +438,7 @@ links.forEach(function(link) {
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "ON";
                    }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                    console.log('Error while sending data to server.');
                }
            }
@ -481,25 +483,12 @@ function createTable() {
      tdMinute.id = "minute" + i;
      tr.appendChild(tdMinute);
  
-      // ch1
-      var tdCh1 = createSelectCell(100, 0, 1);
-      tdCh1.id = "ch1_" + i;
-      tr.appendChild(tdCh1);
-  
-      // ch2
-      var tdCh2 = createSelectCell(100, 0, 1);
-      tdCh2.id = "ch2_" + i;
-      tr.appendChild(tdCh2);
-  
-      // ch3
-      var tdCh3 = createSelectCell(100, 0, 1);
-      tdCh3.id = "ch3_" + i;
-      tr.appendChild(tdCh3);
-  
-      // ch4
-      var tdCh4 = createSelectCell(100, 0, 1);
-      tdCh4.id = "ch4_" + i;
-      tr.appendChild(tdCh4);
+      for (var j = 1; j <=4; j++)
+      {
+        // chj_i
+        var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
+        tr.appendChild(tdCh);
+      }
  
      table.appendChild(tr);
    }
@ -510,6 +499,48 @@ function createTable() {
    container.appendChild(table);
 }

+function createSlider(id, max, value, step) {
+    // Create a new input element of type range
+    var input = document.createElement("input");
+    input.type = "range";
+    input.min = 0;
+    input.max = max;
+    input.step = step;
+    input.value = value;
+    input.classList.add("pure-slider-range");
+    // Change the color of the slider based on the id
+    if (id.startsWith("ch1_")) {
+        input.style.backgroundColor = "blue";
+    } else if (id.startsWith("ch2_")) {
+        input.style.backgroundColor = "orange";
+    } else if (id.startsWith("ch3_")) {
+        input.style.backgroundColor = "green";
+    } else if (id.startsWith("ch4_")) {
+        input.style.backgroundColor = "red";
+    }
+
+    div = document.createElement("div");
+    div.appendChild(input);
+
+    // Create a new span element to contain the value of the slider
+    var span = document.createElement("span");
+    span.innerHTML = "&nbsp;" + value + " %";
+    div.appendChild(span);
+
+    // Update the span element when the value of the slider changes
+    input.oninput = function() {
+        span.innerHTML = "&nbsp;" + this.value + " %";
+    };
+
+    // Create a new td element to contain the div element
+    var td = document.createElement("td");
+    td.id = id;
+    td.appendChild(div);
+
+    // Return the td element
+    return td;
+}
+
 function createSelectCell(max, value, step) {
    // Erstelle ein neues select-Element
    var select = document.createElement("select");
@ -544,10 +575,18 @@ function fillTableFromJson() {
            var row = document.getElementById("hour" + (i+1)).parentNode;
            row.cells[0].childNodes[0].value = tcdata[i].hour;
            row.cells[1].childNodes[0].value = tcdata[i].min;
-            row.cells[2].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
-            row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
-            row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
-            row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+
+            row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
+            row.cells[2].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";
+
+            row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
+            row.cells[3].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[3].childNodes[0].childNodes[0].value + " %";
+
+            row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
+            row.cells[4].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[4].childNodes[0].childNodes[0].value + " %";
+
+            row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
+            row.cells[5].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[5].childNodes[0].childNodes[0].value + " %";
        }

        loadTCGraphData();
@ -557,26 +596,51 @@ function fillTableFromJson() {
 function createJsonFromTable() {
    var tableRows = document.querySelectorAll("table tr");
    var tcdata = [];
+  
+    // Speichert die Zeitangaben (hour, minute) in einem Array
+    var timeArr = [];
    for (var i = 1; i <= 10; i++) {
-
-        var row = document.getElementById("hour" + i).parentNode;
-        var hour = parseInt(row.cells[0].childNodes[0].value);
-        var min = parseInt(row.cells[1].childNodes[0].value);
-        var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
-        var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55);
-        var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55);
-        var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].value) * 2.55);
-
-        tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
+      var row = document.getElementById("hour" + i).parentNode;
+      var hour = parseInt(row.cells[0].childNodes[0].value);
+      var min = parseInt(row.cells[1].childNodes[0].value);
+      timeArr.push(hour * 60 + min); // Speichert die Zeitangaben als Minuten seit Mitternacht
+      var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
+      var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55);
+      var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55);
+      var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55);
+      tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
    }
+  
+    // Überprüft, ob die Zeitangaben von datensatz i=0 bis i=9 aufsteigend sind
+    for (var i = 0; i < timeArr.length - 1; i++) {
+      if (timeArr[i] >= timeArr[i + 1]) {
+        showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
+        return null;
+      }
+    }
+  
    var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
    var jsonData = {tcdata: tcdata, currenttime: currentTime};
    //console.log("jsonData = " + JSON.stringify(jsonData));
    return JSON.stringify(jsonData);
-}
+  }

 function sendDataToServer() {
    var jsonData = createJsonFromTable();
+
+    if (!jsonData) {
+        button.classList.remove("pure-button-primary");
+        button.classList.add("error");
+        button.innerHTML = "Error!";
+        setTimeout(function () {
+          button.classList.remove("error");
+          button.classList.add("pure-button-primary");
+          button.innerHTML = "save";
+        }, 2000);
+        console.log('Error while generating timing control data.');
+        return;
+    }
+
    var urlEncodedData = encodeURIComponent(jsonData);
    var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
    var xhr = new XMLHttpRequest();
@ -603,6 +667,7 @@ function sendDataToServer() {
                    button.classList.add("pure-button-primary");
                    button.innerHTML = "save";
                }, 2000);
+                showToast('Error while sending timing control data to server.', 'error');
                console.log('Error while sending data to server.');
            }
        }
@ -610,3 +675,25 @@ function sendDataToServer() {
    xhr.send();
    loadTCGraphData(); // update the tc data graph
 }
+
+function showToast(message, type) {
+    const toast = document.querySelector('.toast');
+    
+    if (toast) {
+      toast.textContent = message;
+      toast.classList.remove('success', 'error');
+      
+      if (type === 'success') {
+        toast.classList.add('success');
+      } else if (type === 'error') {
+        toast.classList.add('error');
+      }
+      
+      toast.style.opacity = 1;
+      
+      setTimeout(() => {
+        toast.style.opacity = 0;
+      }, 5000);
+    }
+  }
+  
--- a/firmware/html/index_template_top.html
+++ b/firmware/html/index_template_top.html
@ -15,6 +15,7 @@
 <body>
    <fieldset>
        <h3>{{LIGHT_NAME}}</h3>
+        <div class="toast"></div>
        <div class="pure-form pure-form-aligned">
            <div class="pure-controls">
                <a href="/update" class="pure-button">update</a>
@ -44,7 +45,6 @@
            <br>
            <script src="http://{{IP_ADDRESS}}/js_top">
            </script>
-            <br>
            <table border=0>
                <tr>
                    <td class="top-align">
--- a/firmware/html/style.css
+++ b/firmware/html/style.css
@ -44,3 +44,23 @@ background-color: #333;
 .top-align {
 vertical-align: top;
 }
+.toast {
+position: fixed;
+bottom: 10px;
+left: 50%;
+transform: translateX(-50%);
+padding: 10px;
+border-radius: 5px;
+color: #fff;
+font-size: 16px;
+font-weight: bold;
+text-align: center;
+opacity: 0;
+transition: opacity 0.5s ease-in-out;
+}
+.toast.success {
+background-color: #4CAF50;
+}
+.toast.error {
+background-color: #f44336;
+}
--- a/firmware/html/top.js
+++ b/firmware/html/top.js
@ -27,6 +27,7 @@ links.forEach(function(link) {
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "ON";
                    }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                    console.log('Error while sending data to server.');
                }
            }
@ -67,6 +68,7 @@ links.forEach(function(link) {
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "OFF";
                    }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                    console.log('Error while sending data to server.');
                }
            }
@ -92,6 +94,7 @@ function sendSliderValue(x) {
            }
            //console.log(`Sent slider value ${value} to ${url}`);
        }).catch(error => {
+            showToast(`Error sending slider value to ${url}: ${error}`, 'error');
            console.error(`Error sending slider value to ${url}: ${error}`);
        });
    }, 500);
Author	SHA1	Message	Date
Kai Lauterbach	9844d9fca8	Removed the select boxes from the timing control editor and replaced them by sliders.	2023-05-08 10:27:35 +02:00
Kai Lauterbach	a6ac0be517	Replaces static code which generates the timing control data editor by a dynamic block.	2023-05-08 10:05:10 +02:00
Kai Lauterbach	967a3071af	Lights control main page newline removed	2023-05-08 09:47:55 +02:00
Kai Lauterbach	25c2e8622f	Added a toast message to the webinterface.	2023-05-08 09:46:25 +02:00
Kai Lauterbach	b95c73cfb5	Added a check which verifies the data in the timing data block editor	2023-05-08 09:30:37 +02:00