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

Begonnen von yersinia, 17 Januar 2021, 20:11:44

Vorheriges Thema - Nächstes Thema

netlars

ja, kann auch sein, dass hatte ich heute morgen aus dem Gedächtnis geschrieben.

yersinia

Ich habe deinen Vorschlag allerdings mit 2px übernommen.
Zitat2022-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
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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

RockFan

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
Raspbian (Buster) auf Raspberry Pi 4 /  CUL + RFXTRX + TCM / FS20, FHT 80B, S300TH, Intertechno, DMX, Milight, EnOcean, Homematic, AMAD, Home Connect, MiSmartHome, Yeelight, ...

yersinia

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.
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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

RockFan

Raspbian (Buster) auf Raspberry Pi 4 /  CUL + RFXTRX + TCM / FS20, FHT 80B, S300TH, Intertechno, DMX, Milight, EnOcean, Homematic, AMAD, Home Connect, MiSmartHome, Yeelight, ...

MDietrich

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

yersinia

#36
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 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 übernommen.
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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

MDietrich

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&uuml;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

yersinia

#38
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 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.
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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

yersinia

#39
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
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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

MDietrich

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

yersinia

#41
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
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.
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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

MDietrich

Supi, funktioniert einwandfrei und es sieht gut aus!

Herzlichen Dank
MDietrich

RockFan

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
Raspbian (Buster) auf Raspberry Pi 4 /  CUL + RFXTRX + TCM / FS20, FHT 80B, S300TH, Intertechno, DMX, Milight, EnOcean, Homematic, AMAD, Home Connect, MiSmartHome, Yeelight, ...

yersinia

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.
viele Grüße, yersinia
----
FHEM 6.2 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | 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