Floorplan full size card

#1

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 !

#2
#3

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…

#4

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.

#5

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.

1 Like
#6

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:

#7

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

1 Like
#8

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

Thanks!!! :slight_smile: