Hallo,
ich würde gerne einen Türsensor der mir als state “closed/open” liefert mit einem Picture “geschlossene Tür(grün)/offene Tür(rot)” darstellen.
Ich habe keine Idee wie ich das umsetzen kann, bzw. nach was ich suchen muss um evtl. ein Beispiel finden zu können.
Ich danke euch für die Unterstüzung.
Grüße
Ich hatte sowas mit einer custom button card gelöst. Das Bild hatte ich als Hintergrund der Karte. Das hat eigentlich ganz gut funktioniert.
state:
- value: "on"
styles:
card:
- background-image: url('/local/images/fenster_offen_kleiner.png')
- background-size: 50%
- background-position: center
- background-repeat: no-repeat
- value: "off"
styles:
card:
- background-image: url('/local/images/fenster_zu_kleiner.png')
- background-size: 50%
- background-position: center
- background-repeat: no-repeat
Hallo,
danke dir schonmal für deine Reaktion.
Das bedeutet also, dass ich als erstes irgendwelche Bilder in HA laden muss um diese zu verwenden?
Das habe ich noch nicht gemacht und muss mir erstmal anschauen wie und wohin ich die importieren muss.
Ich hatte gehofft die Icons aus der MDI Libary verwenden zu können.
Gibt es da evtl. also noch einen anderen Weg?
Falls es nur mit eigenen Icons/Pictures geht, welches Format müssen die haben oder gibt es dazu auch eine entsprechende Library?
Grüße
Ich bin jetzt ein bisschen verwirrt. Du hast doch geschrieben du möchtest Bilder verwenden. Naja. Mit den Icons geht das natürlich auch. Schreibe dir dazu später etwas.
Sorry, wenn ich die Begrifflichkeiten durcheinander geworfen und damit für Verwirrung gesorgt habe.
Also so ist der aktuelle Zustand:
Und so wünsche ich es mir für geschlossen (closed):
bzw. so geöffnet (open):
sollte es dann im Dashboard dargestellt werden.
Vielen Dank und Grüße
PS: Nicht das die Shots auch irritieren. Der IST-Zustand ist aus meiner HA und der SOLL-Zustand, wie ich es aktuell in FHEM realisiert habe.
Aber ich versuche gerade von FHEM zu HA umzuziehen.
Das ist doch eine Standard-Funktion bei HA.
Du musst dafür halt nur die richtigen Icons auswählen. 
VG Jim
@JimOS: Ja genauso bzw. so ähnlich wünsche ich mir die Darstellung.
Aber ich habe keine Ahnung wie ich das umsetzen kann.
Es funktioniert aber offensichtlich nur mit dem Icon vor dem Device-Namen!?
Den eigentlichen State (bei dir Geschlossen/Geöffnet) lässt sich nicht durch ein Icon ersetzen?
Denn irgendwie ist das ja doppelt, also die grüne geschlossene Tür und dann der State-Text.
Grüße
Dann aktivierst Du den Schieberegler für “Zustand anzeigen” nicht und schon wird der Zustand - hier Geöffnet - nicht mehr angezeigt.
VG Jim
Ah, ok…also umsetzen lässt sich, was ich vor habe.
Allerdings habe ich dieses “Parameterfenster” nirgends gefunden.
Kannst du mir bitte den Weg dahin erklären!?
Ich weiß jetzt nicht genau was Du mit “Parameterfenster” meinst, aber der vorherige Screenshot ist eine “Knopf-Karte”.
VG Jim
Ah, ok!
Langsam komme ich irgendwie vorran.
Das mit der Knopf-Karte habe ich gefunden und soweit geschafft.
Allerdings, wechselt weder das Icon noch die Farbe!
Wo und wie muss ich das einstellen?
Ich habe noch etwas zu custom button card gefunden, aber das scheint noch etwas komplizierter und umfangreicher zu sein.
Stell das mal so ein wie Du es bei meinem Screenshot sehen kannst. Irgendwelche anderen Integrationen wie z.B. custom button card braucht es dafür nicht. Irgendwelche extra oder weitere Integrationen habe ich bei mir auch gar nicht installiert, sondern das funktioniert mit den HA Boardmitteln.
VG Jim
Hier mal ein anderer Ansatz: ich mappe das mittels HA-Floorplan in einen Grundriss. Man sieht dann wo, welche Tür und welches Fenster geöffnet ist und es wird auch angezeigt, wie oft die an dem Tag schon geöffnet wurden.
In dem Video sieht die Animation der Türen und Fenster krisslig und ruckelig aus. Das kommt durch die Kompression des Videos. Ich weiß nicht, weil ich ein qualitativ besseres Screen Recording hinbekomme. In der Realität ist die Animation butterweich und weil das alles auf Vektorgrafiken (SVG) basiert auch perfekt aufgelöst und scharf.
Die Fenster, an denen keine Zahlen stehen, sind aktuell noch nicht mit Sensoren bestückt.
Der YAML-Code sieht dann z.B. so aus. Damit die Türen und Fenster im Grundriss realitätsgetreu auf der richtigen Seite öffnen, muss man den Drehpunkt für die Animation definieren. lt steht dann für left top. Wenn Tür oder Fenster geöffnet werden, dann wird dem Element die CSS-Klasse window-lt-open zugewiesen und sonst window-lt-closed
- name: Fenster lt
entities:
- binary_sensor.terrassentur_wz_2_contact
state_action:
- service: floorplan.class_set
service_data: >-
${(entity.state === 'on') ? "window-lt-open" :
"window-lt-closed"}
Der CSS-Code für die Animation sieht dann so aus
path.window-lt-closed {
fill: #C8FFFFB2 !important;
transform-box: fill-box;
transition: 1000ms linear all;
transform-origin: left top;
transform: rotate(0deg);
}
path.window-lt-open {
fill: #DD0000FF !important;
transform-box: fill-box;
transform-origin: left top;
transition: 1000ms linear all;
transform: rotate(-30deg);
}
Das hatte ich natürlich auch so schon eingestellt.
Aber nein, der Iconwechsel funktioniert nicht. 
@HA-1 , vielen Dank auch für deine Nachricht.
Das mit dem Floorplan würde mich auch interessieren, aber dazu muss ich mich erst noch deutlich mehr mit HA beschäftigen um das realisieren zu können.
Sorry dann muss ich leider passen. Bei mir funktioniert das problemlos und ich habe oder hatte bei mir auch noch nie irgendeine zusätzliche Integration installiert die sich irgendwie darauf auswirken könnte.
Wobei - mir fällt gerade ein: Ich habe vor Jahren unter HA mal ein paar zusätzliche und einfache Themes installiert, die per
frontend:
themes: !include themes.yaml
in der configuration.yaml geladen werden.
Kurzer Auszug aus der themes.yaml
Dark - Green:
### Main Interface Colors ###
primary-color: "#03B14B"
light-primary-color: "#47FC92"
primary-background-color: "#1F1F28"
secondary-background-color: var(--primary-background-color)
divider-color: "#2F2F3D"
### Text ###
primary-text-color: "#FFFFFF"
secondary-text-color: "#47FC92"
text-primary-color: "#FFFFFF"
disabled-text-color: "#464653"
### Sidebar Menu ###
sidebar-icon-color: "#B6B6C1"
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#47FC92"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: "#04E762"
state-icon-active-color: "#FBD150"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: "#04E762"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: "#464653"
label-badge-text-color: "#FFFFFF"
label-badge-red: "#343443"
### Cards ###
paper-card-background-color: "#23232E"
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#04E762"
paper-toggle-button-checked-bar-color: "#47FC92"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#343443"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
Light - Green:
### Main Interface Colors ###
primary-color: "#03B14B"
light-primary-color: "#47FC92"
primary-background-color: "#F6F7F9"
secondary-background-color: var(--primary-background-color)
divider-color: "#B9CDC3"
### Text ###
primary-text-color: "#788083"
secondary-text-color: "#03B14B"
text-primary-color: "#FFFFFF"
disabled-text-color: "#A8ADAF"
### Sidebar Menu ###
sidebar-icon-color: "#788083"
sidebar-text-color: var(--sidebar-icon-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#12D289"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: "#12D289"
state-icon-active-color: "#FBCD41"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: "#12D289"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: "#F8FAF9"
label-badge-text-color: "#788083"
label-badge-red: "#3FEFAC"
### Cards ###
paper-card-background-color: "#FFFFFF"
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#03B14B"
paper-toggle-button-checked-bar-color: "#12D289"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#ABB0B2"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
Das wäre die einzige Idee die ich noch hätte warum das bei mir funktioniert. Wobei ich - wie man im Screenshot ja sehen kann
kein extra oder anderes Theme ausgewählt habe.
Vielleicht kann das ja noch ein anderer User mal kurz testen ob das bei HA standardmäßig tatsächlich nicht funktioniert so wie Du schreibst. Wenn dem so sein sollte liegt es wohl an den Themes das es bei mir funktioniert.
VG Jim
Das kann natürlich sein, dass es daran liegt.
Seltsam, ist es jedenfalls, dass es bei mir nicht funktioniert.
Irgendwas fehlt aber offensichtlich.
Vielleicht meldet sich ja noch jemand und hat eine Lösung dazu.
Falls nicht, werde ich es dann doch mal mit den Custom Button Cards versuchen.
Ursprünglich bin ich davon ausgegangen, dass ich einfach in der config.yaml so etwas eintragen kann wie: if state on then icon door.open:red oder so ähnlich.
Aktuell sieht es in config.yaml so aus zu diesem Device:
mqtt:
sensor:
- unique_id: Terrassentür
name: "Terrasse_State"
state_topic: "fhem/Terrassentuer/state"
Zwei Dinge könnten noch helfen:
Guck unter Einstellungen > Geräte: bei deinem Gerät (Terassentür), ob du dort auch bei “Anzeigen als” Tür ausgewählt hast.
hier:
darfst du in der Kartenkonfiguration kein icon festlegen. Das würde dann dauerhaft gesetzt.
Beide Punkte sind wichtig, damit der Icon-Wechsel funktioniert. Die Farbe legt Home Assistant aber selbst fest.
Danke @alexsaas, leider scheitere ich schon an Punkt 1.
Denn meine “Terrassentür” taucht unter Einstellungen>Geräte und Dienste>Geräte überhaupt nicht auf.
Kann das daran liegen, dass ich diesen Sensor nur über mqtt angelegt habe?
Wie ich oben schon schrieb sieht das in der config.yaml so aus:
mqtt:
sensor:
- unique_id: Terrassentür
name: "Terrasse_State"
state_topic: "fhem/Terrassentuer/state"
Im Gerät MQTT habe ich die “Terrassentür” nur als Entität und dort gibt es keine Einstellungsmöglichkeit “Anzeigen als”
Ich weiß natürlich nicht wo und wie Du da jetzt bei Dir etwas eingerichtet hast, aber scheinbar wird der Status des Sensors ja von Fhem per MQTT an HA geliefert. Somit müsstest Du unter HA auch eine Entität für den Sensor haben und über dessen Einstellmöglichkeiten bei HA solltest Du dann auch die “Anzeigen als” haben. Beispiel eines Zigbee Tür-Sensors.
Wenn Du bei den Entitäten mal nach dem Sensor suchst/schaust,
solltest Du ihn dort auch finden können. Altenativ auch da:
VG Jim
