eCharts in FHEM (Version 0.0.6)

Begonnen von andies, 06 Februar 2024, 22:06:15

Vorheriges Thema - Nächstes Thema

andies

Ich habe einen vermutlich ungewöhnlichen Beitrag. Es geht um SVG und eCharts (Link zu Beispielen).

Bisher hatte ich für Grafiken immer grafana benutzt. Leider ist es so, dass ich auf einem Raspberry Pi leider serverseitig nicht die Grafana-Bilder mehr rendern kann (das ist ein bekanntes Problem in der Community) und ich daher zurück zu SVG bin. Das klappt ja wunderbar Dank Rudi.

Nun wurde hier mindestens einmal eCharts in die Runde geworfen. Das sieht mächtig schick aus und irgendwie hat es mich gereizt, das für FHEM einmal umzusetzen. Und vielleicht kann man das serverseitig rendern, da gibt es jedenfalls Hilfeseiten. Seit einigen Wochen sitze ich alleine daran (ich hatte erst noch Thyraz gefragt, ob er auch Lust hat - aber der hat FHEM den Rücken gekehrt). Jedenfalls habe ich heute einen allerersten Minierfolg erzielt, und den wollte ich mal teilen. Es gibt aber eine Reihe von doch massiven Problemen:
  • Ich bin kein Programmierer und Perl verwechsle ich manchmal mit Pearl, ok, schlechter Scherz. Jedenfalls kann mein Code schwierig lesbar sein.
  • Hinzu kommt, dass ich für meine Ziele immer so vorgehe, dass ich mir einen funktionierenden Code nehme und den so lange anpasse, bis es passt. Das führt bei mir mitunter zu kompletten FHEM-Abstürzen, weil ich zB Arrays, Hashes und anonyme Arrays nicht immer auseinanderhalten kann.
  • Beim Kopieren verstehe ich teilweise nicht, was ich da tue und bastle herum. Das ist ungefähr so, als ob jemand alle Kupferkabel anfasst um zu schauen, ob die Potential haben (da bin ich wohl nicht der einzige - angeblich macht das ja Papa romeo auch so ;-) )
  • eCharts nutzt eine javascript-Bibliothek, die man einbinden muss. Ich habe keine Ahnung, ob das mit anderen Tools von FHEM interagiert. Bei mir tut es das nicht, aber ich weiß über FHEM zu wenig.

Also, im Anhang ist jetzt eine pm-Datei. Ich werde aber aus den oben genannten Gründen nicht daran arbeiten, sie als offizielles Modul in FHEM zu integrieren. An dieser Datei werde ich ab und an basteln und mein Ziel ist es, die von mir verwendeten Grafiken von SVG in eCharts umzusetzen. Mein Ziel ist es, dass man die komplette Definition von SVG übernimmt und einfach statt der SVG direkt eine eCharts bekommt. Von diesem Ziel bin ich noch meilenweit entfernt ich kriege das derzeit nur mit einer Grafik hin, die genau einen Wert hat (aber nicht zwei oder mehr Kurven). Ich füge dennoch zwei Screenshots an, die zeigen, wie das aussehen kann.

Am schönsten wäre es natürlich, wenn jemand wie Richard da mal draufschaut und das gut findet, aber es kann ja nicht immer Weihnachten sein.

defmod myChart eCharts FileLog_GartentorTemp:SVG_FileLog_GartentorTemp_1:CURRENT
attr myChart plotsize 300,500
Man muss unter diesem Link die Installationsdateien herunterladen. Ich habe sie bei mir in ...www/tablet/eCharts/dist/echarts.js gelegt, wenn man das woanders hinlegen will, muss etwa in Zeile 101f. der Code angepasst werden.

---------------------------------------------------------------------
aktuell hier: Version 0.0.6, siehe letzten Post.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

carlos

#1
Also ich habe das mal getestet.
Ich bekomme einen  Fehler im UI(siehe Bild) und im log steht:
2024.02.10 03:20:14 5: eCharts rendering: defining filter
2024.02.10 03:20:14 5: eCharts rendering: getting plot data
2024.02.10 03:20:14 5: eCharts rendering: defining options

Angezeigt wird natürlich nichts.

Gruß

Hubert
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

andies

Hallo Hubert,

ich war letzte Woche krank und ich habe ja geschrieben, dass ich da ziemlich anfängerhaft herangehe. Ich schaue mir das aber in jedem Fall an, nur wird es etwas dauern!
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

So, jetzt habe ich mir das mal angeschaut, und ich verstehe den Fehler nicht. Kannst Du mir mal die Logdaten zukommen lassen? Mein File hat keine 657 Zeilen und das scheint eher so zu sein, dass in den Daten was nicht passt.

Am einfachsten ist es vielleicht, wenn Du eine Zeile einfügst in Deinen Code:
  ######################
  # finished
  ######################
  eCharts_pO '</script>'; # js-Umgebung schliessen
Log3($name, 5, "debug: ".$eCharts_RET); # <=== das ist neu
  return;
denn da wird mir angezeigt, was er eigentlich darstellen will. Oder es geht auch noch einfacher. Du gehst (bei Chrome) auf Anzeigen->Entwickler->Quelltext und suchst
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
und schreibst die nächsten Zeilen bis </script> auf. Da wird nämlich die Grafik erzeugt.

Mich stört momentan auch, dass bei mir die Zeitschiene nicht richtig dargestellt wird. Da ist also mehrfach ein Wurm drin.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

carlos

Da kommt eine ewig lange Ausgabe.
Hier nur der Anfang und das Ende:

2024.02.12 15:10:53 5: debug: <div id="main" style="width: 160px;height:800px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option ={"title":{"text":"mySenec-2024-02.log"},"tooltip":{"axisPointer":{"type":"cross"},"trigger":"axis"},"xAxis":{"type":"time","boundaryGap":"false"},"series":[{"data":[["2024-02-01T00:00:25Z","0.00"],["2024-02-01T00:01:22Z","0.00"],["2024-02-01T00:02:24Z","0.00"],["2024-02-01T00:03:22Z","0.00"],["2024-02-01T00:04:24Z","0.00"],["2024-02-01T00:05:23Z","0.00"],["2024-02-01T00:06:25Z","0.00"],["2024-02-01T00:07:24Z","0.00"],["2024-02-01T00:08:25Z","0.00"],["2024-02-01T00:09:25Z","0.00"],["2024-02-01T00:10:25Z","0.00"],["2024-02-01T00:11:23Z","0.00"],["2024-02-01T00:12:24Z","0.00"],["2024-02-01T00:13:24Z","0.00"],["2024-02-01T00:14:25Z","0.00"],["2024-02-01T00:15:25Z","0.00"],["2024-02-01T00:16:25Z","0.00"],["2024-02-01T00:17:25Z","0.00"],

........


2-12T14:58:05Z","0.00"],["2024-02-12T14:59:05Z","0.00"],["2024-02-12T15:00:08Z","0.00"],["2024-02-12T15:01:06Z","0.00"],["2024-02-12T15:02:05Z","0.00"],["2024-02-12T15:03:05Z","0.00"],["2024-02-12T15:04:06Z","0.00"],["2024-02-12T15:05:05Z","0.00"],["2024-02-12T15:06:05Z","0.00"],["2024-02-12T15:07:05Z","0.00"],["2024-02-12T15:08:05Z","0.00"],["2024-02-12T15:09:06Z","0.00"],["2024-02-12T15:10:07Z","0.00"]],"smooth":"0.6","type":"line"}],"yAxis":{"type":"value"}};myChart.setOption(option);
</script>


Gruß

Hubert
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

andies

Nur zur Sicherheit: wo liegt bei Dir
www/tablet/eCharts/dist/echarts.jsUnd kannst du mal schauen, ob in der Quelldatei der Dateiname echarts.js erwähnt wird? Vor dem riesigen Text, den du kopiert hast?
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

carlos

Problem gelöst, schreibfehler:

www/tablet/echarts/dist/echarts.js
versus

www/tablet/eCharts/dist/echarts.js
Kaum macht man es richtig, geht's.

Danke für die Hilfe.

FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

andies

Ich schaffe es nicht, die Zeitschiene auf der x-Achse einzustellen. Was geht ist, dieser Achse die Kategorie "category" zuzuweisen, wenn ich da "time" nehme, sieht man nichts.

Ärgerlich ist an category, dass man anscheinend die Format-Funktionen nicht nutzen kann. Dennoch sieht man wenigstens irgendwelche Daten auf der x-Achse. Ich verlinke oben die Version 0.0.0.2.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

So, jetzt klappt das mit der zeit und ich habe auch einen Zoom installieren können; muss als Attribut angegeben werden. Oben im ersten Post ist Version 0.0.0.3.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

Anscheinend hat FHEMApp das Tool eCharts integriert, https://forum.fhem.de/index.php?topic=119470.0

Ich muss mal schauen, ob es sich dann lohnt hier weiter zu machen. Ich habe ein paar Kleinigkeiten verbessert (die meisten Dinge werden jetzt aus der Konfigurationsdatei von SVG eingelesen wie grid, tics etc.), aber ich kann nach wie vor nicht mehrere Daten zusammen einlesen, was natürlich echt schwach ist. Wenn das FHEMApp kann, wäre das super.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

Nun habe ich es geschafft, auch mehrere Datensätze in einer Grafik zu integrieren, danke auch an Beta-User (siehe hier). Was ich als nächstes machen will sind zwei y-Achsen (links und rechts) und dann will ich mal bei logProxy schauen, das geht bisher auch nicht.

Es gibt auch noch zwei Probleme, von denen ich wenigstens eines nicht auf dem Schirm hatte:
  • Ich kann bisher nicht die Zeiträume auswählen, das kommt irgendwie aus der gplot-Datei. Das heißt, manchmal werden sehr viele Daten geladen und das führt zu dem nächsten Problem:
  • Bei mir dauert der Aufruf relativ lang und das ist etwas, womit ich nicht gerechnet habe und wo ich auch keine Idee habe, wie man das handelt.
Die neue Version 0.0.5 ist im ersten Post.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

#11
Ich habe noch ein wenig gespielt und eigentlich relativ viel geschafft von den Dingen, die ich mir vorgenommen habe:
  • man kann jetzt mehrere Grafiken auf einer Seite darstellen (war vorher ein bug)
  • ich kann inzwischen auch die Farbe aus der entsprechenden svg.css holen, da gibt es noch die eine oder andere Kleinigkeit (beim füllen sieht die Linie anders aus als die Füllung)
  • man kann so genannte marker einfügen, die minimum, maximum und average angeben (sieht man im Bild unten, im Modul gibt es dazu Erläuterungen)
  • mehrere Achsen sollten gehen, jedenfalls so lange man sie in der gplot-Datei mit x1y1 und x1y2 angibt
Nach wie vor habe ich das mit dem Zeitraum nicht im Griff, so dass immer alle Daten angezeigt werden - was sehr lange dauern kann. Zum einen sehe ich Licht am Ende des Tunnels, merke aber auch immer mehr, dass ich nun wirklich an meine Grenzen komme. Die Sache ist doch sehr schnell sehr komplex. Ich will wenigstens versuchen die Dinge umzusetzen, die ich brauche. Anbei noch zwei Screenshots - einmal SVG und einmal eCharts.

Version 0.0.6 ist oben im ersten Post.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

carlos

Schön dass du immer weiter machst. Ich bin bis jetzt stiller Tester.
Aber gefällt mir bis jetzt sehr gut, dein modul.
In der Version hat sich ein Fehler eingeschlichen:

my @attrList = qw(
      captionLeft:1,0"
..

das muss wohl so lauten:

my @attrList = qw(
      captionLeft:1,0
..

Gruß

Hubert
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

andies

Das hat mich schon bei SVG gewundert, da steht das nämlich auch so da. Ich werde die Attribute mal bereinigen und nur diejenigen in dem Modul drin lassen, die ich auch implementiert habe.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+); Perl: v5.28.1
SIGNALduino (433 MHz) und HM-UART (868 MHz)
Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann