Proper scale of icons on Picture Elements card

Configuration Frontend
1

I’m trying to get a nice floor plan together with some lightbulb icons and some text. But regardless of whether I use pixel based size (—iron-icon-height) or scale based size (transform: scale), I cannot figure out how to make it work properly on different screen sizes. I have the entity card set to panel mode, so it fills the width of the screen. But when I look on my phone, the icons are gigantic in relation to the scaled picture. And when I look on my computer, it’s the opposite.
I have to think that there is a way to make the icons and text scale with the image, but I haven’t been able to find how …

Any suggestions?

1 Like
2

This is essentially why I gave up on the floor plan idea.

You could create one dashboard for desktop and one for mobile. You can then set the default dashboard per device / user.

3

Well… I was hoping someone had a solution to this, beyond creating specific dashboards for devices…
Is there a way to force the # of pixels in X and Y in a panel mode picture entity card? I’d rather have scrollbars on my smaller devices if there is no other way to keep scaling between elements and picture synchronized …

4

I found a solution for this using the card-mod addon:

type: picture-elements
image: /local/images/erdgeschoss-neu.svg
elements:
  - type: state-icon
    entity: light.kueche
    style:
      top: 53%
      left: 23%
      width: 10%
      height: 10%
      '--mdc-icon-size': 100%
  - type: state-icon
    entity: light.tischlampe_wohnzimmer
    style:
      top: 92%
      left: 92%
      width: 10%
      height: 10%
      '--mdc-icon-size': 100%
card_mod:
  style:
    hui-state-icon-element:
      $ state-badge$: |
        :host {
          width: 100% !important;
          height: 100% !important;
        }

The width and height for each icon can now be adjusted using the width and height attributes and will scale proportionally to the map size.

2 Likes
5

Hi Skybly, can you please share your full code? i cant seem to get this working

6

I can confirm it’s working - but then it’s hard to manage positioning … :frowning:

7

Great, many thanks! It works well for icons! Just in case someone would like to use it for Image-elements as well:

  - type: conditional
    conditions:
      - condition: state
        entity: sensor.papier
        state: Morgen
    elements:
      - type: image
        image: https://your_path_to_image.png
        tap_action:
          action: none
        hold_action:
          action: none
        style:
          top: 67.4%
          left: 3.8%
          transform: translate(-50%,-50%)
          width: 3.5%
          height: 3.5%
          '--mdc-image-size': 100%
    title: Papier
card_mod:
  style:
    hui-state-icon-element:
      $ state-badge$: |
        :host {
          width: 100% !important;
          height: 100% !important;
        }
    hui-state-image-element:
      $ state-badge$: |
        :host {
          width: 100% !important;
          height: 100% !important;
        }
8

Is it possible to use this with state-badges?
They are the most beautiful way to get temperatures in the picture-elements-card…