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

Version 3

FTUI 3 uses Web Components technologies in pure ES2020 javascript.

Caution!

• This version is not compatible with older fhem-tablet-ui versions.
• This version is under construction.

• copy the folder www/ftui to your FHEM www (e.g.: /opt/fhem/www/ftui)

wget https://github.com/knowthelist/ftui/tarball/master -O /tmp/ftui.tar
cd /tmp && tar xvzf /tmp/ftui.tar
mv /tmp/knowthelist-ftui-*/www/ftui /opt/fhem/www

• change the example page 'index.html' according your needs
• to open your new page call http://<fhem-url>:8083/fhem/ftui/index.html

call

update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt

on the FHEM command field of FHEMWEB

Clone the git project in your home directory and link the www/ftui folder into FHEM's www

cd
git clone https://github.com/knowthelist/ftui.git
ln -s $HOME/ftui/www/ftui /opt/fhem/www/ftui_dev

You can also host FTUI on your own web server running in a docker container instead of via FHEMWEB.

• Pull the docker image:

docker pull knowthelist/ftui

• Place your index.html somewhere where you can use it as a volume for docker.
• Put the fhemweb_url into the head of the index.html:

<meta name="fhemweb_url" content="http://<your_fhem_url>:8083/fhem/">

• Run the container:

docker run -d -p 8080:80 -v <path>/index.html:/usr/share/nginx/html/index.html --name ftui3 knowthelist/ftui

• Open your FHEM Tablet-UI on any browser in your network:

<docker_host>:8080

Just add some of the FTUI web components to your HTML code

<ftui-button (value)="dummy1">on/off</ftui-button>

<ftui-label [text]="dummy1"></ftui-label>

<ftui-icon 
    [name]="dummy1 | map('on: lightbulb-on, off: lightbulb')"
    [color]="ftuitest | step('0: success, 50: warning, 80: danger')">
</ftui-icon>

• no binding - fix value

<ftui-label color="danger">demo</ftui-label>

• Property binding:

To bind a FHEM reading to a property of an element. Changes of the reading changes the property

<ftui-label get-color="dummy1:color">demo</ftui-label>

short format The short format uses square brackets.

<ftui-label [color]="dummy1:color">demo</ftui-label>

The FHEM reading is given as follow:

[attribute]="DEVICE:READING:PROPERTY"

DEVICE is the name of the FHEM device e.g. lamp1 or WeatherLocal READING is the name of the reading e.g. state or temperature (default: STATE) PROPERTY is the property of the reading. Possible are: value, time, update, invalid (default: value)

value - the value of the reading in fHEM time - the timestamp of the reading in FHEM update - update timestamp in FTUIN invalid - is true if the reading doesn't exist in FHEM (anymore)

Example to show the timestamp of a reading

 <ftui-label [text]="WeatherLocal:state:time | toDate() | format('mm:ss')"></ftui-label>

• Attribute binding:

Attribute binding helps you to set values for attributes directly.

<ftui-label [attr.data-my]="dummy1:status">demo</ftui-label>

on attribute changes set the FHEM reading

<ftui-button set-value="dummy1"></ftui-button>

short format

<ftui-button (value)="dummy1"></ftui-button>

<ftui-button getset-value="dummy1"></ftui-button>

short syntax ("banana in a box")

<ftui-button [(value)]="dummy1"></ftui-button>

The device name 'local' is a reserved name for binding which keeps local on client and is not synced with FHEM

  <link href="themes/mobile-dark-theme.css" rel="stylesheet"
        ftui-binding [disabled]="local:dark">

• local:dark FTUI sets this to true if the OS switches to dark mode

Some components provide events on attribute change. The $event object provides the parameter 'detail' that containing the changed property.

<ftui-colorpicker @color-change="console.log($event.detail.hexString)"></ftui-colorpicker>

<ftui-dropdown [list]="ftuitest:list" [(value)]="ftuitest" @value-change="console.log($event.detail)"></ftui-dropdown>

This can be used to communicate between components.

Binding values can be pushed through piped functions to change the value. Following pipe functions are currently available:

• 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)

Example for input (FHEM reading -> function() -> HTML attribute):

<ftui-label [text]="WeatherLocal:state | part(4) | toInt() | multiply(2) | round(1) "></ftui-label>

Example for output (HTML attribute -> function() -> FHEM reading):

 <ftui-colorpicker (hex)="replace('#','') | HUEDevice6:rgb"></ftui-colorpicker>

There are fixed theme colors that are defined as color names.

Main colors:

• primary
• secondary
• light
• medium
• dark

Result colors:

• success
• warning
• danger

Spectrum colors:

• red
• orange
• yellow
• green
• blue
• violet

State colors:

• ok
• warning
• error

Others colors:

• white
• black
• gray
• brown
• grid
• translucent

Example

Layout

• Tab
• Grid
• Circlemenu
• Row
• Column
• Cell
• View, ViewStage, ViewSection, ViewItem
• Swiper

Elements

• Label
• Icon
• Button
• SegmentedButton
• Knob
• Slider
• Checkbox
• Weather
• Dropdown
• Colorpicker
• Image
• Badge
• Clock
• Chart
• Medialist

Miscellaneous

• Speak

... to be continued

All components has following attributes

• hidden
• disabled
• readonly
• margin
• padding

A user interface for mobile phones can be implemented with ftui-view.

Demo

If size is specified as number only it get mapped to following values

size property can also specified as %, px or em as a string. e.g. size="80%" or size="12px"

Badges can be used as a notification that contain a number or other characters. They show that there are additional items associated with an element and indicate how many items there are. The element disappears if the value is 0 or empty.

Speak uses the browser's Web Speech API to synthesize text to speech.

... to be continued

Colorpicker allows to change a color value in many different ways. Work with colors in hex and HSL

... to be continued

The Chart component uses Chart.js to render charts.

Chart Types are:

• Line chart
• Bar chart
• Radar chart
• Doughnut and Pie chart
• Polar chart
• Bubble chart
• Area chart or mixed types

style variables:

--chart-legend-font-size --chart-legend-color --chart-title-color --chart-title-font-style --chart-text-color --chart-grid-line-color --chart-tick-font-size --chart-font-style --chart-font-family

Main component: ftui-chart

Example for DbLog

<ftui-chart>
  <ftui-chart-data fill 
    log="DBLogDEVICE" 
    file="history" 
    spec="DEVICE:READING" 
    [update]="DEVICE:state:time">
  </ftui-chart-data>
</ftui-chart>

List of all icons

Here is the updated "Icon" section in the README.md file:

The Icon component supports the following properties:

• type: The type of icon to display.
• path: The path to the icon file.
• size: The size of the icon.
• name: The name of the icon.
• color: The color of the icon.
• rgb: The RGB value of the icon color.
• height: The height of the icon.
• width: The width of the icon.
• top: The top margin of the icon.
• left: The left margin of the icon.
• bottom: The bottom margin of the icon.
• right: The right margin of the icon.
• rotate: The rotation of the icon, in degrees. Defaults to 0.

Here is an example of how to use the Icon component:

<ftui-icon type="svg" path="icons" name="example-icon" size="24" color="#000" rgb="0,0,0" height="24" width="24" top="10" left="10" bottom="10" right="10" rotate="45"></ftui-icon>

If size is specified as number only it get mapped to following values

size property can also specified as %, px or em as a string. e.g. size="80%" or size="12px"

<ftui-row>
    <ftui-column>
      <ftui-cell>
        <ftui-icon name="umbrella"></ftui-icon>
        <ftui-label>Monday</ftui-label>
      </ftui-cell>
    </ftui-column>
</ftui-row>

Alignment and margins can be changed by the attributes

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

• Tab

• Grid

• Label

• Icon

• Button

• Knob

• Slider

• Checkbox

• Circlemenu

• Departure

• Dropdown

• Colorpicker

• Image

• Badge

• Speak

• Chart

• Popup

• View

• Swiper

• SegmentedButton

• Medialist

• Colors

• Themes

You can thank the creator of this versatile UI:

Many many thanks to all donators!

This project is licensed under MIT.