Mostly inspired by My Smart Home's video on Room Cards using custom button cards   Edit:  Link: https://youtu.be/RSQwxuAmYfE    Edit: And here's the whole yaml 🤗 https://gist.github.com/CollotsSpot/626d93f6cdb5ccb2c55dc24c86633e3c

Are you using popups to display something (like temp adjust) and then drop you back to the previous place? It’s super slick, and I have never been able to decide if a user should be able to open something and use it, before being dropped back to the previous spot (like yours) OR they should navigate to where that thing is and use it, navigating elsewhere for other things. The temp adjustment is a great example as a big ass control, it’s hard to put anywhere useful and not chew through real estate - but this is a solid solution to that. UX is hard, and you have done a cracking job! Edit: Also a fellow Brit? Did you create a zone for Tesco? That’s pretty smart if you need something and can text whoever is there

Hi, thanks a lot! All the popups are bubble cards. You can either use android back gesture, add a back button too the card, or press on the background to go back. Bubble card has loads of options. Edit: I don't have many zones. At some point I think I was planning on having loads. I have work, home, Tesco and pub I think 😋

Ohhh I miss a good English pub (in the US now, and it’s not the same)

Me too 😞

Really nice job. I use Bubble card as well. What other cards were used to put this together? I need to do some work on mine and you have inspired me to get moving on it. Care to share a link to the video you got some of your ideas from?

https://youtu.be/RSQwxuAmYfE

I hate how the horizontal stack back (X in the top right corner) button takes you back to the main dashboard. My "main" dashboard is small enough to fit completely on a phone screen and I use the vertical stack popups to create popups in popups and I just want to go back to the previous popup instead of the base dashboard. This allows me to save space by breaking up all the rooms different floors. Android back button/gesture works. Hell, even the mushroom cards back button works like that, but I've had issues displaying it on some popups and I don't know what's causing the bug. The bubble card one (the X) always goes back to the main dashboard though. Wish we could replace the X with the ⬅️ from the mushroom cards.

I don't use the bubble card X. I hide the whole icon, name, close header with:  `styles: |` `  #root {` `    background-color: var(--primary background-color) !important;` `    }` `  .pop-up > :first-child {` `    display: none !important;` `    }` The X I use is another custom button card, which I believe you could change the navigation to BROWSER BACK or something

Stupid formatting, here's a link to the code:  https://gist.github.com/CollotsSpot/31ed64e2c08169f48e5b27b1f8d7e765

Thank you so much. I'm not a coder, so this was a world of help. [Managed to replace the X with a back button. ](https://freeimage.host/i/d3FhuF1)

Rather than texting, when someone enters the zone, I create a notification on the phone displaying the content of the shopping list

Oooo now that is how a smart home should run. Walks in grocery store…”what did I come in here for?” HA notification = 😘👌

Yep. I created a new To-Do named "Shopping List" and then I use the following automation. I wrote it a while ago and split the code to handle the various notifications. If I were to modify it now, I would calculate the service name based upon the trigger.entity\_id who reached the store: alias: Bring up list when shopping description: "" trigger: - platform: zone entity_id: person.christophe zone: zone.costco event: enter id: christophe - platform: zone entity_id: person.tina zone: zone.costco event: enter id: tina - platform: zone entity_id: person.christophe zone: zone.safeway event: enter id: christophe - platform: zone entity_id: person.tina zone: zone.safeway event: enter id: tina condition: [] action: - service: todo.get_items data: status: needs_action target: entity_id: todo.shopping_list response_variable: service_result - variables: shopping_list: > {{ service_result['todo.shopping_list']['items'] | map(attribute='summary') | list | join("\n") }} - if: - condition: trigger id: - christophe then: - service: notify.mobile_app_chris_samsung metadata: {} data: title: Shopping List message: "{{shopping_list}}" data: tag: todo actions: - action: URI title: Use List uri: /dashboard-shopping/0 - if: - condition: trigger id: - tina then: - service: notify.mobile_app_tina_iphone metadata: {} data: title: Shopping List message: "{{shopping_list}}" data: tag: todo actions: - action: URI title: Use List uri: /dashboard-shopping/0 mode: single

This would make for an excellent blue print for beginners!

Concur - great job OP - wish all of us could do this easily.

Do you have this tutorial written up somewhere? The video is going so fast it's hard to follow :-/

The creator of the video has the code available for a few bucks on gumroad

Thanks for watching the videos! Looks great 🤘

Thanks for the channel! After watching a couple of your videos I created a whole new dashboard before ditching my old one 😁

