New home dashboard using uibuilder and bootstrap-vue

I'm afraid not, it is currently far too intertwined with the home hardware and even if I shared it, it wouldn't be of a lot of use. Also, it still needs a lot of work, this was a first attempt and I want to restructure but I'm also creating a new HA platform, moving off a couple of Pi's and I continue to develop uibuilder and some other nodes. Then work and COVID-19 got in the way and scuppered any personal development time for several months.

I tend not to do much work on the home dashboards during the summer months anyway, as winter draws on, I will likely resume work on it. If, that is, I haven't' convinced myself that there are a thousand other interesting projects to dabble in. :smile:

I get it, I'm trying to make a dashboard using tabs, but I don't know much about that, just if you can check my post, could you give me and advice?. I'm triying to use the node-red-contrib-uibuilder to build a dashboard and in my tabs I will put some buttons and graphs.

https://discourse.nodered.org/t/tabs-on-dashboard/29687

Ah, OK. So uibuilder comes with VueJS and bootstrap-vue by default. So assuming you are happy to continue using those libraries, you will want to go to the bootstrap-vue website and look at how they have implemented tabbed interfaces via a component that is built into bootstrap-vue.

I think that I've actual shared the html code previously that contains the tabs. Unfortunately, it is currently all in one file which makes it hard to follow.

So the easiest thing is to follow the docs for bootstrap-vue. It is really quite easy. Let me know when you've had a go if you are still getting stuck, you should then be in a position to share your own code which will hopefully be simpler than mine and we can go through it if you need help.

Alright thaks for that, so my last question is ...
how can I do to use my functions, on Node-Red because I have some flows that I need in that new dashboard, Is my firts time using web apps with hardware. I have my dashboard but with the dashboard node, and as I know with Flask, I need to import from another file.py.

You sound like you are new to Node Red. If so - why not use the standard dashboard until you become comfortable and then if you find it lacking take on uibuilder - its not hard to use - but does take time to get your head around it - so it would not be the first thing i would tackle unless i was a proficient UI coder

Craig

@craigcurtin actually I have a dashboard but now I need the new dashboard

An advice: you can run multiple instances of Node-RED with different workspaces using the -u parameter.
That way you can leave your current dashboard running and untouched, while developing the new one independently.

1 Like

Not quite clear what you are asking there.

You have some code in Flask that you want to use in Node-RED? Or you have you have some code that you want to run in the browser?

@TotallyInformation I have this dashboard with some MQTT...

So I want to create tabs in the same place to put in order another gauge indicators and buttons to have it with more style and order and I see this post because someone recommend me ui_builder so I was looking for some examples to do what I want

Hi again, I'd love to have more time to provide more examples but I'm afraid it isn't possible. I do occasionally get something out and sometimes other people also contribute examples.

Remember as well that uibuilder isn't specific to Vue/bootstrap-vue, I could be creating examples forever as there are so many different front-end libraries around and they all work with uibuilder.

As I said, you are really now in the realm of VueJS and bootstrap-vue and there are loads of examples and tutorials about those libraries since they are so well used.

In reality, uibuilder is giving you a link between Node-RED and your front-end (browser) code. If you have the default template code up and running, you already have all of the uibuilder part and a smattering of Vue/bootstrap-vue.

Take a bootstrap-vue tabs example from elsewhere on the web and put it into the default template or the simplified example template (import/library/examples/uibuilder in the Node-RED menu).

If you get stuck with the uibuilder part, I'll be more than happy to help further.

Yeah I'm trying to build something like this....

Hi, bro the most that I could do is this, but i want to use the bootstrap, some help.

[{"id":"ac325f94.5eecd","type":"uibuilder","z":"49b253e4.9f4cdc","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":250,"y":100,"wires":[[],[]]}]

Looks like you've got the basics but you need to share your front-end code. Specifically the index.html and index.js files.

@TotallyInformation Great example!

I'm currently trying to build my first ui with ui_builder. Could you please show the code of the "Create Home Details" function? I'm not sure how to build the messages sent to the ui_builder (it is JSON, right?)

Thank you in advance.

Hi, the code is very specific to my setup and not worth sharing. It would hinder more than help.

uibuilder is a vehicle for helping manage data-driven web apps. You write the web app (front-end code). One of the things uibuilder does is to provide a standardised websocket interface between Node-RED (the back end) and your web app (the front end).

Mostly, if you just send a message into your uibuilder node in Node-RED, you can see it pop into your front-end code - the default template will even show it on-screen for you.

Compare what you see in the front-end with what you see in Node-RED (put a debug node on the output of the node you are using just before uibuilder and set it to show the whole msg). You will be able to see that they are the same.

So send whatever you like to uibuilder. You have to write a function in your index.js file to make sense of and process the input. Again, the default template shows you all of the basics. Try the other examples in the library as well.

2 posts were split to a new topic: Using uibuilder with a Vue UI designer?

@TotallyInformation: Thank you very much for your great work!

In your first post there was also a picture with the flow in NR (...Though the "Create Home Details" function node is 260 lines long...). Later in this thread you have kindly provided the html and js file for this example, but not the flow itself. Would it be possible to get also the NR flow to be able to understand the whole thing better (e.g. data exchange between NR and uibuilder).

Thank you very much.

Hi, I'm afraid that I can't provide the flow as it is too wrapped up in devices that only I will be using. If you don't have the devices I do, the flow would be meaningless I'm afraid. For example, a lot of the flow deals with data from the Drayton Wiser smart home heating system because it doesn't have a published API and so I have to do a lot of work to make sense of the data including room to device mappings, normalising data, combining data from different parts of their REST API and so on.

I've always intended to do a new version that doesn't just dump a massive dataset to the front end every minute! I'm still working on that between work and all of my other projects.

A post was split to a new topic: Looking for new front-end for my home automation