Laundry card: icon state color and progress bar not working

[4homeassistant]

Thank you so much for that wonderful integration. All is running well, except the laundry card. Neither the icon state color, nor the progress bar is working on Safari/iOS or Chrome/Windows (latest versions) while the total and remaining time is shown properly. Any idea how I can fix it?

The environment is Home Assistant Operating System on Raspberry Pi 4 (latest updates on everything) and we're using a LSWD100E washer/dryer.

[ollo69]

For this we need @KTibow, I don't know if he is available.

[KTibow]

oh that card? it's old, i'd recommend you use the mushroom template instead, or just copy it into a markdown card

[4homeassistant]

oh that card? it's old, i'd recommend you use the mushroom template instead, or just copy it into a markdown card

Yes but it's good :-)
My impression is that it's related to Chromium based browsers. In Firefox it seems to be fine. Unfortunately I am not a programmer, thus can't help myself. Does the mushroom card also provide a progress bar?

[KTibow]

see the screenshot

[4homeassistant]

see the screenshot

Doesn't seem to have a progress bar. Just checked if the old card works on Firefox but it doesn't. Anyway thanks for your quick answer @KTibow.

[mhu1987]

It releted to new core version 2022.12.0 (and newer) and chages in the colors of the states. It's sad, because i really loved this cad, and its original colors.

[mhu1987]

OK, guys here is the hard fix for this card to show up correctly:
custom-cards/button-card#635 (comment)
custom-cards/button-card#635 (comment)

[ollo69]

Can you create a PR with your changes?

[ollo69]

Can we close this or there is something to do?

[4homeassistant]

@ollo69, I'd suggest to delete the documentation for that card since it is not working anymore and not maintained. The timer bar card has been updated to support remain_time from your integration, so there is another option out now.

[mhu1987]

@ollo69 I made some adjustments to make it work and look like the old one. Colors are hard-coded in the laundry.js. I also changed the size of icon to be a little smaller and the progress bar to not stick the right edge.
After changing the code of laundry.js you have to restart the home assistant and clear the cache of the browser to make it work. If this doesnt work, try to use incognito mode if it something to do with cache.

Here is the updated laundry.js

class LaundryCard extends HTMLElement {
  // Whenever states are updated
  set hass(hass) {
    const entityId = this.config.entity;
    const state = hass.states[entityId];
    // Set data definitions
    const friendlyName = state.attributes["friendly_name"] || state.entity_id;
    const icon = state.attributes["icon"];
    if (!this.content) {
      this.innerHTML = `
        <ha-card header="${friendlyName}">
          <div class="main">
            <ha-icon icon="${icon}"></ha-icon>
            <span></span>
          </div>
        </ha-card>
      `;
      this.querySelector(".main").style.display = "grid";
      this.querySelector(".main").style.gridTemplateColumns = "33% 64%";
      this.querySelector("ha-icon").style.setProperty("--mdc-icon-size", "95%");
    }
    if (state.state == "on") {
      const totalTime = state.attributes["initial_time"];
      const remainTime = state.attributes["remain_time"];
      const totalMinutes = (parseInt(totalTime.split(":")[0]) * 60) + parseInt(totalTime.split(":")[1]);
      const remainMinutes = (parseInt(remainTime.split(":")[0]) * 60) + parseInt(remainTime.split(":")[1]);
      this.querySelector("ha-icon").style.color = "#FDD835";
      this.querySelector("span").innerHTML = `
${friendlyName} is running ${state.attributes["current_course"]}<br>
Currently ${state.attributes["run_state"]}<br>
${state.attributes["initial_time"]} total, ${state.attributes["remain_time"]} to go
<div class="progress-wrapper" style="height: 20px; width: 100%;">
  <div class="progress" style="display: inline-block; height: 20px;">
  </div>
  <span style="color: #FFFFFF; position: absolute; right: 33%;">50%</span>
</div>
`;
      this.querySelector(".progress-wrapper").style.backgroundColor = "#44739E";
      this.querySelector(".progress").style.backgroundColor = "#FDD835";
      this.querySelector(".progress").style.width = (totalMinutes - remainMinutes) / totalMinutes * 100 + "%";
      this.querySelector(".progress-wrapper span").innerHTML = Math.round((totalMinutes - remainMinutes) / totalMinutes * 100) + "%";
    } else {
      this.querySelector("ha-icon").style.color = "#44739E";
      this.querySelector("span").innerHTML = `${friendlyName} is off`;
    }
  }

  // On updated config
  setConfig(config) {
    const states = document.querySelector("home-assistant").hass.states;
    if (!config.entity || !states[config.entity] || !states[config.entity].state) {
      throw new Error("You need to define an valid entity (eg sensor.my_washing_machine)");
    }
    this.config = config;
  }

  // HA card size to distribute cards across columns, 50px
  getCardSize() {
    return 3;
  }

  // Return default config
  static getStubConfig() {
    for (var state of Object.values(document.querySelector("home-assistant").hass.states)) {
      if (state.attributes["run_state"] !== undefined) {
        return { entity: state.entity_id };
      }
    }
    return { entity: "sensor.my_washing_machine" };
  }
}

customElements.define('laundry-card', LaundryCard);
window.customCards.push(
  {
    type: "laundry-card",
    name: "Laundry Card",
    preview: true
  }
);

[4homeassistant]

I'll try if it works for me next time the washer is running. That's part of my wife's tasks ;-)
If so, I'd update the README.md accordingly. For the time beeing, it's outdated and if you like @ollo69, just merge my PR. That's what I can do to support this nice project.

[ollo69]

For now I merged PR #457.

@4homeassistant,

I suggest to update your PR, leaving the code of custom card but putting just as alternative, and put Timer Bar Card as primary solution.

[4homeassistant]

Happy new year @ollo69. Sounds good 😊

[ollo69]

Oh yes, happy new year to everybody😉

[ollo69]

I close this, fixed by PR #457 and #470