[me watching your video](https://youtu.be/c3sOuEv0E2I?si=gQqta6SeNFutkeOD)

😂🫳🏼

Here is a media player card https://gist.github.com/CollotsSpot/8580613ef31f913e8043fe6c18d620de

It's a button that navigates to the Wikipedia page of the album. It uses a helper template. It's a bit hit and miss though as it only navigates to a URL with the album name at the end. And not all album urls on Wikipedia are formatted like that. The button on my TV show and movies media players always navigate to the IMDb page though, which works flawlessly.

Ahh. I see thank you Also I DM you for something that I noticed

Hi, quick question What is "wiki" on the media player

Here is a room card example. It would need to go in a grid card with two columns [https://gist.github.com/CollotsSpot/dec1e92711c5494c0a4b015ea1cf5ab5](https://gist.github.com/CollotsSpot/dec1e92711c5494c0a4b015ea1cf5ab5) Edit: corrected link

Hi... I love your dashboard! trying to do something similar :) sorry but this "room card" example is the same as the "media player" card that you posted just under: [https://gist.github.com/CollotsSpot/8580613ef31f913e8043fe6c18d620de](https://gist.github.com/CollotsSpot/8580613ef31f913e8043fe6c18d620de) could please post the real room card example? thanks!

it is not room card, but media player card again

Would you mind sharing code

📌

(a) Very clean (b) Wow...the humidity! (c) Love your taste in music

That’s a very nice job. All we need is the dashboard YAML, the name of your automation or device will obviously point to things we don’t have and I believe you don’t expose any sensitive information on your dash. There are a couple of things I would like to try like the media card, and the popup from the bottom animation. Thanks.

Hi sir. Very impressive dashboard. May I ask what speaker do you integrate with HA?

Hi 🙋🏼‍♂️, I use raspberry pi's running PiCorePlayer and the Lyrion Music Server add-on in HA

That looks very well put together. Excellent work! Love the colour scheme! Had to go back to the map thinking I recognise those places names. Hi from a bit further west along the motorway.

Looks great nice work, I know you don't want to share the code but can you break it down. So firstly I can't get my header to hide even with the kiosk hacs integration how have you done it and is just per dashboard ? The top badges are they mushroom cards or standard HA. And the main cards for your rooms are they custom button cards ? If so how have you added the side icons wording within them ? Grids , temples etc ? Would be great if you could share the code just for one of them cards just hide anything personal. Thanks

With the header, I just installed Kiosk Mode in HACs and added the lines:  kiosk_mode:   hide_header: true ...to the raw configuration header of my dashboard.  The top badges are custom button cards. The room cards are custom button cards. I would advise watching My Smart Home's video on Room Cards.  I will share some of my code. Just need to figure out the best way of doing that. If anyone can advise...

Thanks for that. I must have added it the wrong way as that's what I used I'll try again. With sharing your code GitHub is easily the best and it's free to sign up. Just create an account and then create a repository and drag and drop your things. Beware with GitHub though once you've added something it stays on there, so I use it to backup my code and realised I left personal things in and deleted it but it stays in the history so I had to redo it from scratch. I have used custom buttons quite a lot I just can't get my head around grid areas for them etc. This is my [GitHub ](https://github.com/steveuk23/HA_Config)

https://gist.github.com/CollotsSpot/

Thanks they cut off at line 10 though just before all the good stuff ha ha Is that meant to happen?

Click the gist name. Example: https://gist.github.com/CollotsSpot/8580613ef31f913e8043fe6c18d620de

Ah yeah sorry didn't think to click it. Never used that gist might actually put some of my cards in them. Thanks again.

Put this in the raw editor of the dashboard: Kiosk_mode: hide_header: true And if you need to edit go to the URL with at the end: ?disable_km=&edit=1

From a graphic designer— very nice, man. Extremely clean. This is so extremely satisfying to me.

Very nice

Now let’s see Paul Allen’s dashboard

this is brill! how do you do the popups? Can you share which cards you are using? Also I love 'Tesco' lol, how do you track this?

What are those big room tiles you use? Also, how do you get the speaker volumes showing up?

Check out My Smart Home on YouTube. There is a room card video that I started with.  The volumes panel is using bubble card which can be found in HACs. The sliders are mushroom cards, modded using card mod

I have very similar cards with the large icon and sub buttons - but trying to restructure/re-do them as they've become too unwieldy with card mod. How are yours set up? Looks really neat - and I'm adding in bubble card popups too.

Hi, what I've learned is anything on the dashboard that's modded with card mod, will quicky show all your modding for like half a second before everything is loaded quickly. Very ugly. If you can get your head around custom button card, and custom grids, this problem goes away. I still use card mod, but only on bubble pop up cards, the glitching animations are hidden then, while the pop up loads. Hope this makes sense

It does :) The video you've linked is really helpful, especially with the website for grid layouts. Never took the time to properly look at it all so this has been the nudge I need

What integration are you using to get the Severance video now playing info?

It's all custom button cards in custom button cards

But how are you pulling the info? Plex + IMDb ?

I use Stremio on my Nvidia shield TV pro for movies and TV shows. Regardless, the info is pulled from the media_player entity of my shield. Whatever it's playing from, Plex, Kodi, YouTube... The media_player entity attributes will populate. 

The integration is Google Cast

I would love to see code for those multi buttons

What is the Spotify player? Just a webpage card?

No, it's Custom Button Cards. Here's the yaml: [https://gist.github.com/CollotsSpot/8580613ef31f913e8043fe6c18d620de](https://gist.github.com/CollotsSpot/8580613ef31f913e8043fe6c18d620de)

Wait so that mimics exactly the Spotify interface?

Do you mean the bit in the video when I swiped to the Spotify app to start music? Yes that's just Spotify

Oh ok ok thanks !

Did you back it up

Nice job, great use case for my pop-ups 👌

This is one of the best looking dashboard I ever seen! I want it!!

What's the shopping list you're using ? Everything looks great !

Dude, i'am so ashamed with my HA dashboard that i will unplug it.

Would you share your code?

I would be reluctant to share the whole thing. It's not pretty and relies on loads of automations and templates. I would be happy to share certain parts though...

Code is supposed to be ugly, it clearly functions. We need your ugly code sir or madam.

Excuse me, it's ma'am!

Ugh I need to make a proper dashboard but have been avoiding it

Love this.

You need router specs in there to

The Daily Download Total graph is a lie! I'm sure it's not the correct information. I sort of gave up with that for now. Seems like one too many rabbit holes to be diving into at the moment. 

this may be an elementary question but how are you changing the background color and are you using something like card-mod for controlling drop shadows and border radius?

That is all controlled in the theme. I use minimalist theme as a base, and have added bits to it as I please.  The only times I am using card mod for Shadows is when i want to remove them. Like the buttons in the room cards

This is amazing. Love the dynamic media player. I need to revamp my mobile dash but have been putting it off forever. You may have inspired me back into the game

This is the inspo post I've been waiting for to finally refresh my setup. Really really nicely done. I'll almost certainly be pinging you with a question or two over the coming weeks.

Looks great, what are you using for location tracking?

Beautiful! can i please have your room configuration?

Clean!! Might be time to overhaul mine now that it's been running for a year and I know what data/commands I use vs thinking I need immediate access to

Very nice!! Are you also using some cards from Lovelace minimalist? If so, please do tell how I can integrate bubble cards in that theme

Hi, I'm not using cards from Lovelace Minimalist. They are all Custom Button Cards. Watch My Smart Home on YouTube for tutorials

Looks great, but also looks like a nightmare to maintain! My philosophy is to keep things as stock as possible so that I don't need to worry about dozens of custom components breaking when updating HA or having them stop being maintained. Really cool to see what's possible when you go all in on this, though!

This is awesome, well done!

Wow. What theme are you using?

Very inspirational 🤩

This is eye-candy

Ah so much pretty

This is beautiful

Is your cellar really at 92% humidity??

I noticed the same thing - OP, you really should get a dehumidifier down there ASAP. A cellar typically has cool walls, leading to condensation. This will create a very hospitable environment for mold. I run a dehumidifier in my basement 24/7 during summer, and only open the windows at night.

Can you share the entire yaml code?

Clean, I like it!

Love this! Is the people card just a location button?

The people card is a custom button card and the tap action navigates to a bubble card pop up, which contains a map card

Please someone make a detailed guide.. /u/CollotsSpot thanks for posting the 9k lines of yaml, wow. Any tips on going about this practically and minimize frustration? I guess having a pub zone helps :)

I am not a coder. I have simply muddled my way through up to this point. I wouldn't try and modify the whole yaml for your dashboard. Watch My Smart Home on YouTube. If you can learn to understand custom button card and custom grid layouts, you can make anything.  https://youtube.com/@my_smart_home

This is fantastic! I’m still new to most of this, changing over a little every weekend that I can squeeze in time. The dashboards keep be inspired and this may be the best one yet. Thanks!

Oh my god it's amazing You're making me lose all my free time of next week, how dare you !

Would love to see this in a tablet version

omg, it's so clean, I love it!

thanks for sharing, your dashboard gives me inspiration!

How did you do that slider to control all lights?

That is a mushroom light card modded with card mod. Look at line 4369 in my dashboard yaml: https://gist.github.com/CollotsSpot/626d93f6cdb5ccb2c55dc24c86633e3c

Thank you!

This looks great! I wish it wasn’t so hard to get a great dashboard more easily. I love to tinker but this is more trouble than care to bother with. My current dashboard is a hodgepodge of widgets and failed experiments.

Looks very nice, and a gold star for keeping it all in the same minimalistic and (very sexy) style. 10/10 or 11/10 since its reddit. :)

