September « 2009 « Federman Scripts

Javascript Motion Maker

Sometimes it’s nice to have a little bit of animation on a website, but it’s not so extensive to warrant the use of Flash. The Motion Maker allows you to easily move an image on the screen in arbitrary directions.

Flash is a roundabout way to go about animation anyway since it required a 3rd party plugin and is usually harder to maintain.

Example: Here
Javascript: Here

Do note that many browsers are starting to support the HTML5 canvas element, but until HTML5 is finalized and all browsers fully support it (looking at you IE), scripts like these are necessary for motion.

The first thing to do is create the object which you wish to move in HTML. I recommend initially setting display: none as to avoid any initial “jumping” and the javascript is loaded and the page is being rendered.

Next, you’ll need to make the HTML object movable by calling newMotionObject. The argument to this function can either be the id of the object or the object itself. This will do some initialization, including notable that z-index: 100 and display: block (see why it was ok to have display: none earlier?). It will return the id to be used when calling the other functions.

Initially the object will be hidden via visibility: hidden, so there is no need to worry about the initial position of the object showing. The initial position is at (0, 0), though this should never matter.

Now a series of movements need to be put onto the frame queue for the object. This is done via the moveMotionObject, loopMotionObject, showMotionObject, and hideMotionObject functions. TheshowMotionObject and hideMotionObject functions are fairly straightforward, although do note that they are part of the frame queue and do not immediately show or hide the object, but themoveMotionObject and loopMotionObject need a bit more explaining.

The arguments to moveMotionObject are id, startX, startY, endX, endY, numFrames. The id is as returned by the newMotionObject function. The rest of the arguments are self-explanatory, however, you may noticed that when moving the object along a non-straight path, coordinates will need to be repeated. For example, one might have to say, “move from (0,0) to (10,0), then from (10,0) to (10,10), then from (10,10) to (0,10), then from (0,10) to (0,0)” instead of just “move from (0,0) to (10,0) to (10,10) to (0,10)”. This is definitely a feature I would like to change in the future (like make the distinction between “moving” and “drawing” like in most graphics libraries). numFrames is the amount of frames to take to complete the motion between points. In the future, I’d like to change this to be a time in milliseconds.

Currently, the each frame is 10ms.

The loopMotionObject function just tells the frame queue to be a circular queue, thus the animation will repeat.

The startMotion and stopMotion just start and pause the animation. The object is initially paused.

As you may have figured out, there is a lot still on my wishlist for this particular script, however, it’ll get the job done for very basic movements.

Serve Up Java with Perl and CGI

Apache servers are used most commonly to serve up HTML, PHP, javascript, images, and other terms you may be familiar with. However, it is quite easy to serve the output from pretty much anything with cgi, including C++, Java, shell script, perl, lisp, etc.

For this article, I’m going to be using Java. The main reason for this is because it requires a bit of finagling with perl to get it to run. Do note however that this is NOT embedding a Java applet in a website. This is redirecting the output from a java application running on the server to the browser. Thus, no browser plugins are required.

For now let’s assume that the Java is compiled and that there is a class named “MyClass” sitting in the directory. In the cgi file, have the following code (I’ll go through line by line below):

#!/usr/bin/perl
print "Content-type: text/html\n\n";

open (JAVA, "java MyClass 2>&1 |");

while ()
{
        print $_;
}

close JAVA;

This will run the Java application from the entry point of “MyClass” and redirect the output to the browser.

Let’s step through the code line by line.

#!/usr/bin/perl

This tells cgi which interpreter to use. Since the java interpreter requires arguments, we will be running Java through perl.

print "Content-type: text/html\n\n";

Since Apache doesn’t have “special” support for perl like it does for php, we need to include this little bit of header information to tell the server what it’s serving.

open (JAVA, "java MyClass 2>&1 |");

This is the meat of the action. The open function opens a steam, which here we name “JAVA”. The stream we are opening is from the command java MyClass 2>&1 |. You can probably tell this command runs the Java interpreter on “MyClass”. The extra stuff at the end allows both the stdout and stderr (the output and error streams) to be included in the stream.

while ()
{
        print $_;
}

This prints the entire stream, line by line.

close JAVA;

Closes the stream. Just some cleanup.

It seems pretty round-about to run Java from Perl through cgi, but it’s relatively easy to set up.

Additionally, if you are making changes to the source on the fly, you can also compile and get the output of that. Just make another CGI file with identical code as the first, with the exception of the command passed to the open function. Give it javac -version -verbose MyClass.java 2>&1 | or whatever you need to compile, and you’re in business. Personally, I like to add the -version and -verbose flags.

Tweaking the code here, you can do all kinds of neat things with cgi and perl besides being able to serve up the output from Java applications.

Federman Scripts

Recent Posts

Categories

Archives

Request Script

Donate

Javascript Motion Maker

Serve Up Java with Perl and CGI