Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

This node falls below the community's threshold of quality. You may see it by logging in.

Replies are listed 'Best First'.
Re: Help with Perl/Javascript
by Gangabass (Vicar) on Aug 07, 2007 at 09:10 UTC
    Check JavaScript Error Console (in FF and Opera). I think you have path to JavaScripts files error: you say that you put files in cgi-bin folder, but in HTML you wrote src="wz_jsgraphics.js".
[reply]
    A reply falls below the community's threshold of quality. You may see it by logging in.
Re: Help with Perl/Javascript
by Burak (Chaplain) on Aug 07, 2007 at 19:47 UTC
    I have some suggestions about your code
    1. If you are using "use CGI qw(:standard);", don't use this: 
      print "Content-type: text/html\n\n";

      [download]
      Use the CGI interfece: 
      print header();

      [download]
    2. Don't use multiple prints, if it is possible to use a single statement. Also if you can group strings, use qq//: 
      #!/usr/bin/perl
use warnings;
use CGI qw(:standard);
print header();
print qq~<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>TPD-UTA TESTER</title>
</head>
<body>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="line.js"></script>
<div id="lineCanvas" style="overflow: auto;position:relative;height:30
+0px;width:400px;">

<script type="text/javascript">
var g = new line_graph();
g.add('1', 145);
g.add('2', 0);
g.add('3', 175);
g.add('4', 130);
g.add('5', 150);
g.add('6', 175);
g.add('7', 205);
g.add('8', 125);
g.add('9', 125);
g.add('10', 135);
g.add('11', 125);
g.render("lineCanvas", "Line Graph");
</script>
</body>
</html>
~;

      [download]
    3. Don't load a module if it is not used (HTML::Template)
    4. The language is "JavaScript" not "Java script"
[reply]
[d/l]
[select]
Re: Help with Perl/Javascript
by NetWallah (Canon) on Aug 07, 2007 at 19:58 UTC
    I got your code to work correctly, following EvanK's suggestion of placing the javascript in a /js/ directory (relative to the web Home dir), and prefixing "/js/": 
    print '<script type="text/javascript" src="/js/wz_jsgraphics.js"></scr
+ipt>';

    [download]
    Please note : There seems to be an updated, and better documented version of the javascript at the author (Balamurugan S)'s website (http://www.sbmkpm.com/).

         "An undefined problem has an infinite number of solutions." - Robert A. Humphrey         "If you're not part of the solution, you're part of the precipitate." - Henry J. Tillman

[reply]
[d/l]
Re: Help with Perl/Javascript
by scorpio17 (Canon) on Aug 07, 2007 at 19:30 UTC

    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!

[reply]
[d/l]
[select]
Re: Help with Perl/Javascript
by Anonymous Monk on Aug 07, 2007 at 09:11 UTC
    view source, then compare
[reply]

Back to Seekers of Perl Wisdom