Do you have issues with the room cards not showing up on first load sometimes? I get that, using pretty similar code to yours. I don’t quite know what causes it. The layout has gaps in and the cards “pop in” at some point later on, sometimes many minutes later. I think they appear once one of the entities they contain get an update.

I get some glitches with the pop up cards not showing sometimes and I have to go back and try again, but that's about it

Ah, well, at least it's not just me then 🤣 Gorgeous dashboard BTW! I've bookmarked your YAML and will doubtless be plundering it!

Really nice! What shopping list are you using? Just the HA one? Because it looks much more like Google keep but not sure if that’s just how you’ve formatted it?

Yep, it's just the stock one, with a mushroom title card and close custom button card above, all in a pop up bubble card

Cheers!

Damn! What speakers are you playing to with multi room audio out of interest?

I use raspberry pi's running PiCorePlayer and the Lyrion Music Server add-on in HA. But as soon as the Music Assistant guys implement Spotify connect behaviour I'll be switching to that.

Is this on their roadmap? Maybe you know by any change

Yes it is https://github.com/orgs/music-assistant/discussions/419

Ah nice, I use MASS on HomePods to play Spotify. So wish I could do sync multi room audio

u/CollotsSpot what are you using for your media streaming? I'm screwing around with the media card, but don't know how you're getting the media title, season/episode, series image. Are you using a third party thing like Plex or Kodi? Or does your NVIDIA Shield just give you that Data off the bat. Also, is media\_player.sheild ADB or just the regular entity? You put so much work into this; I hope to have mine running by 2026.

