Table of Content
From there, I created a new layer for tracing over the bitmap, and saved as SVG. Took a while, but in the end, the result was worth it. The recommended web browser to use is Google Chrome. Also check the Network tab to see if any of the scripts failed to load. Ad-blockers have been known to prevent some scripts from loading. You can also add a 'last motion' entity to keep track of which binary sensor was triggered last.
Floorplan can display an alternate image for mobile devices. This can be configured using the image_mobile setting. Here you’ll learn how to add ha-floorplan to Home Assistant. You could go manual, but we’ll recommend you to stick to HACS. Please be aware that ha-floorplan will require a good amount of your time. Take a look at our examples, if you’re getting stuck.
Video-tutorials for all of you
I started using the Stanley Floorplan app to measure up my apartment. To get correct distances, I used their laser measurement that has built-in Bluetooth and automatically updates the app. Something like this should work too, even though you need to type in the measures yourself. Here you’ll find the .svg, .css and .yaml used in the example.
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 .
New examples and usage-guide
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.
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.
How to get started from scratch, but as a video
In the last couple of months, we’ve released a few new examples. Check out the remote control, and the modern floorplan. Here’s the latest posts about ha-floorplan, shared here in our documentation.
Floorplan supports calling all services exposed by Home Assistant, as well services that are exposed by Flooorplan. Even further simplified version of the rule, where action defaults to call-service. Floorplan supports the same action triggers used in Lovelace . In addition to these, Floorplan adds two of its own action triggers. To disable one of the defaults for a specific rule, the relevant action must be set to false within that rule.
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”.
Our Discussion area a also a good place to find help, but we’re expecting you to read the docs and give it a try, before you’re asking for help. I have successfully transition my old floorplan to Lovelace version but I am strugging to apply styles base on light state. I see in cosole that state are properly named and are updated on click. I scanned the original floorplan of our home and loaded that bitmap into Inkscape.
Wouldn’t it be great to have a custom UI that would show all your smart home devices laid out on a floorplan of your house. So with just a glance you could see which lights are on, which doors are open, or where there are people moving around? Of course you’d also want to be able to control all your devices from this wonderful imaginary user interface.
The remainder of the file is where you add your floorplan groups. These floorplan groups are not to be confused with Home Assistant entity groups that are used to combine multiple entities into one. Of course, you can choose to have it displayed in both places. If you have several floorplans to display (i.e. different levels of a house), that is supported too.
Displays sensor values for temperature and motion sensor events. A good piece of software with awesome assets is Floorplanner Not sponsored. Please keep in mind that Floorplanner will ask for a few bucks, if you would like to export the render in higher quality. If you’re running into any difficulties with Floorplan, below is a list of things you can try. The following example shows how the style is generated using a block of JavaScript code that spans multiple lines.
Below is an example of calling a custom function. When an action trigger is executed, Floorplan can perform any of the available Lovelace actions (call-service, more-info, toggle, navigate, etc.). Floorplan expands on the call-service action, allowing it to run both Home Assistant and Floorplan services. This is a powerful feature, as Floorplan ‘copies’ the default actions to all rules within the configuration. Floorplan also requires a CSS file, which can be configured using the stylesheet setting.
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.
No comments:
Post a Comment