Neues Charting Frontend

Aus FHEMWiki

Diese Anleitung beschreibt die Installation und Konfiguration des neuen ExtJS-Frontends, dass u.a. eine javascriptbasierte Chartingfunktion bietet.

Frontend1.png
Frontend current.jpg
Frontendtable.jpg

Im Forum gibt es einen Beitrag, in dem über die Entwicklung diskutiert wird: http://forum.fhem.de/index.php?t=msg&th=10439&start=0&rid=0 Bei Problemen, Fragen oder Wünschen am besten dort eine Nachricht hinterlassen.

Aktueller Funktionsumfang:

Zur Zeit hat das Frontend folgende Funktionen:

  • Anzeige von Charts mit mehreren, frei wählbaren Y-Achsen (FHEM Geräte und Readings wählbar)
  • Charts können dynamisch (z.B. heutiger Tag) oder über einen festen Zeitraum angezeigt werden
  • Charts können generalisiert werden, um auch größere Datenmengen im Browser mit akzeptabler Geschwindigkeit darzustellen
  • Charts können mit Statistikfunktionen erstellt werden, z.B. mit Durchsnittswerten für eine gewissen Zeit (Average per Hour, Max per day, ...)
  • Charts können Solllinien hinzugefügt werden mit wählbarem Start- und Endwert
  • Chartachsen können selektiv ein und ausgeschaltet werden durch Klick auf die Legende
  • Charts können eingefärbt werden mit Farbe nach wahl, zudem ist eine Füllung möglich
  • Charts können gezoomt werden mit Hilfe der Maus durch aufziehen einer Box direkt im Chart
  • Charts werden bei Bedarf in der Datenbank über DbLog abgespeichert und können im Frontend auch wieder gelöscht werden
  • "Database Tables" ermöglicht die Anzeige des gesamten Datenbankinhalts in einer Tabelle im Browser, egal wie groß diese ist.
  • Anzeige der verfügbaren Geräte über den linken Bereich. Nach Auswahl eines Gerätes erhält man die Übersicht zu den aktuellen Readings.

Die Werte in dieser Ansicht werden automatisch alle 5 Sekunden aktualisiert. Zudem ist die Steuerung von "sets" möglich (on / off Button, Dropdown, etc.)

  • FHEM Kommandozeile. Sie kann mit Enter-Taste und dem Execute Button bedient werden.
  • Save Button, der wie bisher bekannt die Änderungen in der fhem.cfg speichert
  • Shutdown und Restart Button hinzugefügt, über die sich FHEM herunterfahren oder neustarten lässt. Bei einem Restart wird die Seite, sobald FHEM wieder hochgefahren ist, automatisch neugeladen


Zwingende Voraussetzung für die Nutzung des Frontends ist eine Datenbank und das Einbinden des Moduls 93_DbLog, da u.a. für das Charting auf die geloggten Daten zugegriffen wird. Daher ist eine Installation nur auf Systemen möglich, die die entsprechenden PerlModule mitbringen, bzw. nachinstallieren lassen.

Nach derzeitigem Stand ist die Installation inzwischen sogar neben PCs, Synologys und Raspberrys auch auf Fritzboxen möglich.

Update Danke der Hilfe von Jurij ist jetzt auch die Installation von DbLog auf einer Fritzbox mit mips-Archtiketur möglich (z.B. 7390, 7330, ..). Eine Anleitung findet sich hier: http://www.fhemwiki.de/wiki/Cpan_auf_Fritzbox


Installation

Grundinstallation

1.) FHEM auf den neuesten Stand bringen mit dem Befehl "update".

2.) In FHEM oder über telnet den folgenden Befehl aufrufen und ein paar Minuten warten: 

update thirdparty http://fhem.svn.sourceforge.net/viewvc/fhem/trunk/fhem/www/frontend frontend

DbLog installieren und konfigurieren

DbLog (http://fhem.de/commandref_DE.html#DbLog) muss, falls noch nicht geschehen, konfiguriert werden. Dazu wie folgt vorgehen:

  • Eine Datenbank sollte installiert sein. MySQL, Postgres, SQLite oder Oracle.
  • Unter Umständen müssen fehlende Perl Module nachinstalliert werden.

Ob dies nötig ist fällt spätestens auf, wenn im übernächsten Schritt die fhem.cfg angepasst und fhem neu gestartet wurde. Dann sollten sich bei Problemen im Log von fhem entsprechnde Hinweise finden. Unter Linux installiert man die Module z.B. für SQLite mit "apt-get install libdbi-perl libdbd-sqlite3-perl" Alternativ auch direkt über Perl möglich mit cpan (http://fhem.de/commandref_DE.html#DbLog). Auf einer Synology kann der folgende Beitrag helfen: http://forum.fhem.de/index.php?t=msg&th=11071&start=0&rid=0

  • Die Datenbank muss nun vorbereitet werden, sprich es müssen zumindest 2 Tables erstellt werden.

Beispielscripte findet man z.B. dort: http://fhem.svn.sourceforge.net/viewvc/fhem/trunk/fhem/contrib/dblog/. Es muss also ein Table history und ein Table current erstellt werden, wie in den Beispiel SQLs zu sehen ist. Anschließend muss die Datei db.conf angepasst werden. Dort muss der Datenbankname, der Benutzer und das Passwort für die Datenbank eingetragen werden. Beispiele dazu findet man auch in dem vorigen Link.

  • In die fhem.cfg muss eine Zeile eingefügt werden die definiert, was alles über DbLog gespeichert werden soll.

Diese Zeile kann z.B. so aussehen (loggt alles in die Datenbank): 

define myDbLog DbLog /etc/fhem/db.conf .*:.*

oder für ein konkretes Gerät (Groß/Kleinschreibung beachten!): 

define logdb DbLog db.conf ESA2000_LED_011e
  • FHEM neustarten und ins FHEM-Log schauen. FHEM sollte hoch fahren und auch loggen, dass es zur Datenbank verbunden ist.

Tut es das nicht oder FHEM startet garnicht, liegt eine Fehlkonfiguration vor. Dann nochmals die vorherigen Schritte prüfen und das Logfile nach dem Problem befragen.

Datenbank vorbereiten

Zuletzt muss auf der Datenbank ein Table für das Frontend erstellt werden. 

Für MySQL kann folgendes SQL in der Datenbank abgesetzt werden: 
     CREATE TABLE frontend (ID int NOT NULL UNIQUE AUTO_INCREMENT, TIMESTAMP TIMESTAMP DEFAULT CURRENT_TIMESTAMP, TYPE varchar(64), NAME varchar(64), VALUE TEXT)
   Für SQLite3 kann folgendes SQL in der Datenbank abgesetzt werden: 
     CREATE TABLE frontend (ID INTEGER PRIMARY KEY, TIMESTAMP TIMESTAMP DEFAULT CURRENT_TIMESTAMP, TYPE TEXT, NAME TEXT, VALUE TEXT);
   Für Postgres kann folgendes SQL in der Datenbank abgesetzt werden: 
     CREATE TABLE frontend (ID SERIAL, TIMESTAMP TIMESTAMP (0) DEFAULT LOCALTIMESTAMP, TYPE TEXT, NAME TEXT, VALUE TEXT);

Sollte DbLog nun laufen kann das Frontend über Adresse des Servers:8083/fhem/frontend/index.html aufgerufen werden, z.B. 

http://192.168.0.100:8083/fhem/frontend/index.html
  • Sollte DbLog noch nicht entsprechend konfiguriert sein, so bekommt man hier entsprechendes Feedback.

Ansonsten ist das Frontend nun einsatzbereit. Für eine Bedienungsanleitung siehe im unteren Abschnitt "Bedienung".

Das Frontend Updaten

In FHEM oder über telnet den folgenden Befehl aufrufen und ein paar Minuten warten: 

update thirdparty http://fhem.svn.sourceforge.net/viewvc/fhem/trunk/fhem/www/frontend frontend

Bedienung

Ziel des Frontends ist eine möglichst selbsterklärende Bedienung. Fragen und Probleme können jederzeit im Forum, am besten im Beitrag 

http://forum.fhem.de/index.php?t=msg&th=10439&start=0&rid=0

gestellt werden. Eine Anleitung folgt, sobald ich mehr Zeit dazu finde...


Installationsanleitung von Puschel

Hardwarevoraussetzungen bei Installation auf einem RasPi 

RasPi Model B
 Funktionierende Internetanbindung

Softwarevoraussetzungen: 

Deutsches Tastaturlayout (j für Ja)
 Funktionsfähige FHEM-Installation auf RPi Wheezy welche mittels update auf den letzten Stand 
 gebracht wurde ([http://www.fhemwiki.de/wiki/Kategorie:Raspberry_Pi http://www.fhemwiki.de/wiki/Kategorie:Raspberry_Pi]).

Das Frontend wurde mittels 

update thirdparty http://fhem.svn.sourceforge.net/viewvc/fhem/trunk/fhem/www/frontend frontend

installiert. Zugriff auf den RPi mittels Putty ist gegeben.

Zugriffsberechtigungen der Ordner sind auch gegeben (Schreiben in /opt/fhem)

<Befehl> = diese Zeile wird am Putty-Prompt eingegeben (ohne <>)

<IP_des_RPi> = IP-Adresse über der der RPi erreichbar ist

Was wird gemacht?

Wir werden das neue Chart-Frontend mittels SQLite3 und allen benötigten Bibliotheken auf dem RPi einrichten.

Dann fangen wir mal an. 

1. Wir verbinden uns per Putty mit unserem RPi und loggen uns ein.
 2. Um uns das ständige sudo zu ersparen geben wir als erstes ein <sudo bash> ein.

Und nun geht es los. 

3. <apt-get update>
 4. <apt-get upgrade> und die Nachfrage mit „j“ beantworten
 5. <apt-get install sqlite3>
 6. <apt-get install libdbi-perl libdbd-sqlite3-perl>
 7. <apt-get install –f>

Was haben wir bis hierher gemacht? 

Wir haben die Pakete für unsren RPi neu eingelesen.
 Wir haben unsere RPi-Paketinstallation auf den neuesten Stand gebracht.
 Wir haben sqlite3 installiert.
 Wir haben die benötigten Bibliotheken installiert.
 Wir haben alle Abhängigkeiten aufgelöst und fehlende Pakete nachinstallieren lassen.

Nun bereiten wir unsere Datenbank vor.

In Putty geben wir als erstes ein <cd /opt/fhem> ein.

Nun werden alle Dateien in diesem Ordner erstellt – wer will kann das natürlich anpassen.

Anschliessend geben wir am Putty-Promt <sqlite3 fhem.db> ein.

Damit haben wir unsere Datenbank angelegt und diese fhem.db genannt. Nun zeigt unsere Prompt in Putty sqlite3> an. Wir befinden uns also in unserer Datenbank.

In dieser Datenbank werden wir noch 2 TABLES anlegen – einmal current und einmal history. Dies könnt ihr einfach per copy&paste übernehmen. 

CREATE TABLE `history` (TIMESTAMP TIMESTAMP, DEVICE varchar(32), TYPE varchar(32), EVENT varchar(512), READING varchar(32), VALUE varchar(32), UNIT varchar(32));
 CREATE TABLE `current` (TIMESTAMP TIMESTAMP, DEVICE varchar(32), TYPE varchar(32), EVENT varchar(512), READING varchar(32), VALUE varchar(32), UNIT varchar(32));

Und noch eine für das Frontend: 

CREATE TABLE frontend (ID INTEGER PRIMARY KEY, TIMESTAMP TIMESTAMP DEFAULT CURRENT_TIMESTAMP, TYPE TEXT, NAME TEXT, VALUE TEXT);

Nun können wir 

a) mit <.tables> schauen ob 3 Einträge auftauchen (current, history, frontend)
 b) mit <.exit> verlassen wir SQLite3 wieder und kehren wieder auf unseren Putty-Prompt zurück.

Bevor wir nun in fhem DBLog definieren, müssen wir erstmal unsere db.conf anlegen.

Dies geschieht mittels <nano db.conf>.

Gefüllt wird dieses Konfigfile mit 

 %dbconfig= (
 connection => "SQLite:dbname=/opt/fhem/fhem.db",
 user => "",
 password => ""
 );

Mit STRG+X und „j“ abspeichern und nano wieder verlassen.

Im Ordner /opt/fhem sollten nun also zusätzlich die Dateien db.conf und fhem.db liegen.

Ist das der Fall und die fhem.db hat die benötigten Rechte können wir in fhem unser DBLog definieren. Ich habe der Einfachheit halber der Gruppe und jedem Schreibzugriff gewährt.

Dies geschieht mittels 

<chmod –R g+w fhem.db>
 <chmod –R o+w fhem.db>

in der Putty-Eingabe da fhem gemeckert hat es kann nicht in die Datei schreiben.

Nun also noch unser 

define myDbLog DbLog /opt/fhem/db.conf .*:.*

in fhem eingetragen und ab hier wird nun ALLES in die Datenbank geschrieben.

Nun können wir in unserem Browser (getestet mit FF 19.0.2) auf unser Frontend zugreifen: 

http://<IP-des_RPi>:8083/fhem/frontend/index.html

Achtung! Nicht erschrecken wenn beim ersten Zugriff nur eine leere Seite erscheint. Einfach den Browser aktualisieren und am neuen Frontend erfreuen.

Getestet: 26.03.2013

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