I've been using home automation in one form or other for literally decades but recently moved from HomeSeer to Home Assistant. As I come up to speed, I've been struggling to find a good way to make dashboards for a predefined size (for my tablets). Responsive UI is nice, but in most cases for me, I'd rather just have a hard-coded size. I came across this video yesterday and was immediately excited. I spent an hour or two earlier today just messing around with it, and I'm super happy with the results. Thanks so much for sharing this technique!

@yoyoTechKnows

3 ай бұрын

Glad you like it - I stumbled across it and have been rewriting all my dashboards since! - thanks for watching and good luck with your new dashboards!

You just gained a new fan. Looking forward to the new dashboard and possibly some deeper dives into Layout card, the new grid system and maybe drag and drop

@yoyoTechKnows

4 ай бұрын

Awesome, I am glad you liked it- working on some new content! Thanks for watching!

This is great knowledge to now have saved in my dashboard playlist. I have many priorities ahead of making use of this knowledge, but at some point will come back and give it a go. Thanks so much for sharing this!

@yoyoTechKnows

4 ай бұрын

Glad you like it - let me know if you get around to trying it - would love to hear how its working for others. I have redone a couple of my dashboards already and so far so good! - thanks for watching!

Excellent video, just what I was looking for. Thank you.

@yoyoTechKnows

3 ай бұрын

Glad it was helpful! and thanks for watching!

Thank you for this informative video. This seems to work much better than the "grid method"

@yoyoTechKnows

4 ай бұрын

The grid method works, but this allows for so much flexibility, and so far its working really well - been working on some cool dashboards and should be able to share soon - thanks for watching!

Great video ! I was about to try using the grid control for my new tablet when I came across your video. This gives some much more control & produces a really nice UI.

@yoyoTechKnows

4 ай бұрын

Glad you like - I have been rebuilding my dashboards and its been super helpful so far - hope to have some new designs to share soon! - give it a try and let us know how it goes for you - thanks for watching!

This is perfect! As a graphics desk manager (retired) I always want to work with a grid layout.

@yoyoTechKnows

4 ай бұрын

I was actually really excited to share this one - I feel like this method is the simplest and I couldn't find any mention of it anywhere - glad you liked it!

Since this video, u have a new fan.

@yoyoTechKnows

3 ай бұрын

Thank you - and thanks for watching

Amazing, love it, just what i was looking for in HA.

@yoyoTechKnows

4 ай бұрын

Let me know if you give it a try - interested to hear what others think of this method - so far I am loving it - its just the flexibility I was looking for!

i love this! thankk you for sharing!

@yoyoTechKnows

4 ай бұрын

Glad you like - would love to hear back if you give it a try and how it works for you! - thanks for watching!

So nice! U got a new fan from brazil, thnks!!

@yoyoTechKnows

Ай бұрын

Thank you! And hello to Brazil! Thanks for watching!

Excellent and well presented. You gained a subscriber.

@yoyoTechKnows

4 ай бұрын

Thank you - I am glad you liked it and welcome aboard!

@Bornatowicz

4 ай бұрын

And anotherone too

Great and informative video, what I needed to manage my HA dashboard

@yoyoTechKnows

Ай бұрын

I am glad you liked it - thanks for watching!

Very cool, Thank You!

@yoyoTechKnows

4 ай бұрын

Glad you like it - thanks for watching!

This is so awsome!

@yoyoTechKnows

2 ай бұрын

Thanks - let me know if you create a dashboard using this method - would love to see some shared on the HA forum! - thanks for watching!

Love it!

@yoyoTechKnows

4 ай бұрын

I am glad - lets us know if you try it and how you make out! - thanks for watching

Certainly something New 😍😍 To play with on coming weekend 😂😂

@yoyoTechKnows

Ай бұрын

Working on some new dashboards and custom cards with this method - its so hard to go back to anything else once you get used to it - good luck and thanks for watching!

Amazing content. Thanks

@yoyoTechKnows

4 ай бұрын

Thank you! Let me know if you give it a try - would love to hear how it goes! - Thanks for watching!

@rbolden

4 ай бұрын

I tried it immediately and love the pixel by pixel control.

Really appreciate your video and did my dashboard based on your example. How can I add chips card?

@yoyoTechKnows

4 ай бұрын

Glad you like - you should be able to add just like normal - try creating it on a test dashboard and then copy and paste the code, you can have a bunch of chips together, or just do one at a time and place them anywhere! Thanks for watching

Great video and valuabel information. Maybe you can help with something I´ve tried without any success . How to include a custom field on the upper right corenr of a chip card to show sensor value. There are any trick how to do that ?

