[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen

[yersinia]

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(alte Version) bzw. zehn(neue swiper Version) 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) - in der neuen Swiper-Version durch ftui-swiper
- 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 (via JS)

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 bzw. 10 begrenzt, kann aber im Quelltext angpasst werden (leere Slides werden nicht angezeigt)

Es gibt drei Versionen:
- die alte Version befindet sich im angehängten zip-Archiv im Ordner without_ftui_swiper kommt ohne ftui-swiper Funktion (<ftui-swiper>) aus und hat die swiper Funktion über ein eigenes CSS realisiert.
- die neue CSS Version befindet sich im angehängten zip-Archiv im Ordner with_ftui_swiper_css-icon kommt mit der ftui-swiper Funktion(<ftui-swiper>).
- die neue SVG Version befindet sich im angehängten zip-Archiv im Ordner with_ftui_swiper_svg-icon kommt mit der ftui-swiper Funktion(<ftui-swiper>).
Alle notwendigen Dateien und Installationsanweiseungen (wie hier beschrieben) befinden sich in dem jeweiligen Ordner. Zum jetzigen Stand pflege ich die alte Version mit, nutze diese selbst aber nicht mehr.


Wie geht man vor wenn man diese DWD-Warnungen im FTUI3 anzeigen lassen möchte?
- ein FHEM DWD Device (siehe auch DWD Opendata-Moduls) mit a_count im Attribut event-on-update-reading
- 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)
- nur für die alte Version (Ordner without_ftui_swiper) - 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

Code Auswählen Erweitern

<ftui-content file="dwd-warn_content.html" device="FHEM-DWD-DEVICE"></ftui-content>
- nur für die neue Version (Ordner with_ftui_swiper_[css|svg]-icon) - Einbindung über <ftui-content>:
  -> Datei dwd-warn_content.html und dwd-warn_content_warn-slide.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

Code Auswählen Erweitern

<ftui-content file="dwd-warn_content.html"
   device="FHEM-DWD-DEVICE"
   iconspath="icons/weather/wi"
   dwdinterval="7">
</ftui-content>
- speichern nicht vergessen
- falls die weathericons nicht im ftui3-icons-Wurzelverzeichnis unter weather/wi liegen, muss die path Variable angepasst werden:
-> alte Version: nach icons/weather/wi suchen und durch das Verzeichnis ersetzen
-> neue Version: Varbiable iconspath (siehe Schritt zuvor) entsprechend anpassen
- die JavaScript-Datei dwd-warn.js muss im header-Bereich der HTML Hauptseite (idR index.html) eingebunden werden:

Code Auswählen Erweitern

<script src="dwd-warn.js" type="application/javascript"></script>
(direkt unter der ftui.js-Einbindung)
- FTUI3 Seite neu laden

Optional:
- Anpassen der Schriftgrößen an die eigenen Bedürfnisse in der dwd-warn.css - ist beschrieben im post #38.

