DOIF/uiTable Schnelleinstieg

An dieser Stelle werden anhand von Beispielen Möglichkeiten des uiTable-Attributs mit Hilfe bereits im DOIF-Modul vordefinierter uiTable-Funktionen aufgezeigt. Diese Perlfunktionen sind in einem eigenen Package namens 'ui_Table' definiert worden. Mit Hilfe dieser Funktionen lassen sich recht einfach, ohne tiefere HTML/CSS-Kenntnisse, eigene Übersichten definieren. Abhängig von der Art der Funktion können in einer tabellarischen Darstellung FHEM-Geräte visualisiert, aber auch über die WEB-Oberfläche bedient werden. In der Abbildung rechts ist ein Statusbildschirm aus mehreren DOIF/uiTable-Definitionen aufgebaut worden.


Die Seite befindet sich im Aufbau, siehe Thread zu dieser Seite

Farbskalierte Temperaturanzeige mit Hilfe der Funktion temp

Die Farbe der dargestellten Temperatur ist abhängig vom Temperaturwert:

uiTable-Funktion temp

temp ($temp,$size,$icon)

$temp # Temperatur
$size # Schriftgröße in Pixel (pt), optional
$icon # Icon, welches vorangestellt wird, optional

Beispieldefinition

defmod di_uiTable_temp DOIF ##
attr di_uiTable_temp uiTable {\
  package ui_Table;;           ## Package für uiTable-Funktionen\
  $TC{0..3}="align='center'";; ## zentrierte Darstellung aller Tabellenspalten\
}\
## Tabellendefinition\
\
"Aussen"|"Bad"|"Warmwasser"                             ## mit | werden Tabellenzellen voneinander getrennt \
temp([Aussensensor:temperature])|                       ## Anzeige des Readings 'temperature' des Gerätes 'Aussensensor'  \
temp([TH_Bad_HM:measured-temp],24,"temp_temperature")|  ## Schriftgröße 24pt, mit Icon namens temp_temperature\
temp([T_Warmwasserspeicher:temperature:d1],20)          ## Schriftgröße 20pt

Ergebnis der Beispieldefinition in der Webansicht:

Farbskalierte Feuchtigkeitsanzeige mit Hilfe der Funktion hum

Die Farbe der dargestellten Feuchtigkeit ist abhängig vom Feuchtigkeitswert:

uiTable-Funktion hum

hum ($hum,$size,$icon)

$hum  # Feuchtigkeit
$size # Schriftgröße in Pixel (pt), optional
$icon # Icon, welches vorangestellt wird, optional

Beispieldefinition

defmod di_uiTable_hum DOIF ##
attr di_uiTable_hum uiTable {\
package ui_Table;;\
$TC{1}="align='center'";; ## zweite Spalte der Tabelle zentriert\
}\
## Tabellendefinition \
\
## Anzeige des Readings 'humidity' des Thermostats 'TH_Bad_HM'  \
"Bad"|hum ([TH_Bad_HM:humidity])\
## Feuchtigkeit in Größe 10pt mit Temperatur in einer Tabellenzelle\
"Aussen"|temp ([Aussensensor:temperature]),hum ([Aussensensor:humidity],10)\
## Feuchtigkeit in Größe 26pt mit Icon namens 'temperature_humidity'\
"Keller"|hum ([TH_Keller_HM:humidity],26,"temperature_humidity")

Ergebnis der Beispieldefinition in der Webansicht:

Textformatierungen mit Hilfe der Funktion style

Texte werden in Farbe, Größe und Schriftart statisch oder dynamisch formatiert

uiTable-Funktion style

style ($text,$color,$font_size,$font_weight)

$text  # anzuzeigender Text
$color # CSS color, optional
$font_size # Schriftgröße in Pixel (pt), optional
$font_weight # CSS Schriftart, optional

# mögliche Werte für color und font_weight können in einschlägiger Dokumentation zu CSS nachgeschlagen werden

Beispieldefinition

defmod di_uiTable_style DOIF ##
attr di_uiTable_style uiTable {\
  package ui_Table;;\
}\
## Tabellendefinition\
\
## statische Farbgebung, Größe, Schriftart \
style("Montag","orange")\
style("Dienstag","red",14)\
style("Mittwoch","#00FFFF",20)\
style("Donnerstag","blue",23,"bold")\
## dynamische Farbgebung abhängig vom Zustand des Gerätes 'Alarm'\
style("Alarm",([Alarm:state] eq "on" ? "red":"green"))\
## dynamische Farbgebung des Zustands des Gerätes 'Alarm'\
style([Alarm:state],([Alarm:state] eq "on" ? "red":"green"))\
## variabler Text abhängig vom Zustand des Gerätes 'Alarm'\
style(([Alarm:state] eq "on" ? "Alarm aktiv":"Alarm deaktiviert"),"red")

Ergebnis der Beispieldefinition in der Webansicht:

to be continued ...

Weiterführende Links

Commandref zum DOIF-Attribut uiTable, siehe Attribut uiTable
Weitere Beispiele für Fortgeschrittene, siehe uiTable mit FHEM-Widgets und Styles