NEWS
HTML Canvas Zeichnung Farbwerte aus DP übernehmen
-
@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
https://forum.iobroker.net/topic/28789/script-fürtabelle-der-batterie-zustände/833?lang=de
beispiel 2
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
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 hab ich geändert - sorry...
-
@liv-in-sky said in [gelöst] HTML Canvas Zeichnung Farbwerte aus DP übernehmen:
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?
-
Hallo zusammen,
ich versuche in einem basic-HTML Widget ein Rechteck mit dem fillStyle Farbwert aus einem Datenpunkt zu erstellen.Testweise hatte ich folgendes probiert:
<!DOCTYPE html> <html> <body> <h1>The canvas element</h1> <canvas id="myCanvas"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 42, 70, 70); </script> </body> </html>Das zeichnet ein schönes rotes Rechteck...
Im Datenpunkt "0_userdata.day_0.spot.1" habe ich einen Hexwert als String hinterlegt.
Wie bekomme ich jetzt den Farbwert aus dem Datenpunkt übertragen, bzw. geht das überhaupt?Besten Dank für Eure Hilfe :-)
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.
-
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.
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
-
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
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. -
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.@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.
-
@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
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
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
@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.
Support us
430
Online32.4k
Users81.5k
Topics1.3m
Posts