Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

Bunnu

Hallo Zusammen,

ich wollte jetzt anfangen mir eine UI auf Basis von FTUI zusammen zu bauen. Dabei habe ich festgestellt, dass setstate seit einigen Monaten an einer neuen Version (3) arbeitet (https://github.com/knowthelist/ftui). Im Repository stehen folgende Hinweise:

* This version is not compatible with older fhem-tablet-ui versions.
* This version is under construction.

Über die Suche bin ich nicht schlau geworden, daher möchte ich hier meine Fragen loswerden:

Wie stabil ist die neue Version? Kann ich diese schon (vielleicht mit kleineren Einschränkungen) verwenden?

Grüße,

Bunnu

setstate

Weiterentwickeln werde ich nur noch Version 3. Aber, wie du festgestellt hast, gibt es noch kaum (keine) Doku. Man kann sich das bis jetzt nur aus den Examples oder dem Code selbst rauslesen, was geht. Für Version zwei gibt es ein super Wiki, viele Beispiele und Experten hier im Forum.
Ich fange jetzt auch erst beim ersten Gerät an, auf die neue Version umzustellen. Dabei werde ich bestimmt auch noch feststellen, dass noch einiges fehlt oder noch nicht so optimal läuft.

Bunnu

Ich hatte mir das heute Vormittag angeschaut und bei meinem ersten Versuch gleich in etwas gelaufen, was noch nicht funktioniert: Punkte in Device-Namen (z.B. WC.Fenster). Wenn ich das auf die Schnelle richtig sehe, hat das etwas mit der Art und Weise zu tun, wie die Readings in der Config abgelegt werden. Das Reading enthalt noch den Punkt aus dem Device-Name, was vermutlich beim Parsen / Auslesen der config stört. (Z 118/119 in ftui.binding.js)

setstate

Die Art und Weise des Binding Parsen habe ich nochmal überarbeitet. Jetzt funktionieren auch Punkte '.' im Devicename und Reading


<body>
  <ftui-grid base-width="120" base-height="120">
    <ftui-grid-tile row="1" col="2" height="1" width="1" shape="round">
      <header>TEXT</header>

      <ftui-label [text]="dummy.P1:read.1"></ftui-label>

    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="3" height="1" width="2" shape="round">
      <header>SLIDER</header>

      <ftui-slider [value]="dummy.P1:read.1" (value)="setreading dummy.P1:read.1"></ftui-slider>

    </ftui-grid-tile>

  </ftui-grid>
</body>



Bunnu

#4
Super vielen Dank. Konnte es bei mir auch erfolgreich testen. :)

Generelle Frage: Wo soll ich Fehler melden, wenn mir welche auffallen

* Als Issue bei Github ? (meine Präferenz)
* In diesem Thread ?
* Als eigener Thread ?

Grüße,

Bunnu

setstate

Wie du möchtest: GitHub issue, PR oder hier im Forum.

grossmaggul

Hallo,

ich spiele gerade mit der neuen Version rum, sieht wirklich sehr gut aus und scheint auch recht flott zu sein.

Was mir aufgefallen ist, in der index.html sind wohl ein paar Tags zu viel, wenn ich das richtig sehe:
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
      <div class="column">
        <ftui-tab view="View1" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
        <ftui-tab view="View2"><ftui-icon name="music"></ftui-icon></ftui-tab>
        <ftui-tab view="View3"><ftui-icon name="feed"></ftui-icon></ftui-tab></ftui-tab>                       <-------------------Hier z.b.
        <ftui-tab view="View4"><ftui-icon name="lightbulb"></ftui-icon></ftui-tab></ftui-tab>
        <ftui-tab view="View5"><ftui-icon name="bath"></ftui-icon></ftui-tab></ftui-tab>
        <ftui-tab view="View6"><ftui-icon name="bath"></ftui-icon></ftui-tab></ftui-tab>
      </div>
    </ftui-grid-tile>


Dann versuche ich mich gerade an einem Müllkalender, wobei ich beim Versuch einen Badge anzulegen...
<ftui-badge color="danger" [text]="Tonnen:MuellKalender_Altpapier_days"></ftui-badge>

...eine Fehlermeldung erhalte:
label.component.js 41
Type Error: Cannot set Property
'Inner Text' of null


Mache ich was falsch oder ist es ein Bug?
Diese Fehlermeldung bekommt man allerdings auch, wenn man das Beispiel im Github ausprobiert.

Und gleich noch zwei Fragen, mir ist der Unterschied zwischen den eckigen und den runden Klammern bei z.B. 'value' nicht ganz klar.
Ist die eckige Klammer eine Ausgabe und die Runde eine Eingabe?

Und, lässt sich der 'Knob' "feststellen", also daß man den Wert beispielsweise bei einer Temperaturanzeige nicht verändern kann?

