NEWS
HTML Canvas Zeichnung Farbwerte aus DP übernehmen
-
@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 helfenIch 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 -
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@dirk_1930
in dem du den callback verwendest
https://github.com/ioBroker/ioBroker.javascript/blob/11a8a28d70cb68a28b28440e41f0b2c9dbb7132d/docs/en/javascript.md#writefile -
@dirk_1930
in dem du den callback verwendest
https://github.com/ioBroker/ioBroker.javascript/blob/11a8a28d70cb68a28b28440e41f0b2c9dbb7132d/docs/en/javascript.md#writefile -
@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
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) { }); )Habe es noch etwas geändert und jetzt geht es wie gewünscht :+1: :blush:
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.'); }) -
Habe es noch etwas geändert und jetzt geht es wie gewünscht :+1: :blush:
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.'); })@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 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
@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.