HTML Canvas Zeichnung Farbwerte aus DP übernehmen

[dirk_1930]

@liv-in-sky
Kann dir gar nicht genug danken. Ich bewege mich zwar nur in Baby Schritten voran, aber habe auch nicht erwartet das es sofort hinhaut.
Ich habe das ganze jetzt dank deinem Tipp noch erweitert und speichere das Canvas Element als Data URL in einem Datenpunkt.

Jetzt habe ich schon die nächste Frage

Es handelt sich um sehr viele einzelne Canvas Elemente und da hatte ich mir überlegt, ob es nicht Sinn macht nach dem API Abruf einmal alle Elemente zu zeichnen und dann als Datenpunkt abzulegen. Dazu müsste dann in einer Schleife jeweils ein String mit der Datencodierung abgefragt werden und dann der Canvas gezeichnet und abgespeichert werden. Wäre so etwas möglich, bzw. kann ich das ausschließlich in Javascript machen (ohne Browser)?

[liv-in-sky]

@dirk_1930

ich mache das meistens so - ich erstelle das, was ich anzeigen will, in javascript und speichere das in einem datenpunkt. wenn ich darin auch scripte brauche, füge ich das ein

in der vis öffne ich dann ein html-widget mit einem binding auf den datenpunkt - dann wird das angezeigt - so kann man eigene widgets machen

