Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Puppeteer: Screenshots PhantomJS Alternative

    NEWS

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    Puppeteer: Screenshots PhantomJS Alternative

    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      bimmi @bimmi last edited by bimmi

      vielleicht nochmal an die, die bereits ein blockly erstellt hatten...

      Sorry, ich blick da bei dem SendTo nicht durch 😞

      So sieht mein Blockly aus:

      a929ba19-55d3-44a1-977f-0676a58b3ade-image.png

      diesen Fehler bekomme ich:

      bdd0ef66-912a-418e-a6a9-addeee4d56c4-image.png

      
      javascript.0
      2023-07-12 16:21:54.618	error	script.js.EPS.Grundwasser: {'error':{}}
      
      puppeteer.0
      2023-07-12 16:21:54.615	error	Could not take screenshot of "http://192.168.1.10:8082/vis/index.html?EPS#Grundwasser": Expected options.clip.x to be a number but found undefined
      

      Der Fehler sagt eigentlich, dass es mit dem clip width und height ein Problem gibt. Der Datenpunkt ist eine "number".

      Jemand, der das schon in Blockly getan hat vielleicht einen Tipp für mich? 🦆

      Auf Debug kommt folgende Message:

      puppeteer.0
      2023-07-12 17:06:02.091	debug	Message: {"command":"screenshot","message":{"url":"http://192.168.1.10:8082/vis/index.html?EPS#Grundwasser","waitOption":{"waitForTimeout":5000},"clip":"{width:296height:128}","path":"/var/www/html/eps-display/Grundwasser.jpg","quality":100},"from":"system.adapter.javascript.0","callback":{"message":{"url":"http://192.168.1.10:8082/vis/index.html?EPS#Grundwasser","waitOption":{"waitForTimeout":5000},"clip":"{width:296height:128}","path":"/var/www/html/eps-display/Grundwasser.jpg","quality":100},"id":14,"ack":false,"time":1689174362088},"_id":40259716}
      

      Da fehlt auch m.M. noch ein Trennzeichen wenn er das aus den Textfeldern zusammenstellt...

      B 1 Reply Last reply Reply Quote 0
      • B
        bimmi @bimmi last edited by

        ich bin inzwischen etwas weiter gekommen:

        Jetzt bekomme ich zwar keine Fehlermeldung, jedoch schneider mir puppeteer den Screenshot nicht zu.

        puppeteer.0
        2023-07-12 17:57:40.099	debug	Message: {"command":"screenshot","message":{"url":"http://192.168.1.10:8082/vis/index.html?EPS#Grundwasser","path":"/var/www/html/eps-display/Grundwasser.jpg","quality":100,"waitOptions":{"waitForTimeout":2000},"clip.width":296,"clip.height":128,"clip.x":0,"clip.y":0},"from":"system.adapter.javascript.0","callback":{"message":{"url":"http://192.168.1.10:8082/vis/index.html?EPS#Grundwasser","path":"/var/www/html/eps-display/Grundwasser.jpg","quality":100,"waitOptions":{"waitForTimeout":2000},"clip.width":296,"clip.height":128,"clip.x":0,"clip.y":0},"id":37,"ack":false,"time":1689177460098},"_id":40259743}
        

        fd1cd368-c2cb-4a4b-9506-c6206e70f6a3-image.png

        1 Reply Last reply Reply Quote 0
        • B
          bimmi @horphi last edited by

          @horphi sagte in Puppeteer: Screenshots PhantomJS Alternative:

          Habs gefunden.
          Einfach den Haken bei Ergebniss setzen und dann kann ich das Result abfragen....;-)
          ec282ada-bcc2-429d-a02d-b579c7d8143f-grafik.png

          vielleicht könnte ich mir das blockly mal ansehen. ich bekomme diese Blöcke absolut nicht hin 😞 ich denke das ist genau das was ich suche nur mit dem clip.height und clip.width.

          1 Reply Last reply Reply Quote 0
          • O
            oxident last edited by

            Hättet ihr eine Idee, wie ich das Ergebnis (also den Screenshot) per VIS zur Verfügung stellen könnte?
            Nutze Redis ... daher finde ich die erzeugte Datei leider nirgends im FS.

            B 1 Reply Last reply Reply Quote 0
            • B
              bimmi @oxident last edited by

              @oxident ich habe mir einen port vom webserver geöffnet in dem lokal die screenshots abgelegt werden. auf diese greife ich dann über den eps ap zu!

              1 Reply Last reply Reply Quote 1
              • R
                Revobobo @foxriver76 last edited by Revobobo

                Moin Zusammen,

                Ich bekomme einen Fehler wenn ich die Screenshots innerhalb iobroker speichern will.

                puppeteer.0
                	2023-07-29 10:46:57.192	error	Could not take screenshot of "http://192.168.178.28:8086/vis/index.html?ePaperDisplay#Display01": Screenshots cannot be stored inside the ioBroker storage
                
                Screenshots cannot be stored inside the ioBroker storage
                

                Hier zu speichern ist kein Problem - aber dann bekomme ich das Bild nicht in die VIS.

                /opt/iobroker/Screenshot
                

                Infos zum System:

                • ioBroker in einem Container unter Proxmox
                • Node.js v18.16.1
                • NPM 9.5.1

                Hat jemand einen Tip für mich wie ich die Screenshots innerhalb ioBroker speichern kann?

                Thanx und Gruß
                Revo

                -----------------------------ERLEDIGT-----------------------------
                Für meine Anwendung benötige ich den Zugriff nicht mehr.

                DANKE - Revo

                1 Reply Last reply Reply Quote 1
                • ?
                  A Former User last edited by

                  Hallo zusammen,

                  aktuell erstelle ich einige mit Screenshots meiner Vis mit PhantomJS und sende diese per cur/ftp an eine Webseite. Ich verwende dazu Blockly. Das Ganze funktioniert bisher super, aber Mangels weitern Support von PhantomJS möchte ich gerne umstellen.
                  Ich möchte dies nun auf puppeteer umstellen komme aber nicht weiter. Evtl kann mir einer von Euch sagen wo mein Fehler liegt.
                  Screenshot 2023-08-28 135936.png

                  <xml xmlns="https://developers.google.com/blockly/xml">
                    <block type="schedule" id="G^UnO=d-{}^C(.H]m@Pd" x="113" y="-112">
                      <field name="SCHEDULE">* * * * *</field>
                      <statement name="STATEMENT">
                        <block type="sendto_custom" id="wY=A{nWdIj;FEV=*X4#X">
                          <mutation xmlns="http://www.w3.org/1999/xhtml" items="url,filename,clipWidth,ClipHeight,renderTime" with_statement="false"></mutation>
                          <field name="INSTANCE">puppeteer.0</field>
                          <field name="COMMAND">screenshot</field>
                          <field name="LOG"></field>
                          <field name="WITH_STATEMENT">FALSE</field>
                          <value name="ARG0">
                            <shadow type="text" id="3^rBcN9S-$oUq0PzLkT~">
                              <field name="TEXT">http://10.11.207.203:8082/vis/index.html#Wetter</field>
                            </shadow>
                          </value>
                          <value name="ARG1">
                            <shadow type="text" id="AkklyNo!{[;K(,)98%zL">
                              <field name="TEXT">/opt/iobroker/phantomcache/AktuellePT.png</field>
                            </shadow>
                          </value>
                          <value name="ARG2">
                            <shadow type="text" id="CWazP7X~7hw+m@(E7xy^">
                              <field name="TEXT">1365</field>
                            </shadow>
                          </value>
                          <value name="ARG3">
                            <shadow type="text" id="Ze9N;z7%z,z}#YDFXFyB">
                              <field name="TEXT">470</field>
                            </shadow>
                          </value>
                          <value name="ARG4">
                            <shadow type="text" id="5}},FP~XC/9(Op1J0@al">
                              <field name="TEXT">10000</field>
                            </shadow>
                          </value>
                          <next>
                            <block type="exec" id="--46R`0IC6H{T,Q5Q_+n">
                              <mutation xmlns="http://www.w3.org/1999/xhtml" with_statement="false"></mutation>
                              <field name="WITH_STATEMENT">FALSE</field>
                              <field name="LOG"></field>
                              <value name="COMMAND">
                                <shadow type="text" id="?]Ggby@,5iW4:H;VT]S[">
                                  <field name="TEXT">curl -T /opt/iobroker/phantomcache/AktuellePT.png ftp://eine-seite-imweb.de/httpdocs/wetter/ --user user:pass</field>
                                </shadow>
                              </value>
                            </block>
                          </next>
                        </block>
                      </statement>
                    </block>
                  </xml>
                  
                  liv-in-sky 2 Replies Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @Guest last edited by

                    @je-vi
                    versuch:
                    lege mal den exec block in einen timeout größer 10000

                    1 Reply Last reply Reply Quote 0
                    • liv-in-sky
                      liv-in-sky @Guest last edited by liv-in-sky

                      @je-vi

                      und was geht eigentlich nicht - das erzeugen des bildes oder das versenden des bildes

                      ? 1 Reply Last reply Reply Quote 0
                      • ?
                        A Former User @liv-in-sky last edited by A Former User

                        @liv-in-sky said in Puppeteer: Screenshots PhantomJS Alternative:

                        @je-vi

                        und was geht eigentlich nicht - das erzeugen des bildes oder das versenden des bildes

                        @liv-in-sky
                        Hallo,
                        schon das Erstellen schlägt fehl. Im Log kann ich auch nichts sehen.

                        puppeteer.0
                        8301	2023-08-28 16:01:00.005	debug	Message: {"command":"screenshot","message":{"url":"http://10.11.207.203:8082/vis/index.html#WetterTageswerte","filename":"/opt/iobroker/phantomcache/AktuellePT.png","clipWidth":"1365","clipHeight":"470","renderTime":"10000"},"from":"system.adapter.javascript.0","_id":62388316}
                        
                        puppeteer.0
                        8301	2023-08-28 16:00:00.004	debug	Message: {"command":"screenshot","message":{"url":"http://10.11.207.203:8082/vis/index.html#WetterTageswerte","filename":"/opt/iobroker/phantomcache/AktuellePT.png","clipWidth":"1365","clipHeight":"470","renderTime":"10000"},"from":"system.adapter.javascript.0","_id":62388307}
                        
                        puppeteer.0
                        8301	2023-08-28 15:59:46.321	info	Ready to take screenshots
                        

                        Setze ich die Werte direkt unter den Objekten des Adapters wird der Screenshot geschrieben.
                        Screenshot 2023-08-28 161744.png
                        Das Problem liegt also an meinem Blockly

                        liv-in-sky 2 Replies Last reply Reply Quote 0
                        • liv-in-sky
                          liv-in-sky @Guest last edited by

                          @je-vi

                          also ich nutze javascript - aber schau mal wie die einzelnen werte heißen - nicht filename sondern path - muss dann im blockly auch so sein

                          sendTo('puppeteer.0', 'screenshot', { 
                          
                              url: 'http://192.168.178.59:8082/vis/index.html?handyBildAnzeige#dtaBild',
                          
                              path: '/Daten/iobroker1.png', 
                          
                              width:450,
                          
                              height:850,
                          
                              waitForTimeout: 6000,
                              fullPage: false,
                          
                              clip: {         
                                  x: 0,
                                  y: 0,
                                  width: 450,
                                  height: 850 
                                }
                          
                          });
                              }
                          })
                          
                          
                          ? 1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @Guest last edited by

                            @je-vi

                            alle keys sind hier: https://github.com/foxriver76/ioBroker.puppeteer

                            1 Reply Last reply Reply Quote 0
                            • ?
                              A Former User @liv-in-sky last edited by

                              @liv-in-sky said in Puppeteer: Screenshots PhantomJS Alternative:

                              @je-vi

                              also ich nutze javascript - aber schau mal wie die einzelnen werte heißen - nicht filename sondern path - muss dann im blockly auch so sein

                              sendTo('puppeteer.0', 'screenshot', { 
                              
                                  url: 'http://192.168.178.59:8082/vis/index.html?handyBildAnzeige#dtaBild',
                              
                                  path: '/Daten/iobroker1.png', 
                              
                                  width:450,
                              
                                  height:850,
                              
                                  waitForTimeout: 6000,
                                  fullPage: false,
                              
                                  clip: {         
                                      x: 0,
                                      y: 0,
                                      width: 450,
                                      height: 850 
                                    }
                              
                              });
                                  }
                              })
                              
                              

                              Danke für deine Hilfe. Ich habe es jetzt per JavaScript mit jsftp Modul Umgesetzt. War etwas Fummelei Funktioniert nun aber wie es soll und ich kann bei Bedarf den PhantomJS ablösen.

                              B 1 Reply Last reply Reply Quote 0
                              • B
                                bimmi @Guest last edited by

                                Jetzt muss ich hier noch einmal fragen, da ich es bis heute nicht hinbekommen habe und einfach nicht checke was falsch daran ist. Puppeteer läuft zu 100%. Wenn ich screenshots über die Objekte erstelle, dann funktioniert das ganze auch jedoch übernimmt er mir folgende keys nicht wenn ich das in mein Blockly einfüge:

                                • clip height
                                • clip width
                                • waitforselector

                                Ich habe sämtliche Kombinationen versucht mit konvertiere zu Zahl, als Text, als Nummernfeld usw... Ich denke, dass die Übergabe der Keys nicht richtig ist und ja, ich habe das manual gelesen hier: https://github.com/foxriver76/ioBroker.puppeteer#croplefttopheightwidth

                                57d82b84-b7db-42b5-baf5-52bcca9679aa-image.png

                                731986e3-5fb5-4746-955c-44db9a4867f3-image.png

                                Was hingegen funktioniert ist:

                                • path
                                • url
                                • quality

                                470ea8eb-a648-43d2-8c28-3d66ddc7bca4-image.png

                                Man sieht im Log, dass der screenshot erstellt wurde und das er auch an der richtigen Stelle erstellt wird. Bei der Info über den Screenshot sehe ich auch, dass er 100% als Qualität übernommen hat (Standard ist 80%).

                                Ich hoffe nochmal inständig auf ein paar hilfreiche Tipps von euch. Ich weiß auch, dass hier mehr mit JS Programmiert wird, jedoch möchte ich das ganze noch erweitern und in anderen bereits vorhandenen Blocklys einbauen.

                                Gruß Christoph

                                liv-in-sky 1 Reply Last reply Reply Quote 0
                                • liv-in-sky
                                  liv-in-sky @bimmi last edited by

                                  @bimmi

                                  hast du mal versucht, das file unter dem /opt/iobroker/ ordner zu speichern - iobroker hat evtl keine rechte auf /var/......

                                  B 1 Reply Last reply Reply Quote 0
                                  • B
                                    bimmi @liv-in-sky last edited by bimmi

                                    @liv-in-sky doch, ich sehe ja am Zeitstempel, dass die Datei aktualisiert wurde! 2be335d2-be1f-40b2-9a85-012bbd2d909c-image.png ich habe den user iobroker dem Verzeichnis hinzugefügt.

                                    liv-in-sky 2 Replies Last reply Reply Quote 0
                                    • liv-in-sky
                                      liv-in-sky @bimmi last edited by

                                      @bimmi

                                      hier mal ein beispiel zum import - verstehst du, was ich damit meine ? evtl musst duden parameter so angeben

                                      <block xmlns="https://developers.google.com/blockly/xml" type="sendto_custom" id="b+yzc}s4ouYY:E}r`WrK" x="63" y="-312">
                                       <mutation xmlns="http://www.w3.org/1999/xhtml" items="clip" with_statement="false"></mutation>
                                       <field name="INSTANCE">puppeteer.0</field>
                                       <field name="COMMAND">send</field>
                                       <field name="LOG"></field>
                                       <field name="WITH_STATEMENT">FALSE</field>
                                       <value name="ARG0">
                                         <shadow type="text" id="z#Yfm!fw[pLKZWJI#h?o">
                                           <field name="TEXT">{ x: number,y: number, width: number, height: number        }</field>
                                         </shadow>
                                       </value>
                                      </block>
                                      

                                      1 Reply Last reply Reply Quote 0
                                      • liv-in-sky
                                        liv-in-sky @bimmi last edited by

                                        @bimmi

                                        wenn du dein und mein blockly im scriptmode ansiehst, siehst duden unterschied

                                        B 1 Reply Last reply Reply Quote 1
                                        • B
                                          bimmi @liv-in-sky last edited by

                                          @liv-in-sky DANKE

                                          de91f098-7b20-47de-ad84-bc2d2870ed26-image.png

                                          Endlich!!!! Als Text direkt eingeben, so ähnlich hatte ich es schon, jedoch ohne x,y,width und heigh.

                                          VIELEN DANK!

                                          liv-in-sky 1 Reply Last reply Reply Quote 0
                                          • liv-in-sky
                                            liv-in-sky @bimmi last edited by liv-in-sky

                                            @bimmi

                                            ich würde es so machen

                                            <xml xmlns="https://developers.google.com/blockly/xml">
                                             <variables>
                                               <variable id="=|-HU{v0HPlybOQ*ghcR">mypath</variable>
                                               <variable id="(O?~p(`|c|(KIhiht#i*">myurl</variable>
                                               <variable id="Kg9b=20h)E,riQJeDEcb">myheight</variable>
                                               <variable id="d?/+]%mL0t@pakXBBv]V">mywidth</variable>
                                               <variable id="ELianL7RIoI]6v](.5H{">clipx</variable>
                                               <variable id="v7~-E}:`3zaZ=MG;7P=[">clipy</variable>
                                               <variable id="WKu^.B?9T66xQ_qJgB@2">clipwidth</variable>
                                               <variable id="$JY/m%d:K3q{;2o7?$9r">clipheight</variable>
                                             </variables>
                                             <block type="procedures_defcustomnoreturn" id="{{Bl:d;+8eDTq,0~J9H2" x="237" y="112">
                                               <mutation statements="false">
                                                 <arg name="mypath" varid="=|-HU{v0HPlybOQ*ghcR"></arg>
                                                 <arg name="myurl" varid="(O?~p(`|c|(KIhiht#i*"></arg>
                                                 <arg name="myheight" varid="Kg9b=20h)E,riQJeDEcb"></arg>
                                                 <arg name="mywidth" varid="d?/+]%mL0t@pakXBBv]V"></arg>
                                                 <arg name="clipx" varid="ELianL7RIoI]6v](.5H{"></arg>
                                                 <arg name="clipy" varid="v7~-E}:`3zaZ=MG;7P=["></arg>
                                                 <arg name="clipwidth" varid="WKu^.B?9T66xQ_qJgB@2"></arg>
                                                 <arg name="clipheight" varid="$JY/m%d:K3q{;2o7?$9r"></arg>
                                               </mutation>
                                               <field name="NAME">machePhoto</field>
                                               <field name="SCRIPT">c2VuZFRvKCdwdXBwZXRlZXIuMCcsICdzY3JlZW5zaG90JywgeyANCg0KICAgIHVybDogbXl1cmwgLA0KDQogICAgcGF0aDogbXlwYXRoICwgDQoNCiAgICB3aWR0aDpteXdpZHRoLA0KDQogICAgaGVpZ2h0Om15aGVpZ2h0LA0KDQogICAgd2FpdEZvclRpbWVvdXQ6IDUwMDAsDQogICAgZnVsbFBhZ2U6IGZhbHNlLA0KDQogICAgY2xpcDogeyAgICAgICAgIA0KICAgICAgICB4OiBjbGlweCwNCiAgICAgICAgeTogY2xpcHksDQogICAgICAgIHdpZHRoOiBjbGlwd2lkdGgsDQogICAgICAgIGhlaWdodDogY2xpcGhlaWdodA0KICAgICAgfQ0KDQp9KTs=</field>
                                               <comment pinned="false" h="80" w="160">Beschreibe diese Funktion …</comment>
                                             </block>
                                             <block type="procedures_callcustomnoreturn" id="a8y(c@2xKnJ~R;]2^j%W" x="238" y="162">
                                               <mutation name="machePhoto">
                                                 <arg name="mypath"></arg>
                                                 <arg name="myurl"></arg>
                                                 <arg name="myheight"></arg>
                                                 <arg name="mywidth"></arg>
                                                 <arg name="clipx"></arg>
                                                 <arg name="clipy"></arg>
                                                 <arg name="clipwidth"></arg>
                                                 <arg name="clipheight"></arg>
                                               </mutation>
                                               <value name="ARG0">
                                                 <block type="text" id="M;V!K{lzb0v+Suf3#:h#">
                                                   <field name="TEXT">/opt/iobroker/iobrokerSonder.png</field>
                                                 </block>
                                               </value>
                                               <value name="ARG1">
                                                 <block type="text" id="]1VeRv!bUZ%*eY/@f|qo">
                                                   <field name="TEXT">http://192.168.178.59:8082/vis/index.html?handyBildAnzeige#sonderfahrt</field>
                                                 </block>
                                               </value>
                                               <value name="ARG2">
                                                 <block type="math_number" id="pJ;U)F%hQSRoloOZ6~/8">
                                                   <field name="NUM">430</field>
                                                 </block>
                                               </value>
                                               <value name="ARG3">
                                                 <block type="math_number" id="piulWX_fca8nyM2RvyJt">
                                                   <field name="NUM">645</field>
                                                 </block>
                                               </value>
                                               <value name="ARG4">
                                                 <block type="math_number" id="%D9jOfghJtgT{T{T7_sd">
                                                   <field name="NUM">0</field>
                                                 </block>
                                               </value>
                                               <value name="ARG5">
                                                 <block type="math_number" id="AZ5@9Rh4%Q*{L9y9]_nY">
                                                   <field name="NUM">0</field>
                                                 </block>
                                               </value>
                                               <value name="ARG6">
                                                 <block type="math_number" id="6dhDISS~rt[_YD@OY@5e">
                                                   <field name="NUM">430</field>
                                                 </block>
                                               </value>
                                               <value name="ARG7">
                                                 <block type="math_number" id="+c`W$l4gL{m}q3cozn]*">
                                                   <field name="NUM">645</field>
                                                 </block>
                                               </value>
                                             </block>
                                            </xml>
                                            

                                            Image 138.png

                                            so kann man seine settings besser eingeben

                                            B 1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            892
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            browser headless phantomjs puppeteer screenshot screenshots website
                                            23
                                            245
                                            23497
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo