Home Assistant Picture-Elements 3D Floorplan every step * 2021
Вставка
- Опубліковано 15 жов 2024
- In this video I’ll show you how to create a 3D floorplan Picture Elements in Home Assistant. We’ll use the Sweet Home 3D to create the layout and the floorplan, GIMP to edit the pictures and create the layers and to finish elements card in home assistant to add some icons to the image and how to interact with different switches, lights, sensors.
www.sweethome3d...
www.gimp.org/
When he said... "I already had it... but anyway I doing it so you can see how it's done." I smiled. Instantly liked this guy.
thanks Robert for the great video, I tasked my son (10 years old) to create our house in sweethome 3d and then he found and followed your video tutorial with ease. end result is awesome!
Hi Robert, thank you for the detailed walkthrough tutorial. I enjoyed your teaching style and well explained steps. I hope to see more future videos and wish you a good and safe festive celebration.
Incredible - This is so detailed and so informative - I have rarely experienced such honest tutorial videos in my life. Just salute to the Robert the Creator. Will look forward to all your videos. Do let us know if you are planning to teach Home Assistant for new learners like us, we are ready to join paid sessions of training.
That mouse must be destroyed 😂😂😂 good job mate. Thank you for your work
😆😆😆😆😆😆
Robert, you were amazing explaining this video. This is the best video going step by step. Thank you for taking the time and sharing your knowledge.
If you have time, could you share some of the resources that you used to get all this knowledge ? I think you gave us enough to get us moving forward, but there is more to learn for sure. THANK YOU !!!
Hello! First of all, thank you very much for the guide. Thanks to this, I managed to make lovelace 3d for my house. I have a question. In the empty space, the last added element is active. If I click on it, the switch opens and I don't want that. All the other elements work perfectly. I tried to remove this element for a test, and it turned out that then the last element from the list is active in the empty space. How do I avoid this? I want the empty space between the elements to be inactive. I will only add that there are several light sources in one room. Best regards and thank you very much again.
0:13: ⚙ Tutorial on how to create an image element map for home automation using free software.
8:36: 🏡 Import and organize 3D models to create a 3D floor plan in Home Assistant.
15:42: ⚙ Creating a 3D floor plan with home office and bedroom using a home assistant.
23:57: 💡 Setting up and naming lights in different rooms for 3D floor plan visualization.
31:28: 🏡 Create and save different lighting scenes at home in a folder.
42:23: ⚙ Editing Floor Plan Elements with Opacity and Selection Tools.
52:50: 🖼 Create and organize 3D floor plan images for Home Assistant configuration.
58:55: ⚙ Configuring the image display for switches and icons on the screen.
1:05:16: ⚙ Customize icons and sensors in Home Assistant Picture elements.
Excellent tutorial!
I have a question.
When I select the images and isolate the light just like you are doing it in GIMP, I have multiple light sources in my living room, If I make the buttons like you do, I will have overlapping buttons.
For example:
2 light sources in one room.
If I make 2 separate images for each light source, what will happen in home assistant when I turn on both lights?
The two images will overlap..
Gteat video and well explained. Such an awesome addition to my smart home
Muito bom o vídeo, consegui fazer com minha casa, gostei muito, obrigado =)
Robert, outstanding tutorial. I've followed your tutorial, but I have a problem, if I click anywhere on all over the floor plan but the entity icons, I get a pop up of the last light entity on the yaml cascade, eg: my last light entity on the yaml cascade is my backyard kitchen light, so when I click, let's say, between 2 icons where no icon is showing, I get a pop up with the kitchen light "more info" window. Am I doing something wrong?
I have the same problem. Have you solved it?
Add "tap_action and hold action: none" to EACH type
Example of my code:
- type: image
entity: light.dining_lamp
tap_action:
action: none
hold_action:
action: none
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': local/3D Floorplan/Light_Dining.png
'off': local/3D Floorplan/Plan_Transparent.png
@@psb73 thank you so much for this. Adding the hold_action line made all the difference!
@@psb73 thanks for that as adding that code fixed the issue for me
Great Tutorial, really very clear, only thing when I put the action code I get an icon in the lower left corner that opens only the standard folder, would anyone have a solution?
could someone post the full code if not prying where i should just change the Switch names? Thank you very much ( I use Home Assistant 2023.1.4)
the best ever explain .. thank you
Thank you for this video and detailed explanation.
Thank you Robert, this is inspiring.
Thank you see much for this detailed explanation!
Great video
Instead of GIMP can I use photoshop ?
very nice work, I appreciate your nice work and very informative for new user like me with 0% knowledge about coding ^_^
Great video but that mouse clicking is very annoying.
Hello, i have an issue, when I click anywhere on the floorplan other than on lights icons and other elements, it still activates a menu for a light. Is it possible cancel this ? Only clicking actions allowed on icons ?? Thx
i have the same problem
@@Morit4466 very annoying
Salut Robert.Mi-a placut mult videoclipul si chiar m-a ajutat.Dar cum ai pus intrerupatoarele acelea ptr fiecare lampa(virtuale)pe imagine?Multumesc.
salut, nu trebuie sa pui interuptor pe lampa. faci tot din home assisnat. Din picture ellements card. In cazul meu cu masa si cele 3 lapi de exemplu, ai poza cu masa si lumina pornita si optita, si codu e de mai jos. Pentru fiecare lampa am creat un cod care incepe - type: state-icon si ca sa nu se vada interuptorul pui opacity: 0, asa e ascuns, sau adaugi '--paper-item-icon-color': white si schimbi white cu culoara la fundal asa nu se vede.
Vezi cele 3 lincuri, pe primu e poza initiala, al doilea ecel ce controleaza, e cu poza cu masa si luminile aprinse, si a treia e un png transparent.
drive.google.com/file/d/1TfXIO8qgZJSlzFTD5bsMDB2rSAdYnkTX
drive.google.com/file/d/1hoxToH2aeoW52HAMLv0qQxp5T05CqeVa
drive.google.com/file/d/1lx9w75EY2Bchmd698FEl5qMTW6BdrMgI
- type: image
entity: switch.dining_switch
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/images/3d_plan/dining_light.png
'off': local/images/3d_plan/transparent.png
- type: state-icon
entity: switch.dining_switch
tap_action:
action: toggle
style:
left: 23%
top: 38%
opacity: 0
'--mdc-icon-size': 60px
- type: state-icon
entity: switch.dining_switch
tap_action:
action: toggle
style:
left: 23%
top: 45%
opacity: 0
'--mdc-icon-size': 60px
- type: state-icon
entity: switch.dining_switch
tap_action:
action: toggle
style:
left: 23%
top: 30%
opacity: 0
'--mdc-icon-size': 60px
Mersi frumos ca mi-ai raspuns.O sa mai revin cu intrebari daca nu deranjez.Mai am unele nelamuriri.O seara buna.
Hi Robert. I found the solution by myselfe. You wrote the toggle directly after tap_action: You have to go one line don and write action: toggle then it works. See down below
tap_action:
action: toggle
Best Regards
Hi, thank you. but the acción: toggle was already in the code. if you look at the video at 1:11:24 you can see the code is there. There is a problem however, if one of the device is removed from the house, will make the image refresh constantly.
Hi Robert, thank you so much for this Video. That makes it so easy to get my own Floorplan Dashboard. But I have 1 Problem. I cant switch the lights on or off in the Dashboard. I can just see the current state. I think it is the "type: state-icon". Is there another opportunity so solve this problem ?
Thank you very much
the alpha channels are causing the overall lighting to dim in my case when more than one switch is on, is there any fix for this? i.e., 2 simple ceiling lights, I would expect 2 to be brighter than one with more coverage. I noticed the coverage got larger but both dims.
Do you have any idea why I can't turn on 2 lights at the same time? I creat the floor plan and everything ok except when I turn on a lamp the other one turn off
Very nice description. Thank you for sharing!
Hello, how about the TV, roller shutters, and A/C for exemple, how to animate it please on the 3D floorplan ?
First of all, thank you for this wonderful tutorial!!
But I need more help. I didn't understand how to create this part of the code.
- type: image
entity: switch.entrance_switch_1l
I don't understand where this entity, entrance_switch_1l, comes from.
You don't say in the video when you create it. Sorry my English is very bad. Would you help me ?
Sorry, I found the solution and placed the lamp directly.
But now I have another problem, my whole image is clickable for more information about the last entity I added... I can't click on any other one!
Any idea why IMAGE size will NOT match ?? whatever I try to do, they are NOT the same size !!
thank you sir.
Nice job, Robert
Nice video! Thank you
Your script goves me a picture within the picture and they do not have the same size. Icons can not be moved. What am I doing wrong?
thanks for sharing, great video
"state_image: null"
this msg null doesn't always appear when I save and I don't get results.
Hi Robert.
Is there a way to hide the circle that you get around the object that you klicked on?
The faded circle is indicating the last thing you pressed with your mouse.
Hi Robin, i dont get a circle, you can get a circle like constantly loading when one of the items in thw plan is misconfigure or missing.
where to specify the light bulb icon ? i didnt see any in ur code
Great job!
Nice tutorial
Thank you so much
is there audio on this? it's dead silent for me??
is it just me or the voice from the video is really low? I can't hear a thing but mouse clicks
hello Robert, I'm following your video that I think is the best but as I double the dark photo to transparent, I don't know how to do that...thanks
You mean the outsite of the photo, or when you turn on the light the bit underneath? This is a series of small images. You have base image then the other comes on too as you need them
@@salvamipc at 36:47 to 37: 06, you duplicate the night photo, creating a transparent one from home_dark, how did you do that? I can't make the transparent one, did you notice? I'm following your video which I think is very detailed but you say you need two photos of the night one of them is transparent how do you do it? thanks
Thank you for this video and detailed explanation.