(FHEM) FTUI 3: Unterschied zwischen den Versionen

Aus TippvomTibb
Zur Navigation springen Zur Suche springen
Zeile 22: Zeile 22:
 
kann ich relativ schnell herausfinden wo das custom-tag ueberall drinsteckt. z. B.
 
kann ich relativ schnell herausfinden wo das custom-tag ueberall drinsteckt. z. B.
  
 +
<pre>
 
fhem:/opt/fhem/www/ftui # fing /opt/fhem/www/ftui "<ftui-button"
 
fhem:/opt/fhem/www/ftui # fing /opt/fhem/www/ftui "<ftui-button"
 
/opt/fhem/www/ftui/index.html
 
/opt/fhem/www/ftui/index.html
Zeile 44: Zeile 45:
 
/opt/fhem/www/ftui/examples/label.html
 
/opt/fhem/www/ftui/examples/label.html
 
/opt/fhem/www/ftui/components/button/button-nice.component.js
 
/opt/fhem/www/ftui/components/button/button-nice.component.js
 +
</pre>
 +
 +
=Inhalt=
 +
Neben den 3 Dateien
 +
ftui.css
 +
ftui.js
 +
index.html
 +
 +
verteilt sich der Rest auf 5 Verzeichnisse
 +
compnents
 +
modules
 +
 +
icons
 +
themes
 +
 +
examples

Version vom 15. August 2022, 13:13 Uhr

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.

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

Inhalt

Neben den 3 Dateien

ftui.css
ftui.js
index.html

verteilt sich der Rest auf 5 Verzeichnisse

compnents
modules

icons
themes

examples