Add Washing Machine Card

[Michelone86]

Hi super @neilimixamo, I would like to use the EQUIPMENT tab to view the controls for my Washing Machine and Dryer (both Electrolux). Any ideas about it?

ps. I don't have other devices to insert in the EQUIPMENT tab, I just need to be able to control them. Thank you!

[neilimixamo]

Hi @Michelone86, since I don't have connected washing and dryer machines myself, could you tell me more about the brands/products you use?

Could you also detail the functions you would like to integrate into the cards (e.g., start a wash, stop it, check the status or its power consumption, etc.) as well as the style you prefer?

If you only want to display two cards in your equipment view, we could quadruple the card size, which would allow for more controls or information to be displayed.

There is also a nice existing 'Custom-card Washer' proposed by UI-Minimalist, what do you think about it ? We could draw inspiration from it and create a QLM card that integrates seamlessly with the rest of its theme.

Feel free to provide sketches or drawings of what you envision for greater clarity."

[Michelone86]

Hello @neilimixamo, the card you proposed is really very interesting and would be great for me! The controls I would like to see are quite simple: Current State (on/off), Wash Phase, Pause, Resume, Remaining Time. I currently use this Electrolux integration https://github.com/albaintor/homeassistant_electrolux_status.

Thank you so much for the time you dedicate to this great work, you are really good 🙏😊

[Michelone86]

Hi @neilimixamo, unfortunately I don't have that much programming skills and I can't figure out how to make this card work with my Electrolux appliances and your qlm. Could you help me? 🙏

[neilimixamo]

If you only need to see the washing phase, remaining time, and control start/pause actions for the machine, we can maintain a minimalist approach by using the basic QLM card model as shown in this example.

The progress state will be represented by the appropriate icon for each cycle phase and a slider, while the remaining time will be displayed as a label when the machine is running and will show "paused" when the machine is paused. Does this card meet your requirements?

Since I don't have access to such a device, I need the following information:

• Entity name of your washing machine
• Screenshot of the "dev tool" window for this entity showing its attributes
• Entity name for starting/pausing your washing machine
• Entity name indicating the washing cycle
• Entity name indicating the remaining time

[Michelone86]

Hi @neilimixamo , I'm so happy to hear that you can view and control my washing machine directly with your QLM! The example you showed me is really what I need!

Here is the data you requested:

Entity name: electrolux_lavatrice Entity name for starting: button.electrolux_lavatrice_executecommand_start Entity name for pausing: button.electrolux_lavatrice_executecommand_pause Entity name for resume: button.electrolux_lavatrice_executecommand_resume Entity name for washing cycle: sensor.electrolux_lavatrice_cyclephase and sensor.electrolux_lavatrice_cyclesubphase Entity name for remaining time: sensor.electrolux_lavatrice_timetoend

I also attach all the screenshots from the developers section. ps. I will also need to insert my dryer (electrolux), but I think I will be able to adapt your work without giving you further trouble ;)

[neilimixamo]

Ok, add first this new "appliance.yaml" beta template,

appliance (beta).yaml

```yaml appliance: template: - basic_card - badge_battery variables: entity: states: ["starting", "washing", "rinsing", "drying"] # add/adapt terms if needed label_on: 'Active' label_off: 'Inactive' styles: card: - background-color: | [[[ if (variables.entity) { const state = states[variables.entity].state; if (state !== 'off' && state !== 'paused') { return 'var(--fan-background-active)'; } else { return 'var(--fan-background-inactive)'; } } else { return 'var(--fan-background-inactive)'; } ]]] custom_fields: slider_visible: card: type: custom:my-slider-v2 entity: | [[[ if (variables.entity) { return variables.entity; } else { return ''; } ]]] intermediate: true styles: card: - display: block - position: absolute - height: 100% - width: 100% - background-color: transparent - border-radius: 27px - box-shadow: none - bottom: 0vh - left: 0vw container: - width: 100% - height: 100% - position: absolute - bottom: 0vh - right: 0vw - overflow: hidden - border-radius: 27px track: - width: 100% - height: 100% - position: absolute - bottom: 0vh - right: 0vw - border-radius: 27px - background-color: | [[[ if (variables.entity) { var state = states[variables.entity].state.toLowerCase(); var percentage = states[variables.entity].attributes.percentage; if (state === 'on') { return 'var(--fan-slider-track-active)'; } } return 'var(--fan-slider-track-inactive)'; ]]] progress: - height: 100% - background: | [[[ if (variables.entity) { var state = states[variables.entity].state.toLowerCase(); var percentage = states[variables.entity].attributes.percentage; if (variables.states.some(s => state.includes(s.toLowerCase()))) { return 'var(--fan-background-active)'; } } return 'var(--fan-background-inactive)'; ]]] - border-radius: 27px 0px 0px 27px thumb: - width: 0px icon: card: icon: | [[[ if (variables.entity) { const state = states[variables.entity].state.toLowerCase(); if (state.includes('starting')) { return 'mdi:power'; } else if (state.includes('washing')) { return 'mdi:water'; } else if (state.includes('rinsing')) { return 'mdi:water-pump'; } else if (state.includes('drying')) { return 'mdi:weather-sunny'; } else if (state.includes('paused')) { return 'mdi:pause'; } else { return 'mdi:washing-machine'; } } else { return 'mdi:help'; } ]]] styles: card: - overflow: visible - background-color: | [[[ if (variables.entity) { const state = states[variables.entity].state; if (state !== 'off' && state !== 'paused') { return 'var(--fan-icon-background-active)'; } else { return 'var(--fan-icon-background-inactive)'; } } else { return 'var(--fan-icon-background-inactive)'; } ]]] icon: - color: 'var(--fan-icon-active)' tap_action: action: toggle hold_action: action: none custom_fields: badge: type: custom:button-card # calls for the 'badge_battery' template name: card: label: | [[[ if (variables.entity) { if (states[variables.entity].state === "unavailable") { return 'Unavailable'; }else if (states[variables.entity].state === "paused") { return 'In Pausa'; } else { var state = states[variables.entity].state; if (state != 'off') { return states[variables.label_on].state; } else { return variables.label_off; } } } else if (variables.label) { return variables.label; } else { return 'Label'; } ]]] ```

then create the following card and give me feedback.

- type: custom:button-card
  template: appliance
  variables:
    entity: sensor.electrolux_lavatrice_appliancestate
    name: Lavatrice
    label_on: sensor.electrolux_lavatrice_timetoend
    label_off: 'Disattivata' 
    icon_tap_action:
      action: call-service
      service: button.press
      service_data:
        entity_id: >
          [[[
            if (states[variables.entity].state.toLowerCase() === 'off') {
              return 'button.electrolux_lavatrice_executecommand_start';
            } else if (states[variables.entity].state.toLowerCase() === 'paused') {
              return 'button.electrolux_lavatrice_executecommand_resume';
            } else {
              return 'button.electrolux_lavatrice_executecommand_pause';
            }
          ]]]

Can you also list the possible states of the entities sensor.electrolux_lavatrice_appliancestate, sensor.electrolux_lavatrice_cyclephase and sensor.electrolux_lavatrice_cyclesubphasecycle ?

Which entity will indicate "washing", "rinsing", "drying", "paused" ?

[Michelone86]

Hi @neilimixamo, I created the board! The minutes remaining for the end of the cycle are correct. If I click on the label, the sensor.electrolux_lavatrice_appliancestate entity screen opens. If I click on the icon instead, I get the error "Service sensor.turn_off not found".

https://github.com/neilimixamo/Home-Assistant-Quick-Look-Mobile/assets/97887508/cf3d7e6c-8cef-478d-9cac-bfa824291be0

These are the states I was able to read since the last wash:

