(FHEM) FTUI 3: Unterschied zwischen den Versionen
Zeile 410: | Zeile 410: | ||
<ftui-grid>> | <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. | + | <span style="color:#FFFF00;background:green">HINWEIS:</span> 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. | + | <span style="color:#FFFF00;background:green">HINWEIS:</span> 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. | 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.). | 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. | 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> | ||
+ | |||
+ | <span style="color:#FFFF00;background:green">HINWEIS:</span> Das state-Reading darf nicht angegeben werden. Siehe Beispiel oben. Weder beim set () noch beim get [] ist ein test.state angegeben. |
Version vom 16. August 2022, 10:58 Uhr
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.