Dashboard: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Typos/Spelling)
 
(73 dazwischenliegende Versionen von 7 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
= Einleitung =
{{Todo|Weitere Überarbeitung und Anpassung an Modul-Version 3, siehe {{Link2Forum|Topic=16503|Message=309740|LinkText=Update-Hinweise}}) }}
 
{{Infobox Modul
|ModPurpose=Beliebiges Anordnen von Gruppen
|ModType=h
|ModForumArea=Frontends
|ModTechName=95_Dashboard.pm
|ModOwner=svenson08
}}
 
Das '''Dashboard''' ist ein [[:Kategorie:Hilfsmodul|Hilfsmodul]], das umfangreiche Gestaltungsmöglichkeiten für das [[PGM2]] Web-Frontend bietet. So z.B. die Anordnung von Gerätegruppen in mehreren Tabs und jeweils in mehreren Spalten mittels Drag'n Drop.
Das '''Dashboard''' ist ein [[:Kategorie:Hilfsmodul|Hilfsmodul]], das umfangreiche Gestaltungsmöglichkeiten für das [[PGM2]] Web-Frontend bietet. So z.B. die Anordnung von Gerätegruppen in mehreren Tabs und jeweils in mehreren Spalten mittels Drag'n Drop.


== Status ==
== Voraussetzungen ==
Das Modul ist seit Dezember 2013 Bestandteil von FHEM und wird über den Updatemechanismus ausgeliefert. <br>
Keine speziellen Voraussetzungen erforderlich.
Diskussion und Problemberichte finden sich in diesem [http://forum.fhem.de/index.php/topic,16503.0.html Forenthread]. '''Bitte dort immer das erste Posting beachten.''' Dieses wird aktuell gehalten.


==== Unterstützte Styles ====
== Anwendung ==
Aktuell wird das Default-, Dark- und IOS7 Style jeweils für Smallscreen, Touchpad und der Standarddarstellung unterstützt.


==== Benötigte Dateien ====
=== Define ===
Alle benötigten Dateien werden über das Update verteilt. Die hier aufgeführten Dateien stellen lediglich eine Übersicht dar und sollen verdeutlichen, was alles benötigt wird, damit das Dashboard funktioniert.
Die Syntax für die Definition eines Dashboards:
:<code>define <name> Dashboard</code>
Parameterbedeutung:
;name
:Eindeutiger Name des anzulegenden Dashboards.


* /fhem/FHEM/95_Dashboard.pm
=== Attribute ===
* /fhem/WWW/images/default/dashboardicons.png
Das Dashboard unterstützt die folgenden Attribute:
* /fhem/WWW/pgm2/dashboard_darkstyle.css
* /fhem/WWW/pgm2/dashboard_ios7.css
* /fhem/WWW/pgm2/dashboard_style.css
* /fhem/WWW/pgm2/dashboard.js
* /fhem/WWW/pgm2/jquery.min.js
* /fhem/WWW/pgm2/jquery-ui.min.js


die *.css Dateien des Dashboards werden in den eigentlichen Styles mittels des CSS Befehls ''@import url("<Dateiname>.css");'' eingefügt. So lautet die erste Zeile im Darkstyle (darkstyle.css) @import url("dashboard_darkstyle.css");
;dashboard_activetab
:Bestimmt welches der Tabs beim Aufruf des Dashboards ausgewählt ist.
;dashboard_customcss
:Über dieses Attribut können CSS Definitionen eingegeben werden, um z.B. mit dem Wert ''body {background-image: none !important;}'' das Hintergrundbild im Dashboard zu deaktivieren.
;dashboard_tabcount (seit 05.07.2015 entfallen, siehe {{Link2Forum|Topic=16503|Message=309740|LinkText=Update-Hinweise}})
:Bestimmt die Anzahl der verfügbaren Tabs im Dashboard.
;dashboard_showtabs
:Bestimmt die Position der Tabs. Diese kann oben oder unten angezeigt oder komplett ausgeblendet werden. Letzteres führt dazu dass das Dashboard den Lockstate auf lock ändert.
;dashboard_showfullsize
:Zeigt das Dashboard ohne die Raumliste von FHEMWEB. Es wird dabei der gesamte linke Bereich (inkl. Raumliste und evtl. gesetztem Logo) und der Header der Seite (inkl. Eingabezeile) ausgeblendet.
;dashboard_showtogglebuttons
:Wer die Buttons vergrößern/verkleinern nicht nutzen möchte kann dies mittels diesem Attribut deaktivieren.
;dashboard_width
:Bestimmt die Breite des Dashboards. Die Breite kann in Prozent (z.B. 80%) oder in Pixel (z.B. 1200) angegeben werden.
;dashboard_tab1groups (dashboard_tab2groups dashboard_tab3groups dashboard_tab4groups dashboard_tab5groups dashboard_tab6groups dashboard_tab7groups)
:Enthält die Auflistung der Gruppen, die im Dashboardtab angezeigt werden. Die Gruppen sind mit einem Komma zu trennen. Einer Gruppe kann ein Icon zugewiesen werden. Hierzu muss nach dem Gruppennamen '':<icon>@<farbe>'' eingefügt werden. z.B. <code>Light:Icon_Fisch@blue,AVIcon_Fisch@red,Single Lights:Icon_Fisch@yellow</code>
;dashboard_tab1name (dashboard_tab2name dashboard_tab3name dashboard_tab4name dashboard_tab5name dashboard_tab6name dashboard_tab7name)
:Bestimmt den Titel des Tabs.
;dashboard_tab1icon (dashboard_tab2icon dashboard_tab3icon dashboard_tab4icon dashboard_tab5icon dashboard_tab6icon dashboard_tab7icon)
:Anzuzeigendes Icon neben dem Titel des Tabs.
;dashboard_rowtopheight
:Festlegen der Höhe der oberen Reihe des Dashboards.
;dashboard_webfrontendfilter (seit 05.07.2015 entfallen, siehe {{Link2Forum|Topic=16503|Message=309740|LinkText=Update-Hinweise}})
:Dem Attribut ist der Name einer FHEMWEB Instanz zu hinterlegen (z.B. WEB), möchte man das Dashboard darauf beschränken. Es können mehrere Instanzen, durch Komma getrennt, angegeben werden.
;dashboard_rowbottomheight
:Festlegen der Höhe der unteren Reihe des Dashboards.
;dashboard_rowcenterheight
:Festlegen der Höhe der mittleren Reihe des Dashboards.
;dashboard_row
:Bestimmt welche Reihen im Dashboard angezeigt werden.
;dashboard_rowcentercolwidth
:Bestimmt die Breite der einzelnen Spalten der mittleren Dashboardreihe. Je Spalte kann ein separater Wert, durch Komma getrennt, hinterlegt werden. Jeder Wert bestimmt die Spaltenbreite in %.
;dashboard_colcount
:Legt die Anzahl der Spalten in der mittleren Reihe des Dashboards fest.
;dashboard_tab1sorting (dashboard_tab2sorting dashboard_tab3sorting dashboard_tab4sorting dashboard_tab5sorting dashboard_tab6sorting dashboard_tab7sorting)
:Enthält die Positionierung der Gruppen im jeweiligen Tab. Es wird nicht empfohlen, dieses Attribut zu editieren.


:Wenn Dateien fehlen zeigt der STATUS des Dashboards (also die des define im Raum ''Everything'') den Hinweis '''Missing File, see LogFile for Details'''. Weitere Einzelheiten zu diesem Fehler finden sich dann im Logfile. Es sollte klar sein, dass das Dashboard dann nicht (richtig) funktionieren kann.
== Anwendungsbeispiel(e) ==


= Erklärung / Internes =
[[Datei:Dashboard_Menulink.png|mini|120px|Darstellung des Dashboard Menüs]]
Das '''Dashboard''' erstellt ähnlich wie Floorplan einen separaten Menüeintrag auf der linken Seite in FHEMWeb, oberhalb der Räume. Der Name des dort angezeigten Menüeintrags ist vorgegeben und <ins>nicht</ins> über ein Attribut editierbar.<br>
Damit dies funktioniert muss es einen Raum geben, der DashboardRoom heißt. Dieser wird durch das Dashboard-Modul erstellt und in allen erstellten Web-Instanzen über das Attribut hiddenroom ausgeblendet. Bedeutet: man muss sich nicht darum kümmern.


:Hier lohnt auch mal ein Blick ins Logfile. Wenn eine Web-Instanz geändert wurde, erscheint dort der folgende Eintrag
:'''<Name des Dashboard> Added hiddenroom "DashboardRoom" to <Name der Web-Instanz> Don't forget to save config.'''




Das Dashboard besteht in FHEM eigentlich aus zwei "Elementen". Dem eigentlichen definierten Dashboard (define anyViews Dashboard) und einem Weblink. Das Weather Modul z.B. arbeitet dahingehend gleich. Man muss sich aber nicht um den Weblink für das Dashboard kümmern, da dieser bei Bedarf vom Dashboard eigenständig erstellt wird.
== Allgemeine Hinweise ==
 
 
;Unterstützte Styles
Es werden die Styles Default, Dark und IOS7 unterstützt.
 
{| class="wikitable"
|Dashboard-Styles
|-
|[[Datei:dashboard_dark.png|thumb|500px|Dashboard im Style Dark]]
|-
|[[Datei:dashboard_default.png|thumb|500px|Dashboard im Default Style]]
|-
|[[Datei:dashboard_ios.png|thumb|500px|Dashboard im IOS7]]
 
|}
 
;Benötigte Dateien
Wenn vom Dashboard benötigte Dateien fehlen zeigt der STATUS des Dashboards den Hinweis ''Missing File, see LogFile for Details''. Weitere Einzelheiten zu diesem Fehler finden sich dann im Logfile. Es sollte klar sein, dass das Dashboard dann nicht (richtig) funktionieren kann.


:Hier lohnt auch einmal ein Blick ins Logfile. Dort erscheint in dem geschilderten Fall der Eintrag
== Erklärung / Internes ==
:'''[<Name des Dashboard>]Weblink dosen't exists. Created weblink <Name des Dashboard>_weblink. Don't forget to save config.'''
[[Datei:Dashboard_Menulink.png|mini|120px|Darstellung des Dashboard Menüs]]


= Verwenden / Konfigurieren =
Das Dashboard besteht in FHEM eigentlich aus zwei "Komponenten". Dem eigentlichen definierten Dashboard und einem Weblink. Es muss sich aber nicht um den Weblink für das Dashboard gekümmert werden, da dieser bei Bedarf vom Dashboard eigenständig erstellt wird.
Die Konfiguration ist recht einfach und unterscheidet sich nicht viel von anderen Modulen. Aus den gemachten Erfahrungen sollte nach dem definieren des Dashboards den Attributen [[#dashboard_width|dashboard_width]], [[#dashboard_tab1groups|dashboard_tab1groups]] und [[#dashboard_tabcount|dashboard_tabcount]] Beachtung geschenkt werden.


Um es aber noch einfacher zu halten, wird in den folgenden Schritten die notwendige Konfiguration und Funktionsweise durchgegangen. Am Ende sollte jeder ein nutzbares Dashboard haben.
== Kleines Howto ==
;Schritt 1: Erstellen des Dashboards
:<code>define anyViews Dashboard</code>
FHEM neu starten.


== Schritt 1 (Dashboard erstellen) ==
;Schritt 2: Grundkonfiguration
Es genügt in der fhem.cfg den Eintrag '''define <Einbeliebigername> Dashboard'''. Oder man gibt dies direkt in der FHEM Befehlszeile ein (z.B. '''define <Einbeliebigername> Dashboard'''). In diesem Beispiel wird ''define anyViews Dashboard'' verwendet. Danach muss die Konfiguration gespeichert (save config) und FHEM einmal neu gestartet werden (shutdown restart). Wer danach auf den Menüeintrag '''Dashboard''' klickt, wird erstmal nichts sehen. Im Logfile sollten aber schon Hinweise auf fehlende Attribute vom Dashboard eingetragen worden sein.


== Schritt 2 (Gruppen hinzufügen) ==
:<code>attr anyViews dashboard_width 80%</code>
:<code>attr anyViews dashboard_tab1groups <GRUPPE1>,<GRUPPE2>,<GRUPPE3></code>


[[Datei:Dashboard-KeinGruppe.png|mini|250px|"Objekt" ohne Gruppe]]
<GRUPPE1>, etc. sind durch richtige Gruppennamen zu ersetzen, z.B. Licht,Wetter oder ähnliches. Bitte denkt daran auch Komponenten den Gruppen zuzuweisen (über das jeweils zur Komponente gehörende "groups"-Attribut) da ansonsten das Dashboard leer bleibt.
[[Datei:Dashboard-Gruppe.png|mini|250px|"Objekt" in einer Gruppe]]


Im Raum ''Everything'' werden die Details des Dashboards ''anyViews'' aufgerufen. Im STATE sollte '''No Groups set''' stehen. Das ist erstmal richtig, aber das wird jetzt geändert. Es wird nun mind. eine Gruppe benötigt die im Dashboard angezeigt werden soll.<br>


:Hier gibt es öfters schon das erste Problem. Nur weil verschiedene definierte "Objekte" (z.B. ein Dummy oder ein notify) scheinbar gruppiert in FHEMWEB angezeigt werden, befinden sich diese nicht zwingend in ein und derselben Gruppe! Erst wenn ein "Objekt" das Attribut '''group''' gesetzt hat, wird es einer Gruppe zugeordnet. <ins>Nur diese Gruppen können im Dashboard angezeigt werden.</ins><br>


Im nachfolgenden existiert eine Gruppe ''_MeinWetter_'' und eine Gruppe ''_Systembefehle_''. Das Attribut '''dashboard_tab1groups''' wählen und dort '''_MeinWetter_,_Systembefehle_''' eintragen.<br>
[[Datei:Dashboard-KeinGruppe.png|mini|250px|"Objekt" ohne Gruppe]]
[[Datei:Dashboard-Gruppe.png|mini|250px|"Objekt" in einer Gruppe]]


Danach sollen die beiden Gruppen im 1. Tab im Dashboard angezeigt werden. Zwar noch etwas chaotisch, aber das wird in den nächsten Schritten bearbeitet.<br>
Danach sollen die beiden Gruppen im 1. Tab im Dashboard angezeigt werden. Zwar noch etwas chaotisch, aber das wird in den nächsten Schritten bearbeitet.<br>
[[#dashboard_tab1groups| Siehe dashboard_tab1groups]]
[[#dashboard_tab1groups| Siehe dashboard_tab1groups]]


== Schritt 3 (Nett zu wissen) ==
Das Dashboard zeigt neben den beiden Gruppen bereits einiges andere mit an. Hier werden erst einmal diese "Nebensächlichkeiten" erklärt. Für die weiteren Schritte dieser Anleitung sollten die nun genannten Einstellungen unverändert bleiben.  
Das Dashboard zeigt neben den beiden Gruppen bereits einiges andere mit an. Hier möchte ich erst einmal diese "Nebensächlichkeiten" erklären. Für die weiteren Schritte dieser Anleitung sollten die nun genannten Einstellungen unverändert bleiben.  


[[Datei:Dashboard_FirstGroup.png|mini|300px|Erste Gruppe im Dashboard]]
[[Datei:Dashboard_FirstGroup.png|mini|300px|Erste Gruppe im Dashboard]]
Neben dem ersten Tab des Dashboards erscheint eine Schalterleiste mit den Schaltern "Set", "Lock", "Detail". Der Schalter "Detail" springt in die Detailansicht des Dashboards um dort z.B. weiter Attribute hinzuzufügen. <br>
Am rechten Rand des Dashboards erscheinen einige Schalter ("Set", "Detail"). Der Schalter "Detail" springt in die Detailansicht des Dashboards um dort z.B. weitere Attribute hinzuzufügen. <br>
Der Schalter "Set" speichert die per Drag'n Drop vorgenommenen Änderungen '''temporär''' (dieses sind dann noch nicht gespeichert!). "Set" wird in Rot geschrieben wenn die Positionierung einer Gruppe geändert wurde, aber noch nicht mit dem "Set"-Schalter gesichert wurden! Weiter wird mit dem Schalter "Set" das aktuell [[#dashboard_activetab|aktive Tab]] gesichert <br>
Der Schalter "Set" speichert die per Drag'n Drop vorgenommenen Änderungen '''temporär''' (diese sind dann noch nicht gespeichert!). "Set" wird in rot geschrieben wenn die Positionierung einer Gruppe geändert wurde, aber noch nicht mit dem "Set"-Schalter gesichert wurden! Ebenso wird mit dem Schalter "Set" das aktuell [[#dashboard_activetab|aktive Tab]] gesichert <br>
Der Schalter "Lock" ermöglicht das verschieben der einzelnen Gruppen. Möchte man das verschieben verhindern ist dabei "Lock" zu betätigen. Dabei ändert sich darauf der Text des Schalters in "Unlock". Ein erneutes anklicken entsperrt das Dashboard wieder. <br>
Die Schalterleiste kann über das Attribut ''dashboard_showtabs'' deaktiviert werden, oder wahlweise über oder unter dem Dashboard platziert werden.<br>
Die Schalterleiste kann über das Attribut ''dashboard_showtabs'' deaktiviert werden, oder wahlweise über oder unter dem Dashboard platziert werden.<br>
[[#dashboard_showtabs| Siehe dashboard_showtabs]]
[[#dashboard_showtabs| Siehe dashboard_showtabs]]
<br><br>
<br><br>
Im Gruppentitel erscheint an deren rechten Rand ein Symbol (+/-), mit diesem kann man die Gruppe minimieren oder die voreingestellte Größe wieder herstellen.<br>
Im Gruppentitel erscheint an deren rechten Rand ein Symbol (+/-). Mit diesem kann man die Gruppe minimieren oder die voreingestellte Größe wieder herstellen.<br>
[[#dashboard_showtooglebuttons| Siehe dashboard_showtooglebuttons]]
[[#dashboard_showtooglebuttons| Siehe dashboard_showtooglebuttons]]
<br><br>
<br><br>
[[Datei:Dashboard_Helper.png|mini|300px|Dashboard Helper]]
[[Datei:Dashboard_Helper.png|mini|300px|Dashboard Helper]]
Zum besseren ausrichten der einzelnen Gruppen wird zur Unterstützung einige Hilfen angezeigt. Das erste ist die Anzeige eines Rahmens um das Dashboard. Genauer gesagt um die einzelnen Reihen/Spalten des Dashboards. Das andere ist der Hintergrund der Gruppen. Dieser kann über die Mindestgröße der Gruppe hinaus gezogen werden. Damit können beliebig große Abstände zwischen den einzelnen Gruppen eingestellt werden.<br>
Zum besseren Ausrichten der einzelnen Gruppen werden zur Unterstützung einige Hilfen angezeigt. Die erste ist die Anzeige eines Rahmens um das Dashboard. Genauer gesagt um die einzelnen Reihen/Spalten des Dashboards. Eine weitere Hilfe ist der Hintergrund der Gruppen. Dieser kann über die Mindestgröße der Gruppe hinaus gezogen werden. Damit können beliebig große Abstände zwischen den einzelnen Gruppen eingestellt werden.<br>
[[#dashboard_showhelper| Siehe dashboard_showhelper]]
[[#dashboard_showhelper| Siehe dashboard_showhelper]]


== Schritt 4 (Verschiedene Spalten und Reihen) ==
Da nun die ersten Gruppen im Dashboard angezeigt werden, geht es nun darum, diese an die gewünschten Stellen zu platzieren. Dazu werden erst noch die verschiedenen Reihen und Spalten eingerichtet.<br>
Da nun die ersten Gruppen im Dashboard angezeigt werden geht es nun darum diese an den gewünschten Stellen zu platzieren. Dazu werden wir erst noch die verschiedenen Reihen und Spalten einrichten.<br>


Das Dashboard verfügt über drei Reihen. Oben, Mitte und Unten. In der Standarteinstellung wird nur die mittlere Reihe angezeigt. Die mittlere Reihe sollte auch immer eingesetzt werden, da diese die breite des Dashboard vorgibt. Wir blenden uns aber die obere und die mittlere Reihe ein. In dem wird das Attribut '''dashboard_row''' auf '''top-center''' stellen. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.<br>  
Das Dashboard verfügt über drei Reihen. Oben, Mitte und Unten. In der Standardeinstellung wird nur die mittlere Reihe angezeigt. Die mittlere Reihe sollte auch immer eingesetzt werden, da diese die Breite des Dashboard vorgibt. Für dieses kleine HowTo werden aber die obere und die mittlere Reihe eingeblendet, indem das Attribut '''dashboard_row''' auf '''top-center''' gestellt wird. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich, je Tab eine andere Einstellung zu wählen.<br>  
[[#dashboard_row| Siehe dashboard_row]]<br><br>
[[#dashboard_row| Siehe dashboard_row]]<br><br>


Die Breite welche das Dashboard auf dem Bildschirm einnimmt kann über das Attribut '''dashboard_width''' festgelegt werden. Standard ist die Breite von 100%. Es kann neben einem Prozentwert auch eine Breite in Pixel angegeben werden.<br>
Die Breite, die das Dashboard auf dem Bildschirm einnimmt, kann über das Attribut '''dashboard_width''' festgelegt werden. Standard ist die Breite von 100%. Es kann neben einem Prozentwert auch eine Breite in Pixel angegeben werden.<br>
[[#dashboard_width| Siehe dashboard_width]]<br><br>
[[#dashboard_width| Siehe dashboard_width]]<br><br>


Die Höhe der einzelnen Reihen kann über die Attribute dashboard_rowtopheight für die obere Reihe, dashboard_rowbottomheight für die untere Reihe und dashboard_rowcenterheight für die mittlere Reihe festgelegt werden. Damit können die Reihen nach den eigenen Bedürfnissen angepasst werden.Für unser Beispiel wird '''dashboard_rowtopheight''' auf '''300''' und '''dashboard_rowcenterheight''' auf '''400''' eingestellt. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.<br>
Die Höhe der einzelnen Reihen kann über die Attribute dashboard_rowtopheight für die obere Reihe, dashboard_rowbottomheight für die untere Reihe und dashboard_rowcenterheight für die mittlere Reihe festgelegt werden. Damit können die Reihen nach den eigenen Bedürfnissen angepasst werden. Für dieses HowTo wird '''dashboard_rowtopheight''' auf '''300''' und '''dashboard_rowcenterheight''' auf '''400''' eingestellt. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.<br>
[[#dashboard_rowtopheight| Siehe dashboard_rowtopheight]]<br>
[[#dashboard_rowtopheight| Siehe dashboard_rowtopheight]]<br>
[[#dashboard_rowbottomheight| Siehe dashboard_rowbottomheight]]<br>
[[#dashboard_rowbottomheight| Siehe dashboard_rowbottomheight]]<br>
[[#dashboard_rowcenterheight| Siehe dashboard_rowheight]]<br><br>
[[#dashboard_rowcenterheight| Siehe dashboard_rowheight]]<br><br>


Die mittlere Reihe hat (historisch bedingt) eine Besonderheit. Diese kann in maximal 5 Spalten unterteilt werden. Für unser Beispiel setzten wird das Attribut '''dashboard_colcount''' auf '''2'''. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.<br> Weiter legen wir mit dem Attribut [[#dashboard_rowcentercolwidth|dashboard_rowcentercolwidth]] die Breite der ersten Spalte mit 30% und die der zweiten Spalte mit 70% fest in dem wir dem Attribut '''dashboard_rowcentercolwidth''' den Wert '''30,70''' zu teilen.<br>
Die mittlere Reihe hat (historisch bedingt) eine Besonderheit. Diese kann in maximal 5 Spalten unterteilt werden. Für unser Beispiel setzen wir das Attribut '''dashboard_colcount''' auf '''2'''. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.<br> Weiter legen wir mit dem Attribut [[#dashboard_rowcentercolwidth|dashboard_rowcentercolwidth]] die Breite der ersten Spalte mit 30% und die der zweiten Spalte mit 70% fest indem wir dem Attribut '''dashboard_rowcentercolwidth''' den Wert '''30,70''' zuteilen.<br>
[[#dashboard_colcount | Siehe dashboard_colcount ]]<br>
[[#dashboard_colcount | Siehe dashboard_colcount ]]<br>


== Schritt 5 (Positionieren ... und so) ==
Sicherlich ist das Positionieren einfach, und jeder wird das hinbekommen. Zwei, drei Worte möchte ich trotzdem darüber verlieren.<br>
Sicherlich ist das positionieren einfach, und jeder wird das hin bekommen. Zwei drei Worte möchte ich trotzdem darüber verlieren.<br>


:<ins>Verschieben</ins><br>
:<ins>Verschieben</ins><br>
:Gruppen können in andere Reihen oder Spalten des Dashboards verschoben werden. Dazu muss in die Gruppe angeklickt werden und die Maustaste gedrückt gehalten werden. Los lässt man diese wenn man an der richtige Stelle ist. Das war wohl schon jedem klar.<br>
:Gruppen können in andere Reihen oder Spalten des Dashboards verschoben werden. Dazu muss in die Gruppe geklickt werden und die Maustaste gedrückt gehalten werden. Los lässt man diese wenn man an der richtigen Stelle ist. Das war wohl schon jedem klar.<br>
:Ein möglicher Zielort wird mit einem abgerundeten Platzhalter markiert. Dieser verschiebt auch, falls notwendig, andere Gruppen. Manchen wundert es warum dieser Zielort manchmal recht spät angezeigt wird. Dies hängt von der Position des Mauszeigers ab. Aha?! Je weiter oben man eine Gruppe anpackt, desto höher muss man die Maus schieben. Oder anders formuliert, wenn sich ca. 50% der Gruppenfläche im Zielbereich befinden wird dieser Zielort erst markiert. Das verschieben eine Gruppe von einem Tab in das andere ist nicht möglich. Letztendlich bleibt jedem nur <ins>ausprobieren</ins>.<br><br>
:Ein möglicher Zielort wird mit einem abgerundeten Platzhalter markiert. Dieser verschiebt auch, falls notwendig, andere Gruppen. Manchen wundert es warum dieser Zielort manchmal recht spät angezeigt wird. Dies hängt von der Position des Mauszeigers ab. Aha?! Je weiter oben man eine Gruppe anpackt, desto höher muss man die Maus schieben. Oder anders formuliert, wenn sich ca. 50% der Gruppenfläche im Zielbereich befinden wird dieser Zielort erst markiert. Das Verschieben einer Gruppe von einem Tab in das andere ist nicht möglich. Letztendlich bleibt jedem nur <ins>Ausprobieren</ins>.<br><br>


:Gruppen können über, unter, neben und vor anderen Gruppen verschoben werden. Auch das erfolgt wie bereits oben aufgeführt. Dies ist für viele nicht neues. Zu beachten ist aber das sich eine Gruppe nur dann vor oder neben eine anderen positionieren lässt wenn diese von der Breite in das Dashboard passen. Wenn Ihr also Gruppen nebeneinander positionieren wollt dürfen diese in Summe nicht breiter als das Dashboard sein.<br>
:Gruppen können über, unter, neben und vor anderen Gruppen verschoben werden. Auch das erfolgt wie bereits oben aufgeführt. Dies ist für viele nichts neues. Zu beachten ist aber dass sich eine Gruppe nur dann vor oder neben einer anderen positionieren lässt wenn diese von der Breite in das Dashboard passen. Wenn Ihr also Gruppen nebeneinander positionieren wollt dürfen diese in Summe nicht breiter als das Dashboard sein.<br>
:Dies gilt nicht für die Höhen der Gruppen. Diese können in Summe höher als das Dashboard und höher als eine Reihe sein. Hier findet keine Begrenzung statt wie bei der Breite. Um jedoch das ein oder andere optisch nicht so schöne Ergebnis zu bekommen sollte darauf geachtet werden das keine Gruppe über eine Reihe hinaus ragt.<br><br><br>
:Dies gilt nicht für die Höhen der Gruppen. Diese können in Summe höher als das Dashboard und höher als eine Reihe sein. Hier findet keine Begrenzung statt wie bei der Breite. Um jedoch das ein oder andere optisch nicht so schöne Ergebnis zu bekommen sollte darauf geachtet werden dass keine Gruppe über eine Reihe hinaus ragt.<br><br><br>


Für unser Beispiel verschieben wir zum testen die Gruppen in beliebige Reihen bzw. Spalten der mittleren Reihe. Danach bitte den "Set" Schalter drücken, dieser hat sich durch die verschiebe Aktionen bereits rot markiert.
Für unser Beispiel verschieben wir zum Testen die Gruppen in beliebige Reihen bzw. Spalten der mittleren Reihe. Danach bitte den "Set" Schalter drücken, dieser hat sich durch die Verschiebe-Aktionen bereits rot markiert.


== Schritt 6 (Ausrichten... und so) ==
[[Datei:Dashboard_Positionieren.png|mini|200px|Ausrichtung von einzelnen Gruppen]]
[[Datei:Dashboard_Positionieren.png|mini|200px|Ausrichtung von einzelnen Gruppen]]
Das Ausrichten ist gleichermaßen so einfach wie das positionieren und sollte auch nichts neues sein. Aber auch hier möchte ich darüber zwei drei Worte verlieren.<br>
Das Ausrichten ist gleichermaßen einfach wie das Positionieren und sollte auch nichts Neues sein. Aber auch hier möchte ich darüber zwei, drei Worte verlieren.<br>


:Das positionieren ist nur möglich wenn das Dashboard nicht gesperrt ist (Lock/Unlock). Dann wird ein abgeschrägte Ecke an der Gruppe angezeigt, mit der die Größe gezogen werden kann.
:Das Positionieren ist nur möglich, wenn das Dashboard nicht gesperrt ist (Lock/Unlock). Dann wird eine abgeschrägte Ecke an der Gruppe angezeigt, mit der die Größe gezogen werden kann.
:Jede Gruppe kann in Höhe und Breite beliebig gezogen werden. Wobei genau das wieder einen Hacken hat. Das größer ziehen ist nur bedingt möglich. Die Breite/Höhe ist auf die Breite/Höhe der Dashboard Reihe (oder Spalte) begrenzt. Damit kann man eine Gruppe nicht über den Rand des Dashboards hinaus vergrößern.<br>
:Jede Gruppe kann in Höhe und Breite beliebig gezogen werden, wobei genau das wieder einen Haken hat: Das Größerziehen ist nur bedingt möglich. Die Breite/Höhe ist auf die Breite/Höhe der Dashboard Reihe (oder Spalte) begrenzt. Damit kann man eine Gruppe nicht über den Rand des Dashboards hinaus vergrößern.<br>
:Das kleiner ziehen ist auch nur bis zu einer Mindestgröße möglich. Die Mindestgröße ist abhängig des Inhalts der Gruppe, kann also bei jeder Gruppen unterschiedlich sein.<br>
:Das Kleinerziehen ist auch nur bis zu einer Mindestgröße möglich. Die Mindestgröße ist abhängig vom Inhalt der Gruppe, kann also von Gruppe zu Gruppe unterschiedlich sein.<br>
:Ein Sonderverhalten beim vergrößern/verkleinern gibt es auch. Ist ein Gruppe höher als die Reihe lässt sich die Gruppe zwar dort positionieren. Beim Ausrichten springt dann der untere Rand nicht auf die Mindesthöhe der Gruppe, sondern auf die maximale Höhe der Reihe. In diesem Fall sollte die Höhe der Reihe geändert werden. Ähnliches kann auch in der Breite auftreten.<br>
:Ein Sonderverhalten beim Vergrößern/Verkleinern gibt es auch: Ist eine Gruppe höher als die Reihe, lässt sich die Gruppe zwar dort positionieren. Beim Ausrichten springt dann der untere Rand nicht auf die Mindesthöhe der Gruppe, sondern auf die maximale Höhe der Reihe. In diesem Fall sollte die Höhe der Reihe geändert werden. Ähnliches kann auch in der Breite auftreten.<br>
:Ändert sich der Inhalt einer Gruppe (wird z.B. ein Dummy dazu gepackt) ändert sich die Positionierung der Gruppe '''nicht''' automatisch. In diesem Fall ist man immer gezwungen auch die Größe der Gruppe im Dashboard an die neue Gegebenheit anzupassen.
:Ändert sich der Inhalt einer Gruppe (wird z.B. ein Dummy dazugepackt), ändert sich die Positionierung der Gruppe '''nicht''' automatisch. In diesem Fall ist man immer gezwungen auch die Größe der Gruppe im Dashboard an die neue Gegebenheit anzupassen.


Für unser Beispiel ziehen wir die Gruppen beliebig Größer. Danach bitte den "Set" Schalter drücken, dieser hat sich durch die verschiebe Aktionen bereits rot markiert.
Für unser Beispiel ziehen wir die Gruppen beliebig größer. Danach bitte den "Set"-Schalter drücken. Dieser hat sich durch die Verschiebeaktionen bereits rot markiert.


== Schritt 7 (Speichern, oder warum geht die Konfiguration verlohren) ==
Wie bereits etwas weiter oben erklärt wird die Positionierung der Gruppen im Dashboard durch die Betätigung des Schalters "Set" temporär zwischengespeichert. Dadurch wird die Positionierung bereits für einen Seitenrefresh gespeichert. Solange bis das Browserfenster geschlossen wird. Danach wären diese Einstellungen verloren.<br>
Wie bereits etwas weiter oben erklärt wird die Positionierung der Gruppen im Dashboard durch die Betätigung des Schalters "Set" temporär zwischengespeichert. Dadurch wird die Positionierung bereits für einen Seitenrefresh gespeichert. So lange bis das Browserfenster geschlossen wird. Danach wären diese Einstellungen verloren.<br>
Darum ist es notwendig die Positionierung permanent zu speichern, damit auch nach einem Neustart von FHEM die getroffenen Einstellungen und Positionierungen vorhanden sind. Dies geht über den in FHEM bekannten Weg über ''Save config''.<br>
Darum ist es notwendig die Positionierung permanent zu speichern, damit auch nach einem neustart von FHEM die getroffenen Einstellungen und Positionierung vorhanden sind. Dies geht über den in FHEM bekannten weg über ''Save config''.<br>
Wird der Schalter "Set" nicht betätigt, wird auch über ''Save config'' die Positionierung nicht gespeichert. Daher ist es wichtig, immer '''zuerst''' mit dem Schalter '''"Set"''' die Einstellung zwischenzuspeichern und '''danach mit ''Save config''''' den Zwischenspeicher permanent zu sichern.<br>
Wird der Schalter "Set" nicht betätigt, wird auch über ''Save config'' die Positionierung nicht gespeichert. Daher ist es wichtig immer '''zuerst''' mit dem Schalter '''"Set"''' die Einstellung zwischen zu speichern und '''danach ''Save config'''''.<br>


Durch den Schalter "Set" wird für jedes Tab die Einstellung in das für das jeweilige Tab zuständige Attribut geschrieben. Für Tab 1 ist das Attribut ''dashboard_tab1sorting'' zuständig, für Tab 2 das Attribut ''dashboard_tab2sorting'', usw. '''Diese Attribute sollten nicht editiert werden!'''
Durch den Schalter "Set" wird für jedes Tab die Einstellung in das für das jeweilige Tab zuständige Attribut geschrieben. Für Tab 1 ist das Attribut ''dashboard_tab1sorting'' zuständig, für Tab 2 das Attribut ''dashboard_tab2sorting'', usw. '''Diese Attribute sollten nicht editiert werden!'''


== Schritt 8 (Der letzte Schliff) ==
Es ist möglich jedem Tab einen eigenen individuellen Namen zu vergeben. Dazu ist für das jeweilige Tab das entsprechende Attribut zu befüllen. Z.B. für Tab 1 ist das Attribut ''dashboard_tab1name'' mit dem gewünschten Titel zu füllen.<br>
Es ist möglich jedem Tab einen eigenen individuellen Namen zu vergeben. Dazu ist für das jeweilige Tab das entsprechende Attribut zu befüllen. Z.B. für Tab 1 ist das Attribut ''dashboard_tab1name'' mit dem gewünschten Titel zu füllen.<br>
[[#dashboard_tab1name| Siehe dashboard_tab1name]]
[[#dashboard_tab1name| Siehe dashboard_tab1name]]


= Attribute =
== Letzte Änderungen / Dashboard-Historie ==
 
=== dashboard_tabcount ===
Mit diesem Attribut gibt man an wie viele Tabs angezeigt werden. Es können maximal 5 Tabs angezeigt werden. Ist das Attribut nicht gesetzt wird 1 Tab angezeigt
 
=== dashboard_activetab ===
Gibt an welches der Tabs beim Aufruf des Dashboard angezeigt wird (aktiviertes Tab). Dieses Attribut wird ebenfalls durch betätigen des Schalters "Set" mit dem aktuell aktivierten Tab gefüllt.
 
=== dashboard_width ===
Über diese Attribut kann die Breite des Dashboards vorgegeben werden. Dabei kann die Breite in Prozent (z.B. 80%) oder in Pixel (z.B. 1200) angegeben werden. Die Breite betrifft das gesamte Dashboard und damit alle Tabs.
 
=== dashboard_row ===
 
=== dashboard_groups ===
'''Dieses Attribut wird nicht mehr verwendet(!) und sollte auch nicht gesetzt werden'''. Deren Inhalt wird autom. beim start von FHEM in das Attribut dashboard_tab1groups überführt. In späteren Updates des Dashboardmodul's wird diese Attribut entfernt, so das es nicht mehr gesetzt werden kann.
 
=== dashboard_tab1groups ===
Enthält die Auflistung der Gruppen welche im Dashboard im 1. Tab angezeigt werden. Die Gruppen sind mit einem Komma ohne nachfolgendem Leerzeichen zu trennen. Wird eine Gruppe falsch geschrieben oder eine nicht vorhandene Gruppe angegeben wird im Dashboard ein entsprechender Hinweis in einem leeren Gruppenfeld ausgegeben.<br>
 
Jede Änderung an diesem Attribut (entfernen, einfügen, ändern der Reihenfolge der Gruppenangabe) führt dazu das die evtl. gespeicherte Sortierung nicht mehr angewendet wird.
 
=== dashboard_tab2groups ===
Enthält die Auflistung der Gruppen welche im Dashboard im 2. Tab angezeigt werden. Vorausgesetzt das Attribut [[#dashboard_tabcount |dashboard_tabcount]] ist größer 1 eingestellt. Weiteres siehe [[#dashboard_tab1groups|Attribut dashboard_tab1groups]].
 
=== dashboard_tab3groups ===
Enthält die Auflistung der Gruppen welche im Dashboard im 3. Tab angezeigt werden. Vorausgesetzt das Attribut [[#dashboard_tabcount |dashboard_tabcount]] ist größer 2 eingestellt. Weiteres siehe [[#dashboard_tab1groups|Attribut dashboard_tab1groups]].
 
=== dashboard_tab4groups ===
Enthält die Auflistung der Gruppen welche im Dashboard im 4. Tab angezeigt werden. Vorausgesetzt das Attribut [[#dashboard_tabcount |dashboard_tabcount]] ist größer 3 eingestellt. Weiteres siehe [[#dashboard_tab1groups|Attribut dashboard_tab1groups]].
 
=== dashboard_tab5groups ===
Enthält die Auflistung der Gruppen welche im Dashboard im 5. Tab angezeigt werden. Vorausgesetzt das Attribut [[#dashboard_tabcount |dashboard_tabcount]] ist größer 4 eingestellt. Weiteres siehe [[#dashboard_tab1groups|Attribut dashboard_tab1groups]].
 
=== dashboard_tab1name ===
Mit diesem Attribut ist es möglich dem Tab 1 eine eigenen Titel zu geben.
 
=== dashboard_tab2name ===
Mit diesem Attribut ist es möglich dem Tab 1 eine eigenen Titel zu geben.
 
=== dashboard_tab3name ===
Mit diesem Attribut ist es möglich dem Tab 1 eine eigenen Titel zu geben.
 
=== dashboard_tab4name ===
Mit diesem Attribut ist es möglich dem Tab 1 eine eigenen Titel zu geben.
 
=== dashboard_tab5name ===
Mit diesem Attribut ist es möglich dem Tab 1 eine eigenen Titel zu geben.
 
=== dashboard_tab1icon ===
'''Ab Version 2.03''': Mit diesem Attribut ist es möglich im Titel des Tab 1 ein Icon anzuzeigen, gleich dem icon Attribut von FHEMWEB.
 
=== dashboard_tab2icon ===
'''Ab Version 2.03''': Mit diesem Attribut ist es möglich im Titel des Tab 2 ein Icon anzuzeigen, gleich dem icon Attribut von FHEMWEB.
 
=== dashboard_tab3icon ===
'''Ab Version 2.03''': Mit diesem Attribut ist es möglich im Titel des Tab 3 ein Icon anzuzeigen, gleich dem icon Attribut von FHEMWEB.
 
=== dashboard_tab4icon ===
'''Ab Version 2.03''': Mit diesem Attribut ist es möglich im Titel des Tab 4 ein Icon anzuzeigen, gleich dem icon Attribut von FHEMWEB.
 
=== dashboard_tab5icon ===
'''Ab Version 2.03''': Mit diesem Attribut ist es möglich im Titel des Tab 5 ein Icon anzuzeigen, gleich dem icon Attribut von FHEMWEB.
 
=== dashboard_showtabs ===
'''Ab Version 2.02:'''
Mit diesem Attribut kann man die Position der Tabs und der Schalterleiste bestimmen. Diese kann am Dashboard oben oder unten angezeigt werden. Auch kann diese komplett ausgeblendet werden. Des Weiteren lässt sich auch nur die Schalterleiste ausblenden. Dies hat zur folge das die Hilfslinien ausgeblendet werden und das Dashboard vor Änderungen geschützt wird (genau so als wenn der Schalter "Lock" gedrückt wurde).
 
=== dashboard_showfullsize ===
'''Ab Version 2.01''': Wer das Dashboard ohne der angezeigten Raumliste von FHEMWEB betreiben möchte muss das Attribut '''dashboard_showfullsize ''' auf '''1''' setzten. Es wird dabei der gesamte linke Bereich (inkl. Raumliste und evtl. gesetzten Logo) und dem Header der Seite (inkl. Eingabezeile) ausgeblendet.
 
=== dashboard_showtooglebuttons ===
Wer die einzelnen Gruppen nicht vergrößern/verkleinern möchte kann diese Toogle-Buttons durch setzten des Attributs '''dashboard_showtooglebuttons''' auf 0 deaktivieren. Diese werden dann nicht mehr angezeigt. Ein ein- und ausklappen der Gruppen ist dann natürlich nicht mehr möglich.
 
=== dashboard_showhelper ===
Wer weder den Rahmen um das Dashboard nicht sehen möchte noch den Hintergrund der Gruppen, der kann diese Funktion durch setzten des
Attributs '''dashboard_showhelper''' auf 0 deaktivieren. Dann werden die besagten Hilfestellungen zum ausrichten der Gruppen nicht angezeigt.
 
=== dashboard_rowtopheight ===
Mit diesem Attribut kann die Höhe der oberen Reihe des Dashboards bestimmt werden. Anzugeben ist ein nummerischer Wert.
 
=== dashboard_rowbottomheight ===
Mit diesem Attribut kann die Höhe der unteren Reihe des Dashboards bestimmt werden. Anzugeben ist ein nummerischer Wert.
 
=== dashboard_rowcenterheight ===
Mit diesem Attribut kann die Höhe der mittleren Reihe des Dashboards bestimmt werden. Anzugeben ist ein nummerischer Wert.
 
=== dashboard_rowcentercolwidth ===
'''Ab Version 2.01''':
Mit diesem Attribut wird die Breite der einzelnen Spalten der mittleren Dashboardreihe festgelegt (Siehe [[#dashboard_colcount|dashboard_colcount]]). Dabei kann je Spalte ein separater Wert hinterlegt werden. Die Werte sind durch ein Komma (ohne Leerzeichen) zu trennen. Jeder Wert bestimmt die Spaltenbreite in %! Der erste Wert gibt die Breite der ersten Spalte an, der zweite Wert die Breite der zweiten Spalte usw. Ist die Summe der Breite größer als 100 werden die Spaltenbreiten reduziert. Sind z.B. 3 Spalten definiert und nur 2 Breiten angegeben wird die Breite der letzte Spalte um die Differenz zu 100 festgelegt. Sind hingegen 2 Spalten definiert und 3 Werte angegeben werden nur die ersten beiden Werte berücksichtigt.
 
=== dashboard_webfrontendfilter ===
'''Ab Version 2.04'''
Ist dieses Attribut nicht gesetzt, oder hat den Wert '''*''' wird das Dashboard auf allen konfigurierten FHEMWEB Instanzen angezeigt. Wird dem Attribut der Name einer FHEMWEB Instanz (z.B. WEB) zugewiesen so wird das Dashboard nur in dieser Instanz angezeigt. Es können auch mehrere Instanzen durch Komma getrennt angegeben werden, z.B. ''WEB,WEBtablet''. Dadurch ist es möglich ein zusätzliches Dashboard zu definieren und dieses nur z.B. auf Tablet anzeigen zulassen (die natürlich eine eigenen FHEMWEB Instanz verwenden).
 
=== dashboard_colheight ===
'''Dieses Attribut wird nicht mehr verwendet(!) und sollte auch nicht gesetzt werden'''. Mit diesem Attribut kann die Höhe der mittleren Reihe des Dashboards bestimmt werden. Anzugeben ist ein nummerischer Wert.
 
=== dashboard_colwidth ===
'''Dieses Attribut wird nicht mehr verwendet(!) und sollte auch nicht gesetzt werden'''. Es wurde durch das neue Attribut [[#dashboard_rowcentercolwidth|dashboard_rowcentercolwidth]] ersetzt
 
=== dashboard_colcount ===
Mit diesem Attribut wird die Anzahl der Spalten in der mittleren Reihe des Dashboards festgelegt. Im Standart ist dies immer 1. Mit diesem Attribut wird die gesamt Breite des Dashboards mit bestimmt. Dabei ist folgendes zu beachten: Die mittlere Reihe muss verwendet werden, und  die angegebene Breit (dashboard_colwidth ) mal die Anzahl der Spalten (dashboard_colcount) ergeben die gesamt breite des Dashboard.
 
=== dashboard_lockstate ===
Dieses Attribut wird durch den Schalter "Lock" bzw. "Unlock" befüllt. Und dient dazu das Dashboard vor Veränderung zu schützen. Ob es nun über den besagten Schalter oder über das Attribut direkt befüllt wird spielt dabei keine Rolle.
 
=== dashboard_sorting ===
'''Dieses Attribut wird nicht mehr verwendet(!)''' Dieses Attribut enthält die Positionierung der Gruppen im Dashboard vor dem Update auf Tabs. Deren Inhalt wird autom. beim start von FHEM in das Attribut dashboard_tab1sorting überführt. Jedoch lässt es sich nicht verhindern das die Positionierung nicht sauber übernommen wird. In späteren Updates des Dashboardmodul's wird diese Attribut entfernt.
 
=== dashboard_tab1sorting ===
Enthält die Positionierung der Gruppen im Tab 1. Dieser Wert wird über den "Set" Button erstellt. Es wird nicht empfohlen dieses Attribut zu editieren.
 
=== dashboard_tab2sorting ===
Enthält die Positionierung der Gruppen im Tab 2. Dieser Wert wird über den "Set" Button erstellt. Es wird nicht empfohlen dieses Attribut zu editieren.
 
=== dashboard_tab3sorting ===
Enthält die Positionierung der Gruppen im Tab 3. Dieser Wert wird über den "Set" Button erstellt. Es wird nicht empfohlen dieses Attribut zu editieren.
 
=== dashboard_tab4sorting ===
Enthält die Positionierung der Gruppen im Tab 4. Dieser Wert wird über den "Set" Button erstellt. Es wird nicht empfohlen dieses Attribut zu editieren.
 
=== dashboard_tab5sorting ===
Enthält die Positionierung der Gruppen im Tab 5. Dieser Wert wird über den "Set" Button erstellt. Es wird nicht empfohlen dieses Attribut zu editieren.
 
= Muster-Konfiguration =
 
define anyViews Dashboard
attr anyViews dashboard_colcount 2
attr anyViews dashboard_rowcentercolwidth 30,70
attr anyViews dashboard_tab1groups <Group1>,<Group2>,<Group3>
attr anyViews dashboard_lockstate unlock
attr anyViews dashboard_showhelper 1
 
Diese Musterkonfiguration ist der fhem.cfg einzufügen, oder zeilenweise in der FHEM Befehlszeile einzugeben. Dabei muss "<Group1>,<Group2>,<Group3>" durch die entsprechenden eigenen Gruppen ersetzt werden. Die Gruppen werden dabei durch ein Komma (ohne nachfolgende Leerzeichen) getrennt.<br>
Dies kann als Startkonfiguration angesehen werden. Jedoch reicht es ebenfalls auch aus lediglich
 
define anyViews Dashboard
 
in die fhem.cfg einzufügen, und wie die oben geschilderte Schrittfolge zeigt.
 
= Historie =
==== Version 1.00: (Nov. 2013) ====
* Erste Veröffentlichung an Tester
 
==== Version 1.10: (Dez. 2013) ====
* Umbenamung von 95_Views in 95_Dashboard. Fortan wird das Modul als Dashboard geführt.
 
==== Version 1.11: (Dez. 2013) ====
* Erste veröffentlichung in FHEM. Das Dashboard wird nun über den bekannten Updatemechanismus verteilt.
 
==== Version 1.12: (31.12.2013) ====
* Deutscher command_ref Text. Fehlermeldung bei '''rereadcfg''' beseitigt.
* Fehlerbehandlung bei Eingabe von Gruppen mit Leerzeichen nach dem Trennzeichen.
* Plausibilitätsprüfung der dashboard_sorting Attributs
* Das Dashboard ist außerhalb des Dashboard-Raum nie im Zustand "lock".
* Hiddenroom des Dashboard geändert von Dashboard in DashboardRoom
* Diverse kleiner Bugfixes
 
==== Version 2.00: (22.01.2014) ====
* Dashboard verwendet nun Tabs. Bis zu 5 Tabs können verwendet werden
* Attribute [[#dashboard_colheight|dashboard_colheight]], [[#dashboard_groups|dashboard_groups]] und [[#dashboard_sorting|dashboard_sorting]] sind nun obsolet und werden nicht mehr genutzt.
* Neue Attribute für die Konfiguration der Tabs
* Die Sortierung der Gruppen wird nun nach einer anderen Logik gespeichert. '''Dadurch geht u.u. nach dem Update die bisherige Sortierung verloren!'''
* Die Darstellung des Dashboardinhalts wurde grundlegend geändert um die Performance auf schwächeren Systemen zu verbessern.
* Erweiterung der Stylesheets für die Tab-Darstellung
* Die genutzte Breite des Dashboard kann eingestellt werden. Siehe [[#dashboard_width|Attribut dashboard_width]]
* Diverse kleiner Bug's wurden behoben.
 
==== Version 2.01: (28.01.2014) ====
* Die Spaltenbreite kann über das Attribut [[#dashboard_rowcentercolwidth|dashboard_rowcentercolwidth]] festgelegt werden.
* Das Dashboard kann im Fullsizemode genutzt werden. Dabei wird z.B. die Raumliste ausgeblendet. Siehe [[#dashboard_showfullsize|dashboard_showfullsize]].
* Das Dashboard wird nun über Longpoll aktualisiert
 
 
==== Version 2.02: (30.01.2014) ====
* Die Tabs können oben oder unten am Dashboard angezeigt werden. Ebenfalls können die Tabs ausgeblendet werden. Dafür ist das neue Attribut [[#dashboard_showtabs|dashboard_showtabs]] zuständig, und ersetzt das Attribut ''dashboard_showbuttonbar''.
* Kleinere Fehler wurden behoben.
 
==== Version 2.03: (04.02.2014) ====
* Jedem Tab kann ein Icon zugewiesen werden. Neue Attribute [[#dashboard_tab1icon|dashboard_tab1icon]], [[#dashboard_tab2icon|dashboard_tab2icon]], [[#dashboard_tab3icon|dashboard_tab3icon]], [[#dashboard_tab4icon|dashboard_tab4icon]] und [[#dashboard_tab5icon|dashboard_tab5icon]]
* Bugfix: [[#dashboard_showfullsize|dashboard_showfullsize]] wird nur noch im DashboardRoom angewendet
* Bugfix: Sperren des Dashboards über den Lockbutton blendet den Dashboardhelper aus.
* Bugfix: Nach dem ausführen/anklicken einer Aktion wechselt das Dashboard nicht mehr auf ein anderes Tab zurück.


==== Version 2.04: (comming soon) ====
* (03.03.2014) Anzeigefehler bei readingGroups in einem Hiddenroom behoben
* Für jedes FHEMWEB-Instanz kann ein eigenes Dashboard konfiguriert werden. Damit kann z.B. für Tablets ein komplett anderes Dashboard bereitgestellt werden. Siehe [[#dashboard_webfrontendfilter|dashboard_webfrontendfilter]]
* (17.03.2014) Fehlerausgabe durch dashboard_webfrontendfilter behoben
* readinGroup's werden nun Gruppenfüllend angezeigt. Es wird auch ein Link zum bearbeiten der readingGroup angezeigt wenn das Attribut dashboard_showhelper den Wert 1 hat.
* (26.03.2014) dashboard_showfullsize wird nicht im Raum "all" bzw. Everything angewendet
* Attribut dashboard_groups wurde entfernt.
* (18.04.2014) Attribut dashboard_lock State entfernt. Kann nur noch in der Detailansicht verändert werden.
* (24.04.2014) Attribut dashboard_showhelper wird nicht mehr genutzt. Der Helper wird nur angezeigt wenn lockstate unlock ist.
* (24.04.2014) Schalter Detail und Set werden nun rechts angezeigt.
* (24.04.2014) Attribut dashboard_showtabs kann nicht mehr tabs-at-the-top-buttonbar-hidden oder tabs-on-the-bottom-buttonbar-hidden sein.
* (05.07.2015) {{Link2Forum|Topic=16503|Message=309740|LinkText=Änderungsübersicht und Update-Hinweise}}


= Links =
== Links ==
* [http://forum.fhem.de/index.php/topic,16503.0.html Forenthread] über ''Dashboard''
* {{Link2Forum|Topic=16503}} über ''Dashboard''


[[Kategorie:Hilfsmodul]]
[[Kategorie:FHEM Frontends]]
[[Kategorie:HOWTOS]]
[[Kategorie:HOWTOS]]

Aktuelle Version vom 14. August 2018, 21:36 Uhr

Todo: Weitere Überarbeitung und Anpassung an Modul-Version 3, siehe Update-Hinweise)


Dashboard
Zweck / Funktion
Beliebiges Anordnen von Gruppen
Allgemein
Typ Hilfsmodul
Details
Dokumentation EN / DE
Support (Forum) Frontends
Modulname 95_Dashboard.pm
Ersteller svenson08
Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref!


Das Dashboard ist ein Hilfsmodul, das umfangreiche Gestaltungsmöglichkeiten für das PGM2 Web-Frontend bietet. So z.B. die Anordnung von Gerätegruppen in mehreren Tabs und jeweils in mehreren Spalten mittels Drag'n Drop.

Voraussetzungen

Keine speziellen Voraussetzungen erforderlich.

Anwendung

Define

Die Syntax für die Definition eines Dashboards:

define <name> Dashboard

Parameterbedeutung:

name
Eindeutiger Name des anzulegenden Dashboards.

Attribute

Das Dashboard unterstützt die folgenden Attribute:

dashboard_activetab
Bestimmt welches der Tabs beim Aufruf des Dashboards ausgewählt ist.
dashboard_customcss
Über dieses Attribut können CSS Definitionen eingegeben werden, um z.B. mit dem Wert body {background-image: none !important;} das Hintergrundbild im Dashboard zu deaktivieren.
dashboard_tabcount (seit 05.07.2015 entfallen, siehe Update-Hinweise)
Bestimmt die Anzahl der verfügbaren Tabs im Dashboard.
dashboard_showtabs
Bestimmt die Position der Tabs. Diese kann oben oder unten angezeigt oder komplett ausgeblendet werden. Letzteres führt dazu dass das Dashboard den Lockstate auf lock ändert.
dashboard_showfullsize
Zeigt das Dashboard ohne die Raumliste von FHEMWEB. Es wird dabei der gesamte linke Bereich (inkl. Raumliste und evtl. gesetztem Logo) und der Header der Seite (inkl. Eingabezeile) ausgeblendet.
dashboard_showtogglebuttons
Wer die Buttons vergrößern/verkleinern nicht nutzen möchte kann dies mittels diesem Attribut deaktivieren.
dashboard_width
Bestimmt die Breite des Dashboards. Die Breite kann in Prozent (z.B. 80%) oder in Pixel (z.B. 1200) angegeben werden.
dashboard_tab1groups (dashboard_tab2groups dashboard_tab3groups dashboard_tab4groups dashboard_tab5groups dashboard_tab6groups dashboard_tab7groups)
Enthält die Auflistung der Gruppen, die im Dashboardtab angezeigt werden. Die Gruppen sind mit einem Komma zu trennen. Einer Gruppe kann ein Icon zugewiesen werden. Hierzu muss nach dem Gruppennamen :<icon>@<farbe> eingefügt werden. z.B. Light:Icon_Fisch@blue,AVIcon_Fisch@red,Single Lights:Icon_Fisch@yellow
dashboard_tab1name (dashboard_tab2name dashboard_tab3name dashboard_tab4name dashboard_tab5name dashboard_tab6name dashboard_tab7name)
Bestimmt den Titel des Tabs.
dashboard_tab1icon (dashboard_tab2icon dashboard_tab3icon dashboard_tab4icon dashboard_tab5icon dashboard_tab6icon dashboard_tab7icon)
Anzuzeigendes Icon neben dem Titel des Tabs.
dashboard_rowtopheight
Festlegen der Höhe der oberen Reihe des Dashboards.
dashboard_webfrontendfilter (seit 05.07.2015 entfallen, siehe Update-Hinweise)
Dem Attribut ist der Name einer FHEMWEB Instanz zu hinterlegen (z.B. WEB), möchte man das Dashboard darauf beschränken. Es können mehrere Instanzen, durch Komma getrennt, angegeben werden.
dashboard_rowbottomheight
Festlegen der Höhe der unteren Reihe des Dashboards.
dashboard_rowcenterheight
Festlegen der Höhe der mittleren Reihe des Dashboards.
dashboard_row
Bestimmt welche Reihen im Dashboard angezeigt werden.
dashboard_rowcentercolwidth
Bestimmt die Breite der einzelnen Spalten der mittleren Dashboardreihe. Je Spalte kann ein separater Wert, durch Komma getrennt, hinterlegt werden. Jeder Wert bestimmt die Spaltenbreite in %.
dashboard_colcount
Legt die Anzahl der Spalten in der mittleren Reihe des Dashboards fest.
dashboard_tab1sorting (dashboard_tab2sorting dashboard_tab3sorting dashboard_tab4sorting dashboard_tab5sorting dashboard_tab6sorting dashboard_tab7sorting)
Enthält die Positionierung der Gruppen im jeweiligen Tab. Es wird nicht empfohlen, dieses Attribut zu editieren.

Anwendungsbeispiel(e)

Allgemeine Hinweise

Unterstützte Styles

Es werden die Styles Default, Dark und IOS7 unterstützt.

Dashboard-Styles
Dashboard im Style Dark
Dashboard im Default Style
Dashboard im IOS7
Benötigte Dateien

Wenn vom Dashboard benötigte Dateien fehlen zeigt der STATUS des Dashboards den Hinweis Missing File, see LogFile for Details. Weitere Einzelheiten zu diesem Fehler finden sich dann im Logfile. Es sollte klar sein, dass das Dashboard dann nicht (richtig) funktionieren kann.

Erklärung / Internes

Darstellung des Dashboard Menüs

Das Dashboard besteht in FHEM eigentlich aus zwei "Komponenten". Dem eigentlichen definierten Dashboard und einem Weblink. Es muss sich aber nicht um den Weblink für das Dashboard gekümmert werden, da dieser bei Bedarf vom Dashboard eigenständig erstellt wird.

Kleines Howto

Schritt 1
Erstellen des Dashboards
define anyViews Dashboard

FHEM neu starten.

Schritt 2
Grundkonfiguration
attr anyViews dashboard_width 80%
attr anyViews dashboard_tab1groups <GRUPPE1>,<GRUPPE2>,<GRUPPE3>

<GRUPPE1>, etc. sind durch richtige Gruppennamen zu ersetzen, z.B. Licht,Wetter oder ähnliches. Bitte denkt daran auch Komponenten den Gruppen zuzuweisen (über das jeweils zur Komponente gehörende "groups"-Attribut) da ansonsten das Dashboard leer bleibt.


"Objekt" ohne Gruppe
"Objekt" in einer Gruppe

Danach sollen die beiden Gruppen im 1. Tab im Dashboard angezeigt werden. Zwar noch etwas chaotisch, aber das wird in den nächsten Schritten bearbeitet.
Siehe dashboard_tab1groups

Das Dashboard zeigt neben den beiden Gruppen bereits einiges andere mit an. Hier werden erst einmal diese "Nebensächlichkeiten" erklärt. Für die weiteren Schritte dieser Anleitung sollten die nun genannten Einstellungen unverändert bleiben.

Erste Gruppe im Dashboard

Am rechten Rand des Dashboards erscheinen einige Schalter ("Set", "Detail"). Der Schalter "Detail" springt in die Detailansicht des Dashboards um dort z.B. weitere Attribute hinzuzufügen.
Der Schalter "Set" speichert die per Drag'n Drop vorgenommenen Änderungen temporär (diese sind dann noch nicht gespeichert!). "Set" wird in rot geschrieben wenn die Positionierung einer Gruppe geändert wurde, aber noch nicht mit dem "Set"-Schalter gesichert wurden! Ebenso wird mit dem Schalter "Set" das aktuell aktive Tab gesichert
Die Schalterleiste kann über das Attribut dashboard_showtabs deaktiviert werden, oder wahlweise über oder unter dem Dashboard platziert werden.
Siehe dashboard_showtabs

Im Gruppentitel erscheint an deren rechten Rand ein Symbol (+/-). Mit diesem kann man die Gruppe minimieren oder die voreingestellte Größe wieder herstellen.
Siehe dashboard_showtooglebuttons

Dashboard Helper

Zum besseren Ausrichten der einzelnen Gruppen werden zur Unterstützung einige Hilfen angezeigt. Die erste ist die Anzeige eines Rahmens um das Dashboard. Genauer gesagt um die einzelnen Reihen/Spalten des Dashboards. Eine weitere Hilfe ist der Hintergrund der Gruppen. Dieser kann über die Mindestgröße der Gruppe hinaus gezogen werden. Damit können beliebig große Abstände zwischen den einzelnen Gruppen eingestellt werden.
Siehe dashboard_showhelper

Da nun die ersten Gruppen im Dashboard angezeigt werden, geht es nun darum, diese an die gewünschten Stellen zu platzieren. Dazu werden erst noch die verschiedenen Reihen und Spalten eingerichtet.

Das Dashboard verfügt über drei Reihen. Oben, Mitte und Unten. In der Standardeinstellung wird nur die mittlere Reihe angezeigt. Die mittlere Reihe sollte auch immer eingesetzt werden, da diese die Breite des Dashboard vorgibt. Für dieses kleine HowTo werden aber die obere und die mittlere Reihe eingeblendet, indem das Attribut dashboard_row auf top-center gestellt wird. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich, je Tab eine andere Einstellung zu wählen.
Siehe dashboard_row

Die Breite, die das Dashboard auf dem Bildschirm einnimmt, kann über das Attribut dashboard_width festgelegt werden. Standard ist die Breite von 100%. Es kann neben einem Prozentwert auch eine Breite in Pixel angegeben werden.
Siehe dashboard_width

Die Höhe der einzelnen Reihen kann über die Attribute dashboard_rowtopheight für die obere Reihe, dashboard_rowbottomheight für die untere Reihe und dashboard_rowcenterheight für die mittlere Reihe festgelegt werden. Damit können die Reihen nach den eigenen Bedürfnissen angepasst werden. Für dieses HowTo wird dashboard_rowtopheight auf 300 und dashboard_rowcenterheight auf 400 eingestellt. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.
Siehe dashboard_rowtopheight
Siehe dashboard_rowbottomheight
Siehe dashboard_rowheight

Die mittlere Reihe hat (historisch bedingt) eine Besonderheit. Diese kann in maximal 5 Spalten unterteilt werden. Für unser Beispiel setzen wir das Attribut dashboard_colcount auf 2. Diese Einstellung gilt für das gesamte Dashboard und somit für alle verwendeten Tabs. Es ist nicht möglich je Tab eine andere Einstellung zu wählen.
Weiter legen wir mit dem Attribut dashboard_rowcentercolwidth die Breite der ersten Spalte mit 30% und die der zweiten Spalte mit 70% fest indem wir dem Attribut dashboard_rowcentercolwidth den Wert 30,70 zuteilen.
Siehe dashboard_colcount

Sicherlich ist das Positionieren einfach, und jeder wird das hinbekommen. Zwei, drei Worte möchte ich trotzdem darüber verlieren.

Verschieben
Gruppen können in andere Reihen oder Spalten des Dashboards verschoben werden. Dazu muss in die Gruppe geklickt werden und die Maustaste gedrückt gehalten werden. Los lässt man diese wenn man an der richtigen Stelle ist. Das war wohl schon jedem klar.
Ein möglicher Zielort wird mit einem abgerundeten Platzhalter markiert. Dieser verschiebt auch, falls notwendig, andere Gruppen. Manchen wundert es warum dieser Zielort manchmal recht spät angezeigt wird. Dies hängt von der Position des Mauszeigers ab. Aha?! Je weiter oben man eine Gruppe anpackt, desto höher muss man die Maus schieben. Oder anders formuliert, wenn sich ca. 50% der Gruppenfläche im Zielbereich befinden wird dieser Zielort erst markiert. Das Verschieben einer Gruppe von einem Tab in das andere ist nicht möglich. Letztendlich bleibt jedem nur Ausprobieren.

Gruppen können über, unter, neben und vor anderen Gruppen verschoben werden. Auch das erfolgt wie bereits oben aufgeführt. Dies ist für viele nichts neues. Zu beachten ist aber dass sich eine Gruppe nur dann vor oder neben einer anderen positionieren lässt wenn diese von der Breite in das Dashboard passen. Wenn Ihr also Gruppen nebeneinander positionieren wollt dürfen diese in Summe nicht breiter als das Dashboard sein.
Dies gilt nicht für die Höhen der Gruppen. Diese können in Summe höher als das Dashboard und höher als eine Reihe sein. Hier findet keine Begrenzung statt wie bei der Breite. Um jedoch das ein oder andere optisch nicht so schöne Ergebnis zu bekommen sollte darauf geachtet werden dass keine Gruppe über eine Reihe hinaus ragt.


Für unser Beispiel verschieben wir zum Testen die Gruppen in beliebige Reihen bzw. Spalten der mittleren Reihe. Danach bitte den "Set" Schalter drücken, dieser hat sich durch die Verschiebe-Aktionen bereits rot markiert.

Ausrichtung von einzelnen Gruppen

Das Ausrichten ist gleichermaßen einfach wie das Positionieren und sollte auch nichts Neues sein. Aber auch hier möchte ich darüber zwei, drei Worte verlieren.

Das Positionieren ist nur möglich, wenn das Dashboard nicht gesperrt ist (Lock/Unlock). Dann wird eine abgeschrägte Ecke an der Gruppe angezeigt, mit der die Größe gezogen werden kann.
Jede Gruppe kann in Höhe und Breite beliebig gezogen werden, wobei genau das wieder einen Haken hat: Das Größerziehen ist nur bedingt möglich. Die Breite/Höhe ist auf die Breite/Höhe der Dashboard Reihe (oder Spalte) begrenzt. Damit kann man eine Gruppe nicht über den Rand des Dashboards hinaus vergrößern.
Das Kleinerziehen ist auch nur bis zu einer Mindestgröße möglich. Die Mindestgröße ist abhängig vom Inhalt der Gruppe, kann also von Gruppe zu Gruppe unterschiedlich sein.
Ein Sonderverhalten beim Vergrößern/Verkleinern gibt es auch: Ist eine Gruppe höher als die Reihe, lässt sich die Gruppe zwar dort positionieren. Beim Ausrichten springt dann der untere Rand nicht auf die Mindesthöhe der Gruppe, sondern auf die maximale Höhe der Reihe. In diesem Fall sollte die Höhe der Reihe geändert werden. Ähnliches kann auch in der Breite auftreten.
Ändert sich der Inhalt einer Gruppe (wird z.B. ein Dummy dazugepackt), ändert sich die Positionierung der Gruppe nicht automatisch. In diesem Fall ist man immer gezwungen auch die Größe der Gruppe im Dashboard an die neue Gegebenheit anzupassen.

Für unser Beispiel ziehen wir die Gruppen beliebig größer. Danach bitte den "Set"-Schalter drücken. Dieser hat sich durch die Verschiebeaktionen bereits rot markiert.

Wie bereits etwas weiter oben erklärt wird die Positionierung der Gruppen im Dashboard durch die Betätigung des Schalters "Set" temporär zwischengespeichert. Dadurch wird die Positionierung bereits für einen Seitenrefresh gespeichert. Solange bis das Browserfenster geschlossen wird. Danach wären diese Einstellungen verloren.
Darum ist es notwendig die Positionierung permanent zu speichern, damit auch nach einem Neustart von FHEM die getroffenen Einstellungen und Positionierungen vorhanden sind. Dies geht über den in FHEM bekannten Weg über Save config.
Wird der Schalter "Set" nicht betätigt, wird auch über Save config die Positionierung nicht gespeichert. Daher ist es wichtig, immer zuerst mit dem Schalter "Set" die Einstellung zwischenzuspeichern und danach mit Save config den Zwischenspeicher permanent zu sichern.

Durch den Schalter "Set" wird für jedes Tab die Einstellung in das für das jeweilige Tab zuständige Attribut geschrieben. Für Tab 1 ist das Attribut dashboard_tab1sorting zuständig, für Tab 2 das Attribut dashboard_tab2sorting, usw. Diese Attribute sollten nicht editiert werden!

Es ist möglich jedem Tab einen eigenen individuellen Namen zu vergeben. Dazu ist für das jeweilige Tab das entsprechende Attribut zu befüllen. Z.B. für Tab 1 ist das Attribut dashboard_tab1name mit dem gewünschten Titel zu füllen.
Siehe dashboard_tab1name

Letzte Änderungen / Dashboard-Historie

  • (03.03.2014) Anzeigefehler bei readingGroups in einem Hiddenroom behoben
  • (17.03.2014) Fehlerausgabe durch dashboard_webfrontendfilter behoben
  • (26.03.2014) dashboard_showfullsize wird nicht im Raum "all" bzw. Everything angewendet
  • (18.04.2014) Attribut dashboard_lock State entfernt. Kann nur noch in der Detailansicht verändert werden.
  • (24.04.2014) Attribut dashboard_showhelper wird nicht mehr genutzt. Der Helper wird nur angezeigt wenn lockstate unlock ist.
  • (24.04.2014) Schalter Detail und Set werden nun rechts angezeigt.
  • (24.04.2014) Attribut dashboard_showtabs kann nicht mehr tabs-at-the-top-buttonbar-hidden oder tabs-on-the-bottom-buttonbar-hidden sein.
  • (05.07.2015) Änderungsübersicht und Update-Hinweise

Links

Abgerufen von „http://wiki.fhem.de/w/index.php?title=Dashboard&oldid=27687“