LaserPup - Javascript Examples

As promised here is an overview of how I did the javascript code for LaserPup.

Creating the Image Map

I created an imagemap of the circle graphic that passes the x & y coordinates of the image to a javascript function when clicked. The imagemap breaks the graphic into clickable 8×8 squares, I wrote a quick perl script to create the imagemap code, which was easier than doing it by hand.

Perl File Example:

#!/usr/bin/perl
open OUTPUTFILE, “>output.txt” or die $!;

$xstep = 8;
$ystep = 8;
$xmax = 160;
$ymax = 160;

print OUTPUTFILE “<map name=”floormap”>n”;
for($y=0; $y<$ymax; )
{
$yend = $y + $ystep;
for($x=0; $x<$xmax; )
{
$xend = $x + $xstep;
print OUTPUTFILE ” <area shape=”rect” coords=”$x,$y,$xend,$yend” alt=”$x,$y” title=”$x,$y” href “javascript:setlaser($x,$y)”>n”;

$x = $xend;
}
$y = $yend;
}

print OUTPUTFILE ” </map>n”;

close(OUTPUTFILE);

Example of imagemap:

<map name=”floormap”> <area title=”56,152″ shape=”rect” coords=”56,152,64,160″ href=”javascript:setlaser(56,152)” alt=”56,152″></map>

Creating the Javascript

The javascript function setlaser(x,y) is called when the image is clicked, and it calls the iobridge web interface to update the servo positions. In my graphic the y servo value is actually the radius of where the user clicks in the circle. There was slightly different code for each quadrant of the circle, but basically I calculated the hypotenuse of a triangle with x & y values and that is the radius. Anyone remember A^2 + B^2 = C^2, I certainly never thought I would use that one again!

function setlaser(x,y)
{
var radius = 0;

// Here would be code to calculate radius from x & y position values

// Make sure var is an integer
// ServoMinPWM + (ServoMaxPWM - ServoMinPWM)/(MaxGraphicSize/ClickPosition)

x = parseInt(x);
x = Math.round(600 + (2400-600)/(152/x));

radius = parseInt(radius);
radius = Math.round(1150 + (1850-1150)/(152/radius));

// Send values to iobridge
widgetSetString(’xservowidgetid’, x);
widgetSetString(’yservowidgetid’, radius);
}

Here is the code for Turning On/Off the Laser Pointer, the buzzer and light is similar:

function laserpress()
{
// Get the Red Dot and Button Images
var laserbutton = document.getElementById(”laserbutton”);
var laserdot = document.getElementById(”laserdot”);

// If Laser Was Off (laseron is a global variable)
if(laseron == 0)
{
// Set button image to redbutton
laserbutton.src = “lp/redButton.png”;

// Change CSS value of laserdot so it is displayed
laserdot.style.display = “block”;

// Send command to iobridge to turn on laser
widgetSetState(’laserwidgetid’,1);
laseron = 1;

// Call buzz function that tells iobridge to pulse buzzer
buzz();
}
else
{
// Set button image to graybutton
laserbutton.src = “lp/grayButton.png”;

// Change CSS value of laserdot so it is NOT displayed
laserdot.style.display = “none”;

// Move laser back to center position
setlaser(72,72);

// Send command to iobridge to turn off laser
widgetSetState(’laserwidgetid’,0);
laseron = 0;

// Call buzz function that tells iobridge to pulse buzzer
buzz();
}
}

I’ve had some good feedback, and one suggestion was to have an autonomous mode. It was very simple and now LaserPup plays by itself! Here is the function that is called for that:

function randomlaser()
{
if(randomState == 1)
{
// Calculate Random Servo Positions & Time (1-5secs)
var x = Math.ceil(Math.random() * 152);
var y = Math.ceil(Math.random() * 152);
var time = 1000 + Math.ceil(Math.random() * 4000);

// Move Laser
setlaser(x,y);

// Set timer for next move
setTimeout(randomlaser, time);
}
}

Leave a Reply