eCharts in FHEM (Version 0.0.12.1)

[andies]

Ich hatte mich schon gefreut wegen des renderns, und dann stürzte mir heute früh FHEM ab. Ich habe gestern nur das rendern von kleinen Bilder getestet und als das mal größer wurde, gab es Ärger (eine Odyssee war das). Jetzt sollten auch große Bilder gehen. Da das ganze nur blockierend klappt, habe ich auf dem Loglevel 3 eine Warnung ausgegeben.

(Ich sende mir sechs Bilder zu. Das mache ich aber nicht direkt, sondern ich setze sechs at-Kommandos, die zeitversetzt über eine Minute erst auslösen. Und das ganze irgendwann morgens, wenn Ruhe herrscht. Aber das nur nebenbei.)

Also das rendern habe ich im ersten Post repariert und völlig neu geschrieben. Immer noch umständlich, aber wenigstens stürzt nichts mehr ab. Ansonsten habe ich die Idee von dem vorigen Post oben umgesetzt. Leider nicht ganz so, wie ich mir das ursprünglich vorgenommen habe, das ist mir einfach zu umständlich und viel zu viel Arbeit (ich kann leider nur durch probieren herausbekommen, wie das ganze funktioniert; ich verstehe zu wenig von Perl und kenne FHEM nicht gut genug - am einfachsten ist immer noch copy-und-paste). Also es geht jetzt so:

• Wenn man mit der linken Maustaste auf die x-Achse klickt, geht man (wie bei SVG mit dem Previous-Button) eine Zeitzone zurück. Und zwar so viel, wie auch bei SVG eingestellt war.
• Wenn man mit der rechten Maustaste auf die x-Achse klickt (erscheint danach das Kontextmenü, das kann ich leider nicht ausstellen) und man geht (wie bei SVG mit dem Next-Button) eine Zeitzone nach vorn. Und zwar so viel, wie auch bei SVG eingestellt war.

Wenn keine Daten vorhanden sind, passiert nichts. Damit das ganze überhaupt geht, muss aber vorher das Attribut "onclick_x_axis" auf 1 gestellt sein.

Im Anhang ein Video, wie das geht. Neueste Version im ersten Post.

[andies]

Ich habe, nach zwei Monaten Arbeit, den ersten Post angepasst und die neueste Version (11.1) eingestellt. Da waren noch kleinere Bugs drin, die mir aufgefallen waren und die ich beseitigt habe. Ich werde wohl in der nächsten Zeit nicht mehr dazu kommen, an dem Code etwas zu machen (aber wie gesagt - die doppelten x-Achsen würden mich nochmal reizen), zudem geht eigentlich all das, was ich in meinen SVGs installiert hatte. Ich kann mit dem Modul inzwischen ganz gut leben.

[andies]

Ah du bekommst die function nicht übergeben.

Ich kann doch nicht lassen und hatte heute etwas Zeit. Also habe ich mir mal überlegt, wie man das mit den ticks for val macht (war eines Deiner ToDos). Ich nutze das selbst nicht, brauche also mal Testhilfe. Wenn ich das richtig verstehe, erscheint das in den gplot-files. Das ist dann eine Liste von regex=>value, wobei regex aus dem Logfile gelesen werden und für die Anzeige durch value ersetzt werden sollen? Ist das richtig?

Wenn ja, dann brauche ich einen array of regex und muss dann bei der Übergabe, etwa Zeile 571, etwas ändern. Derzeit steht da

Code Auswählen Erweitern

push @{$data_array[$series_index]}, [$datum, $wert];
und statt $wert muss $value gelesen werden. Dank KI habe ich mir einen kurzen Code compilieren lassen,

Code Auswählen Erweitern

###Vorher
my @regex_strings = (<das muss aus gplot kommen>);# da steht sowas wie ytics ("on" 1, "off" 0)
# Kompiliere jeden String zu einem Regex-Objekt
my @regexes = map { qr/$_/ } @regex_strings;
...
# Der zu prüfende String aus $da, der Datenliste
#my $wert;
...
##Etwa Zeile 571
# Prüfe, welcher Regex passt
for (my $i = 0; $i < @regexes; $i++) {
    if ($string =~ $regexes[$i]) {
        push @{$data_array[$series_index]}, [$datum, $i];
        last; # Beendet die Schleife nach dem ersten Treffer
    }
}Habe ich das richtig verstanden?

[MadMax]

Genau, im Prinzip bekommt jeder Wert einen Text zugewiesen.

Code Auswählen Erweitern

"Heizen" 6, "Kuehlen" 7, "Off" 5, "Standby" 0, "Heizen" 1, "Kuehlen" 2, "Abtauen" 3, "WW" 4, "off" 9, "on" 10, "off" 11, "on" 12

