Room plan sketch size

Configuration Frontend
1

Hi everyone, I am a new HASS user and online I found a lot of tutorial to move forward. One thing still blocking is having a floor plan (not the software with hacs, just my own sketch) fit on the page without scrolling. I have this setup:

type: picture-elements
elements:
- type: state-label
entity: sensor.palier_temperature
style:
top: 45%
left: 10%
image: local/eetage.jpeg
style:
width: 10px
height: 10px

Even setting the width and height to 10px, didn’t affect it.

Screenshot 2022-08-02 at 09.44.12
Screenshot 2022-08-02 at 09.44.121904×918 113 KB

I look forward to your input.

2

Your code is either wrongly formatted or is posted unformatted.

3

Probably wrongly formatted. It’s the same code I am using. Where is the error? Could you please point it out? Thank you

4

If you want the community to help you with codings best is to not to post screenshots but to paste the respective code blocks here. And please don’t forget to format it properly:

Code Format Example
Code Format Example1214×424 211 KB

2 Likes
5

That’s what I did, but here it is again:

type: picture-elements
elements:
  - type: state-label
    entity: sensor.palier_temperature
    style:
      top: 45%
      left: 10%
  - type: state-label
    entity: sensor.one_temperature
    style:
      top: 95%
      left: 20%
  - type: state-label
    entity: sensor.romy_temperature
    style:
      top: 95%
      left: 73%
  - type: state-label
    entity: sensor.badezimmer_temperature
    style:
      top: 32%
      left: 50%
  - type: state-icon
    entity: binary_sensor.badezimmer_fenster
    style:
      top: 2%
      left: 60%
  - type: state-icon
    entity: light.badezimmer
    style:
      top: 22%
      left: 66%
  - type: state-icon
    entity: light.dusche
    style:
      top: 18%
      left: 85%
  - type: state-icon
    entity: light.two
    style:
      top: 65%
      left: 75%
  - type: state-icon
    entity: binary_sensor.two_fenster
    style:
      top: 98%
      left: 73%
  - type: state-icon
    entity: binary_sensor.one_fenster
    style:
      top: 98%
      left: 20%
image: local/eetage.jpeg
style:
  width: 10px
  height: 10px
6

The “style” options are not supported for the card, only for elements.

7

Is there a way to resize the card?

8

You may resize a card using card-mod.
But - are you using a “panel” mode for your floorplan?
If so - the card will occupy a whole available space - but then you still may change a card’s height by card-mod.

9

Yes, I am using a panel. I tried it, didn’t give any results.

image: local/eetage.jpeg
card-mod:
  width: 1px
  height: 1px
10

Wrong code.
Go to card-mod repo for docs & dedicated community thread for examples.