Warn-Icon für DWD Opendata Modul

yersinia · 12 März 2019, 11:26:17

Guter Tipp. Danke.

Allerdings bleibt der Swiper bestehen auch wenn keine Meldungen da sind, zeigt dann aber nichts an.
Das gefällt mir irgendwie nicht. Auch weil es fix 3 alerts sind.
Ich finde da eher die Adaption des UWZ widgets in der Version von Bruchbude/der Bernhard besser.

tomster · 13 März 2019, 15:21:32

Stimmt. Das Problem, dass dann "leere" Swiper-li's durchscrollen ist nicht sonderlich schön.
Der einzige Workaround der mir einfällt, wäre verschiedene Swiper-Widgets zu platzieren, die je nach Alert-Count ein-/ausgeblendet werden. Ich mach's bei mir zwar mit Rotor-Widgets und "fade", aber so in der Art könnte es mit Swipern ausschauen:

Code Auswählen


...
<div data-type="html" data-class="DWD:a_count" data-map-class='{"2":"show", "[0,1,3,4,5]":"hide"}'>
<div data-type="swiper" data-autoplay="5000" class="nopagination">
<ul>
<li><div data-template="template_alerts_DWD.html" data-parameter='{"var_device":"DWD","var_alert":"a_0"}'></div></li>
<li><div data-template="template_alerts_DWD.html" data-parameter='{"var_device":"DWD","var_alert":"a_1"}'></div></li>
</ul>
</div></div>
<div data-type="html" data-class="DWD:a_count" data-map-class='{"3":"show", "[0,1,2,4,5]":"hide"}'>
<div data-type="swiper" data-autoplay="5000" class="nopagination">
<ul>
<li><div data-template="template_alerts_DWD.html" data-parameter='{"var_device":"DWD","var_alert":"a_0"}'></div></li>
<li><div data-template="template_alerts_DWD.html" data-parameter='{"var_device":"DWD","var_alert":"a_1"}'></div></li>
<li><div data-template="template_alerts_DWD.html" data-parameter='{"var_device":"DWD","var_alert":"a_2"}'></div></li>
</ul>
</div></div>
... usw.

Ist zwar doppelt/dreichfach/vierfach gemoppelt, aber eine andere "rein FTUI'ge" Lösung fällt mir grade nicht ein.

yersinia · 13 März 2019, 17:50:49

Das stimmt, danke für die Idee tomster.

Ich hab mir die uwz widget Version von Bruchbude/der Bernhard genommen und daraus ein eigenes widget dwdwarn adaptiert. Analog zum uwz widget wird der swiper dynamisch anhand von a_count gebildet. Ich habe dabei auch das Grundkonzept von sinus61 übernommen. Grundsätzlich funktioniert es soweit ich es bei mir testen konnte.

CSS code für die ftui_custom.css welche nach /opt/fhem/www/tablet/css kommt sofern nicht schon vorhanden

Code Auswählen

/* neue Version im nächsten Post */
Diese CSS Datei muss auch eingebunden werden, sofern nicht schon geschehen:

Code Auswählen

<link rel="stylesheet" href="css/ftui_custom.css" type="text/css" />
(Im <head> Bereich der index.html von FTUI)

MWn sollte die swiper CSS auch vorhanden sein:

Code Auswählen

<link rel="stylesheet" href="lib/swiper.min.css" type="text/css" />

Die widget_dwdwarn.js kommt nach /opt/fhem/www/tablet/js

Code Auswählen

// neue Version im nächsten Post

Aufruf des Widgets zum Beispiel (zeigt die Werte wie im Screenshot an):

Code Auswählen

<div data-type="dwdwarn"
    data-device="Wetter_DWD"
    data-detail='["eventDesc", "description", "swiper", "pagination", "nowarninfo", "updatetime"]'
    data-nowarnclass="cell top-space darker"
    data-max="5"
    autoplay="5000"
    class=""
    style="width:630px;">
</div>

Mit der Option data-detail kann man

zwischen a_?_eventDesc (=> eventDesc) oder a_?_headline (=> headline) als Überschrift wechseln
mittels description den Text aus a_?_description als Gefahrentext anzeigen lassen
mittels instruction den Text aus a_?_instruction als Gefahrentext anzeigen lassen
mittels swiper den swiper aktivieren (ohne Swiper sieht es noch sehr hässlich aus -.-)
mittels pagination kann man die Swiper-Pagination aktivieren (die Pagination ist bei nur einer Warnung automatisch ausgeblendet)
mittels nowarninfo wird die "Aktuell keine Warnmeldungen." Nachricht angezeigt, wenn es keine Warnungen gibt
mittels colormap wird das Widget-interne color mapping basierend auf dem Wert aus dem a_?_severity reading durchgeführt. Wenn nicht gesetzt, wird die Farbe aus dem DWD Device Reading a_?_areaColor übernommen. (Vorher: Die Farbe wird für die Dreiecke anhand der a_?_severity selektiert, die Background-Farbe der Box rechts aus a_?_areaColor und die Icons anhand des Mappings von sinus61 durchgeführt.)
mittels updatetime wird der Zeitpunkt des letzten Updates angezeigt (Reading a_time)

