Neues Charting Frontend

Neues Charting Frontend
Zweck / Funktion
Chart Frontend
Allgemein
Typ	Inoffiziell
Details
Dokumentation	siehe Forum
Support (Forum)	Frontends
Modulname
Ersteller	Johannes
Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref!

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

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 all https://svn.fhem.de/fhem/trunk/fhem/www/frontend/controls_frontend.txt

Treten bei dem Befehl Fehler auf mit der Meldung "empty answer received", wie auch hier beschrieben http://forum.fhem.de/index.php/topic,10439.msg219066.html#msg219066 dann findet sich die Lösung hier: http://forum.fhem.de/index.php/topic,10439.msg219082.html#msg219082

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.

MySQL-Datenbank

Hinweis: nicht für Einplatinencomputer (wie z.B. Raspberry Pi, ODROID, Beagle etc.) empfohlen.

Installation der notwendigen Perl-Datenbank-Module:

apt-get install libdbi-perl libdbd-sqlite3-perl

Alternativ auch direkt über Perl möglich mit cpan (commandref/DbLog). Auf einer Synology kann der folgende Beitrag helfen: DBLog auf Synology

Die Datenbank benötigt die notwendigen Tabellen und Indices. Im fhem-Tarball (siehe Download-Möglichkeiten) sind im Verzeichnis

<Pfad/zu/>fhem/contrib/dblog

sind entsprechende Scripte zu finden. Diese können auf der Kommandozeile direkt an die Datenbank übergeben werden. Dieses Beispiel führt dies für MySQL aus

root@fhem:/opt/fhem/contrib/dblog# mysql -u root -p < db_create_mysql.sql 
Enter password: 
root@fhem:/opt/fhem/contrib/dblog#

Möchte man den Datenbank-Nutzer und das Datenbank-Nutzerpaßwort anpassen, ist die db_create_-Datei vorher mit einem Editor anzupassen.

Nach Eingabe kann die erfolgreiche Rückgabe geprüft werden:

root@fhem:/opt/fhem/contrib/dblog# mysql -u root -p
Enter password: 

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| fhem               |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.00 sec)

mysql> use fhem;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed

mysql> show tables;
+----------------+
| Tables_in_fhem |
+----------------+
| current        |
| history        |
+----------------+
2 rows in set (0.00 sec) 

mysql>

Dabei wird 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, bei SQLite bleiben entsprechende Einträge entsprechend leer:

## for MySQL
################################################################
%dbconfig= (
        connection => "mysql:database=fhem;host=127.0.0.1;port=3306",
        user => "fhemuser",
        password => "fhempassword"
);
################################################################

Zuletzt muss in der Datenbank eine Tabelle für das Frontend erstellt werden. Bei MySQL erfolgt dies durch

root@fhem:/opt/fhem# mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 42
Server version: 5.5.35-1ubuntu1 (Ubuntu) 

Copyright (c) 2000, 2013, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners. 

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. 

mysql> use fhem;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> CREATE TABLE frontend (ID int NOT NULL UNIQUE AUTO_INCREMENT, TIMESTAMP TIMESTAMP DEFAULT CURRENT_TIMESTAMP, TYPE varchar(64), NAME varchar(64), VALUE TEXT);

PostgreSQL-Datenbank

To be added

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);

SQLite-Datenbank

Installation der notwendigen Perl-Datenbank-Module:

apt-get install libdbi-perl libdbd-sqlite3-perl

Alternativ auch direkt über Perl möglich mit cpan (commandref/DbLog). Auf einer Synology kann der folgende Beitrag helfen: DBLog auf Synology

Die Datenbank benötigt die notwendigen Tabellen und Indices. Im fhem-Tarball (siehe Download-Möglichkeiten) sind im Verzeichnis

<Pfad/zu/>fhem/contrib/dblog

sind entsprechende Scripte zu finden. Diese können auf der Kommandozeile direkt an die Datenbank übergeben werden. Dieses Beispiel führt dies für SQLite aus:

root@fhem:/opt/fhem# sqlite3 fhem.db < contrib/dblog/db_create_sqlite.sql

Dabei wird 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, bei SQLite bleiben entsprechende Einträge entsprechend leer:

## for SQLite (username and password stay empty for SQLite)
################################################################
%dbconfig= (
        connection => "SQLite:dbname=/opt/fhem/fhem.db",
        user => "",
        password => ""
);
################################################################

Zuletzt muss in der Datenbank eine Tabelle für das Frontend erstellt werden. Für SQLite erfolgt dies durch:

root@fhem:/opt/fhem# sqlite3 fhem.db
SQLite version 3.8.2 2013-12-06 14:53:30
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite> CREATE TABLE frontend (ID INTEGER PRIMARY KEY, TIMESTAMP TIMESTAMP DEFAULT CURRENT_TIMESTAMP, TYPE TEXT, NAME TEXT, VALUE TEXT);

fhem.cfg Einträge

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.

Das Frontend Updaten

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

update all https://svn.fhem.de/fhem/trunk/fhem/www/frontend/controls_frontend.txt

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, die mittels update auf den letzten Stand gebracht wurde (siehe auch: Raspberry Pi)
• Das Frontend wurde installiert mittels

update all http://svn.code.sf.net/p/fhem/code/trunk/fhem/www/frontend/controls_frontend.txt

• 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.

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

• Forumsdiskussion über dieses Frontend; bei Problemen, Fragen oder Wünschen am besten dort eine Frage oder Nachricht hinterlassen.