Neues Charting Frontend

Aus FHEMWiki

Diese Anleitung beschreibt die Installation und Konfiguration des neuen ExtJS-Frontends, das u.a. eine auf Javascript basierende Chartingfunktion bietet.

Frontend1.png
Frontend current.jpg
Frontendtable.jpg

Aktueller Funktionsumfang

Folgende Liste ist nur ein Auszug:

  • Anzeige von Charts mit mehreren, frei wählbaren Y-Achsen (FHEM Geräte und Readings wählbar)
  • Als Datenquellen können sowhl FileLogs als auch eine Datenbank (DbLog) verwendet werden
  • Ein Chart aus verschiedenen Datenquellen ist problemlos möglich
  • Charts können dynamisch (z.B. heutiger Tag, letzte Stunde,...) oder über einen festen Zeitraum angezeigt werden
  • Achsen können generalisiert werden, um auch größere Datenmengen im Browser mit akzeptabler Geschwindigkeit darzustellen
  • Achsen können mit Statistikfunktionen versehen werden, z.B. mit Durchschnittswerten für einen gewissen Zeitraum (Average per Hour, Max per day, ...) (Achtung, nur per DbLog!)
  • es 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
  • Achsen können individuell und bequem über die Oberfläche gestylt werden (Füllung, Form, Farbe, Strichbreite, Transparenz, etc)
  • Charts können gezoomt werden mit Hilfe der Maus durch Aufziehen einer Box direkt im Chart
  • Charts können im Frontend gespeichert, gelöscht, umbenannt und in Räume verschoben werden
  • Der Bereich "Database Tables" ermöglicht die Anzeige des gesamten Datenbankinhalts (wenn DbLog genutzt wird) 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, die mit Enter-Taste und dem Execute Button bedient werden kann.
  • Save Button, der wie bisher bekannt die Änderungen in der fhem.cfg speichert.
  • Shutdown und Restart Buttons, über die sich FHEM herunterfahren oder neustarten lässt. Bei einem Restart wird die Seite, sobald FHEM wieder hochgefahren ist, automatisch neugeladen

Das Frontend kann mit dem FileLog oder DbLog Modul (oder beiden) genutzt werden. Meine Empfehlung: Wer die Installation von DbLog nicht scheut, sollte auf jeden Fall in eine Datenbank loggen.

Nach derzeitigem Stand ist die Installation von DbLog inzwischen sogar neben PCs, Synologys und Raspberrys auch auf Fritzboxen möglich. Dazu bitte auch die Anleitung Cpan auf Fritzbox beachten.

Installation

Basisinstallation

  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://svn.code.sf.net/p/fhem/code/trunk/fhem/www/frontend frontend

3. Soll das Frontend nur mit FileLog genutzt werden, ist die Installation jetzt schon fertig und das Frontend kann aufgerufen werden über: 

http://adressevonfhem:8083/fhem/frontend/index.html

4. Soll DbLog genutzt werden, müssen die folgenden Schritte durchgefürt werden:

DbLog installieren und konfigurieren

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 (DbLog commandref). Auf einer Synology kann der folgende Beitrag helfen: DBLog auf Synology

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

Beispielscripte findet man z.B. bei sourceforge. Es muss also eine Tabelle history und eine Tabelle current erstellt werden, wie in den Beispiel SQLs zu sehen ist. Anschließend muss die Datei db.conf angepasst werden. Dort müssen 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 neu starten und ins FHEM-Log schauen. FHEM sollte hochfahren und auch loggen, dass es zur Datenbank verbunden ist.

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

Datenbank vorbereiten

Zuletzt muss in der Datenbank eine Tabelle 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://svn.code.sf.net/p/fhem/code/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 in diesem Beitrag gestellt werden. Eine Anleitung folgt, sobald ich mehr Zeit dazu finde...

Installation auf einem Raspberry Pi (Anleitung von "Puschel")

Diese Anleitung funktioniert auch auf einem BeagleBone Black mit Debian.

Hardwarevoraussetzungen

  • 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 (siehe auch: Raspberry Pi)
  • Das Frontend wurde installiert mittels
update thirdparty http://svn.code.sf.net/p/fhem/code/trunk/fhem/www/frontend frontend
  • 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.

  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.
  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> (das "-" hier ggf. in der Putty-Sitzung überschreiben; unter Umständen stimmt der Hex-Code des Zeichens nach Copy/Paste nicht)

Was haben wir bis hierher gemacht?

  • Wir haben die Pakete für unser 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.</nowiki>

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 unser 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

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

Bevor wir nun in fhem DBLog definieren, müssen wir erst unsere db.conf anlegen. Dies geschieht mittels <nano db.conf>.

Gefüllt wird diese Konfigurationsdatei 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 Benutzer 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, dass es nicht in die Datei schreiben kann ("-" ggf wieder überschreiben nach Copy/Paste).

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 Firefox 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

Links

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