Floorplan full size card

[titouanlh (Titouan Le Hir)]

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 !

[tom_l]

Lovelace, WallPanel and Panel Mode with Floorplans

In panel mode the image will expand to fit the width of the display. Because your image aspect ratio does not match the display aspect ratio some of it will be below the screen. Try increasing the width of your image by adding a bit of blank space to each side (“expand canvas size” horizontally in an image editor) until it fits vertically in the panel display.

[titouanlh (Titouan Le Hir)]

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…

[tom_l]

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.

[titouanlh (Titouan Le Hir)]

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

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.

[matisaul (Matias Saul)]

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!!

[titouanlh (Titouan Le Hir)]

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

[matisaul (Matias Saul)]

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

Thanks!!!

[NCO3]

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?

[Frank_Beetz]

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