FTUI version 3

andies · 14 September 2021, 06:54:56

Ich habe somfy und sie alle nochmal angelernt.

Phiolin · 18 September 2021, 16:05:45

Ich habe auch angefangen, mein "altes" FTUI auf Version 3 um zu stellen.
Man muss natürlich aufgrund der fehlenden Dokumentation noch relativ viel im Code suchen und probieren, aber im Großen und Ganzen habe ich alles hinbekommen, was vorher auch ging.
Subjektiv ist es viel performanter als das alte UI, was man vor allem auf Tablets merkt die schon ein paar Jahre alt sind und es wirkt auch einfach moderner und mehr aus einem Guss. Gute Arbeit.

Die gröbsten Sachen die mir aufgefallen sind:
- Bei ftui-row/column/cell fehlen mir noch "einfache" Möglichkeiten, die Abstände zu reduzieren. Manchmal möchte ich in einem Tile in dem mehrere ftui-row Elemente sind, 2 rows enger zusammen stehen haben als die übrigen. Das kann ich zwar mit negativem margin-top styles o.ä. "irgendwie" hinbasteln, oft hat das aber Einfluss auf all die darunter stehenden Elemente die dann nicht mehr ins Schema passen. Früher gab es sowas wie top-space / narrow / compressed mit denen man Abstände zwischen Elementen beeinflußen konnte. Sowas fehlt mir an einigen Stellen noch.
Edit: Nach ein bisschen basteln, funktioniert das mit dem height Attribut zumindest bei den ftui-rows ganz gut.

- Im alten FTUI konnte man über class "inline" Zeilenumbrüche verhindern. Auch hier fehlt mir in v3 die passende Möglichkeit. In einer ftui-row werden mehrere Elemente wenn genug Platz ist problemlos nebeneinander angeordnet, aber sobald ich in eine ftui-column gehe, baut das UI mehrere Elemente in der Column nur noch untereinander auf, selbst wenn die Column ausreichend breit ist. Auch hier kann ich natürlich wieder versuchen auf Standard-HTML auszuweichen und die table selber hinbiegen, aber dafür gibt's die Layout Komponenten ja eigentlich.

- Bei der Weather Component habe ich es nicht hinbekommen, das iconSet zu wechseln. Ein "iconSet" oder "iconset" Attribut im Tag wird einfach ignoriert. Am Ende musste ich das iconset in der weather.component.js hardcoded ändern.

Code Auswählen

<ftui-weather size="6" provider="dwdamcharts" iconSet="amcharts" [condition]="dwdWeather:fc1_4_cond"></ftui-weather>
Edit: Das geht doch, aber hier muss das Attribut wegen der automatischen Camel-case Umwandlung "icon-set" heissen:

Code Auswählen

<ftui-weather size="6" provider="dwdamcharts" icon-set="amcharts" [condition]="dwdWeather:fc1_4_cond"></ftui-weather>

- Ebenfalls im Weather Bereich fehlen noch diverse Iconsets aus dem alten UI. Ich verwende DWD und Amcharts und habe mir das auch in V3 hingebastelt, meine entsprechenden Mappings in der weather.map.js sind aber im Moment noch etwas wirr - das kann man noch schöner machen. Das war jetzt auch nur eine Knappe Stunde Aufwand und funktioniert erst mal.

- Die Popup Component braucht unbedingt wieder sowas wie das alte "interlock", so dass man das Popup nicht schließen und auch kein Hintergrund-Element anklicken kann, um Pin-Pads für die Alarmanlage zu erstellen.

- Images in Popups werden nicht so einfach angezeigt, da die Image component immer erst auf isVisible checked, das aber wohl nur zutrifft, wenn das Popup geöffnet ist. Wird also keine Aktualisierung (updateImage()) durchgeführt beim Öffnen des Popups, ist die src vom img tag im popup leer und es wird nichts angezeigt.

- Ich benutze den Slider als Ersatz für das alte "range" plugin. Es wäre schön, wenn man sich den aktuellen Wert eines readonly-sliders optional permanent anzeigen lassen könnte, z.B. in dem der Tooltip mit dem aktuellen Wert per Option permanent eingeblendet werden kann und nicht nur beim Verstellen des Sliders sichtbar ist (was bei einem readonly Slider ja gar nicht geht). Alternativ könnte man Badges/Slots für Slider verfügbar machen, indem man z.B. am seitlich am oberen/unteren Ende des Sliders Werte einblenden kann.

