DOIF/uiTable Schnelleinstieg: Unterschied zwischen den Versionen

Version vom 22. Dezember 2019, 18:18 Uhr

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.

Eventbasierte Änderungen visualisierter Readings werden unmittelbar in der WEB-Ansicht aktualisiert. Eine erstellte Tabelle erscheint unterhalb der Statuszeile des DOIFs. Das uiTable-Attribut kann in bereits bestehenden DOIFs, aber auch in funktionslosen DOIFs, wie in den unteren Beispielen, als reines WEB-Interface definiert werden. In der Abbildung rechts ist ein Statusbildschirm aus mehreren DOIF/uiTable-Definitionen aufgebaut worden.

Die folgenden Beispieldefinitionen arbeiten mit konkreten Geräten und Readings, sie können als RAW-Definition ins eigene System übernommen werden, dazu müssen die Gerätenamen und Readings natürlich den existierenden Namen des eigenen Systems angepasst werden. Zum Ausprobieren der Beispiele können statt echter Geräte auch Dummys benutzt werden.

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:

Tabellendefinition mit Berechnungen

Zellenauswertung

jede Zelle der Tabelle wird über Perl ausgewertet
Readingangaben der Form [<device>:<reading>] werden in eine Perlfunktion übersetzt
das Ergebnis des ausgewerteten Perlausdrucks wird ausgegeben
in einer Zelle können beliebige Perlfunktionen genutzt werden
Texte oder Funktionen können mit Punkt aneinander gehängt werden
mit Komma werden Texte oder Werte untereinander dargestellt
in einer Berechnung sollte ein Trigger in Form einer Readingangabe [<device>:<reading>] vorkommen, sonst wäre das Ergebnis statisch und würde sich nicht ändern

Beispieldefinition

defmod di_uiTable_calc DOIF ##
attr di_uiTable_calc uiTable ## Tabellendefinition\
"Differenz"|[T_Ruecklauf:temperature]-[T_Vorlauf:temperature]\
"Minimum"|minNum([TH_WZ_HM:measured-temp],[TH_Keller_HM:measured-temp])\
"Durchschnitt"|([T_Ruecklauf:temperature]+[T_Vorlauf:temperature])/2

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', wenn $icon_off nicht definiert ist
$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:

Schaltbares Icon mit Hilfe der Funktion switch

Der Zustand eines Gerätes/Readings wird mit Hilfe eines Icons dargestellt, er kann über die WEB-Oberfläche durch Anklicken geschaltet werden. Damit der Zustand des Gerätes geschaltet werden kann, muss das Gerät den set-Befehl unterstützen.

uiTable-Funktion switch

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

$value       # [<device>:<reading>] 
$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', wenn $icon_off nicht definiert ist
$state_off   # Wert zugehörig zum Icon off, default "off"
$state_on    # Wert zugehörig zum Icon on, default "on"

Beispieldefinition

defmod di_uiTable_switch DOIF ##
attr di_uiTable_switch uiTable {\
  package ui_Table;;\
}\
## schaltbares Icons in der Webansicht \
switch([Lampe:state]) | \
switch([Lampeflur:state],"hue_room_hallway") |\
switch([Anwesenheit:state],"status_away_2","status_available\@DarkOrange")|\
switch([Haus:state],"status_locked","status_open\@DarkOrange","closed","open")\

Ergebnis der Beispieldefinition in der Webansicht:

Rollladen: Visualisierung und Steuerung mit Hilfe der Funktion shutter

Die aktuelle Position des Rollladens (0 % - 100 %) wird über Icons visualisiert. Das Anklicken eines Symbols steuert den Rollladen auf die entsprechende Position. Prozentwerte zwischen zwei Icon-Werten werden dem nächsthöheren Icon-Wert zugeordnet.

uiTable-Funktion shutter

shutter ($value,$color,$type)

