DOIF/uiTable Schnelleinstieg: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
[[Datei:UiTable state screen.png|300px|rechts|Webansicht bestehend aus mehreren DOIF/uiTable-Definitionen]]
[[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.
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>
Zeile 7: Zeile 7:
<br>
<br>
<br>
<br>
== Farbskalierte Temperaturanzeige mit Hilfe der Funktion '''temp'''==
 
== Farbskalierte Temperaturanzeige mit Hilfe der Funktion '''temp''' ==
Die Farbe der dargestellten Temperatur ist abhängig vom Temperaturwert:
Die Farbe der dargestellten Temperatur ist abhängig vom Temperaturwert:
{{Randnotiz|RNText=uiTable-Funktion '''temp'''
{{Randnotiz|RNText=uiTable-Funktion '''temp'''
Zeile 20: Zeile 21:
[[Datei:Farbskalierung temp.png|600px|ohne]]
[[Datei:Farbskalierung temp.png|600px|ohne]]


''Beispieldefinition:''
=== ''Beispieldefinition'' ===
<syntaxhighlight lang="perl">
<syntaxhighlight lang="perl">
defmod di_uiTable_temp DOIF ##
defmod di_uiTable_temp DOIF ##
Zeile 36: Zeile 37:
''Ergebnis in der Webansicht:''
''Ergebnis in der Webansicht:''
[[Datei:Temp.png|ohne|mini]]
[[Datei:Temp.png|ohne|mini]]
 
== Farbskalierte Feuchtigkeitsanzeige mit Hilfe der Funktion '''hum''' ==
== Farbskalierte Feuchtigkeitsanzeige mit Hilfe der Funktion '''hum'''==
Die Farbe der dargestellten Feuchtigkeit ist abhängig vom Feuchtigkeitswert:
Die Farbe der dargestellten Feuchtigkeit ist abhängig vom Feuchtigkeitswert:
{{Randnotiz|RNText=uiTable-Funktion '''hum'''
{{Randnotiz|RNText=uiTable-Funktion '''hum'''
Zeile 50: Zeile 50:
[[Datei:Farbskalierung hum.png|350px|ohne]]
[[Datei:Farbskalierung hum.png|350px|ohne]]


''Beispieldefinition:''
=== ''Beispieldefinition'' ===
<syntaxhighlight lang="perl">
<syntaxhighlight lang="perl">
defmod di_uiTable_hum DOIF ##
defmod di_uiTable_hum DOIF ##

Version vom 8. Dezember 2019, 17:29 Uhr

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.





Farbskalierte Temperaturanzeige mit Hilfe der Funktion temp

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

Info green.pnguiTable-Funktion temp
temp ($temp,$size,$icon)

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

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"\
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 in der Webansicht:

Temp.png

Farbskalierte Feuchtigkeitsanzeige mit Hilfe der Funktion hum

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

Info green.pnguiTable-Funktion hum
hum ($hum,$size,$icon)

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

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 in der Webansicht:

UiTable Funktion hum.png



to be continued ...