FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: en-trust am 31 März 2017, 19:28:42

Titel: valueStyles in Ftui übernehmen
Beitrag von: en-trust am 31 März 2017, 19:28:42
Ich habe mir jetzt auch nen Abfahrtsmonitor gebastelt. Dieser wird auch in fhem mit dem Code entsprechend angezeigt.
Ich habe zudem noch einen Style für Verspätung mir eingebaut...

...
attr Abfahrtsmonitor valueStyle { if($DEVICE =~ "HBF_*" && $READING =~ "departure_delay_?" && $VALUE == "+0" ) { 'style="color:green"' }elsif ( $DEVICE =~ "HBF_*" && $READING =~ "departure_delay_?" && $VALUE != "+0") { 'style="color:red"'} }


wie bekomme ich diesen valueStyle aber nun in html implementiert, so dass ich bei Verspätungen die Farbe ändere bzw. ich bestimmte Texte, die über das Reading kommen (Aktuelle Alternative) in einen kürzeren Text umwandeln kann ?
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 14 Juni 2017, 07:22:11
Keiner eine Idee ?
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: setstate am 14 Juni 2017, 07:41:05
valueStyle ist eine Funktion des FHEM Web Frontends
Wenn du FTUI als Frontend benutzt, muss du dessen Funktionalität zur Styleänderung benutzen.

https://wiki.fhem.de/wiki/FTUI_Widget_Label


<div data-type="label"
     data-device="dummy1"
     data-states='["Wert1*","Wert2*","Wert3*"]'
     data-colors='["blue","green","red"]'>
</div>
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 14 Juni 2017, 13:11:53
Mit ...


<div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_delay_1" data-limits='[0,4]' data-colors='["#FFFFFF","#FF0000"]' class="normal"></div>


klappt das schon mal. Allerdings möchte ich das eher differenzieren. Sprich 0-5 minuten soll gelb, 6 - 10 Orange und 11 - open end Rot angezeigt werden. Gibt es die Möglichkeit Spannen anzugeben ? Hab dazu nicht gefunden.
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: Ulm32b am 14 Juni 2017, 22:43:50
Im bereits zitierten Link https://wiki.fhem.de/wiki/FTUI_Widget_Label (https://wiki.fhem.de/wiki/FTUI_Widget_Label) findet sich ein Beispiel mit drei Farben und entsprechenden Grenzen. ;)
Sinngemäß kann man das auch noch weiter ausbauen.
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 15 Juni 2017, 14:37:21
Vermutlich meinst Du das...


<div data-type="label"
     data-device="dDummy"
     data-limits='[18,20,23]'
     data-colors='["blue","green","#FF0000"]'
     data-unit="&deg;C"></div>


Ist aber nicht das was ich möchte. Versucht habe ich schon data-limits='[0-5,6-10,11-15]' klappt aber nicht.
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: setstate am 15 Juni 2017, 15:07:16
Die Limits sind immer die Untergrenzen.

Ab 18 -> Blue
Ab 20 -> Green
Ab 24 -> red
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 15 Juni 2017, 16:44:11
Mit anderen Worten wäre das in meinem Fall 0-5,6-10,11-15,...

data-limits='[0,6,11,16]'  data-colors='["#FFFFFF","blue","green","#FF0000"]'
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 15 Juni 2017, 20:24:47
Leider bleibt die Anzeige weiß und none zeigt er mir rot obwohl er daraus weiß machen sollte.


              <tr>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_1" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_arrival_1" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_travel_duration_1" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_delay_1" data-limits='[none,0,6,11,15]' data-colors='["#ffffff","#dd3366","#ffcc00","#55aa44","#ff0000"]' class="normal">
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_connection_1" class="normal">                                                         
                  </div>                </td>                                         
              </tr>                                         
              <tr>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_2" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_arrival_2" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_travel_duration_2" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_delay_2" data-limits='[none,0,6,11,15]' data-colors='["#ffffff","#dd3366","#ffcc00","#55aa44","#ff0000"]' class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_connection_2" class="normal">                                                         
                  </div>                </td>                                         
              </tr>                                         
              <tr>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_3" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_arrival_3" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_travel_duration_3" class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_departure_delay_3" data-limits='[none,0,6,11,15]' data-colors='["#ffffff","#dd3366","#ffcc00","#55aa44","#ff0000"]' class="normal">                                                         
                  </div>                </td>                <td>                                                         
                  <div data-type="label" data-device="HBF_Oberhausen_Duesseldorf" data-get="plan_connection_3" class="normal">                                                         
                  </div>                </td>                                         
              </tr>



