Animated washing machine card

Configuration Frontend
1

after integrating my new Beko washing machine via HomeWhiz, I am now working on a nicely animated lovelace card.

I tried my ways with custom-button card and browser-mod popup but it does not work:

image
image551×248 16.2 KB

Here is my code:

type: custom:button-card
entity: sensor.beko_waschmaschine_zustand
name: Waschmaschine
show_state: true
show_icon: false
show_name: true
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: |
            ## Waschprogramm wählen
        - type: entities
          entities:
            - entity: sensor.beko_waschmaschine_verbleibend
              name: Zeit verbleibend
              icon: mdi:clock-time-four-outline
            - entity: sensor.beko_waschmaschine_zustand
              icon: mdi:washing-machine
              name: Zustand
            - entity: sensor.beko_waschmaschine_sub_zustand
              icon: mdi:submarine
              name: Sub-Zustand
            - entity: binary_sensor.beko_waschmaschine_die_tur_ist_offen
              name: "Tür offen? "
              icon: mdi:washing-machine-alert
            - entity: binary_sensor.beko_waschmaschine_fernbedienung
              name: Fernbedienung
              icon: mdi:bluetooth-connect
            - entity: select.beko_waschmaschine_programm
              icon: mdi:form-select
              name: Auwahl Programm
            - entity: sensor.beko_waschmaschine_dauer
              name: Programmdauer
              icon: mdi:timer
            - entity: select.beko_waschmaschine_temperatur
              name: Auswahl Temperatur
              icon: mdi:temperature-celsius
            - entity: select.beko_waschmaschine_schleudern
              name: Auswahl Schleudern
              icon: mdi:fan-speed-3
            - entity: select.beko_waschmaschine_zustand
              icon: mdi:play-pause
              name: Auswahl Zustand
            - entity: switch.beko_waschmaschine_anticrease
              icon: mdi:tshirt-v
              name: AntiCrease
            - entity: switch.beko_waschmaschine_dampf
              name: Dampf
            - entity: switch.beko_waschmaschine_einweichen
              icon: mdi:hand-wash-outline
              name: Einweichen
            - entity: switch.beko_waschmaschine_extraspulung
              icon: mdi:spray-bottle
              name: Extraspülung
            - entity: switch.beko_waschmaschine_nachtmodus
              icon: mdi:weather-night
              name: Nachtmodus
            - entity: switch.beko_waschmaschine_remote_knitterschutz
              icon: mdi:remote-off
              name: Remote-Knitterschutz
            - entity: switch.beko_waschmaschine_tierhaarentfernung
              icon: mdi:cat
              name: Tierhaarentfernung
            - entity: switch.beko_waschmaschine_vorwasche
              icon: mdi:skip-previous
              name: Vorwäsche
            - entity: select.beko_waschmaschine_fast
              icon: mdi:run-fast
              name: Fast+
          show_header_toggle: false
          state_color: true
    style:
      width: 400px
styles:
  card:
    - width: 150px
    - height: 200px
    - border-radius: 15px
    - overflow: hidden
    - padding: 0px
  img:
    - width: 100%
    - height: 100%
    - object-fit: contain
    - margin-top: "-10px"
  name:
    - font-size: 1.1em
  state:
    - font-size: 0.9em
    - opacity: 0.8
state:
  - operator: template
    value: >
      [[[ return
      states['binary_sensor.beko_waschmaschine_die_tur_ist_offen'].state ===
      'on'; ]]]
    styles:
      img:
        - content: url("/local/images/waschmaschine_tuer_offen_rot.png")
  - value: läuft
    styles:
      img:
        - content: url("/local/images/waschmaschine_running.gif")
  - value: fertig
    styles:
      img:
        - content: url("/local/images/waschmaschine_fertig_gruen.png")
  - value: Aus
    styles:
      img:
        - content: url("/local/images/waschmaschine_aus.png")
  - value: Ein
    styles:
      img:
        - content: url("/local/images/waschmaschine_ein.png")
  - value: unknown
    styles:
      img:
        - content: url("/local/images/waschmaschine_default.png")

I tried to ask Gemini for help with the code and it suggested the following:

  • Indentation errors: YAML is extremely sensitive to spaces. Every indentation must be correct. Most often, it’s 2 spaces per level.
  • Incorrect image paths: The /local/ path must be correct, and the images need to be in your Home Assistant’s www folder (or a subfolder within it).
  • Incorrect entity IDs: Make sure that sensor.beko_waschmaschine_zustand and binary_sensor.beko_waschmaschine_die_tur_ist_offen` are indeed the correct IDs for your entities.
  • Missing HACS cards: Are custom:button-card and custom:browser_mod (or custom:bubble-card) definitely installed and loaded in the browser cache? Sometimes refreshing the browser or clearing the cache helps.
  • Syntax errors within the button-card configuration: Even the smallest typos can break the entire card.
  • Image format: Some images can cause problems (e.g., incorrect PNG/JPG format, corruption).
  1. as far as I can tell, the formatting is good
  2. image paths should be fine, I uploaded them with the exact names in /www/images
  3. entity names are all fine and work in other, simpler cards
  4. all addons installed
  5. should be fine? the code above is already optimized and pasted from Gemini
  6. the pictures display well after uploading when opening from file editor

anyone can help please?