Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. HTML Canvas Zeichnung Farbwerte aus DP übernehmen

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.8k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.3k

HTML Canvas Zeichnung Farbwerte aus DP übernehmen

Geplant Angeheftet Gesperrt Verschoben Visualisierung
27 Beiträge 3 Kommentatoren 1.5k Aufrufe 3 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO 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_1930D Offline
    dirk_1930D Offline
    dirk_1930
    schrieb am zuletzt editiert von dirk_1930
    #21

    @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
    
    
    OliverIOO 1 Antwort Letzte Antwort
    0
    • dirk_1930D 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
      
      
      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      schrieb am zuletzt editiert von
      #22

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

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      dirk_1930D 1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

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

        dirk_1930D Offline
        dirk_1930D Offline
        dirk_1930
        schrieb am zuletzt editiert von
        #23

        @oliverio

        … den nutze ich doch schon, oder nicht.

        OliverIOO 1 Antwort Letzte Antwort
        0
        • dirk_1930D dirk_1930

          @oliverio

          … den nutze ich doch schon, oder nicht.

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von
          #24

          @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) { });   
          )
           
          

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          dirk_1930D 1 Antwort Letzte Antwort
          0
          • OliverIOO 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_1930D Offline
            dirk_1930D Offline
            dirk_1930
            schrieb am zuletzt editiert von
            #25

            @oliverio

            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.');
            })
            
            liv-in-skyL 1 Antwort Letzte Antwort
            0
            • dirk_1930D dirk_1930

              @oliverio

              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.');
              })
              
              liv-in-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              schrieb am zuletzt editiert von
              #26

              @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_1930D 1 Antwort Letzte Antwort
              0
              • liv-in-skyL 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_1930D Offline
                dirk_1930D Offline
                dirk_1930
                schrieb am zuletzt editiert von
                #27

                @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.

                Screenshot 2022-03-15 075449.png

                1 Antwort Letzte Antwort
                1
                Antworten
                • In einem neuen Thema antworten
                Anmelden zum Antworten
                • Älteste zuerst
                • Neuste zuerst
                • Meiste Stimmen


                Support us

                ioBroker
                Community Adapters
                Donate

                815

                Online

                32.4k

                Benutzer

                81.5k

                Themen

                1.3m

                Beiträge
                Community
                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                ioBroker Community 2014-2025
                logo
                • Anmelden

                • Du hast noch kein Konto? Registrieren

                • Anmelden oder registrieren, um zu suchen
                • Erster Beitrag
                  Letzter Beitrag
                0
                • Home
                • Aktuell
                • Tags
                • Ungelesen 0
                • Kategorien
                • Unreplied
                • Beliebt
                • GitHub
                • Docu
                • Hilfe