My take on the Mail and Packaged custom card

Share your Projects!
1

I was using the custom card with the Mail and Packages component for a while until I learned how to use the picture elements card. I never liked the spacing of the original. This is how I created a very similar card with less of a footprint.

image

type: picture-elements
elements:
  - type: image
    entity: camera.mail_usps_camera
    camera_image: camera.mail_usps_camera
    style:
      position: absolute
      transform: 'translate(0%, 0%)'
      top: 0%
      background-color: 'rgba(0, 0, 0, 0)'
  - type: state-label
    entity: sensor.mail_deliveries_message
    prefix: ''
    style:
      top: 68%
      left: 50%
      width: fit-content
      text-align: center
      font-size: .95em
  - type: state-icon
    entity: sensor.mail_packages_delivered
    style:
      transform: 'translate(0%, 0%)'
      top: 70%
      left: 2%
      width: fit-content
  - type: state-label
    entity: sensor.mail_packages_delivered
    suffix: ' delivered'
    style:
      transform: 'translate(0%, 0%)'
      top: 71%
      left: 8.5%
      font-size: .9em
      font-weight: bold
      width: fit-content
  - type: state-icon
    entity: sensor.mail_packages_in_transit
    style:
      transform: 'translate(0%, 0%)'
      top: 70%
      left: 50%
      width: fit-content
  - type: state-label
    entity: sensor.mail_packages_in_transit
    suffix: ' in transit'
    style:
      transform: 'translate(0%, 0%)'
      top: 71%
      left: 56.5%
      font-size: .9em
      width: fit-content
      font-weight: bold
  - type: state-icon
    entity: sensor.mail_fedex_delivering
    style:
      transform: 'translate(0%, 0%)'
      top: 80%
      left: 2%
      width: fit-content
  - type: state-label
    entity: sensor.mail_fedex_delivering
    prefix: 'Fedex: '
    style:
      transform: 'translate(0%, 0%)'
      top: 81%
      left: 8.5%
      font-size: .875em
      width: fit-content
  - type: state-icon
    entity: sensor.mail_ups_delivering
    style:
      transform: 'translate(0%, 0%)'
      top: 80%
      left: 27%
      width: fit-content
  - type: state-label
    entity: sensor.mail_ups_delivering
    prefix: 'UPS: '
    style:
      transform: 'translate(0%, 0%)'
      top: 81%
      left: 34%
      font-size: .875em
      width: fit-content
  - type: state-icon
    entity: sensor.mail_usps_delivering
    style:
      transform: 'translate(0%, 0%)'
      top: 80%
      left: 50%
      width: fit-content
  - type: state-label
    entity: sensor.mail_usps_delivering
    prefix: 'USPS: '
    style:
      transform: 'translate(0%, 0%)'
      top: 81%
      left: 57%
      font-size: .875em
      width: fit-content
  - type: state-icon
    entity: sensor.mail_amazon_packages
    style:
      transform: 'translate(0%, 0%) scale(1)'
      top: 80%
      left: 73%
      width: fit-content
  - type: state-label
    entity: sensor.mail_amazon_packages
    prefix: 'Amazon: '
    style:
      transform: 'translate(0%, 0%)'
      top: 81%
      left: 79.5%
      font-size: .875em !important
      width: fit-content
  - type: state-label
    entity: sensor.mail_updated
    prefix: 'Checked: '
    style:
      transform: 'translate(0%, 0%)'
      bottom: .5%
      left: 1%
      font-size: .75em
      width: 50%
image: /local/smallcard.png
aspect_ratio: 72.5%
3 Likes
2

Your card looks nice. I’ll give it a try as I have had problems off and on with the custom card.
What did you use for /local/smallcard.png file?

3

Using the latest version, you no longer have to specify a local file.
It creates a camera entity I think automatically now.

0.3.2 - Breaking changes (Please read release notes)

This creates camera entities automatically for USPS mail images and Amazon delivery images, no more having to make your own local file cameras.

Also see: USPS Informed Delivery Image · moralmunky/Home-Assistant-Mail-And-Packages Wiki (github.com)

4

I just used a 1x1 empty .png file created in paint lol

5

The reason I asked is the spacing is off on my card.

6

smallcard

7

My card spacing is overwriting the icons and I could not get the first line to wrap. I tried to play with the spacing and was not able to fix it. Basically I used the code from the opening comment

.Screenshot 2021-06-16 090524

8

I have the same issue if my screen size is that small:
image

If I make my window larger, it looks correct
image

I dont know how to resolve that. I tried pretty hard for a while and couldnt figure it out either.

9

Not sure how to get the larger screen size? I view on phone, tablets and PCs. They all look the same for me.