Solved: Re: Splunk dashboard screenshot

jadengoho · ‎07-31-2019

Hi All,
Is there a way to have a screenshot of the dashboard every 5min and save it on a backend folder.
This will be used in HTML picture,

gaurav_maniar · ‎08-02-2019

Hi Jadengoho,

Check the below code for implementation of html2canvas in dashboard, (by using onscreen button, you can automate it as per your requirement.
For scheduled screenshot or pdf export you can try Smart PDF app - https://splunkbase.splunk.com/app/4030/

add HTML button on your existing dashboard

<row>
    <panel>
        <html>
            <button id="image_export" class="btn btn-primary">Download ScrenShot</button>
        </html>
    </panel>
<row>

download html2canvas js from - https://html2canvas.hertzen.com
Copy paste html2canvas.js at /appserver/static/component

create a javascript file with below code, and add it in your dashboard (replace with your's)

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!',
'../app//components/html2canvas'],

function(_, $, mvc,html2canvas) {

$("#image_export").on('click',function(e){
    var screenshot = require("../app/<app_name>/components/html2canvas");

    screenshot(document.querySelector('#dashboard1'), {scale:2}).then(canvas => {
        console.log(canvas);

        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        var link = document.createElement('a');
        link.download = "Dashboard Report.png";
        link.href = image;
        link.click();
    });
});

});

View solution in original post

prashantkumar_g · ‎11-25-2019

Hi @jadengoho
This App is gonna solve your question.

https://splunkbase.splunk.com/app/4788/

anishadalsania · ‎03-18-2020

Could you let me know how to set this up?

jadengoho · ‎04-27-2020

Hi @prashantkumar_g could you post the process here - for us to test it on out environment?

prashant_kumar_ · ‎03-19-2020

@anishadalsania sure, it is well mentioned in the app document.if you have any further queries reach out to me at 'cod3bee@gmail.com'

jadengoho · ‎11-29-2019

Have you test this ?
Does it work ?

prashant_kumar_ · ‎03-19-2020

Yes it works fine, I am personally using this for a client

gaurav_maniar · ‎08-02-2019

Hi Jadengoho,

Check the below code for implementation of html2canvas in dashboard, (by using onscreen button, you can automate it as per your requirement.
For scheduled screenshot or pdf export you can try Smart PDF app - https://splunkbase.splunk.com/app/4030/

add HTML button on your existing dashboard

<row>
    <panel>
        <html>
            <button id="image_export" class="btn btn-primary">Download ScrenShot</button>
        </html>
    </panel>
<row>

download html2canvas js from - https://html2canvas.hertzen.com
Copy paste html2canvas.js at /appserver/static/component

create a javascript file with below code, and add it in your dashboard (replace with your's)

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!',
'../app//components/html2canvas'],

function(_, $, mvc,html2canvas) {

$("#image_export").on('click',function(e){
    var screenshot = require("../app/<app_name>/components/html2canvas");

    screenshot(document.querySelector('#dashboard1'), {scale:2}).then(canvas => {
        console.log(canvas);

        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        var link = document.createElement('a');
        link.download = "Dashboard Report.png";
        link.href = image;
        link.click();
    });
});

});

threadover · ‎11-17-2022

@gaurav_maniarthe below code is not working..Does it depend on Splunk version?

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!',
'opt/splunk/etc/apps/screenshot/appserver/static/components/html2canvas'],
function(_, $, mvc,html2canvas) {

$("#image_export").on('click',function(e){
    var screenshot = require("opt/splunk/etc/apps/screenshot/appserver/static/components/html2canvas");

    screenshot(document.querySelector('#test1'), {scale:2}).then(canvas => {
        console.log(canvas);

        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        var link = document.createElement('a');
        link.download = "Dashboard Report.png";
        link.href = image;
        link.click();
    });
  });
});

kamlesh_vaghela · ‎08-01-2019

@jadengoho

You can use HTML screen capture javascript libraries for same. You need to code in javascript that takes a screenshot. Integrate that Javascript code with your respective dashboard. Make sure your javascript code execute every 5 minutes ( as per your requirement).

You need to create another code which sends your screen to your server and store into your desired folder. You have to write code for that in above Javascript code.

Below are some links for reference.

https://www.npmjs.com/package/html-screen-capture-js
http://talkerscode.com/webtricks/take-screenshot-of-a-webpage-using-html5-and-javascript.php
https://phantomjs.org/screen-capture.html
https://makitweb.com/take-screenshot-of-webpage-with-html2canvas/
http://www.jquerybyexample.net/2013/08/take-webpage-screenshot-html5-jquery-javascript.html

Thanks

jadengoho · ‎08-01-2019

How could i implement html2canvas to Splunk dashboard

Splunk dashboard screenshot

Can’t make it to .conf25? Join us online!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Unlock What’s Next: The Splunk Cloud Platform at .conf25

Are you a member of the Splunk Community?

Splunk dashboard screenshot

Can’t make it to .conf25? Join us online!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Unlock What’s Next: The Splunk Cloud Platform at .conf25