Warn-Icon für DWD Opendata Modul

sinus61 · 10 Februar 2019, 12:35:50

Hab gerade etwas rumexperimentiert um ein Warn-Icon für die Alerts aus dem DWD_OpenData Modul anzuzeigen, hier mal der aktuelle Stand dazu:

Es wird ein Notify benötigt um die URLs zu den Warnbildern vom DWD in Readings einzutragen (mindestens Perl 5.10 ist hier notwendig):

Code Auswählen

define DWD_Wetter_n notify DWD_Wetter.a_count:.[0-9] {}

dann dort auf DEF gehen und folgendes eintragen:

Code Auswählen


DWD_Wetter.a_count:.[0-9] { 
use experimental 'smartmatch';
my $url = "https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/viewer/img/warndreieck/";
my $event0 = ReadingsVal($NAME, "a_0_event", 0);
my $severity0 = ReadingsVal($NAME, "a_0_severity", 0);
if($EVTPART1 >= 1) {
if($event0 ~~ [11,12,13,51,52,53,54,55,56,57,58]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_sturm.png");
}
elsif($event0 ~~ [22,81,82,83,84,85,86,87]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_frost.png");
}
elsif($event0 == 59) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_nebel.png");
}
elsif($event0 ~~ [61,62,63,64,65,66]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_regen.png");
}
elsif($event0 ~~ [70,71,72,73,74,75,76,77,78]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_schnee.png");
}
elsif($event0 ~~ [31,33,34,36,38,40,41,42,44,45,46,48,49,95,96]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_gewitter.png");
}
elsif($event0 ~~ [88,89]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_tauwetter.png");
}
elsif($event0 ~~ [24,83,84,85,86,87]) {
fhem ("setreading $NAME a_0_eventIconURL $url"."warn_icons_glatteis.png");
}
if($severity0 eq "Minor") {
fhem ("setreading $NAME a_0_severityIconURL $url"."gelb.png");
}
elsif($severity0 eq "Moderate") {
fhem ("setreading $NAME a_0_severityIconURL $url"."orange.png");
}
elsif($severity0 eq "Severe") {
fhem ("setreading $NAME a_0_severityIconURL $url"."rot.png");
}
elsif($severity0 eq "Extreme") {
fhem ("setreading $NAME a_0_severityIconURL $url"."dunkelrot.png");
}
}
}

und auf der gewünschten FTUI Seite dann folgendes:

Code Auswählen


<div class="display">
<div data-type="image" data-url="warnbg.png" data-size="90%" data-hide="DWD_Wetter:a_count" data-hide-on="0" class=""></div>
<div data-type="image" data-device="DWD_Wetter" data-get="a_0_eventIconURL" data-size="90%" data-opacity="1" data-hide="DWD_Wetter:a_count" data-hide-on="0" class="ontop"></div>
<div data-type="image" data-device="DWD_Wetter" data-get="a_0_severityIconURL" data-opacity="1" data-hide="DWD_Wetter:a_count" data-hide-on="0" class="ontop bigger" style="left: 10px; top: 2px"></div>
<div data-type="symbol" data-icon="" data-background-icon="" data-warn="DWD_Wetter:a_count" data-warn-on="[2-9]" data-warn-off="[0-1]" class="ontop" style="left: 50px; top: 15px"></div>
</div>

Jetzt wird ein zur Warnung passendes Bild mit farblich passendem Rahmen für das Warndreieck angezeigt. Bei mehr als einer Warnung wird auch ein Warnsymbol mit der Zahl angezeigt. Jetzt könnte man noch ein Popup anbauen mit dem man dann Details anzeigen kann o.ä.

Damit nur innerhalb des Dreiecks der Hintergrund weiß ist im Anhang noch das warnbg.png Hintergrundbild. Bei hellen Hintergünden der FTUI Seite könnte man das auch weglassen und die Zeile oben dafür rausnehmen.

sinus61 · 16 Februar 2019, 18:20:50

Hab gerade dafür noch eine andere Lösung gebaut, hierfür wird nichts extra in FHEM benötigt und auch keine extra Grafiken. Alles wird in FTUI über die wi-icons gebaut. Übersicht der wi-icons hier: https://erikflowers.github.io/weather-icons/

Im Header muss die css Datei für die Weather Icons aktiviert werden, wenn noch nicht geschehen (die Datei wird mit FTUI ausgeliefert):

Code Auswählen

<link rel="stylesheet" href="lib/weather-icons.min.css" type="text/css" />

und dann dort wo das Warnicon erscheinen soll:

Code Auswählen


<div class="display">

<div data-type="symbol" data-device="DWD_Wetter" data-get="a_0_severity"
    data-icon=""
	data-background-icon="fa-square"
	data-off-background-color="white"	
    class="bigger autohide">
</div>

