Floorplan now available as a Lovelace card

Third party integrations Floorplan
416

Close I think.

The SVG file that you create with Inkscape generally* contains all the images. It consists of a base layer (in my case all lights off**) and then a series of layered objects above. The layered objects above are the light on image (in my case), maybe polygons that are invisible that serve as touch points, maybe text holders that are changed when the SVG is loaded. Each of the objects that you want to control somehow are given a label which is the SAME*** as an entity id in home assistant.

Then the UI-lovelave.yaml has rules which determine what happens to the objects in the SVG when a state change occurs to an entity and also is able to change the state of an entity if the floorplan is touched. For example, use of the following will change the state of the light entity.

tap_action: 
  service: light.toggle

The ui-lovelace.yaml also can specify a CSS class to apply to an object. The most obvious case is to show or hide the light on image and to maybe make that transition nicely. So in my ui-lovelace.yaml I have the following which occurs when the state of the light entity changes:

              state_action:
                service: floorplan.class_set
                service_data: 
                  class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'

and then the corresponding entry in my floorplan.css is:

.room-light-fadein {
  visibility: visible !important;
  opacity: 0.65 !important;
  transition: opacity 0.5s linear !important;
}

.room-light-fadeout {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: visibility 0s 0.5s, opacity 0.5s linear !important;
}

So hopefully that explains how the three files (SVG, CSS, ui-lovelace.yaml) all interact.

.* I say generally because you can load in SVGs via you ui-lovelave.yaml rules but you only need to do this if you don’t know which SVG to load until runtime (eg. current weather icon)
** You can do it the other way round I guess and have the lights on layer as the base but I find it easier to do it with lights off. YMMV.

*** You can use a an object ID which is not the same as a HA entity in some cases. See the usage docs on github for how that works.

EDIT: One more point of clarification. You create your 3D image in SweetHome3D then export that as an image. Then you IMPORT that image into Inkscape and do any further creation of polygons, text or import other PNG files. I use GIMP to take the lights on image and chop that up into multiple smaller images that are then individually imported, positioned and labelled in Inkscape.

3 Likes