Soviel soweit, danke für Deine Arbeit!

gm
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

setstate

ja, da sind einige Tags zu viel. Zum Glück sind da die Browser tolerant. Das korrigiere ich.

Den Badge Bug habe ich korrigiert. Danke für den Hinweis.

Zum Thema Klammern bei Attributen:

Die Klammern bedeuten, dass diese Attribute eine direkte Bindung zu FHEM Readings haben.

eckige Klammer [value]="..."  ist die Kurzform für bind:value="..." und bedeutet Input oder Get

Man kann damit den Wert eines FHEM-Readings auf das Attribute binden.

Wenn man zum Beispiel das Label Attribute "text" folgendermaßen an ein Reading bindet ...
<ftui-label [text]="AgroWeather:state"></ftui-label>
... sieht man dann nachher, wenn man die Seite startet, in der Webconsole folgendes Bild im DOM


<ftui-label [text]="Weather:state" text="Tmin: 1 Tmax: 9 T: 5.9 H: 80.9 W: 10.8 P: 1025.4"></ftui-label>


Jede Änderung im Reading wird in das Attribute "text" geschrieben. Beim ftui-label sieht man text direkt als Text auf der Seite.
Man kann auch text ohne Binding fix definieren, um dann z.B. color per FHEM-Reading verändern lassen.


<ftui-label text="Warnungen" [color]="Weather:color""></ftui-label>


Für color sind einige feste Werte definiert, damit die Seite einheitlich wirken kann und nicht zu bunt wird. Die RBG Werte für diese Farben sind im benutzen Theme definiert

/* "primary", "secondary", "success", "warning", "danger", "light", "medium", "dark" */


Runde Klammer (value)="..." ist die Kurzform für on:value="..." bedeutet Output oder Set

Also jede Änderung des Attributes value wird an FHEM geschickt, um das gebundene Reading zu verändern.

<ftui-slider (value)="dummy1" ></ftui-slider>

Beim Slider will man eine Bindung ja in beide Richtungen haben, deshalb schreibt man

<ftui-slider [value]="dummy1" (value)="dummy1"></ftui-slider>

Ein Binding für Input und Output für das selbe Reading kann man auch per [(value)]="..."  bzw. bindon:value   zusammenfassen.

<ftui-slider [(value)]="dummy1"></ftui-slider>

Man kann jedes Binding auch durch eine Pipe von Funktionen schieben.

<ftui-icon [name]="dummy1 | map('on: window-open, off: window-closed')"  [color]="dummy1 | map('on: danger, off: medium')">

Bis jetzt gibt es folgende Pipe-Funktionen:

part(value)
toDate(value)
toBool()
toInt()
format(value)
round(value)
add(value)
multiply(value)
replace(find, replace)
map(value)

<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1) "></ftui-label>


Thema Knob:

Feststellen geht per readonly Attribute

<ftui-knob [value]="THSensorWZ:temperature" width="120" offset-y="10"
                   type="handle" min="19" max="25" unit="°C" readonly has-value-text></ftui-knob>


man könnte auch noch die Farbe per color Attribute verändern

[color]="THSensorWZ:temperature | map('0: success, 10: warning, 30: danger')"



Thyraz

Zitat von: setstate am 11 November 2020, 22:04:31
Bis jetzt gibt es folgende Pipe-Funktionen:

part(value)
toDate(value)
toBool()
toInt()
format(value)
round(value)
add(value)
multiply(value)
replace(find, replace)
map(value)

<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1) "></ftui-label>

Auch wenn ich schon viel Zeit im Code von v3 verbracht habe, dass war mir bisher auch noch nicht klar. :)

Gut, dass jemand gefragt hat.  ;D
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

grossmaggul

#9
Danke sehr für Deine Ausführung und die Behebung der Bugs, setstate!

Zitatman könnte auch noch die Farbe per color Attribute verändern
Das hatte ich bereits eingebaut. :)

Noch zu den Farben, wenn ich das richtig verstehe kann man nur die im Theme hinterlegten Farben nutzen und nicht durch die Angabe von z.B. '#123456' eigene Farben verwenden?
Hintergrund der Frage sind die Farben der "Mülltonnen", die mit den Theme Farben nicht alle abgebildet werden könnten.

Achso und nochwas, gibt es eine Möglichkeit Templates zu nutzen?

Mir ist gerade noch etwas auf einem Android 8 Smartfon aufgefallen, dort habe ich Ftui 3 in einem Fully Browser (mit Brave* ist das Verhalten gleich) laufen.
Eine Checkbox:
<ftui-grid-tile row="3" col="7" height="2" width="2" shape="round">
          <header>Licht Wohnzimmer</header>
          <div class="cell">
          <ftui-icon [name]="wz.alle | map('on:lightbulb-on-outline, off:lightbulb-outline')" [value]="wz.alle"></ftui-icon>
          <ftui-checkbox [(value)]="wz.alle" texts="on,off" class="small"></ftui-checkbox>
          </div>
      </ftui-grid-tile>