@yoyoTechKnows

8 күн бұрын

Watch my video on how to create a custom tesla card - with that you can create pretty much anything you like and then insert it into a regular dashboard as needed. Let me know if you have questions with it - but hopefully you can see how I am doing it. - thanks for watching!

Brilliant.....

@yoyoTechKnows

4 ай бұрын

thank you! - let us know if you give it a try and how it works for you! - thanks for watching!

@drumslapper

4 ай бұрын

@@yoyoTechKnows I'm wondering how this would work out with the new Sections "drag and drop"?

@yoyoTechKnows

4 ай бұрын

​@@drumslapperI am not sure it would make sense to use it - but it should work - you could create multiple "buttons" full of positioned cards and then drag and drop them around in columns - but I think if I am going to use this method I would just stick to one big button. - Might make sense looking at sections if your looking for reusability across multiple dashboards. - will have to take a look and test it out - thanks for watching!

Thank you so much for this video I have just finished converting my dashboards from multiple embedded custom grid layout cards to using the Button-card method you have described. The button-card method simplifies the code and allows much easier card placement, however I did stumble into an issue After converting my kitchen dashboard to use button-cards running on a Fire Tablet using Fully Kiosk the dashboard would occasionally fail to load when triggered by the kitchen movement sensor. Reverting the dashboard to the grid layout version the dashboard would load successfully every time. I am running the latest version of HA which ATTOW is 2024.6.3 I found reference to the issue under "custom:button-card fails to show intermittently on dashboards in ha-2023.4.xx" in github Implementing the suggested fix which forces the Button-card code to load after Lovelace cards has fixed the problem. I hope this might help anyone who has the same issue.

@yoyoTechKnows

Ай бұрын

Glad you got it working and thanks for the feedback! I did run into this error from time to time, I have implemented the fix you point out and seems to have gone away - if anyone else is interested, here is the direct link to the fix! github.com/custom-cards/button-card/issues/689#issuecomment-2180971737 - thanks for watching, and for the feedback!

Excellent! I gave it a try and it worked well but for some reason, when I use Panel (1 card), all of my rounded corners vanish. If I switch to Sidebar, the rounded corners come back. Sidebar also seems to work like Panel mode as long as I only use your single card so I'll keep going with that.

@yoyoTechKnows

3 ай бұрын

I have noticed some strange CSS behaviour as well - but its not always consistent - I think the rounded corners thing is since the recent update and I have noticed it on other dashboards as well - not sure if its a button-card or card-mod issue - I will give the sidebar option a try - thanks for wathcing!

@sammyd1603

3 ай бұрын

Since I watched this I went back and looked at your Grid video and also played around with that a bit....now I'm torn between them. My dashboard will probably be in a grid-ish layout and I like being able to use the visual editor BUT I also like the flexibility of this method. On top of that, HA introduced 'Sections' but I don't think that layout is designed for a fixed size dashboard.

This is great - thank you! My only question is regarding the "tap_action" of the main custom button card. It seems when I set that to "none" it disables the tap action on all cards within the main custom button card. If I remove that section the cards all work, but the main custom button card also responds to being tapped. Am I doing something wrong?

@yoyoTechKnows

3 ай бұрын

Hello - I have button card itself is left basic, I have tap action set to none. If I click somewhere where there is not button, I do see a reaction (as if something was clicked) but nothing happens. - hope you get it working well, and thanks for watching! tap_action: action: none

Amazing ! Do you know how to remove the "shadow" of the cards ?

@yoyoTechKnows

4 ай бұрын

Thanks! I add the following using card-mod and it completely removes the background/border etc. border: thick; background-color: transparent; text-align: left; color: transparent;

Hey man, thanks alot for all of your videos. This is really fantastic video. May I Ask what is the type of the 55" touch screen you use for your fully kiosk home assistant ? Or what do you recommend?

@yoyoTechKnows

4 ай бұрын

Thank you! the one behind me is an old zoom device, I have alerts on marketplace - sometimes people get rid of them because they move to teams and don't think they are of any use!

@basem99h

4 ай бұрын

@yoyoTechKnows Thanks for the prompt reply. I really want to have a big touch HA dashboard, but i don't know how to start looking. If you can give me an advice on some options or how to look for would be appreciated 👏 💐

It is amazing. i am working on it for 2 days. Finaly i could design my dream dasboard. Is there any vay to use same dashboard at tablet or phone. Becouse when i try it it is not working with them. Thank you very much. Hello from Turley.

@yoyoTechKnows

11 күн бұрын

