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.
- create a new folder in the www folder of your FHEM installation
mkdir /opt/fhem/www/ftui
- copy all folder and files from here into the new folder
- change the example page 'index.html' according your needs
- to open your new page call http://<fhem-url>:8083/fhem/ftui/index.html
- Just add some of the FTUI web components to your HTML code
<ftui-button (value)="dummy1">on/off</ftui-button>
<ftui-label [value]="dummy1"></ftui-label>
<ftui-icon
[name]="dummy1 | map('on: lightbulb-on-outline, off: lightbulb-outline')"
[color]="ftuitest | map('0: success, 50: warning, 80: danger')">
</ftui-icon>
no binding - fix value
<ftui-label color="danger">demo</ftui-label>
bind a FHEM reading to a attribute. Changes of the reading changes the attribute
<ftui-label bind:color="dummy1:color">demo</ftui-label>
short format
<ftui-label [color]="dummy1:color">demo</ftui-label>
on attribute changes set the FHEM reading
<ftui-button on:value="dummy1"></ftui-button>
short format
<ftui-button (value)="dummy1"></ftui-button>
Two way binding
<ftui-button bindon:value="dummy1"></ftui-button>
short syntax ("banana in a box")
<ftui-button [(value)]="dummy1"></ftui-button>
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)
- replace(find, replace)
- map('in1:out1,in2:out2,...')
- scale(minIn, maxIn, minOut, maxOut)
Example for input (FHEM reading -> function() -> HTML attribute):
<ftui-label [text]="AgroWeather: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>
Layout
- Tab
- Grid
- Circlemenu
- Row
- Column
- Cell
Elements
Miscellaneous
... to be continued
All components has following attributes
- hidden
- disabled
- readonly
Attribute | Description | Type | Default |
---|---|---|---|
color | The color to use from color palette. | "primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark" |
"primary" |
fill | . | "clear" | "outline" | "solid" |
"solid" |
size | . | "small" | "normal" | "large" |
"normal" |
shape | . | "round" | "normal" | "circle" |
"normal" |
value | . | String | "off" |
states | . | String list comma separated | "on,off" |
Attribute | Description | Type | Default |
---|---|---|---|
base | Front part of the URL. | String | "" |
src | Image part of the URL or full URL. | String | "" |
width | Force a certain image width. | Number | "auto" | "auto" |
height | Force a certain image height. | Number | "auto" | "auto" |
interval | Reloading every x secondes. | Number | 0 |
refresh | Changes of this attribute triggers a reload. | String list comma separated | "" |
nocache | Bypass cache on next reload. | Boolean | false |
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.
Attribute | Description | Type | Default |
---|---|---|---|
color | The color to use from color palette. | "primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark" |
"primary" |
text | Text to display inside. | String | "" |
Speak uses the browser's Web Speech API to synthesize text to speech.
Attribute | Description | Type | Default |
---|---|---|---|
lang | Language of the utterance. | "en-US" | "de-DE" |
the user-agent default |
pitch | Pitch at which the utterance will be spoken at. | Float | 0.9 |
rate | Speed at which the utterance will be spoken at. | Float | 1.0 |
volume | Volume that the utterance will be spoken at. | Float | 1.0 |
text | Text that will be synthesized when the utterance is spoken. | String | "" |
... to be continued
The Chart component uses Chart.js to render charts.
Main component: ftui-chart
Attribute | Description | Type | Default |
---|---|---|---|
title | String | "" |
|
type | String | "line" |
|
width | String | "" |
|
height | String | "" |
|
unit | String | "day" |
|
offset | Number | 0 |
|
prefetch | Number | 0 |
|
extend | Boolean | false |
|
noscale | Boolean | false |
Child component: ftui-chart-control
Attribute | Description | Type | Default |
---|---|---|---|
unit | String | "" |
|
units | Strings | "" |
|
startDate | Date | "" |
|
endDate | Date | "" |
Child component: ftui-chart-control
Attribute | Description | Type | Default |
---|---|---|---|
label | String | "" |
|
fill | Boolean | false |
|
hidden | Boolean | false |
|
pointBackgroundColor | Color | primaryColor |
|
backgroundColor | Color | "" |
|
borderColor | Color | primaryColor |
|
borderWidth | Number | 1.2, |
|
pointRadius | Number | 2 |
|
title | String | "-" |
|
log | String | "-" |
|
file | String | "-" |
|
spec | String | "4:.*" |
|
unit | String | "°C" |
|
startDate | Date | "" |
|
endDate | Date | "" |
|
prefetch | Number | 0 |
|
extend | Boolean | false |
|
update | String | "" |
|
tension | Number | 0.0 |
|
stepped | Boolean | false |
|
offset | Number | 0 |
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>
<ftui-row>
<ftui-column>
<ftui-cell>
<ftui-icon name="umbrella"></ftui-icon>
<ftui-label>Monday</ftui-label>
</ftui-cell>
</ftui-column>
</ftui-row>
- Tab
- Grid
- Label
- Icon
- Button
- Knob
- Slider
- Checkbox
- Circlemenu
- Dropdown
- Colorpicker
- Image
- Badge
- Speak
- Chart
- Popup
You can thank the creator of this versatile UI:
Many many thanks to all donators!
This project is licensed under MIT.