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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...