Interactive 3D floor plan with colour syncing lights using SweetHome 3D
Вставка
- Опубліковано 10 лип 2024
- A full tutorial to make a 3D interactive floor plan in Home Assistant.
I’ll show you how to create the floor plan using SweetHome 3D, integrate it into Home Assistant, then add buttons for lights, media players and heating.
The floor plan will update showing you the status of the lights and heating in the house, with colour syncing!
Making the Floorplan: 1:45
Selting up the lovelace: 5:20
Adding light photos: 6:26
Light buttons: 7:33
Media player: 8:34
Heating: 9:16
Final Code: github.com/willbob8/willsurri...
Sweethome3D: www.sweethome3d.com/download.jsp
A great write up of making a floor plan: aarongodfrey.dev/home%20autom...
Luke Vink’s Video: • Hass.io Floorplan UI w...
Luke Vink’s GitHub: github.com/lukevink/hass-conf...
Like VInk's Light Slider Card: github.com/lukevink/hass-conf...
As an Amazon Associate I earn from qualifying purchases. By buying through any of the links below I will earn commission at no extra cost to you.
The smart home tech I have is here: kit.co/WillSurridgeTech/smart...
▼ My HA setup
Raspberry Pi 3B+: amzn.to/3gF588j
64GB San-Disk: amzn.to/3iDUErN
▼ Amazon Products
Amazon Music Unlimited: www.amazon.co.uk/music/unlimi...
Amazon Prime - 30 day free trial: www.amazon.co.uk/tryprimefree?...
Audible Free trial: www.amazon.co.uk/Audible-Memb...
Kindle Unlimited free trial: www.amazon.co.uk/kindle-dbs/h...
Amazon Business: www.amazon.co.uk/tryab?tag=ws...
▼ Camera Gear
Canon M50: amzn.to/3iGsGeU
Manfrotto Element Tripod: amzn.to/3e7FYxF
Boya Mic: amzn.to/3fez8Ic
64GB San-Disk: amzn.to/2Z78vPC
▼ DJI Products
Buy a Mavic Air: click.dji.com/AO_0cxV8Qmj5tig...
Buy a Mavic Mini: click.dji.com/AMWoUtCGIPFYetJ...
Buy an Osmo Mobile: click.dji.com/AM9khwrxMoEKDKV...
▼ Social Media
Remember to subscribe: / @willsurridgetech
Instagram: / willsurridgetech
Facebook: www. WillSurridgeTech
Hey. Just dropping a comment to say thank you! Of those tutorials I watched and read, your tutorial was the one I found most helpful when configuring my floorplan within Home Assistant.
I love your tutorials. You're amazing! Your videos helped me so much when I was struggeling. Keep up with good work Will.
Happy to help!
Awesome Will! Thanks for another great video...
Thank you! Hopefully it’s useful!
Fantastic tutorial
"No need to display brightness of a speaker." :-D
I am happy to find your channel.
Looking forward to see more new videos.
I wish you a luck on the way.
Thank you! Glad you like it!
Thanks for this video! Amazing
Glad you liked it!
10 out 10 bro well put together
Thank you!
Thanks for the tutorial! The template sensor is now changing and also I had some trouble to find a cloud coverage module, due to the fact that dark syk is not avaiable (for new members), but at the end it works! And by the, I don't create extra files - I add everthing directly in the frontend.
Great tutorial. My floor plan looks great and the sun filter works perfectly. I am curious as to how to go about this with two levels. I plan to have a button which will change an input_select from “first” to “second” but I can’t figure how/where to add the conditional element and still have the night image as base for either first or second floor and have the state image for the sun opacity.
Hi Will, great tutorial, thank you! Can you explain how to remove the HA state-icons for the buttons and replace them with a round red dot when off and green dot when on? I can't figure it out.
Great video, thanks a lot Will! Is there a way to scale the panel size? My floorplan is filling only half of the height on desktop, tablet etc.
Thanks for this great video Will, are u planning some basic UI editing using decluttering card? Subscribed :)
I'll definitely have a look into that! Thanks for the sub!
Hi Will, brilliant video. But after 2 years HA changed so much, I can not follow your advice due to these changes. I want to put a heater card on the map of my camper. Is there a way to do that in the actual version of HA like you did in this video?
I had already made my card with my 3D floorplan using a picture card , but I saw in your tutorial the possibility that the colors of the lights, when changed, had the lights on the card changed as well. It worked, but the colors are not right. I realized that thinking about a 360º color palette, when choosing a color the light is the same color referring to about 30º clockwise… is there a way to correct this? For example when choosing blue , the light on the card turns magenta
Hi thanks a lot for your tip at the end for updating of lovelace. However I am still having trouble with the updating, for example if I were to delete the base.png files, the lovelace will still be showing the pictures. Any ideas?
Hello Will,
I find the topic very exciting, thank you for your fantastic video/tutorial.
However, I have to admit that as a German I can only follow the speed at which you speak and your dialect to a limited extent. Also, the pace of your explanations is very fast. Hence my question or request... do you happen to have written step-by-step instructions on this subject that you could send to me?
With that I would certainly be able to integrate the function of the synchronized light into my Homeassistant-system without any errors.
Thank you in advance for your effort and your answer.
Hi Will! Great vid! Currently struggling to get my floorplan color to synch with my hue lights. Do I need to use the sunset/sunrise code for it to work, or can I decide to only use the part that changes the hue of the lights. Thanks in advance!
Did you get the answer ?
Hi Will, can you make a tutorial how to configure Sonos media player on simple floor plan?
you say add sunlight_opacity sensor to config.... what is it? A template sensor? What defines its source of info? Am I being dumb?
Thanks for the video will.. especially the decluttering card makes a lot of sense.. What add-on tool are you talking about at 07:55 to get the percentage figures to place the icons?
This is it! community.home-assistant.io/t/lovelace-helper-for-floorplan-plan-coordinates/59666
You can also use this website and convert the position in px to a percentage -yangcha.github.io/iview/iview.html
Hi,
impressive tutorial! However, I wonder how to add this custom light slider card to my HA, because it looks really good... I would appreciate some advice! :)
It uses the slider entity row available from the HACS - github.com/thomasloven/lovelace-slider-entity-row
@@WillSurridgeTech thanks man, i will try it out later!
No worries
Hi
@Will Surridge Tech, love your work. Can you please go in to depth about adding your floorplan with all the cards and entities in a slower version of this video? I have seen this video like a million times, to reproduce all the things you mention. I am still hazzling and struggling adding my floorplan because everyone uses their own way of adding it. Can you please give a in to depth best practice on adding floor plans and all the options within lovelace please???? Thanks!
If you drop me a message on fb.com/WillSurridgeTech then I'll get back to you on there. I'd love to help sort this out for you, but its much easier having a conversation on messenger than through the comments!
@@WillSurridgeTech Do you have a linkedin? I honestly don't have a facebook anymore. (privacy) www.linkedin.com/in/jo-jo-homburg-9bb8595 , please connect if you can. Hopefully we can have a chat or exchange contact details. I am also starting a company within home automation with a friend of mine who is also very interested in your channel. I really like your channel and the way you present your channel! I will subscribe right now. And would definitely like to get in touch and get the right input for adding my floorplan into HA.
hi please i have a problem with lights entities, i can't access to lightning i think because my home assistant is running inside of a virtual machine.
what can i do to resolve this problem?
Will, you say that this works only with fully colour bulbs and not with normal bulbs. How to make them works? and what about shellyes lights?
Thanks!
To work with normal bulbs, I believe you can just remove the filter that does the hs colour on the overlay image
Any suggestions on how to represent led light strips? The only suggestions I've seen use multiple lights which seems tortuous to manage. I want to include four separate ones, each a couple of metres long. They provide mood lighting rather than main illumination of rooms.
Sweet Home has a fluorescent strip that I used for my under cabinet LED strips. You can stretch it as long as you need.
@@brianredmond7891 I can only find a non-functional fluoro strip in their library. Am I missing something?
@@ianadd9898 Hi did you figure out how to light up with lighstrips ? Thx
Big ask but is their away of doing this with a different weather integration than dark sky. Now that apple own darksky I cant add it as an integration
I'm not sure the normal weather integration supports cloud coverage - you can always simplify it and just do it based on sun - you'll have to create your own template sensor for that
Could really do with some help with this please. I've done everything you say in this video but it is not working. I think I have done parts wrong and they maybe just need a tweak but not sure what that tweak is. I've sent you ALOT of messages on FB
I really need help. I’m brand new to home assistant and I’m still trying to figure out what add ons to download, and all of the steps leading up to this video. Can you help?
I've replied on FB - hope it helps!
Please help me. My light doensn't wanna change its brightness. I've tried dozens ways to get the value for the opacity but it all stays the same
gday mate , good work you doing there, just trying to keep up . one question however:
why is the transparent.png is blacking out my entire panel ..i went as far as getting the overlay light picture to show when i switch on the entity
but when i turn off its just all black....not too sure about this transparent png thing or what i am doing wrong with it. i also tried to download from you github but if i press download nothing happens....forgive my ignorance haha, i have tried hard enough by myself ,,cheers
I'm not entirely sure - if you want to send me a message on facebook or email me with your config & lovelace file and I'll have a look :)
@@WillSurridgeTech Thanks for getting back to me , legend !i ll send that on yew
How to improve the colors?
How can i set the sun opacity sensor in my conf files? I can’t find a tutorial on internet
You need to add the sensor, using the first 33 lines of this code: github.com/willbob8/willsurridgetech/blob/master/Floorplan%20Demo/FloorplanDemo.yaml
how do you do the brightness slider that goes up and down? like in 8:27
Its the custom light slider card from luke - github.com/lukevink/hass-config-lajv/blob/master/www/js/light-slider-card-lajv.js
@@WillSurridgeTech thank you
No worries
Great work Will!!! I have a big issue, i cannot see anything in my card. Even if i copied and modified your code in my ui-lovelace.yaml and added the yaml version of lovelace in my configuration.yaml i still cannot see anything, the raspberry don't charge the page..
Can you help me?
Thanks!!!!!!!
Take it one step at a time - first you want the background night imgage, then add the day image, then add on overlay image; if that all works add the rest of the overlays, and then you can add the icons
Hi Marco, did you solve this issue? I have the same thing (driving me crazy!!)
@@user-iw8cq4fv4q yes now I have my dashboard!! I studied the code and I started with picture elements card. Adding type image and label I did everything
Fab!
fantastic tutorial! thank you for everything...
I'm getting an error for "Unknown type encountered: picture-elements"
Any ideas? I'm using the "Simple_Floorplan_Demo.yaml"
I did exactly what you showed and I'm getting a blank view :/ (just the background picture I'm using in the frontend). any suggestions? what am I missing?
Drop me an email with your code and I can take a look
@@WillSurridgeTech Done! Thanks!!!
no worries
I currently have the same issue. Could you share the solution?
@@stijneke2911 I'm not sure what was causing the problem - a lot has changed in HA since the tutorial - try this code for a more simple implementation - github.com/willbob8/willsurridgetech/blob/master/Floorplan%20Demo/Simple_Floorplan_Demo.yaml
Hi, where is the transparant image on your git hub?
Never mind, I found it at the top lvl
glad you found it!
Slow down demo a bit . please
Hi John, sorry it was a bit quick - you can see a slightly slower version of the lights in my overview of my home assistant video, or have a look at Luke’s video!
If you want to see anything specific let me know!
thanks and keep up with the good work
Thank's John!
how do you add it if you do not use lovelace in yaml mode
Hi Poulsen, I've never used the non-yaml mode I'm afraid, so I cant tell you for certain, but I believe that templates won't work, so you need to add all the information from the template into each entity. I hope this helps? Let me know if there's anything else I can do to help!
@@WillSurridgeTech Same problem can you help?
Great tutorial if I wanted to watch it at .12 speed to be able to actually follow your coding..
Hello im really confused on how the floorplan is supposed to show up
me too
Your tutorial is 100mph, I know we can pause shit but damn it pro-longs shit having to pause every five seconds playing catchup.
error:
Component error: floorplan_media_player - Integration 'floorplan_media_player' not found.
Component error: decluttering_templates - Integration 'decluttering_templates' not found.
"decluttering_templates...."
Where to put the above content
I put this template to ui-lovelace.yarml,it's ok now ,but other error “browser mode pop up services not find ”
You neeed the browser mod installed for the pop up function to work
@will: thanks for your amazing work , still struggling with coloursync (no change) and browser mod pop-up(not appear). Some help would be awesome... ok to send you an PM on fb? or do you know a nice community for that?
If I use the light entity, it is ok, but if I use SWITCH entity , the IMAGE cannot display the normal state, and other lights must be clicked before it is displayed normally. The same is true when using TEMPLATE LIGHT
- type: image
entity: switch.unit_door_2
tap_action:
action: toggle
state_image:
"on": /local/ui/floorplan/double-door-open.svg
"off": /local/ui/floorplan/double-door-closed.svg
"unavailable": /local/ui/floorplan/double-door-closed.svg
style:
top: 20%
left: 63%
width: 5%
HARMONY template light：
- platform: template
lights:
livingroom_light:
friendly_name: "livingroom light"
turn_on:
service: remote.send_command
data:
entity_id: remote.livingroom
command:
- PowerOn
device: 65186473
delay_secs: 0.6
turn_off:
service: remote.send_command
data:
entity_id: remote.livingroom
command:
- PowerOff
device: 65186473
delay_secs: 0.6
Have the same issue... Did you find a solution???
I'm really sorry, but I'm here to bother you again. I checked a lot of information and failed to solve this problem. Can you give me some guidance? Regarding the status of TEMPLATE LIGHT and SWITCH cannot be displayed on FLOORPLAN3D immediately, other lights must be triggered first
LIGHT STATUS:
- type: image
action: none
entity: input_boolean.livingroom_light
hold_action:
action: none
image: /local/ui/floorplan/light/livingroomlight.png
style:
filter:
>-
${ "hue-rotate(" + (0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['input_boolean.livingroom_light'].state === 'on' ? '1' : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- entity: light.livingroom_light
hold_action:
action: none
icon: 'mdi:ceiling-light'
style:
'--iron-icon-height': 2vw
'--iron-icon-width': 2vw
'--paper-item-icon-active-color': '#CCCCCC'
'--paper-item-icon-color': '#CCCCCC'
align-items: center
background-color: "rgba(255, 255, 255, 0.2)"
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 3vw
justify-content: center
left: 58%
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: 60%
width: 3vw
tap_action:
action: toggle
type: state-icon
You go too fast.