Floorplan full size card

Hi !
I’d like to use Floorplan as a tab in the HA’s home panel, so I could use multiple tabs for multiple floors. I already have Floorplan working as a custom card, but I’d like the card to be as big as possible.
When I set panel:true in my Lovelace config, the SVG becomes to large and a vertical scroll bar appears. Then I’d like the picture’s height to be maximum and the width set automatically (like when I do a Floorplan custom panel). Is there a way to do this ?
I tried to do some CSS with the card-mod plugin but it was quite unsuccessful…

Thank you !

Yes, but I’m wondering if the image could adapt itself automaticaly to the screen ratio.
For example, if I use HA with a phone, I won’t want these blank spaces…

1 Like

What css did you try with card mod?

This might work

height: calc(100%)

Also be aware that the icons placed on the floorplan wont scale. So on small screens they can be piled on top of each other in a big jumble.

I tried to reproduce the pannel’s css, with absolute positionning, etc. But it does not work at all. :sweat_smile:

Good idea ! I applied this :

        style: |
          svg {
          height: calc(100vh - 120px) !important;
          width: auto !important;
          }

I can’t find the header height in the code, but it’s a bit lower than 120px (112px on my screen).
But I don’t know if it’s a fixed value. So this work for now but I have to check on other screens.

2 Likes

Hi @titouanlh !

I want to do the same, but I don’t know where to put the style… Is It in the picture-element card?

Could you share your configuration? Thanks in advance!! :grinning:

1 Like

Hey @matisaul , you have to use th “card-mod” plugin : 🔹 Card-mod - Add css styles to any lovelace card which allows you to add css to your card.
Then it looks like this :

  - cards:
      - config:
          image: /local/floorplan/circuit_1.svg
          rules:
            - entities:
                - binary_sensor.switch
                - switch.in_switch_1
              states:
                - class: bin-off
                  state: 'off'
                - class: bin-on
                  state: 'on'
            - entities:
                - sensor.sensor1
              text_template: '${entity.state ? Math.ceil(entity.state) + "°": "undefined"}'
          stylesheet: /local/floorplan/circuit_1.css
        style: |
          svg {
          height: calc(100vh - 115px) !important;
          width: auto !important;
          max-width: 90vw !important;
          }
          ha-card {
          box-shadow: unset !important;
          }
        type: 'custom:floorplan-card'
    id: system
    panel: true
    title: Circuit_1

The “style” part is where I put the CSS

2 Likes

Ohh, nice! I didn’t know about the floorplan-card. I’m just using a picture-element card.

Thanks!!! :slight_smile:

I am just starting with HA and would like to expand my floorplan across the entire browser width.

Card-mod is installed and I am using this code:

type: picture-elements
image: /local/pics/all_in_one_view_no_UG.jpg
style: |
  svg {
  height: calc(100vh - 115px) !important;
  width: auto !important;
  max-width: 90vw !important;
  }
  ha-card {
  box-shadow: unset !important;
  }
elements:
  - type: state-badge
    entity: binary_sensor.remote_ui
    style:
      top: 32%
      left: 40%

But it’s still the same small card (1/3 of my browser width)
Any suggestion?

You have to change the setting on your dashboard to Panel !