Floorplan now available as a Lovelace card

Third party integrations Floorplan
463

Great work Petar.

I have a problem with script invocation which I can’t seem to resolve. I wonder if you (or anyone) can offer advice.

I have a collection of binary sensors linked to corresponding SVG elements. CSS updates are all working nicely and the entity info frame pops up when the associated SVG component is clicked. I now want to execute a script when an SVG element is clicked. My script is in place and executing as expected from the Home Assistant configuration interface.

I have added an action clause to my configuration which references the script, but the script does not get called when I click on an SVG element. No configuration errors and no runtime errors, just no action. The entity info panel continues to pop up as before and I wondered if this was pre-empting the click action? Have I missed something. My configuration is:

- title: Environment
    path: environment
    visible: []
    panel: true
    badges: []
    cards:
      - type: custom:floorplan-card
        entity: fp_hydronic
        image: /local/beatrice/hydronic-system.svg
        stylesheet: /local/community/floorplan-card/floorplan-card-style.css
        groups:
          - name: Binary sensors
            entities:
              - binary_sensor.boiler
              - binary_sensor.callforch
              - binary_sensor.chiller
              - binary_sensor.engine
              - binary_sensor.generator
              - binary_sensor.hydrophore
              - binary_sensor.immersion1
              - binary_sensor.immersion2
              - binary_sensor.thermal_store
            states:
              - state: 'on'
                class: visible
              - state: 'off'
                class: invisible
            action:
              domain: script
              service: mqtt_update_topic
              data:
                topic: home/test
                message: Hello mum
464

I guess there’s some inspiration here:

Not 1:1 with your needs, cause it’s related to browser_mod.

Else, taks a look at the docs?

And let us know, if you’re getting stuck :+1:. If so, please consider to create a New discussion on GitHub. It’s fine to ask here - but much easier for other to find inspiration, by having each question in a dedicated topic :relaxed:.

465

I am wondering if you are still using an old version of floorplan? states and action don’t look right anymore. Should be state_action and tap_action?

In the latest version calling a script would look like:

            - tap_action:
                service: script.turn_on
              entities:
                - script.vacuum_kitchen
466

100% old version, or wrong rule-usage, at least… That’s why I linked to the current docs.

I should have mentioned the details about the wrong version, too :relaxed:.

467

I looked at the example, it seems like it uses some classes in the SVG itself to change the picture, instead of poting to a different SVG altogether? Wasn’t quite able to use it the way I wanted.

468

OK in the github discussions there are these that may help:

You could also use multiple views in your ui-lovelace.yaml and then use window_navigate to jump between each. How to use that? Look at these places:

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.