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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...