Extracted the javascript code to separate files. Added a initial table for configuring the tc data blocks.

.gitignore

@@ -1,2 +1 @@
 .DS_store
-.vscode/c_cpp_properties.json

firmware/data/bottom.js

@@ -32,7 +32,7 @@ atde.classList.add("pure-button-primary");
 createTable();
 });
 } catch (error) {
-console.log("Error: load listener of the tab action listener management: " + error.message);
+console.log("Fehler in load listener of the tab action listener management: " + error.message);
 }
 }
 window.addEventListener('load', function() {
@@ -56,12 +56,14 @@ channel4.push(data['tcdata'][i]['ch4']);
 }
 currenttime.push(data['currenttime']['hour']);
 currenttime.push(data['currenttime']['min']);
+console.log(currenttime);
 var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
 var index = time.indexOf(currentTimeStr);
 if (index === -1) {
 var lowerIndex = -1;
 var upperIndex = -1;
 for (var i = 0; i < time.length - 1; i++) {
+console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
 const currentDate = new Date();
 const year = currentDate.getFullYear();
 const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
@@ -70,17 +72,22 @@ const dateString = `${year}-${month}-${day}`;
 const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
 const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
 const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+console.log(curr.isBetween(start, end));
 if (curr.isBetween(start, end)) {
 lowerIndex = i;
 upperIndex = i + 1;
 break;
 }
 }
+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("Error: Current time not found in time array and not between two elements in time array.");
 lowerIndex = 0;
 upperIndex = 1;
 var tmp1 = time[0].split(':');
+console.log('tmp1 = ' + tmp1);
 currenttime[0] = tmp1[0];
 currenttime[1] = tmp1[1];
 }
@@ -88,11 +95,15 @@ var lowerTime = time[lowerIndex].split(":");
 var upperTime = time[upperIndex].split(":");
 var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
 var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+console.log("Index (float): " + indexFloat);
 } else {
+console.log("Index (integer): " + index);
+console.log("Index (float): " + index);
 }
 if (indexFloat > index) {
 index = indexFloat;
 }
+console.log("index in graph >>>" + index);
 var trace1 = {
 x: time,
 y: channel1,
@@ -160,6 +171,7 @@ const onLinkOn = document.getElementById(`on${i - 1}_on`);
 const onLinkOff = document.getElementById(`on${i - 1}_off`);
 briSlider.value = data.bri;
 briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
+console.log('data.on ' + i + ' = ' + data.on);
 if (data.on == true) {
 onLinkOn.classList.add('pure-button-primary');
 onLinkOff.classList.remove('pure-button-primary');
@@ -182,6 +194,7 @@ if (pwmElement) {
 const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
 fetch(url).then(response => response.json()).then(data => {
 const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
+console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
 pwmElement.innerText = pwmValue.toString();
 pwmElement.value = pwmValue;
 pwmElementTxt.innerText = pwmValue.toString();
@@ -258,9 +271,7 @@ contentRow.appendChild(channelCell);
 table.appendChild(contentRow);
 }
 var button = document.createElement("button");
-button.innerHTML = "Save";
+button.innerHTML = "Export als JSON";
-button.classList.add("pure-button");
-button.classList.add("pure-button-primary");
 button.onclick = function() {
 var data = [];
 var rows = table.getElementsByTagName("tr");
@@ -283,7 +294,6 @@ xhr.send();
 };
 var container = document.getElementById("table-container");
 container.innerHTML = "";
-container.classList.add("pure-form");
 container.appendChild(table);
 container.appendChild(button);
 }

firmware/data/index_template_top.html

@@ -9,7 +9,22 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<style src="http://{{IP_ADDRESS}}'/css">
+<style>
+#tab-lights, #tab-config, #tab-tde {
+display: none;
+background-color: #ffffff;
+color: black;
+font-weight: bold;
+}
+#tab-lights.visible {
+display: block;
+}
+#tab-config.visible {
+display: block;
+}
+#tab-tde.visible {
+display: block;
+}
 </style>
 </head>
 <body>

firmware/data/style.css

