FTUI version 3

[mr_petz]

@mr_petz sorry, daran hatte ich nicht gedacht (wald, bäume und so)
verstehen würde ich das aber auch gern. ist das nur das ftui-row, das das bewirkt?

frui-row macht eine Zeile.
ftui-cell packt alles dicht zusammen.
man kann immer width und height mitgeben...
Schau dir wie gesagt immer die examples an, da kann man schon viel rauslesen...

[pula]

@mr_petz: Danke! Das mit dem examples anschauen versuche ich, aber anscheinend such ich an den falschen Stellen

Was anderes: Die Frage kam hier im Thread schon (hier: https://forum.fhem.de/index.php/topic,115259.msg1229671.html#msg1229671), aber in anderer Form.
Würde evtl gerne bei den Icons einen Tooltip einbauen (statistics änderung 1h) oder so. Scheint so out of the box aber nicht zu gehen, oder?
Cheers,
Pula

[mr_petz]

Da könntest du einen badge verwenden:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/badge.html

Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/badge.html

LG

[pula]

Super, vielen Dank für den Hinweis! Badge kannte ich noch nicht.
Ich finde, das sieht gar nicht so verkehrt aus und macht auf einem tablet auch mehr Sinn als ein tooltip...

[pula]

@mr_petz und @OdfFhem
Vielen Dank für Eure Arbeit hier, insbesondere das calview-widget ist super.
Da ich relativ viele ganztägige Ereignisse in den Kalendern habe und die von meinem Kalender-Provider (Kopano) an fhem mit btime und etime jeweils 00:00 übergeben werden, habe ich mir Euren code angesehen, weil ich bei solchen Terminen keine Anfangszeit sehen möchte, sondern einfach nichts.
Ich habe in calview.component.js daher folgendes geändert:

Code Auswählen Erweitern

@@ -180,7 +180,7 @@
             this.data['t_'+num+'_bdate'] = (this.hasAttribute('date_wday')?this.data['t_'+num+'_bdate'].split().map(x => x.substr(0,6)+'  '+wdayx.substr(0,2)):this.data['t_'+num+'_bdate'].split().map(x => wdayx.substr(0,2)+', '+x.substr(0,6)));
             this.data['t_'+num+'_edate'] = this.data['t_'+num+'_edate'].split().map(x => wdayx.substr(0,2)+', '+x.substr(0,6));
           }
-
+        if (this.data['t_'+num+'_btime'] == '00:00' && this.data['t_'+num+'_etime'] == '00:00') this.data['t_'+num+'_btime'] = '';
         let daysleftIdx = daysleftdata.length-1;
         let blinkIdx = daysleftdata.length-1;
         let coltxtcolor = '';

Ist natürlich nicht weltbewegend, aber vielleicht kanns der eine oder andere ja brauchen - oder ihr habt Lust, das evtl fix einzubauen? Ich hab allerdings keine Ahnung, wie die readings bei anderen Kalender-Providern befüllt werden....
Cheers,
Pula

[mr_petz]

@pula
Ich werde es so nicht ändern im Code.
Entweder du erledigst das schon auf der FHEM Seite mit DoIf z.Bsp. oder man könnte wenn beides 00:00 ist, ganztägig oder ganztags oder 24h anzeigen lassen. Das wäre ja ganztägig wenn begin- und endtime 00:00 ist?

LG mr_petz

[Grisu1079]

Hallo zusammen,

Zwei Fragen:

1. bei FTUI2 konnte ich direkt über
das anhängen von z.b. "#batteryp.html" an die URL von FTUI direkt die Unterseite batteryp.html aufrufen (nutze mehrere Tablets und habe auf jedem per Default am Liebsten erstmal ne andere Unterseite)
Geht das bei FTUI3 auch irgendwie?

2. Hat schon jemand eine Mapping der DWD OpenData-Daten bzw. deren Wetter-Symbol-Mapping in FTUI3 realisiert? Proplanta ist zwar nett aber mit dem DWD konnte ich mir für den jeweiligen Tag ne 2-Stunden Rhythmus Vorhersage darstellen. Siehe im Anhang.
Der Code für so eine einzelne Wetterzelle in FTUI2 war bei mir so:

Code Auswählen Erweitern

<div class="container">
<div class="col-1-12">
<div data-type="label" data-device="DWD2" data-get="par01_time" class="centered"></div>
<div data-type="weather" data-device="DWD2" data-get="par01_ww" data-imageset="kleinklima" style="width:48px" class="centered" data-warn="DWD2:a_count" data-warn-class="big"></div>
<div data-type="label" data-device="DWD2" data-get="par01_wwd" class="centered w1x" style="font-size : 70%"></div>
<div data-type="label" data-device="DWD2" data-get="par01_TTT" data-unit="%B0C%0A" data-fix="0" class="centered" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
<div data-type="label" data-device="DWD2" data-get="par01_FX1" data-unit="km/h" data-fix="0" class="centered" ></div>
<div data-type="label" data-device="DWD2" data-get="par01_Rh00" data-unit="%" data-fix="0" class="centered inline" data-color="cyan"></div>
<div data-type="label" data-device="DWD2" data-get="par01_RRhc" data-unit="mm" data-fix="1" class="centered inline" data-color="cyan"></div>
</div>
</div>


Grüße
Markus

[yersinia]

1. bei FTUI2 konnte ich direkt über
das anhängen von z.b. "#batteryp.html" an die URL von FTUI direkt die Unterseite batteryp.html aufrufen (nutze mehrere Tablets und habe auf jedem per Default am Liebsten erstmal ne andere Unterseite)
Geht das bei FTUI3 auch irgendwie?

Wenn du Unterseiten hast und nutzt, geht das auch bei FTUI3 - einfach unter http://<FHEM-IP>:<FTUI-Port(evtl 8085)>/fhem/ftui/<deine_seite.html> aufrufen.

2. Hat schon jemand eine Mapping der DWD OpenData-Daten bzw. deren Wetter-Symbol-Mapping in FTUI3 realisiert? Proplanta ist zwar nett aber mit dem DWD konnte ich mir für den jeweiligen Tag ne 2-Stunden Rhythmus Vorhersage darstellen. Siehe im Anhang.

Die Label kannst du quasi 1:1 durch ftui-label ersetzen, für die weather-component (ftui-weather) fehlt noch das mapping von DWD Werten (provider) auf das Iconset (siehe auch weather.map.js) - also kannst du dies derzeit ohne weitere Adaptionen nicht 1:1 ersetzen.

[mr_petz]

...für die weather-component (ftui-weather) fehlt noch das mapping von DWD Werten (provider) auf das Iconset (siehe auch weather.map.js) - also kannst du dies derzeit ohne weitere Adaptionen nicht 1:1 ersetzen.

Sollte es laut:
https://forum.fhem.de/index.php/topic,86847.msg830538.html#msg830538
mit dem kleinklimaFHEM mapping gehen mit angepassten mapping?

LG

Edit: wie sehen die Iconreadings aus? Wie im Link?

[pula]

@pula
Ich werde es so nicht ändern im Code.
Entweder du erledigst das schon auf der FHEM Seite mit DoIf z.Bsp. oder man könnte wenn beides 00:00 ist, ganztägig oder ganztags oder 24h anzeigen lassen. Das wäre ja ganztägig wenn begin- und endtime 00:00 ist?

LG mr_petz

@mr_petz:
Danke nochmal für Eure Bemühungen hier!
Sorry, anscheinend hab ich mich nicht klar genug ausgedrückt. Ja, genau. Es geht um ganztägige Ereignisse.
Ich weiß nicht, ob man die internen readings von calview (zb per doif) überschreiben könnte. Schöner würde ich es aber finden, wenn das widget das erledigen würde. Auch weil ich sicher nicht der einzige bin, der das schön finden würde.
Ob da jetzt dann - wie in meinem Vorschlag - nichts drinsteht oder ganztags oder ganztägig ist dann Geschmackssache. Mein Geschmack wäre, wenn nichts drin steht. Noch schöner wäre vermutlich, wenn man das als Parameter irgendwie mitgeben könnte, dann könnte jede(r) das nach seinem persönlichen Geschmack mitgeben.
Cheers,
Pula

