Floorplan now available as a Lovelace card

Third party integrations Floorplan
469

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:

image
image1887×1039 130 KB

470

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
471

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).

472

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

hmph

473

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.

474

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? :smiling_face:

https://www.reddit.com/r/homeassistant/comments/ens44g/column_width/?utm_medium=android_app&utm_source=share

475

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

image
image1666×844 103 KB

1 Like
476

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."
https://experiencelovelace.github.io/ha-floorplan/docs/quick-start/

477

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.

478

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?

479

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

480

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

481

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: >-
/www/Floorplan/Plan%20Maison%20nuit.png
elements:

  • type: image
    entity: light.barrette_d_eclairage_a_led
    style:
    top: 50%
    left: 50%
    width: 100%
    state_image:
    ‘on’: >-
    /www/Floorplan/Balise%20led%20ipn%20on.png
    ‘off’: >-
    www/images/3d_floorplan/ipn.png
  • type: image
    entity: light.barrette_d_eclairage_a_led
    style:
    top: 50%
    left: 50%
    width: 100%
    state_image:
    ‘on’: >-
    www/images/3d_floorplan/ipn.png
    ‘off’: >-
    /www/Floorplan/Plan%20Maison%20nuit.png
  • type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.barrette_d_eclairage_a_led
    style:
    left: 60%
    top: 65%
    tap_action:
    action: toggle
    ’
482

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

483

no worries, I will post in which section?

484

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

485

it’s good.?

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

486

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

487

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

3
31618×956 130 KB

How do I solve my problem? Thanks

488

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