Plot and button on uibuilder

General
1

Hi guys I'm trying to create a table and some buttons in the uibuilder, so basically I have some values comming from mqtt node and a button to send on in the ui, This is my flow.

[{"id":"8308324c.987ff","type":"uibuilder","z":"600a74c8.3d1c8c","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":390,"y":180,"wires":[["442af1d7.20e65"],[]]},{"id":"442af1d7.20e65","type":"debug","z":"600a74c8.3d1c8c","name":"msg from button","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":650,"y":180,"wires":[]},{"id":"72b0ed41.17e344","type":"inject","z":"600a74c8.3d1c8c","name":"data to plot","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$random()","payloadType":"jsonata","x":170,"y":180,"wires":[["8308324c.987ff"]]}]
2

And?

What is your issue/question?

Bootstrap-vue has 2 table components built in. The default template has a button example already coded on it.

3

my issue is how can I set the input to plot in the graph and how can I do to send the button on my flow to the debbug node.

4

Hello lalo,

did you manage to get the basic example flow working using uibuilder?
you should start with that before figuring out how to present your data to a chart or a table.

uibuilder is like a bridge between node-red server and a frontend website .. it helps you extend the basic ui_dashboard components and use the full power of html, javascript and additional libraries to build your own custom dashboard

there is some good documentation here that explains the features
and also you can watch this video on youtube that demostrates the use of uibuilder

2 Likes
5

Thanks I will check it.

6

Please use the default template and the other examples that come with the uibuilder node to get a feel for how things work.

You will find examples for various charting libraries on the uibuilder WIKI on GitHub.

7

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