Mit dem neuen -noch in der Entwicklung befindlichem- FTUI3 (https://forum.fhem.de/index.php/topic,115259.0.html) wollte ich -ebenso wie für FTUI2 (https://forum.fhem.de/index.php/topic,97204.msg918623.html#msg918623)- die durch das DWD Opendata-Moduls (https://wiki.fhem.de/wiki/DWD_OpenData) 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 (https://forum.fhem.de/index.php/topic,97204.msg918623.html#msg918623).
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 (https://forum.fhem.de/index.php/topic,97204.msg903923.html#msg903923) für das ursprüngliche Mapping)
- Slide Funktion wenn mehr als eine Warnung vorhanden (CSS only (https://www.w3.org/Style/Examples/007/slideshow.en.html)) (ä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 (https://wiki.fhem.de/wiki/DWD_OpenData)) mit a_count im Attribut event-on-update-reading
- FTUI3 (https://forum.fhem.de/index.php/topic,115259.0.html)
- weather-icons: entweder aus anhängendem ZIP File (Ordner weather/wi) oder selber besorgen (https://forum.fhem.de/index.php/topic,117545.0.html)
- 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
<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
<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:
<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 (https://forum.fhem.de/index.php/topic,117858.msg1208804.html#msg1208804).
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 octek0815 (https://forum.fhem.de/index.php/topic,117858.msg1125764.html#msg1125764)s 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 (https://forum.fhem.de/index.php/topic,117858.msg1126400.html#msg1126400)), Installationsprozedere aktualisiert
2021-02-16 - Hinweis auf andere Herangehensweise von octek0815 (https://forum.fhem.de/index.php?action=profile;u=12156) im FTUI3-Thread in den Posts #938 und #939 (https://forum.fhem.de/index.php/topic,115259.msg1132061.html#msg1132061)
2021-10-10 - winzige Verbesserung: binding map durch step (https://forum.fhem.de/index.php/topic,115259.msg1178882.html#msg1178882) 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 (https://forum.fhem.de/index.php/topic,117858.msg1195929.html#msg1195929))
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 (https://forum.fhem.de/index.php/topic,117858.msg1201934.html#msg1201934)
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 (https://forum.fhem.de/index.php/topic,117858.msg1205451.html#msg1205451) 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 (https://forum.fhem.de/index.php/topic,117858.msg1205504.html#msg1205504) ü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 (https://forum.fhem.de/index.php/topic,117858.msg1206205.html#msg1206205)
2022-02-17 (1) - nach einem Update der swiper-component (https://forum.fhem.de/index.php/topic,126040.msg1208055.html#msg1208055) 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 (https://forum.fhem.de/index.php/topic,117858.msg1208753.html#msg1208753) basierend auf Feedback von MDietrich (https://forum.fhem.de/index.php/topic,117858.msg1208664.html#msg1208664) 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 (https://forum.fhem.de/index.php/topic,117858.msg1208792.html#msg1208792) (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 (https://forum.fhem.de/index.php/topic,117858.msg1208804.html#msg1208804))
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 (https://forum.fhem.de/index.php/topic,117858.msg1209148.html#msg1209148) und RockFan (https://forum.fhem.de/index.php/topic,117858.msg1209429.html#msg1209429) 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
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.
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
Moin,
vielen Dank fürs Testen und das Feedback.
Zitat von: octek0815 am 25 Januar 2021, 13:44:00eigentlich 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;Zitat von: octek0815 am 25 Januar 2021, 13:44:00Bei 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?
Zitat von: octek0815 am 25 Januar 2021, 13:44:00Ansonsten 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.
Zitat von: yersinia am 25 Januar 2021, 14:49:33
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.
Zitat von: yersinia am 25 Januar 2021, 14:49:33
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
Zitat von: yersinia am 25 Januar 2021, 14:49:33
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
Zitat von: octek0815 am 25 Januar 2021, 16:56:38Chrome/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?
Zitat von: octek0815 am 25 Januar 2021, 16:56:38Da 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.
Zitat von: octek0815 am 25 Januar 2021, 16:56:38Anbei 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.
Zitat von: yersinia am 26 Januar 2021, 10:46:27
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.
Zitat von: yersinia am 26 Januar 2021, 10:46:27
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.
Zitat von: octek0815 am 26 Januar 2021, 11:08:52Leider 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
Zitat von: yersinia am 26 Januar 2021, 12:32:22
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.
Zitat von: octek0815 am 26 Januar 2021, 13:47:09Das war die Lösung.
THX fürs Testen! :)
Ist in der Version von heute in post #1 schon dabei.
Anbei eine Testversion mit einem zusätzlichen, aber kleinen, JavaScript-File. setstate stellt die Möglichkeit zur Verfügung, mappings auszulagern (https://forum.fhem.de/index.php/topic,115259.msg1126228.html#msg1126228). 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
Ich möchte auf eine andere Darstellung und Herangehensweise vom User octek0815 (https://forum.fhem.de/index.php?action=profile;u=12156) hinweisen.
Im FTUI3-Thread stellt er in den Posts #938 und #939 (https://forum.fhem.de/index.php/topic,115259.msg1132061.html#msg1132061) seine Lösung vor.
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
Zitat von: rallye am 03 März 2021, 15:55:25Weitere 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.
Zitat von: rallye am 03 März 2021, 15:55:25kann 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>Zitat von: rallye am 03 März 2021, 15:55:25Wie 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 (https://developer.mozilla.org/de/docs/Web/CSS/length#einheiten) 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 (https://forum.fhem.de/index.php/topic,115259.msg1132061.html#msg1132061), könnte man das noch umbauen und vereinfachen. Und wäre nicht auf fünf Meldungen begrenzt.
Update:
Zitat von: yersinia am 17 Januar 2021, 20:11:442021-10-20 - Übernahme der durch DWD für die entsprechende Warnung definierte rgb Farbe (a_n_areaColor) als Hintergrundfarbe
:)
Hey,
tolles Modul.
Aber bei den Warnmeldungen findet kein Zeilenumbruch am Ende der Box statt. Wenn die Warnmeldung zu lang ist zieht sich der Text über mehrere Slider hinweg.
Ist das schon bekannt?
Mfg
Zitat von: netlars am 27 Dezember 2021, 10:12:17Aber bei den Warnmeldungen findet kein Zeilenumbruch am Ende der Box statt. Wenn die Warnmeldung zu lang ist zieht sich der Text über mehrere Slider hinweg.
Das kam mit einem der letzten FTUI3 Updates.
Editier die dwd-warn.css und füge hinter der Zeile 205 eine neue Zeile (in der class
.dwd-warn-content-description und vor der
})
white-space: normal;hinzu und lade die Seite neu. Dann müssten der Inhalt der Warnung wieder umgebrochen werden.
Wenn ich mich recht erinnere hatte das setstate aber bereits gefixt, benutzt Du denn auch die letzte Version?
Edit, wusste ich's doch, ich hatte das schonmal gemeldet.
https://forum.fhem.de/index.php/topic,115259.msg1192468.html#msg1192468
Und dazu gab es dann eine Antwort von mr_petz:
https://forum.fhem.de/index.php/topic,115259.msg1192483.html#msg1192483
Hey vielen Dank euch beiden,
mir war auch so, dass das schon einer gemeldet hat, aber ich habe es in den 128 Seiten nicht mehr gefunden.
Ich habe es in die css eingefügt und werde es testen.
Update im ersten Post - hab jetzt
Zitat von: yersinia am 28 Dezember 2021, 15:32:09Editier die dwd-warn.css und füge hinter der Zeile 205 eine neue Zeile (in der class .dwd-warn-content-description und vor der })
white-space: normal;hinzu und lade die Seite neu. Dann müssten der Inhalt der Warnung wieder umgebrochen werden.
standardmäßig hinzugefügt.
Super,
funktioniert auf jedenfall damit. Heute wurde die Zeile umgebrochen.
Danke
Nun hab ich mir endlich mal die Zeit genommen und auf ftui-swiper umgestellt. Es gibt eine HTML-Datei mehr, dafür wird die CSS etwas kleiner. Aktueller Stand im ersten Post angehängt als ZIP-Archiv.
Die beiden Versionen bleiben (erstmal) parallel bestehen - die alte mit eigenem CSS im Ordner without_ftui_swiper und die neue mit ftui-swiper im Ordner with_ftui_swiper.
Die Installation ist ähnlich 'aufwendig'.
Mittelfristig ist die Umstellung auf ftui-swiper die bessere weil flexiblere Lösung imho. Man sieht die Anzahl der Warnungen als dots unter dem Scrollbar, man kann manuell durchscrollen, das Intervall ist auch besser einzustellen - und man kann unkompliziert wesentlich mehr Warnungen darstellen. Auch wenn ich bisher sehr selten mal mehr als fünf Warnungen gesehen habe.
Durch das Durchreichen von Variablen durch die Content-Struktur ist es für den Anwender etwas einfacher.
Zitat2022-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
Hi yersinia,
Danke für die prima Arbeit. Hat auf Anhieb geklappt.
In die installation instruction hat sich ein kleiner Fehler eingeschlichen. Stört aber die Funktion nicht. ;)
Einmal Anführungszeichen zuviel.
dwdinterval="7"">
Gruß LuGu
Zitat von: LuGu am 19 Januar 2022, 22:20:07Danke für die prima Arbeit. Hat auf Anhieb geklappt.
Vielen Dank für das Feedback. :)
Zitat von: LuGu am 19 Januar 2022, 22:20:07In die installation instruction hat sich ein kleiner Fehler eingeschlichen. Stört aber die Funktion nicht. ;)
Einmal Anführungszeichen zuviel.
dwdinterval="7"">
Oh, gutes Auge. Danke, hab es korrigiert. :)
Update:
Zitat2022-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.
Hey,
super vielen Dank für deine Verbesserunge.
Ich habe bei mir noch vom Layout geändert, dass der Conten 5px Abstand zum linken Rand hat. Buchstaben kleben bei mir sonst am linken Rand, das ist Optisch nicht so schön.
Ebenfalls wollte ich es für den rechten Rand realisieren, aber das wollte nicht so recht.
Ist das bei dir / euch auch so, dass die Buchstaben an den Rändern kleben?
Mfg
Danke für dein Feedback. :)
Zitat von: netlars am 02 Februar 2022, 20:33:23Ich habe bei mir noch vom Layout geändert, dass der Conten 5px Abstand zum linken Rand hat. Buchstaben kleben bei mir sonst am linken Rand, das ist Optisch nicht so schön.
Rein aus Neugier -
wie hast du das getan?
Zitat von: netlars am 02 Februar 2022, 20:33:23Ebenfalls wollte ich es für den rechten Rand realisieren, aber das wollte nicht so recht.
Wenn du es für den linken Rand geschafft hast, warum nicht für rechts? ;)
Such im dwd-warn.css nach diesem Eintrag (sollte Zeile 145 sein):
.dwd-warn-content-header,
.dwd-warn-content-description,
.dwd-warn-content-footer {und ersetze dort die Padding (https://developer.mozilla.org/de/docs/Web/CSS/padding)-Definition
padding: 0;in Zeile 151 durch
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;dies fügt dem header, der description und dem footer links und rechts einen Innenabstand von 5px hinzu.
Möchtest du dies
nur für die description, ergänze in (der originalen) Zeile 161 in der class
.dwd-warn-content-description {die padding-Werte für rechts und links (unter der originalen Zeile 163):
padding-right: 5px;
padding-left: 5px;Zitat von: netlars am 02 Februar 2022, 20:33:23Ist das bei dir / euch auch so, dass die Buchstaben an den Rändern kleben?
Das ist eigtl gewollt um den schon geringen Platz nicht zu verschwenden - das Dreieck hat eine Höhe von 100px und dem soll die Texthöhe in etwa folgen.
Ich hatte bisher kaum Probleme damit, stimme aber zu, dass die Platzverhältnisse und damit das Textlayout suboptimal sind.
Vielen Dank, ich werde es ausprobieren.
Die 5px rechts und links ist optisch besser, sonst sehen die Buchstaben teilweise abgeschnitten aus.
ich habe unter content-description
padding: 5px 0 5px 0 hinzugefügt gehabt, das links hatte er genommen, das rechte nicht.
Einzeln hätte ich es probieren können, aber nicht daran gedacht.
Ich teste deinen Vorschlag heute Abend mal.
Zitat von: netlars am 03 Februar 2022, 07:36:17padding: 5px 0 5px 0 hinzugefügt gehabt, das links hatte er genommen, das rechte nicht.
Allerdings:
ZitatVier Werte
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.
padding: 1em 3px 30px 5px; /* oben 1em */
/* rechts 3px */
/* unten 30px */
/* links 5px */
(https://developer.mozilla.org/de/docs/Web/CSS/padding (https://developer.mozilla.org/de/docs/Web/CSS/padding))
also:
padding: 0 5px 0 5px; /* top right bottom left */;)
ja, kann auch sein, dass hatte ich heute morgen aus dem Gedächtnis geschrieben.
Ich habe deinen Vorschlag allerdings mit 2px übernommen.
Zitat2022-02-04 - Vorschlag von netlars (https://forum.fhem.de/index.php/topic,117858.msg1205451.html#msg1205451) 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 (https://forum.fhem.de/index.php/topic,117858.msg1205504.html#msg1205504) übernehmen
Hallo yersinia,
ich habe gestern Abend auf die Version "with_ftui_swiper" umgestellt. Jetzt eine vielleicht ganz doofe Frage :-[
In dwd-warn_content.html wird auf 51_content_dwd-warn-slide.html referenziert. Im ZIP-Paket heißt die Datei aber dwd-warn_content_warn-slide.html. Mit meinem ersten blinden Versuch bin ich damit erstmal auf die Nase gefallen. Erst als ich dann in die HTMLs geschaut habe, ist mir klar geworden, dass ich den Dateinamen ändern muss, damit es funktioniert.
Hat das einen besonderen Hintergrund oder habe ich etwas verpasst/überlesen?
Viele Grüße
Dieter
Hi RockFan
Zitat von: RockFan am 06 Februar 2022, 13:06:47Jetzt eine vielleicht ganz doofe Frage :-[
die Frage ist ganz und gar nicht doof. :)
Zitat von: RockFan am 06 Februar 2022, 13:06:47In dwd-warn_content.html wird auf 51_content_dwd-warn-slide.html referenziert. Im ZIP-Paket heißt die Datei aber dwd-warn_content_warn-slide.html. Mit meinem ersten blinden Versuch bin ich damit erstmal auf die Nase gefallen. Erst als ich dann in die HTMLs geschaut habe, ist mir klar geworden, dass ich den Dateinamen ändern muss, damit es funktioniert.
Hat das einen besonderen Hintergrund oder habe ich etwas verpasst/überlesen?
Nein, du hast nichts falsch gemacht. Ich hab beim kopieren & packen geschlampt >:( - ich nutze eine etwas andere Struktur für die Bezeichnung der Dateien.
Danke für den Hinweis, ich werde es gleich korrigieren.
Prima :)
Ich danke für's Modul :D
Hallo yersinia,
da die aktuelle Wetterlage ein guter Zeitpunkt um Testen ist habe ich heute die Version mit Slider ausprobiert. Installation und Einbindung in eine Testseite haben auf Anhieb geklappt. :)
Danke sehr für deinen Beitrag!!
Ein paar Fragen/Anmerkungen:
- auf meinem Bildschirm könnte ich gut eine Variante mit größerer Schrift unterbringen. Wenn ich Schriftgröße in der Content-Datei ändere verbiege ich das gesamte Layout (1. Bild)
- die Wetterwarnungen sind ja im Moment eher länger und werden daher abgeschnitten. Bei der von mir gewählten Breite aber zu spät und es ergibt sich eine Überlappung mit der Fußzeile (2. Bild). Ich habe versucht in der .css mit dem Wert für grid-template-rows zu spielen, die Boxgröße ändert sich aber nicht die Position oder Länge des Textes.
Kannst du mir da Hinweise geben?
Danke im Voraus
MDietrich
Zitat von: MDietrich am 16 Februar 2022, 18:14:20Installation und Einbindung in eine Testseite haben auf Anhieb geklappt. :)
Danke sehr für deinen Beitrag!!
Vielen Dank für das Feedback. :)
Zitat von: MDietrich am 16 Februar 2022, 18:14:20auf meinem Bildschirm könnte ich gut eine Variante mit größerer Schrift unterbringen. Wenn ich Schriftgröße in der Content-Datei ändere verbiege ich das gesamte Layout (1. Bild)
Die Schriftgröße wird nicht vorgegeben oder manipuliert. Bild 1 sieht mir eher danach aus, dass du der
umschließenden mehr grid-tiles zuweisst als zB die Wetter-tile weiter oben in deinem Screenshot. Der swiper wird nicht in der Breite begrenzt, je mehr Platz du gewährst, umso breiter wird dieser. Siehe auch anhängeden Screenshot - hier habe ich eine width von 20 ausgewählt (in der mitgelieferten index.html (https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html) ist die base-width=78).
Zitat von: MDietrich am 16 Februar 2022, 18:14:20die Wetterwarnungen sind ja im Moment eher länger und werden daher abgeschnitten. Bei der von mir gewählten Breite aber zu spät und es ergibt sich eine Überlappung mit der Fußzeile (2. Bild). Ich habe versucht in der .css mit dem Wert für grid-template-rows zu spielen, die Boxgröße ändert sich aber nicht die Position oder Länge des Textes.
Ja, das kommt davon wenn man nur in seiner eigenen Diaspora testet. ::) Daher bin ich dankbar für User-Feedback. In der dwd-warn.css müsstest du zwei Werte anpassen:
Zeile 59 in der class
.dwd-warn-slide ersetze
grid-template-rows:
grid-template-rows: minmax(100px, auto);Zeile 169 in der class
.dwd-warn-content-description ersetze
height:
min-height: 3.9rem;Dadurch gibt es für die grid-Zeile und dem Beschreibungstext eine Mindesthöhe, die dann mitwächst - vorausgesetzt, dass umschließende Element lässt die Höhen zu. Screenshot angehängt (in übertriebener Ansicht; eine gewisse Mindestbreite benötigt der Swiper schon um Inhalte sinnvoll darzustellen).
Du kannst auch die angehängte CSS übernehmen.Bitte einmal testen. :)
Edit: ich hab die Erkenntnisse auch direkt mal in ein Update (https://forum.fhem.de/index.php/topic,117858.msg1122799.html#msg1122799) übernommen.
Hallo yersinia,
super, die Anpassungen funktionieren gut. Es klappt jetzt auch die Textgrößen in der "dwd-warn_content_warn-slide.html" anzupassen, habe mal etwas herumprobiert:
<ftui-label [text]="{{device}}:a_{{warnnum}}_eventDesc" class="dwd-warn-content-header size-4"></ftui-label>
<ftui-label [text]="{{device}}:a_{{warnnum}}_description" class="dwd-warn-content-description size-3"></ftui-label>
<div class="dwd-warn-content-footer size-2">
<font>Gültig von</font>
<ftui-label [text]="{{device}}:a_{{warnnum}}_onset | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<font>bis</font>
<ftui-label [text]="{{device}}:a_{{warnnum}}_expires | toDate() | format('DD.MM. hh:mm')"></ftui-label>
<div class="dwd-warn-content-updatetime size-1">
<font>(Update:</font>
<ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" class="size-1" unit=")">
</ftui-label>
</div>
Wenn ich nicht der einzige bin, dem die Schrift zu klein ist, könnte man evtl. die Schriftgröße als content-Parameter übergeben ??
Nochmal Danke!!!
MDietrich
Zitat von: MDietrich am 17 Februar 2022, 11:03:38super, die Anpassungen funktionieren gut. Es klappt jetzt auch die Textgrößen in der "dwd-warn_content_warn-slide.html" anzupassen, habe mal etwas herumprobiert:
Wenn ich nicht der einzige bin, dem die Schrift zu klein ist, könnte man evtl. die Schriftgröße als content-Parameter übergeben ??
Danke fürs Testen und die Rückmeldung. Ich erinner mich, dass ich die Textgröße in den class mitgegeben haben. Das als Parameter zu übergeben finde ich unschön, weil ich dann fünf Parameter (keine Wahnung, Kopfzeile, Beschreibung, Fußzeile sowie Updatezeitpunkt) übergeben müsste. Mir ist auch (noch?) keine Möglichkeit bekannt, wie man das in css Datei von einer Klasse auf die andere vererben kann ohne das class Attribut zu adaptieren.
Was allerdings geht, ist die Variablen im dwd-warn.css anzupassen - bzw. neu zu definieren:
:root {
/* DWD WARN COLOR SETTINGS */
/* [...] */
/* DWD font sizes */
--dwd-warn-no-warning-font-size: 0.875rem; /* size-1 */
--dwd-warn-content-header-font-size: 1.25rem; /* size-3 */
--dwd-warn-content-description-font-size: 0.875rem; /* size-1 */
--dwd-warn-content-footer-font-size: 1rem; /* size-2 */
--dwd-warn-content-updatetime-font-size: 0.875rem; /* size-1 */
}Um diese dann weiter unten zu nutzen:
.dwd-warn-no-warning {
/* [...] */
font-size: var(--dwd-warn-no-warning-font-size);
}
.dwd-warn-content-header {
/* [...] */
font-size: var(--dwd-warn-content-header-font-size);
}
.dwd-warn-content-description {
font-size: var(--dwd-warn-content-description-font-size);
/* [...] */
}
.dwd-warn-content-footer,
.dwd-warn-content-updatetime {
/* [...] */
font-size: var(--dwd-warn-content-footer-font-size);
}
.dwd-warn-content-updatetime {
/* [...] */
font-size: var(--dwd-warn-content-updatetime-font-size);
}
Für den Anfang habe die originalen Werte übernommen. Als User kann man die im dwd-warn.css im root Bereich an die FTUI size-Definition aus der ftui.css (https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css#L228) anpassen:
.size-9 {
font-size: 3.5rem;
}
.size-8 {
font-size: 3rem;
}
.size-7 {
font-size: 2.5rem;
}
.size-6 {
font-size: 2rem;
}
.size-5 {
font-size: 1.75rem;
}
.size-4 {
font-size: 1.5rem;
}
.size-3 {
font-size: 1.25rem;
}
.size-2 {
font-size: 1rem;
}
.size-1 {
font-size: 0.875rem;
}
.size-0 {
font-size: 0.75rem;
}Für dich müssten die root Werte dann so aussehen in der dwd-warn.css:
--dwd-warn-no-warning-font-size: 1.25rem;
--dwd-warn-content-header-font-size: 1.5rem;
--dwd-warn-content-description-font-size: 1.25rem;
--dwd-warn-content-footer-font-size: 1rem;
--dwd-warn-content-updatetime-font-size: 0.875rem;Ich werde die Änderung zusammenpacken und im ersten Post aktualisieren. Ist im Update enthalten.
Hallo Testwillige,
MDietrichs Frage nach der Textgröße brachte mich zu der Frage der Skalierbarkeit. Die Textboxen rechts lassen sich recht simpel skalieren und irgendwie in die umfassende HTML-Struktur anpassen. Allerdings gilt dies meiner Erfahrung nach nicht für das Warndreieck links - wieso wächst das Dreieck inklusive icon nicht einfach mit, wenn es mehr Platz hat?
Daraus ist die Idee entstanden, das Dreieck (bestehend aus zwei div-container mit Bordermanipulation) auf svg (polygon) umzustellen. Zudem werden nur Mindestbreiten/-höhen angegeben (100px x 100px; sonst maximal 15% breit).
AnbeiWeiter unten eine neuere Testversion der dwd-warn_content_warn-slide.html die ihr einfach ersetzen könnt. Wäre schön, wenn ihr das testen und Feedback geben würdet.
Sollte dies bei euch einfach schlecht aussehen, könnt ihr immernoch zur originalen Version (backup vorher bzw im ersten Post) zurückkehren.
@mr_petz: thx für den Hinweis auf die prepend() und append() pipes! :D
Hallo yersinia,
habe es ausprobiert und mir ist aufgefallen:
- wenn man die zur Verfügung stehende Breite (ftui-grid-tile width) reduziert wird die rechte Spalte höher, sobald Symbol und Text zusammentreffen. Wenn man es übertreibt, wird da Symbol nach links aus dem Tile geschoben. Für mich ist das OK. Ansonsten müsste man die Breiten dynamisch verteilen, wobei die Symbolgröße führend wäre.
- wenn man die Breite erweitert, entsteht ein Zwischenraum zwischen Symbol und Text, was mir persönlich gut gefällt
- die Änderung der Schriftgröße (ftui-label size) passt
- eine Änderung der Höhe des Symbols habe ich nicht wahrgenommen
Eine Frage, könnte man die Ecken des Dreiecks weniger spitz machen (siehe Bild2)?
LG
MDietrich
EDIT: Falls jemand sich für den Verlauf des Sturms interessiert:
https://www.windfinder.com/?utm_source=windfinder.de&utm_medium=web&utm_campaign=redirect#8/54.5657/10.2008 (https://www.windfinder.com/?utm_source=windfinder.de&utm_medium=web&utm_campaign=redirect#8/54.5657/10.2008)
Danke fürs Testen und für den Screenshot. Ich hätte allerdings erwartet, dass das Warndreieck etwas größer skaliert, da ja offensichtlich genug Platz ist. Das muss ich mir wohl nochmal ansehen.
Zitat von: MDietrich am 19 Februar 2022, 04:53:23Eine Frage, könnte man die Ecken des Dreiecks weniger spitz machen (siehe Bild2)?
Ja, das geht. Setz in der style-Anweisung in dem html
aus #39 in der class
.dwd-warn-triangle-svg die Eigenschaft
stroke-linejoin: round;:
.dwd-warn-triangle-svg {
fill: white;
stroke-width: 70;
stroke-linejoin: round; /* <-- hier */
fill-rule: nonzero;
}Oder nimm' die anhängende. ;)Zitat von: MDietrich am 19 Februar 2022, 04:53:23EDIT: Falls jemand sich für den Verlauf des Sturms interessiert:
https://www.windfinder.com/?utm_source=windfinder.de&utm_medium=web&utm_campaign=redirect#8/54.5657/10.2008 (https://www.windfinder.com/?utm_source=windfinder.de&utm_medium=web&utm_campaign=redirect#8/54.5657/10.2008)
Interessant, danke fürs Teilen!
Edit: ich denke, ich habs gefunden.
Schau(t) mal die anhängende Datei an, das müsste nun besser skalieren. Update im ersten Post.
Supi, funktioniert einwandfrei und es sieht gut aus!
Herzlichen Dank
MDietrich
Hi yersinia,
ich habe mal die aktuelle Version (inkl. Testversion von dwd-warn_content_warn-slide.html) bei mir ausprobiert.
Bei mir ist der eigentliche Meldungstext kleiner als der Gültigkeitszeitraum, obwohl genug Platz im grid wäre (siehe Screenshot DWD_1).
grid hat bei mir keinerlei base Definitionen, einfach nur
<ftui-grid>
grid-tile sieht dann so aus:
<ftui-grid-tile row="2" col="6" height="2" width="3" shape="round">
<ftui-content file="dwd-warn_content.html" device="DWD" iconspath="icons/weather/wi" dwdinterval="7"></ftui-content>
</ftui-grid-tile>
Wenn ich dann durch verringern der Breite (width="2") den Test mache, ob auch die Höhen verwendet werden würde bekomme ich das Ergebnis im zweiten Screenshot.
Hiebei fällt auf, dass der Meldungstext durch Gültigkeitszeitraum und letzten Update überlagert wird.
Was mache ich falsch?
Viele Grüße
Dieter
Danke fürs Testen und Feedback MDietrich und RockFan! :)
Ja, die Höhenausnutzung könnte besser sein. ::) Die einzelnen Objekte nutzen die (zur Verfügung stehende) Höhe noch nicht optimal aus - dies sollte sich nun aber geändert haben (siehe anhängender Screenshot mit width="4"). Ich werde das ganze gleich Zusammenpacken und den ersten Post aktualisieren.
An die Nutzer hier habe ich noch eine generelle Frage: welche Version benutzt bzw. bevorzugt ihr:
[ ] die
alte Version ohne ftui-swiper mit bis zu fünf Warnmeldungen
[ ] die
neue CSS Version mit ftui-swiper und dem Warnicon als CSS-Border Definition und ftui-icon
[ ] die
neue SVG Version mit ftui-swiper und dem Warnicon als SVG
Zitat von: yersinia am 17 Januar 2021, 20:11:44Es 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.
Es stellt sich mir die Frage, welche Version ich sinnvollerweise weiterhin Verfolgen soll. Gefühlt ist es die SVG Version, da weniger Dateigröße und besser zu skalieren. Alle drei Versionen parallel zu maintainen wird wohl mittelfristig zu aufwendig.
Oder es gibt eine Möglichkeit alle drei Versionen zu kombinieren... ???
Zitat von: yersinia am 20 Februar 2022, 15:17:30
Danke fürs Testen und Feedback MDietrich und RockFan! :)
Ja, die Höhenausnutzung könnte besser sein. ::) Die einzelnen Objekte nutzen die (zur Verfügung stehende) Höhe noch nicht optimal aus - dies sollte sich nun aber geändert haben (siehe anhängender Screenshot mit width="4"). Ich werde das ganze gleich Zusammenpacken und den ersten Post aktualisieren.
Hi yersinia,
prima und Danke; Ich kann bestätigen, dass die Höhe jetzt voll ausgenutzt wird (siehe Screenshot) 8)
Wie schaffe ich es jetzt noch, wenn bei mir so viel Platz ist, dass Schrift der Meldung größer ist? Beim Tablet muss man noch ganz schön nah ran, um es lesen zu können. MDietrich hat das scheinbar geschafft wie man es in seinem letzten Screenshot sehen kann ;)
Viele Grüße
Dieter
Danke für die Rückmeldung! :)
Zitat von: RockFan am 20 Februar 2022, 15:57:18Wie schaffe ich es jetzt noch, wenn bei mir so viel Platz ist, dass Schrift der Meldung größer ist? Beim Tablet muss man noch ganz schön nah ran, um es lesen zu können. MDietrich hat das scheinbar geschafft wie man es in seinem letzten Screenshot sehen kann ;)
Schau mal in den post #38 (https://forum.fhem.de/index.php/topic,117858.msg1208804.html#msg1208804): in der css Datei
dwd-warn.css gibt es im oberen Bereich unter
:root die Möglichkeit, die Textgröße anzupassen:
--dwd-warn-no-warning-font-size: 0.875rem; /* size-1 */
--dwd-warn-content-header-font-size: 1.25rem; /* size-3 */
--dwd-warn-content-description-font-size: 0.875rem; /* size-1 */
--dwd-warn-content-footer-font-size: 1rem; /* size-2 */
--dwd-warn-content-updatetime-font-size: 0.875rem; /* size-1 */(In den Kommentaren steht die entsprechende FTUI3 Klasse) Hier kannst du nach belieben deine Schriftgröße anpassen.
Die Größenwerte aus FTUI3 findest du in der ftui.css (https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css#L228).
Cool! Danke das hatte ich übersehen.
Hallo yersinia,
mein Favorit ist die SVG-Version
Zitat von: yersinia am 20 Februar 2022, 15:33:33
An die Nutzer hier habe ich noch eine generelle Frage: welche Version benutzt bzw. bevorzugt ihr:
[ ] die alte Version ohne ftui-swiper mit bis zu fünf Warnmeldungen
[ ] die neue CSS Version mit ftui-swiper und dem Warnicon als CSS-Border Definition und ftui-icon
[X] die neue SVG Version mit ftui-swiper und dem Warnicon als SVG
Die Version vom 20.02. funktioniert so wie erwartet, nochmal danke für deine Arbeit!!
Macht es Sinn die Dateien in die FTUI-Datenstruktur einzubinden (.css und .js in einen Ordner /components/dwd-warn und die beiden content-files in einen Ordner /content, den ggfs. jeder Benutzer selber erstellen muss?)
LG
MDietrich
Danke MDietrich für deine Meinung.
Zitat von: MDietrich am 21 Februar 2022, 06:30:14Die Version vom 20.02. funktioniert so wie erwartet, nochmal danke für deine Arbeit!!
Ohne User wie dir, die das geduldig unter anderen als meine Bedingungen testen, wäre es nie soweit gekommen. Der Dank geht also zurück. :)
Zitat von: MDietrich am 21 Februar 2022, 06:30:14Macht es Sinn die Dateien in die FTUI-Datenstruktur einzubinden (.css und .js in einen Ordner /components/dwd-warn und die beiden content-files in einen Ordner /content, den ggfs. jeder Benutzer selber erstellen muss?)
Könnte man machen, ja. Ich habe aber Sorge, dass es dann den Anschein erweckt, dass es 'offiziell' durch setstate/FTUI3 ausgeliefert wird - und dann führt dies zu Supportanfragen ine einem falschen Forumsteil.
Und bisher sehen die Downloadquoten nicht danach aus, dass man das groß umbauen sollte. User, die das möchten, können dies sowieso machen - also die Ordner unter
components anlegen. Der bisherige Installationsaufwand ist ja schon verhältnismäßig komplex (im Vergleich zu einem FHEM-Update).
Dann wäre auch github oder ähnliches für eine Entwicklung (so wie bei mr_petz zB) angebracht imho - der Aufwand steht aber für mich bisher in keinem Verhältnis zum Nutzen.
Oops, vergessen auf die Umfrage zu antworten.
Ich bevorzuge auch die dritte Variante:
Zitat von: yersinia am 20 Februar 2022, 15:33:33
An die Nutzer hier habe ich noch eine generelle Frage: welche Version benutzt bzw. bevorzugt ihr:
[ ] die alte Version ohne ftui-swiper mit bis zu fünf Warnmeldungen
[ ] die neue CSS Version mit ftui-swiper und dem Warnicon als CSS-Border Definition und ftui-icon
[X] die neue SVG Version mit ftui-swiper und dem Warnicon als SVG
Hallo yersinia,
bin heute mal dazu gekommen deine DWD Wetterwarnung einzubauen, hab nämlich heute gesehen ich habe 2 Warnungen im Modul stehen ;).
Jetzt habe ich zwei Fragen: Zum einen skaliert bei mir die Anzeige im Grid nicht mit (siehe Screenshot) und zum anderen habe ich bei euren Screenshots gesehen ihr habt unten einen "Sliderbalken", damit man sehen kann wieviele Seiten es gibt. Der ist bei mir nicht vorhanden.
Vielleicht hast du hier eine Idee wo mein Fehler liegt.
Zur Info, ich verwende die aktuellste Version aus dem ersten Post, davon die svg-Version und FHEM und ftui sind beide aktuell.
Gruß Markus
Edit: Screenshot:
Moin Markus,
ich kann den Screen-Shot leider nicht sehen.
Gruß,
Matthias
Zitat von: MDietrich am 04 Dezember 2022, 06:45:07
Moin Markus,
ich kann den Screen-Shot leider nicht sehen.
Gruß,
Matthias
Morgen Matthias,
war spät gestern, hab ich vergessen anzuhängen :o. Ist oben angehängt.
Gruß
@meier81
Der "Sliderbalken" wird durch das Swiper-Element verwaltet.
Ist (ungetestet) nur sichtbar, wenn mehrere Warnungen vorhanden sind.
Solltest Du doch mehrere Warnungen ohne "Sliderbalken" haben, könnte evtl. Deine Einbindung zum Nachstellen dienen.
Hallo OdfFhem,
hab zur Zeit tatsächlich nur eine Warnung anstehen, hatte aber gestern Abend zwei Meldungen, das sliden hat auch funktioniert, wie gesagt nur den Sliderbalken hatte ich halt nicht. Hier mal meine Einbindung:
<ftui-grid-tile row="1" col="9" height="2" width="10" shape="round">
<header>DWD Wetterwarnungen</header>
<ftui-content file="content-dwd_warnung-grid.html" device="NN_xx_SW_DWD" iconspath="icons/weather/wi" dwdinterval="5"></ftui-content>
</ftui-grid-tile>
Ich habe die Dateien dwd-warn.css und dwd-warn.js im Ordner "modules/dwd-warn" abgelegt, dementsprechend habe ich auch die Aufrufe angepasst. Die html-Dateien habe ich auch passend zu meinen Dateien umbenannt, dort auch die Aufrufe geändert.
Aufruf in der index.html:
<script src="modules/dwd-warn/dwd-warn.js" type="application/javascript"></script>
Inhalt der content-dwd_warnung-grid.html (Kommentare am Anfang weggelassen):
<!-- DWD Warnings -->
<style> @import "modules/dwd-warn/dwd-warn.css"; </style>
<div class="dwd-warn">
<!-- no warnings -->
<div ftui-binding class="dwd-warn-no-warning"
[style]="{{device}}:a_count | step('0:``, 1:`display:none;`')">
<font>Aktuell keine Warnmeldungen (Update</font>
<ftui-label [text]="{{device}}:a_time | toDate() | format('DD.MM. hh:mm')" style="" unit=").">
</ftui-label>
</div>
<!-- warnings -->
<ftui-swiper id="dwd-swiper"
auto-play
scrollbar
interval="{{dwdinterval}}"
[hidden]="{{device}}:a_count | step('0:true, 1:false')">
<!-- slides for warnings -->
<ftui-content id="dwd-swiper_slide_01" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="0" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 1:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 1:`margin-right: 0px;`, 2:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_02" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="1" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 2:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 2:`margin-right: 0px;`, 3:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_03" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="2" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 3:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 3:`margin-right: 0px;`, 4:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_04" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="3" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 4:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 4:`margin-right: 0px;`, 5:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_05" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="4" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 5:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 5:`margin-right: 0px;`, 6:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_06" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="5" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 6:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 6:`margin-right: 0px;`, 7:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_07" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="6" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 7:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 7:`margin-right: 0px;`, 8:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_08" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="7" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 8:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 8:`margin-right: 0px;`, 9:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_09" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="8" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 9:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 9:`margin-right: 0px;`, 10:``')"></ftui-content>
<ftui-content id="dwd-swiper_slide_10" file="content-dwd_warnung-slide.html" device="{{device}}" warnnum="9" iconspath="{{iconspath}}" [hidden]="{{device}}:a_count | step('0:true, 10:false')"
[style]="{{device}}:a_count | step('0:`display: none;`, 10:`margin-right: 0px;`, 11:``')"></ftui-content>
</div> <!-- /dwd-warn -->
Und die content-dwd_warnung-slide.html ist Original, nur umbenannt.
So, hab jetzt wieder 2 Warnungen, sliden geht, Sliderbalken wird keiner angezeigt. Und das grid wird von der Höhe leider nicht ausgenutzt.
Hallo Markus,
ich hatte am Angang auch das Thema, dass die Höhe der Kachel nicht ausgenutzt wird, hierzu habe ich die dwd-war.css geändert. In der Sektion .dwdwarnslide habe ich die Zeile:
height: 100%;
ergänzt.
Die Darstellung mache ich über ein Popup:
<ftui-popup id="DWDWarnPop" timeout="0">
<ftui-label color="danger" slot="close" popup-close>Close</ftui-label>
<ftui-grid-tile row="10" col="3" height="3" width="7" padding="0">
<ftui-content file="dwd-warn_content.html"
device="DWD"
iconspath="icons/weather/wi"
dwdinterval="10">
</ftui-content>
</ftui-grid-tile>
</ftui-popup>
und
<ftui-cell>
<ftui-button [color]="DWD:a_count | step('-1:dark, 1:danger, 10:danger')">
<ftui-icon size="3" path="../images/myicons" @click="DWDWarnPop.open()"
[name]="d_recentChOfRain | step('0:umbrella_closed, 41:umbrella_open')"
[color]="WetterProplanta:temperature | step('-50:violett, -5:blue, 5:white, 25:red')">
<ftui-badge color="white" [text]="DWD:a_count" size="1">
</ftui-badge>
</ftui-icon>
</ftui-button>
</ftui-cell>
Damit habe ich den Slider unten im Fenster und die Meldung füllt den Raum aus.
Ich hoffe das hilft
Matthias
Vielen Dank Matthias für deine Ideen und Hinweise.
Ich konnte mittlerweile auch herausfinden wo bzw. was mit meinem Sliderbalken los ist, damit es ja zu meiner restlichen Oberfläche passt habe ich nun das Popup ja so definiert:
<ftui-popup id="DWDWarnPop" timeout="0">
<header>DWD Wetterwarnungen</header>
<ftui-content file="content-dwd_warnung-grid.html"
device="NN_xx_SW_DWD"
iconspath="icons/weather/wi"
dwdinterval="5">
</ftui-content>
</ftui-popup>
Sobald ich hier mit dem "header" für die Überschrift arbeite ist der Sliderbalken nicht zu sehen, mache ich den header weg, ist der Sliderbalken da. Zudem habe ich aber auch das Problem das mit deinem Code
<ftui-label color="danger" slot="close" popup-close>Close</ftui-label>
ich zwar den Sliderbalken sehe, ich aber oben rechts in der Ecke mit "close" das Fenster nicht schließen kann. Ich muss außerhalb des Popups klicken damit das Popup zugeht.
Muss später mal schauen ob ich hier noch etwas mehr finde, evtl. habt ihr ja da eine Idee.
Gruß Markus
P.S.: Hab eben auf setstates GitHub Beispielen geschaut, hier ist bei den Swiper-Beispielen nie eine Überschrift dabei, evtl. gibt es hier ja noch ein Problem.
Das Thema mit dem Swiper und dem Scrollbalken ist hier OT! Dafür ist der Haupttread (https://forum.fhem.de/index.php/topic,115259.0.html) da, da swiper eine FTUI3 Standardfunktion ist.
Darüberhinaus wird der Scrollbar zumindest bei mir (FF 107.0.1) nach einer gewissen Zeit (1s?) ausgeblendet wenn keine Animation/Scrolling stattfindet. (EDIT: das hängt uU auch vom OS ab, auf dem der Broswer läuft: bei gleicher Browser-Version aber anderes OS bekomm ich einen Scrollbalken angezeigt) Wenn gescrollt wird, dann erscheint der Scrollbalken wieder für kurze Zeit während/nach der Animation. In dem example (https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html) sieht man das an den swiper-Beispielen unten und oben links ganz gut. Dies ist auch logisch, da das eigentliche Element viel größer als der zur Verfügung stehende Platz ist - die Slides werden mittels Animation aus dem nicht-sichtbaren in den sichtbaren Bereich verschoben; das es noch mehr Elemente als sichtbar gibt, indiziert der Browser durch Scrollbalken.
Was du ggf suchst ist
dots - dies fügt unter den Swiper noch Punkte für die Anzahl der Slides hinzu (siehe im example (https://knowthelist.github.io/ftui/www/ftui/examples/swiper.html) mitte links mit der Waschmaschine) - die Punkte gibst du dem ftui-swiper als parameter
dots in der
dwd-warn_content.html mit.
Ist hier auch OT.
Zitat von: meier81 am 05 Dezember 2022, 18:40:25Zudem habe ich aber auch das Problem das mit deinem Code
<ftui-label color="danger" slot="close" popup-close>Close</ftui-label>
ich zwar den Sliderbalken sehe, ich aber oben rechts in der Ecke mit "close" das Fenster nicht schließen kann. Ich muss außerhalb des Popups klicken damit das Popup zugeht.
Versuch mal
<ftui-label color="danger" slot="close" @click="DWDWarnPop.close()">Close</ftui-label>
Hallo yersinia,
danke für den Hinweis mit dem schließen.
Bezüglich dem anzeigen vom Scrollbalken war ich mir schon bewusst dass das hier OT ist, deshalb hatte ich es nur kurz erwähnt, hier aber nicht weiter hinterfragt.
Aber sonst kann ich nur sagen: tolle Anzeige der Warnungen, funktioniert soweit einwandfrei!
Gruß Markus
Aus gegebenem Anlass:
Zitat von: mr_petz am 09 Dezember 2022, 11:13:28Hi Markus,
Du könntest es so in der content-dwd_warnung-slide.html machen:
<div class="dwd-warn" style="height:80%">
Edit: oder ohne style in der class dwd-warn position: absolute; in position: relative; ändern...
Da hier die class dwd-warn 100% Höhe haben möchte mit 'position: absolute;'...
@yersinia: 'position: relative;' dürfte hier angebrachter sein...
Edit2: und bzgl. ohne header müsste man z-index: -1; in der class dwd-warn mitgeben um das popup mittels x schließen zu können. das div legt sich über das x
Als Vorschlag - die inline-CSS überschreibt sowieso die Definition aus der dwd-warn.css:
<div class="dwd-warn" style="position: relative; height: 100%;">