Simple Interactive Floorplan in Home Assistant - No fancy software or custom cards
ฝัง
- เผยแพร่เมื่อ 9 ก.ค. 2024
- In this video I’ll show you how to create a very simple floorplan in Home Assistant. We’ll use the picture elements card to add some icons to a simple base image.
No custom cards
No fancy software
No time wasted
Limited YAML
Final Code: github.com/willbob8/willsurri...
Intro: 0:00
Design: 1:01
Lovelace: 2:06
Outro: 7:36
All opinions in this video are my own, and completely unbiased - they do not represent any entity with which I have, am, or will be associated.
As an Amazon Associate I earn from qualifying purchases. By buying through any of the links in the description I will earn commission at no extra cost to you.
The smart home tech I have is here: kit.co/WillSurridgeTech/smart...
▼ My HA setup
Raspberry Pi 3B+: amzn.to/3gF588j
64GB San-Disk: amzn.to/3iDUErN
▼ Amazon Products
Amazon Music Unlimited: www.amazon.co.uk/music/unlimi...
Amazon Prime - 30 day free trial: www.amazon.co.uk/tryprimefree?...
Audible Free trial: www.amazon.co.uk/Audible-Memb...
Kindle Unlimited free trial: www.amazon.co.uk/kindle-dbs/h...
Amazon Business: www.amazon.co.uk/tryab?tag=ws...
▼ Camera Gear
Canon M50: amzn.to/3iGsGeU
Manfrotto Element Tripod: amzn.to/3e7FYxF
Boya Mic: amzn.to/3fez8Ic
64GB San-Disk: amzn.to/2Z78vPC
▼ DJI Products
Buy a Mavic Air: click.dji.com/AO_0cxV8Qmj5tig...
Buy a Mavic Mini: click.dji.com/AMWoUtCGIPFYetJ...
Buy an Osmo Mobile: click.dji.com/AM9khwrxMoEKDKV...
▼ Social Media
Remember to subscribe: / @willsurridgetech
Instagram: / willsurridgetech
Facebook: www. WillSurridgeTech
Absolutely awesome work mate. Well done!
Thanks for that. Great job, well presented at the right pace. Your channel keeps getting better.
I appreciate that!
This is great - you should be able to use 'font-size: 3vw' to scale the icons to be 3% of the screen width though. Then it'll work well on any screen size
Exactly what I was looking for this evening. Thank you!
Great idea, a real eye-opener to a real beginner. thanks!
Glad it was helpful!
So simple and amazing!
Thanks for sharing!!
Glad you like it!
Didn't know I could do that. Thanks for this idea!
No problem!
Thank you very much! I have a floorplan finally! Yeah!!!
Glad I could help!
This is a great tutorial, thank you so much. I'm using HA on windows 11VM. Where would the www folder be ? Appreciate your help.
How can i get the chaging coller bij switching the lights ???
Hi Will,
U´re videos are made for me ;)
Which Type in HA / Picture elements card / Elements shuld i use for Cover/Blinds ?
Note that this will look different on the pc vs a smartphone/tablet.
Mainly, the icons won't look as small as on the pc.
You may want to make 2 versions of this, one for pc and one for tablet.
There's some styling you can do to change the size of the icons or change the colours of the (in)active state.
thank you for the video!
You're welcome
Hello Will, do you know if is it possible to group different rooms (areas) - and so all devices and entities associated - of the house into a floor? and floors grouped into the house area?
Cheers from Italy and happy new year
Really helpful! Sometimes forums and even video guides forget some of us trying to run home assistant are not full-time computer programs, so basics like this really really help! One question though, how did you "extract" the temperature sensor into a new sensor?
I was wondering that, it would be very useful to have the temperature show up.
If you put something like this, into your config file, that should give you the temperatures
hall_temperature:
friendly_name: 'hall temperature'
value_template: "{{ state_attr('climate.hall','current_temperature') }}"
Using what you have called your evo home room name in place of my climate.hall
Hey Will, I have the problem that my whole picture is recognised as a switch... can I turn this off somehow?
great! i like it is simple
Glad you like it!
Any way to shrink the background image to make it fit on a device screen without scrolling? Resizing the image it doesn't work.
Hi Will, I started off trying the more advanced floorplan tutorial but soon got over my head (i'll try again some time).
This however has been great but I need a bit of help if you don't mind.
I have added the media player as you show but what I would like is if I click on the icon then it pops up the mini media player card.
Is this possible? Thanks
Great stuff bud, I hope you get back into creating videos ;-)
well done! :) am its take 10 min for you XD for me forever :D Im new in HA just learning now.
Hi, how can I use the File manager addon to import the floorplan image and connect it to the picture element in the overview dashboard? I put the image in config map and also in a new www map in the config map, but could not couple it to the picture element card. What path to use in the yampl lease? I tried image: config/www/floorplan.png image: local/floorplan.png and many other options. Thanks!
Same problem here. It just won't display. I have no clue why. I even downloaded the demo png file the card uses, and tried pointing to that (I thought maybe some picture size limitations or encodings issues are the problem) but no, also won't display. Did you eventually figure it out?
I was having this same problem it turns out that you have to create a sub folder under the www folder that was the fix for me. /local/subfolder/file.png
@@glen5923 That didn't work for me.... at first. But then I rebooted Home Assistant and.... it magically works now.
some of my icons seem to be white so I don't see them is there a way to change their color? I only noticed the white if I have another icon over the white one.
Nevermind, I found you can you "--paper-item-icon-color": pink
you found it!
Which speakers do u prefer to integrate with HASSIO?
I use sonos personally
I have state-icon on my camera and it displays a round shape of the camera feed.
you want icon not state-icon
@@WillSurridgeTech No... state-icon shows the camera feed in a small round shape. Try it and you will see.
ah okay I follow - for mine for some reason I was getting a warning triangle rather than the stream for one of my cameras. You are correct it can just just the feed in a small image; personally I prefer the icon as it's more obvious what it is to click, especially on a small screen
warum ist dein png Bild so schön groß, bei mir bleibt es total klein?
I know this is a 2 year old video, but instead of drawing this image you can literally map out everything with magicPlan app (I don't know if there is a android version) :)
How to just make the size right for all displays?
This shouldn't be hard at all. it should just scale up (The ration stays the same).
hello I'm from Indonesia very good video bro. I'm having trouble with the image: 'local/subfolder/folder name.png
I've followed the tutorial you provided but my image doesn't appear
@@alifhijriah Same. Did you end up finding out what was the problem?
@@MGL83 thank you i have solved my problem
@@MGL83I wonder if I can add a weather card in lovelace? Thank you in advance
@@alifhijriah How ?
But Adobe Illustrator is a fancy software. It costs a lot
best