Umgekehrt kann aus dem Log/DB auch der Text geholt werden und in eine Zahl gewandelt werden wenn dieser als Text gespeichert wird.

Code Auswählen Erweitern

val=($val=~'Heizen'?1:$val=~'Kuehlen'?2:$val=~'Abtauen'?3:$val=~'Warmwasserbereitung'?4:0)

Gruß
Max

[andies]

Ich frage mich gerade, ob man hier überhaupt etwas programmieren muss. Ich sammle einfach als Werte auf der y-Achse die Strings ein ("on", "off" usw) und definiere dann auf der y-Achse den Typen "category", der kennt dann eben nur "on", "off" usw. Ich muss mir dann keine Zahlen dazu ausdenken, umwandeln, darstellen usw. ME müsste das gehen, denn wenn man sich dieses Beispiel anschaut, dann verweist ja die Doku (auf der x-Achse allerdings) auf

Code Auswählen Erweitern

When a dimension corresponds to a category axis (axis.type is 'category'):
The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data.

[MadMax]

Das klingt plausibel SVG kann das leider nicht.

[andies]

Ah du bekommst die function nicht übergeben.

Auf dem Heimweg gelangweilt und ein wenig gespielt. Man kann die options in eCharts mehrfach übergeben und damit kriege ich das in den Griff. Rechts oben sind nun die Buttons wie bei SVG und man wandert genau so wiein der klassischen Ansicht, Buttons siehe Anhang. Der rechte wird ausgeblendet, wenn man am Ende ist. Das entsprechende Attribut habe ich gelöscht; Modul im ersten Post.

Ich überlege mal, in den Ferien ein kleines Video mit allen Details zu machen. Wer das hier im Forum liest wird ja wahnsinnig, dieses Hin und Her.

[andies]

Ich habe ein kleines Video erstellt, wo ich die wichtigsten Dinge nochmal zusammenfasse. Das Video hat leider zwei kleine Macken zwischendrin, aber da das nur Sekunden sind, die Botschaft weiterhin verständlich ist und das mich jetzt wieder eine halbe Stunde oder mehr Arbeit kosten würde, belasse ich es dabei
https://www.youtube.com/watch?v=Pay4DYlaPF8

[MadMax]

Hallo Andies,

erstmal danke für die fortlaufende Entwicklung.
Mir geföllt das sehr gut und ich habe auch schon eine eCharts in benutzung.

Ich habe mir mal das Beispiel angeschaut, trotzdem weiß ich nicht wie ich mit dem Beispiel diese Grafik umstellen könnte.

Du darfst diesen Dateianhang nicht ansehen.

Gruß
Max

[MadMax]

So kommen die Daten vom DBLog.
eCharts macht da ein leeres Diagramm draus.

Code Auswählen Erweitern

get DbLog.WP HISTORY INT 2024-03-12_17:35:00 2024-03-13_17:34:59 WP.HPSU:HPSU.Aktive_Betriebsart:::

2024-03-12_17:43:51 Heizen
2024-03-12_18:04:05 Heizen
2024-03-12_18:24:15 Heizen
2024-03-12_18:44:18 Heizen
2024-03-12_19:04:27 Heizen
2024-03-12_19:24:30 Heizen
2024-03-12_19:44:32 Heizen
2024-03-12_20:04:40 Heizen
2024-03-12_20:24:43 Heizen
2024-03-12_20:44:47 Heizen
2024-03-12_21:04:48 Heizen
2024-03-12_21:24:53 Heizen
2024-03-12_21:38:43 Standby
2024-03-12_21:58:52 Standby
2024-03-12_22:19:00 Standby
2024-03-12_22:39:11 Heizen
2024-03-12_22:59:18 Heizen
2024-03-12_23:19:25 Heizen
2024-03-12_23:39:30 Heizen
2024-03-12_23:59:35 Heizen
2024-03-13_00:19:46 Heizen
2024-03-13_00:39:53 Heizen
2024-03-13_00:59:56 Heizen
2024-03-13_01:20:04 Heizen
2024-03-13_01:40:14 Heizen
2024-03-13_02:00:17 Heizen
2024-03-13_02:20:27 Heizen
2024-03-13_02:40:36 Heizen
2024-03-13_03:00:48 Heizen
2024-03-13_03:20:54 Heizen
2024-03-13_03:41:04 Heizen
2024-03-13_04:01:11 Heizen
2024-03-13_04:09:01 Abtauen
2024-03-13_04:15:57 Heizen
2024-03-13_04:36:07 Heizen
2024-03-13_04:56:19 Heizen
2024-03-13_05:07:12 Abtauen
2024-03-13_05:13:12 Heizen
2024-03-13_05:33:13 Heizen
2024-03-13_05:53:17 Heizen
2024-03-13_06:13:29 Heizen
2024-03-13_06:14:12 Warmwasserbereitung
2024-03-13_06:25:52 Abtauen
2024-03-13_06:31:01 Warmwasserbereitung
2024-03-13_06:51:02 Warmwasserbereitung
2024-03-13_06:53:18 Standby
2024-03-13_06:55:10 Heizen
2024-03-13_06:59:52 Standby
2024-03-13_07:00:19 Heizen
2024-03-13_07:20:32 Heizen
2024-03-13_07:29:43 Abtauen
2024-03-13_07:35:33 Heizen
2024-03-13_07:55:41 Heizen
2024-03-13_08:15:48 Heizen
2024-03-13_08:35:52 Heizen
2024-03-13_08:55:58 Heizen
2024-03-13_09:16:08 Heizen
2024-03-13_09:36:12 Heizen
2024-03-13_09:56:18 Heizen
2024-03-13_10:16:25 Heizen
2024-03-13_10:36:35 Standby
2024-03-13_10:56:41 Standby
2024-03-13_11:16:45 Standby
2024-03-13_11:36:02 Heizen
2024-03-13_11:40:43 Standby
2024-03-13_11:41:39 Heizen
2024-03-13_11:46:18 Standby
2024-03-13_11:58:34 Heizen
2024-03-13_12:03:20 Standby
2024-03-13_12:04:04 Heizen
2024-03-13_12:08:46 Standby
2024-03-13_12:09:53 Heizen
2024-03-13_12:14:30 Standby
2024-03-13_12:34:34 Standby
2024-03-13_12:53:22 Heizen
2024-03-13_13:13:30 Heizen
2024-03-13_13:20:31 Standby
2024-03-13_13:40:38 Standby
2024-03-13_13:54:40 Heizen
2024-03-13_14:14:47 Heizen
2024-03-13_14:19:12 Standby
2024-03-13_14:19:22 Heizen
2024-03-13_14:19:46 Standby
2024-03-13_14:39:57 Standby
2024-03-13_15:00:03 Standby
2024-03-13_15:20:13 Standby
2024-03-13_15:40:15 Standby
2024-03-13_16:00:27 Standby
2024-03-13_16:20:36 Standby
2024-03-13_16:40:42 Standby
2024-03-13_16:51:13 Heizen
2024-03-13_17:11:21 Heizen
2024-03-13_17:31:23 Heizen
#WP.HPSU:HPSU.Aktive_Betriebsart:::


[andies]

Ich habe mir mal das Beispiel angeschaut, trotzdem weiß ich nicht wie ich mit dem Beispiel diese Grafik umstellen könnte.
eCharts macht da ein leeres Diagramm draus.

Das hatte ich bisher noch gar nicht implementiert, das konnte also gar nicht gehen. Ich habe das eingebaut, kann das aber nicht testen und meine Versuche, derartige Logdateien hausintern nachzubauen, hat nicht funktioniert. Kannst du das mal testen? Ich sehe da nichts.

Es gibt noch zwei kleinere Probleme, die werde ich nicht so leicht in den Griff kriegen:

• Wenn ich ytics in der .gplot auslese, sehe ich keinen Unterschied, ob die Zeile "set ytics" da steht oder nicht steht: In beiden Fällen steht in der %hash:
  Code Auswählen Erweitern
  ytics=undefMan kann also an der %hash nicht erkennen, ob jemand jetzt ticks haben will oder nicht. 
• Wenn ich Daten mit Text und nicht mit Zahlen aufrufen lassen will (das geschieht ja durch einen SVG-Befehl), erscheinen bei mir nur die Zahlenwerte. Ich kann damit gar nicht die Texte wie "Heizung" oder "Standby" auswerten.  Die fehlen einfach! Ich muss mal nachforschen, ob das schon in der SVG geregelt ist (dann muss ich diesen Befehl nämlich selbst schreiben) oder ob das nur meine Installation hier ist.

[andies]

Ich habe von Beta-User noch ein paar Tipps (vielen Dank dafür!), die diskutiere ich hier mal offen.

- Die Festverdrahtung ist an sich ok, aber uU. nicht jedermanns Sache. Ich würde (u.a.) das daher konfigurierbar machen, aber nicht per Attribut, sondern per parseParams im define der Instanz. Damit kann man im Prinzip eine beliebige Anzahl von Einstellungen möglich machen, ohne immer eine Tonne an Attributen erklären zu müssen, die in der Regel nur für wenige interessant sind. Wie sowas gehen könnte? Siehe den RHASSPY-Code.