@@ -1,52 +0,0 @@
-        #tab-lights, #tab-config, #tab-tde {
-        display: none;
-        background-color: #ffffff;
-        color: black;
-        font-weight: bold;
-        }
-        #tab-lights.visible {
-        display: block;
-        }
-        #tab-config.visible {
-        display: block;
-        }
-        #tab-tde.visible {
-        display: block;
-        }
-        /* CSS-Regeln für die Tabellenzellen */
-        .pure-table td {
-            padding: 4px;
-        }
-
-        /* CSS-Regeln für die Eingabefelder */
-        .pure-form input[type="number"] {
-            width: 60px;
-            height: 20px;
-            border-radius: 3px;
-            border: 1px solid #ccc;
-        }
-
-        /* CSS-Regeln für die Auswahllisten */
-        .pure-form select {
-            width: 80px;
-            height: 26px;
-            border-radius: 3px;
-            border: 1px solid #ccc;
-            background-color: #fff;
-        }
-
-        /* CSS-Regeln für den Export-Button */
-        .pure-button {
-            background-color: #5a5a5a;
-            color: #fff;
-            border-radius: 3px;
-            border: none;
-            padding: 8px 12px;
-            font-size: 14px;
-            cursor: pointer;
-        }
-
-        .pure-button:hover {
-            background-color: #333;
-        }
-

firmware/data/top.js

@@ -5,6 +5,7 @@ event.preventDefault();
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
 xhr.send();
+console.log('tc=true call');
 document.getElementById('tc_on').classList.add('pure-button-primary');
 document.getElementById('tc_off').classList.remove('pure-button-primary');
 });
@@ -16,6 +17,7 @@ event.preventDefault();
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
 xhr.send();
+console.log('tc=false call');
 document.getElementById('tc_off').classList.add('pure-button-primary');
 document.getElementById('tc_on').classList.remove('pure-button-primary');
 });
@@ -31,6 +33,7 @@ fetch(url).then(response => {
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
+console.log(`Sent slider value ${value} to ${url}`);
 }).catch(error => {
 console.error(`Error sending slider value to ${url}: ${error}`);
 });

firmware/firmware.ino

@@ -499,11 +499,6 @@ void init_webserver()
     server.send(200, "text/html", replacePlaceholder(loadSPIFFSFile("/bottom.js")));
   });
 
-  server.on("/css", []()
-  {
-    server.send(200, "text/html", loadSPIFFSFile("/style.css"));
-  });
-
   server.on("/", []()
   {
 

firmware/html/bottom.js

@@ -41,7 +41,7 @@ function addTabListener() {
             createTable();
         });
     } catch (error) {
-        console.log("Error: load listener of the tab action listener management: " + error.message);
+        console.log("Fehler in load listener of the tab action listener management: " + error.message);
     }
 }
 window.addEventListener('load', function() {
@@ -66,14 +66,14 @@ function loadGraphData() {
         }
         currenttime.push(data['currenttime']['hour']);
         currenttime.push(data['currenttime']['min']);
-        //console.log(currenttime);
+        console.log(currenttime);
         var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
         var index = time.indexOf(currentTimeStr);
         if (index === -1) {
             var lowerIndex = -1;
             var upperIndex = -1;
             for (var i = 0; i < time.length - 1; i++) {
-                //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
+                console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
                 const currentDate = new Date();
                 const year = currentDate.getFullYear();
                 const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
@@ -82,22 +82,22 @@ function loadGraphData() {
                 const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
                 const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
                 const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
-                //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+                console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
-                //console.log(curr.isBetween(start, end));
+                console.log(curr.isBetween(start, end));
                 if (curr.isBetween(start, end)) {
                     lowerIndex = i;
                     upperIndex = i + 1;
                     break;
                 }
             }
-            //console.log('lowerIndex=' + lowerIndex);
+            console.log('lowerIndex=' + lowerIndex);
-            //console.log('upperIndex=' + upperIndex);
+            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("Error: Current time not found in time array and not between two elements in time array.");
                 lowerIndex = 0;
                 upperIndex = 1;
                 var tmp1 = time[0].split(':');
-                //console.log('tmp1 = ' + tmp1);
+                console.log('tmp1 = ' + tmp1);
                 currenttime[0] = tmp1[0];
                 currenttime[1] = tmp1[1];
             }
@@ -105,15 +105,15 @@ function loadGraphData() {
             var upperTime = time[upperIndex].split(":");
             var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
             var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
-            //console.log("Index (float): " + indexFloat);
+            console.log("Index (float): " + indexFloat);
         } else {
-            //console.log("Index (integer): " + index);
+            console.log("Index (integer): " + index);
-            //console.log("Index (float): " + index);
+            console.log("Index (float): " + index);
         }
         if (indexFloat > index) {
             index = indexFloat;
         }
-        //console.log("index in graph >>>" + index);
+        console.log("index in graph >>>" + index);
         var trace1 = {
             x: time,
             y: channel1,
@@ -182,7 +182,7 @@ function updateLightState() {
             const onLinkOff = document.getElementById(`on${i - 1}_off`);
             briSlider.value = data.bri;
             briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
-            //console.log('data.on ' + i + ' = ' + data.on);
+            console.log('data.on ' + i + ' = ' + data.on);
             if (data.on == true) {
                 onLinkOn.classList.add('pure-button-primary');
                 onLinkOff.classList.remove('pure-button-primary');
@@ -206,7 +206,7 @@ function updatePWMValues() {
             const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
             fetch(url).then(response => response.json()).then(data => {
                 const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
-                //console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
+                console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
                 pwmElement.innerText = pwmValue.toString();
                 pwmElement.value = pwmValue;
                 pwmElementTxt.innerText = pwmValue.toString();
@@ -310,9 +310,7 @@ for (var row = 0; row < 10; row++) {
 
 // Button
 var button = document.createElement("button");
-button.innerHTML = "Save";
+button.innerHTML = "Export als JSON";
-button.classList.add("pure-button");
-button.classList.add("pure-button-primary");
 button.onclick = function() {
     var data = [];
 
@@ -341,7 +339,6 @@ button.onclick = function() {
 
 var container = document.getElementById("table-container");
 container.innerHTML = "";
-container.classList.add("pure-form");
 container.appendChild(table);
 container.appendChild(button);
 }

firmware/html/index_template_top.html

@@ -9,7 +9,22 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style src="http://{{IP_ADDRESS}}'/css">
+    <style>
+        #tab-lights, #tab-config, #tab-tde {
+        display: none;
+        background-color: #ffffff;
+        color: black;
+        font-weight: bold;
+        }
+        #tab-lights.visible {
+        display: block;
+        }
+        #tab-config.visible {
+        display: block;
+        }
+        #tab-tde.visible {
+        display: block;
+        }
     </style>
 </head>
 <body>

firmware/html/style.css

@@ -1,52 +0,0 @@
-        #tab-lights, #tab-config, #tab-tde {
-        display: none;
-        background-color: #ffffff;
-        color: black;
-        font-weight: bold;
-        }
-        #tab-lights.visible {
-        display: block;
-        }
-        #tab-config.visible {
-        display: block;
-        }
-        #tab-tde.visible {
-        display: block;
-        }
-        /* CSS-Regeln für die Tabellenzellen */
-        .pure-table td {
-            padding: 4px;
-        }
-
-        /* CSS-Regeln für die Eingabefelder */
-        .pure-form input[type="number"] {
-            width: 60px;
-            height: 20px;
-            border-radius: 3px;
-            border: 1px solid #ccc;
-        }
-
-        /* CSS-Regeln für die Auswahllisten */
-        .pure-form select {
-            width: 80px;
-            height: 26px;
-            border-radius: 3px;
-            border: 1px solid #ccc;
-            background-color: #fff;
-        }
-
-        /* CSS-Regeln für den Export-Button */
-        .pure-button {
-            background-color: #5a5a5a;
-            color: #fff;
-            border-radius: 3px;
-            border: none;
-            padding: 8px 12px;
-            font-size: 14px;
-            cursor: pointer;
-        }
-
-        .pure-button:hover {
-            background-color: #333;
-        }
-

firmware/html/top.js

@@ -5,7 +5,7 @@ links.forEach(function(link) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
         xhr.send();
-        //console.log('tc=true call');
+        console.log('tc=true call');
         document.getElementById('tc_on').classList.add('pure-button-primary');
         document.getElementById('tc_off').classList.remove('pure-button-primary');
     });
@@ -17,7 +17,7 @@ links.forEach(function(link) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
         xhr.send();
-        //console.log('tc=false call');
+        console.log('tc=false call');
         document.getElementById('tc_off').classList.add('pure-button-primary');
         document.getElementById('tc_on').classList.remove('pure-button-primary');
     });
@@ -34,7 +34,7 @@ function sendSliderValue(x) {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            //console.log(`Sent slider value ${value} to ${url}`);
+            console.log(`Sent slider value ${value} to ${url}`);
         }).catch(error => {
             console.error(`Error sending slider value to ${url}: ${error}`);
         });

tools/html_gen_files.sh

@@ -7,4 +7,3 @@ 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 .