Added git ignore file

Disabled console logging.
Extracted the javascript code to separate files. Added a initial table for configuring the tc data blocks.
2023-05-05 10:16:52 +02:00 · 2023-05-05 10:16:52 +02:00 · 2023-05-05 10:16:30 +02:00
11 changed files with 141 additions and 70 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
 .DS_store
+.vscode/c_cpp_properties.json
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@ -32,7 +32,7 @@ atde.classList.add("pure-button-primary");
 createTable();
 });
 } catch (error) {
-console.log("Fehler in load listener of the tab action listener management: " + error.message);
+console.log("Error: load listener of the tab action listener management: " + error.message);
 }
 }
 window.addEventListener('load', function() {
@ -56,14 +56,12 @@ 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');
@ -72,22 +70,17 @@ 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.");
+console.log("Error: 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(':');
-console.log('tmp1 = ' + tmp1);
 currenttime[0] = tmp1[0];
 currenttime[1] = tmp1[1];
 }
@ -95,15 +88,11 @@ 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,
@ -171,7 +160,6 @@ 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');
@ -194,7 +182,6 @@ 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();
@ -271,7 +258,9 @@ contentRow.appendChild(channelCell);
 table.appendChild(contentRow);
 }
 var button = document.createElement("button");
-button.innerHTML = "Export als JSON";
+button.innerHTML = "Save";
+button.classList.add("pure-button");
+button.classList.add("pure-button-primary");
 button.onclick = function() {
 var data = [];
 var rows = table.getElementsByTagName("tr");
@ -294,6 +283,7 @@ xhr.send();
 };
 var container = document.getElementById("table-container");
 container.innerHTML = "";
+container.classList.add("pure-form");
 container.appendChild(table);
 container.appendChild(button);
 }
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@ -9,22 +9,7 @@
 <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>
-#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 src="http://{{IP_ADDRESS}}'/css">
 </style>
 </head>
 <body>
--- a/firmware/data/style.css
+++ b/firmware/data/style.css
@ -0,0 +1,52 @@
+        #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;
+        }
+
--- a/firmware/data/top.js
+++ b/firmware/data/top.js
@ -5,7 +5,6 @@ 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');
 });
@ -17,7 +16,6 @@ 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');
 });
@ -33,7 +31,6 @@ 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}`);
 });
--- a/firmware/firmware.ino
+++ b/firmware/firmware.ino
@ -499,6 +499,11 @@ 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("/", []()
  {

--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@ -41,7 +41,7 @@ function addTabListener() {
            createTable();
        });
    } catch (error) {
-        console.log("Fehler in load listener of the tab action listener management: " + error.message);
+        console.log("Error: 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(curr.isBetween(start, end));
+                //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);
+            //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.");
+                console.log("Error: 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(':');
-                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 (float): " + index);
+            //console.log("Index (integer): " + 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,7 +310,9 @@ for (var row = 0; row < 10; row++) {

 // Button
 var button = document.createElement("button");
-button.innerHTML = "Export als JSON";
+button.innerHTML = "Save";
+button.classList.add("pure-button");
+button.classList.add("pure-button-primary");
 button.onclick = function() {
    var data = [];

@ -339,6 +341,7 @@ button.onclick = function() {

 var container = document.getElementById("table-container");
 container.innerHTML = "";
+container.classList.add("pure-form");
 container.appendChild(table);
 container.appendChild(button);
 }
--- a/firmware/html/index_template_top.html
+++ b/firmware/html/index_template_top.html
@ -9,22 +9,7 @@
    <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>
-        #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 src="http://{{IP_ADDRESS}}'/css">
    </style>
 </head>
 <body>
--- a/firmware/html/style.css
+++ b/firmware/html/style.css
@ -0,0 +1,52 @@
+        #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;
+        }
+
--- a/firmware/html/top.js
+++ b/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}`);
        });
--- a/tools/html_gen_files.sh
+++ b/tools/html_gen_files.sh
@ -7,3 +7,4 @@ 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 .
Author	SHA1	Message	Date
Kai Lauterbach	99c0c4a6b5	Added git ignore file	2023-05-05 10:16:52 +02:00
Kai Lauterbach	2f7ce5019b	Disabled console logging.	2023-05-05 10:16:52 +02:00
Kai Lauterbach	94a347d3d0	Extracted the javascript code to separate files. Added a initial table for configuring the tc data blocks. Extracted the css styles into a separate file.	2023-05-05 10:16:30 +02:00