Werde später, wenn ich alles fertig habe, noch einen Screenshot vom UI einfügen.

mr_petz · 19 September 2021, 17:55:32

Hi Phiolin, für ne Alarmanlage hätte ich was für dich...

Zitat von: Phiolin am 18 September 2021, 16:05:45
...
- Die Popup Component braucht unbedingt wieder sowas wie das alte "interlock", so dass man das Popup nicht schließen und auch kein Hintergrund-Element anklicken kann, um Pin-Pads für die Alarmanlage zu erstellen.
...

https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784

oder hier zum selbst erstellen mit pointer-events:none
https://forum.fhem.de/index.php/topic,115259.msg1134096.html#msg1134096

Edit:
Zu den WetterIcons kannst du dich hier belesen. Risiko hat da was erstellt. Könntest du für dich temporär anpassen...
https://forum.fhem.de/index.php/topic,117473.msg1150166.html#msg1150166

Gruß mr_petz

Phiolin · 20 September 2021, 16:33:23

Danke für die Tips.
So sieht's bei mir jetzt aus. Bin recht zufrieden. Es ist noch ein bisschen Platz für mehr Widgets, aber alles funktioniert so wie es soll. Im Großen und Ganzen habe ich nachgebaut, was ich auch schon in der vorherigen FTUI hatte. Sieht aber jetzt im Vergleich doch alles etwas moderner aus und ist trotz einer Menge Komponenten doch subjektiv deutlich performanter als die alte Version.
Das hängt so als UI auf dem Tablet bei uns im Flur an der Wand.

StephanFHEM · 24 September 2021, 21:38:55

ich hänge ganz am Anfang. Möchte bei den ftui-tab das Icon gerne in einer bestimmten Größe haben (hab ich mit class="size-1" gelöst). Leider wächst das Hintergrund-Feld nicht mit. Zudem möchte ich es gerne als Quadrat haben mit abgerundeten Ecken. mit shape="normal" wird der Hintergrund aber länglich dargestellt... wäre prima, wenn einer einen Tipp hätte

Code Auswählen

       <ftui-tab view="home" fill="solid" shape="normal" active>
          <ftui-icon class="size-0" name="home"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="heating" fill="solid" direction="vertical">
          <ftui-icon class="size-0" name="sani_heating"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="light" fill="solid">
          <ftui-icon class="size-0" name="bolt"></ftui-icon>
        </ftui-tab>

mr_petz · 24 September 2021, 22:26:32

Hi.
Kannst auch mit:

Code Auswählen


style="width:5px"

arbeiten.

Bsp.:

Code Auswählen


<ftui-tab view="home" fill="solid" direction="vertical" style="width:5px">
  <ftui-icon class="size-1" name="home1"></ftui-icon>
</ftui-tab>

Grüße mr_petz

StephanFHEM · 24 September 2021, 22:47:57

danke! sieht schon etwas besser aus wenn das Kästchen klein genug ist. Wenn ich den Wert erhöhe wird es irgendwann wieder länglich;-)
Und es ist (warum auch immer) nach rechts verrutscht und nicht mehr zentriert....

mr_petz · 24 September 2021, 22:58:57

Zitat von: StephanFHEM am 24 September 2021, 22:47:57
Und es ist (warum auch immer) nach rechts verrutscht und nicht mehr zentriert....

Du darfst den style nicht am Icon anwenden, sondern nur wie ich im Bsp. im ftui-tab.
Da verschiebt sich nichts.

nächstes Bsp. mit height:

Code Auswählen


<ftui-tab view="home" fill="solid" direction="vertical" style="width:30px;height:60px">
  <ftui-icon class="size-4" name="home1"></ftui-icon>
</ftui-tab>

StephanFHEM · 24 September 2021, 23:13:42

Jetzt sieht es perfekt aus mit height... aber es ist immer noch eingerückt. Und ich hab es im ftui-tab gemacht und nicht im icon.

hier der Code