I love it - that's how I felt the first time I tried this - I am still making all my dashboards this way. I think there is a bit of a bug in button card which shows up sometimes - I tried this and it seems to help - but for the most part just refreshing once seems to also do the trick. github.com/custom-cards/button-card/issues/689#issuecomment-2180971737

Interesting! Can you also use css variables?

@yoyoTechKnows

4 ай бұрын

Yes, that will work as well (- background-color: var(--button-card-light-color) - thanks for watching, and let me know if you try and how it works for you - I have been having a lot of fun with it!

Hi i tried to replicate your dashboard, but i am getting a little different result, the positioning part works great, the preview when editing the big green button looks great but as soon as i save the edit the rounded corners from the buttons on the green button and the green button it self change to square corners. Have you any idea where the rounded corners gone to, its a clean install of HA. ?? I love the full control of placing the elements on the dashboard, you made a great video with clear instructions, subscribed to your channel for more.

@yoyoTechKnows

3 ай бұрын

Thanks for watching - I have heard a few people mention this - I am not sure if it has something to do with what theme you are using? I will have to play with it a little and see if I can reproduce the issue - it could be something over writing in the style sheets. - Glad to hear its working for you otherwise - I am hooked and have been creating all my dashboards like this now!

I was going to say it's not working for me, I get the button card text and green background but no other buttons show up and after repeatedly checking over the code I finally spotted that I spelt custom with an e at the end of it. removed that an it all works. Now to try and remember CSS, been a long time for me. Nicely done video.

@yoyoTechKnows

2 ай бұрын

Awesome - glad to hear you got it working! Thanks for watching

Thanks can you do the clock next and a HVAC

@yoyoTechKnows

4 ай бұрын

Thanks for watching - I am working on some more dashboard videos and I will plan to share the code for my cards!

You mention in the video, something about another video about using the Button-Card. I can't seem to find it? I'm struggling to use the visability feature together with Button-card, hope to find som solution in your next video... :) Nice video , btw

@yoyoTechKnows

28 күн бұрын

Hey thanks for watching - I have another video coming out tomorrow that is similar - let me know if your still having issues after watching it.! - and .... thanks for watching!

How did you find this!!! So cool 😎

@yoyoTechKnows

4 ай бұрын

So far its been working well - so easy to create the perfect layout - give it a try and let us know how it works for you!

I have HA downloaded and it's recognized some smart lights, Google items, TVs but I really need and idiots guide to HA 101 once it's running. Any suggested videos?

@yoyoTechKnows

3 ай бұрын

Thanks for watching, and glad to hear you have started your HA journey! I am working on some new vidoes and I will share - I think a 101 video would be a good one to add to the library - but I can only make them so fast! -

Hi, got a question .. is it possible to background a picture (I.e.a florplan) instead of just color ? I think this handling is a lot more easy than other samples.

@yoyoTechKnows

22 күн бұрын

Yes for sure - it can be done a couple of ways - if you have the newest HA you can do it from the UI - or within button card, you can just add a picture card - adjust the size, and set the z-index low so its behind everything else! Watch my new tesla card video - I add an image to it - so its similar thing! - thanks for watching!

@n.r.2258

20 күн бұрын

@@yoyoTechKnows Hi, thanks for your quick reply but my question was worded incorrectly. I am looking for a way to import an image as a background, not as an entity. I would like to arrange the buttons in the layer above the image. I would like to create a circuit diagram as a background on which the measured values appear at the corresponding points. Everything works fine, but the circuit diagram in the background is still missing and I can't find a way to implement it in your button arrangement.

Could the technique of custom cards be applied on the LinkNLink ISG

@yoyoTechKnows

15 күн бұрын

Only if you setup your dashboard in Home Assistant, but yes, then you can display that dashboard on the LinknLink ISG as your main dashboard. - thanks for watching!

home assistant beginner here, will I be able to add frigate cards in dashboard?

@yoyoTechKnows

4 ай бұрын

No worries - so much to try and learn - I think we are all always beginners! - I don't see any reason why frigate cards would not work - I have not found any cards to don't so far. - Let me know how it goes, I have not used frigate cards before, but they look interesting and I think I will give them a try - thanks for watching!

