Mqtt Werte in Ui-Builder anzeigen

General
,
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: