(FHEM) FTUI 3

Allgemeines

Seit 2000 (Beginn noch unbestaetigt) gibt es eine neue Variante 'FHEM Tablet User Interface Version 3', oder kurz FTUI3 genannt.

Der Entwickler hat seine bisherige Arbeit bei Github eingestellt. Es gibt aber noch keine offizelle Release, also alles noch 'Under Construction'

UI builder framework for FHEM — http://fhem.de/fhem.html with a clear intention: Keep it short and simple!

FTUI 3 uses Web Components technologies in pure ES2020 javascript.

Die zwei Dinge und die mein Eindruck, dass die Version 2 doch recht sperrig ist haben mich dazu bewogen es mit FTIU3 mal zu probieren.

Im FHEM-Forum gibt es 118 Beitraege (Stand082022) zum Thema FTUI3

Custom HTML Tags

Einstieg

Das ganze Framework arbeitet mit eigenen HTML-Tags die alle mit <ftui-...> eingeleitet werden.

Mit meinem fing-Befehl

alias fing='function _fing(){ find "$1" -type f -exec grep -l "$2" {} \; ; }; _fing'

kann ich relativ schnell herausfinden wo das custom-tag ueberall drinsteckt. z. B.

fhem:/opt/fhem/www/ftui # fing /opt/fhem/www/ftui "<ftui-button"
/opt/fhem/www/ftui/index.html
/opt/fhem/www/ftui/examples/meter.html
/opt/fhem/www/ftui/examples/colors.html
/opt/fhem/www/ftui/examples/button.html
/opt/fhem/www/ftui/examples/circlemenu.html
/opt/fhem/www/ftui/examples/badge.html
/opt/fhem/www/ftui/examples/swiper.html
/opt/fhem/www/ftui/examples/binding.html
/opt/fhem/www/ftui/examples/button-nice.html
/opt/fhem/www/ftui/examples/tab.html
/opt/fhem/www/ftui/examples/speak.html
/opt/fhem/www/ftui/examples/icon.html
/opt/fhem/www/ftui/examples/popup.html
/opt/fhem/www/ftui/examples/themes.html
/opt/fhem/www/ftui/examples/grid.html
/opt/fhem/www/ftui/examples/contents/content-view2.html
/opt/fhem/www/ftui/examples/contents/mobile-shutter.html
/opt/fhem/www/ftui/examples/contents/mobile-view-sonos.html
/opt/fhem/www/ftui/examples/mobile_full.html
/opt/fhem/www/ftui/examples/label.html
/opt/fhem/www/ftui/components/button/button-nice.component.js

Neben den 3 Dateien

ftui.js
ftui.css

index.html

gibt es noch 5 Verzeichnisse

components
modules

themes
icons

examples

Das Verzeihnis components enthaelt die Definitionen der Custom-Tags. Modules weisz ich noch nicht.

Themes und icons enthalten das was man erwartet, bis auf die Datei demo.html. Mit deren Hilfe werden alle Icons angezeigt.

http://fhem.clx.local:8083/fhem/ftui/icons/demo.html

Inhalt

Neben den 3 Dateien

ftui.css
ftui.js
index.html

verteilt sich der Rest auf 5 Verzeichnisse

compnents
modules

icons
themes

examples

In components befinden sich alle Kompnenten die per Tag benutzt werden koennen. Die Bedeutung von modules ist mir noch unklar.

In themes und icons steckt genau das drin was man vermutet, auszer in icons gibt es noch eine demo.html

http://fhem.clx.local:8083/fhem/ftui/icons/demo.html

ftui.js

Mit 1326 Bytes ja richtig bescheiden.

TODO

Tag-List

Die eckigen [] und runden () Klammern um die Attribute sind die Kurzformen von set-value und get-value.

Aus <ftui-label get-color="dummy1:color">demo</ftui-label>   wird dann <ftui-label [color]="dummy1:color">demo</ftui-label> wenn die Farbe aus dem FHEM-Device dummy1 das Reading color uebernommen werden soll.

Aus <ftui-button set-value="dummy1"></ftui-button> wird dann <ftui-button (value)="dummy1"></ftui-button> wenn der (?) Wert des FHEM-Devices dummy1 gesetzt werden soll.

Es gehen auch Hin- und Rueckweg kombiniert.

Aus <ftui-button getset-value="dummy1"></ftui-button> wird dann <ftui-button [(value)]="dummy1"></ftui-button> In dem Beispiel aus der Doku kann ich aber nicht mehr die Funktion erkennen.

Local Bindung und Events schiebe ich mal nach hinten.

Pipes sind recht hilfreich wenn der Wert aus einem FHEM-Device-Reading und der Wert fuer das FTUI-Attribut nicht kompatibel sind. Dann kann man durch die Pipes eine Anpassung realisieren.

   part(number)
   toDate(string)
   toBool(string|number)
   toInt(number)
   format(string)
   round(number)
   add(number)
   multiply(number)
   divide(number)
   replace(find, replace)
   map('in1:out1,in2:out2,...')
   step('1:ok,6:warning,10:alert')
   scale(minIn, maxIn, minOut, maxOut)

Formatierung/Layout

Alignment and margins can be changed by the attributes

   align-item (top, bottom, left, right, center, around, stretch)
   margin
   padding

   Tab      <ftui-tab view="View1" title="Home" active>
            <ftui-tab fill="clear" direction="vertical" view="View1" title="Tab1" active>
            <ftui-tab-view id="View1" [hidden]="ftuitest | isNot('1')"> 
            <ftui-tab-title text-align="left"></ftui-tab-title> 
            <ftui-segment [(value)]="ftuitest">

   Grid     <ftui-grid base-width="150" base-height="120">
            <ftui-grid base-width="75" base-height="75" shape="round" margin="2">
            <ftui-grid-tile row="1" col="1" height="1" width="3"><ftui-grid-tile row="1" col="1" height="1" width="4" color="translucent">
            <ftui-grid-header>ROUND</ftui-grid-header><ftui-grid-tile row="3" col="3" height="1000" width="1" color="red">

   Circlemenu <ftui-circlemenu circle-radius="4" keep-open>
               <ftui-circlemenu keep-open direction="horizontal-right" opacity="0.2">

   Row <ftui-row align-items="center" class="size-3"><ftui-row align-items="top" margin="1" width="80%" height="33%">
       <ftui-row color="ok-warning-alert">ok-warning-alert</ftui-row>
       <ftui-row slot="end" align-items="stretch"><ftui-row color="red">red</ftui-row>

   Column  <ftui-column width="10%" height="70%">RGB</ftui-column>
           <ftui-column shape="round" color="light">light</ftui-column>
           class="big"  align-items="top|left|right|stretch|around|dark"  class="size-3"

  Cell  <ftui-cell class="size-7" style="height: 1250px">Tab2</ftui-cell> <ftui-cell slot="end" width="70px"><ftui-cell align-items="left">

   View<ftui-view-toolbar slot="header">    <ftui-view id="view-1"> <ftui-view-sheet shape="round">

    ViewStage <ftui-view-stage>
 

ViewSection <ftui-view-section>

ViewItem <ftui-view-item target="details-1">Item 2-1</ftui-view-item> wird haeufig mit FHEM-Devices kombiniert: Decke, Wand, Desktop, Fenster, ...

   Swiper <ftui-swiper scrollbar auto-play interval="2"> <ftui-swiper id="swiper3" dots auto-play interval="3"> <ftui-swiper id="swiper2" [(value)]=local:swiper2 dots> <ftui-swiper id="swiper1" scrollbar>

Design

Die sogenannten 'fixed theme colors' die zur Verfuegung stehen, koennen hier betrachtet werden.

Komponenten/Elemente

   Labelx
   Icon(x)
   Buttonx 
   SegmentedButton
   Knob
   Slider
   Checkbox
   Weather
   Dropdown
   Colorpickerx
   Imagex
   Badgex
   Clock
   Chartx
   Medialist

<ftui-slider margin="-34px 0 0 0" class="size-0"
<ftui-button (value)="ftuitest" states="0,4,10,45,75,90,100">Try</ftui-button>
<ftui-icon margin="-10px 0 0 0" name="circle" class="size-0"
<ftui-dropdown nochevron class="size-3"
<ftui-meter value="50" min="1" max="200">
<ftui-input [(value)]="ftuitest" min="1" max="100" type="number" size="4"></ftui-input>
<ftui-departure [list]="depDummy:HBF" icon="bus"  getinterval="120" station="Default" alternate>
<ftui-segment-button value="1">
<ftui-chart title="demo-chart" y-label="Heizung" y1-label="Außen" y-unit="°C" y1-unit="°C">
<ftui-chart-data label="Außen" color="warning" log="FileLog_AgroWeather" spec="4:AgroWeather.temperature"
<ftui-chart-controls units="day, week"></ftui-chart-controls>

Miscellaneous

Speakx

Attribute

Alle Elemente verfuegen ueber diese Attribute:

   hidden
   disabled
   readonly
   margin
   padding

Beispiele

Fangen wir mal klein an. Zu Beginn erst einmal das Grundgeruest.

FTUI Grundgeruest

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <!--
 6     /* FHEM tablet ui - FTUI */
 7     /**
 8     * UI builder framework for FHEM
 9     *
10     * Version: 3.0.0
11     *
12     * Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
13     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
14     * https://github.com/knowthelist/ftui
15     */
16     -->
17   <script src="ftui.js"></script>
18 
19   <link href="ftui.css" rel="stylesheet">
20   <link href="themes/ftui-theme.css" rel="stylesheet">
21   <link href="favicon.ico" rel="icon" type="image/x-icon" />
22 
23   <!-- avoid 300ms delay on click-->
24   <meta name="viewport" content="width=device-width">
25 
26   <meta name="mobile-web-app-capable" content="yes">
27   <meta name="toast_position" content="topLeft">
28 
29 
30   <!-- verbose level 0-4 -->
31   <meta name="debug" content="0">
32 
33 
34   <title>FTUI Example</title>
35 </head>
36 
37 <body>
38 
39 </body>
40 
41 </html>

Zum Testen habe ich jetzt umeinander die Code-Bloecke im <body> einkopiert.

 HINWEIS:Um die Toast-Meldungen ab-/anzuschalten folgendes einfuegen
 <meta name="toast" content="0">

<ftui-button (value)="set dummyFTUI off" direction="vertical" color="current" fill="none" margin="-1em">
    <ftui-icon name="angle-up" class="size-1" height="90%"></ftui-icon>
    <ftui-label>DummyFTUI</ftui-label>
</ftui-button>

Das passiert nix, auszer dass DummyFTUI auf dem Bildschirm steht, aber kein Button nix. Mal einen View drumbauen.

<ftui-view id="View1">
<ftui-button (value)="set dummyFTUI off" direction="vertical" color="current" fill="none" margin="-1em">
    <ftui-icon name="angle-up" class="size-1" height="90%"></ftui-icon>
    <ftui-label>DummyFTUI</ftui-label>
</ftui-button>
</ftui-view>

Immer noch nix.

In den Beispielen war oft auszenherum eine Grid.

Immer noch nix.

Ganz anderer Fehler!

Ich habe mein Beispiel in Verzeichnis examples abgelegt und folgenden Eintrag vergessen.

  <base href="../" />

D.h. erst ma muss man den Pfad zum FTUI-root Verzeichnis richtig einstellen.

<body>

            <ftui-icon name="window-shutter" class="size-4"></ftui-icon>
          <ftui-button @click="sendFhem('{setJalousieNight()}')" direction="vertical" color="current" fill="none"
                       margin="-1em">
            <ftui-icon name="angle-down" class="size-1" height="90%"></ftui-icon>
            <ftui-label>Nacht</ftui-label>
          </ftui-button>

</body>

Jetzt sieht man einen Button ueber die gesamte Bildschirmbreite wobei man den Pfeil nach unten und das Label Nacht bedienen kann und auch eine Aktion ausloest. Das Rollladen-Ikon ist nicht zum clicken. Es liegt auch auszerhalb des Button-Tags.

HINWEIS:Bei der Vergabe von eigenen ID-Namen immer alles in/nur Kleinbuchstaben und maximal einen Unterstrich.

So jetzt geht's an Grid, um Einfluss auf Position und Groesze der Komponenten nehmen zu koennen.

https://www.ionos.de/digitalguide/websites/webseiten-erstellen/css-grid/

HINWEIS: cols und rows gibt es auch nicht mehr beim Grid, nur noch base-width und base-height - mit jeweils 140 als default. « Letzte Änderung: 07 Februar 2022, 19:47:25 von setstate »

Das konnte ich aber so nicht direkt finden. Im Code (grid.component.js) steht im Konstruktor:

 constructor() {
   const properties = {
     minX: 0,
     minY: 0,
     baseWidth: 0,
     baseHeight: 0,
     margin: 8,
     resize: false,
     responsive: false,
   }; 

Weiter unten folgt dann in Kombination mit dem Attribut 'responsive':

    :host([responsive]) {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       grid-template-rows: repeat(auto-fill, minmax(140px, 1fr));
       grid-auto-flow: dense;
       grid-auto-columns: 25%;
       grid-auto-rows: 25%;
       gap: ${this.margin}px;
       margin: ${this.margin}px;
     }