Das ist natürlich ein no-brainer, klar. Ich hatte mich damals leiten lassen davon, dass ich dieses Modul möglichst ohne Interaktion mit der Außenwelt schreibe. Aber systematisch wäre sicherlich, ein userattr in global oder so anzubringen (ich wollte ja die Definitionen von SVG ohne Änderung nutzen).

- die node-Installation müßte doch eigentlich nur wissen, wo die echarts-js-e liegen, oder? Dann sollte sich die Doppelinstallation erledigen? Auch da würde ich ggf. versuchen, den Pfade zu node im Modul zu hinterlegen (unterhalb fhem?) und die echart-Funktionen dann mit dem relativen Pfad aufrufen? (Sollte auch rechtemäßig kein Problem sein, wenn der Aufrufende und der script-Owner jeweils fhem ist (?)). Ist aber nur ein erster Eindruck, ohne, dass ich mit sowas irgendwelche Erfahrungen habe...

Ja, das sollte irgendwie möglich sein. Ich müsste erstmal richtig kapieren, wie node sich die Module holt. Danach sollte das eigentlich konfigurierbar sein. Einige sind ja vorinstalliert, und dann muss man sagen, dass man noch eines dazu haben will und das liegt dann eben hier-und-dort.

- plotAsPng() sollte man m.E. so aufbohren, dass es entweder den bisherigen Code ausführt, oder eben die passende Funktion aus eCharts.pm. Da das (zumindest auf die Schnelle) ja leicht anhand des TYPE-Internals festgestellt werden kann, sollte das kein großes Ding sein, Rudi dafür einen patch zukommen zu lassen.

Auch da: Dann interagiere ich mit dem Rest von FHEM. Ich bin schon der Meinung, dass dafür der Code mal von jemanden durchgeschaut werden muss, der mehr Ahnung hat als ich. Und Rudi hat sicher andere Sorgen, zumal ich deutlich sehen kann, wie viele <irone>Fans von JavaScript</ironie> es hier gibt.

Mir persönlich fällt die Darstellung von eCharts (viel) besser. Aber "gefallen" ist subjektiv und darüber kann man schwer sachlich diskutieren.

[MadMax]

Das hatte ich bisher noch gar nicht implementiert, das konnte also gar nicht gehen. Ich habe das eingebaut, kann das aber nicht testen und meine Versuche, derartige Logdateien hausintern nachzubauen, hat nicht funktioniert. Kannst du das mal testen? Ich sehe da nichts.

Leider funktioniert das nicht, wo hast du das eingebaut? Konnte dazu nix im Code finden.

Es gibt noch zwei kleinere Probleme, die werde ich nicht so leicht in den Griff kriegen:

• Wenn ich ytics in der .gplot auslese, sehe ich keinen Unterschied, ob die Zeile "set ytics" da steht oder nicht steht: In beiden Fällen steht in der %hash:
  Code Auswählen Erweitern
  ytics=undefMan kann also an der %hash nicht erkennen, ob jemand jetzt ticks haben will oder nicht. 

Ich denke das steht auch hier in der Zeile mit den Tics

Code Auswählen Erweitern

set grid ytics y2tics

Code Auswählen Erweitern

set grid y2tics

Code Auswählen Erweitern

set grid ytics

Code Auswählen Erweitern

set grid
Gruß
Max[/list]

[andies]

Leider funktioniert das nicht, wo hast du das eingebaut? Konnte dazu nix im Code finden.

Zeile 395

Code Auswählen Erweitern

    #regex als tics?
    if ($conf_ticks =~ /"/) {
        $new_hash_ref->{"type"} = 'category';
        my @matches = $conf_ticks =~ /"([^"]*)"/g;
        $new_hash_ref->{"data"} = \@matches;
    } else {
        $new_hash_ref->{"type"} = 'value';       
        $new_hash_ref->{"axisLabel"} = {formatter => '{value}'};
    }
conf_ticks ist identisch $conf{ytics}. Wenn da keine Zahlen drin stehen, sollte das sinngemäß so etwas wie 

Code Auswählen Erweitern

$conf_tics "Heizen" "Standby"sein. Und diese Werte werden dann als "data" in die y-Achse mit der Kategorie "type" eingelesen und dann sollten die entsprechenden Werte aus der Log-Datei dort eine Markierung bekommen, wo diese regex-Werte stehen.

[MadMax]

Hallo andies,

das funktioniert bedingt ganz gut 

Erst ist das Chart leer bis ich unten im Zoom den bereich en wenig eingrenze.

Wie du siehst sieht der Tooltip merkwürdig aus, damit könnte ich aber Leben

Gruß
Max