Sending data to uibuilder from function node

General
1 
[
    {
        "id": "1ceef65e4021de52",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "05116951c3e0e7ed",
        "type": "uibuilder",
        "z": "1ceef65e4021de52",
        "name": "",
        "topic": "",
        "url": "TRIAL",
        "okToGo": true,
        "fwdInMessages": false,
        "allowScripts": false,
        "allowStyles": false,
        "copyIndex": true,
        "templateFolder": "blank",
        "extTemplate": "",
        "showfolder": false,
        "reload": true,
        "sourceFolder": "src",
        "deployedVersion": "7.0.4",
        "showMsgUib": false,
        "title": "",
        "descr": "",
        "editurl": "vscode://vscode-remote/ssh-remote+192.168.29.30/home/pi/.node-red/uibuilder/TRIAL/?windowId=_blank",
        "x": 440,
        "y": 160,
        "wires": [
            [
                "7a5ac9642bb69c47"
            ],
            [
                "7a5ac9642bb69c47"
            ]
        ]
    },
    {
        "id": "3f43084dad66cee6",
        "type": "inject",
        "z": "1ceef65e4021de52",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "5",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{}",
        "payloadType": "json",
        "x": 110,
        "y": 120,
        "wires": [
            [
                "927036f479393dd8"
            ]
        ]
    },
    {
        "id": "7a5ac9642bb69c47",
        "type": "debug",
        "z": "1ceef65e4021de52",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 640,
        "y": 120,
        "wires": []
    },
    {
        "id": "927036f479393dd8",
        "type": "function",
        "z": "1ceef65e4021de52",
        "name": "function 1",
        "func": "msg.payload = {\n    \"Extrusion Time\": Math.floor(Math.random() * 200),\n    \"Extrusion Length\": Math.floor(Math.random() * 100),\n    \"Temp\": Math.floor(Math.random() * 400),\n    \"Saw Length\": Math.floor(Math.random() * 500)\n};\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 300,
        "y": 120,
        "wires": [
            [
                "05116951c3e0e7ed",
                "7a5ac9642bb69c47"
            ]
        ]
    }
]

Thats my code what i am missing i dont understand the issue is that i did not get any data from function node to uibuilder node so it does not shows anything on UI leaving Header name and date time also a refresh button.
Please help me out with this issue.

2

Hi, hard to understand what you are missing without knowing the html/javascript you may be using. That isn't exported with a flow, you'll need to share that separately.

Here is a very simple example. This is only 1 way of updating the UI from Node-RED, there are plenty of others.

index.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>Blank template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Blank template">

    <!-- 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"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <script defer>
    </script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">uibuilder Blank Template</h1>
    <div role="doc-subtitle">Using the IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    <div id="xx"></div>

</body></html>

index.js

// Listen for incoming messages from Node-RED and action
uibuilder.onChange('msg', (msg) => {
    // Find the element to update using its ID - set the inner text from the msg
    $('#xx').innerText = msg.payload['Extrusion Length']
})
3

Here the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Data Cards</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .card-container {
            margin: 20px;
        }
        .card {
            margin-bottom: 15px; /* Space between cards */
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12 card-container">
            <h1 class="text-center mb-4">Real-Time Data Monitoring</h1>
            <div id="date-time" class="text-right mb-3"></div>
            <button id="refresh-button" class="btn btn-primary mb-3">Refresh Data</button>
        </div>
    </div>
    <div class="row" id="data-content"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    // Function to update the display with the dynamic data
    function updateData(data) {
        const dataContent = document.getElementById('data-content');

        // Clear existing content
        dataContent.innerHTML = '';

        // Create a card for each key-value pair
        for (const [key, value] of Object.entries(data)) {
            const card = document.createElement('div');
            card.className = 'col-md-4';
            card.innerHTML = `
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">${key}</h5>
                        <p class="card-text">Value: ${value}</p>
                    </div>
                </div>
            `;
            dataContent.appendChild(card);
        }
    }

    // Function to update the date and time display
    function updateDateTime() {
        const now = new Date();
        document.getElementById('date-time').innerText = `Last Updated: ${now.toLocaleString()}`;
    }

    // Function to handle incoming messages from Node-RED
    function handleMessage(msg) {
        // Update data received from Node-RED
        if (msg && msg.payload) {
            updateData(msg.payload);
            updateDateTime(); // Update the time every time we get new data
        }
    }

    // Automatically update date and time every second
    setInterval(updateDateTime, 1000);

    // This function is called when the UIBuilder is ready
    (function() {
        // Listen for incoming messages from Node-RED
        if (typeof RED !== "undefined") {
            RED.addMessageHandler(handleMessage);
        } else {
            console.error("RED is not defined. Ensure you're in the UiBuilder environment.");
        }
    })();
</script>
</body>
</html>
4

Hardly surprising that you cannot get UIBUILDER to work, you haven't loaded the client library.

You have also loaded jQuery but you don't need it and don't use it.

You have referenced a global RED object that will never exist in the client context, that only exists in the Node-RED runtime and Node-RED Editor contexts.

Please use the default template html which will show you how to reference the client uibuilder library.

5

Can You give a good Example

6

This should give you some ideas:

index.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>Dynamic Data Cards - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Dynamic Data Cards">

    <!-- 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="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/</script>
    <!-- #endregion -->

</head><body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-12 card-container">
                <h1 class="text-center mb-4 with-subtitle">Dynamic Data Cards</h1>
                
                <div id="date-time" class="text-right mb-3"></div>

                <!-- On click, message node-red -->
                <button id="refresh-button" class="btn btn-primary mb-3" onclick="uibuilder.eventSend(event)">
                    Refresh Data
                </button>
            </div>
        </div>

        <div class="row" id="data-content"></div>
    </div>

</body></html>

index.css

/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.min.css`
 * This version auto-adjusts for light/dark browser settings but might not be as complete.
 */
/* @import url("../uibuilder/uib-brand.min.css"); */

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");

.card-container {
    margin: 20px;
}

.card {
    margin-bottom: 15px;
    /* Space between cards */
}

index.js


// Function to update the display with the dynamic data
function updateData(data) {
    const dataContent = document.getElementById('data-content');

    // Clear existing content
    dataContent.innerHTML = '';

    // Create a card for each key-value pair
    for (const [key, value] of Object.entries(data)) {
        const card = document.createElement('div');
        card.className = 'col-md-4';
        card.innerHTML = `
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">${key}</h5>
                    <p class="card-text">Value: ${value}</p>
                </div>
            </div>
        `;
        dataContent.appendChild(card);
    }
}

// Function to update the date and time display
function updateDateTime() {
    const now = new Date();
    document.getElementById('date-time').innerText = `Last Updated: ${now.toLocaleString()}`;
}

// Function to handle incoming messages from Node-RED
function handleMessage(msg) {
    console.log('Message from Node-RED: ', msg)
    // Update data received from Node-RED
    if (msg && msg.payload) {
        updateData(msg.payload);
        updateDateTime(); // Update the time every time we get new data
    }
}

// Automatically update date and time every second
setInterval(updateDateTime, 1000);

// Listen for incoming messages from Node-RED and action
uibuilder.onChange('msg', handleMessage)

I've left the references to jQuery in though not sure if you really need them as you seem fine with updating the DOM directly.

You can see that I've also split the code into the 3 standard files that I use with all uibuilder templated code for ease of linting and developing. Everything is loaded in the right order which is critical. I use the defer keyword when loading scripts which allows you to get the same benefits as putting the code at the end of your body section but keeps the actual HMTL layout nice and clean.

CSS is imported in the main index.css file, again to keep the main html clean. I've commented out the default uibuilder css in this case.

In the js, you already had a function to handle incoming messages so I've simply wired that to the uibuilder client event handler for incoming messages and it works perfectly. That is a 1-liner.

In the HTML, I've added an onclick handler (you could do that in your js code of course if you prefer) that sends a standard message back to node-red when the button is clicked.

Check your debug node output for that message - you will want to decide how to process it - possibly just simply a switch node to check that the output is from the button, do whatever you need to do and at the end of that send an appropriate message back to the uibuilder node - the link in/out nodes are great for stopping spaghetti flows.

7

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.