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

[yersinia]

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

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.

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

[RockFan]

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) 

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

[yersinia]

Danke für die Rückmeldung!

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   

Schau mal in den post #38: in der css Datei dwd-warn.css gibt es im oberen Bereich unter :root die Möglichkeit, die Textgröße anzupassen:

Code: [Auswählen]

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

[RockFan]

Cool! Danke das hatte ich übersehen.

[MDietrich]

Hallo yersinia,
mein Favorit ist die SVG-Version

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

[yersinia]

Danke MDietrich für deine Meinung.

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

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

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.

[RockFan]

Oops, vergessen auf die Umfrage zu antworten.
Ich bevorzuge auch die dritte Variante:

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

[meier81]

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:

[MDietrich]

Moin Markus,
ich kann den Screen-Shot leider nicht sehen.
Gruß,
Matthias

[meier81]

Moin Markus,
ich kann den Screen-Shot leider nicht sehen.
Gruß,
Matthias

Morgen Matthias,

war spät gestern, hab ich vergessen anzuhängen . Ist oben angehängt.

Gruß

[OdfFhem]

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

[meier81]

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:

Code: [Auswählen]

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

Code: [Auswählen]

<script src="modules/dwd-warn/dwd-warn.js" type="application/javascript"></script>
Inhalt der content-dwd_warnung-grid.html (Kommentare am Anfang weggelassen):

Code: [Auswählen]

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

[meier81]

So, hab jetzt wieder 2 Warnungen, sliden geht, Sliderbalken wird keiner angezeigt. Und das grid wird von der Höhe leider nicht ausgenutzt.

[MDietrich]

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:

Code: [Auswählen]

  height: 100%;ergänzt.

Die Darstellung mache ich über ein Popup:

Code: [Auswählen]

<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

Code: [Auswählen]

<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

[meier81]

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:

Code: [Auswählen]

  <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

Code: [Auswählen]

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