Countdown HOWTO

Countdown-HOWTO

Version 0.2
Kevin Swan
Last modified: 03 Apr 1998

Introduction

This document is intended to give you complete step-by-step instructions on how you can use the Countdown applet in your own page, and modify it to use different digit sets. The Countdown applet is completely documented at http://dragon.acadiau.ca/~013639s/java/Countdown/.

Note that there are two versions of this applet. There is a Java 1.1 version, called Countdown, and there is a Java 1.0 version, called Countdown_1_0. The Java 1.0 version runs in more browsers, and that is the one I recommend you use for now, until more people upgrade their browsers. The only difference between the Java 1.0 version and the Java 1.1 version is the way the Java 1.0 version handles dates. There is a bug in the core Java libraries, in the java.util.TimeZone class. If you live in the AST timezone, you may notice your times are off by 5 hours. That is because Sun seems to think that AST stands for "Alaskan Standard Time." Well, I live in Nova Scotia, and our time zone is AST, and it stands for "Atlantic Standard Time." The Java 1.1 version of Countdown compensates for this by creating a new timezone with the proper time offset. However, there is no way to do this in the Java 1.0 version. If you do not live in the AST (Atlantic Standard Time) timezone, then you don't need to worry about this at all. Just use the Java 1.0 version. This HOWTO documents the Java 1.0 version of the applet.

Step 1 - The Basic Applet

If you just want the basic applet added to your page, simply add the following tags to your web page:

<APPLET CODEBASE="http://dragon.acadiau.ca/~013639s/java/Countdown/Java-1.0/" CODE="Countdown_1_0.class" HEIGHT=16 WIDTH=117> <PARAM NAME="digitwidth" VALUE="13"> </APPLET>

This will give you the most basic version of the applet, counting down to January 1, 2000 at midnight. While this is neat, you probably want to set your own target date.

Step 2 - Modifying the Target Date

You can specify a different target date by adding another <PARAM> tag in between the <APPLET> and </APPLET> tags. After the <PARAM> tag that is already there might be a good place. Here is an example of the <PARAM> tag to specify a target date of 4:00 pm on November 7, 1999:

<PARAM NAME="target" VALUE="07/11/1999@16:00:00">

This will give you the Countdown applet in your page, counting down the seconds remaining until 4:00 pm, November 7, 1999. If the target date you use has passed, it will display the number of seconds since the target date.

The target date must be in the following form:

dd/mm/yyyy@hh:mm:ss where

dd

mm

yyyy

hh

mm

ss

Step 3 - Getting your own copy

So far, you're just loading the applet from my web site and using your own parameters. You'll probably want a copy of the applet on your own web site for testing and development, and it might even be faster from your site. All you need to do is download the applet's single binary class file, called Countdown_1_0.class to your web server. Put it in the same directory as the HTML file that you want to put it in. Make sure the permissions are properly set, it must be globally readable. You'll also need a some digit images. digits3 is my favorite, but you can browse the other supported digit sets at the official website. You may need to hold down the SHIFT key while you click on these links to download them to your hard drive. Get one of these archives and unpack it in the same directory as the Countdown_1_0.class file, and the HTML file that is going to use the applet. Again, make sure the permissions are globally readable.

How do you unpack the digits? Excellent question. You can unpack them like this:


  tar -zxvpf digits3.tgz

OK, so now, you should have the following files all in the same directory, somewhere in your www hierarchy, and they're all globally readable:


  Countdown_1_0.class

  0.gif

  1.gif

  2.gif

  ...

  9.gif

  index.html

index.html is the HTML file which will include the applet in it. It must contain the following tag:

<APPLET CODE="Countdown_1_0.class" HEIGHT=16 WIDTH=117> <PARAM="digitwidth" VALUE="13"> <PARAM NAME="target" VALUE="07/11/1999@16:00:00"> </APPLET>

Step 4 - Making your own digits

If you're reading this far, I'm assuming you are proficient in web page administration and some HTML, so I'll cut the baby-talk. To make your own digit set, you must basically do three things:

First, decide on a size. You basically just create 10 images named 0.gif through 9.gif. They all must be exactly the same dimensions. You put these images in a directory somewhere relative to the applet, and specify their location using the "imagedir" PARAM tag. For example, if your images resided in ~/www/mydigits, and your Countdown.class file and your index.html file were in ~/www, you would use the following tag:
<PARAM="imagedir" VALUE="mydigits">
Note that this directory name is relative to the CODEBASE attribute you've specified in the <APPLET> tag.
Next, you must modify the PARAM tag indicating the width of the images to the applet. This is necessary so the applet knows where to draw the digits. This is a mandatory tag anyway, so all you're doing is changing the value that you already have their, from the simple example. This time, you'll set the value to the width in pixels of your custom digit images. In my example, using digits3, the images are all exactly 13 pixels wide.
Finally, you must modify the HEIGHT and WIDTH attributes of the <APPLET> tag. The HEIGHT of the applet will be the same as the height of all your digit images, in pixels. For example, the sample applet tags above have a HEIGHT value of 16, which is the same as the height of all of the images in the digits3 digit set. The WIDTH value for the <APPLET> is simply the width of the individual images (also the value in the "digitwidth" PARAM tag) multiplied by 9. In the sample code above, the applet width is set at 117 pixels. The width of the images is 13 pixels. 13 * 9 = 117.

vi Powered