$value       # [<device>:<reading>] 
$color       # Farbe der aktuellen Rollladenposition, vorangestelltes @ verändert die Farbe des Icons, ohne @ wird der Hintergrund des Icons eingefärbt, default ist @DarkOrange
$type        # optional, Anzahl der Symbole 2 bis 6, 3 ist default

Beispieldefinition

defmod ui_Table_shutter DOIF ##
attr ui_Table_shutter uiTable {\
  package ui_Table;;\
}\
shutter([R_Keller:pct],"\@yellow",2)     ## zwei Symbole für 0 % und 100 %\
shutter([R_Wohnzimmer_S:pct])            ## entspricht shutter ([R_Wohnzimmer_S:pct],"\@DarkOrange",3) \
shutter([R_Wohnzimmer_W1:pct],"blue",4)  ## vier Symbole \
shutter([R_Wohnzimmer_W2:pct],"\@red",5) ## fünf Symbole\
shutter([R_Wohnzimmer_W3:pct],"red",6    ## sechs Symbole)

Ergebnis der Beispieldefinition in der Webansicht:

Helligkeit: Visualisierung und Steuerung mit Hilfe der Funktion dimmer

Die aktuelle Helligkeit (0 % - 100 %) wird über Icons visualisiert. Das Anklicken eines Icons bestimmt die Helligkeit der Leuchte. Prozentwerte zwischen zwei Icon-Werten werden dem nächsthöheren Icon-Wert zugeordnet.

uiTable-Funktion dimmer

dimmer ($value,$color,$type)

$value       # [<device>:<reading>] 
$color       # Farbe der aktuellen Helligkeit, vorangestelltes @ verändert die Farbe des Icons, ohne @ wird der Hintergrund des Icons eingefärbt, default ist @DarkOrange
$type        # Anzahl der Symbole 2 bis 7, 3 ist default

Beispieldefinition

defmod di_uiTable_dimmer DOIF ##
attr di_uiTable_dimmer uiTable {\
  package ui_Table;;\
}\
dimmer([Strauch3:pct],"\@yellow",2)\
dimmer([Strauch3:pct]) ## entspricht dimmer([Strauch3:pct],"\@DarkOrange",3) \
dimmer([Strauch3:pct],"blue",4)\
dimmer([Strauch3:pct],"\@red",5)\
dimmer([Strauch3:pct],"red",6)\
dimmer([Strauch3:pct],"DarkOrange",7)

Ergebnis der Beispieldefinition in der Webansicht:

Vorgabetemperatur eines Thermostats mit Hilfe der Funktion temp_knob

Die aktuelle Vorgabetemperatur eines Thermostats wird über ein Icons visualisiert. Durch Anklicken des Ringes wird die Vorgabetemperatur verändert.

uiTable-Funktion temp_knob

temp_knob ($value,$color,$set)

$value       # [<device>:<reading>] 
$color       # Farbe der voreingestellten Temperatur, default "Darkorange"
$set         # set-Befehl, default "set", sonst muss "set <Readingname>" angegeben werden, falls sich das Reading vom set-Befehl vom angezeigten Reading unterscheidet, wie beim THRESHOLD-Modul

Beispieldefinition

defmod ui_Table_temp_knob DOIF ##
attr ui_Table_temp_knob uiTable {\
package ui_Table;;\
}\
\
## HM-EU-Thermostat, angezeigt wird das Reading "desired-temp", geschaltet wird über "set desired-temp" \
"Dachgeschoss"|temp_knob([TH_DG_HM:desired-temp]) ## entspricht temp_knob([TH_DG_HM:desired-temp],"Darkorange","set") \
\
## HM-EU-Thermostat Temperaturanzeige in gelb \ 
"Wohnzimmer"|temp_knob([TH_WZ_HM:desired-temp],"yellow") \
\
## Beim THRESHOLD-Modul wird das Reading "desired_value" angezeigt, geändert wird die Temperatur per "set desired" \
"Küche"|temp_knob([TH_Kueche:desired_value],"red","set desired")

Ergebnis der Beispieldefinition in der Webansicht:

uiTable-Templates

Die Definition einer oder mehrere Zellen kann zu einem Template zusammengefasst werden. Durch die Nutzung von Templates kann die Definition einer Tabelle erheblich vereinfacht werden. Insb. bei gleichartigen Zellen/Zeilen für verschiedene Geräte/Readings braucht eine aufwendige Definition nicht immer wieder wiederholt werden, sondern kann jeweils mit dem Aufruf eines zuvor definierten Templates realisiert werden.

Templates

Die Definition von Templates muss vor der Tabellendefinition vorgenommen werden
Eine Template-Definition beginnt mit dem Schlüsselwort DEF
Der Template-Name muss mit TPL_ beginnen
Template-Definition-Syntax

DEF TPL_<Template-Name>(<Zellendefinition mit Platzhaltern: $1,$2,...>)

Templates-Definitionen können in externe Dateien ausgelagert werden
Templates-Definitionen können per IMPORT-Befehl aus externen Dateien importiert werden
Template-Import-Syntax

IMPORT <Pfad mit Dateinamen>

Innerhalb einer Tabellendefinition können zuvor definierte oder importierte Templates mehrfach genutzt werden
Template-Aufruf-Syntax

TPL_<Template-Name>(<Übergabeparameter für $1>,<Übergabeparameter für $2>,...)

Beispieldefinition

defmod ui_Table_Template DOIF ##
attr ui_Table_Template uiTable {\
  package ui_Table;;\
  $TC{1..3}="align='center'";; ## Spalten 1 bis 3 werden zentriert\
}\
\
## Template-Definitionen beginnen vor der Tabellendefinition\
\
## Das Template TPL_raum stellt eine Tabellenzeile dar, die mit Hilfe von uiTable-Funktionen mehrere Tabellenzellen definiert\
DEF TPL_raum ("$1" | temp([TH_$2_HM:measured-temp]),hum([TH_$2_HM:humidity]) | switch([H_$2:state],"fa_off") | temp_knob([TH_$2_HM:desired-temp]))\
\
## Tabellendefinition\
\
## pro Tabellenzeile wird ein Raum mit Hilfe des oben definierten Templates "TPL_raum" dargestellt\
"Raum"|"Temp./Feuchte"|"Ventil"|"Vorgabetemp."\
TPL_raum (Dachgeschoss,DG)  ## der Übergabeparameter "Dachgeschoss" wird im Template "TPL_raum" anstelle von $1 eingesetzt, "DG" wird anstelle von $2 eingesetzt\
TPL_raum (Bad,Bad)\
TPL_raum (Kinderzimmer ost,Kz_o)\
TPL_raum (Kinderzimmer west,Kz_w)\
TPL_raum (Wohnzimmer,WZ)\
TPL_raum (Keller,Keller)

Ergebnis der Beispieldefinition in der Webansicht:

Eigene uiTable-Funktionen programmieren

Für die eigenen Bedürfnisse können eigene uiTable-Funktionen programmiert werden. In der Datei contrib/DOIF/uiTable.tpl befinden sich alle intern definierten uiTable-Funktion aus dem package ui_Table als Kopie. Diese Funktionen können als Inspiration für eigene Entwicklung dienen.

uiTable-Funktionen

Es gibt drei Arten von uiTable-Funktionen, sie werden intern anhand der Rückgabewerte unterschieden
uiTable-Funktionen vom Typ HTML, ein Rückgabewert

return(<HTML-code>)

uiTable-Funktionen vom Typ Style (entspricht STY-Funktion), zwei Rückgabewerte

return(<value>,<CSS-style>)

uiTable-Funktionen vom Typ Widget (entspricht WID-Funktion), vier Rückgabewerte

return (<value>,<>,<FHEM-widget>,<set-command: "set" or "set <Readingname>">)

uiTable-Funktionen sind reine Perlfunktionen
uiTable-Funktionen sollten im eigenen Package definiert werden, sonst könnten bestehende Perlfunktionen im System überschrieben werden
uiTable-Funktionen können in Template-Dateien ausgelagert werden und über IMPORT-Befehl importiert werden, siehe Templates

Beispieldefinition

defmod di_uiTable_function DOIF ##
attr di_uiTable_function uiTable {\
package my_uiTable;; ## eigenes Package mit selbstdefinierten Funktionen\
\
## uiTable-Funktion vom Typ "HTML", Rückgabewert: (HTML-code)\
\
sub clock { ## Anzeige aktueller Uhrzeit mit Datum\
            ## Voraussetzung: contrib/DOIF/doifclock.js muss ins www/pgm2-Verzeichnis kopiert werden\
            ## Attribut setzen in der Webinstanz: attr <WEB-Instanz> JavaScripts pgm2/doifclock.js \
  my ($color,$size)=@_;;\
  $color="darkorange" if (!defined ($color));; ## $color ist optional, default Darkorange\
  $size="20" if (!defined ($size));;           ## $size ist optional, default 20pt\
  return("<div class='doifclock'style='font-weight:bold;;font-size:".$size."pt;;color:".$color.";;'>error</div>")\
}\
\
## uiTable-Funktion vom Typ Style, Rückgabewerte (Wert,CSS-style)\
\
sub red_green { ## Farbige Skalierung von Zahlen mit Hilfe der DOIF_hsv-Funktion: von 0 - rot bis 10 - grün\
    my ($value)=@_;;\
    return ($value." KW",                                                   ## Wert/Text\
           "font-weight:bold;;color:".::DOIF_hsv ($value,0,10,0,120,70,100) ## CSS-Style\
           );;\
} \
\
## uiTable-Funktion vom Typ Widget, Rückgabewerte (Wert,Leer,FHEM-Widget,set-Befehl)\
\
sub slider { ## FHEM-Widget Slider, weitere FHEM-Widgets siehe: https://wiki.fhem.de/wiki/FHEMWEB/Widgets\
    my ($value,$set)=@_;;\
    $set="set" if (!defined $set);;\
    return ($value,                   ## Zahlenwert\
            "",                       ## leer\
            "slider,0,0.5,100,1",     ## FHEM-Widget\
            $set                      ## set-Befehl des FHEM-Widgets\
            ) \
}\
\
}\
\
## Tabellendefinition\
\
"Uhrzeit/Datum"\
clock("yellow",30)          ## obige Funktion clock\
"Dimmer"\
slider([Wohnzimmer:pct])    ## obige Funktion slider\
"Leistung"\
red_green([Leistung:state]) ## obige Funktion red_green

Ergebnis der Beispieldefinition in der Webansicht:

DOIF_hsv- Funktion für Farbskalierungen

Mit Hilfe der DOIF_hsv-Funktion können, Texte, Werte oder Icons abhängig vom Wert eingefärbt werden. Den Farbwert HSV (0 - 360) für den kleinsten sowie größten Wert kann man mit Hilfe eines color pickers bestimmen. Der Rückgabewert ist ein Farbwert in der CSS-Notation.

DOIF_hsv-Funktion für Farbskalierungen

DOIF_hsv ($value,$min_value,$max_value,$min_hsv,$max_hsv,$saturation,$lightness)
$value      # Wert, Reading
$min_value  # der kleinste Wert, dieser entspricht dem Farbwert $min_hsv
$max_value  # der größte Wert, dieser entspricht dem Farbwert $max_hsv
$min_hsv    # Farbwert für den kleinsten Wert $min_value
$max_hsv    # Farbwert für den größten Wert $max_value
$saturation # Farbsättigung
$lightness  # Farbhelligkeit

Beispieldefinition

defmod di_uiTable_DOIF_hsv DOIF ##
attr di_uiTable_DOIF_hsv room test,wiki
attr di_uiTable_DOIF_hsv uiTable {\
  package $SELF;;\
  sub bat_icon { ## färbt das Icon 'measure_battery_100' abhängig vom Wert mit Hilfe der Funktion DOIF_hsv \
    my ($value)=@_;;\
    return(::FW_makeImage("measure_battery_100\@".::DOIF_hsv ($value,0,100,0,120,100,100)))\
  }\
   \
  sub bat_icon2 {## zusätzlich zum Farbwert wird ein entsprechendes Icon bestimmt\
    my($val)=@_;;\
	my $icon;;\
	if ($val==0) {\
	  $icon="measure_battery_0";;\
	} elsif ($val<=25) {\
	  $icon="measure_battery_25";;\
	} elsif ($val<=50) {\
	  $icon="measure_battery_50";;\
	} elsif ($val<=75) {\
	  $icon="measure_battery_75";;\
	} else {\
	  $icon="measure_battery_100";;\
	}\
	\
	my $output=::FW_makeImage("$icon\@".::DOIF_hsv ($val,0,100,0,120,90,100));;\
    return($output);;\
  }\
}\
## eingefärbtes Icon 0 % entspricht rot (HSV-Wert 0), 100 % entspricht grün (HSV-Wert 120) mit Direktangabe\
1|::FW_makeImage("measure_battery_100\@".::DOIF_hsv ([bat:level],0,100,0,120,100,100))\
## gleiche Funktionalität mit Hilfe der oben definierten Funktion bat_icon \
2|bat_icon([bat:level])\
## Icon mit Hilfe der oben definierten Funktion bat_icon2\
3|bat_icon2([bat:level])\
## Beispiel für die Farbskaliereung von 0 bis 100 % mit der obigen Funktion bat_icon\
4|bat_icon(0)|bat_icon(10)|bat_icon(20)|bat_icon(30)|bat_icon(40)|bat_icon(50)|bat_icon(60)|bat_icon(70)|bat_icon(80)|bat_icon(90)|bat_icon(100)\
## Beispiel für die Farbskaliereung von 0 bis 100 % mit der obigen Funktion bat_icon2\
5|bat_icon2(0)|bat_icon2(10)|bat_icon2(20)|bat_icon2(30)|bat_icon2(40)|bat_icon2(50)|bat_icon2(60)|bat_icon2(70)|bat_icon2(80)|bat_icon2(90)|bat_icon2(100)

Ergebnis der Beispieldefinition in der Webansicht:

Anwendungsbeispiele

Visualisierung und Steuerung von Rollläden

Im folgenden Beispiel werden Rollläden morgens hochgefahren, ebenso wird die Position aller Rollläden visualisiert. Durch Anklicken eines Icons wird der Rollladen auf die entsprechende Position bewegt.

nützliche Links

Zeitsteuerung
uiTable-Funktion shutter
uiTable-Funktion style
Templates

defmod DI_Rollladen DOIF (([Dunkelheit] eq "off" and [06:25-09:00|8]) or [09:00|7]) \
  ((set R_W_S,R_W_W[1-3] on)) ## Hochfahren der Rollläden im Erdgeschoss morgens\
DOELSEIF ([Dunkelheit] eq "on")
attr DI_Rollladen cmdState oben|unten
attr DI_Rollladen devStateIcon unten:status_night oben:scene_day
attr DI_Rollladen icon fts_shutter_automatic
attr DI_Rollladen uiTable {\
   package ui_Table;;\
}\
\
## Template für ein Fenster\
DEF TPL_shutter("$1"|shutter([$1:pct]))\
\
## Tabellendefinition\
\
style("Dachgeschoss","Darkorange")|""\
TPL_shutter(R_Dachboden)\
style("erstes Geschoss","Darkorange")|""\
TPL_shutter(R_Bad)\
TPL_shutter(R_Kinderzimmer1_O)\
TPL_shutter(R_Kinderzimmer1_S)\
TPL_shutter(R_Kinderzimmer2_S)\
TPL_shutter(R_Kinderzimmer2_W1)\
TPL_shutter(R_Kinderzimmer2_W2)\
style("Erdgeschoss","Darkorange")|""\
TPL_shutter(R_Kueche)\
TPL_shutter(R_W_S)\
TPL_shutter(R_W_W1)\
TPL_shutter(R_W_W2)\
TPL_shutter(R_W_W3)\
style("Keller","Darkorange")|""\
TPL_shutter(R_Keller)\

Ergebnis des Anwendungsbeispiels in der Webansicht:

Anzahl der Tage bis zur Abfall-Entsorgung

Mit Hilfe des Kalender-Moduls calendar (hier cal) und des Abfall-Moduls ABFALL (hier abfall) werden über DOIF_Readings die Tage bis zur Abfall-Entsorgung der jeweiligen Tonne gefiltert und mit Hilfe von uiTable visualisiert. Wenn der Tag der Entsorgung bevorsteht, wird er farbig gekennzeichnet.

nützliche Links

FHEM-Modul calendar
FHEM-Modul ABFALL
Attribut startup
Attribut DOIF_Radings
Aggregationsfunktion #min
eigene uiTable-Funktion number
Funktion FW_makeImage

defmod Abfall DOIF ##
attr Abfall DOIF_Readings bio:[#min:"^abfall$":"Bioabfall.*_days$"], GelberSack:[#min:"^abfall$":"GelberSack.*_days$"], Gruenschnitt:[#min:"^abfall$":"Gruenschnitt.*_days$"]
attr Abfall startup sleep 60;;set cal reload
attr Abfall uiTable {\
  package $SELF;; ## definierte Funktionen sind nur in diesem DOIF ($SELF) bekannt\
  $TC{0..4}="align='center'";;\
  $SHOWNOSTATE=1;; ## der Status des Moduls wird nicht angezeigt\
  \
  \
  sub number { ## uiTable-Funktion vom Typ Style, die übergebene Zahl wird fett-formatiert und bei 0-1 Tagen orange eingefärbt\
    my ($value)=@_;;\
	my $style="font-weight:bold;;";;\
	$style.="color:darkorange" if ($value <= 1);;\
	return($value,$style)\
  }\
}\
## Farbige Icons mit Hilfe der Funktion FW_makeImage\
::FW_makeImage("Abfalltonne-Recycling-Logo\@yellow")|::FW_makeImage("Abfalltonne-Recycling-Logo\@blue")| \
::FW_makeImage("Abfalltonne\@gray")|::FW_makeImage("Abfalltonne\@green")|::FW_makeImage("Gartenabfall\@green")\
## zweite Zeile mit der Anzahl der Tage bis zur Entsorgung der jeweiligen Tonne\
number([$SELF:GelberSack])|number([abfall:Altpapier_days])|number([abfall:Restmuell_days])|number([$SELF:bio])|number([$SELF:Gruenschnitt])

Ergebnis der Beispieldefinition in der Webansicht:

Visualisierung: offene Fenster

Alle offenen Fenster werden aufgelistet und mit entsprechendem Icon visualisiert.

nützliche Links

Attribut DOIF_Radings
DOIF-Aggregationsfunktionen
uiTable-Funktion icon

defmod di_uiTable_windows DOIF ## Visualisierung offener Fenster, Fenster-Devices enden mit "Fenster" im Namen
attr di_uiTable_windows DOIF_Readings windows:[@as(<br>)"Fenster$":state:"open","keine"]
attr di_uiTable_windows uiTable {\
package ui_Table;;\
$TC{1}="align='center'";;\
}\
icon([$SELF:windows],"fts_window_1w_open\@DarkOrange","fts_window_1w",".*","keine")|[$SELF:windows]

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"