FHEM Dashboard – Tablet-UI Widgets

In diesem Beitrag möchte ich zeigen, wie ich die einzelnen Tablet-UI Widgets in FHEM verwendet habe. Das Grundgerüst haben wir ja bereits im vorherigen Beitrag geschaffen.

FHEM Tablet-UI Widgets

Anhand des folgenden Beispiels zeige ich, wie die verschiedenen Widgets verwendet werden können:

Was ist hier zu sehen?
Ganz links befindet sich die Hauptnavigation, in der zweiten Spalte sieht man oben das aktuelle Wetter und darunter den Familienkalender. In der dritten Spalte habe ich eine Wettervorschau sowie einige Schalter für die Rollläden im Haus. Ganz unten sieht man wann das nächste Mal Müllabfuhr ist und welche Personen sich im Haus befinden.

Übersicht der FHEM Tablet-UI Widgets

Standard-UI Elemente

• thermostat : dial for heater thermostates to set desired value and show current value
• switch : Toggle any command to FHEM (e.g. on / off)
• label : show state as text (colourable)
• symbol : show state as an icon (e.g. window open)
• push : send one single command to FHEM e.g. up / down
• dimmer : toogle button with a setter for on value
• slider : vertical/horizontal slider to select between min/max value
• volume : dial to set a single value (e.g. 0-60)
• range : vertical bar graph to show a values range between min/max value and high/low limits with different colors
• colorwheel : select a color from a wheel
• link : link or button link element
• spinner : is a control element to adjust a value by clicking on the up or down icon
• circlemenu : Cover multiple widgets behind a single widget
• select : Combobox to provide a list for selection
• checkbox : Toggle any command to FHEM (e.g. on / off)
• level : vertical/horizontal bar to show values between min/max value
• progress : round symbolic display for percent values

Paginierung und Tabs

• pagetab : Element to smoothly exchange the whole page with another page
• pagebutton : Simple element to jump to another page and is shown as ON on destination Page
• rotor : slider to switch automatically between multiple widgets at one position
• swiper : touch slider for multiple widgets at one position

Diagramme

• simplechart : simple XY line chart for one value (reads directly from fhem log file)
• chart : multistyle chart for multiple values (reads directly from FHEM log file)
• highchart : multistyle chart for multiple values

Spezielle Widgets

• homestatus : selector for 4 states (1=home,2=night,3=away,4=holiday)
• image : insert an image, the URL is given by a reading
• weather : insert an icon or image, represending a weather literal
• departure : a pulic transport departure schedule widget
• popup : a popup dialog which open on click on another widget
• readingsgroup : displaying a readingsgroup defined in fhem
• datetimepicker : select a date and time value from calendar
• eventmonitor: for debugging – shows all events which normal widgets ’see‘

Zusätzliche Widgets

• button : Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
• clock : einfache Uhr
• iframe : Einbindung eines iFrames
• klimatrend : Anzeige des Klimatrends als Pfeile (Einfach oder Doppel-Pfeil)
• kodinowplaying : Kontrollelemente (Play, Pause, Stop, Vor, Zurück) für Kodi mit Anzeige des aktuellen Titels
• settimer : Timer Einstellung
• weather : Anzeige des Wetters
• wind_direction : Anzeige der Windrichtung als Windrose

FHEM Tablet-UI Widgets Dokumentation

Für die Darstellung gibt es unterschiedliche Widgets.
FHEM Tablet UI Dokumentation
FHEM Tablet UI Widgets

In den nächsten Artikeln zeige ich, wie ihr die einzelnen Widgets verwenden könnt.