It's pretty crazy how much work Nabu/HA has put into the dashboard design. When I first started roughly 6 years ago you had to use yaml if you wanted to do anything remotely stylish or use custom lovelace cards or mods from HACs. I almost feel like I need to completely rebuild my main dashboard or slowly create a new one using the newer methods available. I'm still have to edit the yaml file anytime I want to change anything. Same for the automation/script GUI. Extremely helpful. A sticky navigation bar would be useful so thanks for this. Heck, they only started voice a year ago and I'm using a custom open ai repository for voice and it allows multiple or combined commands and does things that the vanilla HA solution can't and doesn't need a specific phrase. Now, I just need to create a LLM AI based on Open AI so it's all local but regardless it controls everything and gives me any info I need. That and openeakeword which allows creating custom wake words which is neat.
The whole voice thing is something I need to get into. You use Open AI? Does all the api calls cost you lots each month? Exciting opportunities ahead for sure
@@My_Smart_Home Right now I've got a developer API key and you get a certain free amount of API calls and you can set a dollar limit .I haven't been charged a cent yet and I've set mine to 5 bucks a month for API calls but that's another reason I want to move to a local open ai, they just typically want 8GB or ram . They can run on less but then they are slow. If you go local no API key or limit to worry about. I added the "Extended OpenAI Conversation" custom repository in HACs, not to be confused with the non custom OpenAi Conversation that already exists in HACs, you have to add the URL. I watched a few videos from this one guy, searching for "Build a LOCAL ChatGPT Voice Assistant For Your Smart Home" will lead you to his videos. There are a few and that's not the first but shows what's needed and he has videos for every step. If you have an Android phone that's the easiest test as you can make the HA voice assistant your default voice assistant, it just doesn't work with wake words so you have to long press the power button. Not sure if this is a Google limitation but I imagine it is. There is a way to do it on iOS although I'm not familiar. Second beat and cheapest device is an m5stack atom echo which can have a small battery attached (tailbailt) for around 15 dollars for both, then the pi hat the guy in the video referenced above. I'm using an add-on that allows a USB speakerphone to be plugged directly into the HA server . It works best as it's one of those round speakerphones meant for conference calls so it has multiple microphones. My biggest issues are false positives on the trigger word when watching TV. The m5stack has a button so you can choose that over a wake word which can be convenient. You can flash those on website and they just show up in esphome to add. The other issue is my phone for a dumb reason, when I couldn't find my phone I could yell "hey Google, what time is it" until I could hear it. If you set HA as your main voice assistant on Android that doesn't work because of the wake word not working.... Silly but useful way to find a phone. Also, with scripts you just have to say the script name instead of "turn on script name and add aliases to call it different things as long as that alias isn't in use for something else so if you had a switch named " LG TV power" you could add an alias of " TV" and just say turn on/off TV.
Thank you for the video, everything is very well explained, and it looks great. I have a question: How can I make it so that clicking on one of the buttons in the sticky bar closes the popup if it is already open?
Great video as ever. I added a kiosk mode helper to one of my button card icons with help from your other video. How do I get it to default to Kiosk mode 'on' when you open the HA app? I can toggle on and off fine, but I want it to be 'on' when opening the app.
This is the code I am using kiosk_mode: non_admin_settings: hide_header: true hide_menubutton: true ignore_entity_settings: true entity_settings: - entity: input_boolean.kiosk_mode: 'on' hide_header: true - entity: input_boolean.kiosk_mode: 'off' hide_header: false As long as the input boolean is true it will stay hidden.
Amazing video! Thanks a lot! Is there any way to create a menu button, like the button from mushroom chips in the previous video about creating sticky bottom navigation?
Can't remember where I found this. But this inside a Custom Button Card works for me tap_action: action: call-service service: | [[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true})); return none; ]]]
for all where the background colour does not change, you have to use :host instead of ha-card and for the background instead of background you have to use --ha-card-background
Great one! I already had a nav bar similar to yours, but I never got it to be more responsive so I hid it on desktop. Now I don't have to anymore! One thing I can't figure out is how I can change it into a template card, like with the custom:button-card. Any advice?
@@My_Smart_Home I tried the decluttering card and copied the entire block for the nav bar. It does create the nav bar, but it does not go to the bottom of the screen, nor does it stretch across columns. Any ideas? I'd like to use the nav bar across dashboard views as a template if possible. Great channel. Thank you!
always loved your videos too. I am going back to this video from the last full dashboard video for new design ideas. I want to use this bar with kios mode is that possible ? since the last or 1st bar video it is not working with the toggle as i want it. how would i use the kios mode with this dash bar on mobile ?
Love the bar, Looks great! When I added the bar to mine I have thin grey borders around my icons (the shape of the button). Any idea how to get rid of them? Thanks.
@@My_Smart_Home Thanks for the reply mate! Your reply was spot on and much simpler than mine. I also found below worked as well. card_mod: style: | ha-card { border-width: 0px; box-shadow: 0px 0px; }
Thanks, love your content! Really curious how you created the white card outline at 3:02 including the parallax scrolling effect. Is the entire dashboard contained into a vertical stack in card, or did you leverage Bubble card to achieve this effect? Or something else even? It seems like a super nice approach to make the entire dashboard responsive to screens size.
Yeah it was basically two mod cards. One for the top section, I made it sticky the same way as the bottom navigation. Then everything else inside another mod card that had a different background color and with a higher z-index. It was a really nice look but I decided to scrap it because it was a pain to update and it took a few seconds to load every time I opened the app.
@@My_Smart_Home Amazing, thanks for the brilliant response! Seems like I will refrain from going down this path and need to think of something else to stitch all of your beautiful cards together :)
Great navigation bar! i only cant get it to be fixed. added it just you did in the video but it is not fixed on the bottom of the screen but just on the place where de card is placed on the dashboard? also the color black is not working even when i put in "black !important;"
Yeah should be possible. Try changing the grid to a 1 column grid. Keep in mind that you need to somehow hide what the vertical menu will cover. Might be easier to set up some sort of grid layout for your whole dashboard.
Thanks for the tutorial. What happens you click on the server or cog? I'm looking for a way to link to devices, entities, automations, and integrations from a navigation bar like you have and have the pages open up in a pop-up. Is that even possible? Thanks in advance!
Yeah for sure. Thats exactly what I do. Using something like this on the cog button you can open a Bubble card popup. Check out my video about Bubble Card if youre unsure about how to create them. tap_action: action: navigate navigation_path: '#settings'
@@My_Smart_Home Do you have a video showing what the Settings card looks like? I created a vertical stack with a bubble card that shows lights in it and then a button that triggers the button card like you did. I'm trying to figure out how to implement the settings portion, now. Hope that makes sense!
@@ithinkin10I use these cards: th-cam.com/video/9CwOQFFiHH8/w-d-xo.html They are basically turning on and off automations. For example, my vacuum runs every day at 6pm, but if I turn off the automation in the settings popup it wont run.
Great content as always! Could you please help me with the background color of the whole bottom? The property "background" (under style/ha-card) doesn't react to my color selection. I'm also using the theme rounded and there's no line overwriting that property of ha-card. And to be sure I pasted the card on a view without any theme selected and still the color isn't changing. When I check the element with the web inspector I see that the property background is being overwritten by a parent element ha-card of card-mod. Just not sure where that config is coming from.
The very top card is just called Vacuum Card. The rest is a combination of buttons other cards. github.com/denysdovhan/vacuum-card But I'm working on redesigning this whole section. So I will make a video about it soon.
@@My_Smart_Home I can confirm this with that update. I have followed the tutorial, but the moment you add the code (starting from line 2 with 'z-index' - 'positioning' - ....), the card remains where you have added it in the dashboard view. It does not work anymore.
@@My_Smart_Home hi, do you know any issue with the ROUNDED theme? The Sticky Menu now works on my install SOMETIMES. I have this installed, and sometimes the top margin is not respected from the theme (during the same moment, the sticky bar remains on the bottom of my page)
I've been using gap card from here: github.com/thomasloven/lovelace-layout-card You can just add an empty card at the end with the same height as the navigation.
@@My_Smart_Home Yea they both make it go down to the bottom of the page but fixed is better cuz it doesn't leave a blank space like sticky does, problem is when I use fixed it doesn't center my navbar like sticky does. Weird. I tried adapting this CSS to my own navbar btw but its not too different, wish I could send pics here lol.
Hi, great and useful video. I'm trying to make the bar full bottom screen with this code : card_mod: style: | @media (min-width:180px) { ha-card { z-index: 1; position: fixed; bottom: 0px; left: 0px; width: calc(100% - 20px); background-color: black; border-radius: 0px; padding: 20px; } } @media (min-width:800px) { ha-card { width: calc(100% - 0px); } } But, I have, on the the right of mobile (iphone), a little (2-3mm) blank space. Can you help me?
Absolutely one of my favorite channels. Love how you spell it all out succinctly and clearly. Amazing job my man.
Thank you 😊
Very useful video. Please make more videos like this. You gave me back the desire to engage in my lovelace
Cheers!
Thats great to hear!
i would use exactly the same tablet layout, like you show at the end. You prooved what is possible with HA!
The best chanel i follow. Still waiting for dynamic choose buttons for robot vacuum dashboard and a tablet dashboard design (:
Yeah I know. I havent gotten around to making it for myself yet. Actually rethinking the vacuum popup a bit.
It's pretty crazy how much work Nabu/HA has put into the dashboard design. When I first started roughly 6 years ago you had to use yaml if you wanted to do anything remotely stylish or use custom lovelace cards or mods from HACs. I almost feel like I need to completely rebuild my main dashboard or slowly create a new one using the newer methods available. I'm still have to edit the yaml file anytime I want to change anything. Same for the automation/script GUI. Extremely helpful. A sticky navigation bar would be useful so thanks for this.
Heck, they only started voice a year ago and I'm using a custom open ai repository for voice and it allows multiple or combined commands and does things that the vanilla HA solution can't and doesn't need a specific phrase. Now, I just need to create a LLM AI based on Open AI so it's all local but regardless it controls everything and gives me any info I need. That and openeakeword which allows creating custom wake words which is neat.
The whole voice thing is something I need to get into. You use Open AI? Does all the api calls cost you lots each month? Exciting opportunities ahead for sure
@@My_Smart_Home Right now I've got a developer API key and you get a certain free amount of API calls and you can set a dollar limit .I haven't been charged a cent yet and I've set mine to 5 bucks a month for API calls but that's another reason I want to move to a local open ai, they just typically want 8GB or ram . They can run on less but then they are slow. If you go local no API key or limit to worry about. I added the "Extended OpenAI Conversation" custom repository in HACs, not to be confused with the non custom OpenAi Conversation that already exists in HACs, you have to add the URL. I watched a few videos from this one guy, searching for "Build a LOCAL ChatGPT Voice Assistant For Your Smart Home" will lead you to his videos. There are a few and that's not the first but shows what's needed and he has videos for every step.
If you have an Android phone that's the easiest test as you can make the HA voice assistant your default voice assistant, it just doesn't work with wake words so you have to long press the power button. Not sure if this is a Google limitation but I imagine it is. There is a way to do it on iOS although I'm not familiar. Second beat and cheapest device is an m5stack atom echo which can have a small battery attached (tailbailt) for around 15 dollars for both, then the pi hat the guy in the video referenced above. I'm using an add-on that allows a USB speakerphone to be plugged directly into the HA server . It works best as it's one of those round speakerphones meant for conference calls so it has multiple microphones.
My biggest issues are false positives on the trigger word when watching TV. The m5stack has a button so you can choose that over a wake word which can be convenient. You can flash those on website and they just show up in esphome to add.
The other issue is my phone for a dumb reason, when I couldn't find my phone I could yell "hey Google, what time is it" until I could hear it. If you set HA as your main voice assistant on Android that doesn't work because of the wake word not working.... Silly but useful way to find a phone.
Also, with scripts you just have to say the script name instead of "turn on script name and add aliases to call it different things as long as that alias isn't in use for something else so if you had a switch named " LG TV power" you could add an alias of " TV" and just say turn on/off TV.
Thank you for the video, everything is very well explained, and it looks great. I have a question:
How can I make it so that clicking on one of the buttons in the sticky bar closes the popup if it is already open?
Dont think thats possible sorry. Maybe bubble card has a feature like this, but I'm not sure.
Great video as ever. I added a kiosk mode helper to one of my button card icons with help from your other video.
How do I get it to default to Kiosk mode 'on' when you open the HA app? I can toggle on and off fine, but I want it to be 'on' when opening the app.
This is the code I am using
kiosk_mode:
non_admin_settings:
hide_header: true
hide_menubutton: true
ignore_entity_settings: true
entity_settings:
- entity:
input_boolean.kiosk_mode: 'on'
hide_header: true
- entity:
input_boolean.kiosk_mode: 'off'
hide_header: false
As long as the input boolean is true it will stay hidden.
Amazing video! Thanks a lot! Is there any way to create a menu button, like the button from mushroom chips in the previous video about creating sticky bottom navigation?
Can't remember where I found this. But this inside a Custom Button Card works for me
tap_action:
action: call-service
service: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
return none;
]]]
Hello. Cool videos, I’ve already implemented a lot of things in my project. When will you share the complete build? =) Looks cool, I want to try it
Problem is that its never finished 😂
@@My_Smart_Home Actually like ours, always in development 😂😂
nice way to make unlimited updates to my ha jajajaj thanks!!!
for all where the background colour does not change, you have to use :host instead of ha-card and for the background instead of background you have to use --ha-card-background
Great one! I already had a nav bar similar to yours, but I never got it to be more responsive so I hid it on desktop. Now I don't have to anymore!
One thing I can't figure out is how I can change it into a template card, like with the custom:button-card. Any advice?
Cheers! You could use decluttering card to make the whole navigation into a template.
@@My_Smart_Home I tried the decluttering card and copied the entire block for the nav bar. It does create the nav bar, but it does not go to the bottom of the screen, nor does it stretch across columns. Any ideas? I'd like to use the nav bar across dashboard views as a template if possible. Great channel. Thank you!
always loved your videos too. I am going back to this video from the last full dashboard video for new design ideas. I want to use this bar with kios mode is that possible ? since the last or 1st bar video it is not working with the toggle as i want it. how would i use the kios mode with this dash bar on mobile ?
Love the bar, Looks great!
When I added the bar to mine I have thin grey borders around my icons (the shape of the button).
Any idea how to get rid of them?
Thanks.
It depends on your theme. You could try adding a border of 0 or none to each button. Like this:
styles:
card:
- border: 0
@@My_Smart_Home Thanks for the reply mate!
Your reply was spot on and much simpler than mine.
I also found below worked as well.
card_mod:
style: |
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
Thanks, love your content! Really curious how you created the white card outline at 3:02 including the parallax scrolling effect. Is the entire dashboard contained into a vertical stack in card, or did you leverage Bubble card to achieve this effect? Or something else even? It seems like a super nice approach to make the entire dashboard responsive to screens size.
Yeah it was basically two mod cards. One for the top section, I made it sticky the same way as the bottom navigation. Then everything else inside another mod card that had a different background color and with a higher z-index. It was a really nice look but I decided to scrap it because it was a pain to update and it took a few seconds to load every time I opened the app.
@@My_Smart_Home Amazing, thanks for the brilliant response! Seems like I will refrain from going down this path and need to think of something else to stitch all of your beautiful cards together :)
Great navigation bar! i only cant get it to be fixed. added it just you did in the video but it is not fixed on the bottom of the screen but just on the place where de card is placed on the dashboard? also the color black is not working even when i put in "black !important;"
Thats weird. You able to post your mod card CSS somewhere?
@@My_Smart_Home i send you a email with my code in it.
Same problems over here. :(
@@KOLKAAAA Does it make a difference if you remove the media breakpoints?
IE:
type: custom:mod-card
card_mod:
style: |
type: custom:mod-card
card_mod:
style: |
ha-card {
z-index:1;
position: fixed;
background: #000000;
bottom: 10px;
left: 10px;
padding: 10px;
border-radius: 100px;
width: calc(100% - 20px);
}
@@My_Smart_Home - You. Are. A. Legend. Works like a charm without the media breakpoint!
Is there a popup card on this menu bar as well?
Not sure if I understand the question? I have it so that all buttons open popups
@@My_Smart_Home that’s what I was asking, I missed how to make it pop up but I’m reviewing your videos now to fix it!
Is it possible to have veryival sticky bar?
Yeah should be possible. Try changing the grid to a 1 column grid. Keep in mind that you need to somehow hide what the vertical menu will cover. Might be easier to set up some sort of grid layout for your whole dashboard.
Thanks for the tutorial. What happens you click on the server or cog? I'm looking for a way to link to devices, entities, automations, and integrations from a navigation bar like you have and have the pages open up in a pop-up. Is that even possible? Thanks in advance!
Yeah for sure. Thats exactly what I do. Using something like this on the cog button you can open a Bubble card popup. Check out my video about Bubble Card if youre unsure about how to create them.
tap_action:
action: navigate
navigation_path: '#settings'
@@My_Smart_Home Do you have a video showing what the Settings card looks like? I created a vertical stack with a bubble card that shows lights in it and then a button that triggers the button card like you did. I'm trying to figure out how to implement the settings portion, now. Hope that makes sense!
@@ithinkin10I use these cards: th-cam.com/video/9CwOQFFiHH8/w-d-xo.html
They are basically turning on and off automations. For example, my vacuum runs every day at 6pm, but if I turn off the automation in the settings popup it wont run.
Great content as always!
Could you please help me with the background color of the whole bottom?
The property "background" (under style/ha-card) doesn't react to my color selection.
I'm also using the theme rounded and there's no line overwriting that property of ha-card. And to be sure I pasted the card on a view without any theme selected and still the color isn't changing.
When I check the element with the web inspector I see that the property background is being overwritten by a parent element ha-card of card-mod.
Just not sure where that config is coming from.
You could try:
background: black !important;
!important should overwrite anything else, unless other elements also use it.
How do you do that vacuum card demo'd at the end?
The very top card is just called Vacuum Card. The rest is a combination of buttons other cards.
github.com/denysdovhan/vacuum-card
But I'm working on redesigning this whole section. So I will make a video about it soon.
Very nice nav bar, doesn't work with light / dark mode on the mobile however
What theme are you using? You will probably have to use color variables instead of fixed color values.
it no longer works after the 2024.6.0 update or the menu remains at the bottom of the page......
I havent updated yet, what do you mean when you say the menu remains at the bottom?
@@My_Smart_Home I can confirm this with that update. I have followed the tutorial, but the moment you add the code (starting from line 2 with 'z-index' - 'positioning' - ....), the card remains where you have added it in the dashboard view. It does not work anymore.
@@DJRuuD0 Strange. Even after hitting Save?
I updated yesterday and have no issues. Screenshot of it being at the bottom: ibb.co/hDGyKvV
@@My_Smart_Home hi, do you know any issue with the ROUNDED theme? The Sticky Menu now works on my install SOMETIMES. I have this installed, and sometimes the top margin is not respected from the theme (during the same moment, the sticky bar remains on the bottom of my page)
i have one problem, in my dashboard i have to scroll, so that the navbar hides the last content on each page, how can this be avoided/fixed?
I've been using gap card from here: github.com/thomasloven/lovelace-layout-card
You can just add an empty card at the end with the same height as the navigation.
@@My_Smart_Home okay this makes sense, thank you!
How come when I used "fixed" it pushes it to the bottom left but when I use "sticky" it pushes it to the bottom and also centers it?
I'm not really sure. You sure sticky works? It's not really supposed to move the navigation out of its container when using sticky.
@@My_Smart_Home Yea they both make it go down to the bottom of the page but fixed is better cuz it doesn't leave a blank space like sticky does, problem is when I use fixed it doesn't center my navbar like sticky does. Weird. I tried adapting this CSS to my own navbar btw but its not too different, wish I could send pics here lol.
@@davidnestico My email is in the channel description.
Bro please make your screen-resolution smaller when recording. I have trouble reading it even with fullscreen.
Yeah still learning. I'll adjust my scaling
Hi, great and useful video. I'm trying to make the bar full bottom screen with this code :
card_mod:
style: |
@media (min-width:180px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: calc(100% - 20px);
background-color: black;
border-radius: 0px;
padding: 20px;
}
}
@media (min-width:800px) {
ha-card {
width: calc(100% - 0px);
}
}
But, I have, on the the right of mobile (iphone), a little (2-3mm) blank space.
Can you help me?
Hi, it might look better if you change this line width: calc(100% - 20px); to width: 100%;
Or just play around with that 20px value.
How did you manage to get rid of the standard header on the companion app?
I use Kiosk mode
github.com/maykar/kiosk-mode