[Ilugc] conky and cycle for web based network monitoring

  • From: girishvenkatachalam@xxxxxxxxx (Girish Venkatachalam)
  • Date: Sat May 22 11:25:44 2010

It seems I am on a roll today.

Long long ago, very long ago I sent a mail to LUG about the fabulous
jQuery cycle plugin.

And in Dec 2007 I had given a LUG talk in IIT on jQuery.

I am not sure if I will give another LUG talk. Very unlikely.

But I can surely mail.;)

I had to do server monitoring for one of my  clients and I ended up
using the sexy conky tool for it.

But I had to do a lot of jugglery to make it work on the web.

First I needed this script to make conky write to a fake X server Xvfb.
-sh-3.2$ cat conky-setup
#!/bin/sh

# This script will not only start conky but also refresh the image
every 5 seconds

# Watch the fun ;)

Xvfb :5 -screen 0 1280x1024x24&

export DISPLAY=:5.0
xsetroot -solid lightslateblue
conky  2>/tmp/f.txt
sleep 3

windowid=`grep 0x /tmp/f.txt|cut -d\( -f2|tr -d \)`
while [ "1" = "1" ];
do
        import -window ${windowid} /san1/sysadmin/navigator/conky.png
        sleep 3
done

I start this manually with

$./conky-setup&

Or you can put it in ~/.profile. Your choice.

Now the ImageMagick import(1) command dumps the current conky output to a file.

I need to display this on the web with cycle transitions.

Here is the html.

-sh-3.2$ cat conky.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
        <!-- -->
<head>
        <title> Monitoring dashboard for Storkmon </title>
        <!-- Active content -->
<!-- ************************************************************************
-->

<link rel="stylesheet" href="css/tailf.css" type="text/css"/>

<script type="text/javascript" src="jquery/js/jquery-1.3.2.min.js"> </script>
<script type="text/javascript" src="jquery/js/jquery.metadata.js"> </script>
<script type="text/javascript"
src="jquery/js/jquery.cycle.lite.1.0.js"> </script>
<script type="text/javascript" >

function onBefore() {
        $('img').load("/cgi-bin/conky-display.cgi");
}
$(function() {
                //setInterval(reloadpage, 4000);
        $('#taildiv').cycle({
                speed: 500,
                before: onBefore
        });
});
</script>
</head>
<body>
<div id="taildiv">
        <img  />
        <img />
</div>

</body>
</html>

Wth this beautiful result:

http://lamp.healthsoftusa.com/conky.html

-Girish


-- 
Gayatri Hitech
web: http://gayatri-hitech.com

SpamCheetah Spam filter:
http://spam-cheetah.com

Other related posts: