Waschmaschine Button: ("an" - "fertig" drücken - "aus")

[Gunther]

Habe lange nichts an Tablet UI gemacht.
Nun meine Frage, wie ich hier vorgehe oder ob ich noch etwas Logik in FHEM nachbauen muss:

Meine Waschmaschine hat einen Dummy der die Zustände "an" und "leeren" per DOIF bekommt.
Diese möchte ich in einem Button darstellen und dann (wenn er auf "leeren" steht und die Wäsche aus der Maschine geholt wurde) einmal drauf drücken um den Status auf "aus" zu stellen.

Welchen button kann ich dafür nehmen?

[setstate]

ich habe diese Woche etwas ähnliches gebaut. Per aktuellem Stromverbrauch zeige ich den Status der Waschmaschine im Keller auf dem Tablet an.

Aus (0-37mA) -> grau
Fertig (38-42mA) -> grün
Läuft (43-∞mA) -> rot und drehendes Symbol

Code Auswählen Erweitern


<div class="col">
<div data-type="symbol" data-device="WaschmaschineStromwert" data-get="state" data-part="1" data-states='[0,38,43]' data-background-icon="" data-icons='["mi mi-local_laundry_service","mi mi-local_laundry_service","mi mi-local_laundry_service fa-spin"]' data-colors='["#505050","green","red"]' class="bigger compressed"></div>
    <div class="darker">Waschm.</div>
</div> 


[Gunther]

super.

Hast DU noch eine Idee, wie ich dann per Druck en Status von fertig/leeren auf aus (set Befehl) hinbekomme (also nicht automatisch, sondern per Druck auf das Icon). Die anderen Status sollen gelesen werden.

[setstate]

man kann jederzeit ein

Code Auswählen Erweitern

onclick="ftui.sendFhemCommand('set Waschmaschine toggle')"

hinzufügen

Code Auswählen Erweitern


<div data-type="symbol" data-device="WaschmaschineStromwert"
     data-states='[0,38,43]' data-part="1"
     data-icons='["mi mi-local_laundry_service","mi mi-local_laundry_service","mi mi-local_laundry_service fa-spin"]'
     data-colors='["#505050","green","red"]' data-background-icon=""
     onclick="ftui.sendFhemCommand('set Waschmaschine toggle')"
     class="bigger compressed"></div>
    <div class="darker">Waschm.</div>


[Gunther]

wie kann ich da noch ein "if" reinnehmen, also nur wenn der Status auf "leeren" steht, dann "set ... aus"

[setstate]

um nicht noch mehr JS-Code in den onclick Handler einzubauen, müsste man eine Switch und data-set-states benutzen.
Die Möglichkeit zu Unterdrücken des Senders per "-" z.B. müsste ich aber erst noch einbauen.

[Gunther]

Ah verstehe.
Zustände abrufen und nur bei bestimmten Zuständen ein data-set schicken beim Rest ein "-"
Wäre das viel Arbeit?

[Gunther]

Der Switch kann ja nur die Farbe ändern. Damit kann ich ja Zwischenzustände mit Blinken (also Wäsche rausholen) nict darstellen, oder?

[setstate]

Nach Update müsste es jetzt so gehen

Code Auswählen Erweitern


<div data-type="switch" data-device="ftuitest"
     data-states='["off","on","finish"]'
     data-set-states='["","","off"]'
     data-icons='["mi mi-local_laundry_service","mi mi-local_laundry_service fa-spin","mi mi-local_laundry_service"]'
     data-colors='["#505050","red","green"]'
     data-background-icon=""
     class="bigger compressed"
     ></div>


[Gunther]

Klappt super! Du bist super! Danke!

2 Fragen dazu:
1.)Warum steht bei den Icons

Code Auswählen Erweitern

mi mi-local_laundry_service statt

Code Auswählen Erweitern

mi-local_laundry_service

2.) Wie bekomme ich das Icon zentriert? (siehe Anhang)

Mein Code:

Code Auswählen Erweitern

<header>Wäsche</header>
<div data-type="switch" data-device="kg_wr_waschmaschine_Betrieb"
      data-states='["aus","an","fertig"]'
      data-set-states='["fertig","","aus"]'
      data-icons='["mi mi-local_laundry_service","mi mi-local_laundry_service blink","mi mi-local_laundry_service fa-spin"]'
      data-colors='["#505050","red","green"]'
      data-background-icon=""
      class="bigger right-space"
     ></div>

[setstate]

Zu 1.) bei mi- Icons überschneiden sich manche Codes mit Icons aus dem fa- Set. Dadurch könnte das falsche Icon angezeigt werden, weil "fa" per Default schon immer hinzugefügt wird. Ob es bei diesem Icon explizit gebraucht wird, müsste man testen.

Zu 2.) hast du "right-space" als Versuch wegen der Verschiebung hinzugefügt, oder ist das die Ursache der Verschiebung? Hast du mal "compress" hinzugefügt? Damit wird der Rand ums Icon kleiner.

[Gunther]

Habe das icon etwas kleiner gemacht. Dann geht es. Compress teste ich mal aus.

d.h. wenn ich ein "mi" zuätzlich davorstelle, bin ich auf der sicheren Seite?

Danke Dir für die Hilfe!