FHEMWiki - Benutzerbeiträge [de]

FTUI Widget Link

2018-06-27T18:25:43Z

Fhainz: /* CSS Klassen */

Das [[{{PAGENAME}}|Link Widget]] ist ein Widget für [[FHEM Tablet UI]] mit dem ein Text-Link oder Button erstellt werden kann um Befehle an FHEM zu senden.

<gallery>
File:FTUI_Widget_Link_01.png
File:FTUI_Widget_Link_02.png
File:FTUI_Widget_Link_03.png
File:FTUI_Widget_Link_04.png
File:FTUI_Widget_Link_05.png
File:FTUI_Widget_Link_06.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-color'''||Farbe für Text oder Icon (RGB-Angabe oder Farbname)||orange||data-color="#c0c0c0"
|-
|'''data-background-color'''||Hintergrundfarbe des Links oder Icons (RGB-Angabe oder Farbname)||||data-background-color="blue"
|-
|'''data-border-color'''||Farbe des Rahmens (RGB-Angabe oder Farbname)||||data-border-color="#ff0000"
|-
|'''data-icon-left'''||Name des linken Icons||||data-icon-left="mi-stop"
|-
|'''data-icon-right'''||Name des rechten Icons||||data-icon-right="mi-play_circle_outline"
|-
|'''data-width'''||Breite des Links oder Icons||auto||data-width="50px"
|-
|'''data-height'''||Höhe des Links oder Icons||auto||data-height="3em"
|-
|'''data-url'''||URL zu der verlinkt wird||||data-url="content-1.html"<br>data-url="<nowiki>https://fhem.de</nowiki>"
|-
|'''data-get'''||Name des Readings von dem die URL gelesen werden soll||||data-get="URL"
|-
|'''data-url-xhr'''||URL, mit der der Verweis im Hintergrund aufgerufen werden kann||||data-url-xhr="<nowiki>http://webaradio/control?next</nowiki>"
|-
|'''data-fhem-cmd'''||FHEM Befehl, der ausgeführt werden soll||||data-fhem-cmd="SET Lampe ON"
|-
|'''data-load'''||Lädt den Inhalt einer mit ''data-url'' angegebenen Webseite in ein ''<div>'' Element und ermöglicht so z.B. eine Navigation ähnlich zum [[FTUI Widget Pagetab|Pagetab-Widget]]||||data-load="#content-1"
|-
|'''data-text-align'''||Ausrichtung des Textes 'left','center','right'||||data-text-align="center"
|-
|'''data-active-pattern'''||[[Regulärer Ausdruck|RegEx]] mit der der ermittelt wird, ob der Link aktiv ist. Der Check wird gegen die aktuelle "document location" durchgeführt||||data-active-pattern=".*page1"
|-
|'''data-active-color'''||Farbe des Textes oder Icons wenn das "active-pattern" zutrifft||wie data-color||data-active-color="#123456"
|-
|'''data-active-background-color'''||Hintergrundfarbe des Textes oder Icons wenn das "active-pattern" zutrifft||same as data-background-color||data-active-background-color="yellow"
|-
|'''data-active-border-color'''||Farbe des Rahmens wenn das "active-pattern" zutrifft||wie data-border-color||data-active-border-color="grey"
|-
|'''data-fade-duration'''||Fade-Dauer beim Umschalten zur nächsten Seite (X ms/slow/fast)||slow||data-fade-duration="100ms"
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|round}}{{FTUI Klasse|square}}{{FTUI Klasse|blank}}{{FTUI Klasse|nocache}}{{FTUI Klasse|prefetch}}
|}

==Beispiele==
===Link ohne Icon===
<syntaxhighlight lang="html">
<div data-type="link"
data-color="blue"
data-url="#link.html">LINK</div>
</syntaxhighlight>
[[File:FTUI_Widget_Link_04.png]]

===Button-ähnlicher Link===
<syntaxhighlight lang="html">
<div data-type="link"
class="round"
data-color="grey"
data-border-color="grey"
data-icon="fa-server">Details</div>
</syntaxhighlight>
[[File:FTUI_Widget_Link_01.png]]

===Großer Button-ähnlicher Link zum Absenden eines FHEM-Befehls===
<syntaxhighlight lang="html">
<div data-type="link"
class="round"
data-width="130" data-height="50"
data-color="white"
data-background-color="red"
data-icon="fa-lock"
data-fhem-cmd="set AllDoors locked">Lock Doors</div>
</syntaxhighlight>
[[File:FTUI_Widget_Link_02.png]]

===Button-ähnlicher Link zum Aufrufen einer URL===
<syntaxhighlight lang="html">
<div data-type="link"
data-width="150"
data-icon-left="fa-video-camera"
data-color="green"
data-url="#cam.html">View cam</div>
</syntaxhighlight>
[[File:FTUI_Widget_Link_03.png]]

===Rechteckiger Button===
<syntaxhighlight lang="html">
<div data-type="link"
data-width="130" data-height="50"
data-color="white"
data-background-color="green"
data-icon="fa-refresh"
data-fhem-cmd="update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt">Update FTUI</div>
</syntaxhighlight>
[[File:FTUI_Widget_Link_05.png]]

===Button mit mehrzeiligem Text===
<syntaxhighlight lang="html">
<div data-type="link" class="round medium"
data-width="230"
data-color="white"
data-background-color="#717453"
data-icon-left="fa-coffee"
data-icon-right="fa-angle-right"
data-text-align="left"
data-url="#break.html">This Text is medium<br/>and contains line<br/>breaks</div>
</syntaxhighlight>
[[File:FTUI_Widget_Link_06.png]]

===Navigationsmenü mit Link-Buttons===
Dafür werden mehrere HTML-Seiten benötigt. Zum einen eine "Haupt"-Seite, auf der die Links dargestellt werden. Zum anderen die jeweiligen Unterseiten, die auf der Haupt-Seite angezeigt werden sollen. Die Unterseite, die beim ersten Aufruf der Hauptseite geladen werden soll, kann mit ''class="default"'' markiert werden (im Beispiel ist das ''schlafzimmer.html'').

Die Hauptseite könnte wie folgt aussehen:
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%"
!style="text-align: left;"|index.html
|-
| class="mw-collapsible-content" |
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
[...]
</head>

<body>
<div id="panel">
<div class="page" id="schlafzimmer"></div>
<div class="page" id="badezimmer"></div>
</div>

<div id="menu">
<div class="default"
data-type="link"
data-load="#schlafzimmer"
data-url="#schlafzimmer.html"
data-active-color="#419aff"
data-active-pattern=".*#schlafzimmer.html">Schlafzimmer</div>
<div data-type="link"
data-load="#badezimmer"
data-url="#badezimmer.html"
data-active-color="#419aff"
data-active-pattern=".*#badezimmer.html">Badezimmer</div>
</div>
</body>
</html>
</syntaxhighlight>
|}
In den jeweiligen Unterseiten finden sich dann die Inhalte und Widgets, die für den jeweiligen Raum angezeigt werden sollen.
Hier ein Beispiel für eine Unterseite. Wichtig ist die richtige Benennung der ersten ''<nowiki><div></nowiki>''-Elements (''id="..."'') analog zum Attribut ''data-load'' der Hauptseite ohne der Raute (#):
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%"
!style="text-align: left;"|schlafzimmer.html
|-
| class="mw-collapsible-content" |
<syntaxhighlight lang="html">
<html>
<body>
<div class="page" id="schlafzimmer">
<div id="panel">
[...]
</div>
</div>
</body>
</html>
</syntaxhighlight>
|}

[[File:FTUI_Widget_Link_07.png|thumb|none|left|200px|Beispiel für eine Navigation mit dem Link-Widget]]

==Weblinks==
*[https://knowthelist.github.io/fhem/tablet/demo_link.html Weitere Beispiele]

[[Kategorie:FHEM Tablet UI|Link]]

FHEM Tablet UI

2016-02-27T11:37:05Z

Fhainz: /* Widgets -- Konfiguration */ weekdaytimer-widget eingefügt

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Dieses User Interface für Tablets benötigt <u>keine</u> zusätzliche Frameworks, wie PHP, MySQL oder SmartVisu.

Voraussetzungen ist nur ein Standard-Fhem mit HTTPSRV Modul und ein beliebiger Standard-Browser mit Javascript auf einem beliebigen Betriebssystem oder Webviewcontrol.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<code><meta name='gridster_disable' content='1'></code>

Toast messages deaktivieren
:<code><meta name='toast' content='1'></code>

Größe des Basis-Rasters (data-sizey=1/data-sizex=1)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Abstände der Gridsterelemente verkleinern:
:<code><meta name="widget_margin" content="3"></code>

Folgender Link sollte auskommentiert werden, solange es diese Datei noch nicht gibt, da diese immer wieder zu Problemen beim Laden der Seite führen kann:
:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

container, left, right, cell, narrow, darker, big, bigger, small

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*right-align : align text right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: ein state als Text anzeigen (Farbe einstellbar)
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

<div id="label">'''LABEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|
|-
!align="right" |data-fix
|keeping a specified number of decimals.
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit
|
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.

[[#Beispiel_label|Link zu einem Beispiel]]

<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-

!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-value
|wenn true wird beim sliden der Wert angezeigt
|
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

<div id="symbol">'''SYMBOL'''</div>

dual state notation

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get.
|'open'
|-
!align="right" |data-get-off
|value for OFF status to get.
|'closed'
|-
!align="right" |data-icon
|Name des font-awesome-Symbols
|'ftui-window'
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-background-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-background-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
|}

multi state notation

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-states
|array of states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|array of colors related to the data-states array
|''
|-
!align="right" |data-background-colors
|array of background-colors related to the data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]

FHEM auf Mac OS X

2015-04-18T09:03:03Z

Fhainz: Benötigte / Optionale Pakete

== OS X vorbereiten ==

=== Perl installieren ===
Anscheinend ist die [[Perl]]-Installation von OS X nicht komplett oder fehlerhaft wodurch nach der Installation zB die Icon-List nicht komplett geladen wurde. Deshalb wird Perl zur Sicherheit nochmals neu installiert. [http://learn.perl.org/installing/osx.html]

<pre style="width:50%;">curl -L http://xrl.us/installperlosx | bash</pre>

{{Randnotiz|RNText=Optionale Pakete
* JSON
** [[Hue]]
** [[Volkszaehler]]
** [[Pushbullet]]
** [[withings]]
** [[Ubiquit mFi/mPower]]
** etc.
* Net::Telnet
**[[Ubiquit mFi/mPower]]
* Net::WebSocket::Server
** [[Fronthem]]
* XML::Simple
** [[Enigma2 Receiver (Dreambox, VUplus etc.) steuern|ENIGMA2 Modul]]
}}
=== Benötigte Pakete installieren ===

In der Konsole folgende Befehle eingeben:
<pre style="width:50%;">
sudo -i
cpan install Bundle::CPAN
cpan install Device::SerialPort
cpan install IO::Socket::SSL
</pre>

=== Optionale Pakete installieren ===
In der Konsole folgende Befehle eingeben:
<pre style="width:50%;">
sudo -i
cpan install JSON
cpan install Net::Telnet
cpan install Net::WebSocket::Server
cpan install XML::Simple
</pre>

==FHEM installieren==

=== FHEM herunterladen ===
Anschließend wird FHEM von der [http://fhem.de/fhem.html#Download Website] heruntergeladen und ins gewünschte Verzeichnis entpackt. <br />
In dieser Anleitung wird FHEM nach ''/Users/Name/fhem'' entpackt

=== Makefile bearbeiten ===
In der Datei ''/Users/Name/fhem/Makefile''

<pre style="width:50%;">BINDIR=/usr/local/bin</pre>

den Pfad

<pre style="width:50%;">BINDIR=/Users/Name/fhem</pre>

entsprechend ändern.

=== FHEM installieren ===
In der Konsole folgende Befehle eingeben:

<pre style="width:50%;">
cd /Users/Name/fhem
sudo make install
</pre>

Nun sollte FHEM korrekt installiert und unter der URL http://IP-Adresse:8083 erreichbar sein.

== Infos ==

=== FHEM starten ===
In der Konsole folgenden Befehl eingeben:
<pre style="width:50%;">
cd /Users/Name/fhem/ && perl fhem.pl fhem.cfg
</pre>

=== FHEM stoppen ===
In der Konsole folgende Befehle eingeben:
<pre style="width:50%;">
telnet IP-Adresse 7072
shutdown
</pre>

[[Kategorie:HOWTOS]]
[[Kategorie:OSX]]

Ubiquit mFi/mPower

2015-04-06T07:26:28Z

Fhainz: /* Features */

== Ubiquiti mFi/mPower==

{{Baustelle}}
'''Ubiquiti mFi©/mPower© IP Steckdosen'''

Über WiFi/LAN schaltbare Steckdosenleiste mit Verbrauchsmessung. (LAN nur mit Pro Version)

== Features ==
230V IP-Steckdosenleiste mit unterschiedlicher Portanzahl. Jede Steckdose kann extra per Befehl geschaltet werden. Die angeschlossene Last wird gemessen und stellt folgende Werte pro Port zur Verfügung:
* Stromaufnahme
* Stromspannung
* Wirkleistungsfaktor
* aktuelle Energieaufnahme
* verbrauchte Energie - aktuelles Monat (ab Firmware 2.1.x)
* verbrauchte Energie - Vormonat (ab Firmware 2.1.x)

Protokolle
* http, https, HTTPS, telnet, ssh, ntp

== Allgemein ==
Die Leisten lassen sich komplett per Web Browser flashen,bedienen und konfigurieren. <br />
Die Standard Login-Zugangsdaten zur Ubi-WEB-UI lauten: User:ubnt / Passwort: ubnt

Grundsätzlich waren die Geräte in Verbindung mit der Ubiquiti Kontroller Software vorgesehen, können nun aber auch problemlos "standalone" verwendet werden.

Bei Lieferungen im April 2015 war auf allen Leisten die Firmware Version 2.0.8 installiert. Diese Firmware bietet nur rudimentäre Funktionen und auch die Energiemessung funktioniert nur in Verbindung mit der 64-Bit Java-Kontrollersoftware.
'''Darum ist ein Firmwareupdate auf mind. 2.1.8 (Stand 2/2015) notwendig.'''

== Bekannte Probleme ==

=== Verhalten nach Stromausfall===
Nach einem Stromausfall (bzw. direkt nach dem Einstecken in eine Steckdose) werden die Ports nach dem Starten der Firmware immer eingeschaltet.

=== Auslieferungsfirmware Version 2.0.8 ===
* In dieser Version funktioniert die Energiemessung im Standalone-Modus nicht.
* Keine Möglichkeit die Zeitzone sowie die NTP Zeit-Synchronistaion über die WEB-UI einzustellen.

''' Lösung: Firmware auf mind. 2.1.8 upgraden.'''

== Firmware Versionen ==
Folgende Versionen wurden von Ubiquiti zum Download freigegeben.

* 2.0.7
* 2.0.8 (Download nicht auffindbar - Standard-Auslieferungsversion?
* 2.0.12
* 2.0.13
* 2.0.14
* 2.0.15
* 2.0.23
* 2.0.24
* 2.1.1
* 2.1.2
* 2.1.3
* 2.1.4
* 2.1.5
* 2.1.8 - 2015-02-26

== Modelle EU Raum ==
* 1 Port / P1E / WiFi
* 3 Port / P3E / WiFi
* 6 Port / P6E / WiFi & LAN (Pro Version)

=== Spezifikationen mPower Pro (EU)===
[[Datei:Ubi-mPower6eu.jpg|200px|thumb|right|mPower 6 Port EU]]
* Größe: 250.37 x 116.7 x 49 mm
* Gewicht: 754,4g
* Spannung: 220-250VAC, 50Hz, 16A pro Ausgang, 16A Gesamt
* Ausgänge: 6
* Speicher: 16 MB RAM, 8 MB Flash
* LAN: 1 x 10/100 Ethernet
* WiFi Standard: 802.11b/g/n
* LEDs: 1 LED Status
* Betriebstemperatur: 0 bis 40°C
* Luftfeuchte: 10 bis 90% Nichtkondensierend

=== Spezifikationen mPower (EU)===
[[Datei:Ubi-mPower3eu.jpg|200px|thumb|right|mPower 3 Port EU]]
* Größe: 240 x 82.8 x 41.5 mm
* Gewicht: 545g
* Spannung: 220-250VAC, 50Hz, 16A pro Ausgang, 16A Gesamt
* Ausgänge: 3
* Speicher: 16 MB RAM, 8 MB Flash
* WiFi Standard: 802.11b/g/n
* LEDs: 1 LED Status
* Betriebstemperatur: -10 bis 45°C
* Luftfeuchte: 95% max.

=== Spezifikationen mPower mini (EU)===
[[Datei:Ubi-mPower1eu.jpg|100px|thumb|right|mPower 1 Port EU]]
* Größe: 110.8 x 71 x 67.7 mm
* Gewicht: 170g
* Spannung: 220-250VAC, 50Hz, 10A
* Ausgänge: 1
* Speicher: 16 MB RAM, 8 MB Flash
* WiFi Standard: 802.11b/g/n
* LEDs: 1 LED Status
* Betriebstemperatur: 0 bis 40°C
* Luftfeuchte: 10 bis 90% Nichtkondensierend

== Hinweis zum Betrieb mit FHEM ==
Es befindet sich gerade ein neues Modul in Entwicklung. Die Infos dazu sind in dieser [http://forum.fhem.de/index.php/topic,35722.0.html Diskussion im Fhem Forum]zu finden.

== Ersteinrichtung ohne Controller ==

=== Ersteinrichtung der Leiste ohne Controller / Iphone ===

Smartphone / z.B. mit dem Iphone unter IOS7 <br />
Ubiquiti Auslieferungs-Firmware Version: 2.0.8

# Reset der Leiste mit "Factory reset" - Drücken der reset Taste auf der Leiste für mindestend 10 Sekunden. <br />Die Leiste startet neu hoch und erstellt einen Accesspoint mit einer eigenen SSID mit dem Namen mfi-xxxxx.
# Verbinden mit dem neuen WLAN Netzwerk - nach ein paar Sekunden erscheint die UBI-Web Oberfläche automtatisch. (Captive Portal). <br /> Einfach warten, bis das Portal erscheint, das kann schon mal 10 bis 20 Sekunden dauern.
# Sobald das Portal sichtbar ist, das eigene WLAN auswählen und die Zugangsdaten eingeben.
# Danach den mFi Account konfigurieren. Dabei ist der Eintrag Personal auszuwählen und alles andere frei zu lassen.
# Apply dücken, die mPower Leiste startet neu und nach ca. 1 Minute sollte sie sich mit dem WiFi verbunden haben und per DHCP eine IP-Adresse erhalten haben.
# Um die IP-Adresse herauszufinden, einfach das [http://www.ubnt.com/downloads/discovery/ubnt-discovery-v2.3.zip IP-Address Ubiquiti Discovery Tool v2.3] runterladen und entpacken. <br />Dann die .bat oder die .jar Datei doppelklicken und das Tool sucht im lokalen Netz nach UBI-Produkten.
# Nun die Firmware Version 2.1.8 von http://www.ubnt.com/downloads/mfi/2.1.8/firmware/M2M/firmware.bin downloaden. <br /> Ab der 2.1x Version gibt es für alle Leisten (1-Port, 3-Port und 6 Port) die selbe firmware.bin
# Jetzt wird die Leiste mit einem Browser geflasht (am Besten mit Firefox) indem man auf die IP der Leiste geht und direkt zur upgrade.cgi surft. <br /> '''<nowiki> http://IP-UBILeiste/upgrade.cgi</nowiki>''' - Username=ubnt / Passwort=ubnt <br />Wenn das Upgrade fertig ist bleibt der Updatebalken bei 100% stehen.
# '''Nach dem Updaten die Ports der Leiste über die WEB Oberfläche aus- und einschalten.''' <br />Ab sofort zählt sie dann auch die verbrauchte Energie wie gewünscht ohne Ubi-Kontroller!
# Weiter geht es mit der Einrichtung der [[#Einstellung_der_Timezone_und_NTP_Timesync|Zeitzone/Timesync]]

----
Screenshots Iphone:
<gallery>
File:Ubi-discoverytool.JPG|Ubi Discovery Toolbox
File:Iphone-captive1.jpg|Captive Portal - select WiFi Network / mFi Account
File:Iphone-captive2.jpg|Captive Portal - select mFi Account
File:upgrade-2-0-8.jpg|UBI Web UI - upgrade.cgi
File:upgrade-2-0-8-final.jpg|UBI Web UI - upgrade.cgi done

</gallery>

=== Ersteinrichtung der Leiste ohne Controller / Windows7 ===

# Reset der Leiste mit "Factory reset" - Drücken der reset Taste auf der Leiste für mindestend 10 Sekunden. <br />Die Leiste startet neu hoch und erstellt einen Accesspoint mit einer eigenen SSID mit dem Namen mfi-xxxxx.
# Verbinden des PC mit dem neuen WLAN Netzwerk.
# Warten bis das Fenster zum neuen Netzwerk erscheint - dann Heimnetzwerk wählen.
# Dann mit dem Firefox auf <nowiki> http://192.168.2.20 </nowiki> gehen und eine Ausnahme für das Zertifikat hinzufügen.
# Es erschein die Konfigurationsseite. Dort Network scannen und die Security Daten des WLAN eingeben. '''Beim mFi Account ist NICHTS auszuwählen - alles leer lassen! '''
# Apply dücken. Die mPower Leiste startet neu und nach ca. 1 Minute sollte sie sich mit dem WiFi verbunden haben und per DHCP eine IP-Adresse erhalten haben
# Um die IP-Adresse herauszufinden, einfach das [http://www.ubnt.com/downloads/discovery/ubnt-discovery-v2.3.zip IP-Address Ubiquiti Discovery Tool v2.3] runterladen und entpacken. <br />Dann die .bat oder die .jar Datei doppelklicken und das Tool sucht im lokalen Netz nach UBI-Produkten.
# Nun die Firmware Version 2.1.8 von http://www.ubnt.com/downloads/mfi/2.1.8/firmware/M2M/firmware.bin downloaden. <br /> Ab der 2.1x Version gibt es für alle Leisten (1-Port, 3-Port und 6 Port) die selbe firmware.bin.
# Vor dem Flashen mit dem Browser normal auf die Leiste surfen. <nowiki> http://IP-Leiste</nowiki> <br /> Wechseln zum Reiter Configuration. Wenn nochmal die Konfigurationsseite kommen sollte, einfach den Kontroller neu einstellen - alles leer lassen.
# Jetzt wird die Leiste mit einem Browser geflasht (am Besten mit Firefox) indem man auf die IP der Leiste geht und direkt zur upgrade.cgi surft. <br /> '''<nowiki> http://IP-UBILeiste/upgrade.cgi</nowiki>''' - Username=ubnt / Passwort=ubnt <br />Wenn das Upgrade fertig ist bleibt der Updatebalken bei 100% stehen.
# '''Nach dem Updaten die Ports der Leiste über die WEB Oberfläche aus- und einschalten.''' <br />Ab sofort zählt sie dann auch die verbrauchte Energie wie gewünscht ohne Ubi-Kontroller!
# Weiter geht es mit der Einrichtung der [[#Einstellung_der_Timezone_und_NTP_Timesync|Zeitzone/Timesync]]

----
Screenshots:
<gallery>
File:Pc-wlan1.jpg|WiFi verbinden
File:Pc-wlan2-netzwerk.JPG|Netztwerktyp
File:Pc-wlan3-firefox.JPG|Firefox Zertifikat 1
File:Pc-wlan4-firefox.JPG|Firefox Zertifikat 2
File:Pc-wlan5-firefox.JPG|UBI Config UI
File:Pc-wlan7-firefox.JPG|UBI Config UI
File:Iphone-captive2.jpg|UBI FW 2.0.8 UI

</gallery>

=== Einstellung der Timezone und NTP Timesync ===
Die UBI-Web-UI der Firmware 2.1.8 zeigt 2 neue Reiter System und Machines.
Im Reiter System wird die Zeitzone eingestellt. <br /> GMT+1 Central European Time (Daylight Savings) und aktivieren Enable NTP Client mit dem Server pool-ntp.org. <br />
Dann den Button "Change" klicken und "Configuration contains changes. Apply these changes? APPLY"

Ab sofort hat die Leiste immer die richtige Zeit.

<gallery>

File:ubi-fw-2.1.8-ui.jpg|Web UI 2.1.8
File:ubi-zeitzone.jpg|Zeitzoneneinstellung

</gallery>

== Links ==
* Website von Ubiquiti[http://www.ubnt.com/]
* PDF Datenblatt mFi/mPower [http://dl.ubnt.com/datasheets/mfi/mFi_DS.pdf]
* Forum des Herstellers [http://community.ubnt.com/t5/mFi/bd-p/mFi]
* mFi/mPower Firmware release 2.1.8 (2/2015) [http://community.ubnt.com/t5/mFi/mFi-release-2-1-8/td-p/1188368/jump-to/first-unread-message]
* Upgrade Prozedur aus dem Ubiquiti Forum [https://community.ubnt.com/t5/mFi-Frequently-Asked-Questions/mFi-Can-I-upgrade-mFi-device-firmware-manually/ta-p/485311]
* Varia Store Deutschland (Bezugsquelle) [http://varia-store.com/Hardware/UBIQUITI-Networks:::637_734.html]
* Forenbeitrag Fhem: {{Link2Forum|Topic=35722}}

[[Kategorie:Other Components]]
[[Kategorie:IP Components]]
[[Kategorie:Schalter (Empfänger)]]
[[Kategorie:Energieverbrauchsmessung]]

Fronthem Installation

2015-03-22T09:05:26Z

Fhainz: /* Installation Fronthem */

Einen Überblick über Fronthem findet man auf der Seite zu [[Fronthem]]

== Allgemein ==
=== Fhem ===
Ein lauffähiges Fhem mit einem aktuellen Update sollte installiert sein.

=== Webserver ===
Für smartVISU muss ein Webserver (z.B. lighttpd oder Apache oder nginx) installiert sein.

==== lighttpd ====

sudo apt-get update
sudo apt-get install lighttpd
sudo apt-get install php5-common php5-cgi php5
cd /var/www
sudo lighty-enable-mod fastcgi-php
sudo service lighttpd force-reload
sudo chown www-data:www-data /var/www
sudo chmod 775 /var/www
sudo usermod -a -G www-data pi
sudo usermod -a -G www-data bananapi

==== nginx ====
Folgende Pakete werden benötigt:
$ apt-get install nginx php5-fpm

Die Konfiguration für nginx kann man unter
sudo nano /etc/nginx/sites-enabled/default
vornehmen.

Folgende Konfiguration sollte direkt funktionieren:
server {
listen 80;
root /var/www;
index index.html index.php;
server_name localhost;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}

== Installation smartVISU ==
Die Installation stammt aus Jörg Herrmanns git-Repo: https://github.com/herrmannj/smartvisu-cleaninstall

Folgende Pakete werden benötigt:
$ apt-get install git

Hierbei handelt es sich um das original smartVISU inkl. diverser Anpassungen (fhem-Treiber, ...).

'''Download:'''
$ mkdir ~/install
$ cd ~/install
$ git clone https://github.com/herrmannj/smartvisu-cleaninstall.git

'''Installation:'''
$ sudo cp -rp smartvisu-cleaninstall /var/www/smartvisu
$ cd /var/www
$ sudo chown -R www-data:www-data smartvisu

'''Installation überprüfen:'''

Beim Aufruf der Seite http://<IP-Adresse>/smartvisu sollte folgende Seite angezeigt werden: {{Randnotiz|RNTyp=y|RNText=Wenn ihr hier einen Fehler erhaltet und euch nicht die SmartVisu Seite angezeigt wird müsst ihr die Datei "config.ini.default" zu "config.ini" umbenennen, am besten erstellt ihr eine neue Kopie wie folgt:
<code>$ sudo cp /var/www/smartvisu/config.ini.default /var/www/smartvisu/config.ini</code>
Ebenso bitte ggf. in der php.ini (error_reporting) die Ausgabe von Warnings abschalten, wenn so was kommt wie "Notice: Undefined index..."
}}

[[Datei:Installation_SmartVISU.png]]

== Installation Fronthem ==
Folgende Pakete werden benötigt:
curl -L https://cpanmin.us | perl - --sudo App::cpanminus
sudo cpanm Net::WebSocket::Server
sudo cpanm JSON

Mit folgendem Befehl kann man Fronthem installieren / updaten:
update force https://raw.githubusercontent.com/herrmannj/fronthem/master/controls_fronthem.txt

Konfiguration von Fronthem in Fhem (Eingabe in der Fhem Web Kommandozeile):
define <Name Webservice> fronthem
define <Name Endgerät> fronthemDevice <IP Endgerät>

Beispiel:
define meinfronthem fronthem
define meiniphone fronthemDevice 192.168.178.25

"Save" nicht vergessen!
Näheres dazu findet man auch unter http://www.fhemwiki.de/wiki/Fronthem#Basic_Syntax

== Eigenes smartVISU Projekt anlegen ==
* im Ordner "''/var/www/smartVISU/pages''" einen neuen Ordner "''MeinHaus"'' anlegen.
* aus dem Ordner "''../pages/_template''" alles in den neuen Ordner ("''/var/www/smartVISU/pages/MeinHaus"'') kopieren.
* "''rooms_menu.html''" an eigene Gegebenheiten anpassen hierzu dienen die "_template-Dateien" als Orientierung.
* alle rooms anlegen durch Kopien des Beispielraumes (''room_sleeping.html'') und passende icons und Überschriften verteilen. ([http://www.smartvisu.de/docu/2.7/index.php?page=design/design_icons SmartVisu Icons])
* SmartVISU nutzt [http://twig.sensiolabs.org/ Twig] als Template engine und die Seiten bestehen aus Blöcken und Widgets, die immer in doppelten geschweiften Klammern stehen <nowiki>{{ ... }}</nowiki>
* Widget Syntax auf [http://www.smartvisu.de/docu/2.7/index.php SmartVISU Doku] nachschlagen und kopieren.
* innerhalb eines Raums zwischen {% block content %} und {% endblock %} als Beispiel folgenden Abschnitt einfügen:

<pre><nowiki>
<h1><img class="icon" src='{{ icon0 }}scene_livingroom.png'/>Wohnzimmer</h1>
<div class="preblock">
</div>
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false" >
<h3>Licht</h3>
<table width="90%">
<tr><td align="left" width="100px"> {{ basic.switch('Leselampe', 'Leselampe.sw', icon1~'light_floor_lamp.png', icon0~'light_floor_lamp.png') }}</td>
<td>Leselampe</td>
</tr>
</table>
</div>
</div>
</div>
</nowiki></pre>

* Datei speichern und checken, dass die Rechte mindestens auf "755" stehen, ansonsten mit "sudo chmod 755" korrigieren.
* smartVISU aufrufen, Zahnrad = configmenü, eigenes Haus auswählen (Ordnername!) und als Treiber DOMOTIGA (oder auch FHEM) mit Port 2121 mit der IP des FHEM-Servers
* speichern der Config nicht vergessen (Save ganz unten!)
* jetzt ist es wichtig, dass ihr einmal eure Seiten in Smartvisu aufruft damit im Hintergrund die GADs erstellt werden.
* In Fhem eure fronthemDevice Detailansicht öffnen
* Nun seht ihr eure GADs, aus der gadliste ein gad auswählen (hier: "Leselampe.sw" wie im obigen Code-Beispiel definiert.) und die Parameter vergeben:
<pre>
device: <fhem-Name-des-fhem-devices> (in diesem Fall die Leselampe.sw)
reading: state
converter: OnOff
cmd set: state
write: ja (haken setzen)
read: ja (haken setzen)
</pre>
: "state" immer klein schreiben und speichern nicht vergessen!
* Die Settings für das Device gelten für alle Endgeräte, aber die read/write Rechte müssen für jedes Endgerät separat gesetzt werden.

== Verbindung smartVISU mit Fhem ==
=== Konfiguration smartVISU-Treiber ===
==== Interface ====
TODO

==== I/O-Connection ====
Unter smartVISU in die Konfigurationsoberfläche wechseln (http://<IP-Adresse>/smartvisu/index.php?page=config)

Driver: ''Fhem'' (wird in Github von hermmanj bereitgestellt, falls smartvisu nicht von dort bezogen wird)

Adresse: ''<IP-Adresse Fhem-Server>''

Port: ''2121''

== Bekannte Probleme ==
TODO

Fronthem

2015-02-08T11:02:48Z

Fhainz: /* Löschungs Aufruf geändert */

{{Infobox Modul
|ModPurpose=Anbindung von externen Frontends an FHEM (befindet sich in der Alpha-Phase)
|ModType=x


|ModForumArea=Sonstige Systeme
|ModTechName=01_fronthem.pm
|ModOwner=[http://forum.fhem.de/index.php?action=profile;u=769 Jörg alias herrmannj]
}}
Fronthem ist ein Projekt von herrmannj und wurde im fhem-Forum erstmalig angekündigt: http://forum.fhem.de/index.php/topic,27291.0.html

Fronthem verfolgt die Idee, ein externes Web-Frontend (z. B. smartVISU http://smartvisu.de) an fhem anzukoppeln und den Datenverkehr sowie die Zusammenarbeit von Befehlen und Parametern zwischen FHEM und dem Web-Frontend zu übernehmen.

Eine Installation für die Verwendung von smartVISU mit Fronthem findet man hier [[Installation Fronthem|Installation Fronthem]].

Dazu besteht fronthem aus vier Bausteinen:

==Bausteine==
=== websocket ===
Der Websocket ist eine generische http-Schnittstelle, die von einem externen Frontend aus angesprochen werden kann.

Der Websocket wird durch ein fhem-Modul 01_fronthem.pm realisiert, das im Ordner .../fhem/FHEM/ abgelegt wird.

Der Websocket ist auf Port 2121 fest eingestellt, wird implizit durch die anderen Bausteine verwendet und benötigt im Prinzip keine weitere Beachtung, außer man möchte das Webinterface auf einem anderen Device neben FHEM laufen lassen.

=== device connector ===
Die Device-Connectoren dienen dazu, Endgeräte des Benutzers (PCs, Tablets, Smartphones usw.) als Clients zuzulassen und deren Berechtigungen (read, write) auf der Ebene einzelner Objekte zu steuern. Damit können z. B. die lieben Kinder zwar das Licht und die eigene Heizung steuern, aber nicht die Heizung umprogrammieren oder den Alarm ausschalten. Auch ein PIN-Schutz ist vorgesehen, im Moment aber noch nicht umgesetzt.

Die Device-Connectoren werden durch das fhem-Modul 31_fronthemDevice.pm realisiert, welches im Ordner .../fhem/FHEM/ abgelegt wird.

An den einzelnen Device-Connectoren werden die durch den websocket vom externen Frontend mitgeteilten Objekte aufgelistet und können dort einerseits mit fhem devices und andererseits in den Berechtigungen des jeweiligen Endgerätes konfiguriert werden.

Umgekehrt bedeutet dies, dass man die Kombination der Frontend-items mit den fhem-Devices über die Converter nur einmal pro item machen muss, die Berechtigungen der verwendeten Endgeräte muss man aber jeweils pro Endgerät einzeln setzen.

=== readings converter ===
Die Readings von fhem müssen in die Form der möglichen Werte des Frontends umgewandelt werden. Im umgekehrten Fall müssen Befehle des Frontends in fhem kompatible Befehle umgesetzt werden.
Diese Aufgabe übernehmen die Readings Converter. Sie werden durch die Datei fhconverter.pm realisiert, die im Ordner .../fhem/FHEM/ abgelegt wird.
Bisher gibt es folgende Converter:
* [[#Direct]] für Übertragung ohne Konvertierung
* [[#NumDirect]] für Übertragung von Zahlenwerten in einem begrenzten Werteraum zwischen Min und Max
* [[#NumDisplay]] für Zahlenwerte aus fhem Readings, nur lesend
* [[#WordDisplay]] ist in Planung, für Übertragung von selbst definierbaren Wörtern/Sätze
* [[#OnOff]] für Schalter, Übersetzung von On in 1 und Off in 0
* [[#RGBCombined]] für Übertragung von RGB-Werten so das sie FHEM akzeptiert
Näheres zu denn Convertern unter [[#Converter]]

Weitere Readings Converter werden noch folgen.

=== fronthemEditor ===
Der Javascript Editor ist eine fhem WebIF Erweiterung, um die Bindung der fremden Frontend-Objekte an FHEM Devices/Readings vorzunehmen und die dazu notwendigen Konvertierungen zu wählen.
Er wird durch die Datei fronthemEditor.js repräsentiert, die in den Ordner .../fhem/www/frontend/pgm2/ kopiert wird.

Der Editor erscheint in fhem als komplette gad-Liste in den Details von jedem definierten fronthemDevice. Das mag auf den ersten Blick irreführend sein, weil die Definition der gad/items/plots fhem-global geschieht, war aber wohl die beste mögliche Umsetzung zur Zeit.

Man muss also durch den Editor an einem beliebigen fronthemDevice die Verknüpfung zwischen fhem-devices und smartVISU items herstellen, dann gilt diese für alle fhem Devices. Nur die Berechtigungen der einzelnen fhem Devices werden unterschiedlich gepflegt. (im Moment aber inaktiviert!)

==Basic Syntax==
===Websocket===
:<code>define <name> fronthem</code>

===Device Connector===
Man muss jedes Device, mit dem man zugreifen will definieren.

Dadurch kann genau festgelegt werden, welches Device Rechte für eine jeweilige Schaltfunktion hat.
====IP-Identify====
Identifizierung per IP-Adresse. Dies ist nur im internen Netzwerk sehr sinnvoll.
Ein Device wird definiert mit:
:<code>define <device> fronthemDevice <ip></code>
====Zertificate-Identify====
Das Device wird über ein Zertifikat identifiziert.
Zuerst wird ein Zertifikat generiert, welches dann auf dem Device installiert werden muss.

Diese Methode der Identifizierung verspricht höhere Sicherheit, wie auch denn Vorteil, das man sich nicht einloggen muss.

Diese Funktion ist noch in Entwicklung.

==Converter==
Die Converter sind alle kompatibel mit dem oben erwähnten Frontend SmartVisu und werden auf Basis dieses Frontends erklärt.

Wenn jemand ein anderes Frontend verwenden will, muss er möglicherweise die Converter anpassen.
===Direct===
Die Werte werden ohne Konvertierung weitergegeben.

Gibt den Wert des von <reading> ohne weitere Wandlung an das Frontend weiter. In umgekehrter Richtung wird der vom Frontend geliefert Wert ohne Wandlung im hinterlegten <set> eingesetzt.

Beispiel:
Anzeige eines An- oder Abwesenheitszustandes im Frontend (Textanzeige, Icon, Button)

===NumDirect===
NumDirect arbeitet bidirektional. Die Werte werden genau wie bei Direct ohne Umwandlung weitergegeben.

Der feine Unterschied zu Direct ist jedoch, das nur Zahlenwerte übergeben werden können.

Desweiteren kann man einen minimalen und maximalen Wert mitangeben. Dies hat denn Sinn, das man keine Werte einstellen kann, die überhaupt nicht möglich wären.

In der SmartVisu kann man z.B. -100°C einstellen, das wäre in FHEM jedoch gar nicht möglich.

===NumDelayed===
NumDelayed ist noch in Arbeit.

Ein bidirektionaler numerischer Converter mit einstellbarer Verzögerung.

Bietet bei der Ansteuerung mechanischer Aktoren (Markise, Jalousie) Vorteile gegenüber NumDirect. Als Beispiel sei die Steuerung einer Jalousie über einen Slider genannt. Da Slider ihre Werte kontinuierlich an FHEM übermitteln, würde bei der Verwendung anderer Converter dem entsprechenden Aktor (z.B. HM-BP), während der Benutzer den Slider bedient, mehrfach der vermeindliche Sollwert übermittelt werden. Gleichzeitig beginnt der Aktor seine Fahrt und übermittelt dem Slider seine aktuelle ist Position. Das führt zu einem springen des Sliders und einer "unschönen" Bedienung.

NumDelayed nimmt daher die Signale des Sliders entgegen, wartet jedoch mit der Weitergabe solange, bis sich der Slider (xxx ms, konfigurierbar) nicht mehr bewegt. In Gegenrichtung wird ebenso verfahren, erst wenn der Aktor seine Endposition erreicht, wird der Slider im Frontend aktualisiert. In diesem Beispiel würde das bedeuten das der Slider im Normalfall ohnehin so steht (Soll) wie vom Aktor gemeldet (Ist). Natürlich könnte der Benutzer oder ein Hindernis die Fahrt auch unterbrochen haben, dann würde der Slider auf die gemeldete Position aktualisiert.

===NumDisplay===
NumDisplay arbeitet nur in eine Richting, FHEM zu Frontend. Die Werte werden ohne Umwandlung weitergegeben.

Es ist dazu gedacht Zahlenwerte zu übergeben, ohne etwas zu verändern.

z.B. für Temperaturwerte

===WordDisplay===
WordDisplay ist derzeit in Planung, es wird noch über die Umsetzung diskutiert.

WordDisplay soll nur in eine Richtung arbeiten, FHEM zu Frontend. Es ist dazu gedacht Wörter oder Textpassagen zu übertragen.

Jedoch soll es möglich sein, eine Umwandlung selbst festzulegen. So kann man einfach mehrere Textausgaben abhängig vom Zustand an das Frontend schicken:

z.B. Geofancy: Home -> Zuhause, Underway -> Unterwegs, Work -> Arbeit

===OnOff===
Für einfache Ein/Aus-Funktionen.

FHEM interpretiert Ein/Aus-Funktionen mit on/off, SmartVisu jedoch mit 1/0.

Der OnOff-Converter wandelt diese bidirektional, damit sie richtig interpretiert werden.

===RGBCombined===
Ein Converter zur Steuerung von RGB Leuchtmitteln über Farbauswahlfelder (zb. Farbkreis)

Bidirektional, wandelt, verwendet 3 Frontend Items

reading: Name eines reading mit HEX RGB Wert des Leuchtmittels
converter (mit Parameter): <code>RGBCombined <itemRed>, <itemYellow>, <itemBlue></code>

set: Name des set Befehls, bekommt HEX RGB Wert übergeben

Dieser Converter muss gleichlautend für alle 3 RGB Kanäle des Frontends definiert werden.

==Device Connector==
Sobald ein fronthemDevice definiert ist, kann man über die device details in fhem die GADs definieren und die Rechte verteilen.
===GAD definieren===
Eine GAD-Definierung besteht aus:
[[Datei:DeviceDefine.png|400px|thumb|right|GADs definieren]]
*mode
*device
*reading
*converter
*cmd set
====mode====
Es gibt 2 Modis:
*item
*plot
====device====
Hier wird der Name des FHEM-Devices eingetragen, an das die Befehle geschickt werden. Die vorhandenen Devices in fhem werden als Liste unter dem Eingabefeld angezeigt, sobald man mit der Eingabe beginnt.

Groß/Kleinschreibung muss beachtet werden!

====reading====
Das für die Anzeige zu verwendende Reading des fhem Devices, z. B. "state" oder "Level". Die vorhandenen Readings des gewählten fhem-Devices werden als Liste unter dem Eingabefeld angezeigt, sobald man mit der Eingabe beginnt.

Readings werden, wenn das Frontend dies anfordert, aktiv von fronthem gelesen und (per push) proaktiv an das Frontend gesendet wenn fhem entsprechende events erzeugt.

====converter====
Hier gibt man denn Namen des Converters an, denn man verwenden möchte.
Es stehen unterschiedliche converter für verschiedene Aufgabenstellungen zur Verfügung. Über das Konzept der converter können fhem Device unterschiedlichster Typen und Funktionen über das Frontend bedient werden. So versorgt der gleiche converter der die Solltemperatur des virtuellen Heizungsthermostats (bidriektional) einstellt auch die Füllstandanzeige der Zisterne sowie den Dimmer. In all diesen Fällen handelt es sich um die Übertragung von numerischen Werten. Converter können dabei auch Spezialaufgaben wie die Begrenzung des Wertebereichs übernehmen. So lässt sich über NumDirect zum Beispiel die Solltemperatur Einstellung für virtuelle Heizungsregler auf Min und Max Werte begrenzen.

Oben ist eine Standardliste der [[#Converter]]. Die meisten Devices können mit diesen Convertern angesteuert werden.

Groß/Kleinschreibung muss beachtet werden!

====cmd set====
Das zum Schreiben zu verwendende Reading des fhem Devices, z. B. "state" oder "Level". Die vorhandenen Readings des gewählten fhem-Devices werden als Liste unter dem Eingabefeld angezeigt, sobald man mit der Eingabe beginnt.

Das gewählte Reading gibt den "set" des fhem Devices an, der die Rückgabe des Converters entgegen nimmt.

Bei Lampe z.B. "state".

===Devicerechte vergeben===
[[Datei:DeviceRechte.png|400px|thumb|right|Devicerechte vergeben]]
Devicerechte bestehen aus:
*read
*write
*PIN GAD
====read====
Das Device darf die Statuswerte auslesen, jedoch nicht verändern.

====write====
Das Device darf Statuswerte ändern.

====PIN GAD====
In Entwicklung...

==Universelle ZeitSchaltUhr UZSU==
Es existiert ein Widget für eine universelle ZeitSchaltUhr auf GitHub unter https://github.com/mworion/uzsu_widget .

Man muss dazu die uzsu_widget.html in das eigene Verzeichnis in ../pages/.. kopieren und die visu.js und die visu.css in seine Installation integrieren (Achtung, wenn die beiden Dateien schon bestehen, dann muss man das manuell zusammenkopieren!)

Das Widget kann in SmartVISU wie gewohnt eingebunden werden:

(für ein Ergebnis, das der Benutzer direkt eintippen kann, z.B. 'on' oder 'off')

<nowiki>
{% import "widget_uzsu.html" as visu %}

{{ visu.uzsu_icon('UZSUtxt', gad_uzsu, '', '', '', '', 'text') }}
</nowiki>

oder (für ein Ergebnis zwischen 0 und 100)
<nowiki>
{% import "widget_uzsu.html" as visu %}

{{ visu.uzsu_icon('UZSUnum', gad_uzsu, '', '', '', '', 'num', 0, 100) }}
</nowiki>

oder (für ein Ergebnis {0,1}, das aber als flip mit 'an' und 'aus' angezeigt wird)
<nowiki>
{% import "widget_uzsu.html" as visu %}

{{ visu.uzsu_icon('UZSUnum', gad_uzsu, '', '', '', '', 'bool', 'an', 'aus') }}
</nowiki>

Um die Antwort des Widgets in fhem zu verarbeiten, benötigt man

1. je ein Reading uzsu an dem zu schaltenden Device, das man mit

<nowiki>
setreading <device> uzsu {}
</nowiki>

erzeugen MUSS.

2. eine Anbindung des uzsu-GAD per UZSU Converter an das Reading uzsu des zu schaltenden Device read und write in fhem

3. folgenden Code in der 99_FronthemUtils.pm:

Im Package Main:

<nowiki>

use JSON;

###############################################################################
#
# Umsetzen der UZSU-Settings für ein device
#
###############################################################################
sub UZSU_execute($$)
{
my ($device, $uzsu) = @_;

$uzsu = decode_json($uzsu);

fhem('delete wdt_'.$device.'_uzsu.*');

for(my $i=0; $i < @{$uzsu->{list}}; $i++) {
my $weekdays = $uzsu->{list}[$i]->{rrule};
$weekdays = substr($weekdays,18,50);

fhem('define wdt_'.$device.'_uzsu'.$i.' WeekdayTimer '.$device.' en '.$weekdays.'|'.$uzsu->{list}[$i]->{time}.'|'.$uzsu->{list}[$i]->{value});

if (($uzsu->{active}) && ($uzsu->{list}[$i]->{active})) {
fhem('attr wdt_'.$device.'_uzsu'.$i.' disable 0');
} else {
fhem('attr wdt_'.$device.'_uzsu'.$i.' disable 1');
}
}
}

</nowiki>

Im Package fronthem, selbe Datei:

<nowiki>

use JSON;

###############################################################################
#
# Setreading a device reading using JSON conversion (gadval => reading=decode_json() => setval => encode_json(reading) )
#
###############################################################################

sub UZSU(@)
{
my ($param) = @_;
my $cmd = $param->{cmd};
my $gad = $param->{gad};
my $gadval = $param->{gadval};

my $device = $param->{device};
my $reading = $param->{reading};
my $event = $param->{event};

my @args = @{$param->{args}};
my $cache = $param->{cache};

if ($param->{cmd} eq 'get')
{
$param->{cmd} = 'send';
}
if ($param->{cmd} eq 'send')
{
$param->{gad} = $gad;
$param->{gadval} = decode_json(main::ReadingsVal($device, $reading, ''));
$param->{gads} = [];
return undef;
}
elsif ($param->{cmd} eq 'rcv')
{
$gadval = encode_json($gadval);
$gadval =~ s/;/;;/ig;
$param->{result} = main::fhem("setreading $device $reading $gadval");
$param->{results} = [];
return 'done';
}
elsif ($param->{cmd} eq '?')
{
return 'usage: UZSU';
}
return undef;
}

</nowiki>

Dieser Code erzeugt aus den Einstellungen im Widget entsprechende WeekdayTimer in fhem und löscht und erstellt neu bei jeder Änderung in SmartVISU.

4. Die Funktion muss getriggert werden. Dazu ist ein notify nötig, das auf die Veränderung der uzsu Readings reagiert:

<nowiki>

define UZSU notify .*:uzsu:.* { UZSU_execute($NAME, $EVTPART1) }

</nowiki>

Voila!

Pushbullet

2015-01-30T09:38:58Z

Fhainz: Modul Infobox und Client Links geändert

'''Pushbullet''' ist ein Dienst, um Benachrichtigungen an unterschiedliche Endgeräte zu senden. Pushbullet stellt Apps für iPhone, Android, Windows (Beta), Mac OS X (bald erhältlich) sowie Plugins für Chrome und Firefox an. Eine genaue Liste kann [http://www.pushbullet.com/apps hier] eingesehen werden. Der Dienst sowie die Apps sind kostenlos.
{{Infobox Modul
|ModPurpose=Senden von Push-Nachrichten an unterschiedliche Endgeräte
|ModType=d
|ModForumArea=Unterstützende Dienste
|ModTechName=70_Pushbullet.pm
|ModOwner=fhainz
}}

==Installation==

Zur Benutzung von Pushbullet ist ein Google Account zwingend notwenig. Falls noch kein Google Account vorhanden ist kann man diesen [https://accounts.google.com/SignUp hier einrichten]. Anschließend kann man sich auf [http://pushbullet.com pushbullet.com] mit den Google Benutzerdaten einloggen. Den benötigten accessToken findet man in den Account Settings (rechts oben auf das Benutzer-Symbol klicken).
Auf dem gewünschten Endgerät muss nur noch der entsprechende Client installiert werden.

===Offizielle Clients===

'''Smartphones'''
*iOS: [https://www.pushbullet.com/apps Pushbullet App]
*Android: [https://www.pushbullet.com/apps Pushbullet App]

'''Browser-Erweiterungen'''
*Firefox: [https://www.pushbullet.com/apps Pushbullet Plugin]
*Chrome: [https://www.pushbullet.com/apps Pushbullet Plugin]
*Opera: [https://www.pushbullet.com/apps Pushbullet Plugin]
*Safari: [https://www.pushbullet.com/apps Pushbullet Plugin]

'''Betriebssystem-Erweiterungen'''
*Windows: [https://www.pushbullet.com/apps Pushbullet App]
*Mac OS X: [https://www.pushbullet.com/apps Pushbullet App]

===Clients durch die Community===
*Blackberry: [https://www.pushbullet.com/apps BlackBullet]
*Windows Phone: [https://www.pushbullet.com/apps PushPin]
*Ubuntu: [https://www.pushbullet.com/apps PB Indicator]

Übersicht aller Clients: [https://www.pushbullet.com/apps]

==Einbinden des Dienstes in Fhem==

Das Modul wird mit dem folgenden Befehl in fhem definiert:

define <name> Pushbullet <accessToken>

==Push Benachrichtigung senden==

===Nachricht===

Nachricht ohne Titel oder Gerät:
set <name> message Das ist eine Nachricht

Nachricht mit Titel ohne Gerät:
set <name> message Das ist eine Nachricht | Ein Titel

Nachricht mit Titel an Gerät iPhone:
set <name> message Das ist eine Nachricht | Ein Titel | iPhone

Nachricht mit Titel an Kontakt Max Mustermann
set <name> message Das ist eine Nachricht | Ein Titel | Max Mustermann

Wenn kein Titel angegeben wird tritt das Attribut defaultTitel in Kraft. Falls dies nicht gesetzt ist wird der Titel auf FHEM gesetzt.
Wenn kein Device angeben wird tritt das Attribut defaultDevice in Kraft. Falls dies nicht gesetzt ist geht der Push an alle '''deine''' Devices. Kontakte erhalten die Benachrichtigung '''nicht!'''

===Link===
Der Inhalt des Links wird in der App direkt angezeigt. Ein Webcam Foto kann somit mit einem Touch direkt am Endgerät angezeigt werden.

Link ohne Titel oder Gerät:
set <name> link http://google.com

Link mit Titel ohne Gerät:
set <name> link http://google.com | Google

Link mit Titel an Gerät iPhone
set <name> link http://google.com | Google | iPhone

Link mit Titel an Kontakt Max Mustermann
set <name> link http://google.com | Google | MaxMustermann

*Wenn kein Titel angegeben wird tritt das Attribut defaultTitel in Kraft. Falls dies nicht gesetzt ist wird der Titel auf FHEM gesetzt.
*Wenn kein Device angeben wird tritt das Attribut defaultDevice in Kraft. Falls dies nicht gesetzt ist geht der Push an alle '''deine''' Devices. Kontakte erhalten die Benachrichtigung '''nicht!'''

===Liste===

Liste ohne Titel oder Gerät:
set <name> list Milch, Brot, Zucker

Liste mit Titel ohne Gerät:
set <name> list Milch, Brot, Zucker | Einkaufsliste

Liste mit Titel an Gerät iPhone
set <name> list Milch, Brot, Zucker | Einkaufsliste | iPhone

Liste mit Titel an Kontakt Max Mustermann
set <name> list Milch, Brot, Zucker | Einkaufsliste | MaxMustermann

*Wenn kein Titel angegeben wird tritt das Attribut defaultTitel in Kraft. Falls dies nicht gesetzt ist wird der Titel auf FHEM gesetzt.
*Wenn kein Device angeben wird tritt das Attribut defaultDevice in Kraft. Falls dies nicht gesetzt ist geht der Push an alle '''deine''' Devices. Kontakte erhalten die Benachrichtigung '''nicht!'''

==Kontakt hinzufügen==
Mit
set <name> contactAdd <Name> | <email>
wird eine neuer Kontakt hinzugefügt. Dieser bekommt erstmal eine E-Mail mit einer Einladung zur Pushbullet App. Fall die App nicht installiert wird, bekommt der Kontakt Push-Benachrichtigungen als E-Mail zugestellt.

==Gerät / Kontakt umbenennen==
Mit
set <name> deviceRename <alterName> | <neuerName>
wird ein Gerät oder Kontakt umbenannt.

==Gerät / Kontakt löschen==
Mit
set <name> deviceDelete <name>
wird ein Gerät oder Kontakt gelöscht.

==Geräte / Kontakte neu einlesen==
Mit
get <name> devices
kann man die Device Liste von pushbullet.com neu einlesen.

==Pushbullet Website==
Die Pushbullet Website bietet umfangreiche Möglichkeiten die gesendeten Push Nachrichten, Geräte und Kontakte zu verwalten. Weiters kann man auch Nachrichten versenden und löschen.

==Links==
*Thread über das Modul im [http://forum.fhem.de/index.php/topic,29796.0.html FHEM-Forum]
*Pushbullet [https://www.pushbullet.com/apps Apps]
*Pushbullet [https://docs.pushbullet.com API]
*Homepage: [http://pushbullet.com pushbullet.com]

[[Kategorie: Code Snippets]]

Pushbullet

2015-01-18T11:08:20Z

Fhainz: Link korrigiert

'''Pushbullet''' ist ein Dienst, um Benachrichtigungen an unterschiedliche Endgeräte zu senden. Pushbullet stellt Apps für iPhone, Android, Windows (Beta), Mac OS X (bald erhältlich) sowie Plugins für Chrome und Firefox an. Eine genaue Liste kann [http://www.pushbullet.com/apps hier] eingesehen werden. Der Dienst sowie die Apps sind kostenlos.
{{Infobox Modul
|ModPurpose=Senden von Push-Nachrichten an unterschiedliche Endgeräte
|ModType=x
|ModForumArea=Unterstützende Dienste
|ModTechName=70_Pushbullet.pm (noch nicht eingecheckt)
|ModOwner=fhainz
}}

==Installation==

Zur Benutzung von Pushbullet ist ein Google Account zwingend notwenig. Falls noch kein Google Account vorhanden ist kann man diesen [https://accounts.google.com/SignUp hier einrichten]. Anschließend kann man sich auf [http://pushbullet.com pushbullet.com] mit den Google Benutzerdaten einloggen. Den benötigten accessToken findet man in den Account Settings (rechts oben auf das Benutzer-Symbol klicken).
Auf dem gewünschten Endgerät muss nur noch der entsprechende Client installiert werden.

===Offizielle Clients===

'''Smartphones'''
*Apple iOS: [https://itunes.apple.com/us/app/pushbullet/id810352052 Pushbullet App]
*Android: [https://play.google.com/store/apps/details?id=com.pushbullet.android&hl=de Pushbullet App]

'''Browser-Erweiterungen'''
*Firefox: [https://addons.mozilla.org/de/firefox/addon/pushbullet Pushbullet Plugin]
*Chrome: [https://chrome.google.com/webstore/detail/pushbullet/chlffgpmiacpedhhbkiomidkjlcfhogd Pushbullet Plugin]
*Opera: [https://addons.opera.com/en/extensions/details/pushbullet/ Pushbullet Plugin]

'''Betriebssystem-Erweiterungen'''
*Windows: [https://update.pushbullet.com/pb_install.exe Pushbullet App]

===Clients durch die Community===
*Blackberry: [http://appworld.blackberry.com/webstore/content/58534486/?countrycode=de&lang=de BlackBullet]
*Windows Phone: [http://www.windowsphone.com/en-us/store/app/pushpin/b6764b31-9f2a-4ba4-9e00-aba343928459 PushPin]
*Ubuntu: [http://www.atareao.es/tag/pushbullet-indicator/ PB Indicator]

Übersicht aller Clients: [https://www.pushbullet.com/apps]

==Einbinden des Dienstes in Fhem==

Das Modul wird mit dem folgenden Befehl in fhem definiert:

define <name> Pushbullet <accessToken>

==Push Benachrichtigung senden==

===Nachricht===

Nachricht ohne Titel oder Gerät:
set <name> message Das ist eine Nachricht

Nachricht mit Titel ohne Gerät:
set <name> message Das ist eine Nachricht | Ein Titel

Nachricht mit Titel an Gerät iPhone:
set <name> message Das ist eine Nachricht | Ein Titel | iPhone

Nachricht mit Titel an Kontakt Max Mustermann
set <name> message Das ist eine Nachricht | Ein Titel | Max Mustermann

Wenn kein Titel angegeben wird tritt das Attribut defaultTitel in Kraft. Falls dies nicht gesetzt ist wird der Titel auf FHEM gesetzt.
Wenn kein Device angeben wird tritt das Attribut defaultDevice in Kraft. Falls dies nicht gesetzt ist geht der Push an alle '''deine''' Devices. Kontakte erhalten die Benachrichtigung '''nicht!'''

===Link===
Der Inhalt des Links wird in der App direkt angezeigt. Ein Webcam Foto kann somit mit einem Touch direkt am Endgerät angezeigt werden.

Link ohne Titel oder Gerät:
set <name> link http://google.com

Link mit Titel ohne Gerät:
set <name> link http://google.com | Google

Link mit Titel an Gerät iPhone
set <name> link http://google.com | Google | iPhone

Link mit Titel an Kontakt Max Mustermann
set <name> link http://google.com | Google | MaxMustermann

*Wenn kein Titel angegeben wird tritt das Attribut defaultTitel in Kraft. Falls dies nicht gesetzt ist wird der Titel auf FHEM gesetzt.
*Wenn kein Device angeben wird tritt das Attribut defaultDevice in Kraft. Falls dies nicht gesetzt ist geht der Push an alle '''deine''' Devices. Kontakte erhalten die Benachrichtigung '''nicht!'''

===Liste===

Liste ohne Titel oder Gerät:
set <name> list Milch, Brot, Zucker

Liste mit Titel ohne Gerät:
set <name> list Milch, Brot, Zucker | Einkaufsliste

Liste mit Titel an Gerät iPhone
set <name> list Milch, Brot, Zucker | Einkaufsliste | iPhone

Liste mit Titel an Kontakt Max Mustermann
set <name> list Milch, Brot, Zucker | Einkaufsliste | MaxMustermann

*Wenn kein Titel angegeben wird tritt das Attribut defaultTitel in Kraft. Falls dies nicht gesetzt ist wird der Titel auf FHEM gesetzt.
*Wenn kein Device angeben wird tritt das Attribut defaultDevice in Kraft. Falls dies nicht gesetzt ist geht der Push an alle '''deine''' Devices. Kontakte erhalten die Benachrichtigung '''nicht!'''

==Kontakt hinzufügen==
Mit
set <name> contactAdd <Name> | <email>
wird eine neuer Kontakt hinzugefügt. Dieser bekommt erstmal eine E-Mail mit einer Einladung zur Pushbullet App. Fall die App nicht installiert wird, bekommt der Kontakt Push-Benachrichtigungen als E-Mail zugestellt.

==Gerät / Kontakt umbenennen==
Mit
set <name> deviceRename <alterName> | <neuerName>
wird ein Gerät oder Kontakt umbenannt.

==Gerät / Kontakt löschen==
Mit
set <name> deviceDelete <name>
wird ein Gerät oder Kontakt gelöscht.

==Geräte / Kontakte neu einlesen==
Mit
get <name> devices
kann man die Device Liste von pushbullet.com neu einlesen.

==Pushbullet Website==
Die Pushbullet Website bietet umfangreiche Möglichkeiten die gesendeten Push Nachrichten, Geräte und Kontakte zu verwalten. Weiters kann man auch Nachrichten versenden und löschen.

==Links==
*Thread über das Modul im [http://forum.fhem.de/index.php/topic,29796.0.html FHEM-Forum]
*Pushbullet [https://www.pushbullet.com/apps Apps]
*Pushbullet [https://docs.pushbullet.com API]
*Homepage: [http://pushbullet.com pushbullet.com]

[[Kategorie: Gerätemodul | Code Snippets]]

ReadingsGroup

2014-12-13T18:03:02Z

Fhainz: /* Anpassung für Update 7196 */

{{SEITENTITEL:readingsGroup}}
{{Infobox Modul
|ModPurpose=Einfache zusammenfassende Darstellung von Informationen über mehrere Geräte und deren Steuerung
|ModType=h
|ModCmdRef=readingsGroup
|ModForumArea=Frontends
|ModTechName=33_readingsGroup.pm
|ModOwner=Andre ([http://forum.fhem.de/index.php?action=profile;u=430 Forum] / [[Benutzer Diskussion:justme|Wiki]])}}

Das Fhem-[[:Kategorie:Hilfsmodul|Hilfsmodul]] [[readingsGroup]] bietet eine einfache Möglichkeit, ''Readings'' (kein Präfix vor dem Reading-Namen), ''Internals'' (Präfix "+" vor dem Namen des internen Wertes) und ''Attributes'' (Präfix "?" vor dem Namen des Attributs) von einem oder mehreren ''Devices'' darzustellen und flexibel zu formatieren.

Die Aktualisierung im Browserfenster geschieht per longpoll und überträgt nur die jeweils geänderten Zellen. Wenn eine readingsGroup in keinem Browserfenster angezeigt wird findet keine longpoll aktualisierung statt.

== Definition ==
Siehe commandref.

== Attribute ==
Weitergehende Erläuterungen zu einzelnen Attributen:

=== noheading ===
[[Datei:ReadingsGroup_noheading.png|mini|rechts|400px|ReadingsGroup: rechts mit "noheading" Attribut, links der anklickbare Titel]]
Das Attribut <code>noheading</code> führt dazu, dass der Alias der ReadingsGroup nicht mehr als Titel angezeigt wird. Das kann wünschenswert sein, wenn die ReadingsGroup auf einer [[Dashboard]]-Seite angezeigt werden soll, hat allerdings den Nachteil, dass die Detail-Ansicht der ReadingsGroup nicht mehr über einen Klick auf den Titel aufgerufen werden kann. Der Einstellungsdialog der ReadingsGroup ist dann nur noch (z. B.) über
* einen "Probably associated with"-Link eines anderen Objekts oder über
* manuelle Modifikation der URL eines anderen Objekts (<code>http:.../fhem?detail=<objektname></code>)
erreichbar.

== Beispiele ==
Bitte beachten: die folgenden Beispiele enthalten keine Maskierungen oder Verdoppelungen für ; und Zeilenende, sondern sind so angegeben, wie sie im [[PGM2|Web Interface]] im Befehls-Eingabefeld oder nach Klick auf DEF eingegeben werden. Beim manuellen Einfügen in eine [[Konfiguration|Konfigurationsdatei]] sind diese Maskierungen oder Verdoppelungen natürlich vorzunehmen.

=== Einfache Auswahl über Reading-Namen ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define battStatus readingsGroup .*:[Bb]attery</code>
| Alle readings mit Namen '''Battery''' oder '''battery''' von allen Devices.
| rowspan=3 | [[Datei:rgBattery.png|thumb]]
|-
| <code>attr battStatus alias FHT Batteriestatus </code>
| Der Alias wird als Zeilentitel verwendet
|-
| <code>attr battStatus mapping %ROOM </code>
| ''Mapping %ROOM'' führt dazu, dass der Raumname als Zeilentitel angezeigt wird.
|}

=== Übersicht HomeMatic Geräte ===

<nowiki>define HM_Components readingsGroup <Gerät>,<Name>,<Model>,<S/N> TYPE=CUL_HM:+NAME,?model,D-serialNr</nowiki>

=== Auswahl über Reading-Namen, Status als Symbol dargestellt ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define rg_battery readingsGroup .*:battery</code>
| Alle readings mit Namen '''battery''' von allen Devices.
| rowspan=4 | [[Datei:rgBattery2.png|thumb]]
|-
| <code>attr rg_battery alias Batteriestatus </code>
| Der Alias wird als Überschrift verwendet
|-
| <code>attr rg_battery valueIcon {'battery.ok' => 'batterie', 'battery.low' => 'batterie@red'}</code>
| Statt der reading Werte "ok" und "low" soll ein Icon angezeigt werden.
|-
|<code>attr rg_battery commands { "battery.low" => "set %DEVICE replaceBatteryForSec 60" }</code>
| Für LaCrosse devices kann man beim Klick auf ein rotes "battery low icon" direkt replaceBatteryForSec setzen.
|}

=== Reading-Werte zuordnen (Icon / Text) ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define rg readingsGroup Contact.Dachboden_gross:sensed.*</code>
| Alle sensedreadings des Contact.Dachboden_gross device.
| rowspan=4 | [[Datei:rgFenster.png|thumb]]
|-
| <code>attr rg mapping { 'sensed.A' => 'links', 'sensed.B' => 'rechts' }</code>
| Die Zuordnung rechts/links
|-
| <code>attr rg valueFormat {($VALUE eq '1')?"fts_window_roof":"fts_window_roof_open_2"}</code>
| Die Zuordnung von reading Wert zu Icon Namen.
|-
| <code>attr rg_battery valueIcon %VALUE </code>
| Statt des reading Werts soll ein Icon angezeigt werden.
|}

=== Formatvorgabe für Ausgabewerte ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define TempHygro readingsGroup TYPE=CUL_WS:temperature,humidity,dewpoint</code>
| Alle readings mit Namen '''temperature''', '''humidity''', '''dewpoint''' von allen Devices des Typs '''CUL_WS'''
| rowspan=4 | [[Datei:rgTemperatur.png|thumb|[[S300TH]]-Werte in einer readingsGroup]]
|-
| <code>attr TempHygro alias Temperatur / rel. Feuchte / Taupunkt</code>
| Der Alias der readingsGroup wird als Überschrift verwendet
|-
| <code>attr TempHygro mapping %ALIAS</code>
| ''Mapping %ALIAS'' führt dazu, dass der Alias des Geräts als Zeilentitel angezeigt wird.
|-
| <code>attr TempHygro valueFormat { temperature => "%.1f&deg;C", humidity => "%.1f %%", dewpoint => "%.1f&deg;C"}</code>
| Formatierung der Ausgabewerte. '''Achtung:''' "%" die in der Ausgabe erscheinen sollen, müssen verdoppelt werden!
|}

=== Ausgabestil (hier rechtsbündig) ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Wetter readingsGroup WetterXXX:<%temp_temperature>,<Temperatur>,temperature WetterXXX:<%weather_humidity>,<Luftfeuchte>,humidity WetterXXX:<%weather_baraometric_pressure>,<Luftdruck>,pressure
</code>
| Die readings mit Namen '''temperature''', '''humidity''' und '''pressure''' vom Device WetterXXX jeweils mit einem Icon und einem Label davor.
| rowspan=3 | [[Datei:rgWetter.png|thumb]]
|-
| <code>attr Wetter valueFormat { temperature => '%1.f &deg;C', humidity => '%1.f %%', pressure => '%i mbar' }</code>
| Die Formatierung der Readingswerte
|-
| <code>attr Wetter valueStyle style="text-align:right"</code>
| Die Readings sollen rechtsbündig dargestellt werden.
|}

=== Internal Value ausgeben ===
Diese Beispiel könnte entfallen (nächstes Beispiel ist sehr ähnlich; es wird lediglich ein weiterer Wert ausgegeben).
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define culRSSI readingsGroup cul_RSSI=.*:+cul_RSSI</code>
| Den RSSI Wert aller Devices (am IODev ''cul'') die einen solchen haben anzeigen.<br> '''Achtung''': "internal values" werden nicht per longpoll aktualisiert, sondern nur beim Seitenaufbau.
| rowspan=1 | [[Datei:rgculRSSI.png|thumb]]
|}

=== Internal Values ausgeben ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define culRSSI readingsGroup cul_RSSI=.*:+cul_RSSI,+cul_TIME</code>
| Den RSSI Wert mit der zugehörigen Zeit aller Devices (am IODev ''cul'') die einen solchen haben anzeigen.<br> '''Achtung''': "internal values" werden nicht per longpoll aktualisiert, sondern nur beim Seitenaufbau.<br>"Internal Values" werden durch das vorangestellte '''+''' (Pluszeichen) identifiziert.
| rowspan=2 | [[Datei:rgculRSSI2.png|thumb]]
|-
|attr culRSSI valueStyle {return undef if($READING =~ m/TIME/); ($VALUE <= -85)?'style="color:red"':($VALUE <= -80)?'style="color:yellow"':undef}
|Schlechte RSSI Werte sollen abhängig von zwei Schwellwerten gelb oder rot eingefärbt werden (auf dem Screenshot nicht zu sehen).
|}

=== Alle Readings eines Gerätes, mit Ausnahme von... ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Systemstatus readingsGroup sysstat</code>
| Alle readings des sysstat Device
| rowspan=4 | [[Datei:rgSysstat.png|thumb]]
|-
| <code>attr Systemstatus nostate 1</code>
| Ohne state
|-
| <code>attr Systemstatus notime 1</code>
| Ohne readings timestamp
|-
| <code>attr Systemstatus mapping {'load' => 'Systemauslastung', 'temperature' => 'Systemtemperatur in &deg;C'}</code>
| Die Zuordnung der reading Namen zu den Zeilentiteln
|}

=== Anzeige auf einem Floorplan ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Heizung readingsGroup t(1|2|3):temperature</code>
| Die Temperatur readings der Devices t1, t2 und t3
| rowspan=6 | [[Datei:rgHeizung.png|thumb]]
|-
| <code>attr Heizung mapping {'t1.temperature' => 'Vorlauf', 't2.temperature' => 'R&ücklauf', 't3.temperature' => 'Zirkulation'}</code>
| Die Zuordnung der reading Namen zu den Zeilentiteln
|-
| <code>attr Heizung nameStyle style="text-align:left"</code>
| Zeilentitel linksbündig wegen floorplan
|-
| <code>attr Heizung style style="font-size:20px;color:lightgray"</code>
| Großer Font und Farbe passend für den floorplan
|-
| <code>attr Heizung notime 1</code>
| Ohne readings timestamp
|-
| <code>attr Heizung valueFormat : %.1f &deg;C</code>
| Doppelpunkt zwischen Zeilentitel und Wert, eine Nachkommastelle plus Einheit
|}

=== Schriftgrößen, Farben, Icons ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgVerbrauchPCA301.png|links|mini|400px|Schriftgröße, Farbe, Icons...]]
|-
| style="width:40%" |<code>define Verbrauch readingsGroup TYPE=PCA301:state,power,consumption</code>
| Die readings state, power und consumption aller [[PCA301 Funkschaltsteckdose mit Energieverbrauchsmessung|PCA301]] Devices mit einer Zeile pro Device.
|-
| <code>attr Verbrauch mapping %ROOM %ALIAS</code>
| Der Raumname und der Alias werden als Zeilentitel verwendet
|-
| <code>attr Verbrauch nameStyle style="font-weight:bold"</code>
| Der Zeilentitel soll fett sein
|-
| <code>attr Verbrauch style style="font-size:20px"</code>
| Alles in einem größeren Font
|-
| <code>attr Verbrauch valueFormat {power => "%.1f W", consumption => "%.2f kWh"}</code>
| Die Formatierung für die power und consumption readings: eine Nachkommastelle plus Einheit.
|-
|<code>attr Verbrauch valueIcon { state => '%devStateIcon' }</code>
| Für die Dosen, die schaltbar sind, soll das anklickbare device icon gezeigt werden.
|-
|<code>attr Verbrauch valueStyle {($READING eq "power" && $VALUE > 40)?'style="color:red"':'style="color:green"'}</code>
|Wenn das power reading >40 ist, soll es in rot angezeigt werden, alle anderen Werte und readings in grün
|}

=== Wertabhängige Farbgebung ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:TemperaturenRG.png|600px|mini|links|Wertabhängige Farben]]
[[Datei:TemperaturenRG2.png|600px|mini|links|Andere Werte - andere Farben]]
|-
| style="width:40%" |<code>define wzTemperaturenRG readingsGroup Aussen:,<Temperatur>,temperature,<Luftfeuchte>,humidity Wohnzimmer:,<Temperatur>,temperature,<Luftfeuchte>,humidity Kasten_E_Geraete:,<Temperatur>,temperature,<Luftfeuchte>,humidity</code>
| Die readings temperatur und humidity der Devices Aussen, Wohnzimmer und Kasten_E_Geraete in einer Zeile pro Device.
|-
| <code>attr wzTemperaturenRG group 3. Temperaturen</code>
| Die readingsGroup kommt in eine Gruppe
|-
| <code>attr wzTemperaturenRG noheading 1</code>
| noheading
|-
| <code>attr wzTemperaturenRG nostate 1</code>
| nostate
|-
| <code>attr wzTemperaturenRG notime 1</code>
| notime
|-
| <code>attr wzTemperaturenRG valueFormat {temperature => "%.1f °C", humidity =>"%.1f %%" }</code>
| Die Formatierung für die temperatur und humidity readings: eine Nachkommastelle plus Einheit.
|-
|<code>attr wzTemperaturenRG valueStyle { if($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE > 30) { 'style="color:red"'}elsif($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE > 20) { 'style="color:orange"'}elsif($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE < 5) { 'style="color:blue"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE > 23) { 'style="color:red"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE > 21) { 'style="color:orange"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE < 20) { 'style="color:blue"'}elsif($DEVICE eq "Kasten_E_Geraete" && $READING eq "temperature" && $VALUE > 30) { 'style="color:red"'}elsif($DEVICE eq "Kasten_E_Geraete" && $READING eq "temperature" && $VALUE > 28) { 'style="color:orange"'}elsif($READING eq "humidity" && $VALUE > 65) { 'style="color:red"'}elsif($READING eq "humidity" && $VALUE > 60) { 'style="color:orange"'}else{'style="color:green"'} }</code>
| Diverse Farbkombinationen sind möglich
|}

=== Enigma Receiver ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:ReceiverRG.jpg|600px|mini|links|Wertabhängige Farben]]
[[Datei:ReceiverRGmute.jpg|600px|mini|links|Wertabhängige Farben]]
|-
| style="width:40%" |<code>define wzReceiverRG readingsGroup wzReceiver:,<Aktuell>,eventtitle,<Rest>,eventremaining_hr,<Dauer>,eventduration_hr wzReceiver:<Beschreibung>,eventdescription wzReceiver:,<Nächste>,eventtitle_next,<Start>,eventstart_next_hr,<Dauer>,eventduration_next_hr wzReceiver:,<HDD Kapazität>,hdd1_capacity,<Frei>,wzReceiver:hdd1_free wzReceiver:,<Lautstärke>,volume,<HDD>,hdd1_capacity,<Frei>,hdd1_free</code>
| Mehrere readings des Device wzReceiver in mehreren Zeilen. Wenn der Receiver auf mute ist, wird anstatt der Lautstärke, mute angezeigt. Farbige Anzeige des freien Speicherplatzes
'''Benötigt:''' ENIGMA2 Receiver, 70_ENIGMA2.pm - Siehe: [[Enigma2 Receiver (Dreambox, VUplus etc.) steuern]]
|-
| <code>attr wzReceiverRG group Fernseher Receiver</code>
| Die readingsGroup kommt in eine Gruppe
|-
| <code>attr wzReceiverRG mapping &nbsp;</code>
| mapping wird auf &nbsp; (Leerzeichen) gesetzt, damit der Device Name nicht angezeigt wird
|-
| <code>attr wzReceiverRG noheading 1</code>
| noheading
|-
| <code>attr wzReceiverRG nostate 1</code>
| nostate
|-
| <code>attr wzReceiverRG notime 1</code>
| notime
|-
|-
| <code>attr wzReceiverRG valueColumns { eventdescription => 'colspan="4"' }</code>
| Die Beschreibung soll über 4 Spalten gehen
|-
| <code>attr wzReceiverRG valueFormat { wzReceiverRGvalueFormat($DEVICE,$READING,$VALUE);; }</code>
| Die Formatierung wird in die 99_myUtils.pm ausgelagert. Siehe: [[99 myUtils anlegen]]
|-
|<code>attr wzReceiverRG valueStyle { if($READING eq "hdd1_free" && $VALUE < 200){ 'style="color:red"' }elsif( $READING eq "hdd1_free" && $VALUE < 500 ){ 'style="color:orange"' }elsif( $READING eq "volume" && ReadingsVal($DEVICE, "mute", "") eq "on" ){ 'style="color:red"' }else{ 'style="color:green"' } }</code>
| Diverse Farbkombinationen sind möglich. Wenn der Receiver auf mute ist, wird anstatt der Lautstärke <span style="color: red;">mute</span> angezeigt.
|-
| <code>
sub wzReceiverRGvalueFormat($$$)
{
my ($DEVICE,$READING,$VALUE) = @_;

if($READING eq 'hdd1_capacity') {
return "%.2f MB";
} elsif( $READING eq 'hdd1_free') {
return "%.2f MB";
} elsif( $READING eq 'volume' ) {
if( ReadingsVal($DEVICE, "mute", "") eq "on") {
return "mute";
} else {
return "%i %%";
}
}
}</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]
|}

=== Heizungswerte inklusive Batterie- und Fensterstatus ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgHeizung3.png|thumb|links|500px|Heizungswerte inklusive Batterie- und Fensterstatus]]
|-
| style="width:40%" |<code>define Heizungswerte readingsGroup <%sani_heating>,< >,<Act>,<Soll>,<Ist> TYPE=FHT:actuator,desired-temp,measured-temp,<%18>,<%20>,<%22>,window,battery</code>
| Diverse readings aller Devices des Typs <b>FHT</b>.
|-
| <code>attr Heizungswerte commands { 'Heizungswerte.18' => 'set $DEVICE desired-temp 18', 'Heizungswerte.20' => 'set $DEVICE desired-temp 20', 'Heizungswerte.22' => 'set $DEVICE desired-temp 22' }</code>
| Die Links/Kommandos die hinter den 18, 20 und 22 liegen sollen.
|-
| <code>attr Heizungswerte nameStyle style="color:yellow;font-weight:bold"</code>
| Die Überschriften sollen gelb sein.
|-
| <code>attr Heizungswerte valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red', 'window.closed' => 'fts_window_1w@lightgreen', 'window.open' => 'fts_window_1w_open@red'}</code>
| Für den Batteriestand und den Zustand der Fenster sollen jeweils Icons angezeigt werden.
|}

=== Heizungswerte inklusive Ventilposition ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:Rg_Heizung_Valveposition.png|thumb|links|500px|Heizungswerte inklusive Statusinformationen (MAX!)]]
|-
| style="width:40%" |<code>define Heizungswerte readingsGroup <%sani_heating>,<Ventil>,<Soll>,<Ist>,<MaxV>,<GID>,<Mode>,<Batterie> TYPE=CUL_HM:ValvePosition,desired-temp,measured-temp,R-valveMaxPos,groupid,mode,battery</code>
| Diverse readings aller Devices des Typs <b>MAX</b>.
|-
| <code>attr Heizungswerte mapping %ROOM</code>
| Die Raumnamen werden angezeigt.
|-
| <code>attr Heizungswerte nameStyle style="color:yellow;font-weight:bold"</code>
| Die Überschriften sollen gelb (fett) sein.
|-
| <code>attr Heizungswerte room Heizung</code>
| Die "readingsgroup" wird dem Raum "Heizung" zugeordnet.
|-
| <code>attr Heizungswerte valueFormat {temperature => "%.0f °C", desiredTemperature => "%.0f °C", valveposition =>"%.0f %%",maxValveSetting =>"%.0f %%" }</code>
| Es wird noch die Einheit °C hinter den Temperaturwerten angezeigt.
|-
| <code>attr Heizungswerte valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red'}</code>
| Für den Batteriezustand werden Icons anstatt Klartextwerte genommen!
|-
| <code>attr Heizungswerte valueStyle { if($READING eq "temperature" && $VALUE > 20){ 'style="color:green;;font-weight:bold"' }elsif( $READING eq "temperature" && $VALUE <= 20 ){ 'style="color:blue"' }elsif( $READING eq "temperature" && $VALUE > 23 ){ 'style="color:red"' }else{ 'style="color:gray"' } }</code>
| Die Temperaturwerte werden abhängig vom Wert farbig dargestellt.
|-
| <code>attr Heizungswerte valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red', 'window.closed' => 'fts_window_1w@lightgreen', 'window.open' => 'fts_window_1w_open@red'}</code>
| Für den Batteriestand und den Zustand der Fenster sollen jeweils Icons angezeigt werden.
|}

=== Heizungswerte, Status und Regelmöglichkeit ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgHeizung2.png|thumb|500px|links|Anzeige + Regelmöglichkeit]]
|-
| style="width:40%" |<code>define Heizungswerte2 readingsGroup <%sani_heating>,< >,<Act>,<Soll>,<Ist> TYPE=FHT:actuator,desired-temp,measured-temp,<{myUtils_HeizungUpDown($DEVICE,"up")}@desired-temp>,desired-new,<{myUtils_HeizungUpDown($DEVICE,"down")}@desired-temp>,window,battery</code>
| Diverse readings aller Devices des Typs <b>FHT</b>.
|-
| <code>attr Heizungswerte2 nameStyle style="color:yellow;font-weight:bold"</code>
| Die Überschriften sollen gelb sein.
|-
| <code>attr Heizungswerte2 valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red', 'window.closed' => 'fts_window_1w@lightgreen', 'window.open' => 'fts_window_1w_open@red'}</code>
| Für den Batteriestand und den Zustand der Fenster sollen jeweils Icons angezeigt werden.
|-
| <code>attr Heizungswerte2 valueStyle {($VALUE eq "00")?'style="visibility:hidden"':''}</code>
| Nach dem Einstellen den Wert wieder ausblenden.
|-
| <code>
#Heizung regeln in readingsGroup
sub
myUtils_HeizungUpDown($$)
{
my($DEVICE,$CMD) = @_;

my $icon = $CMD;
my $VALUE = ReadingsVal($DEVICE,"desired-new","20" );
$VALUE = ReadingsVal($DEVICE,"desired-temp","20" )
if( !$VALUE || $VALUE == 0 );
my $link;

if( $CMD eq "up" ) {
$icon = "control_arrow_upward";
$VALUE += 1;

if( $VALUE <= 24 ) {
$icon .= "\@red";
$link = "setreading $DEVICE desired-new $VALUE";
}
} elsif( $CMD eq "down" ) {
$icon = "control_arrow_downward";
$VALUE -= 1;

if( $VALUE >= 18 ) {
$icon .= "\@blue";
$link = "setreading $DEVICE desired-new $VALUE";
}
}

my $notify = "notifyHeizungUpDown";
if( !defined($defs{$notify}) ) {
CommandDefine(undef,
"$notify notify .*:desired-new.* "
."{ myUtils_HeizungUpDownNotify(\$NAME,\$EVTPART1); }" );
}

my $ret = "%$icon";
$ret .= "%$link" if( $link );

return $ret;
}
sub
myUtils_HeizungUpDownNotify($$)
{
my($DEVICE,$VALUE) = @_;

return if( $VALUE == 0 );

my $at = "triggerHeizungUpDown_$DEVICE";
CommandDelete(undef, $at) if( defined($defs{$at}) );
CommandDefine(undef,
"$at at +00:00:03 "
."{my \$v = ReadingsVal(\"$DEVICE\",\"desired-new\",undef);"
."fhem(\"set $DEVICE desired-temp \$v\") if( \$v );"
."fhem(\"setreading $DEVICE desired-new 00\");}" );

return undef;
}
</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]: Hiermit werden die Icons zum Ändern der gewünschten Temperatur dargestellt und im Bereich >=18 und <= 24 Grad anklickbar gemacht. Zwischen den Pfeilen wird der gerade eingestellte Wert angezeigt. Wenn dieser drei Sekunden nicht mehr geändert wurde wird die desired-temp auf diesen Wert gesetzt und die Anzeige zwischen den Pfeilen ausgeblendet.
|}

=== Heizungswerte, Status, Steuerung und Wochenprofil ===
Dieses Beispiel funktioniert nur mit HomeMatic HM-CC-RT-DN, für andere Thermostate müssen an diversen Stellen Änderungen vorgenommen werden.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:RgThermostate.png|thumb|500px|links|Status, Steuerung und Wochenprofil]]
|-
| style="width:40%" |<code>
set d_label Heizung Heizung <br>
set d_label Temperatur Temperatur <br>
set d_label Status Status <br>
set d_label Wochenplan Wochenplan <br>
set d_label Werktag Werktag <br>
set d_label Samstag Samstag <br>
set d_label Sonntag Sonntag <br>
set d_label Zeitraum1 Zeitraum 1 <br>
set d_label Zeitraum2 Zeitraum 2 <br>
</code>
|Erzeugen der Readings im device [[Dummy_Hilfen#d_label|d_label]].
|-
| <code>
define rg_thermostate readingsGroup <>,Heizung@d_label,<|>,Temperatur@d_label,<|>,Status@d_label,<|>,Wochenplan@d_label,<|>,Werktag@d_label,<|>,Samstag@d_label,<|>,Sonntag@d_label,<|>,<> CUL_HM_HM_CC_RT_DN_......_Clima:<>,?alias,<|>,<Soll>,desired-temp,<Tag>,dayTemp@{rg($DEVICE."§clima")},impossible@{$DEVICE},<|>,controlMode,R-globalBtnLock@{rg($DEVICE."§device")},<|>,Zeitraum1@d_label,<|>,workday_period_1_start@{rg($DEVICE."§clima")},workday_period_1_stop@{rg($DEVICE."§clima")},<|>,saturday_period_1_start@{rg($DEVICE."§clima")},saturday_period_1_stop@{rg($DEVICE."§clima")},<|>,sunday_period_1_start@{rg($DEVICE."§clima")},sunday_period_1_stop@{rg($DEVICE."§clima")},<|>,impossible@{$DEVICE},<%system_fhem_update>,<nowiki><br></nowiki>,state@{rg($DEVICE."§device")},<%getConfig>,<|>,<Ist>,measured-temp,<Nacht>,nightTemp@{rg($DEVICE."§clima")},<|>,<Ventil>,ValvePosition,<|>,Zeitraum2@d_label,<|>,workday_period_2_start@{rg($DEVICE."§clima")},workday_period_2_stop@{rg($DEVICE."§clima")},<|>,saturday_period_2_start@{rg($DEVICE."§clima")},saturday_period_2_stop@{rg($DEVICE."§clima")},<|>,sunday_period_2_start@{rg($DEVICE."§clima")},sunday_period_2_stop@{rg($DEVICE."§clima")},<|>,impossible@{$DEVICE},impossible@{rg($DEVICE."§device")},<%burstXmit>
</code>
| Diverse readings aller Devices <b>CUL_HM_HM_CC_RT_DN_......_Clima</b>, entsprechender [[Makefine#d_climaControl|d_climaControl]] (müssen vorher angelegt werden) und [[Dummy_Hilfen#d_label|d_label]].
|-
| <code>
attr rg_thermostate commands { 'desired-temp' => 'desired-temp:', 'dayTemp' => 'dayTemp:', 'controlMode' => 'trigger ntfy_rg $DEVICE controlMode', 'R-globalBtnLock' => 'trigger ntfy_rg $DEVICE globalBtnLock', 'workday_period_1_start' => 'workday_period_1_start:', 'workday_period_1_stop' => 'workday_period_1_stop:', 'saturday_period_1_start' => 'saturday_period_1_start:', 'saturday_period_1_stop' => 'saturday_period_1_stop:', 'sunday_period_1_start' => 'sunday_period_1_start:', 'sunday_period_1_stop' => 'sunday_period_1_stop:', 'rg_thermostate.system_fhem_update' => 'trigger ntfy_rg $DEVICE setTimeTable', 'rg_thermostate.getConfig' => 'set $DEVICE getConfig', 'nightTemp' => 'nightTemp:', 'workday_period_2_start' => 'workday_period_2_start:', 'workday_period_2_stop' => 'workday_period_2_stop:', 'saturday_period_2_start' => 'saturday_period_2_start:', 'saturday_period_2_stop' => 'saturday_period_2_stop:', 'sunday_period_2_start' => 'sunday_period_2_start:', 'sunday_period_2_stop' => 'sunday_period_2_stop:', 'rg_thermostate.burstXmit' => 'set $DEVICE burstXmit'}
</code>
| Temperaturen werden als DropDown Auswahl dargestellt, Icons triggern [[readingsGroup#sub_rg|ntfy_rg]]
|-
| <code>
attr rg_thermostate mapping { 'desired-temp' => '', 'dayTemp' => '', 'workday_period_1_start' => '', 'workday_period_1_stop' => '', 'saturday_period_1_start' => '', 'saturday_period_1_stop' => '', 'sunday_period_1_start' => '', 'sunday_period_1_stop' => '', 'nightTemp' => '', 'workday_period_2_start' => '', 'workday_period_2_stop' => '', 'saturday_period_2_start' => '', 'saturday_period_2_stop' => '', 'sunday_period_2_start' => '', 'sunday_period_2_stop' => ''}
</code>
| Ausblenden der Texte vor den DropDowns.
|-
| <code>
attr rg_thermostate nameStyle{($READING eq "Soll" ||$READING eq "Tag" ||$READING eq "%getConfig" ||$READING eq "Ist" ||$READING eq "Nacht" ||$READING eq "Ventil" )?'style="text-align:right"' :($READING eq "%burstXmit" )?'style="text-align:center"' :'style=""'}
</code>
| Ausrichten der Überschriften die keine readings sind.
|-
| <code>
attr rg_thermostate nonames 1
</code>
| Ausblenden der Device Namen.
|-
| <code>
attr rg_thermostate valueColumns { 'Heizung' => 'colspan="2"', 'Temperatur' => 'colspan="4"', 'Status' => 'colspan="2"', 'Werktag' => 'colspan="2"', 'Samstag' => 'colspan="2"', 'Sonntag' => 'colspan="2"', 'alias' => 'colspan="2"'}
</code>
| Diverse Readings sollen über mehrere Spalten dargestellt werden.
|-
| <code>
attr rg_thermostate valueFormat { 'measured-temp' => "%0.1f °C", 'ValvePosition' => "%0.1f %%"}
</code>
| Formatierung für measured-temp und ValvePosition.
|-
| <code>
attr rg_thermostate valueIcon
attr rg_thermostate valueIcon { 'controlMode.auto' => 'sani_heating_automatic@green', 'controlMode.set_auto' => 'sani_heating_automatic@orange', 'controlMode.manual' => 'sani_heating_manual@red', 'controlMode.set_manual' => 'sani_heating_manual@orange', 'R-globalBtnLock.on' => 'secur_locked@green', 'R-globalBtnLock.on ' => 'secur_locked@green', 'R-globalBtnLock.set_on ' => 'secur_locked@orange', 'R-globalBtnLock.off' => 'secur_open@red', 'R-globalBtnLock.off ' => 'secur_open@red', 'R-globalBtnLock.set_off ' => 'secur_open@orange'}
</code>
| Zuweisung der Icons.
|-
| <code>
attr rg_thermostate valueStyle{($READING eq "Heizung" ||$READING eq "Temperatur" ||$READING eq "Status" ||$READING eq "Wochenplan" ||$READING eq "Werktag" ||$READING eq "Samstag" ||$READING eq "Sonntag" )?'style="font-size:20px;;color:RoyalBlue;;text-align:center"' :($READING eq "alias" )?'style="font-size:11px;;font-weight:bold;;text-align:left"' :($READING eq "ValvePosition" &&$VALUE > 40 )?'style="font-weight:bold;;color:Orange;;text-align:left"' :($READING eq "desired-temp" ||$READING eq "measured-temp" )?'style="text-align:center"' :($READING eq "state" ||$READING eq "ValvePosition" )?'style="text-align:left"' :'style="text-align:right"'}
</code>
| Ausrichten und einfärben der readings.
|}

=== Readings aus zusätzlichen Devices ===
Im folgenden Beispiel wird gezeigt wie sich Readings zusätzlicher Devices zu einer Zeile mit mehreren Readings hinzufügen lassen. Diese zusätzlichen Devices können z.b. die unterschiedlichen Channel eines HomeMatic Gerätes sein. Im folgenden Beispiel wird der Name des zugehörigen Geräts dynamisch bestimmt.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgHeizung4.png|thumb|500px|links|Anzeige + Regelmöglichkeit]]
|-
| style="width:40%" |<code>define myTemp readingsGroup <Raum>,<Tist>,<Tsoll>,<Mode>,<Tnight>,<Tday>,<Hum>,<BatTC>,<Vist>,<Vsoll>,<Verr>,<BatVD> Thermostat.(WZ|OZ|AZ|Bad|Kueche|SZ|GZ|Bad.OG):measured-temp,desired-temp,controlMode,night-temp,day-temp,humidity,battery,ValvePosition@{valveOfDevice($DEVICE)},ValveDesired@{valveOfDevice($DEVICE)},R-valveErrorPos@{valveOfDevice($DEVICE)},battery@{valveOfDevice($DEVICE)} Broetje:ToutIst </code>
| Diverse Readings aller Thermostat Devices und des jeweils zugehörigen Ventilantriebs.
|-
| <code>attr myTemp mapping { 'Broetje' => 'Garten','Thermostat.AZ' => 'EG Arbeitszimmer','Thermostat.SZ' => 'OG Schlafzimmer','Thermostat.WZ'=>'EG Wohnzimmer','Thermostat.Kueche' => 'EG Küche','Thermostat.GZ' => 'OG Gästezimmer','Thermostat.Bad' => 'EG Bad','Thermostat.Bad.OG' => 'OG Bad','Thermostat.OZ' => 'EG Kaminzimmer','desired-temp' => <nowiki>''</nowiki> }</code>
| Die Benennung der Zeilentitel (Das ist je nach Konfiguration auch über $ALIAS und/oder $ROOM lösbar).
|-
| <code>attr myTemp commands { 'desired-temp' => 'desired-temp:' }</code>
| desired-temp soll per dropDown einstellbar sein.
|-
| <code>attr myTemp nameStyle style="color:yellow"</code>
| Die Überschriften sollen gelb sein.
|-
| <code>attr myTemp valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red'}</code>
| Für den Batteriestand sollen jeweils Icons angezeigt werden.
|-
| <code>attr myTemp valueFormat { 'measured-temp' => "%0.1f &deg;C",'ToutIst' => "%.1f &deg;C",'night-temp' => "%.1f &deg;C",'day-temp' => "%.1f &deg;C",'humidity' => "%.0f
%%",'ValvePosition' => "%.0f %%",'ValveDesired' => "%.0f %%",'R-valveErrorPos' => "%.0f %%" }</code>
| Die Formatierung der Werte.
|-
| <code>
#namen des ventil device aus thermostat device ableiten
sub valveOfDevice ($) {
my ($DEVICE) = @_;

if ($DEVICE =~ m/AZ/) {
return "Ventil.".substr($DEVICE,11).".Nord";
} else {
return "Ventil.".substr($DEVICE,11);
}
}</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]: Hier wird aus dem Namen des Thermostaten der Name des zugehörigen Ventilantriebs abgeleitet.
|}
Da im {...} Teil des <reading>@<device> Arguments keine Leerzeichen oder Kommas vorkommen dürfen ist er in der Regel das Einfachste die Funktionalität wie in diesem Beispiel in eine eigene Routine auszulagern. Mit ein paar 'Tricks' lässt es sich aber manchmal auch ohne Leerzeichen oder Kommas lösen und dann direkt in die Definition schreiben:<code>...,ValvePosition@{$DEVICE=~s/Thermostat/Ventil/;$DEVICE;},...</code>

=== Dynamische Inhalte ===
[[Datei:rgDynamic-1.png|mini|450px|readingsGroup mit umschaltbarem Inhalt 1]]
[[Datei:rgDynamic-2.png|mini|450px|readingsGroup mit umschaltbarem Inhalt 2]]
Es ist möglich, den in einer readingsGroup dargestellten Inhalt dynamisch von zusätzlichen Bedingungen abhängig zu machen. Im folgenden Beispiel lässt sich
einstellen, dass nur die Devices angezeigt werden, die einen bestimmten Zustand (hier: on/off, open/tilted/closed) haben. Hier wird zum Umschalten ein dummy, der direkt über der readingsGroup dargestellt wird, verwendet. Über das links und/oder commands lässt sich auch eine Darstellung erzeugen, bei der das Umschalten direkt innerhalb der readingsGroup möglich ist.

<pre>
define LXrg dummy
attr LXrg group -
attr LXrg setList mode1:on,off mode2:open,closed,tilted
attr LXrg stateFormat 1=mode1 2=mode2
attr LXrg webCmd mode1:mode2

define rg readingsGroup Window.*:state Light.*:state
attr rg group -
attr rg valueFormat { return $VALUE if ( $VALUE eq ReadingsVal("LXrg","mode1","") || $VALUE eq ReadingsVal("LXrg","mode2","") );; return undef;;}

define Watch_LX notify LX.*:.* {my $value = ReadingsVal($NAME,'state','');;;;fhem("setreading $NAME $value")}
</pre>

=== Enable/Disable Button am Beispiel eines WeekdayTimer ===
Dieses Beispiel zeigt die Anwendung einer readingsGroup, um im Frontend einen Enable/Disable Button für ein Objekt darzustellen. Für den WeekdayTimer gibt es hier spezielle Erweiterungen (set Routinen, um das disable Attribut zu setzen, Reading "disabled"). Es gibt aber auch eine allgemeinere Variante (siehe [http://forum.fhem.de/index.php/topic,23655.msg169141.html#msg169141 diesen Forumsbeitrag]) für alle Objekte, die das FHEM Attribut "disable" unterstützen.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rg_scheduling.png|thumb|500px|links|Enable/Disable Button]]
|-
| style="width:40%" |<code>define rg_Timer_Wasser readingsGroup timer_Wasser_..:disabled,+DEF,<{rg_timer_Wasser_show_conditional($DEVICE,"nextUpdate")}@disabled>,<{rg_timer_Wasser_show_conditional($DEVICE,"nextValue")}@disabled></code>
| Definition der angezeigten Readings. Das Reading disabled wird mit den u.a. Attributen zum Button, +DEF zeigt die Definition, d.h. die Schaltzeiten, des Timers an. Die Readings nextUpdate und nextValue sollen nur angezeigt werden, falls der Timer aktiv ist. Hierfür sorgt eine Routine <code>rg_timer_Wasser_show_conditional</code>, die in der 99_myUtils.pm definiert wird. Das abschließende @disabled sorgt dafür, dass der LongPoll Mechanismus die Anzeige sofort ändert, wenn der Button betätigt wird.
|-
| <code>attr rg_Timer_Wasser valueFormat { if ( $READING =~ m/.*DEF/ ) { my @text = split(" ", $VALUE); shift @text; return join(" ", @text) }}</code>
| Der Name des Timers wird aus dem interal Reading "+DEF" vorne abgeschnitten. Damit werden nur die definierten Schaltpunkte angezeigt.
|-
| <code>attr rg_Timer_Wasser valueIcon { 'disabled.0' => 'Restart', 'disabled.1' => 'Shutdown' }</code>
| Die beiden Zustände für den Button werden durch zwei Standard-Icons angezeigt.
|-
| <code>attr rg_Timer_Wasser commands { 'disabled.0' => 'set $DEVICE disable', 'disabled.1' => 'set $DEVICE enable' }</code>
| Toggle-Funktion für den Button. Wenn der Timer aktiv ("disabled.0") sorgt ein Klick auf den Button, dass der Timer deaktiviert wird ("set $DEVICE disable").
|-
|<code>
sub rg_timer_Wasser_show_conditional($$)
{
my ($DEVICE,$READING) = @_;
return ( ReadingsVal($DEVICE, "disabled", "1") eq "0" )?
ReadingsVal($DEVICE, $READING, "reading_undef") : "disabled";
}</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]: Hiermit wird das übergebene Reading des Timers nur angezeigt, wenn der Timer aktiv ist. Andernfalls wird der String "disabled" stattdessen angezeigt.
|}

== Links und Trigger ==
=== readingsGroup mit Link ===
[[Datei:rgPCA-detail.png|mini|400px|readingsGroup mit Link]]
Das PCA301 Beispiel oben lässt sich mit einem ans Ende des define angehängten
:<code><{appendTrigger($DEVICE,"clear","Alle löschen")}></code>
und der folgenden appendTrigger Definition in 99_myUtils.pm um einen Link erweitern, der ein Event auslöst, an das z.B. ein notify gehängt werden kann, um die Verbrauchszähler der PCA301 Dosen zurückzusetzen.
:<code>define clearVerbrauch notify Verbrauch:clear set TYPE=PCA301 clear</code>

<pre>use vars qw($FW_ME);
use vars qw($FW_subdir);
sub
appendTrigger($$$)
{
my ($name,$trigger,$label) = @_;

my $ret .= "</table></td></tr>";

my $link = "cmd=trigger $name $trigger";
my $txt = "<a onClick=\"FW_cmd('$FW_ME$FW_subdir?XHR=1&$link')\">$label</a>";
$ret .= "<td colspan=\"99\"><div style=\"cursor:pointer;color:#888888;text-align:right\">$txt</div></td>";

return ($ret,0);
}</pre>

Ein weiteres Beispiel für 'custom links und trigger' findet sich in {{Link2Forum|Topic=14425|Message=109383|LinkText=diesem Forenbeitrag}}: dort wird damit eine readingsGroup dynamisch umgeschaltet, um nur die eingeschalteten, nur die ausgeschalteten oder alle Lampen anzuzeigen.

=== sub rg ===
Damit beim klicken auf ein Icon oder einen Text in einer readingsGroup etwas passiert ist es möglich dies über das commands Attribut auf ein <code>'trigger ntfy_rg $DEVICE $READING'</code> oder Ähnliches zu mappen.
Anlegen des ntfy_rg notify
<pre>
define ntfy_rg notify ntfy_rg {rg($EVENT)}
</pre>
Folgender Code muss noch in de [[99_myUtils_anlegen|99_myUtils.pm]]
<pre>
sub rg($){
my @input = split(/[§\s]+/,shift);
my $device = $input[0];
my $function = $input[1];

if($function eq "clima"){
my $room = AttrVal($device, 'room', 'undef');
$room =~ s/\D//g;

return(("d_climaControl_".$room));
}
elsif($function eq "device"){
return InternalVal($device,"device","device error");
}
elsif($function eq "controlMode"){
my $controlMode = ReadingsVal($device,"controlMode","controlMode error");

if($controlMode ~~ /manual/)
{fhem("set $device controlMode auto")}
elsif($controlMode ~~ /auto/)
{fhem("set $device controlMode manual")};
}
elsif($function eq "globalBtnLock"){
my $globalBtnLock = ReadingsVal($device,"R-globalBtnLock","globalBtnLock error");

if($globalBtnLock ~~ /off/){
{fhem("set $device regSet globalBtnLock on")}
{fhem ("set $device getConfig")}
}
elsif($globalBtnLock ~~ /on/){
{fhem("set $device regSet globalBtnLock off")}
{fhem ("set $device getConfig")}
};
}
elsif($function eq "state"){
my $state = Value($device);

if($state ~~ /off/){
{fhem("set $device on")}
}
elsif($state ~~ /on/){
{fhem("set $device off")}
};
}
elsif($function eq "setTimeTable"){
my $room = AttrVal($device, 'room', 'undef');
$room =~ s/\D//g;
my $climaControl = ("d_climaControl_".$room);
my $dayTemp = ReadingsVal( $climaControl, "dayTemp" , 21.0 );
my $nightTemp = ReadingsVal( $climaControl, "nightTemp" , 17.0 );
my $workday_period_1_start = ReadingsVal( $climaControl, "workday_period_1_start" , "06:30" );
my $workday_period_1_stop = ReadingsVal( $climaControl, "workday_period_1_stop" , "18:00" );
my $workday_period_2_start = ReadingsVal( $climaControl, "workday_period_2_start" , "24:00" );
my $workday_period_2_stop = ReadingsVal( $climaControl, "workday_period_2_stop" , "24:00" );
my $saturday_period_1_start = ReadingsVal( $climaControl, "saturday_period_1_start" , "06:30" );
my $saturday_period_1_stop = ReadingsVal( $climaControl, "saturday_period_1_stop" , "12:00" );
my $saturday_period_2_start = ReadingsVal( $climaControl, "saturday_period_2_start" , "24:00" );
my $saturday_period_2_stop = ReadingsVal( $climaControl, "saturday_period_2_stop" , "24:00" );
my $sunday_period_1_start = ReadingsVal( $climaControl, "sunday_period_1_start" , "24:00" );
my $sunday_period_1_stop = ReadingsVal( $climaControl, "sunday_period_1_stop" , "24:00" );
my $sunday_period_2_start = ReadingsVal( $climaControl, "sunday_period_2_start" , "24:00" );
my $sunday_period_2_stop = ReadingsVal( $climaControl, "sunday_period_2_stop" , "24:00" );

{fhem("set $device tempListMon prep $workday_period_1_start $nightTemp $workday_period_1_stop $dayTemp $workday_period_2_start $nightTemp $workday_period_2_stop $dayTemp 24:00 $nightTemp")};
{fhem("set $device tempListTue prep $workday_period_1_start $nightTemp $workday_period_1_stop $dayTemp $workday_period_2_start $nightTemp $workday_period_2_stop $dayTemp 24:00 $nightTemp")};
{fhem("set $device tempListWed prep $workday_period_1_start $nightTemp $workday_period_1_stop $dayTemp $workday_period_2_start $nightTemp $workday_period_2_stop $dayTemp 24:00 $nightTemp")};
{fhem("set $device tempListThu prep $workday_period_1_start $nightTemp $workday_period_1_stop $dayTemp $workday_period_2_start $nightTemp $workday_period_2_stop $dayTemp 24:00 $nightTemp")};
{fhem("set $device tempListFri prep $workday_period_1_start $nightTemp $workday_period_1_stop $dayTemp $workday_period_2_start $nightTemp $workday_period_2_stop $dayTemp 24:00 $nightTemp")};
{fhem("set $device tempListSat prep $saturday_period_1_start $nightTemp $saturday_period_1_stop $dayTemp $saturday_period_2_start $nightTemp $saturday_period_2_stop $dayTemp 24:00 $nightTemp")};
{fhem("set $device tempListSun exec $sunday_period_1_start $nightTemp $sunday_period_1_stop $dayTemp $sunday_period_2_start $nightTemp $sunday_period_2_stop $dayTemp 24:00 $nightTemp")};
}
}
</pre>
Hier sind die benötigten CodeBlöcke für [[ReadingsGroup#Heizungswerte.2C_Status.2C_Steuerung_und_Wochenprofil|Heizungswerte, Status, Steuerung und Wochenprofil]] enthalten, aber auch um state zu triggern.
== Sonstiges ==
In der Regel werden die Parameter zu einem reading in den mappings unter <$DEVICE> und dann <$DEVICE>.<$READING> und dann unter <$READING>.<$VALUE> gesucht.

=== Lesbar machen ===
Für die meisten Attribute gilt:

* Wenn es komplexer wird ist es einfacher, den Code in eine eigene Routine in (beispielsweise) [[99 myUtils anlegen|99_myUtils]] auszulagern und diese aufzurufen:
:<code> attr <name> valueStyle {myValueToFormat($READING,$VALUE)}</code>
* code für unterschiedliche readings kann auch im mapping schon aufgeteilt werden:
:<code>attr <name> valueStyle { SuperE5 => '{perl code}', Diesel => '{perl code}' }</code>
* Ifs lassen sich verschachteln und sortieren. So kann die Anzahl der Klammern und Else-Zweige reduziert werden:
<code>if( $READING eq ... ) {
return xxx if( $VALUE < 1 );
return yyy if( $VALUE < 1.5 );
return zzz;
} elsif( $READING eq ... ) {
...
}</code>

Da alles lässt sich natürlich auch kombinieren und so viel lesbarer machen als ein einziger langer Bandwurm.

=== readingsGroup in einer Gruppe ===
Wenn der doppelte Rahmen um eine readingsGroup bei Darstellung in einer Gruppe stört, lässt er sich mit dem passenden style entfernen:
:<code>attr <rgName> style style="border:0px;background:none;box-shadow:none"</code>
Für die readingsGroup ''rgName'' wird der Darstellungsstil verändert.

=== readingsGroup Styling mit CSS ===
Jede readingsGroup lässt sich durch CSS individuell stylen.

==== Allgemeines ====
Damit der eigene CSS Code nach einem [[Update]] der FHEM-Style Dateien vorhanden bleibt, ist es notwenig eine eigene .css Datei (zB ios7ReadingsGroups.css) zu erstellen und ins Verzeichnis ''fhem/www/pgm2/'' zu kopieren. Anschließend muss in der [[FHEMWEB]] Instanz das Attribut ''CssFiles'' auf zB ''pgm2/ios7ReadingsGroups.css'' gesetzt werden.

==== Erweiterte Device Übersicht ====
Diese ReadingsGroup ist an der [[FHEMWEB]] Device-Übersicht angelehnt. Zusätzlich werden weitere Readings, hier Leistung, Betriebszeit Heute und Jahr, ein Link zu Detail-Seite der ReadingsGroup und Links zu den jeweiligen Device-Detail-Seite, dargestellt.

{| class="wikitable"
| [[Datei:RgStylingOhneCss.png|600px|mini|left|Device ReadingsGroup ohne CSS]] [[Datei:RgStylingMitCss.png|600px|mini|left|Device ReadingsGroup mit CSS]]
|}

===== Definition =====
<pre>
define rg_devices readingsGroup <{rgLink($DEVICE,"konfigurieren","Details")}>,<Device>,<Status>,<Leistung>,<Heute>,<Jahr>\
wzDeckenfluter:<%light_floor_lamp>,<{rgLink("wzDeckenfluter","detail","Deckenfluter")}>,state,<>,dauerHeute,dauerJahr\
wzMacMini:<%it_nas>,<{rgLink("wzMacMini","detail","MacMini")}>,state,power,consumption,consumptionYear\
attr rg_devices noheading 1
attr rg_devices nonames 1
attr rg_devices notime 1
attr rg_devices room ReadingsGroup Styling
attr rg_devices style class="block wide rgDevices"
attr rg_devices valueFormat { 'power' => "%.1f W ", consumption => "%.2f kWh", 'consumptionYear' => "%.2f kWh" }
attr rg_devices valueIcon { state => '%devStateIcon' }
</pre>

Damit sich der CSS auf die richtige readingsGroup bezieht, ist es nötigt
das Attribut ''style'' anzupassen.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| style="width:40%" |<code>attr <rgName> style class="block wide rgDevices"</code>
| Die Klassen ''block'' und ''wide'' müssen eingetragen werden. Der Name der Nachfolgenden Klasse, hier ''rgDevices'', ist frei wählbar.
|}
===== Funktion rgLink() =====
Die Funktion rgLink($name,$action,$label) liefert einen Link mit dem Namen $label zurück. Der Code gehört in die [[99 myUtils anlegen|99_myUtils.pm]].
* $name - Name des Device das aufgerufen werden soll
* $action - Aktion die Ausgeführt werden soll.
**''konfigurieren'' erzeugt den kleinen ''Details'' Button links oben der einem zur Detail Seite der ReadingsGroup führt - nützlich wenn das ReadingsGroup-Attribut ''noheading'' gesetzt ist
** ''detail'' erzeugt einen Link zu Device-Detail Seite
* $label - Link-Name
<pre>
sub rgLink($$$){
my ($name,$action,$label) = @_;
my $link = "";
my $fhemLink = "";
my $txt = "";
my $ret = "";
my $divStyle = "";
my $aStyle = "";

# FHEM Variablen einbinden
use vars qw($FW_ME);
use vars qw($FW_subdir);
use vars qw($FW_ss);
use vars qw($FW_tp);

if( $action eq "konfigurieren" ){
$fhemLink = "detail=$name";
$divStyle = "cursor:pointer;font-size:11px;padding-bottom:2px;padding-left:3px;";
}
elsif( $action eq "detail" ){
$fhemLink = "detail=$name";
$divStyle = "cursor:pointer;display:inline;";
}

$link = '<a onclick="location.href=\'' . $FW_ME . $FW_subdir . '?' . $fhemLink . '\'" style="' . $aStyle . '">' . $label . '</a>';
$txt = '<div style="' . $divStyle . '">' . $link . '</div>';
$ret = "$txt";

return $ret;
}
</pre>

{{Randnotiz|RNText=Tipp
Verwende zum Bearbeiten der eigenen .css Dateien entweder den [http://fhem.de/commandref_DE.html#JavaScripts Codemirror Editor] oder einen eigenen Editor mit [http://de.wikipedia.org/wiki/Syntaxhervorhebung Syntax Highlighting] . Das hilft bei der Fehlersuche enorm. }}
===== Styling =====
Die eigene .css Datei erscheint in FHEM unter Edit-Files --> styles und kann direkt im FHEM-Editor oder mit eigenen Editor bearbeitet werden.

ios7ReadingsGroups.css:
<pre>
/* Readings Groups Devices */
table.rgDevices tr td{ text-align: center; }
table.rgDevices tr:first-child td:nth-child(2){ /* 1. Zeile 2. Spalte */ text-align: center; }
table.rgDevices tr td:first-child{ /* 1. Spalte */ width: 45px; text-align: center; }
table.rgDevices tr td:nth-child(2){ /* 2. Spalte */ width: 33%; text-align: left; }
table.rgDevices tr td:nth-child(3){ /* 3. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(4){ /* 4. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 15%; }
</pre>

==== Auf Portrait / Landscape Modus des Smartphone unterscheiden ====
Dieses Beispiel ist an das obige Beispiel [[#Erweiterte_Device_.C3.9Cbersicht|Erweiterte Device Übersicht]] angelehnt.

{| class="wikitable"
| style="width:40%" |[[Datei:RgStylingSmallscreenPortrait.png|300px|mini|center|Device ReadingsGroup im Portrait Modus]]
|[[Datei:RgStylingSmallscreenLandscape.png|550px|mini|center|Device ReadingsGroup im Landscape Modus]]
|}

===== Allgemeines =====
Mit CSS ist man in der Lage auf die aktuelle Bildschirmlage zu reagieren. Alle Anweisungen die in diesen beiden Funktionen zwischen den beiden { } stehen, werden je nach Bildschirmlage aufgerufen
<pre>
/* Portrait Modus */
@media all and (orientation:portrait) { }

/* Landscape Modus */
@media all and (orientation:landscape) { }
</pre>

===== Styling =====
{{Randnotiz|RNText=Info
* ''width: xx%'' ändert die Breite der Spalte
* ''display: none'' blendet die Spalte aus}}
In der FHEMWEB_phone Instanz muss wie [[#Allgemeines|hier]] beschrieben eine neue eigene .css Datei eingetragen werden. In diesem Beispiel ios7smallscreenReadingsGroups.css

ios7smallscreenReadingsGroups.css
<pre>
/* landscape und portrait modus */
table.rgDevices tr td { /* Zuerst alles centern */ text-align: center; }
table.rgDevices tr:first-child td:nth-child(1){ /* 1. Zeile 1. Spalte */ text-align: center; }
table.rgDevices tr td:first-child { /* 1. Spalte */ width: 5%; }
table.rgDevices tr:first-child td:nth-child(2) { /* 1. Zeile 2. Spalte */ text-align: center; }
table.block table tr td table.rgDevices tr td { border-bottom: 1px solid #cbcbcb; }

/* Portrait Modus */
@media all and (orientation:portrait) {
table.rgDevices tr td:nth-child(2){ /* 2. Spalte */ width: 50%; text-align: left; }
table.rgDevices tr td:nth-child(3){ /* 3. Spalte */ width: auto; text-align: right; display: table-cell; }
table.rgDevices tr td:nth-child(4){ /* 4. Spalte */ width: 0; display: none; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 0; display: none; }
table.rgDevices tr td:nth-child(6){ width: 0; display: none; }
table.rgDevices tr td div a svg{ margin-left: 90px; }
}

/* Landscape Modus */
@media all and (orientation:landscape) {
table.rgDevices tr td:nth-child(2){ /* 2. Spalte */ width: 35%; text-align: left; }
table.rgDevices tr td:nth-child(3){ /* 3. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(4){ /* 4. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 15%; }
}
</pre>

==== Plots im Portrait Modus des Smartphones ausblenden ====
{| class="wikitable"
| style="width:40%" |[[Datei:RgStylingSmallscreenPortraitPlot.png|350px|mini|center|Device ReadingsGroup im Portrait Modus]]
|[[Datei:RgStylingSmallscreenLandscapePlot.PNG|550px|mini|center|Plot nur im Landscape]]
|}

Um die Plot und alle Steuerelemente im Portrait Modus auszublenden fügt man in seine eigene smallscreen.css wie [[#Allgemeines|hier beschrieben]] folgendes ein:
<pre>
@media all and (orientation:portrait) {
.SVGplot, .SVGlabel, .Zoom-in, .Zoom-out, .Prev { width: 0; display: none; }
}
</pre>

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

99 myUtils anlegen

2014-12-06T07:37:01Z

Fhainz: nowiki duch pre ersetzt, code einrückungen

Mit wachsender Anzahl von eigenen Helfer-Programmen wird die Speicherung von perl-code in notify unübersichtlich. Es besteht die Möglichkeit, eine eigene Programmdatei zu erzeugen, in der mehrere kleine Programme gesammelt und dann aus diversen notify- oder at-Anweisungen aufgerufen werden.
== Eine neue Programmdatei erzeugen ==
Eine ‚leere‘ Programmdatei sieht folgendermassen aus:

<pre>package main;
use strict;
use warnings;
use POSIX;
sub
myUtils_Initialize($$)
{
my ($hash) = @_;
}
1;</pre>
Legen Sie in Ihrem fhem-Programmverzeichnis (FHEM) eine Datei mit dem Name 99_myUtils.pm an und kopieren Sie den o.g. Inhalt hinein.

Eine einfache Möglichkeit: Wählen Sie in fhem den Menüpunkt 'Edit Files', klicken Sie die Datei '99_Utils.pm' an. Im oberen Bereich gibt es einen button 'Save as' - tragen Sie in dem Textfeld 99_myUtils.pm ein und klicken dann auf den Save as-button. Danach erscheint Ihre Programmdatei ebenfalls unter dem Menüpunkt 'Edit Files'. Ersetzen Sie dann den Inhalt mit dem Programmcode von oben - oder löschen Sie alle Routinen heraus, so dass der code wie oben übrig bleibt :)

Für etwas längere Programme ist ein externer Editor empfohlen, der Sie dabei unterstützt, z.B. Klammernpaare korrekt zu setzen - dies ist der häufigste Fehler! Dabei unterstützt z.B. das kostenlose Notepad++.

Drei Dinge sind für Ihre Programmdatei besonders zu beachten:

# Der Dateiname muss mit 99_ beginnen. Fhem lädt beim Start alle Programmdateien mit dem prefix 99_. Andere Programmdateien werden erst dann geladen, wenn sie durch eine define-Anweisung in fhem.cfg angefordert werden. So wird z.B. 10_FS20.pm erst geladen, wenn beim Einlesen der Datei fhem.cfg das erste define für ein FS20-device abgearbeitet wird. Da Ihre eigene Programmsammlung wahrscheinlich kein neues Gerät mit einem zugehörigen define-Befehl implementiert, würde sie also nie geladen, wenn ihr Name nicht mit 99_ beginnt.
# Damit die neue Datei bei "Edit Files" angezeigt wird, muss sie mit Utils.pm enden. Also zum Beispiel 99_meineUtils.pm
# Der Name der Programmdatei muss mit dem Namen der Initialize-Routine übereinstimmen. Wenn Sie Ihr Programm also 99_Werkzeugkasten.pm nennen, muss die im code dargestellte initialize-Routine sub Werkzeugkasten_Initialize heißen.
# Die Zeile <code> 1; </code> muss immer die letzte Programmzeile sein. Wenn Sie also eigene Routinen in Ihre Programmsammlung einfügen, tragen Sie diese zwischen dem Ende der Initialize-Routine und der abschließenden Zeile <code> 1; </code> ein.
== Eigene Routinen einfügen ==
Als Beispiel dient das Umsetzen von FS20 toggle-Events aus dem Artikel "[[FS20 Toggle Events auf On/Off umsetzen]]".
Das gesamte Programm sieht dann folgendermaßen aus:

<pre>package main;
use strict;
use warnings;
use POSIX;
sub
myUtils_Initialize($$)
{
my ($hash) = @_;
}
##########################################################
# Untoggle
# toggle-Vorgänge in den Status on/off umsetzen
sub Untoggle($) {
my ($obj) = @_;

if( Value($obj) eq "toggle" ){
if( OldValue($obj) eq "off" ) {
fhem( "setstate $obj on" );
}
else {
fhem( "setstate $obj off" );
}
}
else {
fhem( "setstate $obj ".Value($obj) );
}
}
1;</pre>
Der Aufruf erfolgt dann z.B. so:

<pre>#fhem.cfg
define lampe_untoggle notify lampe {Untoggle(„@“)}</pre>
Der Aufruf aus einem notify (oder at) erfolgt als Perl-code, muss also in geschweiften Klammern stehen. Der Aufruf erfolgt durch Angabe des Namens der Routine (Untoggle) unter Angabe der zu übergebenden Parameter (hier "@").
Im Programm wurde die Routine Untoggle mit '''einem''' Parameter definiert ( Untoggle($) , die Anzahl der $-Zeichen bestimmt die Anzahl der zu übergebenden Parameter). Der Wert des übergebenen Parameters wird in der ersten Programmzeile in die Variable $obj übernommen (my ($obj) = @_; ).
Der Aufruf erfolgt mit Untoggle(„@“) . Der Platzhalter @ in fhem steht für den Namen des Geräts. Im o.g. Beispiel erfolgt der Aufruf also eigentlich mit Untoggle(„lampe“). Natürlich können beim Aufruf auch feste Werte ( „lampe1“ ) oder Variablen ( $hour ) übergeben werden.

=== Routinen mit mehreren Parametern ===
In der Definition der Routine geben Sie außerdem an, wieviele Parameter übergeben werden sollen, für 2 Parameter z.B. so:

<pre>define test at *09:00 { wakeup($we, „Schlafzimmerlampe“) }</pre>
Die Deklaration der Routine in Ihrer Programmdatei muss dann so beginnen:

<pre>#Nur am Wochenende eingeschaltet
sub wakeup($$) {
my ($wochenende, $device) = @_;
if ($wochenende) {
fhem( "set $device on" );
}
else {
fhem( "set $device off" );
}
}</pre>
Durch die Anzahl der $-Zeichen in der Routinen-Deklaration wird also die Anzahl der Parameter festgelegt. In der ersten Programmzeile Ihrer Routine übernehmen Sie dann die übergebenen Parameterwerte in lokale Variablen. Wie beim Routinen-Aufruf muss auch hierbei die Anzahl der Parameter mit der Routinen-Deklaration (also Anzahl der $-Zeichen) übereinstimmen.

=== Routinen ohne Parameter ===
Auch Routinen ohne Parameter sind natürlich möglich. Definition und Aufruf sehen dann folgendermassen aus:

<pre>sub parameterlos() {
...
}</pre>
{ parameterlos() }

== Eigene Programmdatei laden ==
Ihre Programmdatei wird nur bei fhem-start geladen - es sei denn Sie verwenden das Kommando reload.
Also bearbeiten Sie Ihr Programm, speichern die Programmdatei, und weisen fhem dann an, die Programmdatei erneut zu laden. Der Befehl dazu, der in das fhem Kommandofeld eingegeben wird, lautet:

reload 99_myUtils.pm
Treten beim Laden (Syntax)fehler auf, werden diese am Bildschirm wie auch im Log angezeigt. Da der Ladevorgang fehlgeschlagen ist, stehen Ihre eigenen Routinen nun nicht zur Verfügung (bzw in der zuletzt erfolgreich geladenen Version). Beheben Sie also alle Fehler, speichern Sie Ihre Programmdatei erneut und führen Sie wieder ein reload aus.

Viel Erfolg!

== Links ==
* [http://notepad-plus-plus.org/ Notepad++] Editor

[[Kategorie:Code Snippets]]

ReadingsGroup

2014-11-16T12:30:19Z

Fhainz: /* ReadingsGroup Styling mit CSS */

{{SEITENTITEL:readingsGroup}}
{{Infobox Modul
|ModPurpose=Einfache zusammenfassende Darstellung von Informationen über mehrere Geräte
|ModType=h
|ModCmdRef=readingsGroup
|ModForumArea=Frontends
|ModTechName=33_readingsGroup.pm
|ModOwner=Andre ([http://forum.fhem.de/index.php?action=profile;u=430 Forum] / [[Benutzer Diskussion:justme|Wiki]])}}

Das Fhem-[[:Kategorie:Hilfsmodul|Hilfsmodul]] [[readingsGroup]] bietet eine einfache Möglichkeit, ''Readings'' (kein Präfix vor dem Reading-Namen), ''Internals'' (Präfix "+" vor dem Namen des internen Wertes) und ''Attributes'' (Präfix "?" vor dem Namen des Attributs) von einem oder mehreren ''Devices'' darzustellen und flexibel zu formatieren.

Die Aktualisierung im Browserfenster geschieht per longpoll und überträgt nur die jeweils geänderten Zellen. Wenn eine readingsGroup in keinem Browserfenster angezeigt wird findet keine longpoll aktualisierung statt.

== Definition ==
Siehe commandref.

== Attribute ==
Weitergehende Erläuterungen zu einzelnen Attributen:

=== noheading ===
[[Datei:ReadingsGroup_noheading.png|mini|rechts|400px|ReadingsGroup: rechts mit "noheading" Attribut, links der anklickbare Titel]]
Das Attribut <code>noheading</code> führt dazu, dass der Alias der ReadingsGroup nicht mehr als Titel angezeigt wird. Das kann wünschenswert sein, wenn die ReadingsGroup auf einer [[Dashboard]]-Seite angezeigt werden soll, hat allerdings den Nachteil, dass die Detail-Ansicht der ReadingsGroup nicht mehr über einen Klick auf den Titel aufgerufen werden kann. Der Einstellungsdialog der ReadingsGroup ist dann nur noch (z. B.) über
* einen "Probably associated with"-Link eines anderen Objekts oder über
* manuelle Modifikation der URL eines anderen Objekts (<code>http:.../fhem?detail=<objektname></code>)
erreichbar.

== Beispiele ==
Bitte beachten: die folgenden Beispiele enthalten keine Maskierungen oder Verdoppelungen für ; und Zeilenende, sondern sind so angegeben, wie sie im [[PGM2|Web Interface]] im Befehls-Eingabefeld oder nach Klick auf DEF eingegeben werden. Beim manuellen Einfügen in eine [[Konfiguration|Konfigurationsdatei]] sind diese Maskierungen oder Verdoppelungen natürlich vorzunehmen.

=== Einfache Auswahl über Reading-Namen ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define battStatus readingsGroup .*:[Bb]attery</code>
| Alle readings mit Namen '''Battery''' oder '''battery''' von allen Devices.
| rowspan=3 | [[Datei:rgBattery.png|thumb]]
|-
| <code>attr battStatus alias FHT Batteriestatus </code>
| Der Alias wird als Zeilentitel verwendet
|-
| <code>attr battStatus mapping %ROOM </code>
| ''Mapping %ROOM'' führt dazu, dass der Raumname als Zeilentitel angezeigt wird.
|}

=== Übersicht HomeMatic Geräte ===

<nowiki>define HM_Components readingsGroup <Gerät>,<Name>,<Model>,<S/N> TYPE=CUL_HM:+NAME,?model,D-serialNr</nowiki>

=== Auswahl über Reading-Namen, Status als Symbol dargestellt ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define rg_battery readingsGroup .*:battery</code>
| Alle readings mit Namen '''battery''' von allen Devices.
| rowspan=4 | [[Datei:rgBattery2.png|thumb]]
|-
| <code>attr rg_battery alias Batteriestatus </code>
| Der Alias wird als Überschrift verwendet
|-
| <code>attr rg_battery valueIcon {'battery.ok' => 'batterie', 'battery.low' => 'batterie@red'}</code>
| Statt der reading Werte "ok" und "low" soll ein Icon angezeigt werden.
|-
|<code>attr rg_battery commands { "battery.low" => "set %DEVICE replaceBatteryForSec 60" }</code>
| Für LaCrosse devices kann man beim Klick auf ein rotes "battery low icon" direkt replaceBatteryForSec setzen.
|}

=== Reading-Werte zuordnen (Icon / Text) ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define rg readingsGroup Contact.Dachboden_gross:sensed.*</code>
| Alle sensedreadings des Contact.Dachboden_gross device.
| rowspan=4 | [[Datei:rgFenster.png|thumb]]
|-
| <code>attr rg mapping { 'sensed.A' => 'links', 'sensed.B' => 'rechts' }</code>
| Die Zuordnung rechts/links
|-
| <code>attr rg valueFormat {($VALUE eq '1')?"fts_window_roof":"fts_window_roof_open_2"}</code>
| Die Zuordnung von reading Wert zu Icon Namen.
|-
| <code>attr rg_battery valueIcon %VALUE </code>
| Statt des reading Werts soll ein Icon angezeigt werden.
|}

=== Formatvorgabe für Ausgabewerte ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define TempHygro readingsGroup TYPE=CUL_WS:temperature,humidity,dewpoint</code>
| Alle readings mit Namen '''temperature''', '''humidity''', '''dewpoint''' von allen Devices des Typs '''CUL_WS'''
| rowspan=4 | [[Datei:rgTemperatur.png|thumb|[[S300TH]]-Werte in einer readingsGroup]]
|-
| <code>attr TempHygro alias Temperatur / rel. Feuchte / Taupunkt</code>
| Der Alias der readingsGroup wird als Überschrift verwendet
|-
| <code>attr TempHygro mapping %ALIAS</code>
| ''Mapping %ALIAS'' führt dazu, dass der Alias des Geräts als Zeilentitel angezeigt wird.
|-
| <code>attr TempHygro valueFormat { temperature => "%.1f&deg;C", humidity => "%.1f %%", dewpoint => "%.1f&deg;C"}</code>
| Formatierung der Ausgabewerte. '''Achtung:''' "%" die in der Ausgabe erscheinen sollen, müssen verdoppelt werden!
|}

=== Ausgabestil (hier rechtsbündig) ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Wetter readingsGroup WetterXXX:<%temp_temperature>,<Temperatur>,temperature WetterXXX:<%weather_humidity>,<Luftfeuchte>,humidity WetterXXX:<%weather_baraometric_pressure>,<Luftdruck>,pressure
</code>
| Die readings mit Namen '''temperature''', '''humidity''' und '''pressure''' vom Device WetterXXX jeweils mit einem Icon und einem Label davor.
| rowspan=3 | [[Datei:rgWetter.png|thumb]]
|-
| <code>attr Wetter valueFormat { temperature => '%1.f &deg;C', humidity => '%1.f %%', pressure => '%i mbar' }</code>
| Die Formatierung der Readingswerte
|-
| <code>attr Wetter valueStyle style="text-align:right"</code>
| Die Readings sollen rechtsbündig dargestellt werden.
|}

=== Internal Value ausgeben ===
Diese Beispiel könnte entfallen (nächstes Beispiel ist sehr ähnlich; es wird lediglich ein weiterer Wert ausgegeben).
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define culRSSI readingsGroup cul_RSSI=.*:+cul_RSSI</code>
| Den RSSI Wert aller Devices (am IODev ''cul'') die einen solchen haben anzeigen.<br> '''Achtung''': "internal values" werden nicht per longpoll aktualisiert, sondern nur beim Seitenaufbau.
| rowspan=1 | [[Datei:rgculRSSI.png|thumb]]
|}

=== Internal Values ausgeben ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define culRSSI readingsGroup cul_RSSI=.*:+cul_RSSI,+cul_TIME</code>
| Den RSSI Wert mit der zugehörigen Zeit aller Devices (am IODev ''cul'') die einen solchen haben anzeigen.<br> '''Achtung''': "internal values" werden nicht per longpoll aktualisiert, sondern nur beim Seitenaufbau.<br>"Internal Values" werden durch das vorangestellte '''+''' (Pluszeichen) identifiziert.
| rowspan=2 | [[Datei:rgculRSSI2.png|thumb]]
|-
|attr culRSSI valueStyle {return undef if($READING =~ m/TIME/); ($VALUE <= -85)?'style="color:red"':($VALUE <= -80)?'style="color:yellow"':undef}
|Schlechte RSSI Werte sollen abhängig von zwei Schwellwerten gelb oder rot eingefärbt werden (auf dem Screenshot nicht zu sehen).
|}

=== Alle Readings eines Gerätes, mit Ausnahme von... ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Systemstatus readingsGroup sysstat</code>
| Alle readings des sysstat Device
| rowspan=4 | [[Datei:rgSysstat.png|thumb]]
|-
| <code>attr Systemstatus nostate 1</code>
| Ohne state
|-
| <code>attr Systemstatus notime 1</code>
| Ohne readings timestamp
|-
| <code>attr Systemstatus mapping {'load' => 'Systemauslastung', 'temperature' => 'Systemtemperatur in &deg;C'}</code>
| Die Zuordnung der reading Namen zu den Zeilentiteln
|}

=== Anzeige auf einem Floorplan ===
{| class="wikitable"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Heizung readingsGroup t(1|2|3):temperature</code>
| Die Temperatur readings der Devices t1, t2 und t3
| rowspan=6 | [[Datei:rgHeizung.png|thumb]]
|-
| <code>attr Heizung mapping {'t1.temperature' => 'Vorlauf', 't2.temperature' => 'R&ücklauf', 't3.temperature' => 'Zirkulation'}</code>
| Die Zuordnung der reading Namen zu den Zeilentiteln
|-
| <code>attr Heizung nameStyle style="text-align:left"</code>
| Zeilentitel linksbündig wegen floorplan
|-
| <code>attr Heizung style style="font-size:20px;color:lightgray"</code>
| Großer Font und Farbe passend für den floorplan
|-
| <code>attr Heizung notime 1</code>
| Ohne readings timestamp
|-
| <code>attr Heizung valueFormat : %.1f &deg;C</code>
| Doppelpunkt zwischen Zeilentitel und Wert, eine Nachkommastelle plus Einheit
|}

=== Schriftgrößen, Farben, Icons ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgVerbrauchPCA301.png|links|mini|400px|Schriftgröße, Farbe, Icons...]]
|-
| style="width:40%" |<code>define Verbrauch readingsGroup TYPE=PCA301:state,power,consumption</code>
| Die readings state, power und consumption aller [[PCA301 Funkschaltsteckdose mit Energieverbrauchsmessung|PCA301]] Devices mit einer Zeile pro Device.
|-
| <code>attr Verbrauch mapping %ROOM %ALIAS</code>
| Der Raumname und der Alias werden als Zeilentitel verwendet
|-
| <code>attr Verbrauch nameStyle style="font-weight:bold"</code>
| Der Zeilentitel soll fett sein
|-
| <code>attr Verbrauch style style="font-size:20px"</code>
| Alles in einem größeren Font
|-
| <code>attr Verbrauch valueFormat {power => "%.1f W", consumption => "%.2f kWh"}</code>
| Die Formatierung für die power und consumption readings: eine Nachkommastelle plus Einheit.
|-
|<code>attr Verbrauch valueIcon { state => '%devStateIcon' }</code>
| Für die Dosen, die schaltbar sind, soll das anklickbare device icon gezeigt werden.
|-
|<code>attr Verbrauch valueStyle {($READING eq "power" && $VALUE > 40)?'style="color:red"':'style="color:green"'}</code>
|Wenn das power reading >40 ist, soll es in rot angezeigt werden, alle anderen Werte und readings in grün
|}

=== Wertabhängige Farbgebung ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:TemperaturenRG.png|600px|mini|links|Wertabhängige Farben]]
[[Datei:TemperaturenRG2.png|600px|mini|links|Andere Werte - andere Farben]]
|-
| style="width:40%" |<code>define wzTemperaturenRG readingsGroup Aussen:,<Temperatur>,temperature,<Luftfeuchte>,humidity Wohnzimmer:,<Temperatur>,temperature,<Luftfeuchte>,humidity Kasten_E_Geraete:,<Temperatur>,temperature,<Luftfeuchte>,humidity</code>
| Die readings temperatur und humidity der Devices Aussen, Wohnzimmer und Kasten_E_Geraete in einer Zeile pro Device.
|-
| <code>attr wzTemperaturenRG group 3. Temperaturen</code>
| Die readingsGroup kommt in eine Gruppe
|-
| <code>attr wzTemperaturenRG noheading 1</code>
| noheading
|-
| <code>attr wzTemperaturenRG nostate 1</code>
| nostate
|-
| <code>attr wzTemperaturenRG notime 1</code>
| notime
|-
| <code>attr wzTemperaturenRG valueFormat {temperature => "%.1f °C", humidity =>"%.1f %%" }</code>
| Die Formatierung für die temperatur und humidity readings: eine Nachkommastelle plus Einheit.
|-
|<code>attr wzTemperaturenRG valueStyle { if($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE > 30) { 'style="color:red"'}elsif($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE > 20) { 'style="color:orange"'}elsif($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE < 5) { 'style="color:blue"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE > 23) { 'style="color:red"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE > 21) { 'style="color:orange"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE < 20) { 'style="color:blue"'}elsif($DEVICE eq "Kasten_E_Geraete" && $READING eq "temperature" && $VALUE > 30) { 'style="color:red"'}elsif($DEVICE eq "Kasten_E_Geraete" && $READING eq "temperature" && $VALUE > 28) { 'style="color:orange"'}elsif($READING eq "humidity" && $VALUE > 65) { 'style="color:red"'}elsif($READING eq "humidity" && $VALUE > 60) { 'style="color:orange"'}else{'style="color:green"'} }</code>
| Diverse Farbkombinationen sind möglich
|}

=== Enigma Receiver ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:ReceiverRG.jpg|600px|mini|links|Wertabhängige Farben]]
[[Datei:ReceiverRGmute.jpg|600px|mini|links|Wertabhängige Farben]]
|-
| style="width:40%" |<code>define wzReceiverRG readingsGroup wzReceiver:,<Aktuell>,eventtitle,<Rest>,eventremaining_hr,<Dauer>,eventduration_hr wzReceiver:<Beschreibung>,eventdescription wzReceiver:,<Nächste>,eventtitle_next,<Start>,eventstart_next_hr,<Dauer>,eventduration_next_hr wzReceiver:,<HDD Kapazität>,hdd1_capacity,<Frei>,wzReceiver:hdd1_free wzReceiver:,<Lautstärke>,volume,<HDD>,hdd1_capacity,<Frei>,hdd1_free</code>
| Mehrere readings des Device wzReceiver in mehreren Zeilen. Wenn der Receiver auf mute ist, wird anstatt der Lautstärke, mute angezeigt. Farbige Anzeige des freien Speicherplatzes
'''Benötigt:''' ENIGMA2 Receiver, 70_ENIGMA2.pm - Siehe: [[Enigma2 Receiver (Dreambox, VUplus etc.) steuern]]
|-
| <code>attr wzReceiverRG group Fernseher Receiver</code>
| Die readingsGroup kommt in eine Gruppe
|-
| <code>attr wzReceiverRG mapping &nbsp;</code>
| mapping wird auf &nbsp; (Leerzeichen) gesetzt, damit der Device Name nicht angezeigt wird
|-
| <code>attr wzReceiverRG noheading 1</code>
| noheading
|-
| <code>attr wzReceiverRG nostate 1</code>
| nostate
|-
| <code>attr wzReceiverRG notime 1</code>
| notime
|-
|-
| <code>attr wzReceiverRG valueColumns { eventdescription => 'colspan="4"' }</code>
| Die Beschreibung soll über 4 Spalten gehen
|-
| <code>attr wzReceiverRG valueFormat { wzReceiverRGvalueFormat($DEVICE,$READING,$VALUE);; }</code>
| Die Formatierung wird in die 99_myUtils.pm ausgelagert. Siehe: [[99 myUtils anlegen]]
|-
|<code>attr wzReceiverRG valueStyle { if($READING eq "hdd1_free" && $VALUE < 200){ 'style="color:red"' }elsif( $READING eq "hdd1_free" && $VALUE < 500 ){ 'style="color:orange"' }elsif( $READING eq "volume" && ReadingsVal($DEVICE, "mute", "") eq "on" ){ 'style="color:red"' }else{ 'style="color:green"' } }</code>
| Diverse Farbkombinationen sind möglich. Wenn der Receiver auf mute ist, wird anstatt der Lautstärke <span style="color: red;">mute</span> angezeigt.
|-
| <code>
sub wzReceiverRGvalueFormat($$$)
{
my ($DEVICE,$READING,$VALUE) = @_;

if($READING eq 'hdd1_capacity') {
return "%.2f MB";
} elsif( $READING eq 'hdd1_free') {
return "%.2f MB";
} elsif( $READING eq 'volume' ) {
if( ReadingsVal($DEVICE, "mute", "") eq "on") {
return "mute";
} else {
return "%i %%";
}
}
}</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]
|}

=== Heizungswerte inklusive Batterie- und Fensterstatus ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgHeizung3.png|thumb|links|500px|Heizungswerte inklusive Batterie- und Fensterstatus]]
|-
| style="width:40%" |<code>define Heizungswerte readingsGroup <%sani_heating>,< >,<Act>,<Soll>,<Ist> TYPE=FHT:actuator,desired-temp,measured-temp,<%18>,<%20>,<%22>,window,battery</code>
| Diverse readings aller Devices des Typs <b>FHT</b>.
|-
| <code>attr Heizungswerte commands { 'Heizungswerte.18' => 'set $DEVICE desired-temp 18', 'Heizungswerte.20' => 'set $DEVICE desired-temp 20', 'Heizungswerte.22' => 'set $DEVICE desired-temp 22' }</code>
| Die Links/Kommandos die hinter den 18, 20 und 22 liegen sollen.
|-
| <code>attr Heizungswerte nameStyle style="color:yellow;font-weight:bold"</code>
| Die Überschriften sollen gelb sein.
|-
| <code>attr Heizungswerte valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red', 'window.closed' => 'fts_window_1w@lightgreen', 'window.open' => 'fts_window_1w_open@red'}</code>
| Für den Batteriestand und den Zustand der Fenster sollen jeweils Icons angezeigt werden.
|}

=== Heizungswerte inklusive Ventilposition ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:Rg_Heizung_Valveposition.png|thumb|links|500px|Heizungswerte inklusive Statusinformationen (MAX!)]]
|-
| style="width:40%" |<code>define Heizungswerte readingsGroup <%sani_heating>,<Ventil>,<Soll>,<Ist>,<MaxV>,<GID>,<Mode>,<Batterie> TYPE=CUL_HM:ValvePosition,desired-temp,measured-temp,R-valveMaxPos,groupid,mode,battery</code>
| Diverse readings aller Devices des Typs <b>MAX</b>.
|-
| <code>attr Heizungswerte mapping %ROOM</code>
| Die Raumnamen werden angezeigt.
|-
| <code>attr Heizungswerte nameStyle style="color:yellow;font-weight:bold"</code>
| Die Überschriften sollen gelb (fett) sein.
|-
| <code>attr Heizungswerte room Heizung</code>
| Die "readingsgroup" wird dem Raum "Heizung" zugeordnet.
|-
| <code>attr Heizungswerte valueFormat {temperature => "%.0f °C", desiredTemperature => "%.0f °C", valveposition =>"%.0f %%",maxValveSetting =>"%.0f %%" }</code>
| Es wird noch die Einheit °C hinter den Temperaturwerten angezeigt.
|-
| <code>attr Heizungswerte valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red'}</code>
| Für den Batteriezustand werden Icons anstatt Klartextwerte genommen!
|-
| <code>attr Heizungswerte valueStyle { if($READING eq "temperature" && $VALUE > 20){ 'style="color:green;;font-weight:bold"' }elsif( $READING eq "temperature" && $VALUE <= 20 ){ 'style="color:blue"' }elsif( $READING eq "temperature" && $VALUE > 23 ){ 'style="color:red"' }else{ 'style="color:gray"' } }</code>
| Die Temperaturwerte werden abhängig vom Wert farbig dargestellt.
|-
| <code>attr Heizungswerte valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red', 'window.closed' => 'fts_window_1w@lightgreen', 'window.open' => 'fts_window_1w_open@red'}</code>
| Für den Batteriestand und den Zustand der Fenster sollen jeweils Icons angezeigt werden.
|}

=== Heizungswerte, Status und Regelmöglichkeit ===
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgHeizung2.png|thumb|500px|links|Anzeige + Regelmöglichkeit]]
|-
| style="width:40%" |<code>define Heizungswerte2 readingsGroup <%sani_heating>,< >,<Act>,<Soll>,<Ist> TYPE=FHT:actuator,desired-temp,measured-temp,<{myUtils_HeizungUpDown($DEVICE,"up")}@desired-temp>,desired-new,<{myUtils_HeizungUpDown($DEVICE,"down")}@desired-temp>,window,battery</code>
| Diverse readings aller Devices des Typs <b>FHT</b>.
|-
| <code>attr Heizungswerte2 nameStyle style="color:yellow;font-weight:bold"</code>
| Die Überschriften sollen gelb sein.
|-
| <code>attr Heizungswerte2 valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red', 'window.closed' => 'fts_window_1w@lightgreen', 'window.open' => 'fts_window_1w_open@red'}</code>
| Für den Batteriestand und den Zustand der Fenster sollen jeweils Icons angezeigt werden.
|-
| <code>attr Heizungswerte2 valueStyle {($VALUE eq "00")?'style="visibility:hidden"':''}</code>
| Nach dem Einstellen den Wert wieder ausblenden.
|-
| <code>
#Heizung regeln in readingsGroup
sub
myUtils_HeizungUpDown($$)
{
my($DEVICE,$CMD) = @_;

my $icon = $CMD;
my $VALUE = ReadingsVal($DEVICE,"desired-new","20" );
$VALUE = ReadingsVal($DEVICE,"desired-temp","20" )
if( !$VALUE || $VALUE == 0 );
my $link;

if( $CMD eq "up" ) {
$icon = "control_arrow_upward";
$VALUE += 1;

if( $VALUE <= 24 ) {
$icon .= "\@red";
$link = "setreading $DEVICE desired-new $VALUE";
}
} elsif( $CMD eq "down" ) {
$icon = "control_arrow_downward";
$VALUE -= 1;

if( $VALUE >= 18 ) {
$icon .= "\@blue";
$link = "setreading $DEVICE desired-new $VALUE";
}
}

my $notify = "notifyHeizungUpDown";
if( !defined($defs{$notify}) ) {
CommandDefine(undef,
"$notify notify .*:desired-new.* "
."{ myUtils_HeizungUpDownNotify(\$NAME,\$EVTPART1); }" );
}

my $ret = "%$icon";
$ret .= "%$link" if( $link );

return $ret;
}
sub
myUtils_HeizungUpDownNotify($$)
{
my($DEVICE,$VALUE) = @_;

return if( $VALUE == 0 );

my $at = "triggerHeizungUpDown_$DEVICE";
CommandDelete(undef, $at) if( defined($defs{$at}) );
CommandDefine(undef,
"$at at +00:00:03 "
."{my \$v = ReadingsVal(\"$DEVICE\",\"desired-new\",undef);"
."fhem(\"set $DEVICE desired-temp \$v\") if( \$v );"
."fhem(\"setreading $DEVICE desired-new 00\");}" );

return undef;
}
</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]: Hiermit werden die Icons zum Ändern der gewünschten Temperatur dargestellt und im Bereich >=18 und <= 24 Grad anklickbar gemacht. Zwischen den Pfeilen wird der gerade eingestellte Wert angezeigt. Wenn dieser drei Sekunden nicht mehr geändert wurde wird die desired-temp auf diesen Wert gesetzt und die Anzeige zwischen den Pfeilen ausgeblendet.
|}

=== Noch ein Heizungsbeispiel ===
noch zu übernehmen: http://forum.fhem.de/index.php/topic,26479.msg195482.html#msg195482

=== Readings aus zusätzlichen Devices ===
Im folgenden Beispiel wird gezeigt wie sich Readings zusätzlicher Devices zu einer Zeile mit mehreren Readings hinzufügen lassen. Diese zusätzlichen Devices können z.b. die unterschiedlichen Channel eines HomeMatic Gerätes sein. Im folgenden Beispiel wird der Name des zugehörigen Geräts dynamisch bestimmt.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rgHeizung4.png|thumb|500px|links|Anzeige + Regelmöglichkeit]]
|-
| style="width:40%" |<code>define myTemp readingsGroup <Raum>,<Tist>,<Tsoll>,<Mode>,<Tnight>,<Tday>,<Hum>,<BatTC>,<Vist>,<Vsoll>,<Verr>,<BatVD> Thermostat.(WZ|OZ|AZ|Bad|Kueche|SZ|GZ|Bad.OG):measured-temp,desired-temp,controlMode,night-temp,day-temp,humidity,battery,ValvePosition@{valveOfDevice($DEVICE)},ValveDesired@{valveOfDevice($DEVICE)},R-valveErrorPos@{valveOfDevice($DEVICE)},battery@{valveOfDevice($DEVICE)} Broetje:ToutIst </code>
| Diverse Readings aller Thermostat Devices und des jeweils zugehörigen Ventilantriebs.
|-
| <code>attr myTemp mapping { 'Broetje' => 'Garten','Thermostat.AZ' => 'EG Arbeitszimmer','Thermostat.SZ' => 'OG Schlafzimmer','Thermostat.WZ'=>'EG Wohnzimmer','Thermostat.Kueche' => 'EG Küche','Thermostat.GZ' => 'OG Gästezimmer','Thermostat.Bad' => 'EG Bad','Thermostat.Bad.OG' => 'OG Bad','Thermostat.OZ' => 'EG Kaminzimmer','desired-temp' => <nowiki>''</nowiki> }</code>
| Die Benennung der Zeilentitel (Das ist je nach Konfiguration auch über $ALIAS und/oder $ROOM lösbar).
|-
| <code>attr myTemp commands { 'desired-temp' => 'desired-temp:' }</code>
| desired-temp soll per dropDown einstellbar sein.
|-
| <code>attr myTemp nameStyle style="color:yellow"</code>
| Die Überschriften sollen gelb sein.
|-
| <code>attr myTemp valueIcon {'battery.ok' => 'batterie@lightgreen', 'battery.low' => 'batterie@red'}</code>
| Für den Batteriestand sollen jeweils Icons angezeigt werden.
|-
| <code>attr myTemp valueFormat { 'measured-temp' => "%0.1f &deg;C",'ToutIst' => "%.1f &deg;C",'night-temp' => "%.1f &deg;C",'day-temp' => "%.1f &deg;C",'humidity' => "%.0f
%%",'ValvePosition' => "%.0f %%",'ValveDesired' => "%.0f %%",'R-valveErrorPos' => "%.0f %%" }</code>
| Die Formatierung der Werte.
|-
| <code>
#namen des ventil device aus thermostat device ableiten
sub valveOfDevice ($) {
my ($DEVICE) = @_;

if ($DEVICE =~ m/AZ/) {
return "Ventil.".substr($DEVICE,11).".Nord";
} else {
return "Ventil.".substr($DEVICE,11);
}
}</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]: Hier wird aus dem Namen des Thermostaten der Name des zugehörigen Ventilantriebs abgeleitet.
|}
Da im {...} Teil des <reading>@<device> Arguments keine Leerzeichen oder Kommas vorkommen dürfen ist er in der Regel das Einfachste die Funktionalität wie in diesem Beispiel in eine eigene Routine auszulagern. Mit ein paar 'Tricks' lässt es sich aber manchmal auch ohne Leerzeichen oder Kommas lösen und dann direkt in die Definition schreiben:<code>...,ValvePosition@{$DEVICE=~s/Thermostat/Ventil/;$DEVICE;},...</code>

=== Dynamische Inhalte ===
[[Datei:rgDynamic-1.png|mini|450px|readingsGroup mit umschaltbarem Inhalt 1]]
[[Datei:rgDynamic-2.png|mini|450px|readingsGroup mit umschaltbarem Inhalt 2]]
Es ist möglich, den in einer readingsGroup dargestellten Inhalt dynamisch von zusätzlichen Bedingungen abhängig zu machen. Im folgenden Beispiel lässt sich
einstellen, dass nur die Devices angezeigt werden, die einen bestimmten Zustand (hier: on/off, open/tilted/closed) haben. Hier wird zum Umschalten ein dummy, der direkt über der readingsGroup dargestellt wird, verwendet. Über das links und/oder commands lässt sich auch eine Darstellung erzeugen, bei der das Umschalten direkt innerhalb der readingsGroup möglich ist.

<pre>
define LXrg dummy
attr LXrg group -
attr LXrg setList mode1:on,off mode2:open,closed,tilted
attr LXrg stateFormat 1=mode1 2=mode2
attr LXrg webCmd mode1:mode2

define rg readingsGroup Window.*:state Light.*:state
attr rg group -
attr rg valueFormat { return $VALUE if ( $VALUE eq ReadingsVal("LXrg","mode1","") || $VALUE eq ReadingsVal("LXrg","mode2","") );; return undef;;}

define Watch_LX notify LX.*:.* {my $value = ReadingsVal($NAME,'state','');;;;fhem("setreading $NAME $value")}
</pre>

=== Enable/Disable Button am Beispiel eines WeekdayTimer ===
Dieses Beispiel zeigt die Anwendung einer readingsGroup, um im Frontend einen Enable/Disable Button für ein Objekt darzustellen. Für den WeekdayTimer gibt es hier spezielle Erweiterungen (set Routinen, um das disable Attribut zu setzen, Reading "disabled"). Es gibt aber auch eine allgemeinere Variante (siehe [http://forum.fhem.de/index.php/topic,23655.msg169141.html#msg169141 diesen Forumsbeitrag]) für alle Objekte, die das FHEM Attribut "disable" unterstützen.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| colspan=2 | [[Datei:rg_scheduling.png|thumb|500px|links|Enable/Disable Button]]
|-
| style="width:40%" |<code>define rg_Timer_Wasser readingsGroup timer_Wasser_..:disabled,+DEF,<{rg_timer_Wasser_show_conditional($DEVICE,"nextUpdate")}@disabled>,<{rg_timer_Wasser_show_conditional($DEVICE,"nextValue")}@disabled></code>
| Definition der angezeigten Readings. Das Reading disabled wird mit den u.a. Attributen zum Button, +DEF zeigt die Definition, d.h. die Schaltzeiten, des Timers an. Die Readings nextUpdate und nextValue sollen nur angezeigt werden, falls der Timer aktiv ist. Hierfür sorgt eine Routine <code>rg_timer_Wasser_show_conditional</code>, die in der 99_myUtils.pm definiert wird. Das abschließende @disabled sorgt dafür, dass der LongPoll Mechanismus die Anzeige sofort ändert, wenn der Button betätigt wird.
|-
| <code>attr rg_Timer_Wasser valueFormat { if ( $READING =~ m/.*DEF/ ) { my @text = split(" ", $VALUE); shift @text; return join(" ", @text) }}</code>
| Der Name des Timers wird aus dem interal Reading "+DEF" vorne abgeschnitten. Damit werden nur die definierten Schaltpunkte angezeigt.
|-
| <code>attr rg_Timer_Wasser valueIcon { 'disabled.0' => 'Restart', 'disabled.1' => 'Shutdown' }</code>
| Die beiden Zustände für den Button werden durch zwei Standard-Icons angezeigt.
|-
| <code>attr rg_Timer_Wasser commands { 'disabled.0' => 'set $DEVICE disable', 'disabled.1' => 'set $DEVICE enable' }</code>
| Toggle-Funktion für den Button. Wenn der Timer aktiv ("disabled.0") sorgt ein Klick auf den Button, dass der Timer deaktiviert wird ("set $DEVICE disable").
|-
|<code>
sub rg_timer_Wasser_show_conditional($$)
{
my ($DEVICE,$READING) = @_;
return ( ReadingsVal($DEVICE, "disabled", "1") eq "0" )?
ReadingsVal($DEVICE, $READING, "reading_undef") : "disabled";
}</code>
| Dieser Teil kommt in die [[99_myUtils_anlegen|99_myUtils.pm]]: Hiermit wird das übergebene Reading des Timers nur angezeigt, wenn der Timer aktiv ist. Andernfalls wird der String "disabled" stattdessen angezeigt.
|}

== Links und Trigger ==
[[Datei:rgPCA-detail.png|mini|400px|readingsGroup mit Link]]
Das PCA301 Beispiel oben lässt sich mit einem ans Ende des define angehängten
:<code><{appendTrigger($DEVICE,"clear","Alle löschen")}></code>
und der folgenden appendTrigger Definition in 99_myUtils.pm um einen Link erweitern, der ein Event auslöst, an das z.B. ein notify gehängt werden kann, um die Verbrauchszähler der PCA301 Dosen zurückzusetzen.
:<code>define clearVerbrauch notify Verbrauch:clear set TYPE=PCA301 clear</code>

<pre>use vars qw($FW_ME);
use vars qw($FW_subdir);
sub
appendTrigger($$$)
{
my ($name,$trigger,$label) = @_;

my $ret .= "</table></td></tr>";

my $link = "cmd=trigger $name $trigger";
my $txt = "<a onClick=\"FW_cmd('$FW_ME$FW_subdir?XHR=1&$link')\">$label</a>";
$ret .= "<td colspan=\"99\"><div style=\"cursor:pointer;color:#888888;text-align:right\">$txt</div></td>";

return ($ret,0);
}</pre>

Ein weiteres Beispiel für 'custom links und trigger' findet sich in {{Link2Forum|Topic=14425|Message=109383|LinkText=diesem Forenbeitrag}}: dort wird damit eine readingsGroup dynamisch umgeschaltet, um nur die eingeschalteten, nur die ausgeschalteten oder alle Lampen anzuzeigen.

== Sonstiges ==
In der Regel werden die Parameter zu einem reading in den mappings unter <$DEVICE> und dann <$DEVICE>.<$READING> und dann unter <$READING>.<$VALUE> gesucht.

=== Lesbar machen ===
Für die meisten Attribute gilt:

* Wenn es komplexer wird ist es einfacher, den Code in eine eigene Routine in (beispielsweise) [[99 myUtils anlegen|99_myUtils]] auszulagern und diese aufzurufen:
:<code> attr <name> valueStyle {myValueToFormat($READING,$VALUE)}</code>
* code für unterschiedliche readings kann auch im mapping schon aufgeteilt werden:
:<code>attr <name> valueStyle { SuperE5 => '{perl code}', Diesel => '{perl code}' }</code>
* Ifs lassen sich verschachteln und sortieren. So kann die Anzahl der Klammern und Else-Zweige reduziert werden:
<code>if( $READING eq ... ) {
return xxx if( $VALUE < 1 );
return yyy if( $VALUE < 1.5 );
return zzz;
} elsif( $READING eq ... ) {
...
}</code>

Da alles lässt sich natürlich auch kombinieren und so viel lesbarer machen als ein einziger langer Bandwurm.

=== readingsGroup in einer Gruppe ===
Wenn der doppelte Rahmen um eine readingsGroup bei Darstellung in einer Gruppe stört, lässt er sich mit dem passenden style entfernen:
:<code>attr <rgName> style style="border:0px;background:none;box-shadow:none"</code>
Für die readingsGroup ''rgName'' wird der Darstellungsstil verändert.

=== readingsGroup Styling mit CSS ===
Jede readingsGroup lässt sich durch CSS individuell stylen.

==== Allgemeines ====
Damit der eigene CSS Code nach einem [[Update]] der FHEM-Style Dateien vorhanden bleibt, ist es notwenig eine eigene .css Datei (zB ios7ReadingsGroups.css) zu erstellen und ins Verzeichnis ''fhem/www/pgm2/'' zu kopieren. Anschließend muss in der [[FHEMWEB]] Instanz das Attribut ''CssFiles'' auf zB ''pgm2/ios7ReadingsGroups.css'' gesetzt werden.

==== Erweiterte Device Übersicht ====
Diese ReadingsGroup ist an der [[FHEMWEB]] Device-Übersicht angelehnt. Zusätzlich werden weitere Readings, hier Leistung, Betriebszeit Heute und Jahr, ein Link zu Detail-Seite der ReadingsGroup und Links zu den jeweiligen Device-Detail-Seite, dargestellt.

{| class="wikitable"
| [[Datei:RgStylingOhneCss.png|600px|mini|left|Device ReadingsGroup ohne CSS]] [[Datei:RgStylingMitCss.png|600px|mini|left|Device ReadingsGroup mit CSS]]
|}

===== Definition =====
<pre>
define rg_devices readingsGroup <{rgLink($DEVICE,"konfigurieren","Details")}>,<Device>,<Status>,<Leistung>,<Heute>,<Jahr>\
wzDeckenfluter:<%light_floor_lamp>,<{rgLink("wzDeckenfluter","detail","Deckenfluter")}>,state,<>,dauerHeute,dauerJahr\
wzMacMini:<%it_nas>,<{rgLink("wzMacMini","detail","MacMini")}>,state,power,consumption,consumptionYear\
attr rg_devices noheading 1
attr rg_devices nonames 1
attr rg_devices notime 1
attr rg_devices room ReadingsGroup Styling
attr rg_devices style class="block wide rgDevices"
attr rg_devices valueFormat { 'power' => "%.1f W ", consumption => "%.2f kWh", 'consumptionYear' => "%.2f kWh" }
attr rg_devices valueIcon { state => '%devStateIcon' }
</pre>

Damit sich der CSS auf die richtige readingsGroup bezieht, ist es nötigt
das Attribut ''style'' anzupassen.
{| class="wikitable"
! Definition !! Erläuterungen
|-
| style="width:40%" |<code>attr <rgName> style class="block wide rgDevices"</code>
| Die Klassen ''block'' und ''wide'' müssen eingetragen werden. Der Name der Nachfolgenden Klasse, hier ''rgDevices'', ist frei wählbar.
|}
===== Funktion rgLink() =====
Die Funktion rgLink($name,$action,$label) liefert einen Link mit dem Namen $label zurück. Der Code gehört in die [[99 myUtils anlegen|99_myUtils.pm]].
* $name - Name des Device das aufgerufen werden soll
* $action - Aktion die Ausgeführt werden soll.
**''konfigurieren'' erzeugt den kleinen ''Details'' Button links oben der einem zur Detail Seite der ReadingsGroup führt - nützlich wenn das ReadingsGroup-Attribut ''noheading'' gesetzt ist
** ''detail'' erzeugt einen Link zu Device-Detail Seite
* $label - Link-Name
<pre>
sub rgLink($$$){
my ($name,$action,$label) = @_;
my $link = "";
my $fhemLink = "";
my $txt = "";
my $ret = "";
my $divStyle = "";
my $aStyle = "";

# FHEM Variablen einbinden
use vars qw($FW_ME);
use vars qw($FW_subdir);
use vars qw($FW_ss);
use vars qw($FW_tp);

if( $action eq "konfigurieren" ){
$fhemLink = "detail=$name";
$divStyle = "cursor:pointer;font-size:11px;padding-bottom:2px;padding-left:3px;";
}
elsif( $action eq "detail" ){
$fhemLink = "detail=$name";
$divStyle = "cursor:pointer;display:inline;";
}

$link = '<a onclick="location.href=\'' . $FW_ME . $FW_subdir . '?' . $fhemLink . '\'" style="' . $aStyle . '">' . $label . '</a>';
$txt = '<div style="' . $divStyle . '">' . $link . '</div>';
$ret = "$txt";

return $ret;
}
</pre>

{{Randnotiz|RNText=Tipp
Verwende zum Bearbeiten der eigenen .css Dateien entweder den [http://fhem.de/commandref_DE.html#JavaScripts Codemirror Editor] oder einen eigenen Editor mit [http://de.wikipedia.org/wiki/Syntaxhervorhebung Syntax Highlighting] . Das hilft bei der Fehlersuche enorm. }}
===== Styling =====
Die eigene .css Datei erscheint in FHEM unter Edit-Files --> styles und kann direkt im FHEM-Editor oder mit eigenen Editor bearbeitet werden.

ios7ReadingsGroups.css:
<pre>
/* Readings Groups Devices */
table.rgDevices tr td{ text-align: center; }
table.rgDevices tr:first-child td:nth-child(2){ /* 1. Zeile 2. Spalte */ text-align: center; }
table.rgDevices tr td:first-child{ /* 1. Spalte */ width: 45px; text-align: center; }
table.rgDevices tr td:nth-child(2){ /* 2. Spalte */ width: 33%; text-align: left; }
table.rgDevices tr td:nth-child(3){ /* 3. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(4){ /* 4. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 15%; }
</pre>

==== Auf Portrait / Landscape Modus des Smartphone unterscheiden ====
Dieses Beispiel ist an das obige Beispiel [[#Erweiterte_Device_.C3.9Cbersicht|Erweiterte Device Übersicht]] angelehnt.

{| class="wikitable"
| style="width:40%" |[[Datei:RgStylingSmallscreenPortrait.png|300px|mini|center|Device ReadingsGroup im Portrait Modus]]
|[[Datei:RgStylingSmallscreenLandscape.png|550px|mini|center|Device ReadingsGroup im Landscape Modus]]
|}

===== Allgemeines =====
Mit CSS ist man in der Lage auf die aktuelle Bildschirmlage zu reagieren. Alle Anweisungen die in diesen beiden Funktionen zwischen den beiden { } stehen, werden je nach Bildschirmlage aufgerufen
<pre>
/* Portrait Modus */
@media all and (orientation:portrait) { }

/* Landscape Modus */
@media all and (orientation:landscape) { }
</pre>

===== Styling =====
{{Randnotiz|RNText=Info
* ''width: xx%'' ändert die Breite der Spalte
* ''display: none'' blendet die Spalte aus}}
In der FHEMWEB_phone Instanz muss wie [[#Allgemeines|hier]] beschrieben eine neue eigene .css Datei eingetragen werden. In diesem Beispiel ios7smallscreenReadingsGroups.css

ios7smallscreenReadingsGroups.css
<pre>
/* landscape und portrait modus */
table.rgDevices tr td { /* Zuerst alles centern */ text-align: center; }
table.rgDevices tr:first-child td:nth-child(1){ /* 1. Zeile 1. Spalte */ text-align: center; }
table.rgDevices tr td:first-child { /* 1. Spalte */ width: 5%; }
table.rgDevices tr:first-child td:nth-child(2) { /* 1. Zeile 2. Spalte */ text-align: center; }
table.block table tr td table.rgDevices tr td { border-bottom: 1px solid #cbcbcb; }

/* Portrait Modus */
@media all and (orientation:portrait) {
table.rgDevices tr td:nth-child(2){ /* 2. Spalte */ width: 50%; text-align: left; }
table.rgDevices tr td:nth-child(3){ /* 3. Spalte */ width: auto; text-align: right; }
table.rgDevices tr td:nth-child(4){ /* 4. Spalte */ width: 0; display: none; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 0; display: none; }
table.rgDevices tr td:nth-child(6){ width: 0; display: none; }
table.rgDevices tr td div a svg{ margin-left: 90px; }
}

/* Landscape Modus */
@media all and (orientation:landscape) {
table.rgDevices tr td:nth-child(2){ /* 2. Spalte */ width: 35%; text-align: left; }
table.rgDevices tr td:nth-child(3){ /* 3. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(4){ /* 4. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 15%; }
table.rgDevices tr td:nth-child(5){ /* 5. Spalte */ width: 15%; }
}
</pre>

==== Plots im Portrait Modus des Smartphones ausblenden ====
{| class="wikitable"
| style="width:40%" |[[Datei:RgStylingSmallscreenPortraitPlot.png|350px|mini|center|Device ReadingsGroup im Portrait Modus]]
|[[Datei:RgStylingSmallscreenLandscapePlot.PNG|550px|mini|center|Plot nur im Landscape]]
|}

Um die Plot und alle Steuerelemente im Portrait Modus auszublenden fügt man in seine eigene smallscreen.css wie [[#Allgemeines|hier beschrieben]] folgendes ein:
<pre>
@media all and (orientation:portrait) {
.SVGplot, .SVGlabel, .Zoom-in, .Zoom-out, .Prev { width: 0; display: none; }
}
</pre>

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

Datei:RgStylingSmallscreenPortraitPlot.png

2014-11-16T12:10:38Z

Fhainz: Fhainz lud eine neue Version von „Datei:RgStylingSmallscreenPortraitPlot.png“ hoch

ReadingsGroups Styling - Portrait Plot

Datei:RgStylingSmallscreenPortraitPlot.png

2014-11-16T12:08:47Z

Fhainz: ReadingsGroups Styling - Portrait Plot

ReadingsGroups Styling - Portrait Plot

Datei:RgStylingSmallscreenLandscapePlot.PNG

2014-11-16T12:03:37Z

Fhainz: ReadingsGroups Styling - Landscape Plot

ReadingsGroups Styling - Landscape Plot

Datei:RgStylingSmallscreenLandscape.png

2014-11-16T11:31:37Z

Fhainz: Fhainz lud eine neue Version von „Datei:RgStylingSmallscreenLandscape.png“ hoch

ReadingsGroup Styling - Smallscreen Landscape Modus

Datei:RgStylingSmallscreenPortrait.png

2014-11-16T11:31:20Z

Fhainz: Fhainz lud eine neue Version von „Datei:RgStylingSmallscreenPortrait.png“ hoch

ReadingsGroup Styling - Smallscreen Portrait Modus

Datei:RgStylingSmallscreenLandscape.png

2014-11-16T11:25:36Z

Fhainz: ReadingsGroup Styling - Smallscreen Landscape Modus

ReadingsGroup Styling - Smallscreen Landscape Modus

Datei:RgStylingSmallscreenPortrait.png

2014-11-16T11:25:04Z

Fhainz: ReadingsGroup Styling - Smallscreen Portrait Modus

ReadingsGroup Styling - Smallscreen Portrait Modus

Datei:RgStylingMitCss.png

2014-11-16T09:00:17Z

Fhainz: ReadingsGroup Styling mit CSS

ReadingsGroup Styling mit CSS

Datei:RgStylingOhneCss.png

2014-11-16T08:42:25Z

Fhainz: ReadingsGroup ohne CSS

ReadingsGroup ohne CSS

Benutzer:Fhainz

2014-11-09T14:04:56Z

Fhainz: Die Seite wurde geleert.

Datei:TemperaturenRG2.png

2013-12-22T18:10:24Z

Fhainz:

ReadingsGroup

2013-12-22T11:38:34Z

Fhainz: /* Beispiele */

{{SEITENTITEL:readingsGroup}}
Das Fhem-[[:Kategorie:Hilfsmodul|Hilfsmodul]] '''readingsGroup[http://fhem.de/commandref.html#readingsGroup ]''' bietet eine einfache Möglichkeit, ''readings'' und ''internal values'' von einem oder mehreren ''Devices'' darzustellen und flexibel zu formatieren.

Hier soll eine Sammlung von Beispielen zur Verwendung der ''readingsGroup'' mitsamt der zugehörigen Screenshots entstehen.

== Beispiele ==
Achtung: Die Beispielen enthalten keine Maskierungen oder Verdoppelungen für ; und Zeilenende sondern sind so angegeben wie sie in Fhemweb in der command box oder nach Klick auf DEF eingegeben werden. Beim manuellen Einfügen in ein config file sind diese Maskierungen oder Verdoppelungen natürlich vorzunehmen.
{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define battStatus readingsGroup .*:[Bb]attery</code>
| Alle readings mit Namen '''Battery''' oder '''battery''' von allen Devices.
| rowspan=3 | [[Datei:rgBattery.png|thumb]]
|-
| <code>attr battStatus alias FHT Batteriestatus </code>
| Der Alias wird als Überschrift verwendet
|-
| <code>attr battStatus mapping %ROOM </code>
| ''Mapping %ROOM'' führt dazu, dass der Raumname als Zeilentitel angezeigt wird.
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define rg_battery readingsGroup .*:[Bb]attery</code>
| Alle readings mit Namen '''Battery''' oder '''battery''' von allen Devices.
| rowspan=4 | [[Datei:rgBattery2.png|thumb]]
|-
| <code>attr rg_battery alias Batteriestatus </code>
| Der Alias wird als Überschrift verwendet
|-
| <code>attr rg_battery valueFormat {($VALUE eq 'ok')?"batterie":"batterie\@red"}</code>
| Ein reading Wert ok wird auf das Icon 'batterie' gemapped, jeder andere Wert auf das gleiche icon in rot.
|-
| <code>attr rg_battery valueIcon %VALUE </code>
| Statt des reading Werts soll ein Icon angezeigt werden.
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define rg readingsGroup Contact.Dachboden_gross:sensed.*</code>
| Alle sensedreadings des Contact.Dachboden_gross device.
| rowspan=4 | [[Datei:rgFenster.png|thumb]]
|-
| <code>attr rg mapping { 'sensed.A' => 'links', 'sensed.B' => 'rechts' }</code>
| Die Zuordnung rechts/links
|-
| <code>attr rg valueFormat {($VALUE eq '1')?"fts_window_roof":"fts_window_roof_open_2"}</code>
| Die Zuordnung von reading Wert zu Icon Namen.
|-
| <code>attr rg_battery valueIcon %VALUE </code>
| Statt des reading Werts soll ein Icon angezeigt werden.
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define TempHygro readingsGroup TYPE=CUL_WS:temperature,humidity,dewpoint</code>
| Alle readings mit Namen '''temperature''', '''humidity''', '''dewpoint''' von allen Devices des Typs '''CUL_WS'''
| rowspan=4 | [[Datei:rgTemperatur.png|thumb|[[S300TH]]-Werte in einer readingsGroup]]
|-
| <code>attr TempHygro alias Temperatur / rel. Feuchte / Taupunkt</code>
| Der Alias der readingGroup wird als Überschrift verwendet
|-
| <code>attr TempHygro mapping %ALIAS</code>
| ''Mapping %ALIAS'' führt dazu, dass der Alias des Geräts als Zeilentitel angezeigt wird.
|-
| <code>attr TempHygro valueFormat { temperature => "%.1f&deg;C", humidity => "%.1f %%", dewpoint => "%.1f&deg;C"}</code>
| Formatierung der Ausgabewerte. '''Achtung:''' "%" die in der Ausgabe erscheinen sollen, müssen verdoppelt werden!
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define culRSSI readingsGroup cul_RSSI=.*:+cul_RSSI</code>
| Den cul_RSSI Wert mit der zugehörigen zeit aller Devices die einen solchen haben. <br> '''Achtung''': internal values werden nicht per longpoll aktualisiert sondern nur beim Seitenaufbau.
| rowspan=1 | [[Datei:rgculRSSI.png|thumb]]
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define culRSSI readingsGroup cul_RSSI=.*:+cul_RSSI,+cul_TIME</code>
| Den cul_RSSI Wert aller Devices die einen solchen haben. <br> '''Achtung''': internal values werden nicht per longpoll aktualisiert sondern nur beim Seitenaufbau.
| rowspan=1 | [[Datei:rgculRSSI2.png|thumb]]
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Systemstatus readingsGroup sysstat</code>
| Alle readings des sysstat Device
| rowspan=4 | [[Datei:rgSysstat.png|thumb]]
|-
| <code>attr Systemstatus nostate 1</code>
| Ohne state
|-
| <code>attr Systemstatus notime 1</code>
| Ohne readings timestamp
|-
| <code>attr Systemstatus mapping {'load' => 'Systemauslastung', 'temperature' => 'Systemtemperatur in &deg;C'}</code>
| Die Zuordnung der reading Namen zu den Zeilentiteln
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Heizung readingsGroup t(1|2|3):temperature</code>
| Die Temperatur readings der Devices t1, t2 und t3
| rowspan=6 | [[Datei:rgHeizung.png|thumb]]
|-
| <code>attr Heizung mapping {'t1.temperature' => 'Vorlauf', 't2.temperature' => 'R&ücklauf', 't3.temperature' => 'Zirkulation'}</code>
| Die Zuordnung der reading Namen zu den Zeilentiteln
|-
| <code>attr Heizung nameStyle style="text-align:left"</code>
| Zeilentitel linksbündig wegen floorplan
|-
| <code>attr Heizung style style="font-size:20px;color:lightgray"</code>
| Großer Font und Farbe passend für den floorplan
|-
| <code>attr Heizung notime 1</code>
| Ohne readings timestamp
|-
| <code>attr Heizung valueFormat : %.1f &deg;C</code>
| Doppelpunkt zwischen Zeilentitel und wert, eine Nachkommastelle plus Einheit
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define Verbrauch readingsGroup TYPE=PCA301:state,power,consumption</code>
| Die readings state, power und consumption aller [[PCA301 Funkschaltsteckdose mit Energieverbrauchsmessung|PCA301]] Devices mit einer Zeile pro Device.
| rowspan=7 | [[Datei:rgVerbrauchPCA301.png|thumb]]
|-
| <code>attr Verbrauch mapping %ROOM %ALIAS</code>
| Der Raumname und der Alias werden als Zeilentitel verwendet
|-
| <code>attr Verbrauch nameStyle style="font-weight:bold"</code>
| Der Zeilentitel soll fett sein
|-
| <code>attr Verbrauch style style="font-size:20px"</code>
| Alles in einem größeren Font
|-
| <code>attr Verbrauch valueFormat {power => "%.1f W", consumption => "%.2f kWh"}</code>
| Die Formatierung für die power und consumption readings: eine Nachkommastelle plus Einheit.
|-
|<code>attr Verbrauch valueIcon { state => '%devStateIcon' }</code>
| Für die Dosen, die schaltbar sind, soll das anklickbare device icon gezeigt werden.
|-
|<code>attr Verbrauch valueStyle {($READING eq "power" && $VALUE > 40)?'style="color:red"':'style="color:green"'}</code>
|Wenn das power reading >40 ist, soll es in rot angezeigt werden, alle anderen Werte und readings in grün
|}

{| class="wikitable zebra hintergrundfarbe5"
! Definition !! Erläuterungen !! Aussehen
|-
| style="width:40%" |<code>define wzTemperaturenRG readingsGroup Aussen:,<Temperatur>,temperature,<Luftfeuchte>,humidity Wohnzimmer:,<Temperatur>,temperature,<Luftfeuchte>,humidity Kasten_E_Geraete:,<Temperatur>,temperature,<Luftfeuchte>,humidity</code>
| Die readings temperatur und humidity der Devices Aussen, Wohnzimmer und Kasten_E_Geraete in einer Zeile pro Device.
| rowspan=7 | [[Datei:TemperaturenRG.png|thumb]]
|-
| <code>attr wzTemperaturenRG group 3. Temperaturen</code>
| Die readingsGroup kommt in eine Gruppe
|-
| <code>attr wzTemperaturenRG noheading 1</code>
| noheading
|-
| <code>attr wzTemperaturenRG nostate 1</code>
| nostate
|-
| <code>attr wzTemperaturenRG notime 1</code>
| notime
|-
| <code>attr wzTemperaturenRG valueFormat {temperature => "%.1f °C", humidity =>"%.1f %%" }</code>
| Die Formatierung für die temperatur und humidity readings: eine Nachkommastelle plus Einheit.
|-
|<code>attr wzTemperaturenRG valueStyle { if($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE > 30) { 'style="color:red"'}elsif($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE > 20) { 'style="color:orange"'}elsif($DEVICE eq "Aussen" && $READING eq "temperature" && $VALUE < 5) { 'style="color:blue"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE > 23) { 'style="color:red"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE > 21) { 'style="color:orange"'}elsif($DEVICE eq "Wohnzimmer" && $READING eq "temperature" && $VALUE < 20) { 'style="color:blue"'}elsif($DEVICE eq "Kasten_E_Geraete" && $READING eq "temperature" && $VALUE > 30) { 'style="color:red"'}elsif($DEVICE eq "Kasten_E_Geraete" && $READING eq "temperature" && $VALUE > 28) { 'style="color:orange"'}elsif($READING eq "humidity" && $VALUE > 65) { 'style="color:red"'}elsif($READING eq "humidity" && $VALUE > 60) { 'style="color:orange"'}else{'style="color:green"'} }</code>
| Diverse Farbkombinationen sind möglich
|}

== links und trigger ==
[[Datei:rgPCA-detail.png|mini|hochkant=1.5|readingGroup mit link]]
Das PCA301 Beispiel oben lässt sich mit einem ans Ende des define angehängten <code><{appendTrigger($DEVICE,"clear","Alle löschen")}></code> und der folgenden appendTrigger definition in 99_myUtils.pm um einen Link erweitern der ein Event auslöst an das man z.b. ein notify hängen kann um die Verbrauchszähler der PCA301 Dosen zurückzusetzen.
<pre>
define clearVerbrauch notify Verbrauch:clear set TYPE=PCA301 clear
</pre>
<pre>use vars qw($FW_ME);
use vars qw($FW_subdir);
sub
appendTrigger($$$)
{
my ($name,$trigger,$label) = @_;

my $ret .= "</table></td></tr>";

my $link = "cmd=trigger $name $trigger";
my $txt = "<a onClick=\"FW_cmd('$FW_ME$FW_subdir?XHR=1&$link')\">$label</a>";
$ret .= "<td colspan=\"99\"><div style=\"cursor:pointer;color:#888888;text-align:right\">$txt</div></td>";

return ($ret,0);
}</pre>

Noch ein Beispiel für 'custom links und trigger' findet sich [http://forum.fhem.de/index.php/topic,14425.msg109383.html#msg109383 im Forum]: Dort wird damit eine readingsGroup dynamisch umgeschaltet um nur die eingeschalteten, nur die ausgeschalteten oder alle Lampen anzuzeigen.

== Sonstiges ==

Mit <code>attr <device> style style="border:0px;background:none;box-shadow:none"</code> lässt sich der Rahmen um eine readingsGroup entfernen wenn sie in einer group verwendet wird und der doppelte Rahmen stört.

[[Kategorie:Hilfsmodul]]

Datei:TemperaturenRG.png

2013-12-22T11:36:13Z

Fhainz: