How I can received messages in uibuilder

Dashboard
1

I have a question, how can I receive messages in the Buider UI. I have an msg.payload input message in the ui Builder. The question is how can I receive the message in html or javascript to work with this variable in my personalized dashboard.

[{"id":"b97de41d.fe2828","type":"uibuilder","z":"d439d4bb.c947a8","name":"","topic":"","url":"andon","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":790,"y":600,"wires":[,]},{"id":"bc6395b2.9149d8","type":"function","z":"d439d4bb.c947a8","name":"andon","func":"var cond = msg.payload\nif (cond === true) {\n msg.payload = 20;\n} else {\n msg.payload = 0;\n \n}\n return msg","outputs":1,"noerr":0,"x":510,"y":620,"wires":[["b97de41d.fe2828"]]},{"id":"e1f383a1.a492","type":"inject","z":"d439d4bb.c947a8","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":560,"wires":[["bc6395b2.9149d8"]]},{"id":"2fa061c8.6d50de","type":"inject","z":"d439d4bb.c947a8","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":680,"wires":[["bc6395b2.9149d8"]]}]

2

You need to wrap your code in back ticks so that is is readable.

The default template shows you how to receive the msg in the front-end code. By default, the uibuilder front-end template html file loads an index.js for your own code. The uibuilder.onChange('msg', function(msg){...}) function in that file executes a function when a msg is received from Node-RED. The single parameter is the msg that is received. As the uibuilder library is independent of the framework being used, you can use it with any (or none).

3

I'm sorry, TotallyInformation I didn't understand. I created a page for a website where I want to use data (msg.payload) on node-red. The scripts are in the ui builder node (index.html, index.js and index.css). I have a gear.png image and a javascript script to rotate it, but I need a node-red variable, for the image to be stopped or rotating according to the variable.

4

In Node-RED, attach your variable data to the msg that is going into the uibuilder node.

In your index.js, add a console.log statement to the onchange function:

uibuilder.onChange('msg', function(msg){
    console.log(msg)
})

Open the developer tools in your browser when looking at the uibuilder page. Choose the console tab.

Now send the msg from Node-RED and you will see that each time you send a msg, you get the message reflected in the browser console.

In order to control the image rotation, possibly the easiest method is to use 2 CSS classes. Using VueJS, you can dynamically swap classes. But you can also dynamically control CSS styles as well.

Of course, if VueJS isn't your thing, you can use a different framework instead, uibuilder should work with anything. Or indeed with no framework at all if you want to hand code things.

5

I'm testing, but I'm not getting it, TotallyInformation you can access my pc remotely to help me?

6

Can you instead show what you’ve tried and isn’t working?

7

Hi, I was try but by message is very difficult explain.

8

No, I mean literally show. Post code fragments, take screenshots, show what you’ve tried. Without any of that we can’t really help, and future readers finding this topic with the same issue won’t be helped either.

9

This is code, I need control the rotation a gear.png, I inserted the code that TotallyInformtion said uibuilder.onChange('msg', function(msg){console.log(msg)}) for control with message from node-red. The image aready spinning, I need start and stop with message node red node uibuilder.

//Block function(in node red
var cond = msg.payload
if (cond === true) {
msg.payload = 20;
} else {
msg.payload = 0;
}
return msg

// HTML (This code was insert in html)

img id="img2" src="images\cog2.png" alt="cog1"
script>rotateAnimation("img1",30);

// JavaScript Document
var looper;
var degrees = 0;

uibuilder.onChange('msg', function(msg){
** console.log(msg)**
})

function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(''+el+'','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}

10

No, sorry I don't do that.

1 Like
11

You need to wrap your code in backticks so that it is readable.

12

Hello TotallyInformation how I can to take the value of variable newValue with the message that came the node-red.