I'm just starting with Node-RED in general, and only yesterday started looking at using it for the dashboard. I'm running it as an addon for HASS and currently using appdaemon for the dashboard but would just like to see what else is available.
I have a pro licence for Fontawesome 5. So, first question is whether this can be used. From what I've tried, I don't think it can. Things like far fa-lightbulb and just fa-lightbulb don't seem to work so I'm using fa-lightbulb-o for the moment just to get going.
However, it seems to be ignoring my colour choice. This is what I have for my switch which toggles the state of a bulb:
But if I swap them, which is what I want, the first click on the switch is ignored but the colour of the icon changes. Subsequent clicks toggle the light but the icon colour is reversed. I've cleared my cache, refreshed but nothing makes a difference.
You are correct - we have Font Awesome 4.7 icons built in so are sticking with those as they will work offline.
Not sure what you are seeing re switch output - can you add a debug node to it to check that it is switching. I don't use HA - but certainly a simple switch plus debug toggles its icon no problem.
Cool. That's a shame now that I've spent $99 on the Pro licence What I'll probably do is leave HADashboard on my tablets and then create myself a Node-RED dashboard just for me on my phone and laptop with more functionality.
I've worked out what's going wrong. It came to me while I was wandering round the supermarket and I've just got home and done a quick test.
The first flow is a slider for the brightness. So that sends the level to the call service node and switches the light on.
The second on is just a plain switch.
If I set the brightness to zero, the bulb goes out but the first flow doesn't know and still thinks the bulb is on - orange icon. What I actually want is to set the brightness at 50% and then when the switch is used, the brightness goes down to zero and the switch is set to off. On again and the switch goes to the on state and the brightness comes back to 50%. Set the brightness to zero, switch goes off, set the brightness > zero and the switch goes on.
I only started this last night so I think I have a lot of reading to do. I'll happily play for hours and don't expect people to dig me out unless I get really stuck.
You may want to look at node-red-contrib-uibuilder for when you want to go full custom dashboard as you can bering whatever framework you like to play - albeit at the expense of you now have to build it all yourself... but at least you can use all your assets
I definitely want to look at this. I know a little bit of front end dev stuff as it goes with the territory for what I do for a living. I'm not a dev by any means but I can hack my way round.
Haha, neither am I but I still managed to hack together uibuilder
uibuilder already includes VueJS and bootstrap-vue "out of the box" so you don't need a lot of code to get going. Adding FA 5 should be trivial. Do raise a post here in the forum if you need any help with uibuilder.
I've started playing with it and like it so far. The kicker for me is the lack of FA 5 support. I have asked here and it only supports 4.7 which is a shame as it would be a waste of $99 not to be able to use all my nice icons.It would probably be beyond me to mess with it and, from experience, a lot of things like that get overwritten if you update.
I'm probably going to keep appdaemon on my tablets and use ui builder to create something for my phone where the functionality is more important than the look and feel as it'll only be me using it.
hopefully you will see that using uibuilder to build good looking UI's isn't that hard Don't forget that if VueJS isn't your cup of tea, you can just swap to any old framework (jQuery for example) or even code things from scratch, uibuilder will simply help you with the communications and serving up any packages as well as your custom code.
Certainly using FA 5 will be no issue. Using VueJS with bootstrap-vue makes it easy to get responsive UI's as well that resize nicely on different screen sizes. Though of course, there are plenty of other frameworks that will do this for you as well.
I have a home dashboard done this way and it resizes nicely from desktop, through tablet to mobile phone. I didn't have to do much for this to "just happen".
Thanks. I'm just having a quick scan through things now. Is there somewhere where I can see examples? At the moment I'm struggling to work out the connection between the front end and my HA devices at the moment. If I could just do something like control a single light then I think the penny would drop and I'd be away.
Hi, there are some examples that come with the installation, check out the import > library > examples. There are more examples in the WIKI.
Generally, this will happen via Node-RED. Normally, your devices will talk to MQTT and MQTT to Node-RED via appropriate subscriptions. That can then be send into a uibuilder node where it is forwarded to the front-end.
Similarly, any return data such as settings or control changes follow the reverse path.
Of course, you could also implement MQTT in the front-end as well if you wanted to but because Node-RED is so reliable, I find it best to channel everything through it.
The way I do it is that the actual control comes from Node-RED, I can turn on and off lights from inject nodes manually from the Editor but that is only really for testing. I also maintain the schedules in Node-RED. Then the front end is much simpler and typically I only show the current status and have a simple override switch. Mostly, you want your control UI's to be as simple as they possibly can be so that they work with limited screens, no keyboards and, most importantly, are family friendly.
Having said that, now that CRON+ s available and stable, one of my next changes will be to surface my lighting schedules into a front-end as well. Eventually I will then make the schedules editable from the front-end. That wasn't so easy in the past and I never really needed to do it because the schedules were very static and only needed an occasional manual override.
What I'll probably do is leave HADashboard on my tablets and then create myself a Node-RED dashboard just for me on my phone and laptop with more functionality.
Don't forget that if VueJS isn't your cup of tea, you can just swap to any old framework (jQuery for example) or even code things from scratch, uibuilder will simply help you with the communications and serving up any packages as well as your custom code.
