#Crop Picture Entity Bounds?

1 messages · Page 1 of 1 (latest)

echo sigil
#

I'm using a Picture Entity card on my dashboard to display the map used by my robot vacuum, but there's a lot of empty space around the borders and it makes the map off-centered. Is there a way to crop and/or center the image displayed?

image.png
heady burrow
#

I wasn't able to do what you want with a Picture Entity card, but I was able to get something usable with a custom:button-card. Admittedly, once I started getting things moving around, I just played with the numbers (for the card and images sizes and position) to get it to look right (a bunch of trial-and-error).
EDIT: URL no longer valid; it was linked to the floorplan image posted above.

# 
type: custom:button-card
entity: none
show_state: false
show_icon: false
show_name: false
triggers_update: all
tap_action: none
hold_action: none
double_tap_action: none
styles:
  card:
    - height: 350px
    - width: 400px
    - background-color: '#105893'
    - background-image: >-
        url('https://media.discordapp.net/attachments/1412436668048343173/1412436669420015677/image.png?ex=68b849a7&is=68b6f827&hm=02145add9e5b97844dfdc432cc5fb34927fd1c6f73b0908b2d56d1aaee37c39d&=&format=webp&quality=lossless')
    - background-size: 440px 440px
    - background-repeat: no-repeat
    - background-position: "-5px -100px"
image.png
#

Given the proportions, there was a white background at the bottom of the card. I gave up trying to get the dimensions just right. So, I cheated and changed the background-color to match the image.