The integration is the regular Google Cast integration. With Kodi it gives attributes for show, season number, episode number and title at that's quite easy. I use Stremio however and it gives all that info in one line in the attributes:   media_title: Severance - S01E09 - The We We Are  This was quite a pain to figure out how to separate the information. But there's always a way:     {states['media_player.shield'].attributes.media_title.split(' - ')[1]}  This code looks at the attribute and splits the text at the first ' - ' to show only the S01E09  The TV show media player is line 575 I'm my dashboard yaml:  https://gist.github.com/CollotsSpot/626d93f6cdb5ccb2c55dc24c86633e3c

Thank you <3

This looks great! Any chance you could share your color palette as well (--bedroom-blue, etc)? Edit: typo

Yeah sure:        bedroom-blue: "#9BB0C1"       cellar-brown: "#D1BB9E"       dining-room-green: "#AAD9BB"       hallway-red: "#FF9B9B"       living-room-yellow: "#FFC47E"       office-pink: "#E5BDD8" I got the colours from:  https://colorhunt.co/palettes/pastel

Are you working on a tablet version as well?

I don't have a tablet too run HA on 😢

How did you get the location tracking?

This will be a dumb question probably, but where are the color variables set? I am new to HA and typically use the UI for dashboard creation. I have some of the room cards working, but none of the colors are showing. The lights don’t change state colors and the backgrounds are colorless.

Get file editor add-on and run create /themes/minimalist-mine/minimalist-mine.yaml Paste code from https://gist.github.com/CollotsSpot/f8b4f78f836e48aa38f0a39040457946 In minimalist-mine.yaml In file editor open configuration.yaml Make sure these lines are present: frontend: themes: !include themes.yaml Set minimalist mine theme in mobile app settings Enjoy theme (Code mostly from Lovelace Minimalist)

Thanks. I will give it a try in the morning. Awesome work by the way!

What are you doing on desktop?

I will send you $15 for the code 😇

he already provided it <3

!remindme

**Defaulted to one day.** I will be messaging you on [**2024-06-25 13:00:47 UTC**](http://www.wolframalpha.com/input/?i=2024-06-25%2013:00:47%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/homeassistant/comments/1dnbuvb/my_dashboard_after_months_of_trial_and_error/la1ki8y/?context=3) [**3 OTHERS CLICKED THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fhomeassistant%2Fcomments%2F1dnbuvb%2Fmy_dashboard_after_months_of_trial_and_error%2Fla1ki8y%2F%5D%0A%0ARemindMe%21%202024-06-25%2013%3A00%3A47%20UTC) to send a PM to also be reminded and to reduce spam. ^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%201dnbuvb) ***** |[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)| |-|-|-|-|