Re: Help with Perl/Javascript

Here's a working demo that should help you get started.

First, here's the html part:

<html><head>
<title>Random pictures</title>
<script type="text/javascript">
function getpic() {
  var now = new Date();
  var myimage = document.getElementById("pic_id");
  myimage.setAttribute("src", "/cgi-bin/test_gd.pl?nocache="+now.getTi
+me());
  setTimeout('getpic()', 2000);
}
</script>
</head>
<body onLoad="getpic();">
<p>The picture should update every 2 seconds:</p>
<img id="pic_id" src="loading.gif">
<hr/>
</body></html>
[download]

This html code contains one javascript function, getpic(). The body tag contains an onLoad event. This means that getpic() will get called as soon as the page loads.

There is a single img tag. The default image (loading.gif) should simply be the text "loading...". You can make that yourself.

Note that the img tag also has an id (pic_id) - this is to make it easy to find inside our javascript code. Its value would be more obvious if the page had dozens of other images!

Note that the src attribute of the img tag points to the source of the image we want to display. If we change this, we change the image on the web page.

As soon as getpic() runs, it changes the src attribute of the img. The src can be any valid url that returns image data. Normally, this is a file, but it can also be a cgi-script. In this case, test_gd.pl spits out random gifs, generated using the GD.pm module.

The setTimeout() function is used to run getpic() again, after a 2000 ms delay.

So - every two seconds, the script will reload the image. In a real application, the perl script would be delivering plots of the latest data each time. You wouldn't necessarily have to use GD.pm, but if you're making simple charts of data, it's pretty useful.

The test_gd.pl script I used is really just for demo purposes, but the code for it looks like this:

#!/usr/bin/perl
use strict;
use GD;

# create a new image
my $im = new GD::Image(100,100);

# allocate some colors
my $white = $im->colorAllocate(255,255,255);
my $black = $im->colorAllocate(0,0,0);       
my $red = $im->colorAllocate(255,0,0);      
my $green = $im->colorAllocate(0,255,0);      
my $blue = $im->colorAllocate(0,0,255);

my @colors = ($red, $green, $blue);

# make the background transparent and interlaced
$im->transparent($white);
$im->interlaced('true');

# Put a black frame around the picture
$im->rectangle(0,0,99,99,$black);

# Draw a blue oval
$im->arc(50,50,95,75,0,360,$blue);

# And fill it with red, green, or blue
my $color = $colors[rand @colors];
$im->fill(50,50,$color);

# make sure we are writing to a binary stream
binmode STDOUT;

# Convert the image to PNG and print it on standard output
print "content-type: image/gif\n\n";
print $im->gif;
[download]

Note that this is almost exactly like the example shown in the GD.pm POD file - I just changed the output file type to gif, and make the color of the circle random (red, green, or blue). Note also that you have to print out the appropriate content type (image/gif).

Finally, note that I use the javascript Date object, and the getTime() method to fetch the integer number of seconds since the beginning of time, and add it to the url. Bascially, this makes each url unique, and thus prevents the browser from caching only one copy of the image. If it did, you wouldn't ever see the updates. This may not be necessary with all browsers.

I hope this helps you.

Good luck!

Comment on Re: Help with Perl/Javascript Select or Download Code