Merge branch '1-adapt-the-webui-to-the-new-firmware' into 'main'

Resolve "Adapt the WebUI to the new firmware"

Closes #1

See merge request !2

.gitignore

+# mqtt.js
+public/mqtt.min.js
+
 # Logs
 logs
 *.log

public/index.html

@@ -77,46 +77,46 @@
       </div>
 
       <h3>Manuell LEDs einstellen</h3>
+      <div id="led0">
+        <label for="led0_inp">LED 1: </label>
+        <input id="led0_inp" type="color" value="#ffffff" />
+        <label for="led0_inp" id="led8_hex"></label>
+      </div>
       <div id="led1">
-        <label for="led1_inp">LED 1: </label>
+        <label for="led1_inp">LED 2: </label>
         <input id="led1_inp" type="color" value="#ffffff" />
         <label for="led1_inp" id="led1_hex"></label>
       </div>
       <div id="led2">
-        <label for="led2_inp">LED 2: </label>
+        <label for="led2_inp">LED 3: </label>
         <input id="led2_inp" type="color" value="#ffffff" />
         <label for="led2_inp" id="led2_hex"></label>
       </div>
       <div id="led3">
-        <label for="led3_inp">LED 3: </label>
+        <label for="led3_inp">LED 4: </label>
         <input id="led3_inp" type="color" value="#ffffff" />
         <label for="led3_inp" id="led3_hex"></label>
       </div>
       <div id="led4">
-        <label for="led4_inp">LED 4: </label>
+        <label for="led4_inp">LED 5: </label>
         <input id="led4_inp" type="color" value="#ffffff" />
         <label for="led4_inp" id="led4_hex"></label>
       </div>
       <div id="led5">
-        <label for="led5_inp">LED 5: </label>
+        <label for="led5_inp">LED 6: </label>
         <input id="led5_inp" type="color" value="#ffffff" />
         <label for="led5_inp" id="led5_hex"></label>
       </div>
       <div id="led6">
-        <label for="led6_inp">LED 6: </label>
+        <label for="led6_inp">LED 7: </label>
         <input id="led6_inp" type="color" value="#ffffff" />
         <label for="led6_inp" id="led6_hex"></label>
       </div>
       <div id="led7">
-        <label for="led7_inp">LED 7: </label>
+        <label for="led7_inp">LED 8: </label>
         <input id="led7_inp" type="color" value="#ffffff" />
         <label for="led7_inp" id="led7_hex"></label>
       </div>
-      <div id="led8">
-        <label for="led8_inp">LED 8: </label>
-        <input id="led8_inp" type="color" value="#ffffff" />
-        <label for="led8_inp" id="led8_hex"></label>
-      </div>
     </main>
     <footer>
       <p>

public/kalle.js

-//const mqtt = require("mqtt");
 const url = "wss://mqtt.felix-zauberer.de:443"
 const options = {
-    // Clean session
     clean: true,
     connectTimeout: 4000,
-    // Authentication
     clientId: 'kalle_webui',
     username: 'kalle1',
     password: 'eZcKn1zBE6KtbeFnZ33lV1EKnr9Bcn8B',
@@ -15,41 +12,38 @@ const client = mqtt.connect(url, options);
 client.on('connect', function () {
     console.log('Connected!')
     document.getElementById("loading").innerHTML = "Status: Fertig!"
-    // Subscribe to a topic
-    client.subscribe('main', function (err) {
-        if (!err) {
-            // Publish a message to a topic
-            console.log("Fully connected!")
-        }
-    })
-})
+    client.subscribe('kalle');
+    client.subscribe('kalle/effects');
+    client.subscribe('kalle/led/0/color');
+    client.subscribe('kalle/led/1/color');
+    client.subscribe('kalle/led/2/color');
+    client.subscribe('kalle/led/3/color');
+    client.subscribe('kalle/led/4/color');
+    client.subscribe('kalle/led/5/color');
+    client.subscribe('kalle/led/6/color');
+    client.subscribe('kalle/led/7/color');
+});
 
 client.on('message', function (topic, message) {
-    // message is Buffer
-    console.log(message.toString())
-})
+    console.log(topic, ":", message.toString());
+    if (topic.startsWith('kalle/led')) {
+        const number = topic.split('/')[2];
+        const rgb = message.toString().slice(1, -1);
+        const hex = rgbToHex(rgb);
+        document.getElementById(`led${number}_inp`).value = hex;
+    }
+});
 
 function sendParty() {
-    client.publish('effects', '{"command": "party", "_repeat": 10}')
+    client.publish('kalle/effects', '["party"]')
 }
 
 function sendLoadingBar() {
     const hex = document.querySelector("#loadingbar_inp").value;
     const rgb = hexToRgb(hex);
-
-    const message = {
-        "command": "loading-bar",
-        "color1": rgb.r,
-        "color2": rgb.g,
-        "color3": rgb.b,
-        "color4": 0,
-        "time_in_seconds": 1,
-    };
-
-    client.publish('effects', JSON.stringify(message));
+    client.publish('kalle/effects', `["loading-bar", ${rgb.r}, ${rgb.g}, ${rgb.b}]`);
 }
 
-// Funktion zum Konvertieren von Hex zu RGB
 function hexToRgb(hex) {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result ? {
@@ -59,28 +53,24 @@ function hexToRgb(hex) {
     } : null;
 }
 
+function rgbToHex(rgb) {
+    const [r, g, b] = rgb.split(',');
+    return `#${((1 << 24) + (parseInt(r) << 16) + (parseInt(g) << 8) + parseInt(b)).toString(16).slice(1)}`;
+}
+
 addEventListener("DOMContentLoaded", (event) => {
     document.getElementById("loading").innerHTML = "Status: Laden..."
 
-    // Ereignislistener für alle LED-Eingabefelder
-    for (let i = 1; i <= 8; i++) {
+    for (let i = 0; i <= 7; i++) {
         document.querySelector(`#led${i}_inp`).addEventListener("change", function() {
             const hex = this.value;
             const rgb = hexToRgb(hex);
-            const ledId = i - 1;
+            const ledId = i;
 
             if (rgb) {
-                const message = {
-                    "command": "color",
-                    "color1": rgb.r,
-                    "color2": rgb.g,
-                    "color3": rgb.b,
-                    "color4": 0,
-                    "led_id": ledId,
-                };
+                const message = [rgb.r, rgb.g, rgb.b]
 
-                // Sende die Nachricht über MQTT
-                client.publish('main', JSON.stringify(message));
+                client.publish(`kalle/led/${ledId}/color`, JSON.stringify(message), { retain: true });
             } else {
                 console.error("Error HEX: ", hex);
             }