Floorplan now available as a Lovelace card

Can I share svg? thank you [email protected]

Thank you, @luuk

I don’t get it to work on my floorplan:
The floorplan elements work well (car bulb alarm, washer liquid and such), but as soon as I put in your code (adjusted to my needs), all the other elements show up (should be hidden, when off.

- element: carbulbs
              entity: binary_sensor.hh_yy1114_bulbs
                action: call-service
                service: floorplan.class_set
                service_data: entitystate_car-${entity.state}
            - class_template: >-
                var hum = entity.state; if (hum < 40) return "hum-red"; else
                return "hum-green";
              element: cartemp
              entity: sensor.aerq_temperature_and_humidity_sensor_v2_0_air_temperature
              text template: ${entity.state}

of course the css stuff is in place as well:

.hum-green {
  fill: #21EC8B !important;
  transition: fill 1s ease;

.hum-red {
  fill: #F40D50 !important;
  transition: fill 1s ease;

Anything I might have missed (or changed over the recent HA updates)?
Any help is much appreciated.

On my mobile device so all I can say is that the whole class _template section is incorrect. Have a look at the examples in the docs for the correct way to apply a class and separately how to set text.

I can’t comment on the first section as I’m not sure whether you have included your entire css

New video out.


YouTube: ha-floorplan & JavaScript | Format time_date.time entity from military to AM/PM in state_action

This video was done on basis of the input request done here. I hope other people can use it for something.

If you’re normally trying to skip the string-manipulation in JavaScript, maybe this is a good place for you to start.

If you’re used to JavaScript, and already use JavaScript in Floorplan, you’re clearly not the primary audiance, this time :blush:.

Happy watching :grinning_face_with_smiling_eyes:!

1 Like


I have floorplan installed thank you. I have made an SVG of my homes floorplan in adobe illustrator. it’s uploaded and displaying in a view, just as the tutorial demonstrates. now looking to overlay/integrate some entities (things i have working in my dashboard) but am encountering the same issue i had using a picture card. I can only seem to add entities as separate cards. If I try to add them via the raw editor I get errors. can someone point me in the right direction?

Not sure I fully understand your issue but with ha-floorplan you can only use yaml. There should be no other cards. It is just a SVG with a bunch of rules which defines what happens when you interact with elements in the SVG

1 Like

everything is working with my install as expected, i am just after some direction on how to start overlaying my SVG with devices/entities etc. I have everything i want in my dashboard view, i would like to include them on my floorplan view. Information on how to do this seems to be very decentralised.

We have our documentation Floorplan for Home Assistant

There is also the discussions area on GitHub where people have asked similar questions and Tobias has posted some how to videos like this one Getting Started (1) | Add HACS & SVG-files and YAML entity mapping in Home Assistant · ExperienceLovelace ha-floorplan · Discussion #249 · GitHub

1 Like

Can someone have a look and advise where I am going wrong?

I would like to toggle show/hide element (or set opacity to 0) on a few overlay elements. Here is my rule:

    - tap_action:
        action: call-service
        service: floorplan.class_toggle
            - layer-visible
            - layer-hidden
          default_class: layer-visible
            - layer-overlay
        - button-filter
      name: toggles

and associated CSS

/*Layers */
.layer-visible {
  display: initial !important;

.layer-hidden {
  display: none !important;

I just cannot seem to get it to work and would really appreciate another set of eyes or guidance.

Many thanks

You need to use class_set or style_set.


        - entities:
                - light.main_toilet
                - light.on_off_light_1_3
              name: Lights
                service: light.toggle
                service: floorplan.class_set
                  class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'

Look at the examples and similar discussions on github

1 Like


I got this error: “ERROR Unterminated template (23:52)”.
Anyone have any idea what this means and how I solve it?

You are going to have to supply way more info. Where do you see this error? What are you trying to do? Is anything working?

Sounds like a browser issue rather than floorplan. Can you use the browser dev tools and check if the style is getting applied.

1 Like

Thank you for your replay OzGav, I’ve kind of solved it. It was an error at the if statement level, basically I was passing numerical values as string using the " " rather than a plain number.

I want to reuse the floorplan multiple times (as a sort template)
is that gonna work, or will I get trouble with the id’s. if used on the same page?

I dont think that’s a problem. But give it a go - shouldb’t take more than 5 minutes to test? :blush:

As you’re not defining how you’re going to reuse it, we’re in a bit of a X-problem situation. But let us know how it goes.

And oh, if you run into any problems, I’ll recommend you to use our Discussion area on GitHub :+1:.

1 Like

Thanks for producing this guide