eCharts in FHEM (Version 0.0.12.4)

[andies]

Ich würde mir dann mal überlegen wie man die Buttons vernünftig intigriert für offset und zoom..

Ich habe wieder ein bischen gespielt und inzwischen eine Idee, wo die Buttons hinkönnen. Aber das kann ich nicht in Perl integrieren. Aber der Reihe nach.

eCharts erlaubt in der Toolbox, dass man eigene Buttons definiert, hier ein kurzes Video dazu. An sich ganz einfach. Man müsste dann etwa in Zeile 545 den Code ändern,

Code Auswählen Erweitern

    ${$eCharts_options_ref}{toolbox} = {feature =>{saveAsImage => {}}, name => $title, backgroundColor => 'transparent', pixelRatio => 2,
    myBackButton => {show => 'true', title => 'back',
    icon => 'path://"M11.739,13.962c-0.087,0.086-0.199,0.131-0.312,0.131c-0.112,0-0.226-0.045-0.312-0.131l-3.738-3.736c-0.173-0.173-0.173-0.454,0-0.626l3.559-3.562c0.173-0.175,0.454-0.173,0.626,0c0.173,0.172,0.173,0.451,0,0.624l-3.248,3.25l3.425,3.426C11.911,13.511,11.911,13.789,11.739,13.962 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.148,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.148,17.521,10"', # und hier wird " oben falsch übermittelt
    #onclick => {function() => alert("forward - to be implemented")} ## das geht nicht
},
    myForwardButton => {show => 'true', title => 'forward',
    icon => 'path://"M12.522,10.4l-3.559,3.562c-0.172,0.173-0.451,0.176-0.625,0c-0.173-0.173-0.173-0.451,0-0.624l3.248-3.25L8.161,6.662c-0.173-0.173-0.173-0.452,0-0.624c0.172-0.175,0.451-0.175,0.624,0l3.738,3.736C12.695,9.947,12.695,10.228,12.522,10.4 M18.406,10c0,4.644-3.764,8.406-8.406,8.406c-4.644,0-8.406-3.763-8.406-8.406S5.356,1.594,10,1.594C14.643,1.594,18.406,5.356,18.406,10M17.521,10c0-4.148-3.374-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.147,17.521,10"',
    #onclick => {function() => alert("forward - to be implemented")} ## das geht nicht
}}; # dataView => {title => 'Rohdaten'}
(als Icons habe ich Pfeile nach links und rechts genommen). Wenn man das macht, stürzt FHEM gnadenlos ab. Inzwischen ist auch klar, warum. Alle bisherigen Einträge sind hashes oder array von strings. Hier soll nun ein key-value Paar übergeben werden, wo aber der value anscheinend kein String mehr ist, sondern selbst eine Funktion darstellt. Ich habe ein wenig in den JSON-Definitionen geblättert, das scheint gar nicht von den entsprechenden Standards gedeckt zu sein. Kein Wunder dann, dass  encode_json das auch nicht hinbekommt.

Ich habe da momentan keine Idee, wie man das machen kann.

[MadMax]

Das bedeutet du bekommst die Buttons hin aber kannst die links die aufgerufen werden sollen nicht übergeben?

[andies]

Das bedeutet du bekommst die Buttons hin aber kannst die links die aufgerufen werden sollen nicht übergeben?

Mit paar Tricks gelingt es unter Umständen, dass rechts oben Buttons erscheinen - so wie unten, da steht derzeit nur "Save image". Aber die "dahinter" liegende Aktion kriege ich nicht programmiert.

Also so soll das im Original aussehen

Code Auswählen Erweitern

toolbox: {
    feature: {
        myFeature: {
            show: 'true',
            title: 'My custom feature',
            icon: 'image:path/to/image-inactive.png'
            onclick: function (){
                // und das Wort function steht oben nicht in Anfuehrungszeichen!
            }
        }
    }
},

[MadMax]

Ah du bekommst die function nicht übergeben.

[andies]

Das ist ja ein riesiger Umweg um an die Charts zu kommen.

Ja, total nervig. Ich versuche ja von den eCharts-Leuten herauszubekommen, ob es einfacher geht.

Und es geht tatsächlich. Der angebliche Fehler von mir ist keiner, siehe hier. Das heißt, ich kann wieder versuchen lokal zu rendern. Man muss halt richtig node/npm installieren können 

Ich habe auch noch ein paar Kleinigkeiten, das mache ich dann hoffentlich am Wochenende fertig. Fehlen bloß noch die buttons.

[andies]

So, ich habe es endlich geschafft, dass Bilder gerendert werden (und ganz einfach mit Telegram verschickt werden können, also set myTelegramBot cmdSend { eCharts_plotAsPng('myEChartName')} - das war ja mein Hauptziel!).