Getestet habe ich das bisher mit FF 96.0.3 (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
2021-12-30 - kleines Update wegen des neuen Zeilenumbruchs (Post #15 bis #18)
2022-01-11 - Umstellung auf ftui-swiper (alte Version bleibt bestehen im Ordner without_ftui_swiper); Aktualisierung der weathericons auf aktuellen Stand
2022-01-14 - picoUpdate: Interval wird durchgereicht und kann direkt beim Aufruf des dwd-warn-contents mitgegeben werden; wenn nur eine Meldung vorhanden ist sollte der horizontale Scrollbalken verschwinden
2022-01-20 - fix Typo in Installationsanweisung - Danke LuGu
2022-02-01 - das Event-Handling wenn sich die Anzahl der Warnungen geändert hat gefiel mir nicht. Mit diesem Update wird die "Keine Warnungen"-Benachrichtigung als erste Slide definiert - somit ist die swiper-Funktione immer geladen. Weiterhin scheint [hidden] nicht richtig zu funktionieren - dies wird durch [style] ersetzt. Der Srollbar ist immer etwas länger als Elemente vorhanden sind. Dies liegt an der letzten Slide, welche 15px breiter ist als angezeigt wird (dies ist durchaus sinnvoll wenn es eine der Slides davor ist) - dies wird ebenso über [style] gehandelt (analog zum Update vom 2022-01-14). So ganz zufrieden bin ich damit aber noch nicht. Ich teste dies weiterhin parallel. Weiterhin hat die Beschreibung einen Abstand zur Überschrift von 2px bekommen - es wirkt dann nicht so drangeklatscht. In einer bestehenden Installation müssen nur dwd-warn.css (beide Versionen) und dwd-warn_content.html (Version mit Swiper-Funktion) ersetzt werden.
2022-02-02 - Code-Cleanup sowie Erweiterung der Installationsanleitung; keine Funktionsänderung. Wer bereits auf der Version vom 2022-02-01 ist, benötigt kein Update.
2022-02-04 - Vorschlag von netlars etwas adaptiert übernommen: für die Texte wird nun links und rechts ein Innenabstand (padding) von 2px eingeführt; zu aktualisierende Datei ist dwd-warn.css oder den patch aus #27 übernehmen
2022-02-06 - typo im Quelltext korrigiert (betrifft nur dwd-warn_content.html im Ordner with_ftui_swiper); Danke @RockFan für den Hinweis
2022-02-17 (1) - nach einem Update der swiper-component und einigen Tests in der derzeit stürmischen Zeit revidiere ich die "keine Warnungen als eigene slide"-Änderungen vom 2022-02-01 vorerst; darüberhinaus gab es bei [hidden] ein falsches handling von true und false und ich habe die Erkentnisse basierend auf Feedback von MDietrich in die neue Version mit einfließen lassen; in einer bestehenden Installation müssen dwd-warn.css (beide Versionen) und dwd-warn_content.html (Version mit Swiper-Funktion) ersetzt werden.
2022-02-17 (2) - variable Textgrößenanpassung (font-size Definiton) möglich; bis auf die .js Dateien ist alles zu aktualisieren; Textgrößen können nun im dwd-warn.css im root Bereich angepasst werden (siehe auch #38)
2022-02-20 - Umstieg beim Warnsymbol von CSS-Border auf SVG-Polygon (neuer Ordner: with_ftui_swiper_svg-icon); das svg lässt sich -ausreichend Platz vorausgesetzt- leichter skalieren; das Warnsymbol wird selber als svg eingebunden und kann dadurch besser zentriert werden; Optimierung der Ausnutzung des zur Verfügung stehenden Platzes; dank FTUI3-Funktionen wie prepend und append kann die zusätzliche JavaScript Datei verkleinert werden (die Umwandlung der rgb Werte in inline-CSS geht nun einfacher); Vielen Dank gehen an MDietrich und RockFan für die Tests und konstruktive Rückmeldung!
2022-04-06 - Code-Bereinigung: korrekte Benutzung von `in den mappings; Ersetzen der (eigenen) JavaScript-Funktion von getDWDWarnColor() durch FTUI3-eigene prepend() und append(); Wetter-Event 0 (Fehler bei Datenabruf - durch Modul erzeugt) hinzugefügt

[yersinia]

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.

[octek0815]

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

[yersinia]

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

Code Auswählen Erweitern

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

[octek0815]

Für die Farben basierend auf der DWD-Webseite wären dies

Code Auswählen Erweitern

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

[yersinia]

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:

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

[octek0815]

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:

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

[yersinia]

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

Code Auswählen Erweitern

.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

Code Auswählen Erweitern

.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

[octek0815]

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

Code Auswählen Erweitern

.dwd-warn-icon {
  position: absolute;
  transform: translateX(-50%) translateY(22%);
  color: var(--black);
}

Das war die Lösung.

[yersinia]

Das war die Lösung.

THX fürs Testen!
Ist in der Version von heute in post #1 schon dabei.

[yersinia]

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:

Code Auswählen Erweitern

<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

[yersinia]

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.

[rallye]

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

[yersinia]

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:

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

[yersinia]

Update:

2021-10-20 - Übernahme der durch DWD für die entsprechende Warnung definierte rgb Farbe (a_n_areaColor) als Hintergrundfarbe