Uibuilder node (uibuiderf.js library)

General
1

Hello, i'm questioning about the possibility of making a function in my front-end code launch only when she's given action by another node in node-red, i heard about the uibuilderf.js and the on.send fucntion but i didn't figure it out quite perfect.
Does it work if i make the fucntion in node(fucntion) and maybe then using uib sender.
thanks in advance

2

uibuilderfe.js is the current front-end library for uibuilder. The current version is loaded via a script tag in your index.html file. Once loaded, it automatically runs.

In order to trigger something in your front-end code when a message arrives from Node-RED (via the uibuilder node), you use the onChange function like so:

function myFunction() {
    console.log('myFunction is doing something!')
}

uibuilder.start()

uibuilder.onChange('msg', (msg) => {
    if ( msg.topic === 'action1' ) {
        myFunction()
    }
})
3

Hi again,
can you explain further more about the parameters of the uibuilder.on change()
what is specifically the msg.
thanks in advance

4

i have this code

$(document).ready(function () {
	$(".valve").on("click", function valverotate () {
	  $(this).addClass("valve-rotate");
uibuilder.onChange('msg', (msg) => {
    if ( msg.topic === 'true' ) {
        valverotate()
    }
})

i still don't know what to write in the msg in uibuilder node can u specify more.
thanks in advance

5

There are two parameters. The first is the name of the internal variable that you want to watch. In this case, something called msg :wink:

The 2nd parameter is a function that is executed when the selected variable changes. That function itself has a parameter that I've called msg again here because that's exactly what it is - the same message you see going between nodes in Node-RED. When you send a msg to your uibuilder node, it flows through from the server to all connected clients (unless you've specifically restricted it to 1 client) and will trigger your function passing in the msg object.

You appear to be using jQuery which is fine.

There are, however some problems with your code. Firstly, you need to properly close off all of the nested functions.

Next, you need to know that the uibuilder.onChange does not need or want to be inside your click function. I suspect a translation issue in your original post. You said you wanted to do an action when sent information from Node-RED. That is what the onChange function lets you do - listen for a msg and do something with it.

But in your code you now want to send information back to node-red when the user clicks something. So that is in the opposite direction.

In the code below, I've shown you handling both incoming messages and sending messages back to Node-RED.

Please to take the time to explore the example templates that you can load in a uibuilder node. Following the code in those will explain all of this as does the extensive documentation.

In particular, please read the getting started guide that is available online and in the tech docs.

$(document).ready(function () {
    uibuilder.onChange('msg', (msg) => {
        if ( msg.topic === 'true' ) {
            valverotate()
        }
    })

    $(".valve").on("click", function valverotate () {
        $(this).addClass("valve-rotate");
        uibuilder.send( {"topic": "user rotated valve", "payload": "valve rotated"} )
   })
})
6

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