HTML Canvas Zeichnung Farbwerte aus DP übernehmen

dirk_1930

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 :-)

liv-in-sky

@dirk_1930

ungefähr so:


<h1>The canvas element</h1>

 

<canvas id="myCanvas"></canvas>

 

<script>
var myColor;
self=this;
self.servConn.getStates('0_userdata.0.CONTROL-OWN.AAATEST.TestString5', (error, states) => {  console.log(states);myColor=states['0_userdata.0.CONTROL-OWN.AAATEST.TestString5'].val ;
console.log(myColor);
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = myColor;

ctx.fillRect(0, 42, 80, 70);
} );

</script>

das ist aber nur beim ersten laden - wenn du das aber bei änderung des dp haben will, muss das gecheckt werden

 

<h1>The canvas element</h1>

 

<canvas id="myCanvas"></canvas>

 

<script>
setInterval(function () {
var myColor;
self=this;
self.servConn.getStates('0_userdata.0.CONTROL-OWN.AAATEST.TestString5', (error, states) => {  console.log(states);myColor=states['0_userdata.0.CONTROL-OWN.AAATEST.TestString5'].val ;
console.log(myColor);
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = myColor;

ctx.fillRect(0, 42, 80, 70);
} );
},2000)
</script>

dirk_1930

:+1: :clap:

Super... das klappt perfekt.

Danke für die schnelle Hilfe

liv-in-sky

@dirk_1930

das interval bräuchte man nicht, wenn du eine aktion in dem canvas oder ein anderes widgets klickst - dann könnte man auf den klick triggern und den dp lesen und bräuchte nicht dauernd den dp abfragen - was ja performance braucht

dirk_1930

@liv-in-sky
Darf ich dich nochmals um Hilfe bitten…

Ich müsste noch einen weiteren Datenpunkt in diesem Script abfragen. Leider kriege ich das nicht hin.

Hast du einen Lösungsvorschlag?

liv-in-sky

@dirk_1930

hilft das weiter

<script>
setInterval(function () {
var myColor
var mySecondDP;
self=this;
self.servConn.getStates(['0_userdata.0.CONTROL-OWN.AAATEST.TestString5','0_userdata.0.CONTROL-OWN.AAATEST.TestString6'], (error, states) => {  console.log(states);myColor=states['0_userdata.0.CONTROL-OWN.AAATEST.TestString5'].val;
mySecondDP=states['0_userdata.0.CONTROL-OWN.AAATEST.TestString6'].val;
console.log(myColor);
console.log(mySecondDP);
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = myColor;

ctx.fillRect(0, 42, 80, 70);
} );
},2000)
</script>

dirk_1930

@liv-in-sky
Das hat definitiv weitergeholfen...

Gibt es dazu eine Doku, damit ich mich einmal mit den Befehlen auseinandersetzten kann?

liv-in-sky

@dirk_1930 nicht wirklich -alles zusammengesucht

auf github gibt es für die vis ein paar beschreibungen https://github.com/ioBroker/ioBroker.vis

aber die kommunikation mit dp hast du ja jetzt

dp scheiben

vis.setValue('id',wert)  --- eigentlich wie setState in javascript

datenpunkt wert lesen, wenn dp schon in der vis durch anderes widget oder binding bekannt ist:

var myRunningDevice1=vis.states.attr('javascript.0.YouTube.whichDevice.val');

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

Community Forum

NEWS

HTML Canvas Zeichnung Farbwerte aus DP übernehmen

Support us

378

32.4k

81.5k

1.3m