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

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

Vorheriges Thema - Nächstes Thema

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

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... ???
viele Grüße, yersinia
----
FHEM 6.3 (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

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
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ü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: 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.
viele Grüße, yersinia
----
FHEM 6.3 (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,
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
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

yersinia

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.
viele Grüße, yersinia
----
FHEM 6.3 (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

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

meier81

#52
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:
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

MDietrich

Moin Markus,
ich kann den Screen-Shot leider nicht sehen.
Gruß,
Matthias
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

meier81

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ß
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

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:

  <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.
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

meier81

So, hab jetzt wieder 2 Warnungen, sliden geht, Sliderbalken wird keiner angezeigt. Und das grid wird von der Höhe leider nicht ausgenutzt.
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

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:
  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
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

meier81

#59
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.
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices