Blog

LG ThinQ Dashboard Karte für Home Assistant

  • Beitrags-Kommentare:0 Kommentare

Als Besitzer zweier LG ThinQ Geräte, nämlich Waschmaschine und Trocker, möchte ich den Status der Geräte auf dem Home Assistant Dashboard darstellen. Bis vor kurzem habe ich dazu die Timer-Bar Card genutzt, die ich bereits in diesem Video vorgestellt habe.

Durchs stöbern im Forum bin ich dann auf eine Dashboard Karte gestoßen, die vom Design dem Display der Geräte entspricht. Da ich das Layout sehr ansprechend finde habe ich die Karte nun in mein Dashboard integriert. Da die original YAML Dateien alle auf englisch sind müssen ein paar Anpassungen am YAML vorgenommen werden, damit die Icons in der Karte korrekt aktiviert werden. Darüber hinaus habe ich die Template Sensoren angepasst und nur diese übernommen, welche ich für Waschmaschine und Trockner benötige, was die Übersicht in der Sensors.yaml verbessert.

Übrigens nutze ich als LG ThinQ Integration nach wie vor die HACS Variante und nicht die Core! In diesem Beitrag habe ich über die LG Waschmaschine berichtet.

Vorbereitung LG Dashboard Karte

Zuerst habe ich die Dateien aus dem Github Repository herunter geladen und entpackt.

Als nächstes werden im Order www im Bereich /homeassistant die benötigten Dateien hochgeladen. Falls du den Ordner www noch nicht hast kannst du diesen einfach in vorher genannten Bereich erstellen. Beim Upload habe ich mich auf die benötigten Dateien beschränkt. Ich habe also nur die Bilder hochgeladen welche ich für Waschmaschine und Trockner benötige.

Das sind folgende Dateien und hängt natürlich von den eigenen Anforderungen ab:

  • 7segment.css
  • 7segment.woff
  • hass-dryer-alt-card-bg.png
  • hass-washer-alt-card-bg.png
  • den kompletten Ordner lg-icons

Im nächsten Schritt wird die 7segment.css ins Dahsboard eingebunden. Das geht unter Dashboard Editor > Ressourcen verwalten > Ressource hinzufügen.

Als URL wird folgender Pfad angegeben: /local/7segment.css –> /local referenziert dabei den Order www

Home Assistant Dashboard Ressource hinzufügen

Wichtig ist darauf zu achten, dass der Typ Stylesheet ausgewählt ist. Anschließend auf erstellen klicken.

Sind diese Schritte erledigt werden Template Sensoren angelegt. Die Anleitung tut dies in der configuration.yaml – Da ich meine Konfiguration aufgeteilt habe erstelle ich die Sensoren in der sensors.yaml. Falls du deine Konfiguration ebenfalls aufteilen möchtest erstelle im Pfad /homeassistant die Datei sensors.yaml. Anschließend wird die sensors.yaml in der configuration.yaml wie folgt referenziert: sensor: !include sensors.yaml

Code Template Sensoren:

  - platform: template
    sensors:
       waschmaschine_door_lock:
         friendly_name: "waschmaschine Türschloss"
         value_template: "{{ state_attr('sensor.waschmaschine','door_lock') }}"

       waschmaschine_time_display:
         friendly_name: "Waschmaschine Zeit Display"
         value_template: >
          {% if is_state('sensor.waschmaschine_run_state', '-') %}
          {% elif is_state('sensor.waschmaschine_run_state', 'unavailable') %}
          {% elif is_state('sensor.waschmaschine_run_state', 'Standby') %}
            -:--
          {% else %}
            {{ state_attr("sensor.waschmaschine","remain_time").split(":")[:-1] | join(':') }}   
          {% endif %}
 
       trockner_time_display:
         friendly_name: "Trockner Zeit Display"
         value_template: >
            {% if is_state('sensor.trockner_run_state', '-') %}
            {% elif is_state('sensor.trockner_run_state', 'unavailable') %}
            {% elif is_state('sensor.trockner_run_state', 'Standby') %}
              -:--
            {% else %}
              {{ state_attr("sensor.trockner","remain_time").split(":")[:-1] | join(':') }}
            {% endif %}
       blank:
         friendly_name: "Blank Sensor"
         value_template: ""

