From fa90339feaa29046f276ddb9fe7a8fd715964156 Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
Date: Wed, 3 May 2023 14:16:00 +0200
Subject: [PATCH] Fixed light power button optical handling.

---
 firmware/data/index_template_bottom.html |   9 +-
 firmware/html/index_template_bottom.html | 459 ++++++++++++-----------
 2 files changed, 235 insertions(+), 233 deletions(-)

diff --git a/firmware/data/index_template_bottom.html b/firmware/data/index_template_bottom.html
index db94a65..baeab8c 100644
--- a/firmware/data/index_template_bottom.html
+++ b/firmware/data/index_template_bottom.html
@@ -38,8 +38,7 @@ amain.classList.remove("pure-button-primary");
 acfg.classList.remove("pure-button-primary");
 atde.classList.add("pure-button-primary");
 });
-</script>
-<script>
+
 function loadGraphData() {
 console.log('----> generate graph <----');
 $.getJSON('/tc_data_blocks', function(data) {
@@ -208,9 +207,7 @@ pwmElementTxt.innerText = pwmValue.toString();
 }
 updatePWMValues();
 setInterval(updatePWMValues, 5000);
-</script>
 
-<script>
 
 var links = document.querySelectorAll('[id^="on"][id$="_off"]');
 
@@ -226,6 +223,8 @@ xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + docume
 
 xhr.send();
 updateLightState();
+this.classList.add('pure-button-primary');
+document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
 });
 });
 
@@ -243,6 +242,8 @@ xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + documen
 
 xhr.send();
 updateLightState();
+this.classList.remove('pure-button-primary');
+document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
 });
 });
 </script>
diff --git a/firmware/html/index_template_bottom.html b/firmware/html/index_template_bottom.html
index 376ef2f..8fb77bc 100644
--- a/firmware/html/index_template_bottom.html
+++ b/firmware/html/index_template_bottom.html
@@ -1,251 +1,252 @@
 <!-- bottom -->
-  <script>
-    var tabMain = document.getElementById("tab-lights");
-    var tabConfig = document.getElementById("tab-config");
-    var tabTDE = document.getElementById("tab-tde");
+    <script>
+        var tabMain = document.getElementById("tab-lights");
+        var tabConfig = document.getElementById("tab-config");
+        var tabTDE = document.getElementById("tab-tde");
 
-    var amain = document.getElementById("tab-a-lights");
-    var acfg = document.getElementById("tab-a-config");
-    var atde = document.getElementById("tab-a-tde");
+        var amain = document.getElementById("tab-a-lights");
+        var acfg = document.getElementById("tab-a-config");
+        var atde = document.getElementById("tab-a-tde");
 
 
-    document.getElementById("tab-a-lights").addEventListener("click", function() {
-      tabMain.classList.add("visible");
-      tabConfig.classList.remove("visible");
-      tabTDE.classList.remove("visible");
+        document.getElementById("tab-a-lights").addEventListener("click", function() {
+        tabMain.classList.add("visible");
+        tabConfig.classList.remove("visible");
+        tabTDE.classList.remove("visible");
 
-      amain.classList.add("pure-button-primary");
-      acfg.classList.remove("pure-button-primary");
-      atde.classList.remove("pure-button-primary");
-    });
+        amain.classList.add("pure-button-primary");
+        acfg.classList.remove("pure-button-primary");
+        atde.classList.remove("pure-button-primary");
+        });
 
-    document.getElementById("tab-a-config").addEventListener("click", function() {
-      tabMain.classList.remove("visible");
-      tabConfig.classList.add("visible");
-      tabTDE.classList.remove("visible");
+        document.getElementById("tab-a-config").addEventListener("click", function() {
+        tabMain.classList.remove("visible");
+        tabConfig.classList.add("visible");
+        tabTDE.classList.remove("visible");
 
-      amain.classList.remove("pure-button-primary");
-      acfg.classList.add("pure-button-primary");
-      atde.classList.remove("pure-button-primary");
-    });
+        amain.classList.remove("pure-button-primary");
+        acfg.classList.add("pure-button-primary");
+        atde.classList.remove("pure-button-primary");
+        });
 
