Uibuilder example

You first need to specify an endpoint url in the uibuilder node. then point your browser to the same ip/path.

I can see the page, and I see the message back from the page in your example, but I don't see where the inject node info winds up. Looking at the .js file it seems to me the msg.payload from the inject node should come up in the button text?

Please share both your flow and a listing of /home/pi/.node-red/uibuilder/uibuilder I think you have deleted something you shouldn't have.

You didn't answer whether you had tried the built-in examples from the library or the external template example?

?? Not sure what you mean. A simple uibuilder example is

inject -> uibuilder ---> msg debug
                             +-> msg debug

Add a new uibuilder node to your flow. Open the editor panel, change the URL to test. Click Done and then deploy. Reopen the editor panel and click on the button to open the page - should get a very boring page.

Now look at the templates section and load a more interesting template. Click done and deploy. Reload your page and it should different.

Now add an inject node and check that the msg has reached your page.

Now add a debug node to the top output of the uibuilder node. If you chose the VueJS template (and assuming you followed the instructions to install VueJS and bootstrap-vue), you should have a page with some inputs. If you use those, you should see messages in Node-RED.

OK, I'll create something - But I want suggestions about what what you think something practical is please.

If you find anything like that in the uibuilder documentation, please do let me know directly. I'm happy to correct it but it takes feedback from the community which, to be brutally honest, is very rare. As the developer, I am too close to it and so I don't always see what might be missing or wrong or badly structured. Only other people can realistically see that.

There are, of course, simple examples built into the examples library - does anyone use them?

1 Like
[{"id":"43d21d586cfa370c","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"e480e0590af03f62","type":"uibuilder","z":"43d21d586cfa370c","name":"ui test","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"reload":true,"sourceFolder":"src","credentials":{},"x":410,"y":200,"wires":[["4ca364b74d71042f"],["010bfc67300c08ec"]]},{"id":"f148a57c8a9bd55a","type":"inject","z":"43d21d586cfa370c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"next","payload":"example","payloadType":"str","x":200,"y":200,"wires":[["e480e0590af03f62","8f1c65acc5745118"]]},{"id":"4ca364b74d71042f","type":"debug","z":"43d21d586cfa370c","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":180,"wires":[]},{"id":"010bfc67300c08ec","type":"debug","z":"43d21d586cfa370c","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":240,"wires":[]},{"id":"8f1c65acc5745118","type":"debug","z":"43d21d586cfa370c","name":"3","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":460,"y":80,"wires":[]}]

I went into the forum and did a search for uibuilder and about 10 or so flows came up. That's where I got the flows. Haven't tried any of the examples from the import nodes screen. Didn't know there was any in there.
Using the @bakman2 example in this thread he said to put an inject node on the uibuilder node to send a message to the page.

Just went into the examples and there was one labeled "simple" which I did load, and although the page did come up there was no "quote" on the page. However, I'd like to slog through the current flow and see if I can get the inject to work.
[EDIT] What I was really wanting to see was info going to the page and info coming back to node red. The example @bakman2 provided seemed to me exactly what I was looking for. The "simple" example doesn't show any info going back and forth.

Even without deploying your imported code, I couldn't get the error you did. Though I did get something not terribly different:

I will fix that so that you cannot try to edit anything until you have deployed for the first time.

Please use my walkthrough above and see what you get.

OK, I think that the web site it used has gone away. So much for "practical" examples!

Use the VueJS & Bootstrap-vue template.

Loaded the vue example and see info going to the page but what I really would like to see is an example of a page with a button or whatever that I can send info to the page and info back to node red so I can dissect what is happening and hopefully be able to recreate that into something useful for me.

[{"id":"43d21d586cfa370c","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"e480e0590af03f62","type":"uibuilder","z":"43d21d586cfa370c","name":"ui test","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"reload":true,"sourceFolder":"src","x":400,"y":200,"wires":[["4ca364b74d71042f"],["010bfc67300c08ec"]]},{"id":"f148a57c8a9bd55a","type":"inject","z":"43d21d586cfa370c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"next","payload":"example","payloadType":"str","x":200,"y":200,"wires":[["e480e0590af03f62","8f1c65acc5745118"]]},{"id":"4ca364b74d71042f","type":"debug","z":"43d21d586cfa370c","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":180,"wires":[]},{"id":"010bfc67300c08ec","type":"debug","z":"43d21d586cfa370c","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":240,"wires":[]},{"id":"8f1c65acc5745118","type":"debug","z":"43d21d586cfa370c","name":"3","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":390,"y":140,"wires":[]}]

This is the flow I'm playing with and can't see where the inject node info goes.

That is EXACTLY what the Vue example page does. Click the button and, assuming that you have connected an output debug node, you will see the data coming back from your front-end. That was the whole purpose of that template - indeed, for quite a while, that was the default template but quite a few people complained that it was too complex.



1 Like

Sorry, that last image was from my test system and wasn't working properly. This is from my live system with your flow. I pressed the button once and injected the inject once:

Where was that page from?
When I load the vue example this is the page I get.

That is now the default template.


Select the first template in the list. Press the Load Button. Confirm the dialog which tells you your code will be overwritten. Press Done. Deploy if the Editor shows that you should.

If you ticked the auto-reload, any open page will be reloaded with the new template.

Actually, the last 2 steps above aren't needed as long as you have previously deployed the node. You MUST deploy the node early on and before you make any other changes (you can change the URL before deploying for the first time but you shouldn't edit any of the files.

After doing what I think I needed to I get this. Had to go to library manager and add two libraries.

Ok, didn't load a library correctly, now I get the page you showed. Need to put this away for a while as I'm now dizzy with all going on and need to step back from it for a while. I will look at the example page and see what is going on. Thanks for hanging with me on this.

I think that one of the code revamps I'm working on will let me introduce auto-installs for dependencies so I'm hoping to be able to simplify that in the future.



On of the things that nearly everyone seems to come up with at some stage is the desire for a Temperature Widget./Sensor of some kind.

Maybe your example could show how to build a simple dashboard with a temperature sensor and a graph of the (say) last 12 hours temps on it

If you could demonstrate how the data would come in through MQTT and then be sent to the dashboard widget - i think this would be a great start.

Maybe @hotNipi could then chime in with some of his fancy widgets and add them to the basic example you create - and then (say) Bart with his Multistate switch (or Dave could chime in with a couple of the standard nodes that we are used to seeing on the normal dashboard.)


Thanks Craig, helpful.

What I'm thinking is a couple of walkthroughs.

A basic one that takes you from zero to a page with some simple text displayed from a Node-RED inject and a button and input field that sends data back to Node-RED.

The 2nd one would build on that and take you from the simple example to using a couple of components as you have outlined.

The first shouldn't take too long to do.

The 2nd might have to wait a little longer though because currently I am up to my armpits in bits of uibuilder code - continuing to pull it apart and restructure some parts into modules (currently the package management is in pieces :slight_smile: ) and also desparately trying to make more sense of the security features. I am also in the process of adding some internals that will allow easy access to uibuilder comms from other nodes as a first stage to opening up uibuilder as a potential framework.

Of course, perhaps someone could take on the 2nd walkthrough themselves :grinning: That would let me continue to focus on improving the uibuilder core.

I suspect that Bart is somewhat overloaded already and I already produced an SVG example :grinning: Not as advanced as the UI one but it does the basics. There is also a simple gauge example.

So there are some components that can be built into a walkthrough.

Please see the first part of a walkthrough in this thread:

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