Floorplan now available as a Lovelace card

I’ve spent quite some time today, but have not been able to find a solution that actually works. I am trying to setup my floorplan to use of 90% of the left side of the screen (column A, to give it a name). Then have a stack of cards on the right 10% of the screen (column B)

I created the following to illustrate what I want to do:

Out of the box this is not possible due to the way Lovelace works. It is not a limitation of floorplan. Lovelace keeps things evenly spread out.

I haven’t used this (but now I’ve seen it I might try!) but this might be what you need GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.

1 Like

Sounds like you are looking for the “Sidebar view” that was introduced with the new Energy panel.
When creating a new view you can select the type (dropdown at bottom of View configuration popup).

:-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1: :-1:


This was the last thing I tried before posting yesterday. I think I’ll try to mimic the couple cards I want into my floorplan.

Happy days to you, my friend…

We’re helping out where we can. But it’s not a all-round topic, for things not related to the component. The question asked, are mentioned many times before - and therefore, I’m asking the person to do a bit of research.

A simple search would have done it:

home assistant hide top bar

Or anything like that.

Please respect that we’re trying to keep the not ha-floorplan related stuff, to a minimum.

We’re using hours on this, and doing our best to help people our…:thinking:

I have never tried a thing like this, but shouldn’t that be possible with column in Lovelave? If you’re not making any progress, I can try and see what’s possible.

Have you tried something like this? :relaxed:

YES!!! That’s exactly what I needed. Thanks so much.

1 Like

Sorry maybe a stupid question. But I try to install floorplan and I´m totally stucked on this step: " 5. Remember to add the /hacsfiles/ha-floorplan/floorplan.js as a module to your resource file - like you do with other modules."

What have you tried? You should look in the settings panel, and check if ha-floorplan are added in the Lovelace > Ressource tab, or simular naming.

If I remember correct, HACS are adding it by itself today - but it’s always a good idea to check :+1:.

Here, it’s located at HA-IP/config/lovelace/resources.

Yes, it is there. But it doesn´t shows itself if I try to add new card in Lovelace editing. There is just not card with floorplan or ha-floorplan name. Maybe I should add it manualy via YAML?

You should add the YAML manually, as it’s mentioned in the guide :relaxed::+1:

OH sorry. You are right. U stucked myself and didn´t continue to read. Now it works. Thanks.

Hello Oscar,
After hours of research I just came across your project.
I am trying to document myself to try to do the same things, I manage to put 1 light but the config with several I can not.
could you show me your yaml code or tell me what’s wrong with me?
thank you in advance for your help

type: picture-elements
image: >-

  • type: image
    entity: light.barrette_d_eclairage_a_led
    top: 50%
    left: 50%
    width: 100%
    ‘on’: >-
    ‘off’: >-
  • type: image
    entity: light.barrette_d_eclairage_a_led
    top: 50%
    left: 50%
    width: 100%
    ‘on’: >-
    ‘off’: >-
  • type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.barrette_d_eclairage_a_led
    left: 60%
    top: 65%
    action: toggle

Unfortunately this thread is about ha-floorplan not the picture elements card. If you decide to switch we will be able to help.

no worries, I will post in which section?

Try googling “picture elements floorplan” or perhaps start a new thread.

it’s good.?

Multiple Light Floorplan - Third party integrations / Floorplan - Home Assistant Community (home-assistant.io)

You might want to include some more details about what you are trying to do, what isn’t working and what you have tried. Also you will likely get more replies if you can post in English. Bon chance!

Edit: …and technically probably should be in the CONFIGURATION >> FRONTEND area

Friends, I ask for help.
I do it according to the instructions:
Installed ha-floorplan from the HACS repository.
Checked the availability of a new resource in the resource management section in lovelace.
I’m trying to add the code from the example, but an error is returned:

Clear log
29.01.2022, 00:03:29 ERROR URIError: /local/floorplan/examples/home/home.css?_=1643403809735: Error fetching resource at Function. (https://[ha address]/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941030:83:2717) at Generator.next () at s (https://[ha address]/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941030:83:734)
29.01.2022, 00:03:29 ERROR STYLESHEET Error loading stylesheet: /local/floorplan/examples/home/home.css
29.01.2022, 00:03:29 WARNING CONFIG Cannot find ‘pages’ nor ‘rules’ in floorplan configuration
29.01.2022, 00:03:29 INFO INIT Floorplan for Home Assistant (ha-floorplan) v1.0.30

How do I solve my problem? Thanks

Have you uploaded the image and CSS in the correct location. The error is saying the CSS can’t be loaded?