-    document.getElementById("tab-a-tde").addEventListener("click", function() {
-      tabMain.classList.remove("visible");
-      tabConfig.classList.remove("visible");
-      tabTDE.classList.add("visible");
+        document.getElementById("tab-a-tde").addEventListener("click", function() {
+        tabMain.classList.remove("visible");
+        tabConfig.classList.remove("visible");
+        tabTDE.classList.add("visible");
 
-      amain.classList.remove("pure-button-primary");
-      acfg.classList.remove("pure-button-primary");
-      atde.classList.add("pure-button-primary");
-    });
-  </script>
-            <script>
-            function loadGraphData() {
-                console.log('----> generate graph <----');
-                $.getJSON('/tc_data_blocks', function(data) {
-                    var currenttime = [];
-                    var time = [];
-                    var channel1 = [];
-                    var channel2 = [];
-                    var channel3 = [];
-                    var channel4 = [];
-                    for (var i = 0; i < data['tcdata'].length; i++) {
-                        time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
-                        channel1.push(data['tcdata'][i]['ch1']);
-                        channel2.push(data['tcdata'][i]['ch2']);
-                        channel3.push(data['tcdata'][i]['ch3']);
-                        channel4.push(data['tcdata'][i]['ch4']);
+        amain.classList.remove("pure-button-primary");
+        acfg.classList.remove("pure-button-primary");
+        atde.classList.add("pure-button-primary");
+        });
+
+        function loadGraphData() {
+            console.log('----> generate graph <----');
+            $.getJSON('/tc_data_blocks', function(data) {
+                var currenttime = [];
+                var time = [];
+                var channel1 = [];
+                var channel2 = [];
+                var channel3 = [];
+                var channel4 = [];
+                for (var i = 0; i < data['tcdata'].length; i++) {
+                    time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
+                    channel1.push(data['tcdata'][i]['ch1']);
+                    channel2.push(data['tcdata'][i]['ch2']);
+                    channel3.push(data['tcdata'][i]['ch3']);
+                    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');
+                        const day = currentDate.getDate().toString().padStart(2, '0');
+                        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;
+                        }
                     }
-                    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');
-                            const day = currentDate.getDate().toString().padStart(2, '0');
-                            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.");
+                        lowerIndex = 0;
+                        upperIndex = 1;
+                        var tmp1 = time[0].split(':');
+                        console.log('tmp1 = ' + tmp1);
+                        currenttime[0] = tmp1[0];
+                        currenttime[1] = tmp1[1];
+                    }
+                    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,
+                    name: 'Channel 1',
+                    type: 'scatter',
+                    mode: 'lines+markers',
+                };
+                var trace2 = {
+                    x: time,
+                    y: channel2,
+                    name: 'Channel 2',
+                    type: 'scatter',
+                    mode: 'lines+markers',
+                };
+                var trace3 = {
+                    x: time,
+                    y: channel3,
+                    name: 'Channel 3',
+                    type: 'scatter',
+                    mode: 'lines+markers',
+                };
+                var trace4 = {
+                    x: time,
+                    y: channel4,
+                    name: 'Channel 4',
+                    type: 'scatter',
+                    mode: 'lines+markers',
+                };
+                var layout = {
+                    title: 'Timing Control Data Blocks',
+                    xaxis: {
+                        title: 'Time',
+                        tickangle: -45,
+                    },
+                    yaxis: {
+                        title: 'Brightness',
+                        range: [0, 255],
+                    },
+                    shapes: [{
+                        type: 'line',
+                        x0: index,
+                        y0: 0,
+                        x1: index,
+                        y1: 255,
+                        line: {
+                            color: 'lightgrey',
+                            width: 3,
+                            dash: 'dot'
                         }
-                        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.");
-                            lowerIndex = 0;
-                            upperIndex = 1;
-                            var tmp1 = time[0].split(':');
-                            console.log('tmp1 = ' + tmp1);
-                            currenttime[0] = tmp1[0];
-                            currenttime[1] = tmp1[1];
-                        }
-                        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);
+                    }]
+                };
+                Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+            });
+        }
+        setInterval(loadGraphData, 10000);
+        loadGraphData();
+
+        function updateLightState() {
+            console.log('----> setting bri and power switch <----');
+            for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
+                const lightURL = `http://{{IP_ADDRESS}}/state?light=${i}`;
+                fetch(lightURL).then(response => response.json()).then(data => {
+                    const briSlider = document.getElementById(`bri${i - 1}`);
+                    const briSliderVal = document.getElementById(`bri${i - 1}_val`);
+                    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');
                     } else {
-                        console.log("Index (integer): " + index);
-                        console.log("Index (float): " + index);
+                        onLinkOn.classList.remove('pure-button-primary');
+                        onLinkOff.classList.add('pure-button-primary');
                     }
-                    if (indexFloat > index) {
-                        index = indexFloat;
-                    }
-                    console.log("index in graph >>>" + index);
-                    var trace1 = {
-                        x: time,
-                        y: channel1,
-                        name: 'Channel 1',
-                        type: 'scatter',
-                        mode: 'lines+markers',
-                    };
-                    var trace2 = {
-                        x: time,
-                        y: channel2,
-                        name: 'Channel 2',
-                        type: 'scatter',
-                        mode: 'lines+markers',
-                    };
-                    var trace3 = {
-                        x: time,
-                        y: channel3,
-                        name: 'Channel 3',
-                        type: 'scatter',
-                        mode: 'lines+markers',
-                    };
-                    var trace4 = {
-                        x: time,
-                        y: channel4,
-                        name: 'Channel 4',
-                        type: 'scatter',
-                        mode: 'lines+markers',
-                    };
-                    var layout = {
-                        title: 'Timing Control Data Blocks',
-                        xaxis: {
-                            title: 'Time',
-                            tickangle: -45,
-                        },
-                        yaxis: {
-                            title: 'Brightness',
-                            range: [0, 255],
-                        },
-                        shapes: [{
-                            type: 'line',
-                            x0: index,
-                            y0: 0,
-                            x1: index,
-                            y1: 255,
-                            line: {
-                                color: 'lightgrey',
-                                width: 3,
-                                dash: 'dot'
-                            }
-                        }]
-                    };
-                    Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
-                });
+                }).catch(error => console.error(error));
             }
