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
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:
Ich hoffe der Beitrag hat dir gefallen? Falls du noch Fragen oder Anmerkungen hast hinterlasse gerne einen Kommentar.
