Added a comment with code which could run html-minifier

css style file will also be cleaned before writing it to data folder now
CSS code formatiert.
2023-05-22 16:20:38 +02:00 · 2023-05-22 15:49:30 +02:00 · 2023-05-22 15:40:31 +02:00 · 2023-05-22 12:12:22 +02:00 · 2023-05-22 12:02:14 +02:00 · 2023-05-22 09:47:15 +02:00
10 changed files with 156 additions and 178 deletions
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@ -95,34 +95,17 @@ var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((uppe
 if (indexFloat > index) {
 index = indexFloat;
 }
-var trace1 = {
+var traces = [];
+for (var i = 1; i <= 4; i++) {
+var trace = {
 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',
+y: eval("channel" + i),
+name: 'Channel ' + i,
 type: 'scatter',
 mode: 'lines+markers',
 };
+traces.push(trace);
+}
 var layout = {
 title: 'Timing Control Data Blocks',
 xaxis: {
@ -146,7 +129,7 @@ dash: 'dot'
 }
 }]
 };
-Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+Plotly.newPlot('plot_chart', traces, layout);
 });
 }
 setInterval(loadGraphData, 10000);
@ -206,34 +189,17 @@ var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((uppe
 if (indexFloat > index) {
 index = indexFloat;
 }
-var trace1 = {
+var traces = [];
+for (var i = 1; i <= 4; i++) {
+var trace = {
 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',
+y: eval("channel" + i),
+name: 'Channel ' + i,
 type: 'scatter',
 mode: 'lines+markers',
 };
+traces.push(trace);
+}
 var layout = {
 title: 'Timing Control Data Blocks',
 xaxis: {
@ -257,7 +223,7 @@ dash: 'dot'
 }
 }]
 };
-Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
+Plotly.newPlot('tc_plot_chart', traces, layout);
 var plot = document.getElementById('tc_plot_chart');
 }
 function rgbaToHex(rgba) {
--- a/firmware/data/index_template_bottom.html
+++ b/firmware/data/index_template_bottom.html
@ -19,6 +19,7 @@
 </tr>
 </table>
 <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
+<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="fillTableFromJson();">reset</a>
 </div>
 </div> <!-- end of tab-tde -->
 <script src="http://{{IP_ADDRESS}}/js_bottom">
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Light setup - {{LIGHT_NAME}}</title>
+<title>Light setup - {{LIGHT_NAME}}{{LIGHT_NAME_DEV_POSTFIX}}</title>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
--- a/firmware/data/style.css
+++ b/firmware/data/style.css
@ -1,20 +1,24 @@
-#tab-lights, #tab-config, #tab-tde {
+body {
+font-family: Arial, sans-serif;
+}
+#tab-lights,
+#tab-config,
+#tab-tde {
 display: none;
 background-color: #ffffff;
 color: black;
 font-weight: bold;
+padding: 10px;
+border-radius: 3px;
 }
-#tab-lights.visible {
-display: block;
-}
-#tab-config.visible {
-display: block;
-}
+#tab-lights.visible,
+#tab-config.visible,
 #tab-tde.visible {
 display: block;
 }
 .pure-table td {
 padding: 4px;
+vertical-align: top;
 }
 .pure-form input[type="number"] {
 width: 60px;
@ -41,9 +45,6 @@ cursor: pointer;
 .pure-button:hover {
 background-color: #333;
 }
-.top-align {
-vertical-align: top;
-}
 .toast {
 position: fixed;
 bottom: 10px;
@ -59,7 +60,7 @@ opacity: 0;
 transition: opacity 0.5s ease-in-out;
 }
 .toast.success {
-background-color: #4CAF50;
+background-color: #4caf50;
 }
 .toast.error {
 background-color: #f44336;
@ -77,3 +78,6 @@ outline: none;
 [id^="bri"] {
 width: 50%;
 }
+.top-align {
+vertical-align: top;
+}
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@ -9,7 +9,6 @@ function addTabListener() {
        var acfg = document.getElementById("tab-a-config");
        var atde = document.getElementById("tab-a-tde");

-
        amain.addEventListener("click", function() {
            //console.log("Switch to main lights tab");
            tabMain.classList.add("visible");
@ -121,34 +120,18 @@ function loadGraphData() {
            index = indexFloat;
        }
        //console.log("index in graph >>>" + index);
-        var trace1 = {
+        var traces = [];
+        for (var i = 1; i <= 4; i++) {
+            var trace = {
                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',
+                y: eval("channel" + i),
+                name: 'Channel ' + i,
                type: 'scatter',
                mode: 'lines+markers',
            };
+    
+            traces.push(trace);
+        }
        var layout = {
            title: 'Timing Control Data Blocks',
            xaxis: {
@ -172,7 +155,7 @@ function loadGraphData() {
                }
            }]
        };
-        Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+        Plotly.newPlot('plot_chart', traces, layout);
    });
 }
 setInterval(loadGraphData, 10000);
@ -246,34 +229,18 @@ function loadTCGraphData() {
        index = indexFloat;
    }
    //console.log("index in graph >>>" + index);
-    var trace1 = {
+    var traces = [];
+    for (var i = 1; i <= 4; i++) {
+        var trace = {
            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',
+            y: eval("channel" + i),
+            name: 'Channel ' + i,
            type: 'scatter',
            mode: 'lines+markers',
        };
+
+        traces.push(trace);
+    }
    var layout = {
        title: 'Timing Control Data Blocks',
        xaxis: {
@ -297,7 +264,7 @@ function loadTCGraphData() {
            }
        }]
    };
-    Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
+    Plotly.newPlot('tc_plot_chart', traces, layout);

    var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
 }
--- a/firmware/html/index_template_bottom.html
+++ b/firmware/html/index_template_bottom.html
@ -20,6 +20,7 @@
            </table>
            
            <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
+            <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="fillTableFromJson();">reset</a>
        </div>
    </div> <!-- end of tab-tde -->

--- a/firmware/html/index_template_top.html
+++ b/firmware/html/index_template_top.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Light setup - {{LIGHT_NAME}}</title>
+    <title>Light setup - {{LIGHT_NAME}}{{LIGHT_NAME_DEV_POSTFIX}}</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
--- a/firmware/html/style.css
+++ b/firmware/html/style.css
@ -1,27 +1,42 @@
-#tab-lights, #tab-config, #tab-tde {
+/* Vereinheitlichter Look */
+body {
+    font-family: Arial, sans-serif;
+}
+
+/* Gemeinsame Regeln für die Tabs */
+#tab-lights,
+#tab-config,
+#tab-tde {
    display: none;
    background-color: #ffffff;
    color: black;
    font-weight: bold;
+    padding: 10px;
+    border-radius: 3px;
 }