sensor.electrolux_lavatrice_appliancestate : off, running, end of cycle. sensor.electrolux_lavatrice_cyclephase : unavailable, wash, rinse, spin. sensor.electrolux_lavatrice_cyclesubphasecycle : not available, add garment, wash, rinse.

I await your instructions, thank you!

[neilimixamo]

This new code should fix the action bug and should adapt the icon and label according to the progress state of the washing machine, while displaying the remaining time in minutes.

Can you make sure that the entity 'sensor.electrolux_lavatrice_appliancestate' also indicates a 'paused' state?

appliance (beta 2).yaml

```yaml appliance: template: - basic_card - badge_battery variables: entity: label_on: 'Attivata' label_off: 'Disattivata' styles: card: - background-color: | [[[ if (variables.entity) { const state = states[variables.entity].state; if (state !== 'off' && state !== 'paused') { return 'var(--fan-background-active)'; } else { return 'var(--fan-background-inactive)'; } } else { return 'var(--fan-background-inactive)'; } ]]] custom_fields: icon: card: icon: | [[[ const state = states[variables.entity].state.toLowerCase(); const phase = states['sensor.electrolux_lavatrice_cyclephase'].state.toLowerCase(); if (state === 'off') { return 'mdi:washing-machine-off'; } else if (state === 'running') { if (phase === 'wash') { return 'mdi:water'; } else if (phase === 'rinse') { return 'mdi:water-pump'; } else if (phase === 'spin') { return 'mdi:turbine'; } else { return 'mdi:washing-machine'; } } else if (state === 'end of cycle') { return 'mdi:check'; } else if (state === 'paused') { return 'mdi:pause'; } else { return 'mdi:help'; } ]]] styles: card: - overflow: visible - background-color: | [[[ if (variables.entity) { const state = states[variables.entity].state; if (state !== 'off' && state !== 'paused') { return 'var(--fan-icon-background-active)'; } else { return 'var(--fan-icon-background-inactive)'; } } else { return 'var(--fan-icon-background-inactive)'; } ]]] icon: - color: 'var(--fan-icon-active)' custom_fields: badge: type: custom:button-card name: card: label: | [[[ const state = states[variables.entity].state.toLowerCase(); const phase = states['sensor.electrolux_lavatrice_cyclephase'].state.toLowerCase(); const timetoend = states['sensor.electrolux_lavatrice_timetoend'].state; if (state === 'off') { return variables.label_off; } else if (state === 'running') { if (phase === 'wash') { return 'Lavaggio - ' + timetoend + 'min'; } else if (phase === 'rinse') { return 'Risciacquo - ' + timetoend + 'min'; } else if (phase === 'spin') { return 'Asciugatura - ' + timetoend + 'min'; } else { return variables.label_on + ' - ' + timetoend + 'min'; } } else if (state === 'end of cycle') { return 'Finito'; } else { return 'Label'; } ]]] ```

- type: custom:button-card 
  template: appliance
  variables:
    entity: sensor.electrolux_lavatrice_appliancestate
    name: Lavatrice
    icon_tap_action:
      action: call-service
      service: button.press
      service_data:
        entity_id: >
          [[[
            const state = states[variables.entity].state.toLowerCase();
            const button = 'button.electrolux_lavatrice_executecommand_';

            if (state === 'off') {
              return button + 'start';
            } else if (state === 'paused') {
              return button + 'resume';
            } else {
              return button + 'pause';
            }
          ]]]

This template is currently not applicable to other devices but I'll try to make it more generic once we have finalized this card and as mentioned earlier, I cannot test this code myself, so I have to rely on your observations for the following improvements ;)

[Michelone86]

Hi @neilimixamo , the code works perfectly! Is it possible to move the remaining minutes under the wash cycle name? Thank you!

[neilimixamo]

May I propose you one of the following alternatives instead of adding a third text line ?

[Michelone86]

Ok the last solution seems the best to me, it would be perfect! (Replace state by name)