[mr_petz]

Hi Pula,
wir sollten hier weiter diskutieren:
https://forum.fhem.de/index.php/topic,120379.0.html
LG

[yersinia]

Sollte es laut:
https://forum.fhem.de/index.php/topic,86847.msg830538.html#msg830538
mit dem kleinklimaFHEM mapping gehen?

Du musst doch erst von den Zuständen des providers (= DWD) auf interne Werte übersetzen um dann das entsprechende Icon aus dem Iconset auszuwählen. Basierend auf somansch' Übersetzung für FTUI2 könnte man

Code Auswählen Erweitern

'leichter Sprühregen mit Regen': 'SHOWERS',
und dann (für zB Kleinklima)

Code Auswählen Erweitern

SHOWERS: './icons/weather/kleinklima/rain.svg',
machen.

Anbei ein Vorschlag, wie man DWD übersetzen könnte - basierend auf somansch' Vorarbeit:

Code Auswählen Erweitern

  dwd: {
    'äußerst heftiger Regenschauer': 'SHOWERS',
    'Bewölkung abnehmend': 'PARTLY_CLOUDY',
    'Bewölkung unverändert': 'CLOUDY',
    'Bewölkung zunehmend': 'OVERCAST',
    'Bewölkungsentwicklung nicht beobachtet': 'SUNNY',
    'durchgehend leichter Regen': 'SHOWERS',
    'durchgehend leichter Schneefall': 'SNOW',
    'durchgehend leichter Sprühregen': 'DRIZZLE',
    'durchgehend mäßiger Regen': 'SHOWERS',
    'durchgehend mäßiger Schneefall': 'SNOW',
    'durchgehend mäßiger Sprühregen': 'DRIZZLE',
    'durchgehend starker Regen': 'SHOWERS',
    'durchgehend starker Schneefall': 'SNOW',
    'durchgehend starker Sprühregen': 'DRIZZLE',
    'leichter gefrierender Regen': 'RAIN_SNOW',
    'leichter gefrierender Sprühregen': 'RAIN_SNOW',
    'leichter Regenschauer': 'scatteredSHOWERS',
    'leichter Schneeregen': 'RAIN_SNOW',
    'leichter Schneeregenschauer': 'RAIN_SNOW',
    'leichter Schneeschauer': 'SNOW',
    'leichter Sprühregen mit Regen': 'SHOWERS',
    'leichtes oder mäßiges Gewitter mit Graupel oder Hagel': 'SCATTERED_THUNDERSTORM',
    'leichtes oder mäßiges Gewitter mit Regen oder Schnee': 'SCATTERED_THUNDERSTORM',
    'mäßiger oder starker gefrierender Regen': 'RAIN_SNOW',
    'mäßiger oder starker gefrierender Sprühregen': 'RAIN_SNOW',
    'mäßiger oder starker Graupelschauer': 'THUNDERSTORM',
    'mäßiger oder starker Hagelschauer': 'THUNDERSTORM',
    'mäßiger oder starker Regenschauer': 'SHOWERS',
    'mäßiger oder starker Schneeregen': 'RAIN_SNOW',
    'mäßiger oder starker Schneeregenschauer': 'RAIN_SNOW',
    'mäßiger oder starker Schneeschauer': 'SNOW',
    'mäßiger oder starker Sprühregen mit Regen': 'SHOWERS',
    'Nebel in einiger Entfernung': 'FOGGY',
    'Nebel in Schwaden oder Bänken': 'FOGGY',
    'Nebel mit Reifansatz, Himmel erkennbar': 'FOGGY',
    'Nebel mit Reifansatz, Himmel nicht erkennbar': 'FOGGY',
    'Nebel, Himmel erkennbar, dichter werdend': 'FOGGY',
    'Nebel, Himmel erkennbar, dünner werdend': 'FOGGY',
    'Nebel, Himmel erkennbar, unverändert': 'FOGGY',
    'Nebel, Himmel nicht erkennbar, dichter werdend': 'FOGGY',
    'Nebel, Himmel nicht erkennbar, dünner werdend': 'FOGGY',
    'Nebel, Himmel nicht erkennbar, unverändert': 'FOGGY',
    'Sicht durch Rauch oder Asche vermindert': 'FOGGY',
    'starkes Gewitter mit Graupel oder Hagel': 'THUNDERSTORM',
    'starkes Gewitter mit Regen oder Schnee': 'THUNDERSTORM',
    'starkes Gewitter mit Sandsturm': 'THUNDERSTORM',
    'unterbrochener leichter Regen oder einzelne Regentropfen': 'SHOWERS',
    'unterbrochener leichter Schneefall oder einzelne Schneeflocken': 'SNOW',
    'unterbrochener leichter Sprühregen': 'DRIZZLE',
    'unterbrochener mäßiger Regen': 'SHOWERS',
    'unterbrochener mäßiger Schneefall': 'SNOW',
    'unterbrochener mäßiger Sprühregen': 'DRIZZLE',
    'unterbrochener starker Regen': 'SHOWERS',
    'unterbrochener starker Schneefall': 'SNOW',
    'unterbrochener starker Sprühregen': 'DRIZZLE',
  },
Würde ich hinter weather.map.js Z95 einfügen.

[mr_petz]

Sehr schön, hast es schon im Weatherthread ergänzt.
LG

[Grisu1079]

Hi,

Wenn du Unterseiten hast und nutzt, geht das auch bei FTUI3 - einfach unter http://<FHEM-IP>:<FTUI-Port(evtl 8085)>/fhem/ftui/<deine_seite.html> aufrufen.

Hmm. Meine Unterseite sind eingebunden via:

Code Auswählen Erweitern

<ftui-column>
        <ftui-tab view="startp" direction="vertical" shape="circle" fill="solid" active>
          <ftui-icon name="home1" @click="setLocalDefault()"></ftui-icon>
          <!--<ftui-label>Home</ftui-label>-->
        </ftui-tab>
        <ftui-tab view="rollp" direction="vertical" shape="circle" fill="solid">
          <ftui-icon name="fts_shutter_50" path="../images/openautomation" @click="setLocalDefault()"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="phonep" direction="vertical" shape="circle" fill="solid">
          <ftui-icon name="phone_call" path="../images/openautomation" @click="setLocalDefault()"></ftui-icon>
        </ftui-tab>
</ftui-column>


und dann weiter unten via:

Code Auswählen Erweitern

    <ftui-tab-view id="startp">
    <ftui-grid-tile row="1" col="2" height="10" width="19">
<ftui-content file="startp.html"></ftui-content>
</ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="rollp">
    <ftui-grid-tile row="1" col="2" height="10" width="19">
<ftui-content file="rollp.html"></ftui-content>
</ftui-grid-tile>
    </ftui-tab-view>
    <ftui-tab-view id="phonep">
    <ftui-grid-tile row="1" col="2" height="10" width="19">
<ftui-content file="phonep.html"></ftui-content>
</ftui-grid-tile>

Rufe nun z.B. auf http://<FHEM-IP>:<FTUI-Port(evtl 8085)>/fhem/ftui/phonep.html dann sehe ich nur den (unformatierten) Inhalt der Unterseite, aber ich will ja die ganz normale FTUI-Ansicht mit "Hauptmenü" etc. haben nur, dass halt statt des Default-ftui-tab-view id="startp" der ftui-tab-view id="phonep" erscheint...

Grüße
Markus

[yersinia]

Schau dir mal ftui-content an, da wird der html code auch geladen und formatiert.
Du kannst dir auch, wenn du FTUI3 installiert hast, mal die dortige index.html als Beispiel ansehen. Da sieht man gut, wie die neue Struktur inklusive Menü funktioniert.