All Apps and Add-ons

Splunk dashboard screenshot

jadengoho
Builder

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,

Tags (1)
0 Karma
1 Solution

gaurav_maniar
Builder

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

0 Karma

prashantkumar_g
Engager

Hi @jadengoho
This App is gonna solve your question.

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

0 Karma

anishadalsania
New Member

Could you let me know how to set this up?

0 Karma

jadengoho
Builder

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

0 Karma

prashant_kumar_
Explorer

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

0 Karma

jadengoho
Builder

Have you test this ?
Does it work ?

0 Karma

prashant_kumar_
Explorer

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

0 Karma

gaurav_maniar
Builder

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();
        });
    });
    

    });

0 Karma

threadover
Loves-to-Learn Everything

@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();
    });
  });
});

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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

0 Karma

jadengoho
Builder

How could i implement html2canvas to Splunk dashboard

0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

Stay Connected: Your Guide to April Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...