What's the latest status on this dashboard? Love the look of it and the potential to define a professional looking dashboard that can sit in any wall mounted central device 
I'm at a point where I assemble the various pieces of the puzzle and while the node-red-dashboard is a great start I probably could see myself outgrowing that.
So it would be great to see the latest iteration of it. cheers
The dashboard uses the default libraries that are provided with uibuilder.
uibuilder v2 has been live for some time now and was recently updated with a small bug fix.
v3 is in development and will be extended with some built-in security features that should work in a very "Node-RED" way over websockets based messaging. You will have uibuilder.logon and uibuilder.logoff helper functions in the front-end along with a standard data structure msg.auth which will carry back and forth the required data such as the JWT.
v3 has a number of other bug fixes as well but v3 and its data isn't quite stable yet as I work through the various use cases and needs. However, it is available for testing and can be installed if you want to.
In terms of the dashboard itself, I'm afraid that I've not had much time over the last few months as I've been doing long hours supporting the COVID response & what little time I had has been spent on other projects. In the next itteration, once I can get to it, I will likely simplify the data being sent and then add some more data. Probably some heating controls.
The point, however, is that there is nothing special about the formatting, it is virtually completely vanilla bootstrap & because bootstrap is integrated via bootstrap-vue, you get it for "free".
There is any reposiroty of this?
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. 
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.
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.
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.
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.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks⢠or registeredŽ trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
