(FHEM) FTUI 3: Unterschied zwischen den Versionen
Zeile 97: | Zeile 97: | ||
==ftui.js== | ==ftui.js== | ||
Mit 1326 Bytes ja richtig bescheiden. | 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==== | ||
+ | <ftui-grid> | ||
+ | <ftui-grid-tile row="3" col="3" height="1000" width="1" color="red"> | ||
+ | <ftui-row color="red">red</ftui-row> | ||
+ | <ftui-column> | ||
+ | <ftui-tab-view id="View1" [hidden]="ftuitest | isNot('1')"> | ||
+ | <ftui-segment [(value)]="ftuitest"> | ||
+ | <ftui-segment-button value="1"> | ||
+ | |||
+ | |||
+ | |||
+ | ====Design==== | ||
+ | |||
+ | |||
+ | ====Komponenten==== | ||
+ | <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-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> |
Version vom 15. August 2022, 17:56 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
<ftui-grid> <ftui-grid-tile row="3" col="3" height="1000" width="1" color="red"> <ftui-row color="red">red</ftui-row> <ftui-column> <ftui-tab-view id="View1" [hidden]="ftuitest | isNot('1')"> <ftui-segment [(value)]="ftuitest"> <ftui-segment-button value="1">
Design
Komponenten
<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-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>