Perfectly Positioned Dashboards - Home Assistant Smart Home Automation

  Переглядів 10,057

yoyoTech

yoyoTech

День тому

Creating a perfect home assistant dashboard for stand alone TV's, touch panels and tablets can be very challenging - with this new method its super easy to get Perfectly Positioned Dashboards in Home Assistant down to the pixel.
32" Touchscreen - geni.us/uJuHByB
Echo Flex - geni.us/bNc1
HomeKit AppleTV - geni.us/bexDBvO
Raspberry Pi 4 - geni.us/tKhd3d
Raspberry Pi Starter Kit - geni.us/jSbOiBj
Aqara FP2 - geni.us/WXv8
Zigbee and Zwave USB Dongle - geni.us/EqgXv1H
Alarm System interface - geni.us/j2z5ei
Best Multi Motion Sensor - geni.us/iiZv9s
Cheaper Motion Sensor - geni.us/aBya
Open Close Sensor - geni.us/dK47vFu
00:00 - Intro
00:41 - Why do we need this
02:00 - Prerequisites
02:50 - How to setup
08:15 - CSS Transformations
08:50 - Showing what we can do
09:20 - Movement and Automations
11:00 - Conclusions

КОМЕНТАРІ: 76
@andreprandina5834
@andreprandina5834 8 днів тому
Since this video, u have a new fan.
@yoyoTechKnows
@yoyoTechKnows 6 днів тому
Thank you - and thanks for watching
@DavesBrickHouse
@DavesBrickHouse 19 днів тому
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
@yoyoTechKnows 19 днів тому
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!
@greenninjas5265
@greenninjas5265 10 днів тому
Excellent video, just what I was looking for. Thank you.
@yoyoTechKnows
@yoyoTechKnows 6 днів тому
Glad it was helpful! and thanks for watching!
@aadmouthaan8689
@aadmouthaan8689 Місяць тому
Thank you for this informative video. This seems to work much better than the "grid method"
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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!
@tmidi2227
@tmidi2227 Місяць тому
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
@yoyoTechKnows Місяць тому
Awesome, I am glad you liked it- working on some new content! Thanks for watching!
@jaycevdl
@jaycevdl Місяць тому
i love this! thankk you for sharing!
@yoyoTechKnows
@yoyoTechKnows Місяць тому
Glad you like - would love to hear back if you give it a try and how it works for you! - thanks for watching!
@johnhubbard3879
@johnhubbard3879 Місяць тому
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
@yoyoTechKnows Місяць тому
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!
@andrewhill8478
@andrewhill8478 Місяць тому
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
@yoyoTechKnows Місяць тому
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!
@ha_tinkerer1191
@ha_tinkerer1191 Місяць тому
Excellent and well presented. You gained a subscriber.
@yoyoTechKnows
@yoyoTechKnows Місяць тому
Thank you - I am glad you liked it and welcome aboard!
@Bornatowicz
@Bornatowicz Місяць тому
And anotherone too
@dbradford
@dbradford Місяць тому
Amazing, love it, just what i was looking for in HA.
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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!
@kamimunOfficial
@kamimunOfficial Місяць тому
Very cool, Thank You!
@yoyoTechKnows
@yoyoTechKnows Місяць тому
Glad you like it - thanks for watching!
@leicaman
@leicaman Місяць тому
This is perfect! As a graphics desk manager (retired) I always want to work with a grid layout.
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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!
@leicaman
@leicaman Місяць тому
Love it!
@yoyoTechKnows
@yoyoTechKnows Місяць тому
I am glad - lets us know if you try it and how you make out! - thanks for watching
@rbolden
@rbolden Місяць тому
Amazing content. Thanks
@yoyoTechKnows
@yoyoTechKnows Місяць тому
Thank you! Let me know if you give it a try - would love to hear how it goes! - Thanks for watching!
@rbolden
@rbolden Місяць тому
I tried it immediately and love the pixel by pixel control.
@GMA5469
@GMA5469 Місяць тому
Really appreciate your video and did my dashboard based on your example. How can I add chips card?
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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
@sBloke3580
@sBloke3580 22 дні тому
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
@yoyoTechKnows 20 днів тому
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
@basem99h
@basem99h Місяць тому
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
@yoyoTechKnows Місяць тому
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
@basem99h Місяць тому
@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 👏 💐
@sammyd1603
@sammyd1603 Місяць тому
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
@yoyoTechKnows 25 днів тому
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
@sammyd1603 25 днів тому
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.
@drumslapper
@drumslapper Місяць тому
Brilliant.....
@yoyoTechKnows
@yoyoTechKnows Місяць тому
thank you! - let us know if you give it a try and how it works for you! - thanks for watching!
@drumslapper
@drumslapper Місяць тому
@@yoyoTechKnows I'm wondering how this would work out with the new Sections "drag and drop"?
@yoyoTechKnows
@yoyoTechKnows Місяць тому
​@@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!
@FrankDamilot
@FrankDamilot Місяць тому
Amazing ! Do you know how to remove the "shadow" of the cards ?
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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;
@RobvanKoningsbruggen
@RobvanKoningsbruggen 9 днів тому
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
@yoyoTechKnows 6 днів тому
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!
@Moinois
@Moinois Місяць тому
Interesting! Can you also use css variables?
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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!
@richardschomp3778
@richardschomp3778 Місяць тому
Thanks can you do the clock next and a HVAC
@yoyoTechKnows
@yoyoTechKnows Місяць тому
Thanks for watching - I am working on some more dashboard videos and I will plan to share the code for my cards!
@daushaus89
@daushaus89 Місяць тому
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
@yoyoTechKnows Місяць тому
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! -
@canadiankazhchakal8938
@canadiankazhchakal8938 Місяць тому
home assistant beginner here, will I be able to add frigate cards in dashboard?
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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!
@Gumball369
@Gumball369 Місяць тому
How did you find this!!! So cool 😎
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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!
@joeking5211
@joeking5211 Місяць тому
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
@Obtuse94 26 днів тому
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
@joeking5211 25 днів тому
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
@yoyoTechKnows 19 днів тому
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
@joeking5211 14 днів тому
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.
@sur0x
@sur0x Місяць тому
don't get me wrong, this is really cool but will be a hell to maintain I will pass
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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
@fredaker8353 Місяць тому
Too much YAML for me.
@Calzune
@Calzune Місяць тому
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
@yoyoTechKnows Місяць тому
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
@mako3010 Місяць тому
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
@Jensen871
@Jensen871 Місяць тому
A surface studio is an expensive home assistant dashboard lol
@yoyoTechKnows
@yoyoTechKnows Місяць тому
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
@Jensen871 Місяць тому
@@yoyoTechKnows that's crazy. They don't look that old at all
@sirgoodenough65
@sirgoodenough65 Місяць тому
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
@yoyoTechKnows Місяць тому
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
@sammyd1603 Місяць тому
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.
The BEST Dashboard I’ve EVER Seen! Smart Home Tour
13:06
Smart Home Solver
Переглядів 93 тис.
😳😆“Хлопці, я свій”: мобілізований рф луганчанин САМ ПРИБІГ В ПОЛОН до воїнів бригади “Помста”
02:58
ШАХТАР - ДИНАМО. КОМЕНТУВАННЯ. УПЛ. 28 ТУР
4:04:31
TOP 10 HACS Integrations and Frontend Components in Home Assistant
18:23
My Smart Home is Stupid - HVAC Update
17:44
Linus Tech Tips
Переглядів 3 млн
The ULTIMATE Home Assistant TouchScreen Dashboard!
9:17
Scott Pinhorne
Переглядів 31 тис.
Pop-up cards with Bubble card in Home Assistant
17:15
BeardedTinker
Переглядів 58 тис.
THIS IS IT!! This Is The One!! : LinknLink Super Gateway
13:27
Paul Hibbert (Hibbert Home Tech)
Переглядів 77 тис.
Home Assistant 2024.4 - Categories, labels, floors and MUCH more
18:12
BeardedTinker
Переглядів 13 тис.
Smart Home Security and Camera Systems | Home Assistant
11:29
yoyoTech
Переглядів 1,5 тис.
Meet Spook. A new toolbox for Home Assistant. It's SCARY!
30:46
mostlychris
Переглядів 43 тис.
INSANE OpenAI News: GPT-4o and your own AI partner
28:48
AI Search
Переглядів 69 тис.
Free and Local AI in Home Assistant using Ollama
13:10
KPeyanski
Переглядів 13 тис.
Samsung UE40D5520RU перезагружается, замена nand памяти
0:46
Слава 100пудово!
Переглядів 3,9 млн
Introducing GPT-4o
26:13
OpenAI
Переглядів 1,7 млн