Javascript innerhalb von FHEM ausführen und das Ergebnis weitersenden?

[andies]

Es ist canvas, das weiß ich inzwischen (geht leider immer noch nicht, aber ich befürchte, dass ich mit meiner Unkenntnis inzwischen die Nerven strapaziere; ich kriege bei

Code Auswählen Erweitern

var myChart_myChart = echarts.init(document.getElementById('eCharts_myChart'), null, {renderer: 'canvas'});
 ...
var img = myChart_myChart.toDataURL("image/jpeg", 1.0);
console.log(img);
den Fehler

Code Auswählen Erweitern

Uncaught TypeError: myChart_myChart.toDataURL is not a function
    at fhem?detail=myChart:224:27

[rudolfkoenig]

Dein myChart_myChart ist kein Canvas, es ist ein eCharts Objekt, was selbst wiederum ein Canvas verwendet.
Habs auf die schnelle nicht rausgekriegt, mit welcher eCharts Methode man den Canvas rauskriegt.

Mit jQuery waere das sowas wie $("canvas").get(0).toDataURL(...), damit greifst Du auf dem ersten Canvas auf der Seite zu.
Eine bessere Methode ist, wenn man eCharts in einem div mit myID rendert, dann gilt $("div#myID canvas").get(0)...

[andies]

Danke, habe es gefunden. Hast du noch ein hilfreiches Schlagwort wie man das "zu FHEM schickt"

- wenn es Canvas ist, dann kann man den Inhalt der Canvas per JavaScript dumpen (z.Bsp. canvas.toDataURL("image/jpeg", 0.7)), und das Ergebnis zu FHEM schicken.

Für diejenigen, die es interessiert, wie der Ablauf innerhalb von JavaScript ist

Code Auswählen Erweitern

  eCharts_pO 'daten = <hier der Name der eChartsinstanz>.getDataURL({"pixelRatio": "2","backgroundColor": "#fff"});';  # jetzt ist das Bild in der Variablen daten
  eCharts_pO 'const blob = new Blob([daten], {type: "image/png"});'; # TODO das ist noch base64!!
  eCharts_pO 'const a = document.createElement("a");'; # als Beispiel wird das mal heruntergeladen
  eCharts_pO 'a.href = URL.createObjectURL(blob);a.download = "downloadfile";';
  eCharts_pO 'document.body.appendChild(a);a.click();document.body.removeChild(a);'; 
wobei eCharts_pO genau so definiert ist wie SVG_pO.

[andies]

PS ChatGPT 4 kann das, erstaunlich, und ich hoffe, das ist nicht so falsch

Code Auswählen Erweitern

function sendToFHEM(device, state) {
  const fhemUrl = 'http://fhem-server:8083/fhem?cmd=set ' + encodeURIComponent(device) + ' ' + encodeURIComponent(state) + '&XHR=1';
  fetch(fhemUrl, {
    method: 'GET', // or 'POST'
    headers: {
      // If you have basic authentication enabled for FHEM
      'Authorization': 'Basic ' + btoa('username:password')
    },
    credentials: 'include' // Required for cookies, authorization headers with HTTPS
  })
  .then(response => response.text())
  .then(data => console.log('Response from FHEM:', data))
  .catch(error => console.error('Error sending data to FHEM:', error));
}

// Example usage
sendToFHEM('myDevice', 'on');


[andies]

So, die Sache ist geklärt, vielen Dank nochmal an alle. Kurze Info: Man kann in eCharts SVG (statt canvas) rendern und das sogar so gestalten, dass auch nodejs das Bild erzeugt. Intern wird dann "renderToSVG()" aufgerufen und ich bekomme so eine SVG, die ich dann mit Bordmitteln weiter bearbeiten kann. Jetzt muss das "nur" noch aufgeschrieben werden.

[andies]

Noch ein Tipp, falls das jemand liest. Echtes Server-Side-Rendering geht nicht, also habe ich einen umständlichen Ausweg für's erste gefunden:
hier