Home Assistant how to create a Lovelace 3D floorplan with light overlays and buttons - Pt1

Подписаться 11 тыс.

Просмотров 58 тыс.

50% 1

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!

Опубликовано:

24 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@grantderridge7165 3 года назад

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!

@HomeSight 3 года назад

Thanks Grant I’m glad they have helped!

@keeptalking100 3 года назад

Your explanations are really well done - everything is clear and easy to follow.

@HomeSight 3 года назад

Thanks Mark! I do my best.

@omarei Год назад

So useful and love the free tools and resources and rundown

@partysqu1d 2 года назад

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!

@HomeSight 2 года назад

You’re so welcome! I’m glad to help!

@PeterHertel 3 года назад

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. 😁

@HomeSight 3 года назад

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.

@RogerStocker 3 года назад

Hi Simon Really great series I absolutely enjoy every second.

@HomeSight 3 года назад

Thanks roger! I’m glad you enjoyed it!

@jameswu6149 2 года назад

Open my eyes! Great thanks!

@philippedelage1698 3 года назад

Thank you for this great tutorial, can't wait for part 2. From a French user of HomeAssistant

@HomeSight 3 года назад

Thanks Phillipe, part 2 is coming very soon!

@RogerStocker 3 года назад

@@HomeSight That's nice to read, as I'm waiting for it too.

@v2gagao 3 года назад

Amazing work. Thanks for all the knowledge.

@HomeSight 3 года назад

You’re very welcome, thanks for watching!

@DannyDM00 3 года назад

Can't wait for part two!

@HomeSight 3 года назад

Get cracking on those graphics Danny and I’ll have part 2 ready soon!!

@marcelvanderwallen3463 3 года назад

Thanks for the great Tutorial. It helped me a lot.

@HomeSight 3 года назад

No problem! Glad it helped!

@ma-jt2cz 3 года назад

Subscribed and did the thumbs up . Great job.

@HomeSight 3 года назад

Glad You enjoyed it. Thanks for watching.

@AntonioSantos-ve6zv 3 года назад

Great content! Thanks for sharing!

@HomeSight 3 года назад

Thanks for watching!

@Martberg01 3 года назад

As always a great explanation. A Dutch Home Assistant user

@HomeSight 3 года назад

You’re welcome! Glad to help

@shaunwhiteley3544 3 года назад

Excellent, thanks! Cheers

@HomeSight 3 года назад

Thanks for watching Shaun

@kellanstevens 3 года назад

Awesome video! 😎

@HomeSight 3 года назад

Thanks Kellan!

@jhonattansouza 3 года назад

awesome!

@HomeSight 3 года назад

Thank you Jhonattan!

@kelvinfleuty6496 2 года назад

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?

@abdallah2243 Год назад

great

@TheDisturbed0ne1 2 года назад

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!

@jackofmosttrades.masterofsome 3 года назад

Just bought you a few beers (no worries if you have enough already ;) ). Your videos are amazing and well worth supporting. Cheers! :)

@HomeSight 3 года назад

Thanks Tony! That’s very generous of you. Ps. Am I your Valentine...

@jackofmosttrades.masterofsome 3 года назад

@@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.

@HomeSight 3 года назад

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

@SA-oj3bo 2 года назад

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!

@adrianpashby3095 3 года назад

Thats brilliant thanks , any news on the next part ?

@HomeSight 3 года назад

Hi Adrian, I'm just publishing now!

@MCompanje 3 года назад

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?

@HomeSight 3 года назад

Hi Melvin, look for the “Roomle 2D & 3D Room Planner” www.roomle.com/en/floorplanner

@MCompanje 3 года назад

@@HomeSight found it :-) it’s your link and /floorplanner

@clarenceg.7789 3 года назад

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?

@HomeSight 3 года назад

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.

@clarenceg.7789 3 года назад

@@HomeSight thanks for your answer. Any video on the one we see how it looks like on your phone? I mean yours or any...

@wbreck Год назад

You need to make more videos

@geek2330 3 года назад

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?

@HomeSight 3 года назад

Hmm, not that I’m aware of I’m afraid.

@ValZakharov 3 года назад

Here's like number 300 for you!

@HomeSight 3 года назад

Thanks!

@ValZakharov 3 года назад

@@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...

@HomeSight 3 года назад

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.

@guy999 3 года назад

hey roomle is 150 a month? are you saying use the free trial one?

@HomeSight 3 года назад

Hey! There was 2 versions you want the “floor planner” one: www.roomle.com/en/floorplanner

@jonazthern 3 года назад

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?

@HomeSight 3 года назад

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.

@jonazthern 3 года назад

@@HomeSight Yea, chrome too. EVen tried restarting, same issue. I'll have to try from another computer I guess then. Thanx½

@HomeSight 3 года назад

Hi, I’m sorry, I’m really not sure why that would be then...?

@jonazthern 3 года назад

@@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!

@HomeSight 3 года назад

Glad to help!

@SomeTimesUses 2 года назад

Roomle doesn't work anymore. Keep getting an exception error.

@stephentittel4742 3 года назад

the free option doesn't have a save option. But with a screen capture the problem is solved

@HomeSight 3 года назад

I wonder if they’ve updated it then, it certainly does on mine.

@healeydave 3 года назад

Roomle €150 a month 😮 I'd like one for my home, but not that bad 🤨

@HomeSight 3 года назад

Hi Dave, not that one! There’s a free one!! I’ll find the link

@HomeSight 3 года назад

www.roomle.com/en/floorplanner

@healeydave 3 года назад

@@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 :)

@HomeSight 3 года назад

No, doesn’t seem limited at all. I logged into mine that I did months ago and it was still sat there