<div data-type="symbol" data-device="DWD_Wetter" data-get="a_0_severity"
    data-states='["Minor","Moderate","Severe","Extreme"]' 
    data-icon=""
	data-background-colors='["yellow","orange","red","purple"]'
	data-background-icons='["fa-square-o","fa-square-o","fa-square-o","fa-square-o"]'
	style="left: 7px; top: 1px"
    class="ontop bigger autohide">
</div>

<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: 20px"
    class="ontop compressed bigger gray autohide">
</div>

</div>

curt · 17 Februar 2019, 00:42:27

Kurze Frage:
bei a_0_event=22 (Frost/leichter Frost) wird mir etwas angezeigt, was an ein "Ü" erinnert. Das ist so gewollt?

sinus61 · 17 Februar 2019, 11:22:22

Nein. Da müsste wohl doch in Deinen Header der Seite das hier rein:

Code Auswählen


<link rel="stylesheet" href="lib/weather-icons.css" type="text/css" />

Hab ich bei mir schon lange überall drin, dachte das wäre Standard. Die css Datei wird aber mit FTUI ausgeliefert. Damit hast Du dann Zugriff auf die Icons von dieser Seite: https://erikflowers.github.io/weather-icons/

curt · 17 Februar 2019, 18:57:16

Zitat von: sinus61 am 17 Februar 2019, 11:22:22
Die css Datei wird aber mit FTUI ausgeliefert.

Also bei mir nicht:

Code Auswählen


# ls -l lib/weather-icons*
-rw-r--r-- 1 fhem dialout  26645 Sep 26 20:57 lib/weather-icons.min.css
-rw-r--r-- 1 fhem dialout 126802 Jan 23 21:32 lib/weather-icons-wind.min.css

sinus61 · 18 Februar 2019, 17:05:29

Ok, dann

Code Auswählen

<link rel="stylesheet" href="lib/weather-icons.min.css" type="text/css" />

Wird wohl nur noch die komprimierte Version mitgeliefert, inhaltlich sind die aber gleich.

curt · 19 Februar 2019, 00:05:43

Zitat von: sinus61 am 18 Februar 2019, 17:05:29
Ok, dann
Code Auswählen Erweitern
<link rel="stylesheet" href="lib/weather-icons.min.css" type="text/css" />

Danke, so eingetragen. Mangels Alarm kann ich aber noch nicht berichten.

curt · 23 Februar 2019, 02:08:40

Zitat von: curt am 19 Februar 2019, 00:05:43
Danke, so eingetragen. Mangels Alarm kann ich aber noch nicht berichten.

@sinus61
Es tut nicht.

Code Auswählen


# pwd
/opt/fhem/www/tablet

# ls -l ./lib/weather-icons.min.css
-rw-r--r-- 1 fhem dialout 26645 Sep 26 20:57 ./lib/weather-icons.min.css

In index.html steht

Code Auswählen


<link rel="stylesheet" href="./lib/weather-icons.min.css" type="text/css" />

Bei Warnung sehe ich das komische "Ü".

Hab mal bitte eine Idee.

sinus61 · 23 Februar 2019, 15:35:06

Ok, Du hast recht. Wenn man die mit FTUI ausgelieferte css Datei nutzt müssen die wi-icons anders definiert werden (warum auch immer). Dort muss man dann "wi wi-strong-wind" statt nur "wi-strong-wind" angeben. Ich hab den Code oben mal angepasst.

curt · 24 Februar 2019, 02:23:44

Danke!

Nitaro · 07 März 2019, 09:31:19

Super Arbeit, danke !
Mir ist aufgefallen, dass bei Glätte auch ein "Frost"-Zeichen hinterlegt ist. Hier wäre es besser ein Symbol für Straßenglätte zu nehmen.

Code Auswählen

83 GLÄTTE
84 GLÄTTE
85 GLATTEIS
86 GLÄTTE
87 GLÄTTE

Hitze und UV würde ich auch noch einbauen. Ich bin mir aber nicht sicher wie das geht. In der DWD Doku unter
https://www.dwd.de/DE/wetter/warnungen_aktuell/objekt_einbindung/einbindung_karten_geowebservice.pdf?__blob=publicationFile&v=11
stehen ja die Codes. Dort gibt es Warngruppen wie UV 246 und HEAT 247. Ich weiß aber nicht ob das dann auch die Event IDs im Reading sind.
Ganz so tief stecke ich da nicht drin.

sinus61 · 08 März 2019, 16:52:09

UV und Hitze hab ich mal eingebaut, mal sehen ob das im Sommer so als ID kommt. Für Glätte hab ich mal das fa-car-crash Icon genommen und für Frost das Icon fa-snowflake, da sieht irgendwie eindeutiger aus als das von den wi-icons. Alle Änderungen sind jetzt oben mit drin.