autoplay ist im Widget mit 8000 (=8 Sek.) vorbelegt, kann aber über das Attribut autoplay individualisiert werden (siehe Beispiel oben).
Die Breite des Widgets kann über style="width: ###px; definiert werden.

Mit der optionalen data-nowarnclass können die CSS Klassen für die Keine-Warnung-Meldung vorbelegt werden. Standard ist cell top-space (wenn data-nowarnclass nicht vorbelegt wird (wie gehabt).

Es ist noch nicht ganz hübsch, aber es funktioniert soweit erstmal. Zumindest für mich.

~~Wenn ich noch zeit und Lust habe, versuche ich mal herauszufinden, wie man die zwei Dreiecke und das Icon schön zentriert bekommt.~~ Müsste gefixt sein.

Für aktive Verbesserungen im Code wäre ich Dankbar.
Danke auch an Bruchbude, der Bernhard und sinus61 für die guten Ideen.

Allerdings funktioniert UWZ wieder...wozu also wechseln...

yersinia · 15 März 2019, 16:57:50

Ich hab nochwas rumgebastelt am CSS und es sieht etwas besser aus. Möglicherweise ist die Mischung der Iconsets (weathericons, fontawesome) nicht klug.

Wer optimieren möchte, gerne, feel free!

EDIT/UPDATE 2019-03-26: Pagination entfernt wenn Swiper aber nur eine Warnung enthalten; Attribut nowarninfo hinzugefügt
EDIT/UPDATE 2019-06-26: Code-Verbesserungen; Optimierung der Icon-Positionierung; die Farben werden besser vom DWD Modul übernommen wenn colormap nicht gesetzt ist (insb. erhalten die Warndreiecke die gleiche Farbe wie die Warnmeldungen aus dem DWD Device); Update Uhrzeit kann nun optional angezeigt werden; 2do: Textlänge begrenzen wenn zuviel Text
EDIT/UPDATE 2019-07-22: Code-Verbesserungen; Textlänge begrenzt; fixe Höhe für Textbox
EDIT/UPDATE 2019-07-29: Code-Verbesserungen (insb wird die colormap nicht über ein Array definiert - optimiert den Fallback-Fall); CSS-Klassen-Vorbelegung für die nowarninfo (data-nowarnclass, siehe vorigen Post) eingebaut; Update-Time wird auch für die nowarninfo angezeigt (vorausgesetzt updatetime ist gesetzt; siehe Screenshot)
EDIT/UPDATE 2020-08-10: Mapping für event 248 hinzugefügt
EDIT/UPDATE 2021-01-11: Mapping für events 11 bis 16 gefixt
EDIT/UPDATE 2021-01-25: Hinweis: für FTUI3 gibt es eine eigene Version

Nitaro · 23 November 2020, 10:59:35

Guten Morgen zusammen,

ich habe das ganze bei mir mal so eingerichtet wie oben beschrieben.
Ich würde aber gerne die größe Anpassen, damit ich zb. 3 Warndreiecke nebeneinander bekomme
(manchmal liegen ja parallel mehrere Warnungen vor). Meine Versuche endeten darin,
dass die Dreiecke an sich dann zu groß sind und das Warnsymbol zu klein.

Meine Idee wäre nun, die Dreiecke wegzulassen und an der STelle dann das jeweilige
Warnsymbol in die entsprechende Warnfarbe einzufärben. Und genau da ist wohl das Problem.
Wenn ich das Warnsymbol wie oben über einbinde:

Code Auswählen

div data-type="symbol" data-device="DWD_Wetter" data-get="a_0_event"
    data-states='["1[12]","13","22","24","3[13468]","4[123456789]","51","52","53","5[4567]","58","59","6[12]","6[3456]","7[123]","7[45678]","79","8[12]","8[34567]","8[89]","9[56]","9[89]","246","247"]'
    data-icons='["wi wi-strong-wind","wi wi-storm-warning","fa-snowflake","fa-car-crash","wi wi-storm-showers","wi wi-thunderstorm","wi wi-strong-wind","wi wi-storm-warning","wi wi-hurricane-warning","wi wi-hurricane","wi wi-storm-warning","wi wi-fog","wi wi-showers","wi wi-rain","wi wi-snow","wi wi-snow-wind","wi wi-alien","fa-snowflake","fa-car-crash","wi wi-raindrops","wi wi-thunderstorm","wi wi-na","wi wi-hot","wi wi-thermometer"]'
	style="left: 32px; top: 45px"
    class="ontop compressed bigger gray autohide">
</div>

wüsste ich jetzt nicht, wie ich da noch das Reading für die Farbe einbinden könnte.
Für eine Perl Function über my_utils fehlt es mir an entsprechendem Wissen.

Hat da jemand eine Idee zu ?

yersinia · 23 November 2020, 12:25:14

Entweder du ordnest jedem state eine Farbe zu (data-colors='["farbe1","#ABCDEF","..."]') oder du versuchst ein Reading für jeden state anzugeben (data-colors='["DWD_Wetter:a_0_areaColor","DWD_Wetter:a_0_areaColor","usw"]').
Allerdings liegen die Farbwerte in decimal-rgb (nnn,nnn,nnn) vor und müssten noch in HEX (#xxxxxx) umgewandelt werden (oder es reicht auch nur ein rgb( ) drumherum zu bauen). Das könnte man evtl mit einem userReading abfangen. Hier für bis zu drei Warnungen, geht sicher auch eleganter (ungetestet):

Code Auswählen

attr DWD_Wetter userReadings a_0_areaColor_ur { my $ret = "none";;\
	if(ReadingsNum($name,"a_count",0) > 0) {\
		$ret = "rgb(".ReadingsVal($name,"a_0_areaColor","NaN").")";;\
	}\
	return $ret;;\
},\
a_1_areaColor_ur { my $ret = "none";;\
	if(ReadingsNum($name,"a_count",0) > 1) {\
		$ret = "rgb(".ReadingsVal($name,"a_1_areaColor","NaN").")";;\
	}\
	return $ret;;\
},\
a_2_areaColor_ur { my $ret = "none";;\
	if(ReadingsNum($name,"a_count",0) > 2) {\
		$ret = "rgb(".ReadingsVal($name,"a_2_areaColor","NaN").")";;\
	}\
	return $ret;;\
}

Wenn das nicht reicht, muss man ggf Color einbinden um von rgb->hex umzuwandeln.

Einzubinden in FTUI über (auch ungetestet):

Code Auswählen

data-colors='["DWD_Wetter:a_0_areaColor_ur","DWD_Wetter:a_0_areaColor_ur","usw"]'
[...]
data-colors='["DWD_Wetter:a_1_areaColor_ur","DWD_Wetter:a_1_areaColor_ur","usw"]'
[...]
data-colors='["DWD_Wetter:a_2_areaColor_ur","DWD_Wetter:a_2_areaColor_ur","usw"]'

Allerdings finde ich dein Vohaben, so wie ich es bisher verstanden habe, irgendwie zu statisch. Wie fängst du die Anzahl der Warnungen ab?

Nitaro · 23 November 2020, 12:58:16

Zitat von: yersinia am 23 November 2020, 12:25:14
Allerdings finde ich dein Vohaben, so wie ich es bisher verstanden habe, irgendwie zu statisch. Wie fängst du die Anzahl der Warnungen ab?

Danke dir, das klingt schonmal gut.
Ja, das ist ziemlich statisch. Ich habe in meinem jetzigen Tablet Ui stumpf 3 WarnIcons nebeneinander

Code Auswählen

<div class="newline">
<div class="inline2 autohide" data-type="image" data-device="UWZ" data-get="Warn_0_IconURL" data-size="90px"></div>
<div class="inline2 autohide" data-type="image" data-device="UWZ" data-get="Warn_1_IconURL" data-size="90px"></div>
<div class="inline2 autohide" data-type="image" data-device="UWZ" data-get="Warn_2_IconURL" data-size="90px"></div>
</div>

Da die UWZ aber in der letzten Zeit anscheinend nicht mitbekommen hat, dass in meiner Region das ein oder andere Wettereignis
stattfand (DWD hingegen schon), wollte ich jetzt umstellen.

Nitaro · 24 November 2020, 14:07:19

@yersinia

Wo ist denn deine aktuelle Version zu finden ?

yersinia · 24 November 2020, 14:19:48

Meinst du den Anhang von #18?
Wie es einzubinden ist, steht in #17.

Nitaro · 24 November 2020, 14:46:39

Zitat von: yersinia am 24 November 2020, 14:19:48
Meinst du den Anhang von #18?
Wie es einzubinden ist, steht in #17.

Ja, danke, das meinte ich...
War nicht eingelogged als ich gesucht hatte, dann wurde es nicht angezeigt.

yersinia · 11 Januar 2021, 11:26:02

Im post #18 habe ich in der angehängten .js das mapping für einige events korrigiert.