valueStyles in Ftui übernehmen

en-trust · 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...

Code Auswählen


...
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 ?

en-trust · 14 Juni 2017, 07:22:11

Keiner eine Idee ?

setstate · 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

Code Auswählen


<div data-type="label" 
     data-device="dummy1"
     data-states='["Wert1*","Wert2*","Wert3*"]' 
     data-colors='["blue","green","red"]'>
</div>

en-trust · 14 Juni 2017, 13:11:53

Mit ...

Code Auswählen


<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.

Ulm32b · 14 Juni 2017, 22:43:50

Im bereits zitierten Link 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.

en-trust · 15 Juni 2017, 14:37:21

Vermutlich meinst Du das...

Code Auswählen


<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.

setstate · 15 Juni 2017, 15:07:16

Die Limits sind immer die Untergrenzen.

Ab 18 -> Blue
Ab 20 -> Green
Ab 24 -> red

en-trust · 15 Juni 2017, 16:44:11

Mit anderen Worten wäre das in meinem Fall 0-5,6-10,11-15,...

Code Auswählen

data-limits='[0,6,11,16]' data-colors='["#FFFFFF","blue","green","#FF0000"]'

en-trust · 15 Juni 2017, 20:24:47

Leider bleibt die Anzeige weiß und none zeigt er mir rot obwohl er daraus weiß machen sollte.

Code Auswählen


              <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...

Code Auswählen

plan_departure_delay_1  +5	
plan_departure_delay_2  +25	
plan_departure_delay_3  +5

setstate · 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

Code Auswählen


<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

en-trust · 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.

setstate · 22 Juni 2017, 11:59:34

Ist doch ganz einfach

\\+ 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])

en-trust · 01 August 2017, 09:58:07

Mit dem [0-9] klappt es jetzt.

Code Auswählen

<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 ?

en-trust · 24 August 2017, 08:27:06

Keiner eine Idee ?

ToM_ToM · 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:

Code Auswählen

[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:

Code Auswählen

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

VG, Thomas