(FHEM) FTUI 3
Inhaltsverzeichnis
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
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-tile row="3" col="3" height="1000" width="1" color="red">
<ftui-grid-header>ROUND</ftui-grid-header>
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
Attribute
Alle Elemente verfuegen ueber diese Attribute:
hidden disabled readonly margin padding
Beispiele
Fangen wir mal klein an. Zu Beginn erst einmal das 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;
}
HINWEIS: Die Attributnamen werden im Code von der 'Bindestrichschreibweise' in die 'CamelCase-Schreibweise' gewandelt. Bsp (s.o.): base-width -> baseWidth
An dieser Stelle gebe ich mal nur mein Testcode an. Alle Kombinationen der Einstellungen von base-height, base-width, margin, row, col, height und width anzugeben ist natuerlich nicht moeglich. Jeder sollte man selbst rumspielen.
<ftui-grid base-width="100" base-height="100" margin="0" shape="round">
<ftui-grid-tile row="1" col="1" height="1" width="1" shape="round"
[color]="dummy.state | map('on:warning, off:ok')">
<ftui-button (value)="set dummy" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="lightbulb-o" class="size-1" height="100%"></ftui-icon>
<ftui-label>Dummy1</ftui-label>
</ftui-button>
</ftui-grid-tile>
<ftui-grid-tile row="2" col="2" height="2" width="2" shape="round"
[color]="dummy.state | map('on:warning, off:ok')">
<ftui-button (value)="set dummy" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="lightbulb-o" class="size-3" height="100%"></ftui-icon>
<ftui-label>Dummy2</ftui-label>
</ftui-button>
</ftui-grid-tile>
<ftui-grid>
<ftui-grid base-width="10" base-height="10" margin="0" shape="round">
<ftui-grid-tile row="31" col="1" height="10" width="10" shape="round"
[color]="dummy.state | map('on:warning, off:ok')">
<ftui-button (value)="set dummy" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="lightbulb-o" class="size-1" height="100%"></ftui-icon>
<ftui-label>Dummy1</ftui-label>
</ftui-button>
</ftui-grid-tile>
<ftui-grid-tile row="41" col="5" height="20" width="20" shape="round"
[color]="dummy.state | map('on:warning, off:ok')">
<ftui-button (value)="set dummy" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon name="lightbulb-o" class="size-5" height="100%"></ftui-icon>
<ftui-label>Dummy2</ftui-label>
</ftui-button>
</ftui-grid-tile>
<ftui-grid>>
HINWEIS: Fuer row und col sind sogar 0 und negative Werte moeglich. Mit z.B. margin=0 rutscht der Button aus dem Fenster. Die kleinste sinnvolle Groesze ist 1.
HINWEIS: Mit base-height und base-width kann man gemeinsam mit height und width die Groesze des Button und damit das Verhaeltnis zum Icon /Label beeinflussen.
Mal zum Rechnen von row und col wird 1 abgezogen und dann mit base multipliziert. height und width werden direkt mit der base multipliziert und ergeben die Groesze des Buttons. Ein Button 100:1 hat die gleiche Groesze wie ein 10:10. Zwei Grids auf einer Seite sind keine gute Idee, dann muss man noch mehr rechnen (s.o.). Fuer den Einstirg reicht mir das das beim Layout. Jetzt machen wir mal noch Funktion dazu.
<ftui-grid base-width="100" base-height="100" margin="0" shape="round">
<ftui-grid-tile row="1" col="1" height="1" width="1" shape="round"
[color]="test | map('on:red, off:orange')">
<ftui-button (value)="set test" direction="vertical" color="current" fill="none" margin="-1em">
<ftui-icon [name]="test | map('on:lightbulb-on, off:lightbulb')" class="size-1" height="100%" [color]="test | map('on:yellow, off:primary')"></ftui-icon>
<ftui-label>Dummy1</ftui-label>
<ftui-content [content]="test:state"></ftui-content>
</ftui-button>
</ftui-grid-tile>
HINWEIS: Das state-Reading darf nicht angegeben werden. Siehe Beispiel oben. Weder beim set () noch beim get [] ist ein test.state angegeben.
Das Beispiel waechst weiter und die Anpassung meiner FHEM-Instanz an meine Tablets funktioniert praechtig. Jetzt besteht der Wunsch nach passenden Icons. Mit
fing /opt/fhem/www/ftui "icons/"
dass in den Beipielen Repositpries von 'bas' und 'kleinklima' genutzt werden.
Bas ist unter zu finden und mit
wget -r -A svg -nd -nH -l 1 https://github.com/basmilius/weather-icons/tree/dev/production/fill/svg
habe ich mir mal die svg in das Verzeichnis ftui/icons/wether/basmilius geholt. Wer will kann noch einen Softlink im Verzeichnis ftui/incons/weather mit dem Namen bas darauf legen.
ln -s basmilius bas
Es ist nicht schwer einzelne passende Icons zu finden, aber ein Paket herunterzuladen spart halt doch Zeit. Fundstellen bitte gerne in die Kommentare.
Kleiner Ausflug in mein KNX.
FHEM unterstuetzt nur fogende Datentypen
dpt1 dpt1.000 dpt1.001 dpt1.002 dpt1.003 dpt1.004 dpt1.005 dpt1.006 dpt1.007 dpt1.008 dpt1.009 dpt1.010 dpt1.011 dpt1.012 dpt1.013 dpt1.014 dpt1.015 dpt1.016 dpt1.017 dpt1.018 dpt1.019 dpt1.021 dpt1.022 dpt1.023 dpt2 dpt232 ??? dpt3 dpt3.007 dpt5 dpt5.001 dpt5.003 dpt5.004 dpt6 dpt6.001 dpt7 dpt7.001 dpt7.005 dpt7.006 dpt7.007 dpt7.012 dpt7.013 dpt8 dpt8.005 dpt8.010 dpt8.011 dpt9 dpt9.001 dpt9.004 dpt9.005 dpt9.006 dpt9.007 dpt9.008 dpt9.009 dpt9.010 dpt9.020 dpt9.021 dpt9.024 dpt9.025 dpt9.026 dpt9.028 dpt10 dpt11 dpt12 dpt13 dpt13.010 dpt13.013 dpt14 dpt14.019 dpt14.027 dpt14.033 dpt14.056 dpt14.057 dpt14.068 dpt14.076 dpt16 dpt16.000 dpt16.001 dpt17.001 dpt18.001 dpt19
Die automatische Aktualisierung der Kommentare aktivieren.