Code Auswählen

   <ftui-grid cols="11" rows="7" margin="1" resize> 
    <ftui-grid-tile row="1" col="1" height="6" width="1" color="transparent">
    <header class="size-0">Menü</header>
      <ftui-column>
        <ftui-tab view="home" fill="solid" style="width:18px;height:40px" active>
          <ftui-icon class="size-0" name="home"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="heating" fill="solid" direction="vertical">
          <ftui-icon class="size-0" name="sani_heating"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="light" fill="solid">
          <ftui-icon class="size-0" name="bolt"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="rabbit" fill="solid">
          <ftui-icon class="size-0" name="paw"></ftui-icon>
        </ftui-tab>
[...]

mr_petz · 24 September 2021, 23:23:10

Versuch mal:

Code Auswählen


style="width:10px;height:40px"

bei home.
Das sieht bei mir proportional gut aus.

StephanFHEM · 25 September 2021, 20:26:40

ändert bei mir leider nichts daran, dass es eindeutig nach rechts verschoben ist.
hab das jetzt bei allen FTUI-Tabs gemacht und wenigstens sind jetzt alle gleich nach rechts verschoben und damit wieder untereinander. Ändert aber nichts daran, dass sie Rechtsseitig unter dem Header-Namen stehen...

noch eine zusätzliche Sache:

1. wenn ich ein Icon mit einem farbigen Kreis im Hintergrund haben möchte geht das wohl nur mit der Definition über einem Button und solid oder? Hab das mal gemacht und sieht aus wie gewollt, ist aber noch klickbar (blendet dann eine Millisekunde aus und wieder ein - kann man das abstellen?)
2. hab für die Senkrechten Menü-Items im Column jetzt align-items="top" gemacht und sie hängen nun ohne Abstand aneinander. Mit margin kann man ja für die gesamte Column den Abstand setzen, kann man auch den Abstand für die einzelnen Tab-View-Icons setzen? Oder muss in jedes Tab-View ein Margin rein?

mr_petz · 26 September 2021, 18:05:46

Zitat von: StephanFHEM am 25 September 2021, 20:26:40
...
noch eine zusätzliche Sache:

1. wenn ich ein Icon mit einem farbigen Kreis im Hintergrund haben möchte geht das wohl nur mit der Definition über einem Button und solid oder? Hab das mal gemacht und sieht aus wie gewollt, ist aber noch klickbar (blendet dann eine Millisekunde aus und wieder ein - kann man das abstellen?)

Schau hier:
https://forum.fhem.de/index.php/topic,115259.msg1159210.html#msg1159210
Das hatte ich mal genau dafür gebaut...

StephanFHEM · 26 September 2021, 18:35:11

danke, schau ich mir an! es ist echt frustrierend. Es muss alles neu aufgebaut werden und vieles geht gefühlt erst mal nicht mehr. Aber die Hoffnung auf den Geschwindigkeitszuwachs treibt an...

StephanFHEM · 02 Oktober 2021, 10:54:00

jetzt noch einer: ich möchte in einer Liste (Column/Row) Icons drin haben die selbst mit class="size-0" leider noch sehr groß dargestellt werden. Gibt es eine Möglichkeit die noch kleiner zu machen?

setstate · 02 Oktober 2021, 11:59:30

Das stimmt, wirklich klein geht das nicht.
Deshalb habe ich jetzt noch etwas den Minusbereich erschlossen.

size="-4" bis size="12"

Code Auswählen


    <ftui-grid-tile row="4" col="4" height="4" width="3">
      <header>TABLE</header>
      <ftui-row>
        <ftui-column width="40%">
          <ftui-icon name="smile-o" color="green" size="-3"></ftui-icon>
          <ftui-icon name="meh-o" color="yellow" size="-3"></ftui-icon>
          <ftui-icon name="frown-o" color="red" size="-3"></ftui-icon>
        </ftui-column>
        <ftui-column>
          <ftui-label> name="smile-o" size="-3"</ftui-label>
          <ftui-label> name="meh-o" size="-3"</ftui-label>
          <ftui-label> name="frown-o" size="-3"</ftui-label>
        </ftui-column>
      </ftui-row>
    </ftui-grid-tile>