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!
@yoyoTechKnows4 ай бұрын
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!
@tmidi22274 ай бұрын
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
@yoyoTechKnows4 ай бұрын
Awesome, I am glad you liked it- working on some new content! Thanks for watching!
@aadmouthaan86895 ай бұрын
Thank you for this informative video. This seems to work much better than the "grid method"
@yoyoTechKnows5 ай бұрын
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!
@leicaman5 ай бұрын
This is perfect! As a graphics desk manager (retired) I always want to work with a grid layout.
@yoyoTechKnows5 ай бұрын
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!
@psentieiro28 күн бұрын
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 ?
@yoyoTechKnows27 күн бұрын
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!
@andreprandina58343 ай бұрын
Since this video, u have a new fan.
@yoyoTechKnows3 ай бұрын
Thank you - and thanks for watching
@johnhubbard38795 ай бұрын
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!
@yoyoTechKnows5 ай бұрын
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!
@greenninjas52653 ай бұрын
Excellent video, just what I was looking for. Thank you.
@yoyoTechKnows3 ай бұрын
Glad it was helpful! and thanks for watching!
@andrewhill84785 ай бұрын
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.
@yoyoTechKnows5 ай бұрын
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!
@ThamerJO2 ай бұрын
Great and informative video, what I needed to manage my HA dashboard
@yoyoTechKnows2 ай бұрын
I am glad you liked it - thanks for watching!
@brianparker24002 ай бұрын
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.
@yoyoTechKnows2 ай бұрын
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!
@ha_tinkerer11915 ай бұрын
Excellent and well presented. You gained a subscriber.
@yoyoTechKnows5 ай бұрын
Thank you - I am glad you liked it and welcome aboard!
@Bornatowicz5 ай бұрын
And anotherone too
@manukaliasАй бұрын
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!
@davixsm2 ай бұрын
So nice! U got a new fan from brazil, thnks!!
@yoyoTechKnows2 ай бұрын
Thank you! And hello to Brazil! Thanks for watching!
@AlpayGaniBalolu29 күн бұрын
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.
@yoyoTechKnows29 күн бұрын
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
@DarrenGerbrandt3 ай бұрын
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.
@yoyoTechKnows3 ай бұрын
Awesome - glad to hear you got it working! Thanks for watching
@sammyd16034 ай бұрын
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.
@yoyoTechKnows4 ай бұрын
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!
@sammyd16034 ай бұрын
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.
@jaycevdl5 ай бұрын
i love this! thankk you for sharing!
@yoyoTechKnows5 ай бұрын
Glad you like - would love to hear back if you give it a try and how it works for you! - thanks for watching!
@user-yh8rn9bc8qАй бұрын
Could the technique of custom cards be applied on the LinkNLink ISG
@yoyoTechKnowsАй бұрын
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!
@dbradford5 ай бұрын
Amazing, love it, just what i was looking for in HA.
@yoyoTechKnows5 ай бұрын
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!
@distortionnat2 ай бұрын
This is so awsome!
@yoyoTechKnows2 ай бұрын
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!
@TheBjarnebitАй бұрын
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Ай бұрын
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!
@n.r.2258Ай бұрын
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Ай бұрын
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Ай бұрын
@@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.
@joeking52115 ай бұрын
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.
@Obtuse944 ай бұрын
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.
@joeking52114 ай бұрын
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.
@yoyoTechKnows4 ай бұрын
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!
@joeking52113 ай бұрын
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.
@kamimunOfficial5 ай бұрын
Very cool, Thank You!
@yoyoTechKnows4 ай бұрын
Glad you like it - thanks for watching!
@GMA54694 ай бұрын
Really appreciate your video and did my dashboard based on your example. How can I add chips card?
@yoyoTechKnows4 ай бұрын
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
@RobvanKoningsbruggen3 ай бұрын
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.
@yoyoTechKnows3 ай бұрын
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!
@rbolden4 ай бұрын
Amazing content. Thanks
@yoyoTechKnows4 ай бұрын
Thank you! Let me know if you give it a try - would love to hear how it goes! - Thanks for watching!
@rbolden4 ай бұрын
I tried it immediately and love the pixel by pixel control.
@sBloke35804 ай бұрын
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?
@yoyoTechKnows4 ай бұрын
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
@richardschomp37784 ай бұрын
Thanks can you do the clock next and a HVAC
@yoyoTechKnows4 ай бұрын
Thanks for watching - I am working on some more dashboard videos and I will plan to share the code for my cards!
@daushaus894 ай бұрын
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?
@yoyoTechKnows4 ай бұрын
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! -
@leicaman5 ай бұрын
Love it!
@yoyoTechKnows5 ай бұрын
I am glad - lets us know if you try it and how you make out! - thanks for watching
@basem99h5 ай бұрын
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?
@yoyoTechKnows5 ай бұрын
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!
@basem99h5 ай бұрын
@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 👏 💐
@FrankDamilot5 ай бұрын
Amazing ! Do you know how to remove the "shadow" of the cards ?
@yoyoTechKnows5 ай бұрын
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;
@Gumball3695 ай бұрын
How did you find this!!! So cool 😎
@yoyoTechKnows5 ай бұрын
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!
@Moinois5 ай бұрын
Interesting! Can you also use css variables?
@yoyoTechKnows5 ай бұрын
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!
@canadiankazhchakal89385 ай бұрын
home assistant beginner here, will I be able to add frigate cards in dashboard?
@yoyoTechKnows5 ай бұрын
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!
@drumslapper5 ай бұрын
Brilliant.....
@yoyoTechKnows5 ай бұрын
thank you! - let us know if you give it a try and how it works for you! - thanks for watching!
@drumslapper5 ай бұрын
@@yoyoTechKnows I'm wondering how this would work out with the new Sections "drag and drop"?
@yoyoTechKnows5 ай бұрын
@@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!
@sur0x5 ай бұрын
don't get me wrong, this is really cool but will be a hell to maintain I will pass
@yoyoTechKnows5 ай бұрын
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!
@fredaker83535 ай бұрын
Too much YAML for me.
@Calzune5 ай бұрын
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..
@yoyoTechKnows5 ай бұрын
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.
@mako30105 ай бұрын
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
@sirgoodenough655 ай бұрын
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...
@yoyoTechKnows5 ай бұрын
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!
@sammyd16034 ай бұрын
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.
@DarrenGerbrandt3 ай бұрын
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.
@Jensen8715 ай бұрын
A surface studio is an expensive home assistant dashboard lol
@yoyoTechKnows5 ай бұрын
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!
@Jensen8715 ай бұрын
@@yoyoTechKnows that's crazy. They don't look that old at all