Floorplan for Lovelace is here!
Just add the URI to HACS's as custom repository.
In the procress, kindly note down the location of the files. Normally you'll find them in the community/lovelace-floorplan-directory.
1) Download files from repo
To get started, copy the dist/floorplan-card.js to
www/lovelace-floorplan folder of your Home Assistant installation (You can right-click the file, to save it to your disk):
2) Floorplan image
You'll then need an SVG file of your floorplan, and a CSS file for styling. You can use the samples provided to get started. Copy them to the
www/lovelace-floorplan/examples/simple folder of your Home Assistant installation:
In the SVG file, rename the element IDs to match the entitiy IDs you have in your Home Assistant installation.
3) Adding to Lovelace
Add the following to the
resources: section of your Lovelace config.
resources: - type: module url: /local/lovelace-floorplan/floorplan-card.js?v=1.1.14
You can then start adding floorplan cards to your Lovelace config. Under
entities:, make sure to add the entity IDs which you want to use in the floorplan:
- cards: - config: image: /local/lovelace-floorplan/examples/simple/simple.svg?v=1.1.14 rules: - entities: - binary_sensor.main_bedroom - binary_sensor.living_area - binary_sensor.double_garage states: - class: 'binary-sensor-off' state: 'off' - class: 'binary-sensor-on' state: 'on' stylesheet: /local/lovelace-floorplan/examples/simple/simple.css?v=1.1.14 title: Simple Floorplan type: 'custom:floorplan-card' icon: 'mdi:floor-plan' id: system title: Floorplan
Note: If you're using the Lovelace editor that is built into the user interface, click on the three dots in the upper-right corner of the screen and select
Configure UI. Then click on the three dots again and select
Raw config editor. Then you'll be able to add the resources and card described above.
To get started with some fully working examples, try some of the floorplans below:
You'll find the primary functions of Floorplan, by looking into the Floorplan examples.
However, Floorplan supports Long Press, too. Here's one example on how to use the function:
- config: image: /local/floorplan/examples/simple/429.svg?v=5 rules: - action: service: light.toggle data: entity_id: light.triplespot_office element: area.office entities: - light.triplespot_office long_click: data: card: type: entities entities: - light.triplespot_office - media_player.sonos_office title: Custom Entity card service: browser_mod.popup
For the best results, use HASS Browser Mod.
Here's a sample snippet, only containing the
long_click: data: card: type: entities entities: - light.triplespot_office - media_player.sonos_office title: Custom Entity card service: browser_mod.popup
You're able to define a seperate SVG-file for mobile-devices. If
image_mobile are defined, Floorplan will use that for all known mobile devices.
- config: image: /local/floorplan/examples/simple/429.svg?v=5 image_mobile: /local/floorplan/examples/simple/429_transformed.svg?v=5 rules: - action: service: light.toggle data: entity_id: light.triplespot_office element: area.office entities: - light.triplespot_office ...
The `pre_load_ option are implemented to prevent "not found errors" for cards like hui-gauge. It is still unclear if it is still required.
I'll update details related to this, in near future.
- config: image: /local/floorplan/examples/simple/429.svg?v=5 preload_cards: - map - gui-gauge preload_rows: - lock-entity-row rules: ...
If you want so use a service like
hue.hue_activate_scene, which doesn't accept an entitiy_id, use
- config: rules: - action: no_entity_id: true service: hue.hue_activate_scene data: scene_name: 'sleep-time' group_name: 'bedroom' element: button-heating more_info: false
Inspiration and Support
Check the Floorplan-section on the Home Assistant Community.
The script is bundled with browserify.
To build floorplan-card.js, just run:
npm run build