Neues Charting / Plotting - GUI Redesign?

[Johannes]

Update:
Das Frontend ist nun auch kompatibel mit Filelog. Für die installation und Nutzung des Frontends ist kein DbLog mehr notwendig!
Es reicht zur Installation aus, den Befehl

Code Auswählen Erweitern


update thirdparty http://svn.code.sf.net/p/fhem/code/trunk/fhem/www/frontend frontend

in FHEM aufzurufen. Anschließend kann das Frontend über

Code Auswählen Erweitern


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

aufgerufen werden. Somit können z.B. auch Fritzbox Nutzer das Frontend mit FileLogs verwenden.


Dieser Beitrag dreht sich um das von mir entwickelte, neue Frontend für FHEM.
Der Fokus des Frontends liegt auf dem Erstellen und Nutzen von Charts bzw. Diagrammen mit den Daten, die über FHEM gewonnen werden.
Ziel des Frontends ist es, dem Nutzer eine einfache Möglichkeit zu geben eigene, dynamische Diagramme selbst zu erstellen, durch eine grafisch "zusammenklickbare" Konfiguration.
Man muss sich nicht mit Konfigurationsdateien, regulären Ausdrücken und unverständlicher Syntax herumschlagen, sondern kann neue Charts in wenigen Sekunden generieren.