This is probably the best vid I have seen on the TOTAL NIGHMARE of Home Assistant. From someone, sort of forced from node-red to get involved in this cryptic adventure land this is exactly how a 'dashboard ' should be created in 2024, but not like you are having to do it. There should be an IDE type of 'form' to do the drag & drop of 'cards ? etc' and IDE arrow buttons to move the things around the dashboard, dropdown to select colours etc etc etc, not having to type copy/paste/edit/loop, and also not using that joke of a 'language ?' called YAML, it's 2024. This video has given me a little hope of not felling sick when tinkering with HA, it will lighten things up for me. If i seem a little anti HA, well, after 10+ years of node-red and my own custom programs I am still trying to get my dozen or so mqtt devices list in HA, as they all operate flawlessly under NR. Oh, I can get ONE of them seen by HA, but I have some 630, yes 630+ other devices listed in HA that I don't own, and most of them controllable, but what/where they are is a mystery. So HA, what an absolute joke of a user interface/usability mess. Thks so much for this, I will checking your other vids as there may be one there to get my existing mqtt devices running after a good couple of months of wasted HA hacking time, and heh, still no further forward as of now. It's not fit for 2004, let alone 2024.

@Obtuse94

3 ай бұрын

Is this screed about a completely free open source project that anyone, including yourself could contribute to make any of the changes you are wanting? Why yes, yes it is.

@joeking5211

3 ай бұрын

Ok, It was a complement to you Sir. So yet again no help/direction/pointers for a newbee as to what my nightmare may be then ?. Seems to be the norm from the HA community from my little experience, it seems a closed set. Any pointers on how to get assistance ??.. Thks and Kind Rgds.

@yoyoTechKnows

3 ай бұрын

LOL That was not my response! I hear you, it's challenging to get into - home assistant has come a long way, but it's still got room to grow. To the other posters comment - you need to remember that HA is community developed, they don't have a team of UI testers, they build what works for them, and it continues to evolve - the hope is UI developers gain interest and contribute to help improve! - thanks for watching - hang in there, the learning curve can be steep, but it gets easier!

@joeking5211

3 ай бұрын

Hi Sir, well, I jumped in a bit quick there then LOL. I'm so glad it was'nt you as I really was impressed with your findings. But the commenter Obtuse94 seems to reflect the unhelpfulness of the HA community where I have ever asked about issues in the past, he does seem to be the typical HA user, you know, HA rules, there is no problem, rtfm ect ect, but never any constructive comments. Typical I guess. Anyhow, many thks for the superb vid. Kind Rgds.

amazing... but for a beginner who knows nothing about coding /css etc, this is still extremly hard to understand.. lol. Hopefully the devs will make it much easier to do things like this in the future..

@yoyoTechKnows

4 ай бұрын

Thank you! I posted the example code on my website - give it a try - I hate working in code as well - but this is actually really simple once you get the hang of it - I have already started redo-ing my other dashboards, and you can use the GUI for the most part, just copy and paste the code it generates into the dashboard.

@mako3010

4 ай бұрын

You're at the start of your journey its all going to feel like alphabet soup and maybe a little daunting at first. HomeAssistant is holding your hand A LOT here versus doing much 'coding'. Like when MySpace let us use good old HTML/CSS in our profiles for absurd levels of customization. You're not even having to do that here its so much easier :) Follow the tutorial a few times to get the muscle memory down is my biggest tip

don't get me wrong, this is really cool but will be a hell to maintain I will pass

@yoyoTechKnows

4 ай бұрын

I thought so too, but its actually not bad - because every card gets a unique label, its easy to just search for the card and update settings - thanks for watching!

@fredaker8353

4 ай бұрын

Too much YAML for me.

A surface studio is an expensive home assistant dashboard lol

@yoyoTechKnows

4 ай бұрын

Keep an eye on marketplace and they pop up fairly cheap some times - a little slow, but great for a touch screen dashboard - it's over 10 years old! Lol - that's for watching!

@Jensen871

4 ай бұрын

@@yoyoTechKnows that's crazy. They don't look that old at all

HACS is not an Add-on. HACS does not have any Add-ons. These are Custom Integrations. Please pay attention. Why do you completely confuse people by saying this... I heard this at 02:11 and immediately shut the video off...

@yoyoTechKnows

4 ай бұрын

I stand corrected - HACS is an Integration which can help you discover new custom elements such as Button Card which I used in this video. I apologize if I offended you, I am simply trying to share something new and exciting I found as part of a hobby I enjoy! I will do my best not to misspeak in the future!

@sammyd1603

3 ай бұрын

One little 'typo' that has nothing to do with the subject of the video and he bails???? His loss. This is a great idea and I'll probably implement it for my new wall tablet.

@DarrenGerbrandt

2 ай бұрын

OMG he said mis-said something, it's the end of the world, thank you for being perfect while you go cry to your mommy after you immediately shut the video off. Man some people are overly sensitive dumbasses.