Damian-s: /* Weiterführende Links */

2026-04-23T06:46:53Z

Weiterführende Links

Damian-s: /* Vorgabetemperatur eines Thermostats mit Hilfe der Funktion temp_knob */

2026-04-23T06:44:22Z

Vorgabetemperatur eines Thermostats mit Hilfe der Funktion temp_knob

Damian-s: Die Seite wurde neu angelegt: „=== Einfache uiTable-Funktionen === ==== Farbskalierte Temperaturanzeige mit Hilfe der Funktion '''temp''' ==== Die Farbe der dargestellten Temperatur ist abhängig vom Temperaturwert: ohne {{Randnotiz|RNText=uiTable-Funktion '''temp''' temp ($temp,$size,$icon) $temp # Temperatur $size # Schriftgröße in Pixel (pt), optional $icon # Icon, welches vorangestellt wird, optional
2026-04-23T06:40:17Z

Die Seite wurde neu angelegt: „=== Einfache uiTable-Funktionen === ==== Farbskalierte Temperaturanzeige mit Hilfe der Funktion '''temp''' ==== Die Farbe der dargestellten Temperatur ist abhängig vom Temperaturwert: 600px|ohne {{Randnotiz|RNText=uiTable-Funktion '''temp''' <syntaxhighlight lang="perl"> temp ($temp,$size,$icon) $temp # Temperatur $size # Schriftgröße in Pixel (pt), optional $icon # Icon, welches vorangestellt wird, optional </syntaxh…“

Neue Seite
=== Einfache uiTable-Funktionen ===
==== Farbskalierte Temperaturanzeige mit Hilfe der Funktion '''temp''' ====
Die Farbe der dargestellten Temperatur ist abhängig vom Temperaturwert:
[[Datei:Farbskalierung temp.png|600px|ohne]]
{{Randnotiz|RNText=uiTable-Funktion '''temp'''
<syntaxhighlight lang="perl">
temp ($temp,$size,$icon)

$temp # Temperatur
$size # Schriftgröße in Pixel (pt), optional
$icon # Icon, welches vorangestellt wird, optional
</syntaxhighlight>
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:Temp.png|ohne|mini]]

==== Farbskalierte Feuchtigkeitsanzeige mit Hilfe der Funktion '''hum''' ====
Die Farbe der dargestellten Feuchtigkeit ist abhängig vom Feuchtigkeitswert:
[[Datei:Farbskalierung hum.png|350px|ohne]]
{{Randnotiz|RNText=uiTable-Funktion '''hum'''
<syntaxhighlight lang="perl">
hum ($hum,$size,$icon)

$hum # Feuchtigkeit
$size # Schriftgröße in Pixel (pt), optional
$icon # Icon, welches vorangestellt wird, optional
</syntaxhighlight>
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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")
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable Funktion hum.png|ohne|mini]]

==== Textformatierungen mit Hilfe der Funktion '''style''' ====
Texte werden in Farbe, Größe und Schriftart statisch oder dynamisch formatiert.
{{Randnotiz|RNText=uiTable-Funktion '''style'''
<syntaxhighlight lang="perl">
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
</syntaxhighlight>
Mögliche Werte für '''''color''''' und '''''font_weight''''' können in einschlägiger Dokumentation zu CSS nachgeschlagen werden
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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")
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:Style.png|ohne|mini]]

==== Icon-Darstellung mit Hilfe der Funktion '''ICON''' ====
Mit Hilfe der Funktion '''ICON''' kann ein FHEM-Icon dargestellt werden
{{Randnotiz|RNText=uiTable-Funktion '''ICON'''
<syntaxhighlight lang="perl">
ICON ($icon)

$icon # Icon mit Farbgebung
</syntaxhighlight>

'''ICON''' benutzt die Funktion [[DevelopmentFHEMWEB-API#FW_makeImage|FW_makeImage]]

'''nützliche Links'''
* [[DOIF/uiTable Schnelleinstieg#hsv-Funktion für Farbskalierungen|hsv-Funktion]]
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
defmod di_Table_ICON DOIF ##
attr di_Table_ICON uiTable {\
package ui_Table;;\
}\
## Tabellendefinition\
ICON("temp_frost") | ## Icon ohne Einfärbung\
ICON("temp_frost\@blue") | ## Icon in CSS-Farbe blau\
ICON("temp_frost\@#8A2BE2") | ## Icon in CSS-Farbe #8A2BE2\
ICON("temp_frost\@".([Aussensensor:temperature] > 0 ? "orange":"blue"))| ## Icon in CSS-Farbe orange über Null Grad, sonst in CSS-Farbe blau\
ICON("temp_frost\@".hsv ([Aussensensor:temperature],-20,40,320,0)) ## Icon in Farbskalierung von violett (-20 °C) bis rot (40 °C) mit Hilfe der Funktion hsv
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable_IC.png|mini|ohne]]

==== Icon-Darstellung mit Text mit Hilfe der Funktion '''icon_label''' ====
Mit Hilfe der Funktion '''icon_label''' kann ein FHEM-Icon mit einem angehängten Text/Wert dargestellt werden.
{{Randnotiz|RNText=uiTable-Funktion '''icon_label'''
<syntaxhighlight lang="perl">
icon_label ($icon,$text,$color,$color_bg,$pos_left,$pos_top)
$icon # FHEM-Icon mit Farboption
$text # dargestellter Text
$color # Farbe des Textes, optional
$color # Hintergrundfarbe des Textes, optional
$pos_left # horizontale Position des Textes in px, default -5, optional
$pos_top # vertikale Position des Textes in px, default -8, optional
</syntaxhighlight>

'''Anwendungsbeispiele'''
* [[DOIF/uiTable Schnelleinstieg#Anzahl der Tage bis zur Abfall-Entsorgung|Abfall]]
* [[DOIF/uiTable Schnelleinstieg#Visualisierung: aktueller Spritpreis|Sprit]]
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
defmod di_uiTable_icon_label DOIF ##
attr di_uiTable_icon_label uiTable { package ui_Table;;\
}\
\
icon_label("fuel",[Tankstelle:Diesel])|\
icon_label("fuel",[Tankstelle:Diesel],"red")|\
icon_label("fuel\@blue",[Tankstelle:Diesel],"blue","#999999")|\
icon_label("fuel\@red",[Tankstelle:Diesel],"red","white",-10)|\
icon_label("fuel",[Tankstelle:Diesel],"white","red",-5,8)\

</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable_icon_label.png|mini|ohne]]

==== Visualisierung eines Gerätes mit Hilfe der Funktion '''icon''' ====
Der Zustand eines Gerätes/Readings wird mit Hilfe eines Icons dargestellt.
{{Randnotiz|RNText=uiTable-Funktion '''icon'''
<syntaxhighlight lang="perl">
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"
</syntaxhighlight>
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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")
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable icon.png|mini|ohne]]

==== 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.

{{Randnotiz|RNText=uiTable-Funktion '''switch'''
<syntaxhighlight lang="perl">
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"
</syntaxhighlight>
}}

'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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")\
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable switch.png|mini|ohne]]

==== 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.
{{Randnotiz|RNText=uiTable-Funktion '''shutter'''
<syntaxhighlight lang="perl">
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
</syntaxhighlight>

* [[DOIF/uiTable Schnelleinstieg#Visualisierung und Steuerung von Rollläden|Anwendungsbeispiel]]
}}
'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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)
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable shutter.png|mini|ohne]]

==== 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.
{{Randnotiz|RNText=uiTable-Funktion '''dimmer'''
<syntaxhighlight lang="perl">
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
</syntaxhighlight>
}}

'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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)

</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable dimmer.png|mini|ohne]]

==== 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.
{{Randnotiz|RNText=uiTable-Funktion '''temp_knob'''
<syntaxhighlight lang="perl">
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
</syntaxhighlight>
}}

'''<big>Beispieldefinition</big>'''
<syntaxhighlight lang="perl">
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")
</syntaxhighlight>
''Ergebnis der Beispieldefinition in der Webansicht:''
[[Datei:UiTable temp knob.png|mini|ohne]]

DOIF/Einfache uiTable-Funktionen - Versionsgeschichte

Damian-s: /* Weiterführende Links */

Damian-s: /* Vorgabetemperatur eines Thermostats mit Hilfe der Funktion temp_knob */