Share Your Laundry Page/Cards Designs

Share your Projects! Dashboards & Frontend
1

Looking for some interesting designs for a Laundry section with cards for the washer and dryer without it being just boring entity cards. I have seen a few good ones over in the Picture-Card section but look to see what others have done. I am using a Samsung Smartthings systems to get my data from so there is a lot of information that could be gleaned from it. Please share your ideas and coding for the group.

Thanks

2

This is from the Homekit Infused framework:

Screenshot_20210912-132907_Home Assistant
Screenshot_20210912-132907_Home Assistant1080×2400 124 KB 

# Card
type: picture-elements
style: |
  ha-card {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
  }
image: "{{ image }}"
elements:
  - type: state-label
    entity: "{{ entity_status }}"
    style:
      left: 0
      bottom: 0
      pointer-events: none
      font-size: 13px
      font-family: var(--font-family)
      line-height: 15px
      color: white
      background-color: rgba(0, 0, 0, 0.3)
      width: 100%
      transform: initial
      padding: 0 8px
  - type: state-label
    entity: "{{ entity_switch }}"
    style:
      bottom: 0
      right: 0
      pointer-events: none
      font-size: 13px
      font-family: var(--font-family)
      transform: initial
      color: white
      line-height: 15px
      padding: 0px 44px
  - type: icon
    icon: mdi:power
    tap_action:
      action: toggle
    entity: "{{ entity_switch }}"
    style:
      bottom: 0
      right: 0
      transform: initial
      color: white
      font-size: 13px
      font-family: var(--font-family)
      line-height: 15px
      padding: 5px 16px
  - type: state-label
    entity: "{{ entity_wattage }}"
    style:
      top: 0
      right: 0
      pointer-events: none
      transform: initial
      font-size: 12px
      font-family: var(--font-family)
      color: rgba(255,255,255,0.8)
      line-height: 32px
      padding: 2px 35px
  - type: icon
    icon: mdi:alpha-w-box
    style:
      top: 0
      right: 0
      pointer-events: none
      transform: scale(0.8)
      color: rgba(255,255,255,0.8)
      line-height: 32px
      padding: 8px 13px

Do use in your system, replace everything in double curly brackets with your entitiy_ids/image path.

1 Like