FTUI version 3

[meier81]

Hallo,

mal ne Frage, wurde bezüglich dem Attribut "badge" was angepasst? Habe bei mir meine Müllsymbole wie folgt definiert

Code Auswählen Erweitern

      <ftui-column>
        <ftui-icon name="trash" color="black" [class-name]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
                    [color]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:red, 1:yellow')"
                    [hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days"
                    [hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>

Hab aber leider hier nur noch die Icons angezeigt, leider keine badges mehr.

[StephanFHEM]

du musst bei der Anzeige größer 1 das map in step ändern. Er prüft bei map nur noch den genauen Wert. In deinem Fall definierst du aber ab 1 ab 2 ... also step

[StephanFHEM]

hab das bei mir auch erfolgreich umgesetzt (mit Reading in FHEM). Was ich noch nicht hinbekommen habe: wenn ich über mein Haupt-Menü auf Licht schalte macht er den Licht-TAB auf. Darauf ist der Segment-Button über den man den Raum auswählen kann welcher dann wieder über einen eigenen View angezeigt wird. Obwohl die ID im Reading bereits auf einem Raum steht wird beim ersten öffnen aber nichts angezeigt. Ich muss quasi erst nochmal einen Raum wählen bevor er etwas zeigt. Kann man da nicht irgendwas als Standard-Aktiv setzen? Das gleiche Verhalten hast du in deinem Beispiel übrigens auch. Beim ersten öffnen der Seite wird nichts angezeigt.

Falls jemand das gleiche Problem hat, ich habe es jetzt wie folgt gelöst: ich habe die Tab-Views gegen rows ersetzt und die rows anstatt der tab-views mit dem hidden Attribut versorgt

Code Auswählen Erweitern

<ftui-row [hidden] = "Raum | isNot('Flur')">
Er blendet jetzt immer den per Segment-Button gewählten Raum direkt an und merkt sich diesen auch wenn die Seite gewechselt wird.

[flauschkoenig]

Hallo zusammen,

zunächst:
Ich bin echt begeistert was diese UI in der Version 3 kann. Ich bin erst jetzt in die Welt der Automation eigestiegen, zwangsläufig, da der Bau des Eigenheims mit starken Schritten voranschreitet.
Ich versuche jetzt schon Erfahrung zu sammeln um später möglichst schnell meine Automatisierung aufzubauen.
Bei der Auswahl der vielen Systeme fiel meine Wahl zuletzt auf FHEM.

Jetzt zur eigentlichen Frage:
Ich möchte ein Weather Forecast auf dem FTUI anzeigen lassen aber ich kriege nur N/A angezeigt.
Mein Code sieht folgendermaßen aus:

Code Auswählen Erweitern


<ftui-grid-tile row="5" col="5" height="4" width="8" shape="round">
      <ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_temp18"></ftui-weather>
      <!-- <ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
      <!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
      <!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDay"></ftui-weather> -->
</ftui-grid-tile>


Mein Device heißt ganz einfallslos ProPlanta.
Die Readings sind soweit alle vorhanden.
Laut Doku soll ich das Reading fc1_weatherDayIcon für das Icon nehmen, das tut aber nicht.
Offensichtlich habe ich noch Fehler im Code. Ich sehe sie nur nicht.
Die auskommentierten Zeilen sind meine Versuche. Alle gescheitert.
Weiß jemand weiter?

[meier81]

du musst bei der Anzeige größer 1 das map in step ändern. Er prüft bei map nur noch den genauen Wert. In deinem Fall definierst du aber ab 1 ab 2 ... also step

Super, ich danke dir. Hab ich echt übersehen, an den anderen Stellen hatte ich das schon angepasst, bei dieser hier war ich wohl zu blind und dachte die kann so bleiben 

Gruß Markus

[Eisix]

Das Update hat bei mir nicht gereicht.

Code Auswählen Erweitern


                        <ftui-row align-items="right">
                                <ftui-row class="myspinner" style="margin-right:30px;">
                                        <ftui-cell>
                                                <ftui-button [value]="{{FBH}}:tempDay"
                                                        (value)="add(-0.5) | attr {{FBH}} tempDay $value"
                                                        states="$value"
                                                        fill="">
                                                        <ftui-icon class="size-1"
                                                                name="minus"
                                                                color="blue">
                                                        </ftui-icon>
                                                </ftui-button>
                                        </ftui-cell>
                                        <ftui-cell>
                                                <ftui-label
                                                        [text]="{{FBH}}:tempDay"
                                                        [color]="{{FBH}}:tempDay | map('5:blue, 20:mygreen, 23:red')"
                                                        class="size-4"><span slot="end">°C</span>
                                                </ftui-label>
                                        </ftui-cell>
                                        <ftui-cell>
                                                <ftui-button [value]="{{FBH}}:tempDay"
                                                        (value)="add(0.5) | attr {{FBH}} tempDay $value"
                                                        states="$value"
                                                        fill="">
                                                        <ftui-icon class="size-1"
                                                                name="plus"
                                                                color="red">
                                                        </ftui-icon>
                                                </ftui-button>
                                        </ftui-cell>
                                </ftui-row>
                        </ftui-row>



Setzt mir alle Temperaturwerte beim öffnen zurück. Hat vielleicht was mit dem selbstgebauten spinner zu tun.  Bin die nächsten 10 Tage weg und hab das Backup eingespielt. Geht also erstmal.

Gruß
Eisix

[StephanFHEM]

Ich möchte ein Weather Forecast auf dem FTUI anzeigen lassen aber ich kriege nur N/A angezeigt.

[...]
Weiß jemand weiter?

ich würde dir raten unter ftui/components/weather mal genau in die weather.map.js zu schauen.
Dort findest du die genaue Auflösung für dein Provider und dein Icon-Set. Es geht quasi von deinem Reading im FHEM-Device "Regen" zu "SHOWERS" im Proplanta-Provider. Wenn du dann das "Bas" Icon-Set jetzt wird "SHOWERS" zu "'./icons/weather/bas/bas_rain.svg'" ... damit kannst du dann in der Regel schauen was genau bei deiner Einstellung aus deinem Reading wird und wo genau das Icon liegen muss mit welchem Namen...

[mr_petz]

...
Jetzt zur eigentlichen Frage:
Ich möchte ein Weather Forecast auf dem FTUI anzeigen lassen aber ich kriege nur N/A angezeigt.
Mein Code sieht folgendermaßen aus:

Code Auswählen Erweitern


<ftui-grid-tile row="5" col="5" height="4" width="8" shape="round">
      <ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_temp18"></ftui-weather>
      <!-- <ftui-weather size="3" provider="proplanta" icon-set="proplantaICON" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
      <!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather> -->
      <!-- <ftui-weather size="3" provider="proplanta" [condition]="ProPlanta:fc1_weatherDay"></ftui-weather> -->
</ftui-grid-tile>

...

Hi. Du brauchst keinen provider und icon-set mit angeben wenn du die Standardicons haben willst.
Hier mal eine Demo ohne dein Device anzusprechen. Nur um zu sehen ob deine Icons auch vorhanden sind:

Code Auswählen Erweitern


<ftui-weather size="1" condition="sonnig"></ftui-weather>

Die Sonne sollte jetzt angezeigt werden.

Wenn ja sollte das so funktionieren:

Code Auswählen Erweitern


<ftui-weather size="3" [condition]="ProPlanta:fc1_weather06"></ftui-weather>

proplanta Provider ist Standard und muss nicht angegeben werden.
Die Standardicons sind die von dem Demobild auf Github.

Bsp. für bas-Icons:

Code Auswählen Erweitern


<ftui-weather size="3" icon-set="bas" [condition]="ProPlanta:fc1_weather06"></ftui-weather>


Diese icon-set´s gibt es:

icon-set="meteocons" (muss nicht angegeben/definiert werden) --> sind Standard in {dein ftui3 Ordner}/icons/
icon-set="kleinklima" --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/kleinklima/
icon-set="kleinklimaFHEM" --> Ordnerpfad = {fhem}/www/images/default/weather/ (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen))
icon-set="bas"  --> Ordnerpfad = {dein ftui3 Ordner}/icons/weather/bas/  (kann auch in Verbindung mit provider="proplantaICON" gesetzt werden (hier muss das Reading aber auf t1,t2 usw zielen-->

Code Auswählen Erweitern

[condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"))

Diese Ordner-Pfade und deren Inhalt muss natürlich vorhanden sein.

LG

[flauschkoenig]

Ok, so ein scheiss..ich muss meinen gesamten Beitrag neu schreiben..hoffentlich krieg ich das wieder zusammen..

Zunächst, vielen Dank für die Antworten, ich habe dadurch das System etwas besser verstanden.
Ich habe somit folgende Sachen probiert:

Code Auswählen Erweitern


<ftui-weather size="1" condition="sonnig"></ftui-weather>


Funktioniert.

Code Auswählen Erweitern


<ftui-weather size="3" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather>


Funktioniert nicht.

Code Auswählen Erweitern


<ftui-weather size="3" icon-set="bas" [condition]="ProPlanta:fc1_weatherDayIcon"></ftui-weather>


Funktioniert ebenfalls nicht.
Es erscheint immer nur N/A.

Aber selbst das Beispiel weather.html aus den examples liefert keine Icons, wie soll das dann bei mir funktionieren?
Ich habe nach den proplanta Icons gesucht aber auch gar keine gefunden.

Das Reading fc1_weatherDayIcon ist auch eine URL: https://www.proplanta.de/wetterdaten/images/symbole/t4.gif
Da sieht man das "t4".
Das ist auch in der weather_map.js vorhanden:

Code Auswählen Erweitern


t4: 'CLOUDY',


Unter dem providerSet proplandaICON.
Das habe ich mal versucht zu ändern in:

Code Auswählen Erweitern


'https://www.proplanta.de/wetterdaten/images/symbole/t4.gif': 'CLOUDY',

Auch wieder N/A.
Was aber am Ende auch logisch ist, da die Icons nicht auf dem System sind.
Ich dachte er ruft die Url auf und holt sich das Icon da her, das geht nämlich problemlos:

ubuntu@ubuntu:~$ curl --output gif.gif https://www.proplanta.de/wetterdaten/images/symbole/t4.gif
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   637  100   637    0     0   5491      0 --:--:-- --:--:-- --:--:--  5491

ubuntu@ubuntu:~$ ls -l g*
-rw-rw-r-- 1 ubuntu ubuntu 637 Oct 13 09:25 gif.gif
ubuntu@ubuntu:~$

Ich könnte mir natürlich so in einer Stunde Arbeit alle Icons holen und sie in den Ordner icon packen, dachte ich.
Hab ich mal so für das t4 icon gemacht

Code Auswählen Erweitern


ubuntu@ubuntu:/opt/fhem/www/ftui/icons$ ls -l t4
-rwxrwxrwx 1 fhem dialout 637 Oct 13 10:10 t4
ubuntu@ubuntu:/opt/fhem/www/ftui/icons$


Und es funktioniert..nicht.
Auch hiermit nicht (dann wird ja nur t4 ausgegeben)

Code Auswählen Erweitern


<ftui-weather size="3" [condition]="ProPlanta:fc1_weatherDayIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>

Ich muss doch irgendwie einen Denkfehler haben, so schwierig kann das doch nicht sein?

[mr_petz]

Das Device ProPlanta gibt es?
Was Steht im Reading?

Edit:
Zeig am besten mal dein Device.

[flauschkoenig]

Moin, klar

Code Auswählen Erweitern


Internals
CFGFN

DEF
Frankfurt+am+Main de
FUUID

6165db03-f33f-823f-f392-4eb67a4db79325f3
INTERVAL

3600
NAME

ProPlanta
NR

546
STATE

Tmin: 5 Tmax: 13 T: 7.2 H: 100 W: 7.2 P: 1024.8
TYPE

PROPLANTA
URL

https://www.proplanta.de/Wetter/profi-wetter.php?SITEID=60&PLZ=Frankfu[...]


Readings:

Code Auswählen Erweitern


fc1_weatherDayIcon

https://www.proplanta.de/wetterdaten/images/symbole/t4.gif

2021-10-13 10:00:20


[mr_petz]

Ja das Reading muss ja sonnig usw liefern. Hast du da eins?
War von mir falsch geschrieben mit Icon. Sorry

so müsste es sein:

Code Auswählen Erweitern


ProPlanta:fc1_weatherDay


[flauschkoenig]

Moin,

ja

fc1_weatherDay
   
stark bewölkt
   
2021-10-13 10:00:20

Und da liegt auch der Hund begraben.

Jetzt wird auch ein Symbol angezeigt, vielen Dank.
Leider ist es an zu vielen Stellen im Forum einfach unverständlich oder gar falsch angegeben. Ich hoffe, dass der Post auch anderen hilft.
Der Rest dürfte sich dann automatisch erschließen, wenn man einmal weiß was die Software eigentlich von einem will.

[mr_petz]

Sollte sich seit gestern Abend erledigt haben. Ich habe das Ganze noch mal grundlegend geändert.

Für alle mit eigenen Komponenten:

Soll eine Wertänderungen auch ein Senden auslösen, muss sie per

      this.submitChange(<propertyName>, <value>);

aufgerufen werden. Bei  nur  this.value = value; passiert das nicht mehr

https://github.com/knowthelist/ftui/commit/684ce106a4c6c5f2634d40897d51584c5db53e3a

Hi setstate.
Danke für den Hinweis.
Da muss man nicht mit this.getAttribute() auslesen was definiert ist.
Aber jetzt zur Frage (Da blicke ich noch nicht durch).
Wie kann ich trotzdem das definierte device:reading als Text auslesen? Mit this.getAttribute() ja nicht mehr???
Macht dann noch fhemService.sendCommand() sinn? Oder wie kann man das dann noch nutzen?
Danke für die Erleuchtung 

LG mr_petz

[setstate]

Nachher die Bindingkonstrukte noch im DOM zu haben macht keinen Sinn, da sie ja geordnet in den entsprechenden Membern abgelegt sind und man sie ganz leicht abfragen kann. Ich habe auch schon für gängige Abfragen Helperfunktionen gebaut.

Habe ich erst neulich im Speak benutzt. Schau dir das dort mal an.

Abfragen, welches FHEM-Reading für Attribute XY benutzt wird:

Code Auswählen Erweitern


this.readingName = this.binding.getReadingsOfAttribute('text')[0];


Das ist ein Array, deshalb das

Code Auswählen Erweitern

[0]

Abfrage, welche Werte, Zeiten und Gültigkeit dazu bekannt sind:

Code Auswählen Erweitern


const readingData = fhemService.getReadingItem(this.readingName).data;

.... readingData.time
.... readingData.value