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

Einfache Tabellendefinition ohne Funktionen

Tabellendefinition

eine Tabelle wird aus Zellen zusammengebaut
mehrere Zellen werden mit | von einander getrennt, sie bilden eine Tabellenzeile
eine neue Tabellenzeile beginnt mit einer neuen Zeile in der Tabellendefinition
eine Tabellenzeile kann auch in mehreren Zeilen definiert werden, diese müssen dann mit | enden
Texte werden in Anführungszeichen angegeben
Readings werden in der Form [<device>:<reading>] angegeben
Kommentare beginnen mit ## und enden mit Zeilenende
Events eines definierten Readings, führen sofort zu Aktualisierung seines Inhalts in der visualisierten Tabelle

Beispieldefinition

defmod ui_Table_definition DOIF ##
attr ui_Table_definition uiTable { ## Perlblock für globale Tabellendefinitionen\
 \
 $TC{1..2}="align='center'" ## zentrierte Ausrichtung der zweiten und dritten Spalte\
\
}\
\
## Tabellendefinition\
\
"Warmwasser"|"Vorlauf"|"Rücklauf"   ## erste Tabellenzeile\
									## zweite Tabellenzeile\
[T_Warmwasserspeicher:temperature]| ## Zeile wird fortgesetzt, da sie mit | endet\
[T_Vorlauf:temperature]|            ## Zeile wird fortgesetzt, da sie mit | endet\
[T_Ruecklauf:temperature]

Ergebnis der Beispieldefinition in der Webansicht:

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..2}="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:

Icon-Darstellung mit Hilfe der Funktion icon

Der Zustand eines Gerätes/Readings wird mit Hilfe eines Icons dargestellt.

uiTable-Funktion icon

icon ($value,$icon_off,$icon_on,$state_off,$state_on)

$value       # Wert 
$icon_off    # Icon für den Wert off, default "off"
$icon_on     # Icon für den Wert on, default Icon für Wert 'off' in Farbe 'DarkOrange', sonst Icon 'on' 
$state_off   # Wert zugehörig zum Icon off, default "off"
$state_on    # Wert zugehörig zum Icon on, default "on"

Beispieldefinition

defmod di_uiTable_icon DOIF ##
attr di_uiTable_icon uiTable {\
  package ui_Table;;\
}\
## Tabellendefinition\
\
 ## Standard-Icon off/on für Standardwert off/on \
"Lampe"|icon([Lampe:state])    ## entspricht icon([Lampe:state],"off","on","off","on")\

## Icon für Zustand 'off' ist 'hue_room_hallway', für Zustand 'on' 'hue_room_hallway\@DarkOrange'\
"Flur"|icon([Lampeflur:state],"hue_room_hallway")    ## entspricht icon([Lampeflur:state],"hue_room_hallway","hue_room_hallway\DarkOrange","off","on")\

## Icon für Zustand 'off' ist 'status_away_2', für Zustand 'on' 'status_available\@DarkOrange'\
"Anwesenheit"|icon([Anwesenheit:state],"status_away_2","status_available\@DarkOrange") \

## Icon für Zustand 'closed' ist "status_locked", für Zustand 'open' 'status_open\@DarkOrange'\
"Haus"|icon([Schloss:state],"status_locked","status_open\@DarkOrange","closed","open")

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