Це відео не доступне.
Перепрошуємо.
How To: 3D Floorplan in Home Assistant
Вставка
- Опубліковано 24 тра 2020
- Quick video of how to create a 3D floorplan for lighting and controls within Home Assistant.
Link to detailed instructions: singlebox.tv/?...
Link to Transparent file in video: i.imgur.com/Ep...
I don't have ads, but accept donations. Like what you saw? www.buymeacoff...
Excelent Tutorial ! Straight to the point, no complexity but with the details needed. I have 3D and Imaging skills but new to Home Assistant. Congrats, Right on what I was looking for !
One of the best tutorials I have ever seen . Thanks a lot
Thank you!
@@TylerDanielson yes, really the best tonight I'll try but if I have 2 lamp in same room?
@@memento316 Thanks! Instead of using the lasso to highlight the room, use the magic wand tool to highlight just the white light color. Then, when you invert and delete, it should be focused on just that light, then the lights will layer on each other. Might take a little time to get right; it did for me.
@@TylerDanielson really thanks I hope do not ask more question. You deserve more views
What an amazing tutorial, I have googled the web for this type of built for my HA, but all were so complex. This is really good, thanks!! (PS. working flawlessly!)
Thank you! I'm glad you liked it!
Amazing work. I don't know how to use any of these tools but I think you did an awesome job of simplifying some impressive effects. Can't wait to try! Thanks so much!
This is amazing!
thanks!
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 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?
step one, get a floor plan.. damnit! haha great video super impressive
I just started using home assistant and I know absolutely nothing about anything but I still managed to follow this video and my dashboard looks great!! My only question is: is there a way to change the color of the light on the dashboard to correspond with the actual light?
when I use 7PM forward and no lights the render is enterily black....
Great video, I see you were still answering questions about it a few months ago so I'll give it a try: If I want to create multiple floors, would you create one floorplan with multiple levels or do a separate plan for each floor? Considering it would be nice to access all floors from one floorplan in HA, but if it not possible it's not the end of the world I guess.
In theory, you could do all floors together, but honestly I think it would be a lot easier to do the floors separately and then merge them into your HA control. It starts to get cumbersome trying to overlay multiple floors in a single file.
@@TylerDanielson yes I noticed that too I've spent the last half hours trying to get them to match XD
Thanks for the fast reply!
So I finally managed to get round to finishing this. Seems to work fine except I keep having a rotating circle in my cards like its loading. Any idea why?
This is the solution:
For each light overlay set the tap_action and hold_action to none. If you do not do this, the entire image will be clickable and only toggle the last overlay in your list. Instead we will add a light toggle of a small transparent square that will sit on top of the light in the picture. This way we will be able to click on a small portion of the image to toggle the state of the light.
Can you explain that in more detail? maybe an example?
Can you explain, how to add this small transparent square?
thanks so much,
Hey Tyler , Thank you so much for this. I have one issue :
I can view the floorplan on my PC in home assistant but not on my mobile devices via the companion app. Any ideas why this might be ?
great video!! just what i was looking for but i'm having a problem added more that one entity, one works fine i add 2 or 3 or more and i get a switch of the wrong thing pop up for the other entity i have ...ive gone over it 100 times and changed it around 100 times any ideas...also did you rename dark.png to full.pgn ...that kinda messed me up but didnt know if i missed a step
type: picture-elements
image: local/images/3dfloorplan/dark.png
elements:
- type: image
entity: light.laundry_room_lights
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': /local/images/3dfloorplan/laundry_on.png
'off': /local/images/3dfloorplan/tranparent.png
- type: state-icon
entity: light.laundry_room_lights
style:
left: 20%
top: 38%
tap_action:
action: toggle
- type: image
entity: light.garage_lights
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': /local/images/3dfloorplan/garage_on.png
'off': /local/images/3dfloorplan/tranparent.png
- type: state-icon
entity: light.garage_lights
style:
left: 35%
top: 68%
tap_action:
action: toggle
- type: image
entity: light.kitchen_lights
style:
left: 50%
top: 50%
width: 100%
state_image:
'on': local/images/3dfloorplan/kitchen_on.png
'off': local/images/3dfloorplan/tranparent.png
- type: state-icon
entity: light.kitchen_lights
style:
left: 55%
top: 20%
tap_action:
action: toggle
Hi man, great video. Thanks for this explain
Thanks!
Awesome tutorial! I followed it and all is working nice. Just having problem with displaying the floor plan on other devices (phone or tablet). I set the position of icons & “light snippets” on my PC screen - looks ok. I open HA on mobile phone or tablet and everything gets out of place. Is there a way to make the positioning of .pngs and icons “dynamic”? Resizing to the size of the screen? Probably invovles some CSS styling. Anybody fixed this issue?
good job
First of all, thank you for this tutorial. at @12:56 what did you do after selecting "INVERT" ?
I hit Delete. It deletes everything in that layer that isn't selected.
@@TylerDanielson Thank you this is where I got stuck lol!
Hi, how may I change the picture, if I have 2 or more different lamps in one room. The HomeAss. has to check which light is on, and change the image to the right picture.
you'll need to set the transparency so that they overlap and blend. You may also need to look at making sure they are layered properly
@@TylerDanielson I have found another way. The magic word here is "conditions"
@@Tobis_Tricks Oh nice, good call. I haven't visited this in a while, been stuck doing my day job (lame). But I do need to create a setup for this for my new house. Maybe next time I'll narrate it, too lol
is it okay if i make a spoken version of youre video? ill link youre donation link and origanal video
Great video
Can I use photoshop instead of GIMP?
You definitely could. I use GIMP because it's open source, but I'm sure Photoshop would be a lot easier to use if you have access to it
I made it work :) but i can only always get the last state-icon to work only, have added 4x and all works if i turn on/off from HA, seems like the last state-icon i add to config is always ontop of all others. As you only add 1 state-icon on video.
That's also my problem. I figured it out that the second or third images are too big when they are in off or on state, so overlaps everything else. Any advice? :)
@@Otti6 did u find a solution?? thanks
I have the same problem
same problem... somebody found the solution for this?
@@RoccoPagano just put the stap-icon at your bottom yaml file
When I toggle my last entry in the config, my office lamp, the light toggles off and the image on the panel reflects the change. This is great, however there is now also a gray bar through said panel with a broken square looking icon in the center. From here, I can't click anything and it is broken until I turn the light on again manually and refresh the panel.
Another side note: I can only select my office lamp to toggle no matter where I hover my mouse on the panel.
Any ideas?
The broken square is looking for a file you don't currently have. Check the description above, there is a link to a transparent file you can upload and use to replace it.
As for office toggle, make sure all of your lights come up after your image files. This will layer them on top and make them selectable.
@@TylerDanielson Thanks, this is exactly was happening to me as well. It was to do with the layering. I moved the layers to the top and it all now works!
BTW brilliant video - many thanks.
Hi, do you have the written guide also for integration in Home Assistant?
Thanks
Hi there! I started one: singlebox.tv/2020/05/25/how-to-3d-view-home-assistant/
I hope it helps!
My state icons dont seem to be clickable. The icon is displayed on the plan but I can't click on it despite having the tap_action defined. Is there a way to have the icons "always on top"? so you can interact with them?
Replying to my own thread. Icons and images need to go at the bottom of the file in order to show over all the images
@@TempusWarrior Hi, I had the same problem, can you post your yaml file so we can compare. Thanks
@@TempusWarrior I didn't get your point, how to set it up? Thanks
@@marconugnes6192 Just put the stap-icon at your bottom yaml file
Great tutorials, I am having an issue at 09:20, the picture rendered at best is just black. Is it possible I am doing sthg wrong? THank you
There's a chance you don't have the lights turned on or turned up enough. Mine took a while to render, so it was black initially. If the final render is still black, it definitely isn't getting enough light from the lamp you placed. I haven't played around with it in a while, so I'm not entirely sure which setting to play with. Maybe daytime settings? If you want, email the file to tyler@singlebox.tv and I'll take a look (though it might take a while
@@TylerDanielson Thank you fixed
Hi,
Very nice video.
What's the best way to get the image to fit on a phone ?
Me puedes diseñar mi planta para usar en home assistant si te paso los planos? Me dices cuanto me cobras?
Hello!!! I can't find the file simple floor plan design ... can you help me thanks
Hey Tyler.. great job on this ! I'm almost there .. but I'm having problem that I can toggle only last light added .. other are not active .. can you advise ?
Thanks! Layering is important. If you have transparent layer on top of your icon, you won't be able to click it. make sure all of your transparent layers are added before the icons for changing them. This will put the toggles on top and make them selectable.
After the Inversion and delete and transparency reduction, I toggle the visibility and it don't show the room on the floor plan. It just shows the selected area as the black/white pattern from the areas that was cut out at the inversion step
that's exactly what you want. the black/white pattern means it is transparent, so when you add it on top of your full image later, it simple lays over it.
Sure would appreciate some audio. I can't replicate what happens after you delete the inverted image. Mine goes dark, so it's something I'm not following in the progression.
Hey Trey, I am sorry for not getting commentary to go along with this yet. I'm working on it, but it is taking far, far longer than I thought it would. There are couple things that might be causing an issue:
1) check to make sure you are on the correct layer
2) right click the layer and make sure "alpha layer" is turned on
If you want, send me a screen shot of what you see at tyler@singlebox.tv and I'll see if I can figure it out for you.
@@TylerDanielson thanks, figured it out, as you're dark layer is at the bottom and was my problem. So I'm good on that, but now struggling to figure out the "Transparent.png" . The link in the description seems to be broken or I'm not understanding the premise. Still working through this and appreciate the response
Hi Tyler.
Can you post your card example here? And by the way, why no audio???
this is great but how to make it auto adapt to day and night ? as it wont look good if it looks dark at noon
You could create another layer for outside and tie its visibility to sun.sun sensor
@@TylerDanielson thanks
This is a nice and comprehensive tutorial. Thanks alot. However, I have a question, where do i find the transparent.png?
link in description
Did you ever find the transparent image?
I have a problem now, as I have more than one light in every room... When one light is turn on, that picture element cover other swith and in order to turn on the other, I have to turn first one off... Any idea how to solve this?
Order matters when it comes to you layout. So HA will populate each icon in order and layer it on top of the previous. So your config file needs to look like image, image, image, icon, icon, icon. You may need to put all images first, then icons so they layer properly.
@@TylerDanielson I realized that hour or two later :))
hi, i need your help, why i type in : 'on': '/local/image/3d_floorplan/study on.png' the image was keep loading there, when i key in: 'off': '/local/image/3d_floorplan/study on.png' the image only will show out?
There's a chance your layering is off. Try switching positions of the two layers in your file
Great tutorial! One question: When I add the state-icon, appears a warning sign as the icon. Is there a template or library I should have added previously? I don't have any real light connected yet.
I think that's why you have a warning sign. Try it with a different source to see what happens.
Hi and congratulations on the video, it was very useful for me, however the link for the transparent file is not working, can you check? Thanks
Thanks! This is going to sound silly, but when you open the file, it will appear blank because, well, it is entirely transparent. You should be able to right click the above link, "save link as..." and you'll see a PNG file being saved. That's your transparent file. Hope it helps!
When i make the building without any lights its shows all dark at all, i cant even see anything in the draw. Do you know something to help me, please?
You can try adjusting the time of day when you are rendering. I set mine to mid afternoon so there is a little light but not too much. Play around to see what looks best.
I have a problem with floor plan card config or picture export settings.
Gimp exports png ok with alpha channel, and when I link it in card it shows ok.
The problem is that the last image that is added to card, always takes the full space for action, and not just the small color portion of the image it self.
let say i add a "kitchen on" png, the space for toogle state is now the complete card, and not the small location reserved for kitchen.
In conclusion, last picture overlaps all the others.
example (ignore png file names):
type: picture-elements
image: local/3dfloorplan/floor_plan_dark.png
elements:
- type: image
entity: light.flux_poolled
tap_action:
action: toggle
image: local/3dfloorplan/piscina_teste.png
style:
top: 26%
left: 66%
width: 29%
state_image:
'off': /local/3dfloorplan/transparente.png
- type: image
entity: light.xo
tap_action:
action: toggle
image: local/3dfloorplan/pala.png
style:
top: 50%
left: 50%
width: 100%
state_image:
'off': /local/3dfloorplan/transparente.png
- type: image
entity: light.xu
tap_action:
action: toggle
image: local/3dfloorplan/cozinha.png
style:
top: 50%
left: 50%
width: 100%
state_image:
'off': /local/3dfloorplan/transparente.png
in code above, It only allows to toggle light.xu in all layout of the floorplan card.
Any clue?
thank you so much for the tutorial!
found out that this cannot be done as you show in video (or at least i cannot find a solution)
the only way to do this is using transparent buttons and disable tap and hold for images.
done this with transparent buttons and now it works
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
Hello, congratulations beautiful project, I made this project, I am a neophyte, I have a problem, if I put more rooms on a script, the light turns on and the room lights up, but only the last line of the script lights up the others that are first physically the light but the image does not light up, is something missing? I copied your script to the video and repeated the same for all lights. Can someone help me? thanks
did u find a solution? i have the same. Thanks
Me too the same problem
Hello, I have a same problem, can you someone help me?
You may need to adjust the transparency of the layers. If you have them set to 0%, they are taking that entire image and showing the layer. What I did was delete everything that wasn't related to that light, and I set the whole layer transparency to something like 50%, this way it could layer. You need a way to be able to see the layer under the one that is already on. I believe that's what your issue is.
How does this work for multiple floors in a house?
Sweet Home 3D supports multiple floors. There's an option in the top to add a floor. Just render each floor as above and build them out as separate floor plans.
You lost me at the 12:36 - 12:48 Invert..The background doesn't pull above leaving the lite room, for me nothing happens. Also, should there be audio with this video?
Hi there! Sorry about the audio. I intended on writing up a detailed tutorial, but then life got in the way. You can find what I put together here: singlebox.tv/?p=11404
For clarification, after I invert, I delete everything else on that layer, leaving just the lighting left. I do this for each layer so that only lighting is there.
@@TylerDanielson Boom! Magic! You are the man! Really great and helpful video. Thanks.
@@danielc6038 Thanks! Glad it worked for you!
is there meant to be audio with this ? I can't hear anything...
Hi Steve. There was not originally intended to be audio. I intended on writing up a detailed blog (posted above) to go alongside it. I am actually in the process of moving to a new house, so all of my projects have been put on hold. But, as soon as I move, I will be starting a whole new automation build and documenting/recording/vlogging the entire process
Ciao , non riesco a fare inverti, potresti essere più chiaro in quel passaggio grazie
I don't hear anything 😮
No audio. I got camera shy 😶. Hopefully the subtitles can help
Hello, great job, congratulations!
Could you tell me where i am going wrong?
type: picture-elements
image: local/imagens/3d_floorplan/Floorpan-Dark.png
elements:
- type: image
entity: switch.sonoff_1000a86689_1
style:
left: 50%
top: 50%
width: 100%
State_image:
'on': local/imagens/3d_floorplan/HC_ON.png
'off': local/imagens/transparent.png
- type: state-icon
entity: switch.sonoff_1000a86689_1
style:
left: 100%
top: 45%
width: 100%
tap_action:
action: toggle
Hi there! I am sooo sorry for the late response. For some reason youtube doesn't alert me of new comments. I see a couple of things that might be affecting your layout:
1) add a backslash before all of your URLs. "local/images/..." should become "/local/images/"
2) not sure if it was intentional, but you have your folder name as "imagens" and not "images"
3) line ten, remove the capital S in state_image. YAML is case sensitive
hopefully this helps!
no audio at all??
Not currently. The plan was to build a website with detailed instructions. I'm thinking I probably should do audio on one of these.
No voice?
No voice, sorry. I thought about adding commentary, but keep forgetting to do so.
I'm sure you've done a great job, but a spaztastic person clicking around with absolutely no explanation is of little use.
I totally stopped working on this after posting the video. It needs a lot more work, but that takes a lot more time. I should have narrated, but failed, clearly. Any questions I could answer? I am planning on starting this over and actually talking through it one of these day
@@TylerDanielson I apologize. Thank you for the the work you have done. I was frustrated and you were an easy stranger to go after.
This would probably be a great video and very informative, if people who put out "How To" videos on UA-cam would grow a pair and learn to speak to describe what is going on and why they are doing what their doing. Otherwise why even bother to post a video?