beispiele - tabellen - auch mit scripte darin
ziemlich weit unten werden css und scripte vorbeireitet, die auch im widget genutzt werden (du musst nur aufpassen, das css-klassen und functions in deinem widget einzigartig sind und sich nicht überschneiden
zeile 1186 für script
zeile 1072 für css definitionen
https://github.com/liv-in-sky/sonoff-iobroker-script/blob/main/sonoff-integr-IFrame-11.01.22-10.txt

oder
https://forum.iobroker.net/topic/46702/led-anzeige-für-vis-akku-pegel-kreis

[dirk_1930]

@liv-in-sky
Wie erstellst Du denn das Bild ohne das Canvas Element?

Mein Bilde erstelle ich aktuell wie folgt...

 let dataDayRain ="2222222222222222222222222222222222222222222122222";
let color = "#fff,#3aaadc,#1774c4,#a4c639,#22d690";
let farben = color.split(',');

let startWert = 0;
let elementId;
let element=dataDayRain;
let elementGroesse = 7;
let center = (elementGroesse*elementGroesse)/2;
let doubleElement = elementGroesse * elementGroesse;

for (let y = 0; y <= 6; y++){
for (x = 0; x <= 6; x++) {
  elementWert = element.charAt((y*7)+x);
  switch (elementWert) {
    case "0":
      elementId = farben[0];
      break;
    case "1":
      elementId = farben[1];
      break;
    case "2":
      elementId = farben[2];
      break;
    case "3":
      elementId = farben[3];
      break;
    case "9":
      elementId = farben[4];
      break;
  }
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = elementId;
  ctx.strokeStyle='black';
  ctx.fillRect((x*elementGroesse), 7*elementGroesse - (elementGroesse*(y+1)), elementGroesse, elementGroesse); 
}

}
  ctx.strokeStyle='black';
  ctx.lineWidth = 0.5;
  ctx.beginPath();
  ctx.arc(center, center, elementGroesse * 0.5, 1.5*Math.PI, 3.5*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(center, center, elementGroesse * 1.5, 1.5*Math.PI, 3.5*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(center, center, elementGroesse * 2.5, 1.5*Math.PI, 3.5*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(center, center, elementGroesse * 3.5, 1.5*Math.PI, 3.5*Math.PI);
  ctx.stroke();
  
  ctx.lineWidth=0.5;
  ctx.strokeRect(0.5,0.5,elementGroesse*elementGroesse-2,elementGroesse*elementGroesse-2);
  
  ctx.beginPath();              
  ctx.lineWidth = 0.5;
  ctx.moveTo(center, 0);
  ctx.lineTo(center, elementGroesse);
  ctx.stroke();  // Draw it
  
  ctx.beginPath();              
  ctx.lineWidth = 0.5;
  ctx.moveTo(doubleElement, center);
  ctx.lineTo(doubleElement - elementGroesse, center);
  ctx.stroke();  // Draw it
  
  ctx.beginPath();              
  ctx.lineWidth = 0.5;
  ctx.moveTo(center, doubleElement);
  ctx.lineTo(center, doubleElement - elementGroesse);
  ctx.stroke();  // Draw it
  
  ctx.beginPath();              
  ctx.lineWidth = 0.5;
  ctx.moveTo(0, center);
  ctx.lineTo(0 + elementGroesse, center);
  ctx.stroke();  // Draw it
    
  console.log("Data URL");
  var dataURL = c.toDataURL();
  console.log(dataURL);  

Die dataURL müsste ich dann im Datenpunkt schreiben, allerdings läuft das Script nur als "Javascript" ohne den Browser nicht durch

[liv-in-sky]

@dirk_1930

bevor du den spoiler anwendest musst du die codetags ins forum setzen - und über die code tags den spoiler und dann das sript in die code tags kopieren

ist sonst schwer lesbar

[liv-in-sky]

@dirk_1930

https://forum.iobroker.net/topic/28789/script-fürtabelle-der-batterie-zustände/833?lang=de

beispiel 2

[dirk_1930]

@liv-in-sky hab ich geändert - sorry...

[dirk_1930]

@liv-in-sky said in [gelöst] HTML Canvas Zeichnung Farbwerte aus DP übernehmen:

@dirk_1930

https://forum.iobroker.net/topic/28789/script-fürtabelle-der-batterie-zustände/833?lang=de

beispiel 2

... " Beispiel 2" bezog sich auf den falsch verwendeten Spoiler - richtig?

[OliverIO]

@dirk_1930

Auch wenn es schon als gelöst dran steht, evtl mal der Hinweis wie binding auch noch eingesetzt werden kann:

Wenn man den folgenden Inhalt in ein HTML-widget hinzufügt, dann träg vis den Inhalt des Datenpunktes genau an der stelle ein, wo der Datenpunktname in geschweiften Klammern steht und kann dann im folgenden im code weiterverwendet werden.
Das widget wird bei einer Änderung automatisch immer wieder neu erzeugt.
Wenn da jetzt relativ viel code drin steht und/oder der Datenpunkt sich sehr schnell hintereinander ändert, kann es beim zeichnen der Grafik uU zum flackern kommen.
Aber das muss man ausprobieren.

<script>
    var datenpunktinhalt = "{0_userdata.0.test1}"
</script>

Bei der Lösung mit setInterval wird der Server halt regelmäßig mit einer Anfrage (ob sich Wert geändert hat oder nicht) befeuert. Bei 2000ms ist das zwar unproblematisch, wenn es aber öfters passieren soll oder vielfach eingesetzt wird, auch wieder performance-relevant für die serverseite.

[dirk_1930]

@oliverio @liv-in-sky

Ich helfe mir jetzt, indem ich das Element mit Hilfe von Node-Canvas generiere. Damit bekomme ich ein PNG Bild, dass ich abspeichern möchte.

Die Syntax zum abspeichern lautet:

.pipe(fs.createWriteStream(path.join(__dirname, "day0.png")));

Was muss ich hier als 'dirname' angeben, damit ich unter 0_userdata darauf zugreifen kann?

In Visual Studio Code speichert er das dann im gleichen Ordner, nur im IOBroker meldet er __dirname is not defined

[OliverIO]

@dirk_1930

du verwechselst client(browser) und server(iobroker)

die geposteten befehle funktionieren nur unter node auf dem server.
der browser kann diese befehle nicht.
der server hat keinen zugriff auf die dom (document object model) des browsers.

über javascript im browser kannst du einen download anstoßen und das bild dann abspeichern auf den server transferieren und dort dann an eine bestimmte stelle abspeichern. aber evtl ist eine andere vorgehensweise zielführender.
warum willst du die grafik speichern? sie wird ja bei jedem aufruf immer neu gemalt
zur archivierung? zur wiederverwendung? dann sollte man lieber die grafik auf dem server erzeugen.

[dirk_1930]

@oliverio
Ich habe das als Script auf dem IOBroker laufen, nicht im Browser. Abgespeichert unter "common".

Ich habe sehr viele Elemente, die gezeichnet werden, und habe festgestellt, dass der Browser dabei immer eine Gedenkminute einlegt.

Ich würde mir die Elemente nach dem API Aufruf erstellen, und dann als Bild in der VIS einfügen.

[OliverIO]

@dirk_1930
ah ok du bist auf server-seite gewechselt.

Zum Speicherort: du kannst dir einen ort hier drunter suchen
/opt/iobroker/iobroker-data/

Wenn du die Datei über vis bzw den webserver von iobroker anzeigen lassen möchtest, musst du diese datei erst bekannt machen, sonst kennt der webserver die datei nicht.
da bin ich nicht ganz so firm, evtl kann da jemand anderes helfen

[dirk_1930]

@oliverio @liv-in-sky

Ich habe jetzt

__dirname = '/opt/iobroker/iobroker-data/files/vis.0'

gesetzt, sehe aber im Dateimanager die Datei nicht (wie du schon vermutet hast)
(über die Konsole sehe ich die Datei)

Wer könnte mir jetzt dabei helfen?

/// Nachtrag

Man muss die writeFile Methode benutzen. Ich lese jetzt das File aus (welches mit dem Stream erzeugt wurde) und schreibe mit writeFile zurück.
Problem ist jetzt, das der Stream noch nicht fertig ist, wenn der writeFile Befehl ausgeführt ist. Wie bekomme ich das hin, dass er wartet?

console.log("Datei erstellen");

let dateiName = 'day.png';
__dirname = '/opt/iobroker/iobroker-data/files/vis.0/'
 canvas
   .createPNGStream()
   .pipe(fs.createWriteStream(path.join(__dirname,dateiName))); //png schreiben
 
const picture= fs.readFileSync('/opt/iobroker/iobroker-data/files/vis.0/'+ dateiName); //liest linux-datei-system
writeFile('vis.0', 'test.png', picture, function (error) { });   //schreibt in iobroker system

[OliverIO]

@dirk_1930
in dem du den callback verwendest
https://github.com/ioBroker/ioBroker.javascript/blob/11a8a28d70cb68a28b28440e41f0b2c9dbb7132d/docs/en/javascript.md#writefile

[dirk_1930]

@oliverio

… den nutze ich doch schon, oder nicht.

[OliverIO]

@dirk_1930
ah sorry, nicht genau genug gelesen.
probier mal das folgende.
mehr oder weniger das gleiche, aber weniger kompakt,
dafür kann da das Ereignis abgegriffen werden, wenn der stream fertig geschrieben ist.
ich habe es nur schnell zusammenkopiert und grob angepasst.
kann noch fehler enthalten, aber das grundprinzip stimmt.

console.log("Datei erstellen");
 
let dateiName = 'day.png';
__dirname = '/opt/iobroker/iobroker-data/files/vis.0/';

 
const fs = require('fs')
const out = fs.createWriteStream(__dirname + '/test.png')
const stream = canvas.createPNGStream()
stream.pipe(out)
out.on('finish', () =>  {
    console.log('The PNG file was written.');
    const picture= fs.readFileSync('/opt/iobroker/iobroker-data/files/vis.0/'+ dateiName); 
    writeFile('vis.0', 'test.png', picture, function (error) { });   
)
 

[dirk_1930]

@oliverio

Habe es noch etwas geändert und jetzt geht es wie gewünscht

Was würde ich nur ohne Euch machen...

let dateiName = 'dayTest.png';
__dirname = '/opt/iobroker/iobroker-data/files/vis.0/';
const out = fs.createWriteStream(__dirname + dateiName);
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on('finish', () => {
    const picture = fs.readFileSync(__dirname + dateiName);
    writeFile('vis.0' , '/myfiles/img/' + dateiName, picture, function (error) { });
    console.log('The PNG file was written.');
})

[liv-in-sky]

@dirk_1930 du könntest doch mal etwas zeigen,von dem, was du da gezaubert hast

mit dem programm : ScreenToGif https://www.screentogif.com/downloads.html -

wäre das schnell gemacht

[dirk_1930]

@liv-in-sky
Gerne... allerdings bin ich noch weit davon entfernt fertig zu sein.
Ich nutze die API von Meteoblue. Dort gibt es den sogenannten Rain Spot, der die Niederschlagsverteilung innerhalb von 15 km um deinen Standort herum zeigt. Da die API nur einen Farbcodierten String liefert, musste ich das aufdröseln. Da ich nun wirklich nicht der begnadete Programmierer bin, braucht das halt ewig und es tauchen ständig neue Fragen und Wünsche / Ideen auf. Allerdings lernt man auf diese Art am Praxisprojekt auch am meisten.
So sehen die gerenderten Rainspots für die nächsten 5 Tage aus.
Da es jetzt auch noch stündliche Auflösungen gibt, dachte ich mir es macht mehr Sinn diese Bilder einmalig nach API Aufruf zu rendern und dann nur jeweils das Bild einzufügen. Sonst müsste ich ja unter Umständen dann bei x-HTML Widgets den Code ändern.
Wenn ich das ganze mal als Card fertig habe poste ich gerne einen Screenshot.