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

[netlars]

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

[yersinia]

Ich habe deinen Vorschlag allerdings mit 2px übernommen.

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

[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

[yersinia]

Hi RockFan

Jetzt eine vielleicht ganz doofe Frage 

die Frage ist ganz und gar nicht doof.

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?

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.

[RockFan]

Prima

Ich danke für's Modul 

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

Installation und Einbindung in eine Testseite haben auf Anhieb geklappt.
Danke sehr für deinen Beitrag!!

Vielen Dank für das Feedback.

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

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.

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:

Code Auswählen Erweitern

  grid-template-rows: minmax(100px, auto);
Zeile 169 in der class .dwd-warn-content-description ersetze height:

Code Auswählen Erweitern

  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.

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

Code Auswählen Erweitern


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

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:

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:

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

[yersinia]

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!

[MDietrich]

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]

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.

Eine 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;:

Code Auswählen Erweitern

        .dwd-warn-triangle-svg {
          fill: white;
          stroke-width: 70;
          stroke-linejoin: round; /* <-- hier */
          fill-rule: nonzero;
        }
Oder nimm' die anhängende.

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

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.

[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

Code Auswählen Erweitern

  <ftui-grid>


grid-tile sieht dann so aus:

Code Auswählen Erweitern


      <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

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