Moin!
Tue mich mit der Beschreibung ja schon schwer ;)
Also, ich habe eine Spülmaschine, die wird von einem Energie Meter überwacht. Die Daten kommen per MQTT Reading.
In der Tablet UI habe ich nun folgenden Eintrag:
<tr><td><div class="big inline left">Spuelmaschine</div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["5","spuelt","0","fertig"]' class="big right"></div></td></tr>
Ist der Wert nun = 0, schreibt FTUI "fertig" ist der Wert höher 5, schreibt Tablet UI "spuelt".
Soweit, so schlecht. Weil der Standby Wert der Spülmaschine natürlich nicht immer = 0 ist.
Ich hätte ganz gern, dass bei unter 5 Watt, in grüner Schrift, das Wort fertig anstelle des Readings ausgegeben wird. Also auch bei den werten 0,1,2,3,4.
Wenn das Reading über 5 Watt ist, soll in roter Schrift "spuelt" ausgegeben werden.
Weiß nicht, ob da data-substitution der richtige Ansatz ist?
Wäre für jegliche Hilfe dankbar!
Falls noch ungelesen, könnte https://wiki.fhem.de/wiki/FTUI_Widget_Label (https://wiki.fhem.de/wiki/FTUI_Widget_Label) helfen.
Die farbige Darstellung von rein numerischen Werten sollte dann klar sein.
Will man stattdessen numerische Wertebereiche in Text übersetzen und diesen dann farbig darstellen, muss/sollte man auf reguläre Ausdrücke in data-substitution zurückgreifen. In data-limits/data-colors ordnet man "fertig" bzw. "spuelt" anschließend noch eine Farbe zu.
Zitat von: OdfFhem am 23 Dezember 2022, 07:09:55
Will man stattdessen numerische Wertebereiche in Text übersetzen und diesen dann farbig darstellen, muss/sollte man auf reguläre Ausdrücke in data-substitution zurückgreifen. In data-limits/data-colors ordnet man "fertig" bzw. "spuelt" anschließend noch eine Farbe zu.
Moin!
Das Wiki geht leider nur sehr begrenzt auf diesen konkreten Fall ein. Bitte im Hinterkopf behalten, ich habe so gut wie keine Ahnung von html und suche mir meine Codeschnipsel irgendwo zusammen.
Könntest du mir ein bisschen unter die Arme greifen?
Ausgangssituation hatte ich ja beschrieben.
Als Noob verstehe ich manchmal auch nicht, warum es nicht "einfach" möglich ist, logische, mathematische Dinge einzufügen.
<=5 oder >5 wäre da Träumchen.
Also, es soll halt unter einer bestimmten Wattzahle, sagen wir 5 Watt das Wort "fertig" in grün ausgegeben werden
Bei einer Wattzahl von über 5 Watt soll in rot "spuele" ausgegeben werden.
Ich finde dazu auch nichts hier im Forum (weil, nach was soll ich suchen?)
Wäre da für Unterstützung sehr dankbar!
Eine mögliche Lösung könnte folgendermaßen aussehen:
<div class="big inline left">Spülmaschine</div>
<div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power"
data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]'
data-limits-part="(\d*).*"
data-limits='[0,5]'
data-colors='["green","red"]'
class="big right"></div>
- Wert 0 bis 4,99... wird in "fertig" übersetzt und gemäß der Vorkommastelle eingefärbt
- Wert ab 5 wird in "spuelt" übersetzt und gemäß der Vorkommastelle eingefärbt
- Dezimaltrenner kann jeweils "." oder "," sein
- Gäbe es keine Dezimalstellen, könnte man das HTML-Tag verkürzen
s. Screenshot (oben nur Textausgabe / unten zusätzlich mit Wertangabe)
Zitat von: OdfFhem am 24 Dezember 2022, 05:01:48
Eine mögliche Lösung könnte folgendermaßen aussehen:
Vielen, lieben Dank!
Funktioniert super :)
Wäre es möglich, hinter den Namen, hier "Spuelmaschine" den aktuellen Wert in Watt in Klammern darzustellen?
Da ich das Ganze auf einem Tablet visualisiere müssten die Werte in einer Reihe sein.
Also alles wie gehabt, nur halt den aktuellen Watt Wert hinter dem Gerätenamen in Klammern :)
Man könnte z.B. das "normale" div-Tag
<div class="big inline left">Spülmaschine</div>
ersetzen durch folgendes label-Widget
<div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spülmaschine (" data-post-text=" W)" class="big inline left"></div>
s. Screenshot (beide label-Widgets verwenden die Klasse "inline" ; ohne zusätzliche Verwendung der Klassen "left" bzw. "right")
Funktioniert super und so lerne auch ich Noob mal die Zusammenhänge zu verstehen :)
Vielen Dank und schöne Feiertage! :)
Zitat von: OdfFhem am 24 Dezember 2022, 05:01:48
Eine mögliche Lösung könnte folgendermaßen aussehen:
Darf ich dich nochmal nerven?
Das mit dem farbigen Text in Verbindung mit einem Reading "Zahl" habe ich nun glaube ich verstanden.
Wie ist das aber, wenn das Reading ein Text ist? Ich würde gern, in einer Zeile, den Termin für die nächste Mülltonne anzeigen.
Das geht soweit ganz gut: (wobei bei der jetzigen Version komischerweise das Datum "verschluckt" wird, allerdings werde ich das wohl rauslassen (müssen), sonst ist der Text zu lang für das Tablet)
<tr><td><div class="big inline left" data-type="label" data-device="myABFALL" data-get="next_text"></div></td><td><div data-get="next_weekday" class="big inline right" data-type="label" data-device="myABFALL" data-get="next_date"></div></td></tr>Jetzt wäre es wirklich Super, wenn das Reading von data-get="next_text" in der entsprechenden Farbe der Tonne dargestellt werden würde...
"next_text" hat folgende Ausgaben:
Blaue Altpapiertonne
Gelbe Tonne
Grüne Biotonne
Graue Restmülltonne
Dachte auch schon daran, dort ein Widget in der entsprechenden Farbe zu nehmen, nur würde das auf dem Tablet wohl zu klein werden, also lieber der Text in der entsprechenden Tonnenfarbe...
Wenn ich jetzt noch wüsste, wie man die verschiedenen Readings von "next_text" den demensprechenden Farben zuordnet.....
Du scheinst ja wirklich HTML zu inhalieren, könntest du mir dabei bitte auch nochmal helfen? *liebguck
Zitat von: B.Stromberg am 26 Dezember 2022, 02:57:52
*liebguck
Da kann man ja kaum anders ;)
Zitat von: B.Stromberg am 26 Dezember 2022, 02:57:52
wobei bei der jetzigen Version komischerweise das Datum "verschluckt" wird
data-get wird beim entsprechenden label-Widget zweimal übergeben und das erste data-get gewinnt ...
Zitat von: B.Stromberg am 26 Dezember 2022, 02:57:52
Wie ist das aber, wenn das Reading ein Text ist?
data-limits kann nicht nur mit Zahlenbereichen umgehen, sondern auch mit regulären Ausdrücken:
<div data-type="label" data-device="myABFALL" data-get="next_text"
data-limits='["Gr.ne .*","Gelbe .*","Blaue .*","Graue .*"]'
data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]'
class="big inline left"></div>
Will man z.B. auch den Wochentag in passender Farbe gemäß "next_text" ausgeben:
<div data-type="label" data-device="myABFALL" data-get="next_weekday"
data-limits-get="next_text"
data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]'
data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]'
class="big inline right"></div>
Zitat von: OdfFhem am 26 Dezember 2022, 07:25:49
Da kann man ja kaum anders ;)
Vielen lieben Dank noch einmal, dass du dich meinen Problem(en) annimmst.
Hier scheint allerdings etwas in die Hose gegangen zu sein. Leider kann ich da mit meinen geringen Kenntnissen auch nicht selbst auf den Fehler kommen, für mich sieht das alles gut aus!
Deshalb hier mal die Readings vom Device:
Internals:
DEF Abfallkalender
FUUID 5fc86cf0-f33f-4afb-8b55-3a74df3d0961e1a8
KALENDER Abfallkalender
NAME myABFALL
NOTIFYDEV Abfallkalender
NR 303
NTFY_ORDER 50-myABFALL
STATE Graue Restmülltonne in 3 Tag(en)
TYPE ABFALL
eventCount 62
OLDREADINGS:
READINGS:
2022-12-27 03:31:49 GraueRestmuelltonne_date 30.12.2022
2022-12-27 03:31:49 GraueRestmuelltonne_days 3
2022-12-27 03:31:49 GraueRestmuelltonne_description feiertagsbedingte verschiebung des Abfuhrtages| Abfuhrtag Graue
2022-12-27 03:31:49 GraueRestmuelltonne_location xyz
2022-12-27 03:31:49 GraueRestmuelltonne_text Graue Restmülltonne
2022-12-27 03:31:49 GraueRestmuelltonne_uid AAAAAGxFWlR2SBRFuo1EN30uc1LEnioA
2022-12-27 03:31:49 GraueRestmuelltonne_weekday Freitag
2022-12-27 03:31:49 ftui_datum 30.12.2022
2022-12-27 03:31:49 ftui_next GraueRestmuelltonne_3
2022-12-27 03:31:49 next GraueRestmuelltonne_3
2022-12-27 03:31:49 next_date 30.12.2022
2022-12-27 03:31:49 next_days 3
2022-12-27 03:31:49 next_description feiertagsbedingte verschiebung des Abfuhrtages| Abfuhrtag Graue
2022-12-27 03:31:49 next_location xyz
2022-12-27 03:31:49 next_text Graue Restmülltonne
2022-12-27 03:31:49 next_weekday Freitag
2022-12-27 03:31:49 state 3
Attributes:
calendarname_praefix 0
date_style date
delimiter_reading |
delimiter_text_reading und
room Muellkalender
stateFormat next_text in next_days Tag(en)
userReadings ftui_datum {ReadingsVal("myABFALL","now_text","") eq "" ? datumHeuteMorgen(ReadingsVal("myABFALL","next_date","")) : "heute";},ftui_next {ReadingsVal("myABFALL","now_text","") eq "" ? ReadingsVal("myABFALL","next","") : ReadingsVal("myABFALL","now","")."_0";}
weekday_mapping Sonntag Montag Dienstag Mittwoch Donnerstag Freitag SamstagAlso demnach müsste das alles richtig sein, oder?
Aussehen tut es nun aber so:
Kannst du dir da einen Reim draus machen, warum dort Daten "verschluckt" werden?
Es kommt unten nur der Wochentag in Grau (Graue Tonne ist Freitag dran).
Kannst Du noch die "zuständigen" HTML-Tags bereitstellen, ansonsten wäre die Glaskugel gefragt ...
Zitat von: OdfFhem am 27 Dezember 2022, 07:42:33
Kannst Du noch die "zuständigen" HTML-Tags bereitstellen....
Oh sorry, dachte das "List" vom Device würde reichen.
Hier mal die komplette html:
<html>
<title>FHEM</title>
<body>
<div class="page" id="1_sonstiges">
<div class="gridster">
<ul>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div class="bigger inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="bigger right"></div></td></tr>
<tr><td><div class="big inline left">Sonnenenergie</div></td><td><div data-type="label" data-device="Tripower10" data-get="state" data-unit="W" class="big right"></div></td></tr>
<tr><td><div class="bigger inline left yellow">Waermepumpe</div></td><td><div data-type="label" data-color="yellow" data-device="PulsStrom" data-get="StromAktuell" data-unit="W" class="bigger right" data-fix="0"></div></td></tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","red"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","red"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","red"]' class="big right"></div></td></tr>
<tr><td><div class="big inline left">Ertrag</div></td><td><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit="kW/h" class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td></tr>
</ul>
</div>
</div>
</body>
</html>
Problem ist, dass Du in der Abfall-Zeile nur eine Spalte füllst - soll vermutlich die 2.Spalte darstellen:
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
- der Wochentag (data-get="next_weekday") wird erwartungsgemäß dargestellt
- der Text (data-limits-get="next_text") wird nicht dargestellt, sondern nur für die Einfärbung herangezogen
Angelehnt an die anderen Zeilen müsstest Du noch eine zusätzliche Spalte füllen - vermutlich als 1.Spalte. Insgesamt könnte die Abfall-Zeile dann so aussehen (ungetestet):
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
- Spalte #1 stellt den Text (data-get="next_text") dar
- Spalte #2 stellt den Wochentag (data-get="next_weekday") dar
...ich glaube, ich werde langsam wirklich zu alt für sowas!
Erneut herzlichen Dank! SO funktioniert es nun wie gewünscht!
Wünsche dir einen guten Rutsch :)
Kleine Korrektur, falls jemand mal auf diesen Thread stößt und das Gleiche machen will und sich wundert, warum die Grüne Tonne in Blau dargestellt wird:
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
html. und "ü" mögen sich nicht... "ü" einfach durch "ü" ersetzen und dann klappt es :)
Zitat von: OdfFhem am 24 Dezember 2022, 05:01:48
Eine mögliche Lösung könnte folgendermaßen aussehen:
- Wert 0 bis 4,99... wird in "fertig" übersetzt und gemäß der Vorkommastelle eingefärbt
- Wert ab 5 wird in "spuelt" übersetzt und gemäß der Vorkommastelle eingefärbt
Moin!
Konnte nun ein wenig testen, allerdings macht mir dir Spülmaschine "Sorgen".
Du schreibst, dass von 0 bis 4,99 "fertig" ausgegeben wird.
Das funktioniert aber mit dem Code
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>leider nicht.
Ich kann ja in Klammern sehen, wieviel Watt anliegen. Zum Schluss trocknet die Spülmaschine mit einem Gebläse. Dann sind nur noch die LEDs an und das Display, die Anzeige steht auf 3 Watt, aber es wird weiterhin "spuelt" angezeigt.
Weißt du, wo der Fehler sein könnte?
Zitat von: B.Stromberg am 31 Dezember 2022, 15:03:43
Weißt du, wo der Fehler sein könnte?
Ich habe Deinen HTML-Code genutzt - lediglich data-device und data-get angepasst.
Dann mit einigen Werten getestet (0 ; 1,5 ; 1.5 ; 3 ; 4.99 ; 5 ; 5,01 ; 6.789) und es verhält sich wie erwartet !?!
Kannst Du mal den genauen/kompletten Wert des Readings mitteilen?
"spuelt" kann eigentlich nur zuschlagen, wenn der erste reguläre Ausdruck nicht zum Wert passt.
Kommando zurück...
Da muss irgendwas beim Speichern der html in die Hose gegangen sein....
Funktioniert nun :)
Trotzdem vielen Dank das du mir wieder helfen wolltest :)
Wünsche dir einen guten Rutsch und später ein hoffentlich frohes 2023 :)