Automated screen captures from the dashboard again?

Dashboard
1

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:

Would be grateful for any hints. Many thanks!

2

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.

3

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

4

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?

5

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:

6

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.

1 Like
7

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

8

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
image666Ă—670 20.4 KB

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:

<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
image1254Ă—569 57.6 KB

9

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!

10

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

11

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

12

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

13

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

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

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

2 Likes
14

Thank you

1 Like
15

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