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,
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/
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();
});
});
});
Hi @jadengoho
This App is gonna solve your question.
Could you let me know how to set this up?
Hi @prashantkumar_g could you post the process here - for us to test it on out environment?
@anishadalsania sure, it is well mentioned in the app document.if you have any further queries reach out to me at 'cod3bee@gmail.com'
Have you test this ?
Does it work ?
Yes it works fine, I am personally using this for a client
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/
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();
});
});
});
@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();
});
});
});
@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
How could i implement html2canvas to Splunk dashboard