Schalte ich auf 'on'  werden die Lampen nicht geschaltet, schalte ich auf 'off' gibt es eine Fehlermeldung:
ftu.binding,js:84
TypeError.String(...) replaceAll is not a function


Auf einem iPhone und einem Mac funktioniert's wie gewünscht.

Und gleich noch eine Frage, wenn ich schonmal dabei bin(;), lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?

* Da gibt es noch eine weitere Fehlermeldung:
chart.min.js:6
Error: 1605135600000 and
1605222000000 are too far apart with
stepSize of 1 millisecond

FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

Thyraz

Wenn man in die color-attributes CSS schaut, sieht man dass hier je nach gesetztem color Wert im HMTL ein paar CSS Variablen belegt werden.
Zum Beispiel so:


[color="primary"] {
  --color-base: var(--primary-color);
  --color-contrast: var(--primary-contrast-color);
  --color-shade: var(--seagreen);
}


In den Komponenten wird dann die Variable im CSS File verwendet um die aktive Farbe zu setzen:

color: var(--color-base);


Du kannst ja wie früher wieder User CSS Files in deiner Index.html einbinden und dort eigene Farben nach dem obigen Schema anlegen


[color="biotonne-on"] {
  --color-base: #8B4513
  --color-contrast: var(--white);
  --color-shade: var(--seagreen);
}

[color="biotonne-off"] {
  --color-base: #000000
  --color-contrast: var(--white);
  --color-shade: var(--seagreen);
}


Der CSS Code bedeuted ja nichts anderes, als dass der CSS Block für jedes Element greift, welches ein color Attribute hat, welche einen bestimmten Wert hat.
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Thyraz

Zitat von: grossmaggul am 12 November 2020, 13:50:56
Und gleich noch eine Frage, wenn ich schonmal dabei bin(;), lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?

* Da gibt es noch eine weitere Fehlermeldung:
chart.min.js:6
Error: 1605135600000 and
1605222000000 are too far apart with
stepSize of 1 millisecond


Wie sieht denn dein Code dazu aus?
Der Fehler sieht aus als ob du ein Chart erstellen willst und kein Icon.  :o
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Thyraz

Zitat von: grossmaggul am 12 November 2020, 13:50:56
lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?

Ich denke andersrum wird ein Schuh draus: Man kann ein Button mit Icon nutzen (und ohne Text).

So z.B:

<ftui-button color="transparent">
    <ftui-icon name="lightbulb" [name]="MyDevice:MyReading | map('on:primary, off:danger')"></ftui-icon>
  </ftui-button>
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

grossmaggul

ZitatDu kannst ja wie früher wieder User CSS Files in deiner Index.html einbinden und dort eigene Farben nach dem obigen Schema anlegen
Ja, das war mir klar, allerdings konnte man in der 2er Version von Ftui einfach einen RGB Farbwert angeben, das erscheint mir dann doch einfacher, als für jede Farbe die man vielleicht einmal braucht im User-CSS eine dafür anzulegen. Z.B. würde ich die Biotonne gerne Braun darstellen, die Farbe werde ich aber wohl sonst nirgendwo brauchen.

ZitatWie sieht denn dein Code dazu aus?
Der Code ist der aus der Beispiel index.html für das Humidity Chart. Die Fehlermeldung bezog sich auch nicht auf den Button, deshalb habe ich sie unten drunter geschrieben.

ZitatIch denke andersrum wird ein Schuh draus:
Örks, ja so kann man das natürlich auch machen. ;D
FHEM auf Debian 12 Bookworm Server, Supermicro Core2Duo Board, 2 TB HD RAID 1, 8GB RAM, 2 x nanoCUL868, 1 x nanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1,WLED

setstate

Zitat von: grossmaggul am 12 November 2020, 13:50:56

Und gleich noch eine Frage, wenn ich schonmal dabei bin(;), lässt sich auch ein Icon als Button nutzen, das will mir nämlich nicht gelingen?


Schau mal in den examples/button.html, da gibt es sowas


        <ftui-button shape="circle"
            [(value)]="ftuitest"
            [fill]="ftuitest | map('off: outline, on: solid')">
          <ftui-icon name="lightbulb"></ftui-icon>
        </ftui-button>


https://knowthelist.github.io/ftui/examples/button.html



Die replaceAll() Funktion ist bei Chrome ab Version 85 dabei. Ist aber nicht so wichtig. Ich kann das auch mit replace() + Regular expression ersetzen. Update folgt gleich.