Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[e_a_s_y]

@liv-in-sky
ja die hatte ich versucht zu mit einzubinden, selector schließt das die rendertime ja aus, das steht auch so im code, das konnte ich sehen. leider ist mir nicht ganz klar was ein selector sein soll. vermute das es ein div mit einem tag ist. das kann ich aber so bei der vis nicht ganz hinten einbauen.
ich hab in meiner vis auch noch iframes mit highchart-diagrammen, auch hier laden die kurven etwas verzögert.
so blöd es auch ist timer zu verweden, aber hier passt das schon.

das timeout ändert leider nichts da die seite der vis ja antwortet und der hintergrund auch meist schon geladen ist.
die elemente fehlen zwar meist oder viele. aber selbst mit langem TO (60s) macht der adapter nach ca 5s das bild.

so wie es im code steht sollte es eigentlich funktionieren macht es aber leider nicht, hatte etwas rum probiert aber nur der WA hat das ergebniss gebracht.

bin ich wiedermal der erste der die vis ablichten will?
sind alle anderen seiten in <5s schon fertig?
oder gibts noch einen adapter der für so etwas taugt.

[OliverIO]

@e_a_s_y

Mit selektoren sind die css selektoren gemeint.Alternativ kannst du auch xpath verwenden.
Also ein Mechanismus jedes beliebige html Element zu adressieren.
Puppeteer wartet dann darauf, das dieses Element dem der Dom hinzugefügt wird und sagt dann, nun ist die Seite geladen. Das ist besonders wichtig bei Seiten, bei denen Seiteninhalte dynamisch nachgeladen werden und erst bei Verfügbarkeit es dann weitergehen soll.

https://wiki.selfhtml.org/wiki/CSS/Selektoren

Life auf einer Seite kannst du das in den webdeveloper Tools von Chrome in der Konsole mit
https://developer.chrome.com/blog/search-dom-tree-by-css-selector
Ausprobieren

[liv-in-sky]

@e_a_s_y

lt. github page ist die syntax anders angegeben, als du es oben zeigst - https://github.com/foxriver76/ioBroker.puppeteer

github:

waitOption?: {
        /**
         * Define a Timeout in ms
         */
        waitForTimeout?: 5000,
    
        /**
         * Wait for a given id/tag/etc to be occured
         */
        waitForSelector?: '#testId'
      },

• bin mir nur nicht sicher, ob das fragezeichen richtig ist bei waitOption?

hast du das mal getestet ?

[OliverIO]

@liv-in-sky

Fragezeichen bedeutet, das der Parameter optional ist.

[e_a_s_y]

@liv-in-sky

ja das hatte ich getestet.

ich hatte das fragezeichen so gedeutet das der paramater anzupassen ist.
mit fragezeichen wird er als fehlerhaft markiert.

wie schon geschrieben den selector habe ich noch nicht ganz verstanden und kann den auch aktuell nicht einbauen.
eine änderung des timeouts bringt nichts. da der adapter davon aus geht das die seite geladen wurde sobald der hintergrund aufgebaut ist.
die vis läd dann aber erst nach und nach die elemente und diagramme.
selbst in der entwiklerconsole vom browser sieht man das an der eigentlichen seite nichts mehr passiert.

der timeout ist ja nur für den fehler fall , falls keine daten kommen.

ich bräuchte die rendertime diese steht zwar auf der seite noch in der doku, allerdings ist die im beispiel nicht mehr mit drinn.
da dort auch geschrieben steht das jede wait-option die rendertime aushelbelt habe ich dann auch darauf verzichtet.
habe in summe ca. 24h damit rum probiert

@OliverIO

danke für die bestätiging, soetwas in der art hatte ich vermutet, dache zwar das es html-div-tags sind aber war ja nah drann.
ich schaue mir die sache bei gelegenheit mal an und versuche mal ein css element in die vis zu bauen.
evtl. kann ich auch einen vorhanden nutzen.
danke für den tip.

[OliverIO]

@e_a_s_y sagte in Puppeteer Adapter:

danke für die bestätiging, soetwas in der art hatte ich vermutet, dache zwar das es html-div-tags sind aber war ja nah drann.
ich schaue mir die sache bei gelegenheit mal an und versuche mal ein css element in die vis zu bauen.
evtl. kann ich auch einen vorhanden nutzen.
danke für den tip.

ach vis. das ist speziell
dort werden ja elemente ebenfalls dynamisch erstellt, allerdings ist die reihenfolge nicht gesichert. d.h. wenn du auf ein element (bspw eine element mit einer widget id) wartest, heißt das nicht, das das auch das letzte element ist.

bei vis würde ich dann einfach mit einem timeout arbeiten

tatsächlich ist sogar eine callback funktion onReady vorgesehen
https://github.com/ioBroker/ioBroker.vis/blob/8518f7fbadf76519b3c6bceb5a34e298b9257c0a/www/js/vis.js#L3405
allerdings wird diese nie belegt
https://github.com/ioBroker/ioBroker.vis/blob/master/www/js/vis.js#L3999

[e_a_s_y]

@oliverio

ok, super, läuft doch.

ja so hatte ich das auch im gefühl. daher wollte ich dann nicht noch mehr zeit investieren.
bin wohl wirklich der erste der die vis ablichtet.

bevor fragen kommen.
das mache ich weil ich überall unsichtbare buttons drüber habe um diagramme im popup zu öffnen.
leider hat sich herrausgestellt das dies recht unpraktisch ist wenn man auf dem phone mal zoomen und schieben will.
daher gibt für das phone eine website mit dem foto der vis welches zyklisch erstellt wird. (... sofern das möglich ist...)

[liv-in-sky]

@e_a_s_y sagte in Puppeteer Adapter:

bin wohl wirklich der erste der die vis ablichtet.

nee - mache das minütlich über den ganzen tag- ist aber nur eine kleine vis-seite

was war jetzt die lösung?

[OliverIO]

@e_a_s_y

Ah ja ein Bild ist für manche Geräte Ressourcen schonender wie ein ganzes vis mit mehreren Widgets aufzubauen

[peterfido]

@oliverio Ein altes Android Tablet, welches Android 4.4.2 als höchste Version bekommen hat, habe ich, bis auf eine Flot-Grafik, manuell per Node-Red gefüllt. Die Flot-Grafik lasse ich jetzt minütlich unter /dev/shm im RAM ablegen, und kann da auch prima per Node-Red dran und ans Tablet ausliefern.

Der Javascript-Adapter hat alle Parameter mit Fragezeichen? als fehlerhaft markiert. Daher habe ich alle Fragezeichen entfernt. Der Parameter quality wird nicht mehr unterstützt. Bei path muss der Dateiname mit rein, sonst gibt es eine Fehlermeldung, welche danach aussieht, dass der Ordner als Ziel genutzt wird. Ein paar Semikolon und Kommas musste ich auch noch korrigieren,

Bei der Installation musste ich chromium noch manuell nachinstallieren.

peter@iob:~$ sudo apt install chromium -y

In der Instanz noch Externen Browser anhaken und den Pfad angeben.

/usr/bin/chromium

Mein aktuelles Skript:

Spoiler

function Temptendenz(){
   sendTo('puppeteer.0', 'screenshot', { url: 'http://192.168.2.24:8082/vis-2/?tendenz#startseite',
       ioBrokerOptions: {
           /**
            * Define a filename for the ioBroker storage e.g. test.png
            */
           storagePath: 'tendenz.png',
       },
       /**
        * Define at most one wait option
        * You can also look for other waitOptions currently supported by Puppeteer API
        * see e.g. https://puppeteer.github.io/puppeteer/docs/puppeteer.page.waitforfilechooser
        */
       waitOption: {
           /**
            * Define a Timeout in ms
            */
           waitForTimeout: 5000,
       
           /**
            * Wait for a given id/tag/etc to be occured
            */
           waitForSelector: 'w000680',
       },
       /**
        * Optionally, specify the viewport manually, see https://pptr.dev/api/puppeteer.viewport
        */
       viewportOptions: {
           width: 800,
           height: 600
       },
       /**
        * The file path to save the image to. The screenshot type will be inferred
        * from file extension. If path is a relative path, then it is resolved
        * relative to current working directory. If no path is provided, the image
        * won't be saved to the disk.
        */
       path: '/dev/shm/tendenz.png',
       /**
        * When true, takes a screenshot of the full page.
        * @defaultValue false
        */
       fullPage: false,
       /**
        * An object which specifies the clipping region of the page.
        */
       clip: {         
           x: 0,
           y: 0,
           width: 223,
           height: 47 
       },
       /**
        * Quality of the image, between 0-100. Not applicable to `png` images.
        */
   //      quality: 100,
       /**
        * Hides default white background and allows capturing screenshots with transparency.
        * @defaultValue false
        */
       omitBackground: true,
       /**
        * Encoding of the image.
        * @defaultValue 'binary'
        */
       encoding:  'binary',       //'base64' | 'binary',
       /**
        * If you need a screenshot bigger than the Viewport
        * @defaultValue true
        */
       captureBeyondViewport: false,
   }, obj => {
       if (obj.error) {
           log(`Error taking screenshot: ${obj.error.message}`, 'error');
       } else {
           // the binary representation of the image is contained in `obj.result`
           log(`Successfully took screenshot: ${obj.result}`);
       }
   });
}
//'*/30 * * * * *'
schedule("* * * * *", function(){
   Temptendenz();
});

Temptendenz();