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):
define DWD_Wetter_n notify DWD_Wetter.a_count:.[0-9] {}
dann dort auf DEF gehen und folgendes eintragen:
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:
<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.
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):
<link rel="stylesheet" href="lib/weather-icons.min.css" type="text/css" />
und dann dort wo das Warnicon erscheinen soll:
<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>
Kurze Frage:
bei a_0_event=22 (Frost/leichter Frost) wird mir etwas angezeigt, was an ein "Ü" erinnert. Das ist so gewollt?
Nein. Da müsste wohl doch in Deinen Header der Seite das hier rein:
<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/
Zitat von: sinus61 am 17 Februar 2019, 11:22:22
Die css Datei wird aber mit FTUI ausgeliefert.
Also bei mir nicht:
# 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
Ok, dann
<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.
Zitat von: sinus61 am 18 Februar 2019, 17:05:29
Ok, dann
<link rel="stylesheet" href="lib/weather-icons.min.css" type="text/css" />
Danke, so eingetragen. Mangels Alarm kann ich aber noch nicht berichten.
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.
# 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
<link rel="stylesheet" href="./lib/weather-icons.min.css" type="text/css" />
Bei Warnung sehe ich das komische "Ü".
Hab mal bitte eine Idee.
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.
Danke!
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.
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 (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.
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.
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):
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:
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
und dann da wo das Warn Symbol hin soll:
<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:
Cool! Vielen Dank für deine Mühe!
Hab dein Code benutzt und das ganze in einen Swiper eingefügt:
<!-- 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: </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.
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 (https://wiki.fhem.de/wiki/FTUI_Widget_UWZ) (Thread (https://forum.fhem.de/index.php/topic,64334.240.html))...
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.
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 (https://forum.fhem.de/index.php/topic,64334.msg871279.html#msg871279) besser.
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:
...
<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.
Das stimmt, danke für die Idee tomster. :)
Ich hab mir die uwz widget Version von Bruchbude/der Bernhard (https://forum.fhem.de/index.php/topic,64334.msg871279.html#msg871279) 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 (https://forum.fhem.de/index.php/topic,97204.msg916724.html#msg916724) ü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
/* neue Version im nächsten Post */Diese CSS Datei muss auch eingebunden werden, sofern nicht schon geschehen:
<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:
<link rel="stylesheet" href="lib/swiper.min.css" type="text/css" />Die
widget_dwdwarn.js kommt nach /opt/fhem/www/tablet/js
// neue Version im nächsten PostAufruf des Widgets zum Beispiel (zeigt die Werte wie im Screenshot an):
<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 (https://forum.fhem.de/index.php/topic,51233.msg917750.html#msg917750)...wozu also wechseln...;)
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 (https://forum.fhem.de/index.php/topic,117858.0.html)
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:
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 ?
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):
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 (https://wiki.fhem.de/wiki/Color) einbinden um von rgb->hex umzuwandeln.
Einzubinden in FTUI über (auch ungetestet):
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?
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
<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.
@yersinia
Wo ist denn deine aktuelle Version zu finden ?
Meinst du den Anhang (https://forum.fhem.de/index.php?action=dlattach;topic=97204.0;attach=139249) von #18 (https://forum.fhem.de/index.php/topic,97204.msg919449.html#msg919449)?
Wie es einzubinden ist, steht in #17 (https://forum.fhem.de/index.php/topic,97204.msg918623.html#msg918623).
Zitat von: yersinia am 24 November 2020, 14:19:48
Meinst du den Anhang (https://forum.fhem.de/index.php?action=dlattach;topic=97204.0;attach=139249) von #18 (https://forum.fhem.de/index.php/topic,97204.msg919449.html#msg919449)?
Wie es einzubinden ist, steht in #17 (https://forum.fhem.de/index.php/topic,97204.msg918623.html#msg918623).
Ja, danke, das meinte ich...
War nicht eingelogged als ich gesucht hatte, dann wurde es nicht angezeigt.
Im post #18 (https://forum.fhem.de/index.php/topic,97204.msg919449.html#msg919449) habe ich in der angehängten .js das mapping für einige events korrigiert.