Achtung! Wenn du den Code übernimmst musst du deine Sensoren anpassen entsprechend deinen Entitäten

Nach all den Anpassungen muss Home Assistant einmal neugestartet werden.

LG ThinQ Dashboard Karte erstellen

Als letzter Schritt kann die Karte erstellt werden. Ich habe diese in eine Stapel Karte gepackt für den Fall, dass ich später unterhalb der Karte weitere Sensoren anzeigen möchte.

LG ThinQ Waschmaschinen Dashboard Karte:

type: vertical-stack
cards:
  - type: picture-elements
    elements:
      - type: image
        entity: sensor.waschmaschine_run_state
        image: /local/lg-icons/sensing.png
        state_image:
          Detecting: /local/lg-icons/sensing-on.png
        style:
          top: 33%
          left: 33%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: sensor.waschmaschine_run_state
        image: /local/lg-icons/wash.png
        state_image:
          Waschen: /local/lg-icons/wash-on.png
        style:
          top: 33%
          left: 51%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: sensor.waschmaschine_run_state
        image: /local/lg-icons/rinse.png
        state_image:
          Spülen: /local/lg-icons/rinse-on.png
        style:
          top: 33%
          left: 69%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: sensor.waschmaschine_run_state
        image: /local/lg-icons/spin.png
        state_image:
          Schleudern: /local/lg-icons/spin-on.png
        style:
          top: 33%
          left: 87%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: sensor.waschmaschine
        image: /local/lg-icons/wifi.png
        state_image:
          "on": /local/lg-icons/wifi-on.png
        style:
          top: 73%
          left: 32%
          width: 10%
          image-rendering: crisp
      - type: image
        entity: sensor.waschmaschine_door_lock
        image: /local/lg-icons/lock.png
        state_image:
          "on": /local/lg-icons/lock-on.png
        style:
          top: 73%
          left: 45%
          width: 10%
          image-rendering: crisp
      - type: state-label
        entity: sensor.blank
        prefix: "00:00"
        style:
          color: "#555"
          font-family: segment7
          font-size: 50px
          left: 95%
          top: 74%
          transform: translate(-100%,-50%)
      - type: state-label
        entity: sensor.waschmaschine_time_display
        style:
          color: "#8df427"
          font-family: segment7
          font-size: 50px
          left: 95%
          top: 74%
          transform: translate(-100%,-50%)
    image: /local/hass-washer-alt-card-bg.png

LG ThinQ Trockner Dashboard Karte:

type: vertical-stack
cards:
  - type: picture-elements
    elements:
      - type: image
        entity: sensor.trockner_run_state
        image: /local/lg-icons/dry.png
        state_image:
          Waschen: /local/lg-icons/dry-on.png
        style:
          top: 33%
          left: 69%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: sensor.trockner_run_state
        image: /local/lg-icons/cool.png
        state_image:
          Kühlen: /local/lg-icons/cool-on.png
        style:
          top: 33%
          left: 87%
          width: 20%
          image-rendering: crisp
      - type: image
        entity: sensor.trockner
        image: /local/lg-icons/wifi.png
        state_image:
          "on": /local/lg-icons/wifi-on.png
        style:
          top: 73%
          left: 32%
          width: 10%
          image-rendering: crisp
      - type: state-label
        entity: sensor.blank
        prefix: "00:00"
        style:
          color: "#555"
          font-family: segment7
          font-size: 50px
          left: 95%
          top: 74%
          transform: translate(-100%,-50%)
      - type: state-label
        entity: sensor.trockner_time_display
        style:
          color: "#8df427"
          font-family: segment7
          font-size: 50px
          left: 95%
          top: 74%
          transform: translate(-100%,-50%)
    image: /local/hass-dryer-alt-card-bg.png

Fertig! Und so sieht das Ergebnis aus:

LG ThinQ Home Assistant Dashboard Karte.

Ich hoffe der Beitrag hat dir gefallen? Falls du noch Fragen oder Anmerkungen hast hinterlasse gerne einen Kommentar.

Schreibe einen Kommentar