Home Assistant how to create a Lovelace 3D floorplan with light overlays and buttons - Part 2
ฝัง
- เผยแพร่เมื่อ 19 พ.ย. 2020
- This part will show you how to create your Lovelace interface with a great looking 3D floor plan. We'll use the buttons and overlays created in the part 1 and get them working in Home Assistant.
In the next part of this video, we'll customise our interface further with a floor toggle feature, movement sensors, CCTV Feeds and lots more!
Really want to show your appreciation? You can always "Buy me a beer"...
www.buymeacoffee.com/homesight
The Graphics and configuration are available here: homesight.tech/?portfolio=cre...
Icons: www.flaticon.com/
Music: www.bensound.com
Video: Free Stock Video Footage by Videezy!
![ตีสิบเดย์ [FULL] | ครอบครัวสะท้านทุ่ง "นางบี & อ้ายสติ๊ก"](http://i.ytimg.com/vi/A1rhYcxxNtA/mqdefault.jpg)
![[페이스캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FaceCam) @SBS Inkigayo 240707](http://i.ytimg.com/vi/x9VRNTV4VDI/mqdefault.jpg)
I'm going through my first HA setup now and my dream dashboard was exactly this, I knew someone had to have done this already and stumbled on this video. Thanks so much for the clear instructions its much appreciated!
Just watched all parts of this series, thanks for the awesome detailed video! And not too fast for me either, although plenty of pausing and rewinding. I really like when I have a problem (like unable to click my button icon due to the overlay ordering) and you have the same issue and explain how to fix it! I also use notepad++ also; great idea. The removal of comments when you go back to Edit is super irritating, and it's been 1-1/2 years since your video and still not changed! Anyway, on to part 3!
This was a rock-solid tutorial. Cheers 👍
Loving your videos! Thank you. Your website is also very helpful!!!!
Thanks Eric, glad to help.
Brilliant. Thank you for the quick reply.
No worries!
cool video, I'm already busy implementing everything. How can I display the current color of the Hue Color lamp?
Very nice 👌 keep up the good work.
Where can I find the lovelace.yml config of these..
Hi Gagandeep, sorry I realise I didn’t add it to the supporting page in the description at first. If you look in the description you’ll find a link to it now.
great！
Thanks
Nice video. Just a quick tip on alignment of overlays. I like to keep my overlays the same size as the base floorplan. Everything except the element you want to show is transparent. Alignment is now super easy and is essentially done in the graphics editor. The alignment in HA is always 0%,0%. Keep in mind that the order of things in yaml is even more important in this case as the image covers everything!
Thanks Ralph. Good tip! Thanks!
good tip but when i try that my image ends up in the lower left corner
actually my image does not show if i do that maybe my yaml is wrong explain the order please
I haven't tried this yet, but found this series based on search criteria and it is EXACTLY what I want to do. And there is great information here, well laid out and explained! Thank you sir for sharing and your contributions! [liked][subscribed][saved]&(if project.works=TRUE, result=call(BuyYouBeer(1))). TODO though, create vector icons using Adobe Creative Cloud.
Very helpful video series, thank you. I've been wanting to set up a dashboard like this for ages. I have one small issue when I implement this - everything works as expected, image buttons show correctly as does the room "glow" when a light is on, however it doesn't matter what I set for the tap, hold or even double-tap actions. When I tap or hold an "image" button it always shows the more-info. I've tried input_booleans, switches and light entities and it does the same for them all. I even have 3 HA environments - production, dev and a newish clean build - they all do the same too. Any pointers or suggestions welcomed :)
Hi there, great videos, but where do i put the demo booleans and the input_select. didn't work in the config.yaml. Thanks
hi thanks. I would add name of room SALOON, KITCHEN in various position . How can i do? Thanks
Out of interest, is there any reason you can’t export all layers at the same size as the base image and then use a position of 0 left 0 top and the same width for everything (or just not specify?) to indicate everything aligns in the same place as you originally made it? Why trim the light overlay images down to the size of each room then align?
Brilliant, thank you! Not working on my iphone though. Any ideas why that would be?
Hmm. That’s odd! Try removing the app, and the phone m through integrations and then re-adding?
You just kept the momentum, again a very nice Video. Only one thing I would like to know, when you use percentage to position the badges and overlays, not absolut positioning?
Hi Roger. Thanks for watching. If you use absolute positioning, when you view it on different screen resolutions it will be out of sync and won’t look right.
@@HomeSight Thanks for your answer I guessed right in this case but I wanted to have the confirmation.
No problem.
Hello and great job for ur project, i have a question, you have port fw with duckdns? i cant see my pictures only if i get the link from File editor and they are with api , and work only on the Dashboard created , if i try to open a new Home assistan is not showing any picture...
Hi the port forwarding for duckdns, is going to be 443, since that is the secure port for https. Assuming you have put an ssl certificate in place?
I can't deal with a 700+ line file. Use includes to break it up.
Please Somebody help,
When I already uploaded (copied) with samba the pictures to config/www/lovelace folder I can't reach these picture via browser (like your avatar image)
Of course after try to modify the lovelace background that can't reach and show..
What do I wrong?
Thanks!
Hi Simon ..
Very well done your guide ... thank you
But I can't find the.yaml file to support your movie, kindly could you share it
Hi. I'm glad you enjoyed the video. Apologies, it doesn't look like I put the link in this video The other videos in the series have the link, but for ease; it's here: homesight.tech/?portfolio=create-lovelace-interface-with-3d-floorplan-2
Great tutorial. I have an issue with the overlays showing as a grey box when the light is off. Have i exported them incorrectly?
You need to use a transparent image for when the light is off. On the website you’ll find a 1 pixel transparent pixel, make sure you set that as the off image.
It's actually showing the 1x1 pixel i setup but using the scaling i used for the overlay.
But that’s the joy of the 1x1 transparent pixel, you shouldn’t see it anyway... but you’re saying it’s showing up as grey? Sounds like it can’t find the image.
This is a great video i've been looking forward to part 2 and find you explain things very well,
However i do find some of your copy and pastes fast, i'm i total beginner so i need to know exactly what line you've copied things into which i can only read on full screen,
so i have to rewind and try and pause it at the exact moment then back if full screen so i can copy it :)
Just being picky but thanks.
Hi Steve, thanks for the feedback. I appreciate it, I’ll try and make it clearer. You can always use the code from the description if that helps?
@@HomeSight
Thanks yeah i've copied your code onto my setup and deleted some to leave 1 overlay and 1 entity and uploaded your icons and my overlay i made and lovelace is just displaying a grayed out box even though my browser confirms they are correct.
i'm not sure if this code will display right in the comments.
type: picture-elements
elements:
- entity: light.dining_room_light_level_on_off
title: Dining Room Light overlay
tap_action:
action: none
hold_action:
action: none
image: /local/lovelace/overlay/1x1_trans.png
state_image:
'on': /local/lovelace/overlay/dining_room_light.png
style:
left: 60%
top: 25%
width: 30.5%
opacity: 0.5
type: image
- entity: dining_room_light_level_on_off
title: Dining Room Light
hold_action:
action: more-info
tap_action:
action: toggle
image: /local/lovelace/icon/icon_light_spot_off.png
state_filter:
'off': brightness(80%) saturate(0.8)
'on': brightness(130%) saturate(1.5)
state_image:
'on': /local/lovelace/icon/icon_light_spot_on.png
style:
left: 50%
top: 31.5%
width: 3%
type: image
image: local\lovelace\floorplan\plan.jpg
Do you have all the images loaded in, and in the right place?
@@HomeSight Do you mean the icons and overlays etc ?
Yeah all showing in the browser with the URL.
It looks ok from the config, but from the sound of the grey boxes, it can’t see the images ...
Hi There, you have great videos. You make it easy for dummies (such as myself). Talking about dummies. I have done everything step by step as per your video and the floorplan video. The only problem is I cannot import the image. once a type local/lovelace/floorplan/floorplan.png. When I put the IP in file explorer, it gives an error 404. I can however go on my network and click on my home assistant, with config files and all. If I run the IP, there is no image. Can you please point me in the right direction, so that I can get this sorted? Thank you in advance.
Hi, are you sure you’ve created the same folder structure?
@@HomeSight I had the wring spacing in my yaml file, with one line. Thank you for the assist.
Glad you got it working!
Where/how did you create your head shot avatars?
On my iPhone and took a snapshot.
@@HomeSight how did you get this graphic avatar from the iPhone snapshot (photo)? Great series of videos btw, am following your methods.
They are created in “Bitmoji”. If you use Snapchat, you can create them easily in there
You need to fix the editing, some of the video is duplicated :)
Hi mark. Was it a big bit? Which bit?
@@HomeSight Hi, yes quite a long bit - look at 8:50 and 18:00
Thanks mark!
Thanks Mark. All sorted, although TH-cam says it may take an hour or so to update.