DOIF/uiTable Schnelleinstieg: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
(22 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
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 definiert worden. Mit | [[Datei:UiTable state screen.png|500px|rechts|Webansicht bestehend aus mehreren DOIF/uiTable-Definitionen]] | ||
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. | |||
<br> | |||
<br> | |||
<br> | |||
Die Seite befindet sich im Aufbau, siehe [https://forum.fhem.de/index.php/topic,106059.0.html Thread zu dieser Seite]<br> | |||
<br> | |||
== 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''' | {{Randnotiz|RNText=uiTable-Funktion '''temp''' | ||
<syntaxhighlight lang="perl"> | <syntaxhighlight lang="perl"> | ||
Zeile 10: | Zeile 21: | ||
}} | }} | ||
== | === ''Beispieldefinition'' === | ||
<syntaxhighlight lang="perl"> | <syntaxhighlight lang="perl"> | ||
defmod di_uiTable_temp DOIF ## | defmod di_uiTable_temp DOIF ## | ||
Zeile 22: | Zeile 28: | ||
$TC{0..3}="align='center'";; ## zentrierte Darstellung aller Tabellenspalten\ | $TC{0..3}="align='center'";; ## zentrierte Darstellung aller Tabellenspalten\ | ||
}\ | }\ | ||
## Tabellendefinition\ | |||
\ | \ | ||
"Aussen"|"Bad"|"Warmwasser"\ | "Aussen"|"Bad"|"Warmwasser" ## mit | werden Tabellenzellen voneinander getrennt \ | ||
temp([Aussensensor:temperature])| ## Anzeige des Readings 'temperature' des Gerätes 'Aussensensor' \ | 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([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 | temp([T_Warmwasserspeicher:temperature:d1],20) ## Schriftgröße 20pt | ||
</syntaxhighlight> | </syntaxhighlight> | ||
''Ergebnis in der Webansicht:'' | ''Ergebnis der Beispieldefinition in der Webansicht:'' | ||
[[Datei:Temp.png|ohne|mini]] | [[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> | |||
}} | |||
=== ''Beispieldefinition'' === | |||
<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]] | |||
<br> | |||
to be continued ... | |||
<br> | |||
== Weiterführende Links == | |||
Commandref zum DOIF-Attribut uiTable, siehe [https://fhem.de/commandref_DE.html#DOIF_uiTable Attribut uiTable]<br> | |||
Weitere Beispiele für Fortgeschrittene, siehe [https://wiki.fhem.de/wiki/DOIF/uiTable uiTable mit FHEM-Widgets und Styles] |
Version vom 8. Dezember 2019, 18:58 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. 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:
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:
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:
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