Puppeteer: Screenshots PhantomJS Alternative

oxident

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.

bimmi

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

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

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

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

liv-in-sky

@je-vi

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

@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

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

});
    }
})

liv-in-sky

@je-vi

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

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

bimmi

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

Was hingegen funktioniert ist:

path
url
quality

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

@bimmi

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

bimmi

@liv-in-sky doch, ich sehe ja am Zeitstempel, dass die Datei aktualisiert wurde! ich habe den user iobroker dem Verzeichnis hinzugefügt.

liv-in-sky

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

liv-in-sky

@bimmi

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

bimmi

@liv-in-sky DANKE

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

VIELEN DANK!

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

bimmi

@liv-in-sky ja so sieht es auch echt gut aus. dann hab ich wenigstens meine Datenpunkte Verwenden

was ich aber auch nicht hinbekomme ist das waitforselector. das hab ich eingefügt wie die anderen Einträge und wird nicht übernommen...

bimmi

mein script sieht inzwischen so aus:

<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>
    <variable id="*^L*3Kju!MAP#u`QL(gE">myselector</variable>
    <variable id="8,q0AR=qke3-k-JCj-2U">quality</variable>
  </variables>
  <block type="procedures_defcustomnoreturn" id="{{Bl:d;+8eDTq,0~J9H2" x="938" y="113">
    <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>
      <arg name="myselector" varid="*^L*3Kju!MAP#u`QL(gE"></arg>
      <arg name="quality" varid="8,q0AR=qke3-k-JCj-2U"></arg>
    </mutation>
    <field name="NAME">macheScreenshot</field>
    <field name="SCRIPT">c2VuZFRvKCdwdXBwZXRlZXIuMCcsICdzY3JlZW5zaG90JywgeyANCg0KICAgIHVybDogbXl1cmwgLA0KDQogICAgcGF0aDogbXlwYXRoICwgDQoNCiAgICB3aWR0aDpteXdpZHRoLA0KDQogICAgcXVhbGl0eTpxdWFsaXR5LA0KDQogICAgaGVpZ2h0Om15aGVpZ2h0LA0KDQogICAgd2FpdEZvclNlbGVjdG9yOm15c2VsZWN0b3IsDQoNCiAgICBmdWxsUGFnZTogZmFsc2UsDQoNCiAgICBjbGlwOiB7ICAgICAgICAgDQogICAgICAgIHg6IGNsaXB4LA0KICAgICAgICB5OiBjbGlweSwNCiAgICAgICAgd2lkdGg6IGNsaXB3aWR0aCwNCiAgICAgICAgaGVpZ2h0OiBjbGlwaGVpZ2h0DQogICAgICB9DQp9KTs=</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="938" y="163">
    <mutation name="macheScreenshot">
      <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>
      <arg name="myselector"></arg>
      <arg name="quality"></arg>
    </mutation>
    <value name="ARG0">
      <block type="get_value" id="@$eoRt:vgP2{$;eeUch0">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Bildpfad</field>
      </block>
    </value>
    <value name="ARG1">
      <block type="get_value" id="xlb5GgfuCSWL[Aergw[6">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Ziel-URL</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="get_value" id="s$Lxum-=aMz`$(5TWW3%">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Breite</field>
      </block>
    </value>
    <value name="ARG7">
      <block type="get_value" id="P%oRRt;f$Ke}@s`ANY}B">
        <field name="ATTR">val</field>
        <field name="OID">00-ZUHAUSE.0.EPS.Test.Display-Höhe</field>
      </block>
    </value>
    <value name="ARG8">
      <block type="text" id="{3cIh]jtoaLdIe)!9Vp+">
        <field name="TEXT">#w00098</field>
      </block>
    </value>
    <value name="ARG9">
      <block type="math_number" id="|nkrAt*)GrI|sQV(?^Bz">
        <field name="NUM">100</field>
      </block>
    </value>
  </block>
</xml>

liv-in-sky

@bimmi

zum einem - du solltest keine variablen am function-aufruf weglassen bzw leer lassen - zur not mache :

Image 139.png

@bimmi sagte in Puppeteer: Screenshots PhantomJS Alternative:

waitforselector

habe ich noch nicht genutzt - da wird er wohl ein element der html seite abwarten - ich nehme anstatt waitForTimeout - einfach mal die seite öffnen und schauen wie lange sie braucht. du gibst da ein widget id an -weiß nicht, ob das so funktioniert - wie stellst du das eigentlich fest, das puppeteer nict auf das widget wartet

wenn ich zeit habe teste ich mal waitForSelector - oder evtl kann uns @foxriver76 ein paar tipps geben

NEWS

Puppeteer: Screenshots PhantomJS Alternative

Support us

336
Online

31.7k
Users

79.8k
Topics

1.3m
Posts

NEWS

Puppeteer: Screenshots PhantomJS Alternative

Support us

336Online

31.7kUsers

79.8kTopics

1.3mPosts

336
Online

31.7k
Users

79.8k
Topics

1.3m
Posts