Skip to content
Snippets Groups Projects
Commit 2b4acfb7 authored by Pinguin's avatar Pinguin :penguin:
Browse files

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
parents 1b5ace37 f703b64b
No related branches found
No related tags found
1 merge request!2Resolve "Adapt the WebUI to the new firmware"
Pipeline #190957 passed
# mqtt.js
public/mqtt.min.js
# Logs # Logs
logs logs
*.log *.log
......
...@@ -77,46 +77,46 @@ ...@@ -77,46 +77,46 @@
</div> </div>
<h3>Manuell LEDs einstellen</h3> <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"> <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" /> <input id="led1_inp" type="color" value="#ffffff" />
<label for="led1_inp" id="led1_hex"></label> <label for="led1_inp" id="led1_hex"></label>
</div> </div>
<div id="led2"> <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" /> <input id="led2_inp" type="color" value="#ffffff" />
<label for="led2_inp" id="led2_hex"></label> <label for="led2_inp" id="led2_hex"></label>
</div> </div>
<div id="led3"> <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" /> <input id="led3_inp" type="color" value="#ffffff" />
<label for="led3_inp" id="led3_hex"></label> <label for="led3_inp" id="led3_hex"></label>
</div> </div>
<div id="led4"> <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" /> <input id="led4_inp" type="color" value="#ffffff" />
<label for="led4_inp" id="led4_hex"></label> <label for="led4_inp" id="led4_hex"></label>
</div> </div>
<div id="led5"> <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" /> <input id="led5_inp" type="color" value="#ffffff" />
<label for="led5_inp" id="led5_hex"></label> <label for="led5_inp" id="led5_hex"></label>
</div> </div>
<div id="led6"> <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" /> <input id="led6_inp" type="color" value="#ffffff" />
<label for="led6_inp" id="led6_hex"></label> <label for="led6_inp" id="led6_hex"></label>
</div> </div>
<div id="led7"> <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" /> <input id="led7_inp" type="color" value="#ffffff" />
<label for="led7_inp" id="led7_hex"></label> <label for="led7_inp" id="led7_hex"></label>
</div> </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> </main>
<footer> <footer>
<p> <p>
......
//const mqtt = require("mqtt");
const url = "wss://mqtt.felix-zauberer.de:443" const url = "wss://mqtt.felix-zauberer.de:443"
const options = { const options = {
// Clean session
clean: true, clean: true,
connectTimeout: 4000, connectTimeout: 4000,
// Authentication
clientId: 'kalle_webui', clientId: 'kalle_webui',
username: 'kalle1', username: 'kalle1',
password: 'eZcKn1zBE6KtbeFnZ33lV1EKnr9Bcn8B', password: 'eZcKn1zBE6KtbeFnZ33lV1EKnr9Bcn8B',
...@@ -15,41 +12,38 @@ const client = mqtt.connect(url, options); ...@@ -15,41 +12,38 @@ const client = mqtt.connect(url, options);
client.on('connect', function () { client.on('connect', function () {
console.log('Connected!') console.log('Connected!')
document.getElementById("loading").innerHTML = "Status: Fertig!" document.getElementById("loading").innerHTML = "Status: Fertig!"
// Subscribe to a topic client.subscribe('kalle');
client.subscribe('main', function (err) { client.subscribe('kalle/effects');
if (!err) { client.subscribe('kalle/led/0/color');
// Publish a message to a topic client.subscribe('kalle/led/1/color');
console.log("Fully connected!") 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) { client.on('message', function (topic, message) {
// message is Buffer console.log(topic, ":", message.toString());
console.log(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() { function sendParty() {
client.publish('effects', '{"command": "party", "_repeat": 10}') client.publish('kalle/effects', '["party"]')
} }
function sendLoadingBar() { function sendLoadingBar() {
const hex = document.querySelector("#loadingbar_inp").value; const hex = document.querySelector("#loadingbar_inp").value;
const rgb = hexToRgb(hex); const rgb = hexToRgb(hex);
client.publish('kalle/effects', `["loading-bar", ${rgb.r}, ${rgb.g}, ${rgb.b}]`);
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));
} }
// Funktion zum Konvertieren von Hex zu RGB
function hexToRgb(hex) { function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? { return result ? {
...@@ -59,28 +53,24 @@ function hexToRgb(hex) { ...@@ -59,28 +53,24 @@ function hexToRgb(hex) {
} : null; } : 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) => { addEventListener("DOMContentLoaded", (event) => {
document.getElementById("loading").innerHTML = "Status: Laden..." document.getElementById("loading").innerHTML = "Status: Laden..."
// Ereignislistener für alle LED-Eingabefelder for (let i = 0; i <= 7; i++) {
for (let i = 1; i <= 8; i++) {
document.querySelector(`#led${i}_inp`).addEventListener("change", function() { document.querySelector(`#led${i}_inp`).addEventListener("change", function() {
const hex = this.value; const hex = this.value;
const rgb = hexToRgb(hex); const rgb = hexToRgb(hex);
const ledId = i - 1; const ledId = i;
if (rgb) { if (rgb) {
const message = { const message = [rgb.r, rgb.g, rgb.b]
"command": "color",
"color1": rgb.r,
"color2": rgb.g,
"color3": rgb.b,
"color4": 0,
"led_id": ledId,
};
// Sende die Nachricht über MQTT client.publish(`kalle/led/${ledId}/color`, JSON.stringify(message), { retain: true });
client.publish('main', JSON.stringify(message));
} else { } else {
console.error("Error HEX: ", hex); console.error("Error HEX: ", hex);
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment