trying to create a companion card

[Trevsweb]

just want to ask (I only have a washer/dryer so might not be useful to the rest of the people here) what functions would you like to see on a card for your device? I have my own wip card for my device but its fairly easy to edit. there are some pre-required plugins from hacs needed though.

please make sure to edit the sensors to the corresponding ones on your system

• horizontal-stack
• vertical-stack
• bar card
• card mod

I made the image from the website I bought the device from and resized it to 200px height (gimp or photoshop to remove the background and scale the image) I edited the picture element to upload the imagee (important if you want it working externally)

bar card needed a template in the configuration.yaml to show the remaining progress

template:
  - sensor:
      - name: "Washing Machine Progress"
        unit_of_measurement: "%"
        state: >
          {% set total = states('sensor.washing_machine_selected_program_total_running_time') | float(0) %}
          {% set remaining = states('sensor.washing_machine_remaining_time_of_selected_program') | float(0) %}
          {% if total > 0 %}
            {{ ((1 - (remaining / total)) * 100) | round(1) }}
          {% else %}
            0
          {% endif %}

still playing around to make it work nice on mobiles so may edit later.

type: horizontal-stack
cards:
  - type: picture
    image: /api/image/serve/9fc1493bae48751d1900881da57d2a6d/512x512
    card_mod:
      style: |
        ha-card {
        background:none;
        border:none;
        padding: 40px;
        } 
  - type: vertical-stack
    cards:
      - type: entity
        entity: sensor.washing_machine_remaining_time_of_selected_program
        name: Time Remaining
        icon: none
        card_mod:
          style: |
            ha-card {
            background:none;
            padding-top: 50px;
            z-index: 3;
            border:none;
            }
      - type: custom:bar-card
        unit_of_measurement: "%"
        decimal: 0
        positions:
          icon: "off"
          indicator: "off"
          name: "off"
          value: inside
        state_filter:
          - value: 0
            invert: true
        entities:
          - entity: sensor.washing_machine_progress
        card_mod:
          style: |
            ha-card {
            background:none;
            margin-top: -78px;
            border:none;
            }
            bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar, 
            bar-card-targetbar {
              border-radius: 8px !important;
              margin-left: -10px;
              margin-right: -10px;
            }
      - type: horizontal-stack
        cards:
          - type: tile
            entity: sensor.washing_machine_selected_program
            features_position: bottom
            vertical: true
            color: primary
            icon: ""
            show_entity_picture: false
            hide_state: false
            name: Program
            card_mod:
              style:
                .: |
                  ha-card {
                    padding-top: 0px;
                    margin-top: -20px;
                    background:none;
                    border:none;
                  }
                ha-tile-info$: |
                  .primary { font-size: 12px !important; }
                  .secondary { font-size: 10px !important; }
          - type: tile
            entity: sensor.washing_machine_machine_status
            features_position: bottom
            vertical: true
            color: primary
            icon: ""
            show_entity_picture: false
            hide_state: false
            name: Status
            card_mod:
              style:
                .: |
                  ha-card {
                    padding-top: 0px;
                    margin-top: -20px;
                    background:none;
                    border:none;
                  }
                ha-tile-info$: |
                  .primary { font-size: 12px !important; }
                  .secondary { font-size: 10px !important; }
          - type: tile
            entity: sensor.washing_machine_door_status
            features_position: bottom
            vertical: true
            color: primary
            icon: ""
            show_entity_picture: false
            hide_state: false
            name: Door
            card_mod:
              style:
                .: |
                  ha-card {
                    padding-top: 0px;
                    margin-top: -20px;
                    background:none;
                    border:none;
                  }
                ha-tile-info$: |
                  .primary { font-size: 12px !important; }
                  .secondary { font-size: 10px !important; }

[minisweed]

This is exactly what I am trying to make for my washer - However I do not know how to do it Ahah! Looks great!

[mTpChris]

Hello,
Thank you for sharing your card and template. I'm new to lovelace dashboard and I managed to make a similar card for my washing machine. The only missing point for me is how can you display the statuses in the horizontal card ? I mean the door status or the running program. For me it's only code numbers, so I think you've done a mapping somewhere or something like that. Could you tell me how it's done please?

[Trevsweb]

yea the last update changed something in mine too. I will check things out and try to update things.

[mTpChris]

yea the last update changed something in mine too. I will check things out and try to update things.

Ok, thank you. On my side I've created template sensors for each display, quite fastidious and not the right way to proceed but it does the job for now.
I also added a conditional display with error display code, but I didn't find a dictionary to map eror codes for now.