sinus61 · 09 März 2019, 15:06:23

Hab gerade nochmal eine andere Lösung gebaut:

Im Unterordner css in die Datei fhem-tablet-ui-user.css folgendes einfügen (wenn nicht vorhanden vorher eine leere Datei mit diesem Namen anlegen):

Code Auswählen


div.dreieck-yellow {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 110px solid #ffff00;
}

div.dreieck-orange {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 110px solid #ff9900;
}

div.dreieck-red {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 110px solid #ff0000;
}

div.dreieck-purple {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 110px solid #af0064;
}

div.dreieck-yellow:after,
div.dreieck-orange:after,
div.dreieck-red:after,
div.dreieck-purple:after {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid white;
  position: absolute;
  content: "";
  top: 20px;
  left: -40px;
}

Falls noch nicht vorhanden folgendes in den Header der gewünschten FTUI Seite einfügen:

Code Auswählen

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

und dann da wo das Warn Symbol hin soll:

Code Auswählen


<div class="display">
<div data-type="symbol" data-device="DWD_Wetter" data-get="a_0_severity"
    data-icon=""
	data-states='["Minor","Moderate","Severe","Extreme"]'
	data-classes='["dreieck-yellow","dreieck-orange","dreieck-red","dreieck-purple"]'
    class="autohide">
</div>

<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>
<div data-type="label" data-device="DWD_Wetter" data-get="a_0_eventDesc" class="top-narrow-1 autohide large bold"></div>
</div>

Das Ergebnis dann siehe Bild:

yersinia · 10 März 2019, 20:01:08

Cool! Vielen Dank für deine Mühe!

Hab dein Code benutzt und das ganze in einen Swiper eingefügt:

Code Auswählen

<!-- Swiper-DWD -->
                                        <div data-type="swiper"
                                                data-width="630px"
                                                data-autoplay="5000"
                                                data-tabclass="DWDswiper"
                                                class="nopagination">
                                                <ul>
                                                        <li>
                                                                <div class="hbox">
                                                                        <div data-type="symbol" data-device="Wetter_DWD" data-get="a_0_severity"
                                                                                data-icon=""
                                                                                data-states='["Minor","Moderate","Severe","Extreme"]'
                                                                                data-classes='["dreieck-yellow","dreieck-orange","dreieck-red","dreieck-purple"]'
                                                                                class="autohide">
                                                                        </div>

                                                                        <div data-type="symbol" data-device="Wetter_DWD" 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 big gray autohide">
                                                                        </div>

                                                                        <div class="vbox items-left">
                                                                                <div data-type="label" data-device="Wetter_DWD" data-get="a_0_eventDesc"
                                                                                        class="autohide left-align normal bold">
                                                                                </div>

                                                                                <div data-type="label" data-device="Wetter_DWD" data-get="a_0_description"
                                                                                        class="autohide left-align">
                                                                                </div>

                                                                                <div class="hbox items-left">
                                                                                        <div class="normal">Endet:&nbsp;</div>
                                                                                        <div data-type="label" data-device="Wetter_DWD" data-get="a_0_expires"
                                                                                                class="autohide normal left-align">
                                                                                        </div>
                                                                                </div>
                                                                        </div>

                                                                </div>
                                                           </li>
                                                           <li>
                                                                <!-- code wie oben, nur mit a_1... -->
                                                           </li>
                                                           <li>
                                                                <!-- code wie oben, nur mit a_2... -->
                                                           </li>
                                                </ul>
                                        </div>

Deine Dreiecke habe ich etwas gestaucht, ansonsten genauso übernommen.

Code Auswählen

div.dreieck-yellow {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ffff00;
}

div.dreieck-orange {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff9900;
}

div.dreieck-red {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff0000;
}

div.dreieck-purple {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #af0064;
}

div.dreieck-yellow:after,
div.dreieck-orange:after,
div.dreieck-red:after,
div.dreieck-purple:after {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid white;
  position: absolute;
  content: "";
  top: 26px;
  left: -30px;
}

~~Allerdings weiss ich noch nicht, was passiert wenn das Modul weniger als 3 oder keine Warnungen hat. $:-\$~~
Es werden alle Swiper dargestellt, nur steht bei den anderen Swiper-Tabs nur das "Endet" - der einzige Wert, der nicht duch ein Widget hinzugefügt wird....

Vielleicht erbarmt sich jmd und schreibt ein Widget analog zum UWZ widget (Thread)...

sinus61 · 11 März 2019, 18:53:22

Zitat von: yersinia am 10 März 2019, 20:01:08
nur steht bei den anderen Swiper-Tabs nur das "Endet" - der einzige Wert, der nicht duch ein Widget hinzugefügt wird....

Wenn Du das "Endet" als data-pre-text zum Label hinzufügst sollte es mit autohide auch verschwinden.