Sunday, June 29, 2014

Automation – Take Snapshot of live webpage periodically using PhantomJS

Posted by Thirunavukkarasu Muthuswamy at Sunday, June 29, 2014 Labels: , , ,

Requirement:-

PhantomJS

I have developed a monitoring dashboard application which displays backlog trends of various application components, something like below. I want take snapshot of this live monitoring dashboard webpage every 30 minutes and send it as inline attachment to specific set of Email Ids.

Observare

Please visit the following link for the live demo.

http://anjuwedssrini.com/Demos/HighCharts-Demo/

Steps Involved:-

1] First download the phantomJS plugin from the following link, and extract it inside the desired folder.

https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2

2] Put the code inside the a Js file.

[thiru@localhost bin]$ cat observare.js
var page = require('webpage').create();
page.open('http://anjuwedssrini.com/Demos/HighCharts-Demo/’, function() {
         page.viewportSize = { width:1200, height:768 };
         window.setTimeout(function () {
         page.render('/optionalphantom/bin/observare.jpg');
         phantom.exit();
}, 1000);
});

3] Execute the JS  code using phanomJS executable available inside extracted binary.

[thiru@localhost bin]$ /optional/phantom/bin/phantomjs observare.js

Now we done with the image generation, but how to attach the generated image as inline attachment ? Is it easy ?

How to send image as an inline attachment using sendmail?

Linux send mail command have some exceptional features to do all these stuff.

/usr/sbin/sendmail -t <<EOT
TO: industryvertical@gmal.com
FROM: Thirunavukkarasu.Muthusamy@gmail.com
SUBJECT:  Observer – Dashboard Report
MIME-Version: 1.0
Content-Type: multipart/related;boundary="XYZ"

--XYZ
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.0609040" alt="">
</body>
</html>

--XYZ
Content-Type: image/jpeg;name="observare.jpg"
Content-Transfer-Encoding: base64
Content-ID: <part1.0609040>
Content-Disposition: inline; filename="observare.jpg"

$(base64 /optional/images/observare.jpg)

--XYZ--
EOT

Now we done with the image generation using phantomJs and image encoding, inline attachment using sendemail utility. By putting it all together we got the following script.

Full script:-

#!/bin/bash
#Program Name: Report_generation.sh
#Purpose: Report Generation

export hour=`date -u +%H`

function takesnap()
{
echo "Inside Take Snap fucntion!!"
/optional/phantom/bin/phantomjs observare.js
}

function sendmail()
{
/usr/sbin/sendmail -t <<EOT
TO: industryvertical@gmal.com
FROM: Thirunavukkarasu.Muthusamy@gmail.com
SUBJECT:  Observer – Dashboard Report
MIME-Version: 1.0
Content-Type: multipart/related;boundary="XYZ"

--XYZ
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.0609040" alt="">
</body>
</html>

--XYZ
Content-Type: image/jpeg;name="observare.jpg"
Content-Transfer-Encoding: base64
Content-ID: <part1.0609040>
Content-Disposition: inline; filename="observare.jpg"

$(base64 /optional/images/observare.jpg)

--XYZ--
EOT

}

#Main function starts here
takesnap
sendmail

Schedule as Cron:-

Make it as a cron, to send the report periodically to the distribution list something like below.

#Dashboard report generation
*/30 * * * *  sh /optional/phantom/bin/Report_generation.sh > /dev/null 2>&1

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)