[neilimixamo]

Ok, let's try this then :

appliance (beta 3).yaml

```yaml appliance: template: - basic_card - badge_battery variables: entity: label_on: 'Attivata' label_off: 'Disattivata' styles: card: - background-color: | [[[ if (variables.entity) { const state = states[variables.entity].state; if (state !== 'off' && state !== 'paused') { return 'var(--fan-background-active)'; } else { return 'var(--fan-background-inactive)'; } } else { return 'var(--fan-background-inactive)'; } ]]] custom_fields: icon: card: icon: | [[[ const state = states[variables.entity].state.toLowerCase(); const phase = states['sensor.electrolux_lavatrice_cyclephase'].state.toLowerCase(); if (state === 'off') { return 'mdi:washing-machine-off'; } else if (state === 'running') { if (phase === 'wash') { return 'mdi:hand-water'; } else if (phase === 'rinse') { return 'mdi:water'; } else if (phase === 'spin') { return 'mdi:turbine'; } else { return 'mdi:washing-machine'; } } else if (state === 'end of cycle') { return 'mdi:check'; } else if (state === 'paused') { return 'mdi:pause'; } else { return 'mdi:help'; } ]]] styles: card: - overflow: visible - background-color: | [[[ if (variables.entity) { const state = states[variables.entity].state; if (state !== 'off' && state !== 'paused') { return 'var(--fan-icon-background-active)'; } else { return 'var(--fan-icon-background-inactive)'; } } else { return 'var(--fan-icon-background-inactive)'; } ]]] icon: - color: 'var(--fan-icon-active)' custom_fields: badge: type: custom:button-card name: card: name: | [[[ const state = states[variables.entity].state.toLowerCase(); const phase = states['sensor.electrolux_lavatrice_cyclephase'].state.toLowerCase(); if (state === 'off') { return variables.name; } else if (state === 'paused') { return 'In Pausa'; } else if (state === 'running') { if (phase === 'wash') { return 'Lavaggio' ; } else if (phase === 'rinse') { return 'Risciacquo'; } else if (phase === 'spin') { return 'Asciugatura'; } else { return variables.name; } } else if (state === 'end of cycle') { return 'Finito'; } else { return 'Name'; } ]]] label: | [[[ const state = states[variables.entity].state.toLowerCase(); const timetoend = states['sensor.electrolux_lavatrice_timetoend'].state; if (state === 'off') { return variables.label_off; } else if (state === 'running') { return timetoend + ' min'; } else if (state === 'end of cycle') { return 'Finito'; } else { return variables.label_on ; } ]]] ```

[Michelone86]

Ok, I did a quick test and it seems to work well! In the next few days I'll do some complete tests and update you, I'll wait to close the topic. Thanks Super @neilimixamo 🚀🚀🚀

[Michelone86]

Hi @neilimixamo , I've been testing your card for a few days, everything works great and I even managed to get the dryer to work by adapting its entities based on your code!

Thank you so much, your QLM Dashboard is really perfect 😎🚀

[neilimixamo]

Hi @Michelone86, I'm glad to hear that you achieved the dashboard you wanted. However, I notice that the cards are blue even though their status is "Spenta", they should be greyded instead, no?

[Michelone86]

Hi @neilimixamo , yes the cards are Blue even if they are turned off... 🤔

[neilimixamo]

Is the state of your inactive washing machine "off" or "end of cycle" ? Cause every other states than "off" or "paused" will return a blue card

[Michelone86]

The state of the switched off washing machine is OFF.

[neilimixamo]

Can you try to change 'OFF' to 'off' in the dev tools to see if it fixes the problem ?

If it does, replace lines 15 and 59 of the appliance template with

if (state.toLowerCase() !== 'off' && state.toLowerCase() !== 'paused') {

[Michelone86]

Hi @neilimixamo, I made the change you told me to do, now everything works correctly! Thank you ✌🏻