Zuerst mal ein paar Screenshots vom aktuellen Stand. Zu sehen ist die gesamte Oberfläche mit einem Beispielchart. Auf dem ersten Bild mit Konfiguration oben drüber, auf dem zweiten und dritten mit den Dargestellten Werten zusätzlich in tabellarischer Form:
(http://www7.pic-upload.de/thumb/23.11.13/8bt5x626d4.jpg) (http://www7.pic-upload.de/thumb/23.11.13/z6dnejhp5pg8.jpg) (http://www7.pic-upload.de/thumb/23.11.13/31usyzvqojw7.jpg)

Der Konfigurationsdialog im Detail:
(http://www7.pic-upload.de/thumb/23.11.13/5b6x4dtikog6.jpg)

Die Detailansicht eines FHEM-Gerätes mit selbstaktualisierender Anzeige der Messwerte:
(http://www7.pic-upload.de/thumb/23.11.13/jayy6iwkr3xe.jpg)

Die Oberfläche zur einfachen Abfrage der Datenbank mit Anzeige der gewünschten Messwerte:
(http://www7.pic-upload.de/thumb/23.11.13/ah428dxk8gab.jpg)

Ansicht des integrierten FHEM, voll bedienbar, verpackt in der neuen Oberfläche:
(http://www7.pic-upload.de/thumb/23.11.13/xygiuzdiubly.jpg)


Detaillierte Informationen (leider nicht mehr 100% aktuell, aber mindestens 80% :-), was das Frontend alles kann und wie es installiert wird findet sich im Wiki:
http://www.fhemwiki.de/wiki/Neues_Charting_Frontend

Wenn es Fragen oder Anregungen gibt, können die gerne hier gestellt werden.

Hier der ursprüngliche Beitrag, so wie alles begann:
-----------------------------------------------

Hallo!
Ich nutze FHEM seit einigen Wochen und bin ziemlich begeistert über die Möglichkeiten. Erstmal vielen Dank an alle Mitwirkenden für dieses tolle Projekt!
Ich nutze FHEM in erster Linie, um meinen Stromzähler abzulesen / auszuwerten und einen Überblick zu bekommen, was bei mir die Rechnung in die Höhe treibt.
Dazu bin ich in erster Linie auf die Plots angewiesen, um zu sehen, wann wieiviel Strom verbraucht wird.
Die Möglichkeiten von gnuplot sind ja wirklich umfassend, leider aber in der Konfiguration her nicht ganz einfach.
Auch ist die Weboberfläche von FHEM funktional, in meinen Augen aber nicht mehr ganz Zeitgemäß und in der Bedienbarkeit manchmal etwas umständlich.

Deshalb schwebt mir folgendes vor:

Ich arbeite schon seit einigen Jahren mit der Javascript Bibliothek ExtJS von Sencha (www.sencha.com).
Damit lassen sich sehr ansprechende und gut zu bedienende Web-Frontends / Anwendungen gestalten. Auch kann man damit ein sehr umfangreiches Charting umsetzen.
Für ein paar Beispiele kann man hier z.B. mal nachschauen: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/#sample-3
Die Charts werden direkt dynamisch im Browser gerendert, was z.B. die Vorteile mit sich bringt, dass man beim Überfahren eines Messwerts mit der Maus die Daten in einem Popup-Fenster angezeigt bekommen kann.

Da ich mir eh gerade mit ExtJS ein neues Charting zusammenbaue dachte ich, ich frage mal die Community ob ein Bedarf an einem solchen neuen Charting Modul - und wer weiss - vielleicht sogar Redesign der gesamten FHEMWEB-Oberfläche besteht.
Das von mir geschriebene Charting kann aktuell beliebige Parameter aus der Datenbank (dblog) auslesen und darstellen. Ich arbeite aktuell daran, das ganze konfigurierbar zu machen, so dass man aus DropDown Listen sich die relevanten Achsen auswählen und zuordnen kann. So lassen sich "grafisch" schnell ansprechende Charts gestalten.
Der erste einfache Stand hier mal in einem Screenshot:
(http://www10.pic-upload.de/thumb/20.01.13/nj2dbjbteyh8.jpg)



Der Fokus liegt also auf einfacher Bedienbarkeit / Usability mit wenig erforderlichem Hintergrundwissen für den Endanwender.
Und wie erwähnt, kann mit dieser Bibliothek auch die gesamte GUI überarbeitet werden (einfaches Beispiel: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout-browser/layout-browser.html).
Hier schwebt mir vor, viele Dinge, die man aktuell z.B. erstmal über die Doku nachschlagen muss und dann in Form von Befehlen ans Backend schickt, zu vereinfachen.
Beispielsweise die Erstellung eines Zeitgebundenen Events komplett grafisch zu gestalten mit Kalenderwidget und Dropdownlisten, so dass sich Prozesse / Anforderungen einfach und grafisch zusammenbauen lassen.

Wie gesagt, wenn hier Interesse bestehen sollte bin ich gerne bereit, das Charting z.B. ins FHEM SVN zu stellen und auch über ein GUI Redesign zu diskutieren und daran zu arbeiten.
Ich wäre natürlich auch für neue Ideen / neue Anforderungen zu haben.
Aber erstmal bin ich an eurem Feedback zu dieser Idee interessiert :-)

Grüße!

[Matthias Gehre]

Finde ich top, am Web Interface kann man noch viel machen. Ich freue mich auch über jeden, der zu FHEM beiträgt.

Ich würds vielleicht parallel machen, sodass man sowohl das alte als auch das neue Interface gleichzeitig (auf verschiedenen Ports)
nutzen kann.

[ChrisW]

Sehr gute idee ;)
Das Interface hat es echt nötig. Und die Auswertungen schauen echt cool aus :)

[Jumbo]

GEIL :-D

sieht echt cool aus....


wäre froh wenn da was kommt .. wäre auch bereit zu testen ...

[Johannes]

Hallo,

Ich würds vielleicht parallel machen, sodass man sowohl das alte als auch das neue Interface gleichzeitig (auf verschiedenen Ports)
nutzen kann.

Das ist auf jeden Fall richtig, es sollte erstmal eine parallel Entwicklung sein, die bei Bedarf genutzt werden kann. Dann kann man sehen, wie sich das entwickelt und überlegen, wie die Integration ablaufen soll. Ich kann von dahher auch losgelöst die erste Version mal online stellen, z.B. über Github, und Interessierte können sich selbst ein Bild machen.
Fokus wird dann jetzt erstmal auf einer ersten Oberfläche liegen, die ein einfaches Charting integriert.

[Matthias Gehre]

Für die allererste Version ist Github gut, so hab ich das mit den MAX Modulen auch gemacht.
Dann kann man aber auch schon ziemlich früh ins offizielle Repository wechseln,
was den Usern das Testen erleichtert.

[Johannes]

Scheinbar wird es bald schon eine neue GUI geben, genaueres weiss man (ich) aber noch nicht:
Link

Ich bin gespannt was da kommt, werde meine Arbeit aber erstmal fortsetzen...

[Rohan]

Hi Johannes,

... Das von mir geschriebene Charting kann aktuell beliebige Parameter aus der Datenbank (dblog) auslesen und darstellen. ...

Hmmm.... bedeutet das, dass man FHEM in eine DB statt in Text-Files loggen lassen muss?

Gruß
Thomas

[Johannes]

Hi,

Ja, aktuell ist das der Fall. Grund: Ich kenne mich mit Perl nicht genug aus, um ein passendes Modul zu schreiben.
Natürlich wäre es optimal, wenn da jemand Beihilfe leisten könnte, denn aktuell muss ich über php die Datenbank abfragen.
Dafür kann ich aber komplexe SQL Queries abschicken, zudem bringt eine Datenbank auch Vorteile mit sich gegenüber Textfiles (Indexes etc.)

Das Frontend kommuniziert über AJAX im JSON-Format mit FHEM. Dazu gibt es ja auch schon das JSONList Modul, was einige Daten bereitstellt.
Leider unterstützt FHEM, soweit ich weiss, keine "get" auf die geloggten Daten im JSON-Format. Das wäre natürlich optimal....

[Puschel74]

Hallo,

auch wenn ich "Progammiertechnisch" (leider) nichts beitragen kann, möchte ich dennoch eines anmerken:

Solange alle Systeme mit dem neuen GUI Redesign klarkommen ist das ja ok.
Leider weiß ich nicht in wie weit die FB7390 das wegschreiben der Log-Daten in eine DB unterstützt.

Nicht das die Nutzer der "kleinen" Systeme dann im Regen stehen.

Grüße

[Johannes]

Da gebe ich vollkommen recht, ich habe auch schon darüber nachgedacht.
Fritzboxen haben in der Tat einige Schwierigkeiten mit dblog:
  - Es fehlen in dem kompilierten Perl die Module DBI und DBD
  - sie lassen sich nicht mit cpan nachinstallieren, denn auch das fehlt
  - ein händisches kompilieren der Module war bei meinen Versuchen nicht erfolgreich, habe es dann gelassen

Abhilfe würde hier nur schaffen, auf dblog zu verzichten und gleichzeitig das JSONList Modul aufzubohren, so dass es die Log-Textfiles auslesen kann und als JSON ausgibt.
Außerdem wäre es nötig, die durchaus komplexen Queries in diesem oder einem anderen Modul unterzubringen.

Mein Problem ist halt, dass ich an dieser Stelle Hilfe bräuchte, denn Perl ist wie gesagt noch neu für mich.
Davon ab wäre es mal interessant zu wissen, wie das angekündigte, komplett neue HTML5 Frontend ausschaut und ob es lohnt, meine Arbeit fortzusetzen.

[Rohan]

... Davon ab wäre es mal interessant zu wissen, wie das angekündigte, komplett neue HTML5 Frontend ausschaut und ob es lohnt, meine Arbeit fortzusetzen.

Da wirst du dir an pah die Zähne ausbeißen ;) und wenn du es noch so oft erwähnst :)

[Prof. Dr. Peter Henning]

Nun, man muss den beiden Studenten schon Zeit geben, die Arbeit abzuschließen - und da werde ich keinen Druck aufbauen.
Ob man das nun "Zähne ausbeißen" nennen muss, sei Euch überlassen.
Die beiden haben in der vorher existierenden Mailing-Liste schon einige Diskussionen geführt, kann man dort nachlesen.

LG

pah

[Rohan]

.. sei Euch überlassen. ...

Er schafft es nicht, die Kanzel zu verlassen ... aber sei es drum ... lassen "wir" "ihn"... (ich rede aber nur für mich, wie immer pah)

Abgehoben ist anders, aber du (pah) machst das schon ^^ .. demnächst nur noch im Pluralis Majestatis würde deiner gerecht ... lol

Gruß
Thomas

[Prof. Dr. Peter Henning]

Die wahre innere Größe zeigt sich immer dann, wenn Menschen unter Pseudonymen andere persönlich angreifen.

LG

pah