Screenshoot dashboard and generate a image

General
,
1

I'm using a node that takes a print of the url you choose, and it has a function that allows you to choose the part of the print using the class of the object or the id, however whenever I generate the image with any class, the node red falls.

This is my screen, I want the node to take a print only of the demarcated area, however if I define a class the node-red falls:

image
image1079×761 16.4 KB

Sorry if there's already a topic about this, but I didn't find anything similar during my research.

My flow:

[{"id":"cb431ce6aafc9457","type":"base64","z":"0ec9e8641ba5f77a","name":"","action":"","property":"payload","x":600,"y":420,"wires":[["347efc7349ed634d"]]},{"id":"347efc7349ed634d","type":"file","z":"0ec9e8641ba5f77a","name":"","filename":"C:\\Users\\Smart4.0\\Downloads\\printdash.jpg","filenameType":"str","appendNewline":true,"createDir":false,"overwriteFile":"true","encoding":"none","x":850,"y":540,"wires":[[]]},{"id":"4b930b135814be1b","type":"screenshot-class","z":"0ec9e8641ba5f77a","name":"","url":"http://localhost:1881/ui/#!/1?socketid=dhEVt1QFnGoZHWUCAAA3","classname":"","path":"","x":370,"y":420,"wires":[["cb431ce6aafc9457"]]},{"id":"7780e347140d56d3","type":"ui_button","z":"0ec9e8641ba5f77a","name":"","group":"7d0d4eb16f351a7c","order":18,"width":4,"height":2,"passthru":false,"label":"Amarelas","tooltip":"","color":"","bgcolor":"Yellow","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":100,"y":140,"wires":[["3b0cd27d.4a6be8"]]},{"id":"8e8d6ea1399533c7","type":"ui_button","z":"0ec9e8641ba5f77a","name":"","group":"7d0d4eb16f351a7c","order":22,"width":4,"height":2,"passthru":false,"label":" Vermelhas","tooltip":"","color":"","bgcolor":"Red","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":260,"wires":[["42629df47f1232e2"]]},{"id":"dc59cad9076a229f","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":5,"width":2,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-center","className":"","style":true,"font":"Arial,Arial,Helvetica,sans-serif","fontSize":"20","color":"#000000","x":750,"y":200,"wires":[]},{"id":"ebf81ca75cd04113","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":13,"width":2,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-center","className":"","style":true,"font":"Arial,Arial,Helvetica,sans-serif","fontSize":"20","color":"#000000","x":750,"y":140,"wires":[]},{"id":"51c48c2de432712d","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":9,"width":2,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-center","className":"","style":true,"font":"Arial,Arial,Helvetica,sans-serif","fontSize":"20","color":"#000000","x":730,"y":260,"wires":[]},{"id":"211e7bf6c6ccf3db","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":1,"width":20,"height":1,"name":"","label":"Peças contadas","format":"{{msg.payload}}","layout":"row-center","className":"","style":true,"font":"","fontSize":"25","color":"#000000","x":760,"y":80,"wires":[]},{"id":"20483f10ffccef0b","type":"ui_button","z":"0ec9e8641ba5f77a","name":"","group":"7d0d4eb16f351a7c","order":20,"width":4,"height":2,"passthru":false,"label":"Verdes","tooltip":"","color":"","bgcolor":"Green","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":100,"y":200,"wires":[["5716d4d5a447fd1c"]]},{"id":"3b0cd27d.4a6be8","type":"function","z":"0ec9e8641ba5f77a","name":"Contador","func":"// Inicializa o contador se não estiver definido\nif (flow.get('contador') === undefined) {\n    flow.set('contador', 0);\n}\n\n// Incrementa o contador\nvar contador = flow.get('contador') + 1;\nflow.set('contador', contador);\n\n// Retorna o valor atual do contador\nmsg.payload = contador;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":260,"y":140,"wires":[["ebf81ca75cd04113"]]},{"id":"5716d4d5a447fd1c","type":"function","z":"0ec9e8641ba5f77a","name":"Contador","func":"// Inicializa o contador se não estiver definido\nif (flow.get('contador') === undefined) {\n    flow.set('contador', 0);\n}\n\n// Incrementa o contador\nvar contador = flow.get('contador') + 1;\nflow.set('contador', contador);\n\n// Retorna o valor atual do contador\nmsg.payload = contador;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":260,"y":200,"wires":[["dc59cad9076a229f"]]},{"id":"42629df47f1232e2","type":"function","z":"0ec9e8641ba5f77a","name":"Contador","func":"// Inicializa o contador se não estiver definido\nif (flow.get('contador') === undefined) {\n    flow.set('contador', 0);\n}\n\n// Incrementa o contador\nvar contador = flow.get('contador') + 1;\nflow.set('contador', contador);\n\n// Retorna o valor atual do contador\nmsg.payload = contador;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":260,"y":260,"wires":[["51c48c2de432712d"]]},{"id":"f2ffcc35e7edeeaa","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":3,"width":5,"height":1,"name":"","label":"Amarelas","format":"{{msg.payload}}","layout":"row-left","className":"","style":true,"font":"","fontSize":"20","color":"#000000","x":920,"y":140,"wires":[]},{"id":"9e16d153ab110b99","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":7,"width":5,"height":1,"name":"","label":"Verdes","format":"{{msg.payload}}","layout":"row-left","className":"","style":true,"font":"Arial,Arial,Helvetica,sans-serif","fontSize":"20","color":"#000000","x":920,"y":200,"wires":[]},{"id":"0a41ccd155e6572d","type":"ui_text","z":"0ec9e8641ba5f77a","group":"7d0d4eb16f351a7c","order":11,"width":5,"height":1,"name":"","label":" Vermelhas","format":"{{msg.payload}}","layout":"row-left","className":"","style":true,"font":"","fontSize":"20","color":"#000000","x":910,"y":260,"wires":[]},{"id":"92bfc0b234510bf3","type":"ui_button","z":"0ec9e8641ba5f77a","name":"","group":"7d0d4eb16f351a7c","order":27,"width":4,"height":2,"passthru":false,"label":"Generate image","tooltip":"","color":"","bgcolor":"Grey","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":160,"y":420,"wires":[["4b930b135814be1b"]]},{"id":"7d0d4eb16f351a7c","type":"ui_group","name":"TEST","tab":"e0d06271525066da","order":1,"disp":true,"width":20,"collapse":false,"className":""},{"id":"e0d06271525066da","type":"ui_tab","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]
2

Does Node-RED fail (e.g. crash and need restarting) or is there some other error? We really need to see the error to make sense of it.

Also, not clear WHY you want to do this? There are much easier ways to create some output with the values than trying to do a screen capture.

3

This is the error:

image
image1184×311 15.8 KB

And how else could I generate an image of that specific area whenever I press the button???

Teach me please

4

image
image803×35 6.81 KB

So clearly, the element you tried to select does not actually exist at the time you try to capture it.

Well, you've implied that you are capturing a screenshot of the Node-RED Dashboard. But you drive the dashboard from Node-RED so, that being the case, you have all the data and merely need to send some text to an appropriate node.js library using a function node.

5

And how can I know the classes of the dashboard objects??, I was using the inspect function of the browser itself to find the classes, but it says that they don't exist even though I see them directly in the html of the page

6

You open the page in a browser and use the browser's dev tools. Find something that encapsulates what you want and then you can copy the CSS selector using the menu.

It is possible that, when accessed from Puppet, it doesn't YET exist. Timings on Dashboard pages can be quite complex.

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.