Uibuilder output

General
1

Hi everyone,

May I know how to create a "button" using pure javascript? I've created one using html, css and javascript but I am having issues with sending the output. I tried with uibuilder.send but nothing showed up in the debug node that I connected to the uibuilder node.

2

Assuming you are using the default VueJS, you should look to that to create dynamic elements from JavaScript.

The simple thing is to pre-define the button but have it hidden until you send some data. Look at v-if for that. However, VueJS does let you create things dynamically as well.

Either way, the JavaScript should be defined in index.js rather than being sent from Node-RED. You can send JS, check out the advanced settings in the Editor. But generally you shouldn't. Indeed you generally will not need to. Send DATA from Node-RED, not code.

3

I am actually not looking at using VueJS, I want to recreate the dashboard "button" using uibuilder through vanilla javascript. So that I can further customize it. I already have a readily made UI that runs on regular browser, but instead of sending the payload, I am currently using console.log to replace that part to emulate what I can expect when I use uibuilder. I am not sure if I understand the send data from node-red not code part. I am still relatively new in html, css, and javascript. My goal is to produce my own design that I have for so long. So I want to start by recreating all the nodes available in the dashboard (like buttons, sliders, gauge and so on) and use them whenever I need them. My only current issue is the button that I created can't be triggered on the ui page, because console.log doesn't work there. My understanding is that I can just replace 'console.log' with 'uibuilder.send' and the magic will happen. But I tried that and didn't work. Maybe I missed out some important parts and I also tried to initialize using 'uibuilder.start'. Still no luck with that.

4

OK, so you are certainly taking the harder road but it can be done. To create a dynamic page using JavaScript means that you need to manipulate the DOM from JavaScript and this is certainly possible. You will find plenty of tutorials on the subject.

When I talk about sending data not code, I mean that your code should be static (e.g. be a file that is loaded as a static resource using a script tag with a source attribute) and that static code should have the smarts to take data that is sent to it from Node-RED (over uibuilder's websocket connection). The data is taken in by your static code file which decides what to do with it. This is opposed to creating and sending javascript code over the websocket connection. Sending code can be very insecure and may be quite inefficient. It should be avoided if at all possible.

So your static js file will probably have functions that let you create HTML by manipulating the DOM. Each of those functions is called by using the uibuilderfe's onChange function which watches for incoming messages from Node-RED. The data you need to send might include the type of html tag to create (e.g. button or div), the text content and anything else you need to pass that controls what your script creates in the DOM.

BTW, if you want a 1/2 way house, consider using jQuery which is very javascript based but gives you lots of helpers that makes manipulating the DOM a lot easier, it also has loads of plugins/extensions that create standard UI elements.

For your button, you should ensure that a button press triggers a javascript function. uibuilderfe includes the nice simple uibuilder.send() function - don't forget that the parameter that function takes is the same as sending a msg in Node-RED, so a JavaScript object something like {topic:'mymsg', payload: 'mydata'}. Also check out uibuilder.eventSend function which you can connect direct to the button press event. Details for these are in the technical docs which you can access from within the Editor or online in GitHub.

5

That looks very nice and I can't wait to try it out! Thanks for your helpful input.

6

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