Mqtt Werte in Ui-Builder anzeigen

General
,
1

Hallo zusammen,
da ich noch ein absoluter Anfänger bin. Möchte ich in diesem Forum um Rat fragen.
Ich verwende einen ESP32 Modul mit einem BME688 Sensor von Bosch, welcher die Werte per MQTT an einen Raspberry CM5 liefert. Diese Werte kann ich auch in Node-Red auslesen und sehe sie auch im Debug-Fenster.
Jetzt versuche ich die Werte über Ui-Builder an eine HTML Seite anzeigen zu lassen. Was leider nicht funktioniert.
Anbei meine Dateien die ich verwende:
index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>MQTT Dashboard</title>
    <!-- uibuilderfe lädt die benötigte Front-End-Bibliothek automatisch -->
    <script src="./uibuilder/vendor/uibuilder/uibuilderfe.min.js"></script>
</head>
<body>

    <h1>Live MQTT Daten</h1>
    <div>
        <!-- Hier wird der MQTT-Wert eingefügt -->
        Temperatur: <span id="Temperature">Warte auf Daten...</span> °C
    </div>

    <!-- Verknüpfung zur Logik-Datei -->
    <script src="./index.js"></script>
</body>
</html>

index.js

// Initialisiere uibuilder Verbindung
uibuilder.start()

// Höre auf eingehende Nachrichten aus Node-RED
uibuilder.onChange('msg', function(msg) {
    // Überprüfen, ob die Nachricht existiert
    if (msg) {
        console.log('Nachricht empfangen:', msg);

        // Prüfen, ob die Nachricht vom richtigen MQTT-Topic kommt (optional)
        if (msg.topic === 'payload.BME680.Temperature') {
            // HTML-Inhalt mit dem MQTT-Payload überschreiben
            document.getElementById('Temperature').innerText = msg.payload;
        }
    }
});

Über jeden Hinweis oder Tipp wäre ich sehr dankbar :hugs:
Grüße
Guido

2

I would check the console.log to verify the msg

I would normally expect the msg.topic from MQTT to be something like 'BME688/Temperature' with the msg.payload to be either a number or text (depending on what you are sending from the ESP32)

3

Hi,

You are using outdated code I'm afraid and your link to the client library is incorrect. You are also missing a link to the socket.io client code.

If you want to use the old-style library (which I really don't recommend), where your index.js line is, amend that to the following and remove the incorrect link in the head section:

    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="./uibuilderfe.min.js"></script>
    <script src="./index.js"></script>

I also think there is an error in your JavaScript as well if (msg.topic === 'payload.BME680.Temperature') - 'payload.BME680.Temperature' does not look like a message topic, rather it is content from the message.

However, a much better solution is to move to the newer version of the client that we switched to as a default back in v6.0 of UIBUILDER (we are now in v7.7).

The best approach is for you to add a new test uibuilder node to your Node-RED instance - it will deploy the latest default template which you can then adapt.

With the this version, there isn't as much boilerplate code required and, you may not even need any of your own JavaScript since uibuilder now has simpler methods for showing output from Node-RED.

If we assume that your msg.topic is "BME680-Temperature", then you can automatically display it using the following HTML:

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Live MQTT Daten - Node-RED UIBUILDER</title>
    <meta name="description" content="Node-RED UIBUILDER - Live MQTT Daten">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
    <!-- <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>-->
    <!-- #endregion -->

</head><body>
    <header>
        <h1 class="with-subtitle">Live MQTT Daten</h1>
        <div role="doc-subtitle">Using UIBUILDER for Node-RED</div>
    </header>

    <main>
        <article>
            <!-- Hier wird der MQTT-Wert eingefügt -->
            Temperatur:
            <span id="Temperature" uib-topic="BME680-Temperature">
                Warte auf Daten...
            </span> °C
        </article>
    </main>
</body></html>

See the following in the docs for details of the easy display methods: