dishwasher.yaml

type: vertical-stack
cards:
  - type: picture-elements
    elements:
      - type: image
        entity: var.dishwasher_cycle
        image: /local/lg-icons/dry-plate.png
        state_image:
          Drying: /local/lg-icons/dry-plate-on.png
        style:
          top: 33%
          left: 85%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: var.dishwasher_cycle
        image: /local/lg-icons/wash-plate.png
        state_image:
          Washing: /local/lg-icons/wash-plate-on.png
        style:
          top: 33%
          left: 51%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: var.dishwasher_cycle
        image: /local/lg-icons/rinse-plate.png
        state_image:
          Rinsing: /local/lg-icons/rinse-plate-on.png
        style:
          top: 33%
          left: 69%
          width: 20%
          image-rendering: crisp
      - type: state-icon
        entity: var.dishwasher_cycle
        icon: mdi:skip-previous-circle
        style:
          top: 73%
          left: 32%
          width: 10%
      - type: image
        entity: binary_sensor.dishwasher_door_contact
        image: /local/lg-icons/lock.png
        state_image:
          'off': /local/lg-icons/lock-on.png
        style:
          top: 73%
          left: 45%
          width: 10%
          image-rendering: crisp
      - type: state-label
        entity: sensor.blank
        prefix: '18:88'
        style:
          color: '#555'
          font-family: segment7
          font-size: 50px
          left: 95%
          top: 74%
          transform: translate(-100%,-50%)
      - type: state-label
        entity: sensor.dishwasher_time_display
        style:
          color: '#8df427'
          font-family: segment7
          font-size: 50px
          left: 95%
          top: 74%
          transform: translate(-100%,-50%)
    image: /local/hass-dishwasher-card-bg.png
  - type: conditional
    conditions:
      - entity: timer.dishwasher_timer
        state: active
    card:
      type: entities
      entities:
        - entity: timer.dishwasher_timer
  - type: entities
    entities:
      - entity: input_boolean.dishes_clean
        type: custom:toggle-control-button-row
        customOffText: Dirty
        customOnText: Clean
        isOffColor: '#ff4202'
        isOnColor: '#00ff40'
        width: 100px
        height: 30px