fhem-tablet-ui

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.

Install

• 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

Usage

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

Binding

no binding - fix value

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

Input binding

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>

Output binding

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>

Events

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.

Pipes

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>

Components

Layout

• Tab
• Grid
• Circlemenu
• Row
• Column
• Cell

Elements

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

Miscellaneous

• Speak

... to be continued

All components has following attributes

• hidden
• disabled
• readonly

Button

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"

Image

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

Badge

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

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

Chart

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>

Icon

List of all icons

Layout

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

Examples

• Tab
• Grid
• Label
• Icon
• Button
• Knob
• Slider
• Checkbox
• Circlemenu
• Dropdown
• Colorpicker
• Image
• Badge
• Speak
• Chart
• Popup

Donation

You can thank the creator of this versatile UI:

Many many thanks to all donators!

License

This project is licensed under MIT.