-            setInterval(loadGraphData, 10000);
-            loadGraphData();
+        }
+        setInterval(updateLightState, 10000);
+        updateLightState();
 
-            function updateLightState() {
-                console.log('----> setting bri and power switch <----');
-                for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
-                    const lightURL = `http://{{IP_ADDRESS}}/state?light=${i}`;
-                    fetch(lightURL).then(response => response.json()).then(data => {
-                        const briSlider = document.getElementById(`bri${i - 1}`);
-                        const briSliderVal = document.getElementById(`bri${i - 1}_val`);
-                        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');
-                        } else {
-                            onLinkOn.classList.remove('pure-button-primary');
-                            onLinkOff.classList.add('pure-button-primary');
-                        }
+        function updatePWMValues() {
+            console.log('----> setting pwm data <----');
+            for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
+                const lightID = i + 1;
+                const pwmElement = document.getElementById(`light${i}_pwm`);
+                const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);
+                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();
                     }).catch(error => console.error(error));
                 }
             }
-            setInterval(updateLightState, 10000);
-            updateLightState();
+        }
+        updatePWMValues();
+        setInterval(updatePWMValues, 5000);
 
-            function updatePWMValues() {
-                console.log('----> setting pwm data <----');
-                for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
-                    const lightID = i + 1;
-                    const pwmElement = document.getElementById(`light${i}_pwm`);
-                    const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);
-                    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();
-                        }).catch(error => console.error(error));
-                    }
-                }
-            }
-            updatePWMValues();
-            setInterval(updatePWMValues, 5000);
-            </script>
-
-            <script>
-                    // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
-                    var links = document.querySelectorAll('[id^="on"][id$="_off"]');
-                    // Füge einen Klick-Listener zu jedem Link hinzu
-                    links.forEach(function(link) {
-                    link.addEventListener('click', function(event) {
-                    // Verhindere, dass der Link die Seite neu lädt
-                    event.preventDefault();
-                    // Extrahiere die Zahl aus der ID des Links
-                    var id = this.id.replace('on', '').replace('_off', '');
-                    // Erstelle eine neue Anfrage an die entsprechende URL
-                    var xhr = new XMLHttpRequest();
-                    xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
-                    // Sende die Anfrage im Hintergrund
-                    xhr.send();
-                    updateLightState();
-                    });
-                    });
-                    // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
-                    var links = document.querySelectorAll('[id^="on"][id$="_on"]');
-                    // Füge einen Klick-Listener zu jedem Link hinzu
-                    links.forEach(function(link) {
-                    link.addEventListener('click', function(event) {
-                    // Verhindere, dass der Link die Seite neu lädt
-                    event.preventDefault();
-                    // Extrahiere die Zahl aus der ID des Links
-                    var id = this.id.replace('on', '').replace('_on', '');
-                    // Erstelle eine neue Anfrage an die entsprechende URL
-                    var xhr = new XMLHttpRequest();
-                    xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
-                    // Sende die Anfrage im Hintergrund
-                    xhr.send();
-                    updateLightState();
-                    });
-                    });
-           </script>
+        // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
+        var links = document.querySelectorAll('[id^="on"][id$="_off"]');
+        // Füge einen Klick-Listener zu jedem Link hinzu
+        links.forEach(function(link) {
+            link.addEventListener('click', function(event) {
+                // Verhindere, dass der Link die Seite neu lädt
+                event.preventDefault();
+                // Extrahiere die Zahl aus der ID des Links
+                var id = this.id.replace('on', '').replace('_off', '');
+                // Erstelle eine neue Anfrage an die entsprechende URL
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
+                // Sende die Anfrage im Hintergrund
+                xhr.send();
+                updateLightState();
+                this.classList.add('pure-button-primary');
+                document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
+            });
+        });
+        // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
+        var links = document.querySelectorAll('[id^="on"][id$="_on"]');
+        // Füge einen Klick-Listener zu jedem Link hinzu
+        links.forEach(function(link) {
+            link.addEventListener('click', function(event) {
+                // Verhindere, dass der Link die Seite neu lädt
+                event.preventDefault();
+                // Extrahiere die Zahl aus der ID des Links
+                var id = this.id.replace('on', '').replace('_on', '');
+                // Erstelle eine neue Anfrage an die entsprechende URL
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
+                // Sende die Anfrage im Hintergrund
+                xhr.send();
+                updateLightState();
+                this.classList.remove('pure-button-primary');
+                document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
+            });
+        });
+    </script>
 
         </div>
     </fieldset>