SmartVISU Widget für Plots mit DbLog aus FHEM

Begonnen von ToGe88, 28 Oktober 2015, 13:02:47

Vorheriges Thema - Nächstes Thema

ToGe88

SmartVISU Database Plot Widget

(http://i.imgur.com/0lzjG1F.png)

Da es ja bis jetzt keine Möglichkeit gab in SmartVISU direkt Plots aus FHEM darzustellen habe ich mich mal daran gemacht ein Widget dafür zu programmieren. Gelöst habe ich es über eine PHP Schnittstelle welche die DbLog Daten direkt aus der mySQL oder SQLite Datenbank ausliest und dann an das Widget übergibt. Damit das ganze nicht zu statisch wird, habe ich automatische Updates der Plots mit eingebaut welche über GADs getriggert werden. Die Plots basieren auf highchart.js, welches ja in SmartVISU schon enthalten ist um die schöne Optik beizubehalten. Die Plots können über das Widget per Konfigurations Arrays sehr umfangreich angepasst und individualisiert werden.

Ich würde mich freuen wenn sich vielleicht ein paar Leute finden die das Widget ausprobieren und evtl. Tipps und Anregungen zu weiteren Verbesserungen haben. Für die Zukunft habe ich noch geplant das Widget zu erweitern um auch andere Plot Typen zu integrieren. Bei Fragen, Bugs oder Problemen würde ich mich natürlich auch über eine Rückmeldung freuen  ;D

Hier der Link zum Widget sowie Anleitung und Beispielen zur Einrichtung: https://github.com/ToGe3688/db_plot_widget


Beste Grüße,
Tobias



revil.o

#1
Hallo Tobias,

das schaut ja schonmal gut aus. Hab mir Deinen Code mal gezogen und in SmartVISU eingebaut. Werde es mal ausführlich testen, wenn es denn mal bei mir läuft    ;) .
Habe aber leider bisher noch kein Plot ans laufen bekommen.

Viele Grüße

Oliver

edit: 16:00 Uhr:

folgender Fehler tritt beim Einbinden des Widgets auf:

dbPlot Error (Initial)
[dbPlot.widget]: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''300'' at line 1

edit: 23:21 Uhr

ERFOLG: widgets funktionieren super, details dazu morgen (..)



ToGe88

#2
Zitat von: revil.o am 02 November 2015, 14:32:27
Hallo Tobias,

das schaut ja schonmal gut aus. Hab mir Deinen Code mal gezogen und in SmartVISU eingebaut. Werde es mal ausführlich testen, wenn es denn mal bei mir läuft    ;) .
Habe aber leider bisher noch kein Plot ans laufen bekommen.

Viele Grüße

Oliver

edit: 16:00 Uhr:

folgender Fehler tritt beim Einbinden des Widgets auf:

dbPlot Error (Initial)
[dbPlot.widget]: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''300'' at line 1

edit: 23:21 Uhr

ERFOLG: widgets funktionieren super, details dazu morgen (..)

Hi Olly,

ich habe bei GitHub gesehen das du bereits einen Fix für die Nutzung mit einer mySQL DB hast. Ich habe diesen mal direkt eingebaut! Konnte es hier leider nicht lokal testen mit MySQL. Besten Dank dafür!

Ich habe zudem nochmal das gesamte Script überarbeitet, es gab nämlich noch ein paar zusätzliche Probleme die mir erst beim Test über längere Zeit aufgefallen sind:

1. Wenn man mehrere Plots in SmartVISU angelegt hat und nach einiger Zeit die Seite gewechselt hat wurde für den Plot nur der jeweils letzte Punkt geladen und die Daten dazwischen einfach ausgelassen. Das ist jetzt gefixt und der Plot wird bei jedem Update mit den gesamten Daten versorgt.

2. Das gleiche Problem hat dafür gesorgt das wenn man über längere Zeit die Plots im Browser geöffnet hatte die Punkte immer weiter zum Plot hinzugefügt wurden. Das hat nach einiger Zeit zum Absturz des Browsers, bzw. sehr hoher Speicherauslastung geführt. Ist mit dem Fix aus 1. aber ebenfalls behoben da jetzt nurnoch die Daten genutzt werden die auch wirklich dargestellt werden.

Zusätzlich habe ich bereits Vorbereitungen getroffen um das Script so anzupassen das es in Zukunft auch Plots zwischen zwei bestimmten Zeitpunkten anzeigen kann.

Du kannst dir die neue Version ja nochmal laden und testen! Kannst auch gerne Pull-Requests bei GitHub stellen wenn dir noch etwas anderes auffällt!

Gruß,
Tobi

marvin78

Der Patch für mySQL wird aber so nicht funktionieren. Diese beiden Zeilen müssen umgedreht werden:

$db->setAttribute( PDO::ATTR_EMULATE_PREPARES, false );
$db = new PDO('mysql:host=' . $host . ';' . $database, $mysql_username, $mysql_password);

ToGe88

Zitat von: marvin78 am 03 November 2015, 12:28:35
Der Patch für mySQL wird aber so nicht funktionieren. Diese beiden Zeilen müssen umgedreht werden:

$db->setAttribute( PDO::ATTR_EMULATE_PREPARES, false );
$db = new PDO('mysql:host=' . $host . ';' . $database, $mysql_username, $mysql_password);


Ist geändert, danke für den Hinweis!

Gruß,
Tobi

dev0

Works like a charm!!!

Na das nenne ich doch mal einen gelungenen Einstand. Vielen Dank.

/Uli

Sebastian

Hallo,

brauche mal Hilfe, irgendwie bin ich zu blöd :)


    Copy widget_dbplot.php and widget_dbplot.html files to SmartVISU widget folder (/widgets)
    Edit the widget_dbplot.php file and set your database connection settings.
    Copy visu.js to the folder of your SmartVISU page (/pages/myPage) or if you already have a visu.js file just append the content to the file.

Hab ich gemacht :)

Was genau muss ich jetzt zb in meine room_sleeping.html eintragen um einen Chart zu bekommen ?

{% set plotOptions =
[
    {
        'update_trigger_gad': 'HeatingTemperatureTrigger',
        'device': 'wz.temp',
        'reading': 'measured-temp',
        'config': {
            'name': 'Temperature',
            'type': 'spline'
        }
    }
]%}
{{ dbPlot.linePlot('HeatingPlot', 'Temperatures', '', '', 'Temperatures', '°C', plotOptions, '', '', 300) }}
{% endblock %}


steh irgendwie aufm schlauch ...

sorry
Gruß
Sebastian

marvin78

Steh doch alles da.

HeatingTemperatureTrigger ist der gad, der triggert, wenn es einen neuen Wert für deinen Plot gibt. wz.temp ist das Device (Devicename, so wie er auch in der DB steht). measured-temp ist das reading, welches aus der DB gelesen werden soll.

Thargor

Wow! Das ist ja genial!

Sehe ich das richtig, dass das mit einer SQLite Datenbank nur funktioniert, wenn diese lokal auf dem gleichen Rechner liegt?

marvin78


ToGe88

Zitat von: marvin78 am 04 November 2015, 14:26:31
Steh doch alles da.

HeatingTemperatureTrigger ist der gad, der triggert, wenn es einen neuen Wert für deinen Plot gibt. wz.temp ist das Device (Devicename, so wie er auch in der DB steht). measured-temp ist das reading, welches aus der DB gelesen werden soll.

Genau! Als zusätzliche Info vielleicht noch: Device ist das Gerät wie es in FHEM heißt (also bei Internals unter NAME), Reading ist der Wert der vom Gerät ausgelesen werden soll (Also in FHEM unter Readings). Die GAD in Fronthem legst du dann optimalerweise so an das sie auf das gleiche Reading zeigt. (Konverter ist egal, es ist nur wichtig um das Update vom Plot zu triggern wenn neue Daten verfügbar sind) Ganz wichtig ist natürlich auch das DbLog in FHEM richtig eingerichtet ist, sonst wirds auch nichts mit dem Plot.

Berichte mal obs geklappt hat!

Gruß

ToGe88

Zitat von: Thargor am 04 November 2015, 15:03:53
Wow! Das ist ja genial!

Sehe ich das richtig, dass das mit einer SQLite Datenbank nur funktioniert, wenn diese lokal auf dem gleichen Rechner liegt?

Falls du die Datenbank auslagern willst ist MySQL dein Stichwort.  :D

Sebastian

Sooo läuft jetzt mit externer Mysql Datenbank :)

das php5-mysql Modul hat gefehlt ...

Wunder mich nur über die Minuswerte, da muss ich nochmal schauen. Anonsten top.

PS: Kann man die Farben individualisieren ?



Gruß
Sebastian

marvin78

Am besten schaust du dir mal die highcharts-Doku an (google nach highcharts). Man kann so einiges "schöner" machen ;)

Farbe geht über den Parameter color in der config.

ToGe88

Zitat von: Sebastian am 04 November 2015, 15:35:55
Sooo läuft jetzt mit externer Mysql Datenbank :)

das php5-mysql Modul hat gefehlt ...

Wunder mich nur über die Minuswerte, da muss ich nochmal schauen. Anonsten top.

PS: Kann man die Farben individualisieren ?


Wegen den Minuswerten einfach bei den yAxis Options min: 0 setzen! Ansonsten wie marvin schon gesagt hat am besten mal in die highcharts api doku gucken, da kann man noch sehr sehr viel individualisieren und anpassen. Die entsprechenden Stellen in der Doku sind auf der GitHub Widget Seite verlinkt.