Ebenso habe ich ein paar Kleinigkeiten verändert, zB war mir die Strichstärke doch zu dick und ich habe das fest verdrahtete "width+1" geändert (man kann ja immer Stichstärken erhöhen, indem man in der gplot einfach die richtige Strichstärke einträgt), außerdem habe ich weitere Attribute für opacity etc eingefügt und man kann die Position des Titels und der Legende verändern. Steht alles in der "Help for eCharts".

Ein paar Anmerkungen, wie man das rendern einrichtet (bei Fehlermeldungen wird übrigens auf diesen Forumseintrag verwiesen). Das ist nämlich nicht ganz so einfach:

• Damit eCharts überhaupt als device definiert werden kann, muss eCharts.js installiert sein. Im ersten Post habe ich geschrieben, dass man das unterhalb des www-Ordners von FHEM machen muss. In (etwa) Zeile 310 wird die Variable $data{FWEXT}{'eCharts'}{SCRIPT} initiiert und sie enthält (relativ zum www-Ordern von FHEM) das Verzeichnis, wo eCharts.js liegt. Das hat noch nichts mit dem rendern zu tun, das braucht man nur, um die Grafiken am Bildschirm (im Browser) zu sehen.
• Wenn man plotAsPng verwenden will, benötigt man nun weitere Programme: node sowie, zum installieren, npm. Ich habe das anhand dieser Seite gemacht und kann nur hoffen, dass dieser Link auch in einigen Jahren noch aktuell bleibt. Das reicht aber nicht.
• Diese Version von node wird dann durch FHEM aufgerufen, um das Bild zu rendern. Damit müssen bei der binary (meist im Unterordner bin) die Rechte so gesetzt werden, dass FHEM dieses Programm aufrufen darf. Üblicherweise "sudo chmod 777 node" und ich weiß, dass jetzt einige Amok laufen, weil das unter Umständen ein Sicherheitsrisiko ist...
• Das Chart-device muss nun noch den Pfad zu diesem node kennen. Da habe ich keine richtig gute Idee, weil man das bei jedem Device angeben muss, das aber über alle devices ja einheitlich ist - der Pfad ist ja immer der gleiche! Man könnte das als Attribut bei FHEMWEB angeben, dann mische ich mich da aber ein und das wollte ich nicht, weil ich ungern außerhalb dieses Moduls Änderungen vornehmen möchte. Daher ist derzeit bei jedem Chart, das gerendert werden soll, noch notwendig
  
  Code Auswählen Erweitern
  attr <eChartsDevice> pathToNode <und dann der Pfad zu node>Der Pfad muss auch das eigentliche Programm enthalten, also bei mir ist das beispielsweise
  
  Code Auswählen Erweitern
  <und dann der Pfad zu node> = /home/pi/node-v21.7.0-linux-arm64/bin/node
• Zuletzt entsteht noch ein Problem. Dieses node kann das Modul eCharts nicht finden, denn das liegt ja woanders - nämlich in einem Ordner unterhalb von FHEM und ist damit für node gar nicht erreichbar! Also muss man diesem node noch ein weiteres Mal eCharts installieren und man besitzt damit zwei Installationen auf dem Rechner. Das ist immer eine unangenehme Fehlerquelle, weil beide Versionen ja aktuell gehalten werden sollten. Ich habe das so gemacht, dass ich in der Kommandozeile von FHEM folgenden Befehl ausgeführt habe:
  
  Code Auswählen Erweitern
  {`npm install echarts --save`} (das sind backticks, keine Anführungszeichen; Rückmeldung danach irgendetwas mit "up to date, audited 4 packages in 3s"). Danach war eCharts.js so installiert, dass es von FHEM genutzt werden konnte.

Version 10.6 lege ich heute abend wieder in den ersten Post. Was ich immer noch nicht hinbekomme sind die Buttons für "zurück" und "vorwärts" bei den Daten, die es bei SVG gibt. Das versuche ich beim nächsten Mal.

[andies]

Ich habe jetzt ein Minimalbeispiel mit einem button, der (k)eine Reaktion auslöst. So in etwa muss das Modul dann den Javascript-Code konstruieren:

Code Auswählen Erweitern

var option={
'series':[{'data':[['2024-03-07 18:22:16','46.2'],['2024-03-07 18:23:29','49.4'],['2024-03-07 18:44:15','46.2'],['2024-03-07 18:45:20','47.8'],['2024-03-07 19:36:53','43.5']],'yAxisIndex':'1','type':'line'}],
'yAxis':[{'axisLabel':{'formatter':'{value}'}},{'axisLabel':{'formatter':'{value}'}}],
'toolbox':{
'feature':{
 'myBackButton':{'title':'back',
  'icon':'path://M11.739,13.962c-0.087,0.086-0.199,0.131-0.312,0.131c-0.112,0-0.226-0.045-0.312-0.131l-3.738-3.736c-0.173-0.173-0.173-0.454,0-0.626l3.559-3.562c0.173-0.175,0.454-0.173,0.626,0c0.173,0.172,0.173,0.451,0,0.624l-3.248,3.25l3.425,3.426C11.911,13.511,11.911,13.789,11.739,13.962 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.148,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.148,17.521,10',
    'onclick': () => this.dummy(),
  'show':'true'}
}
},
'xAxis':{'type':'time'},
};Man sieht den Button, der reagiert natürlich nicht. Im Moment habe ich keine richtige Idee, wie es weitergehen kann. Die auszulösende Aktion muss sein "öffne URL mit usw".

