# Automated screen captures from the dashboard again?

**URL:** https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [21 October 2022 14:26 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387 "2022-10-21T14:26:58Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [21 October 2022 14:26 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/1 "2022-10-21T14:26:58Z")

</div>

I see this has come up a few times but as far as I can see never resolved?

I would like to do automated screen capture from the dashboard on the node red machine (Ubuntu 20.04 ) and store in a local directory on the local ubuntu machine. Ideally of individual dashboard groups or tabs, panels.

I have tried these two but so far have been unable to get anything working:

> **[node-red-contrib-image-tools](https://flows.nodered.org/node/node-red-contrib-image-tools)**
>
> A dynamic image editor, image viewer, 1D/2D Barcode Generator and 1D/2D Barcode Decoder nodes

> **[node-red-contrib-web-page-screenshot](https://flows.nodered.org/node/node-red-contrib-web-page-screenshot)**
>
> A Node-RED node for taking screenshots of web pages.

Would be grateful for any hints. Many thanks!

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [21 October 2022 14:47 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/2 "2022-10-21T14:47:38Z")

</div>

> [@houser](#):
>
> I would like to do screen capture from the dashboard on the node red machine

I don't understand that. The dashboard image only exists in the browser, which I presume is showing on what you call the local machine.

---

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [21 October 2022 14:59 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/3 "2022-10-21T14:59:27Z")

</div>

Thanks, sorry for being unclear.. I want to render that image to a png file and store it on the NR server machine.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [21 October 2022 15:02 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/4 "2022-10-21T15:02:59Z")

</div>

Just to make sure, is this right?

You have the dashboard running in the browser.  
You wish to capture the image of the dashboard and upload it to the NR server.  
How do you want to trigger the capture? Via a button or similar in the browser?

---

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [21 October 2022 15:08 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/5 "2022-10-21T15:08:28Z")

</div>

I am trying to use the cited nodes that can capture a url and save it as a file  
by itself.  
This one appears to possibly do it if I can only format the url properly:

> **[node-red-contrib-image-tools](https://flows.nodered.org/node/node-red-contrib-image-tools)**
>
> A dynamic image editor, image viewer, 1D/2D Barcode Generator and 1D/2D Barcode Decoder nodes

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [21 October 2022 15:11 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/6 "2022-10-21T15:11:59Z")

</div>

That won't work as all you get if you directly access the url is the background. The data comes via websockets. If you want to capture the dashboard image you will have to do it from a live dashboard in a browser, or use a browser emulator, whether there is one that supports websockets I don't know.

---

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [21 October 2022 15:14 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/7 "2022-10-21T15:14:32Z")

</div>

I see.. Appreciate the answer!  
Back to the drawing board I guess...😉

---

<div class="post-metadata">

### Author: ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)
#### Post date: [21 October 2022 16:47 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/8 "2022-10-21T16:47:41Z")

</div>

You can also consider adding a specific dashboard template node to your dashboard allowing you to upload a file or copy paste an image from the clipboard.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/2688acad14430eaa181d439b4d58ee8e9d3d97de.png)

Using the standard screen capture tool, you can take a screen capture of your node-red dashboard and paste it into that template node.

In node -red you can then do whatever you want with the captured image.

FYI here the code for the template node:

```auto
<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <p id="status"></p>
    <p id="loaded_n_total"></p>
</form>

<script>
    function _(el){
    return document.getElementById(el);
}

/* added by JVA 2020-05-28 - it is also possible to paste clipboard image
   source of the code = https://stackoverflow.com/questions/50427513/html-paste-clipboard-image-to-file-input */
const fileInput = _("file1");
window.addEventListener('paste', e => {
  fileInput.files = e.clipboardData.files;
});

function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "/fileupload");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

```

**UPDATE:** you also need to create the nodes for posting to `/fileupload`

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae8b976d39285798f6ad315b5d2a69d16bb2b9ba.png)

---

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [21 October 2022 18:03 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/9 "2022-10-21T18:03:03Z")

</div>

Thanks @janvda  
Certainly looks interesting. Would this allow me to automate the entire process? I want to do screen captures of 4 separate groups every 5 minutes or so and then put those image filesin four separate directories. This is to publish them in another application, constantly updated. Many thanks for your comment!

---

<div class="post-metadata">

### Author: ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)
#### Post date: [21 October 2022 18:41 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/10 "2022-10-21T18:41:57Z")

</div>

> [@houser](#):
>
> Would this allow me to automate the entire process?

No, the screen capture and copy paste should be done manually.

---

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [21 October 2022 19:10 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/11 "2022-10-21T19:10:34Z")

</div>

Ok. I need a way to automate and publish the whole thing ideally.  
But many thanks for your comments regardless!

---

<div class="post-metadata">

### Author: ![Bowie](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bowie/32/69377_2.png) [@Bowie](https://discourse.nodered.org/u/Bowie)
#### Post date: [24 October 2022 09:44 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/12 "2022-10-24T09:44:34Z")

</div>

I am trying to do exactly the same thing! Please post back with any successes that you have.

---

<div class="post-metadata">

### Author: ![houser](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/houser/32/57967_2.png) [@houser](https://discourse.nodered.org/u/houser)
#### Post date: [24 October 2022 10:25 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/13 "2022-10-24T10:25:22Z")

</div>

Hello @Bowie  
I had good results using this on Ubuntu 20.04:

> **[node-red-contrib-simple-webdriver](https://flows.nodered.org/node/node-red-contrib-simple-webdriver)**
>
> SimpleWebdriver nodes for Node-RED initially based on node-red-contrib-selenium-wd2

it is a fork of this, that might be a better starting point depending on your OS and hardware:

> **[node-red-contrib-selenium-webdriver](https://flows.nodered.org/node/node-red-contrib-selenium-webdriver)**
>
> A selenium-webdriver nodes for Node-RED

Not too difficult but also not that easy 😉  
Important to have the same versions of chromedriver and chrome.  
Can also run headless with the correct arguments.  
Good luck!

---

<div class="post-metadata">

### Author: ![Bowie](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bowie/32/69377_2.png) [@Bowie](https://discourse.nodered.org/u/Bowie)
#### Post date: [24 October 2022 12:51 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/14 "2022-10-24T12:51:59Z")

</div>

Thank you

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [23 November 2022 12:52 UTC](https://discourse.nodered.org/t/automated-screen-captures-from-the-dashboard-again/69387/15 "2022-11-23T12:52:51Z")

</div>

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