# Screenshoot dashboard and generate a image
**URL:** https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200
**Category:** General
**Tags:** node-red-dashboard, function-node
**Created:** [6 March 2024 18:07 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200 "2024-03-06T18:07:50Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [6 March 2024 18:07 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/1 "2024-03-06T18:07:50Z")
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:
Sorry if there's already a topic about this, but I didn't find anything similar during my research.
My flow:
```auto
[{"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}]
```
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 March 2024 18:13 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/2 "2024-03-06T18:13:53Z")
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.
---
### Author:  [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [6 March 2024 18:18 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/3 "2024-03-06T18:18:10Z")
This is the error:
And how else could I generate an image of that specific area whenever I press the button???
Teach me please
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 March 2024 20:59 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/4 "2024-03-06T20:59:52Z")
So clearly, the element you tried to select does not actually exist at the time you try to capture it.
> [@Erissin\_Industria4.0](#):
>
> And how else could I generate an image of that specific area whenever I press the button???
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.
> **[Creating images from text using Node.js](https://jscommands.com/creating-images-from-text-using-node-js/)**
>
> Generating Images from Text in Node.js How to Generate Images from Text in Node.js Node.js is a powerful platform for building web applications and server-side scripts. In this tutorial, we will le…
---
### Author:  [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)
#### Post date: [7 March 2024 11:56 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/5 "2024-03-07T11:56:58Z")
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
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 March 2024 13:25 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/6 "2024-03-07T13:25:09Z")
> [@Erissin\_Industria4.0](#):
>
> how can I know the classes of the dashboard objects
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.
> [@Erissin\_Industria4.0](#):
>
> it says that they don't exist even though I see them directly in the html of the page
It is possible that, when accessed from Puppet, it doesn't YET exist. Timings on Dashboard pages can be quite complex.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [26 March 2024 13:00 UTC](https://discourse.nodered.org/t/screenshoot-dashboard-and-generate-a-image/86200/7 "2024-03-26T13:00:17Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.