-#tab-lights.visible {
-display: block;
-}
-#tab-config.visible {
-display: block;
-}
+
+/* Sichtbarkeitsregeln für die Tabs */
+#tab-lights.visible,
+#tab-config.visible,
 #tab-tde.visible {
    display: block;
 }
+
+/* Gemeinsame Regeln für Tabellenzellen */
 .pure-table td {
    padding: 4px;
+    vertical-align: top;
+    /* Hinzugefügt: vertikale Ausrichtung oben */
 }
+
+/* Stil für Formularelemente */
 .pure-form input[type="number"] {
    width: 60px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
 }
+
 .pure-form select {
    width: 80px;
    height: 26px;
@ -29,6 +44,8 @@ border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
 }
+
+/* Stil für Buttons */
 .pure-button {
    background-color: #5a5a5a;
    color: #fff;
@ -38,12 +55,12 @@ padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
 }
+
 .pure-button:hover {
    background-color: #333;
 }
-.top-align {
-vertical-align: top;
-}
+
+/* Stil für die Toast-Nachrichten */
 .toast {
    position: fixed;
    bottom: 10px;
@ -58,12 +75,16 @@ text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
 }
+
 .toast.success {
-background-color: #4CAF50;
+    background-color: #4caf50;
 }
+
 .toast.error {
    background-color: #f44336;
 }
+
+/* Stil für den Range-Slider */
 input[type=range] {
    -webkit-appearance: none;
    width: 70%;
@ -71,9 +92,16 @@ height: 7px;
    margin: 4px 0;
    background-color: #ddd;
 }
+
 input[type=range]:focus {
    outline: none;
 }
+
+/* Spezifischer Stil für Elemente mit ID, die mit "bri" beginnen */
 [id^="bri"] {
    width: 50%;
 }
+
+.top-align {
+    vertical-align: top;
+}
--- a/tools/html2string.sh
+++ b/tools/html2string.sh
@ -4,7 +4,10 @@
 sed -e 's/^[[:space:]]*//' -e '/^\/\/.*/d' $1 |
 # Remove one line comments starting with //
 sed -e 's/^\/\/.*$//' |
-# Remove trailing comments starting with //
+# Remove trailing comments starting with space //
 sed -e 's/ \/\/.*$//' |
+# Remove one-line comments starting with /*
+sed -e 's/\/\*.*//g' |
 # Remove empty lines
-sed '/^\s*$/d'
+sed -e '/^\s*$/d'
+
--- a/tools/html_gen_files.sh
+++ b/tools/html_gen_files.sh
@ -20,5 +20,13 @@ 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 . > /dev/null
+bash ../../tools/html2string.sh ../html/style.css > style.css
+
+#for file in *"_tmp"; do
+#  if [[ -f "$file" ]]; then
+#    new_file="${file%_tmp}"
+#    html-minifier --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true "$file" > "$new_file"
+#    rm "$file"
+#  fi
+#done
Author	SHA1	Message	Date
Kai Lauterbach	07c3b8e5e5	Added a comment with code which could run html-minifier	2023-05-22 16:20:38 +02:00
Kai Lauterbach	10c563a076	css style file will also be cleaned before writing it to data folder now	2023-05-22 15:49:30 +02:00
Kai Lauterbach	41fbb999a7	CSS code formatiert.	2023-05-22 15:40:31 +02:00
Kai Lauterbach	69ebdda269	CSS updated, webinterface is a bit cleaner now. Added a reset button to the tc editor.	2023-05-22 12:12:22 +02:00
Kai Lauterbach	dc3204dc17	Added development into to the title of the webinterface	2023-05-22 12:02:14 +02:00
Kai Lauterbach	4f3fa1a615	Generating traces for the webinterface'sgraphs optimized.	2023-05-22 09:47:15 +02:00