How size images for picture elements

Configuration
1

I am trying to set a state card on my main page am confused by how picture element deals with sizing. It’s huge. So I can understand that to a point. The original image is 500x600 but I resized to 125x150 and it stretches it to larger. This happens if I have the image on the same line as the other image or below it. Showing side by side so you can see what happens but as mentioned if I placed it below the other image it still does this.

image
image1346×770 163 KB

Obviously the one on the left is the smaller image.

Here is the code for the “small” one:

elements:
  - entity: device_tracker.sue_tracker
    state_image:
      away: /local/images/sue_status_away-small.png
      home: /local/images/sue_status_home-small.png
      lsp: /local/images/sue_status_lsp-small.png
      Wood: /local/images/sue_status_shopping-small.png
      Costco: /local/images/sue_status_shopping-small.png
    style:
      left: 50%
      top: 50%
      width: 100%
    type: image
  - entity: sensor.siphone_battery_state
    state_image:
      Charging: /local/images/ll_status_charging-small.png
      Not Charging: /local/images/ll_status_blank-small.png
      Full: /local/images/ll_status_blank.png
    style:
      left: 50%
      top: 50%
      width: 100%
    type: image
  - entity: sensor.siphone_battery_state
    style:
      color: white
      left: 12%
      top: 10%
    type: state-icon
  - entity: device_tracker.sue_tracker
    style:
      color: white
      left: 50%
      top: 92%
    type: state-label
  - entity: sensor.siphone_battery_level
    style:
      color: black
      left: 88%
      top: 10%
    type: state-label
  - entity: proximity.bhome
    style:
      color: black
      left: 88%
      top: 73%
    type: state-label
  - entity: sensor.siphone_direction
    style:
      color: black
      left: 12%
      top: 73%
    type: state-label
image: /local/images/sue_status_home-small.png
type: picture-elements
2

Someone will probably tell me I’m wrong, but I think …

The size of the card is defined by the main image, it will take up the full width of the column it’s in. The height is then defined by the ratio between width and height of the main image.

To make it smaller, you could put a couple of them in a horizontal layout card, side by side, so they have to share the width of a single column (or put any other card alongside).

Or take a look at https://github.com/thomasloven/lovelace-layout-card

I’ve got a few picture-elements cards with transparent main images, of various heights which lets me create different sized cards. Then I place an image element on top, gives me a lot of control over size and position.

1 Like
3

Thanks for the reply. That’s what I don’t get. The size of the main image is 125x150. I was thinking something similar as you so had tried doing a horizontal stack but couldn’t figure out how to place these in there. Tried adding it twice but kept having issues with my layout.

4

So, making the main image fewer pixels but the same ratio will just give you a lower resolution as it still fills the column.

To put two (or more) cards in a horizontal stack -

- type: horizontal-stack:
  cards:

    - type: picture-elements
      image: path/to/image/image.jpg
      elements:
        - type: etc. etc.

    - type: picture-elements
      image: path/to/image/image.jpg
      elements:
        - type: etc. etc.
5

Yeah it’s weird. I start out that way but when it gets saved it puts the type on the bottom as you can see from what I posted originally. So not sure if I take the type and image and put that at the top and leave the rest the way it is. Minus the act that I’ll have to indent everything an extra level.

6

it makes no difference if the ‘type’ and ‘image’ keys are at the top or bottom. The only thing that matters is the indentation.

7

So I did this and it just spins:

- type: horizontal-stack
  cards:

    - type: picture-elements
      image: /local/images/john_status_home.png
      elements:
        - entity: device_tracker.john_tracker
          state_image:
            away: /local/images/john_status_away.png
            home: /local/images/john_status_home.png
            lsp: /local/images/john_status_lsp.png
            Wood: /local/images/john_status_shopping.png
            Costco: /local/images/john_status_shopping.png
          style:
            left: 50%
            top: 50%
            width: 100%
          type: image
        - entity: sensor.jiphone_battery_state
          state_image:
            Charging: /local/images/ll_status_charging.png
            Not Charging: /local/images/ll_status_blank.png
            Full: /local/images/ll_status_blank.png
          style:
            left: 50%
            top: 50%
            width: 100%
          type: image
        - entity: sensor.jiphone_battery_state
          style:
            color: white
            left: 12%
            top: 10%
            font-weight: bold
          type: state-icon
        - entity: device_tracker.john_tracker
          style:
            color: white
            left: 50%
            top: 92%
            font-weight: bold
            font-size: 30px
          type: state-label
        - entity: sensor.jiphone_battery_level
          style:
            color: black
            left: 89%
            top: 10%
            font-weight: bold
            font-size: 25px
          type: state-label
        - entity: proximity.jhome
          style:
            color: black
            left: 88%
            top: 73%
            font-weight: bold
            font-size: 25px
          type: state-label
        - entity: sensor.jiphone_direction
          style:
            color: black
            left: 12%
            top: 73%
            font-weight: bold
            font-size: 18px
          type: state-label

    - type: picture-elements
      image: /local/images/sue_status_home.png
      elements:
        - entity: device_tracker.sue_tracker
          state_image:
            away: /local/images/sue_status_away.pn
            home: /local/images/sue_status_home.png
            lsp: /local/images/sue_status_lsp.png
            Wood: /local/images/sue_status_shopping.png
            Costco: /local/images/sue_status_shopping.png
          style:
            left: 50%
            top: 50%
            width: 100%
          type: image
        - entity: sensor.siphone_battery_state
          state_image:
            Charging: /local/images/ll_status_charging.png
            Not Charging: /local/images/ll_status_blank.png
            Full: /local/images/ll_status_blank.png
          style:
            left: 50%
            top: 50%
            width: 100%
          type: image
        - entity: sensor.siphone_battery_state
          style:
            color: white
            left: 12%
            top: 10%
          type: state-icon
        - entity: device_tracker.sue_tracker
          style:
            color: white
            left: 50%
            top: 92%
          type: state-label
        - entity: sensor.siphone_battery_level
          style:
            color: black
            left: 88%
            top: 10%
          type: state-label
        - entity: proximity.shome
          style:
            color: black
            left: 88%
            top: 73%
          type: state-label
        - entity: sensor.siphone_direction
          style:
            color: black
            left: 12%
            top: 73%
          type: state-label

Note pasting it in again I get:

Cannot read property ‘setConfig’ of undefined

Apparently had to get rid of the dash on the first line. When I did so the cards are now smaller and have to be adjusted but better. Still to big though.

image
image1503×688 127 KB

Do I have to put some kind of dummy additional horizontal images in there to make it smaller?

8

Could try a different approach, use a single picture-elements card with a transparent (or not) background that results in the card being the height you want.

Then place the image, that’s currently your background, as a image element which let you completely control the size and placement, do that once for each person and arrange the rest of the elements accordingly.

1 Like
9

What approach did you go for in the end? I’m having the same issue.

1 Like