Home Assistant how to create a Lovelace 3D floorplan with light overlays and buttons - Pt1
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- I'll show you how to create your Lovelace interface with a great looking 3D floor plan. We'll explore how to use free tools to create the floor plans, how to make the light overlays and finally how to make buttons with icons which show status of devices.
In the next part of this video, we'll use all of the graphics we create to create our interface.
Really want to show your appreciation? You can always "Buy me a beer"...
www.buymeacoffee.com/homesight
The Graphics are available here: homesight.tech/?portfolio=cre...
Tools used:
Roomle: www.roomle.com/en/floorplanner
Gravit: www.designer.io/en
Gimp: www.gimp.org/
Music: www.bensound.com
Video: Free Stock Video Footage by Videezy!
Open my eyes! Great thanks!
So useful and love the free tools and resources and rundown
Amazing work. Thanks for all the knowledge.
You’re very welcome, thanks for watching!
Hi Simon
Really great series I absolutely enjoy every second.
Thanks roger! I’m glad you enjoyed it!
Your explanations are really well done - everything is clear and easy to follow.
Thanks Mark! I do my best.
Thanks for the great Tutorial. It helped me a lot.
No problem! Glad it helped!
Thank you so much for this tutorial series! It has helped me more than you can imagine. Your videos are well-paced and extremely informative. Best I have come across so far for HA instructional videos!
Thanks Grant I’m glad they have helped!
Can't wait for part two!
Get cracking on those graphics Danny and I’ll have part 2 ready soon!!
Great content! Thanks for sharing!
Thanks for watching!
This series of videos is really well done and very informative. It's easily one of the best Home Assistant tutorials on the web. Thank you so much for helping to flatten out such large learning curves!
You’re so welcome! I’m glad to help!
Thank you for this great tutorial, can't wait for part 2. From a French user of HomeAssistant
Thanks Phillipe, part 2 is coming very soon!
@@HomeSight That's nice to read, as I'm waiting for it too.
Lovely stuff! A few gimp tricks to consider is to make a mask of each room and apply it to the layers with the light for said room. Or you could select the room with the square or point tool, then invert the selection and delete everything outside the room.
Another neat trick is ctrl+shift+v that pastes the current clipboard as a new image, saves you a few clicks when doing it many times.
Keep up the good work, I'll head off to part two. 😁
Thanks for the tips! To be honest I’m more used to working with photoshop, but reload that most people don’t have access to it, hence went with Gimp.
Subscribed and did the thumbs up . Great job.
Glad You enjoyed it. Thanks for watching.
Excellent, thanks! Cheers
Thanks for watching Shaun
As always a great explanation. A Dutch Home Assistant user
You’re welcome! Glad to help
Awesome video! 😎
Thanks Kellan!
awesome!
Thank you Jhonattan!
great
Hi Simon
Been watching your tutorial on making a lovelace floor plan, I am having a problem with gimp, I add a layer and go to the gradient tool but when I draw the light the first layer disappears, any ideas what I am doing wrong?
What hardware would be sufficient to run this? Haven't jumped into HA just yet, but will soon start migrating my Homey setup to HA, but haven't decided on what hardware to use yet! Thanks for a great video!
Just bought you a few beers (no worries if you have enough already ;) ). Your videos are amazing and well worth supporting. Cheers! :)
Thanks Tony! That’s very generous of you. Ps. Am I your Valentine...
@@HomeSight Hahaha, not sure my wife is ready for that! I do have a question. I am having trouble with your 1x1 trans.png. I can't copy into my HA local file, tells me there is not enough memory to complete this operation. I have opened it in gimp and copied to a new file, exported etc, nothing works. Any ideas? Cheers.
Phew! I was wondering how to tell you that I was flattered but taken! That’s odd with the image, I think I made it in photoshop and exported it, but you could download one from here: www.1x1px.me/# just set the opacity to 0
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!
Here's like number 300 for you!
Thanks!
@@HomeSight I was trying to pair Tuya ZigBee 3.0 Smart Gateway Hub Smart Home Bridge Smart Life APP Wireless Remote Controller (sorry for a long text - exact copy of the product from AliExpress) - can't see it in my ZigBee network. Successfully got water electrical valves found and paired, but not a gateway. That gateway got paired to my Tuya smartphone app - may be this is a reason? Should it be unpaired to any device prior to be found by ZigBee2mqtt, I wonder...
Is it possible to join the gateway to another network? My expectation is that the gateway is doing the same job as zigbee2mqtt, completing that conversion.
Thats brilliant thanks , any news on the next part ?
Hi Adrian, I'm just publishing now!
Great vid thanks! Regarding Roomle you mention a free version? In the link I only find priced licenses for € 120/150 per month, did I miss anything or did they changed that lately?
Hi Melvin, look for the “Roomle 2D & 3D Room Planner” www.roomle.com/en/floorplanner
@@HomeSight found it :-) it’s your link and /floorplanner
You need to make more videos
Hi. Thanks for this. I have a question, many people talk about these floor plans but from where can you see and act on them? I never saw anybody with this on a tab mobile or anything else. Is that only for computer or browser?
Hi, mine certainly work on the mobile client. It’s really important to me to ensure that they do. If you use relative (I.e. percentages) rather than fixed, then it should scale everything down or up.
@@HomeSight thanks for your answer. Any video on the one we see how it looks like on your phone? I mean yours or any...
I may be buying an apartment in a couple months and have the diagram in PDF showing dimensions. Is it possible to import that PDF into one of these design programs to get a better heads start instead of designing it from scratch?
Hmm, not that I’m aware of I’m afraid.
hey roomle is 150 a month? are you saying use the free trial one?
Hey! There was 2 versions you want the “floor planner” one: www.roomle.com/en/floorplanner
I'm trying to use this, but when I click on the PLUS to add a front door, I just get "Loading catalog" and nothing happens. Did I miss something?
Nope, it should be as simple as that. Click the + and add away! What browser are you using, I always use chrome and never had any issues.
@@HomeSight Yea, chrome too. EVen tried restarting, same issue. I'll have to try from another computer I guess then. Thanx½
Hi, I’m sorry, I’m really not sure why that would be then...?
@@HomeSight Me neither. This week has been busy, but I will give it another try this weekend :) Love the rest of the guide tho, you made is SO easy to make a nice overlay!
Glad to help!
Roomle doesn't work anymore. Keep getting an exception error.
the free option doesn't have a save option. But with a screen capture the problem is solved
I wonder if they’ve updated it then, it certainly does on mine.
Roomle €150 a month 😮 I'd like one for my home, but not that bad 🤨
Hi Dave, not that one! There’s a free one!! I’ll find the link
www.roomle.com/en/floorplanner
@@HomeSight Awesome, thanks, I'll give it a go, it the free one limited in time?
I don't want to get half way through and find its a trial period that expires :)
No, doesn’t seem limited at all. I logged into mine that I did months ago and it was still sat there
Where did the stupid name Lovelace come from???
Maybe after Ada Lovelace?