Autor Thema: [FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen  (Gelesen 1980 mal)

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« am: 17 Januar 2021, 20:11:44 »
Mit dem neuen -noch in der Entwicklung befindlichem- FTUI3 wollte ich -ebenso wie für FTUI2- die durch das DWD Opendata-Moduls zur Verfügung gestellten Warnungen des DWDs im FTUI anzeigen lassen.

Zu einer mMn vorzeigbaren Version hat es bisher gereicht - vor Allem mit FTUI3 Standardfunktionen und ein bisschen CSS. Und dies möchte ich hier teilen.

FTUI 3 only! Die Version für FTUI2 gibt es in diesem Thread.

Was funktioniert bereits?
- Anzeige, wenn es keine Warnungen gibt (inkl. letztem Update)
- Anzeige von bis zu fünf Warnungen (mit eventDesc, description, Gültigskeitdatum und letztem Update) sowie inklusive Warnsymbol mit Icon (Thx @sinus61 für das ursprüngliche mapping)
- Slide Funktion wenn mehr als eine Warnung vorhanden (CSS only) (ähnlich der swiper-Funktion in FTUI2)
- FTUI3-Standardfunktionen wie ftui-label, ftui-cell, ftui-column, ftui-icon und ftui-binding werden genutzt
- Übernahme der durch DWD für die entsprechende Warnung definierte rgb Farbe (a_n_areaColor) als Hintergrundfarbe

Welche Einschränkungen gibt es?
- die Anzeige pro Warnung ist auf 7s festgelegt (kann aber manuell in dem Quelltext geändert werden)
- die Anzahl der Warnungen ist auf 5 begrenzt, kann aber im Quelltext angpasst werden (leere Slides werden nicht angezeigt)


Wie geht man vor wenn man diese DWD-Warnungen im FTUI3 anzeigen lassen möchte?
- ein FHEM DWD Device: DWD Opendata-Moduls
- FTUI3
- weather-icons: entweder aus anhängendem ZIP File (Ordner weather/wi) oder selber besorgen
- anhängendes ZIP-Archiv runterladen und entpacken
- die Dateien dwd-warn.css und dwd-warn.js in das ftui3-Wurzelverzeichnis (wahrscheinlich /opt/fhem/www/ftui) kopieren
- (nur wenn die weathericons nicht schon vorhanden sind: den Ordner weather/wi in das icons-Wurzelverzeichnis (wahrscheinlich /opt/fhem/www/ftui/icons) kopieren)
- wenn Einbindung über <ftui-content>:
  -> Datei dwd-warn_content.html in das ftui3-Wurzelverzeichnis (wahrscheinlich /opt/fhem/www/ftui) kopieren
  -> den Code -v in den dafür vorgesehenen Bereich in der FTUI3 HTML-Datei kopieren und FHEM-DWD-DEVICE durch das tatsächliche DWD-Opendata-FHEM-Device ersetzen
  -> <ftui-content file="dwd-warn_content.html" device="FHEM-DWD-DEVICE"></ftui-content>- wenn nur der Quelltext verwendet werden soll (nicht über <ftui-content>):
  -> Datei dwd-warn_content.html öffnen und per Suchen&Ersetzen das DWD-Device definieren (suchen nach {{device}} und durch das tatsächliche DWD-Opendata-FHEM-Device ersetzen)
  -> den nun bearbeitenden Code in den dafür vorgesehenen Bereich in der FTUI3 HTML-Datei kopieren
- speichern nicht vergessen
- falls die weathericons nicht im ftui3-icons-Wurzelverzeichnis unter weather/wi liegen, muss die path Variable angepasst werden (nach icons/weather/wi suchen und durch das Verzeichnis ersetzen)
- die JavaScript-Datei dwd-warn.js muss im header-Bereich der HTML Hauptseite (idR index.html) eingebunden werden:
<script src="dwd-warn.js" type="application/javascript"></script>(direkt unter der ftui.js-Einbindung)
- FTUI3 Seite neu laden

Getestet habe ich das bisher mit FF 93.0 (32Bit & 64Bit auf zwei verschiedenen BS). Über weitere Tests, insbesondere auf anderen Browsern, sowie Feedback freue ich mich ebenso.
Gibt es noch Verbesserungspotential?


Änderungshistorie
2021-01-17 - erste Testversion zur Verfügung gestellt
2021-01-21 - Keine Animation mehr wenn nur eine Warnung vorhanden ist, Verschieben der weathericons nach icons/weather/wi, Wechsel der Hintergrundfarben von FTUI3 auf DWD Farbcodes (kann in der CSS angepasst werden), CSS Optmierungen
2021-01-23 - Lösung für dynamische Slideshow realisiert (nur soviele slides wie Warnungen), Erweiterung auf bis zu fünf Warnungen, CSS Farbanpassungen
2021-01-25 - CSS-Bugfix, Option und Beschreibung für Einbindung über ftui-content hinzugefügt, kleine Änderungen basierend auf octek0815s Test
2021-01-26 - Code-Reduktion; CSS Optimierung; die dwd-warn.txt fällt weg, Einbindung nur noch über ftui-content
2021-01-30 - Code-Reduktion; CSS Optimierung; Wechsel zur JavaScript-Version (siehe #10), Installationsprozedere aktualisiert
2021-02-16 - Hinweis auf andere Herangehensweise von octek0815 im FTUI3-Thread in den Posts #938 und #939
2021-10-10 - winzige Verbesserung: binding map durch step ersetzt wo sinnvoll
2021-10-20 - Übernahme der durch DWD für die entsprechende Warnung definierte rgb Farbe (a_n_areaColor) als Hintergrundfarbe
« Letzte Änderung: 20 Oktober 2021, 13:07:37 von yersinia »
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #1 am: 25 Januar 2021, 11:07:38 »
Ich denke, so langsam ist der alpha/prototype-Status überwunden und die letzte Version kann als beta, wenn nicht sogar rc-1, Version gesehen werden. Ich kann bei meinen Tests soweit keine Probleme feststellen, kann aber auch nur limitiert testen.

EDIT 11:24 - in der zip von 11:11 war noch ein kleiner Fehler in der dwd-warn_content.html. Hier hatte ich noch DWD-DEVICE als referenz, richtig ist aber device. Das ist in dem Upload von eben gefixt. Kann aber auch in der Datei selbst manuell gefixt werden.
« Letzte Änderung: 25 Januar 2021, 11:26:34 von yersinia »
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline octek0815

  • Sr. Member
  • ****
  • Beiträge: 557
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #2 am: 25 Januar 2021, 13:44:00 »
Moin,

eigentlich ganz nett, vielen Dank für Deine mühen und den Code!
Kann es sein das die Farben nicht stimmen?
Minor müsste doch gelb sein und nicht pink, usw.
https://www.dwd.de/DE/wetter/warnungen_aktuell/kriterien/warnstufen.html?nn=605906
Bei mir werden die Icons im Dreieck nicht angezeigt wenn bei mehreren Warnungen gescrollt wird.
Bei nur einer Warnung erscheint das Icon, also stimmt der Pfad.
Ansonsten würde ich noch ein wenig an den Abständen arbeiten um es schön zu machen...

Grüße
Olli


Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #3 am: 25 Januar 2021, 14:49:33 »
Moin,

vielen Dank fürs Testen und das Feedback.

eigentlich ganz nett, vielen Dank für Deine mühen und den Code!
Kann es sein das die Farben nicht stimmen?
Minor müsste doch gelb sein und nicht pink, usw.
https://www.dwd.de/DE/wetter/warnungen_aktuell/kriterien/warnstufen.html?nn=605906
Der DWD definiert auf seiner Webseite vier Farben für vier Warnstufen, das DWD OpenData Modul liefert aber fünf severities an denen ich mich hier orientiere. Das heisst für Warnung der severity Minor hab ich keine Farbvorgabe - zumal, zumindest bei mir, DWD auch den Farbwert rgb(255, 235, 59) (reading a_n_areaColor) mitgibt. Schön wäre noch, wenn man diesen ReadingsVal noch als Hintergrund übernehmen könnte (aka den Inhalt dem CSS background-color übergeben). Aber dafür fehlt mir derzeit ein Lösungsansatz.
Für die Farben basierend auf der DWD-Webseite wären dies
  --dwd-warn-color-minor: #ffeb3b;
  --dwd-warn-color-normal:  #ffeb3b;
  --dwd-warn-color-moderate: #fb8c00;
  --dwd-warn-color-severe: #e53935;
  --dwd-warn-color-extreme: #880e4f;

Bei mir werden die Icons im Dreieck nicht angezeigt wenn bei mehreren Warnungen gescrollt wird.
Bei nur einer Warnung erscheint das Icon, also stimmt der Pfad.
Interessant. Ich habe einen ähnlichen Effekt wenn die Icons initial geladen werden, danach nicht mehr. Die icons werden geladen und richtig positioniert, auch beim scrollen. Entweder stimmt etwas mit der Positionierung/Sichtbarkeit des icons nicht (könntest du bitte mal nach den CSS Eigenschaften des betroffenen icons wenn die Seite geladen ist via des Inspektors des Browsers schauen?) oder es kann kein Icon zugeordnet werden (das map läuft ins leere) - was ist der Inhalt des Readings a_n_event des DWD-Devices beim betroffenen Icon?

Ansonsten würde ich noch ein wenig an den Abständen arbeiten um es schön zu machen...
Die Abstände und Textgrößen sind relativ gesetzt (Gesamthöhe der Box sind 6.4rem, der header hat 1.3rem und size-3, was eine font-size von 1.25rem entspricht), das grid sollte eigentlich keine Abstände zwischen den Grid-Elementen haben, möglicherweise ignoriert der Browser das. (siehe meine Screenshots aus post #1 unter Firefox). Auch hier würde ich gern einen inspektor screenshot sehen.
Welchen Browser nutzt du?

In post #1 gibt es eine aktualisierte Version, geändert hat sich nur die CSS Datei, hier anhängend.
« Letzte Änderung: 26 Januar 2021, 12:42:36 von yersinia »
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline octek0815

  • Sr. Member
  • ****
  • Beiträge: 557
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #4 am: 25 Januar 2021, 16:56:38 »
Für die Farben basierend auf der DWD-Webseite wären dies
  --dwd-warn-color-minor: #ffeb3b;
  --dwd-warn-color-normal:  #ffeb3b;
  --dwd-warn-color-moderate: #fb8c00;
  --dwd-warn-color-severe: #e53935;
  --dwd-warn-color-extreme: #880e4f;
Damit kann ich leben.

Interessant. Ich habe einen ähnlichen Effekt wenn die Icons initial geladen werden, danach nicht mehr. Die icons werden geladen und richtig positioniert, auch beim scrollen. Entweder stimmt etwas mit der Positionierung/Sichtbarkeit des icons nicht (könntest du bitte mal nach den CSS Eigenschaften des betroffenen icons wenn die Seite geladen ist via des Inspektors des Browsers schauen?) oder es kann kein Icon zugeordnet werden (das map läuft ins leere) - was ist der Inhalt des Readings a_n_event des DWD-Devices beim betroffenen Icon?
Firefox: Alles Ok, Icons werden angezeigt.
Chrome/Edge Chromium  (PC): Die Icons scheinen irgend da zu sein werden aber erst angezeigt nach einem F12 an/aus (siehe Bilder).
Android (Fully Kiosk Browser): Das selbe wie in Chrome/Edge Chromium auf dem PC

Die Abstände und Textgrößen sind relativ gesetzt (Gesamthöhe der Box sind 6.4rem, der header hat 1.3rem und size-3, was eine font-size von 1.25rem entspricht), das grid sollte eigentlich keine Abstände zwischen den Grid-Elementen haben, möglicherweise ignoriert der Browser das. (siehe meine Screenshots aus post #1 unter Firefox). Auch hier würde ich gern einen inspektor screenshot sehen.
Da habe ich mich nicht klar ausgedrückt. Ich möchte Abstände innerhalb der Box (hatte da selbst mit style mal schnell was gebastelt).
Ich finde das sonst so gequetscht, aber ist je Geschmackssache.
Anbei noch ein Bild wie es bei der unwetterzentrale aussieht, vielleicht ist das ja nochmal eine Anregung...

VG
Olli


Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #5 am: 26 Januar 2021, 10:46:27 »
Chrome/Edge Chromium  (PC): Die Icons scheinen irgend da zu sein werden aber erst angezeigt nach einem F12 an/aus (siehe Bilder).
Android (Fully Kiosk Browser): Das selbe wie in Chrome/Edge Chromium auf dem PC
Interessant. Entweder kann die Engine das icon nicht darstellen iSv initial laden oder nicht richtig positionieren (könnte an der transform Anweisung liegen). Könntest du die transform Anweisung in folgendem Selektor anpassen und auf den Chrome-basierten Browsern bitte testen:
.dwd-warn-icon {
  position: fixed;
  /* transform: translateX(-50%) translateY(22%); */
  transform: translateX(-50%);
  transform: translateY(22%);
  color: var(--black);
}
Bindest du den dwd-quelltext als ftui-content ein?

Da habe ich mich nicht klar ausgedrückt. Ich möchte Abstände innerhalb der Box (hatte da selbst mit style mal schnell was gebastelt).
Du kannst in dem Selektor noch padding/margin Werte hinzufügen:
.dwd-warn-content-header,
.dwd-warn-content-description,
.dwd-warn-content-footer {
  /* ... */
  padding: 2px;
}
Ggf. musst dann aber auch die Gesamthöhe anpassen (derzeit 6.4rem; selektor: .dwd-warn), wenn du die Details auslassen möchtest, kannst du den Code-Teil auskommentieren.

Anbei noch ein Bild wie es bei der unwetterzentrale aussieht, vielleicht ist das ja nochmal eine Anregung...
Gefällt mir _persönlich_ nicht ganz so - es werden keine Details genannt und das Icon wird aus dem Netz nachgeladen mWn. Aber, das ist Geschmackssache.
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline octek0815

  • Sr. Member
  • ****
  • Beiträge: 557
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #6 am: 26 Januar 2021, 11:08:52 »
Interessant. Entweder kann die Engine das icon nicht darstellen iSv initial laden oder nicht richtig positionieren (könnte an der transform Anweisung liegen). Könntest du die transform Anweisung in folgendem Selektor anpassen und auf den Chrome-basierten Browsern bitte testen:
.dwd-warn-icon {
  position: fixed;
  /* transform: translateX(-50%) translateY(22%); */
  transform: translateX(-50%);
  transform: translateY(22%);
  color: var(--black);
}
Bindest du den dwd-quelltext als ftui-content ein?
Leider keine Besserung, ja wird ftui-content eingebunden.

Du kannst in dem Selektor noch padding/margin Werte hinzufügen:
.dwd-warn-content-header,
.dwd-warn-content-description,
.dwd-warn-content-footer {
  /* ... */
  padding: 2px;
}
Ggf. musst dann aber auch die Gesamthöhe anpassen (derzeit 6.4rem; selektor: .dwd-warn), wenn du die Details auslassen möchtest, kannst du den Code-Teil auskommentieren.
Ok, probiere ich aus.

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #7 am: 26 Januar 2021, 12:32:22 »
Leider keine Besserung, ja wird ftui-content eingebunden.
Ich sehe gerade, dass ich hier position: fixed; genutzt habe, was wahrscheinlich unklug ist. Besser wäre absolute (zum Vorfahren-Element) oder relative (zu seiner eigentlichen Position):
.dwd-warn-icon {
  position: absolute;
  transform: translateX(-50%) translateY(22%);
  color: var(--black);
}
Wie gesagt, im firefox kann ich das Problem nicht nachvollziehen. :(
Du könntest noch testhalber den z-index auf 200 setzen
.dwd-warn-icon {
  position: absolute;
  transform: translateX(-50%) translateY(22%);
  z-index: 200;
  color: var(--black);
}

Übrigens: vielen Dank für das eifrige Testen!


Edit: im ersten Post habe ich eine neue Version angehängt
« Letzte Änderung: 26 Januar 2021, 12:43:19 von yersinia »
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline octek0815

  • Sr. Member
  • ****
  • Beiträge: 557
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #8 am: 26 Januar 2021, 13:47:09 »
Ich sehe gerade, dass ich hier position: fixed; genutzt habe, was wahrscheinlich unklug ist. Besser wäre absolute (zum Vorfahren-Element) oder relative (zu seiner eigentlichen Position):
.dwd-warn-icon {
  position: absolute;
  transform: translateX(-50%) translateY(22%);
  color: var(--black);
}
Das war die Lösung.

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #9 am: 26 Januar 2021, 13:50:52 »
Das war die Lösung.
THX fürs Testen! :)
Ist in der Version von heute in post #1 schon dabei.
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #10 am: 27 Januar 2021, 12:29:04 »
Anbei eine Testversion mit einem zusätzlichen, aber kleinen, JavaScript-File. setstate stellt die Möglichkeit zur Verfügung, mappings auszulagern. Für die icon-Zuweisung halte ich das für praktikabel, auch für die Wartung. Auch wenn man in Zukunft vlt ein anderes iconset als weathericons verwenden möchte.

Ob das Vorteile in den Ladezeiten bringt, kann ich nicht sagen. Ich sehe keinen/kaum einen Unterschied. Dafür gibt es bei der Installation zwei Schritte mehr:
- die JS-Datei muss mit abgelegt werden
- die JS-Datei muss im header-Bereich der HTML Hauptseite (idR index.html) eingebunden werden:
<script src="dwd-warn.js" type="application/javascript"></script>(direkt unter der ftui.js-Einbindung)

Wie sind eure Meinungen dazu? Das mapping besser inline durchführen (weniger Dateien, einfachere Installation; aber auch schwerer zu warten) oder in eine eigene JS auslagern (einfachere Zuordnung iSv Wartung von event->icon, mehr Dateien, erhöhter Installationsaufwand)?

EDIT 2021-01-30: die JS Version hängt im ersten Post an
« Letzte Änderung: 30 Januar 2021, 15:59:51 von yersinia »
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #11 am: 16 Februar 2021, 11:49:14 »
Ich möchte auf eine andere Darstellung und Herangehensweise vom User octek0815 hinweisen.
Im FTUI3-Thread stellt er in den Posts #938 und #939 seine Lösung vor.
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline rallye

  • Full Member
  • ***
  • Beiträge: 146
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #12 am: 03 März 2021, 15:55:25 »
Gute Arbeit, danke. Ich werde das gerne testen und hab's mal in mein FTUI eingebaut. Weitere Rückmeldungen werden allerdings auf sich warten lassen, da wir hier nur selten Wetterwarnungen haben.

Ich habe allerdings 2 Fragen:
kann ich den ausgegebenen Text "derzeit keine Wetterwarnungen" in einer anderen Farbe als weiss machen ?
Wie groß ist das Fenster für die Ausgabe gedacht ? Mangels Warnungen kann ich das nicht ausprobieren. Ich habs mal mit height="2" width="10" eingestellt.

Danke
RaspiPi v4, Funkmodul: HM-LGW, 3x HM-TC-IT-WM-W-EU, 11x HM-CC-RT-DN, 1x HUE Bridge, 4x HUE RemoteControl, 5x Hue White and Color Ambiance, 15xHue White Ambiance, 3xHM-LC-SW1-FM, 1xHM-LC-SW2-FM, 1x ConBeeII, 11x Shelly

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #13 am: 03 März 2021, 16:17:36 »
Weitere Rückmeldungen werden allerdings auf sich warten lassen, da wir hier nur selten Wetterwarnungen haben.
Du kannst dir auch einfach eine andere alertArea nehmen bei der es derzeit Warnungen gibt zum Testen.

kann ich den ausgegebenen Text "derzeit keine Wetterwarnungen" in einer anderen Farbe als weiss machen ?
Die Textfarbe wird von dem FTUI3-Theme übernommen. Möchtest du das überschreiben hast du zwei Möglichkeiten:
1. im css file dwd-warn.css:
.dwd-warn-no-warning {
  white-space: nowrap;
  color: var(--black);  /* <-- ENTWEDER diese Zeile einfügen wenn du eine Farbe aus den FTUI3-Farben nehmen möchtest */
  color: YOUR-COLOR; /* <-- ODER diese Zeile einfügen wenn du eigene farben verwenden möchtest */
}
2. inline css im dwd-warn_content.html:
<!-- no warnings -->
   <div ftui-binding="style" class="dwd-warn-no-warning size-1"
[style]="{{device}}:a_count | map('0:`color: YOUR-COLOR;`, 1:`display:none;`')"> <!-- <-- hier hinter "0:`" ergänzen -->
     <font>Aktuell keine Warnmeldungen (Update</font>
     <ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" style="" unit=").">
     </ftui-label>
    </div>

Wie groß ist das Fenster für die Ausgabe gedacht ? Mangels Warnungen kann ich das nicht ausprobieren. Ich habs mal mit height="2" width="10" eingestellt.
Wo hast du height und width gesetzt?
Die gesamte Box für eine Meldung ist 6.8rem hoch und 100% (der Breite des Elternelements) breit.
Die Warndreieck-Box hat eine fixe Größe von 100px*100px.

Du kannst dies alles in der dwd-warn.css anpassen. ;)

EDIT: wenn das mit dem Swiper vernünftig funktioniert, könnte man das noch umbauen und vereinfachen. Und wäre nicht auf fünf Meldungen begrenzt.
« Letzte Änderung: 03 März 2021, 16:20:35 von yersinia »
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1153
    • Cyanide & Happiness
Antw:[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen
« Antwort #14 am: 20 Oktober 2021, 13:05:27 »
Update:
2021-10-20 - Übernahme der durch DWD für die entsprechende Warnung definierte rgb Farbe (a_n_areaColor) als Hintergrundfarbe
:)
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@aculfw | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl