Uibuilder example

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?
20223
When I load the vue example this is the page I get.

That is now the default template.

image

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.

2 Likes

Julian,

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.)

Craig

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.