Table of Content
I am having trouble with making the SVG file and the path. You’ll see how to use triggers, actions, and more advanced stuff.
You will need to repeat this process for each room in order to generate all images of the rooms with the lights off. You will want each of these images to be the exact same size as the base image. If you’re searching for the latest version of ha-floorplan, please head over to the Releases page on GitHub. I’ve used Three.js to animate a floor plan model with data coming from Home Assistant .
Stylesheet
And of course if you modified the action to add each object on the card you can interact with them. Examples are created for you to get a good idea of how to use ha-floorplan as best as possible. It can be very time-consuming to create a good looking floorplan. These custom functions can be used within any of the rules within the configuration, and must be called using the functions.

We don’t have a proper “step-by-step” guide for this part. That’s mainly due to limited amount of time, but the process are also changing a bit over time, now that Home Assistant are always under active development. Nevertheless, if you still prefer to do it manually, feel free to grab the latest version from the /dist directory.
Floorplan for Home Assistant
All of the toggles should be below your overlays. If you do not do this, then you will not be able to click on any of your toggles. In the remainder of this post I will document the basic code and configuration as well as diving into some of the specifics for more advanced functionality. Floorplan has been created for you, but we can’t make everyone happy at once. If you have feedback for Floorplan, please create an issue, or join the discussion.
For services that support additional data, you can include that as well. Below is an example of setting the transition and brightness when switching on a light. Below is an example of a 'Lights' group, showing how to add lights to your floorplan. The appearance of each light is styled using the appropriate CSS class, based on its current state.
Files
Below you’ll find a working example of ha-floorplan. I rely on the possibility offered by SweetHome3d to export the floor model to the Wavefront format and than I import the model inside Home Assistant thanks to three.js. I’ve build a Home Assistant custom card at this purpose. This postand this one,in particular, inspired me to create my own 3D floorplan. First of all, check the indentation of the floorplan config to ensure the YAML is valid.

First of all, check out the Quick Start guide guide. You’ll get an idea of what Floorplan can do, and how to use it with a basic setup. Is there anybody willing to help on the management of lights and shadows in this project ? It is the most important functionality yet my final result is not what I expected in terms of quality and performance.
The SVG works just like the original HA Floorplan. I just copied over the SVG I had for that, and everything worked. You can also explictly set the domain if you want to call a service from a particular domain.
Once that was done, I used the Stanley app to export the plan to svg-format, after which I opened it in Inkscape to continue editing. Follow this step by step guide, to add your first Floorplan. There’s plenty of ways of doing this, but this is the best way for beginners. If you generally use YAML in HA, you may want to move on to the ‘Examples’ pages. You’ll also find useful links by looking at the What’s next-section on this page.
The select floor to show when viewing the floorplan. The on image for the state_image of each lighting overlay should also be set to the transparent square image. This will let the base image show which has the lights on.

Hovering over the entitiy displays a tooltip showing all the information related to the entity. It means you can replace a potentially long list of binary sensors in the front end with a single image that updates in real time using colours to represent states. Also has hover-over text to display more info for each sensor. I decided to show some miscellaneous sensors using state-icon’s. I have multiple motion sensors and cameras so I wanted to display them on the floorplan as well. Each of the items is an element in the picture-elements card for the floor.
Ability to view status of cameras and arm/disarm them. If you’re searching for an all-free alternative, checkout Sweet Home 3D. Each room lights up when the lights are on, doors are “animated”.
Work in top view and the bottom'll see the results as are 3D, the idea is that, leave it as close to our home. It really is simple, really, spend a few minutes and will have sucked. Another tip, make images with the highest possible quality, in my case I use 1920×1080 pixel resolution (both properties document / flat, as when the photo is made).
No comments:
Post a Comment