Die Zahlen werden jedoch im Web als +5 beispielsweise angezeigt. Sprich im reading steht...

plan_departure_delay_1  +5
plan_departure_delay_2  +25
plan_departure_delay_3  +5
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: setstate am 16 Juni 2017, 09:18:30
Nur bei 100% numerischen Werten wird der größer-gleich Vergleich gemacht. Ansonsten passiert ein Stringvergleich (Full Match oder Regex).
Ein Beispiel liefere ich noch nach

so, hier das Beispiel zu deinen Werten oben als RegEx Vergleich


<div data-type="label"
     data-device="ftuitest"
     data-states='["none","\\+[0-5]","\\+([6-9]|[1]?[0-1])","\\+[1][2-4]","\\+([1][5-9]|[2-9][0-9])"]'
     data-colors='["white","green","green","red","yellow"]'>
</div>


jeweils mit der Annahme, dass das "+" immer im String mit vorkommt. Wenn nicht, dann das "\\+" weglassen
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 22 Juni 2017, 09:56:54
Danke setstate. Hat geklappt. Jetzt muss ich nur noch verstehen was ["none","\\+[0-5]","\\+([6-9]|[1]?[0-1])","\\+[1][2-4]","\\+([1][5-9]|[2-9][0-9])"] im Einzelnen bedeutet.
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: setstate am 22 Juni 2017, 11:59:34
Ist doch ganz einfach  ;D

\\+  ist das Pluszeichen, was du erwartest. Hier mit einem \ maskiert, weil das + bei RegEx ein besondere Bedeutung hat.  Mit \ wird das + als normales + interpretiert. Zusätzlich noch ein weiteres \, weil das JavaScript so braucht. 

Und dann kommen schon die Zahlen.  [ ] bedeutet, ein Zeichen, aber aus einer bestimmten Liste oder Bereich. [0-9] bedeutet das Zeichen an dieser Stelle darf von 0 bis 9 gehen.
Ich sehe gerade [1] macht keinen Sinn, man kann einfach nur 1 schreiben, weil es ja eh keine Liste ist.

( | ) sind ODER Varianten

(1[5-9]|[2-9][0-9]) bedeutet 15-19 oder 20-99

(
1. Ziffer  1
2. Ziffer 5-9
| oder
1. Ziffer 2-9
2. Ziffer 0-9
)

6 bis 11 müsste auch so funktionieren
([6-9]|1[01])
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 01 August 2017, 09:58:07
Mit dem [0-9] klappt es jetzt.

<li><div data-type="symbol" data-device="SZ.Jalousie.Links" data-get="statePosition" data-states='["up","down","MISSING.*","closed","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]' data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]' data-colors='["yellow","yellow","#AA2200","#33DD22","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]' data-background-colors='["green","#0088CC"]' class="">

Steht allerding im state eine 88.5 dann greift die Abfrage auf "8[0-9]" nicht und es wird auch kein Symbol angezeigt. Wie fragt man nun auf Nachkommastellen noch ab bzw. bindet diese mit ein ?
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: en-trust am 24 August 2017, 08:27:06
Keiner eine Idee ?
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: ToM_ToM am 24 August 2017, 10:09:05
Kommastellen müsstest du dann in deinem Regex so aufbauen

Auch hier dient der Backslash wieder als Maskierung für den Punkt.
Regex für 88.5:
[0-9]+\.[0-9]

Das + Zeichen sagt hier, dass die Zahl 0-9 mindestens einmal auftreten muss, aber beliebig oft auftreten kann. Sofern du mehr als eine Nachkommastelle hast, wäre der Regex so:

Regex für 88.539:
[0-9]+\.[0-9]+

VG, Thomas
Titel: Antw:valueStyles in Ftui übernehmen
Beitrag von: setstate am 24 August 2017, 10:38:41
Wenn aber 88 und 88.5 passen soll, muss es so sein

8[0-9]+\.*[0-9]*

Also der Punkt und die Nachkommazahlen optional.