[MadMax]

Bekommst du das schon auf Fhem raus übergeben?

[andies]

Also wenn ich die Funktionen nutze, die derzeit im Modul sind, dann erhalte ich da buchstäblich:

Code Auswählen Erweitern

"myBackButton":{"title":"back",
"icon":"path://M11.739,13.962c-0.087,0.086-0.199,0.131-0.312,0.131c-0.112,0-0.226-0.045-0.312-0.131l-3.738-3.736c-0.173-0.173-0.173-0.454,0-0.626l3.559-3.562c0.173-0.175,0.454-0.173,0.626,0c0.173,0.172,0.173,0.451,0,0.624l-3.248,3.25l3.425,3.426C11.911,13.511,11.911,13.789,11.739,13.962 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.148,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.148,17.521,10",
"show":"true"}und man sieht, dass der Button angelegt wird. Im Original sieht das aber so aus:

Code Auswählen Erweitern

'myBackButton':{'title':'back',
 'icon':'path://M11.739,13.962c-0.087,0.086-0.199,0.131-0.312,0.131c-0.112,0-0.226-0.045-0.312-0.131l-3.738-3.736c-0.173-0.173-0.173-0.454,0-0.626l3.559-3.562c0.173-0.175,0.454-0.173,0.626,0c0.173,0.172,0.173,0.451,0,0.624l-3.248,3.25l3.425,3.426C11.911,13.511,11.911,13.789,11.739,13.962 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.148,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.148,17.521,10',
 'onclick': function () { alert('Hallo')},
 'show':'true'}und es gelingt mir nicht, den Zusatz "function () { alert('Hallo')}," zu übergeben. Das darf kein String sein, sobald da Anführungszeichen auftauchen, stürzt entweder FHEM ab oder man sieht nix.

Ich habe keine richtige Idee, wie ich da weiter machen kann. (Das rendern  und senden mit Telegram klappt übrigens.)

[andies]

Man könnte natürlich auch versuchen, dass man das mit Klicken auf der Zeitachse simuliert, also nicht mit buttons oben rechts. So wie hier.

[andies]

Ich habe eine Idee. Keine Buttons oben, sondern man macht die x-Achse "klickbar", also

Code Auswählen Erweitern

${$eCharts_options_ref}{xAxis}{triggerEvent} = 'true';
und fügt dann am Ende einen entsprechenden Code ein

Code Auswählen Erweitern

  eCharts_pO 'myChart_'.$name.'.on(\'click\', params => {if(params.targetType === \'axisLabel\'){alert(params.value);}})';
 
Ich habe mal auf einem Video aufgezeichnet, wie das aussieht.

Das bedeutet folgendes

• Der Nutzer kann die x-Achse klickbar machen, es aber auch lassen.
• Wenn er sie klickbar macht und wenn er links von der Mitte klickt, geht man nach links (also zurück). Klickt er rechts, geht man vorwärts.

Das ist eigentlich sogar intuitiver als Buttons oben an der Grafik, finde ich. Immerhin bewegen wir uns in der Zeitachse.

[MadMax]

Dann musst du aber immer mehr Daten laden?

[andies]

Nee, das würde ich so wie beim SVG machen wollen. Man ruft dann eine komplett neue HTML-Seite auf, die im GET die neuen Begrenzungen für die Zeitachse haben. So hat das Rudi im SVG programmiert, wenn ich das richtig kapiere. Es gibt eine neue Seite, die Daten werden (neu, weil anders) geladen.

Man kann dann nicht ohne weiteres zoomen, zum Beispiel. Wenn ich eine Zeitlänge von einem Tag eingestellt habe und links klicke, kriege ich den Tag vorher. Und dann wieder den Tag vorher. Will ich zwei Tage haben, muss ich das in den Attributen festlegen.

[andies]

Jetzt überlege ich gerade, ob das nicht noch raffinierter geht. Man klickt ja direkt auf ein Datum. Dann könnte man dafür sorgen, dass dieses Datum das neue Enddatum ist, zum Beispiel. Und bei einem Doppelklick das neue Anfangsdatum. Sonst müsste ich da ständig schauen "ist das jetzt links oder rechts" usw

[MadMax]

Das klingt sehr cool wenn das so klappt. Ich weiß nur nicht wie du das umsetzen willst aber die Idee gefällt mir.