« vorheriges nächstes »
Seiten: [1] 2 3 ... 210   Nach unten

Autor Thema: FTUI version 3  (Gelesen 271499 mal)

Offline Bunnu

  • New Member
  • *
  • Beiträge: 3
FTUI version 3
« am: 25 Oktober 2020, 09:25:41 »
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
Gespeichert

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4360
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #1 am: 25 Oktober 2020, 12:42:34 »
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.
Gespeichert
Gefällt mir Gefällt mir x 3 Hilfreich Hilfreich x 1 Liste anzeigen

Offline Bunnu

  • New Member
  • *
  • Beiträge: 3
Antw:FTUI version 3
« Antwort #2 am: 25 Oktober 2020, 13:01:55 »
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)
Gespeichert

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4360
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #3 am: 27 Oktober 2020, 19:04:54 »
Die Art und Weise des Binding Parsen habe ich nochmal überarbeitet. Jetzt funktionieren auch Punkte '.' im Devicename und Reading

Code: [Auswählen]
<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>

Gespeichert

Offline Bunnu

  • New Member
  • *
  • Beiträge: 3
Antw:FTUI version 3
« Antwort #4 am: 27 Oktober 2020, 21:02:38 »
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
« Letzte Änderung: 27 Oktober 2020, 21:04:37 von Bunnu »
Gespeichert

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4360
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #5 am: 28 Oktober 2020, 14:21:55 »
Wie du möchtest: GitHub issue, PR oder hier im Forum.
Gespeichert

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 667
    • Mein Blog
Antw:FTUI version 3
« Antwort #6 am: 11 November 2020, 15:09:46 »
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:
Code: [Auswählen]
<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...
Code: [Auswählen]
<ftui-badge color="danger" [text]="Tonnen:MuellKalender_Altpapier_days"></ftui-badge>
...eine Fehlermeldung erhalte:
Code: [Auswählen]
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
Gespeichert
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4360
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #7 am: 11 November 2020, 22:04:31 »
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 ...
Code: [Auswählen]
<ftui-label [text]="AgroWeather:state"></ftui-label>
... sieht man dann nachher, wenn man die Seite startet, in der Webconsole folgendes Bild im DOM

Code: [Auswählen]
<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.

Code: [Auswählen]
<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

Code: [Auswählen]
/* "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.

Code: [Auswählen]
<ftui-slider (value)="dummy1" ></ftui-slider>
Beim Slider will man eine Bindung ja in beide Richtungen haben, deshalb schreibt man

Code: [Auswählen]
<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.

Code: [Auswählen]
<ftui-slider [(value)]="dummy1"></ftui-slider>
Man kann jedes Binding auch durch eine Pipe von Funktionen schieben.

Code: [Auswählen]
<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)

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

Thema Knob:

Feststellen geht per readonly Attribute

Code: [Auswählen]
<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

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

Gespeichert
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1306
Antw:FTUI version 3
« Antwort #8 am: 11 November 2020, 22:48:30 »
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)

Code: [Auswählen]
<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
Gespeichert
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 667
    • Mein Blog
Antw:FTUI version 3
« Antwort #9 am: 12 November 2020, 13:50:56 »
Danke sehr für Deine Ausführung und die Behebung der Bugs, setstate!

Zitat
man 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:
Code: [Auswählen]
<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:
Code: [Auswählen]
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:
Code: [Auswählen]
chart.min.js:6
Error: 1605135600000 and
1605222000000 are too far apart with
stepSize of 1 millisecond
« Letzte Änderung: 12 November 2020, 14:56:23 von grossmaggul »
Gespeichert
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1306
Antw:FTUI version 3
« Antwort #10 am: 12 November 2020, 15:19:42 »
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:

Code: [Auswählen]
[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:
Code: [Auswählen]
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

Code: [Auswählen]
[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.
Gespeichert
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1306
Antw:FTUI version 3
« Antwort #11 am: 12 November 2020, 15:22:39 »
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:
Code: [Auswählen]
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
Gespeichert
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1306
Antw:FTUI version 3
« Antwort #12 am: 12 November 2020, 15:42:50 »
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:
Code: [Auswählen]
<ftui-button color="transparent">
    <ftui-icon name="lightbulb" [name]="MyDevice:MyReading | map('on:primary, off:danger')"></ftui-icon>
  </ftui-button>
Gespeichert
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 667
    • Mein Blog
Antw:FTUI version 3
« Antwort #13 am: 12 November 2020, 16:05:42 »
Zitat
Du 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.

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

Zitat
Ich denke andersrum wird ein Schuh draus:
Örks, ja so kann man das natürlich auch machen. ;D
Gespeichert
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4360
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #14 am: 12 November 2020, 16:08:56 »
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

Code: [Auswählen]
        <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.
Gespeichert
Seiten: [1] 2 3 ... 210   Nach oben
« vorheriges nächstes »