Goetz's Graphics Kit v1.02

Copyright 1998 Lawrence Goetz

This applet will let you write a script to show a graphical display on a web page. You can use jpg or gif images, create images as polygons, lines, arcs, rectangles, etc., and use text. You can even link the applet to web pages. The url information can change in the script, to allow multiple items to be shown in the same applet. The program has numerous options and configurations for a wide range of uses. You can make banner ads, text displays, or anything where you can use images or text.

This applet is shareware. Unless registered, you will need to click the applet when you view the page. Once registered the applet will begin automatically.

Registration is $20 US funds.
Click here for registration information.

Instructions:

You write your script using any text editor, such as Word Pad. Save the file in the same directory as you have placed Goetz's Graphics Kit's class files (ggraphk.class and gkcanvas.class). If there is a problem, the applet will display up to the error in the file and display the line containing the error in the status bar of the browser. You can skip blank lines in the script. However if you have a blank line that has spaces or tabs it will be considered an error.

Here is the code you add to your web page, to run the applet. You don't need to have the comment lines, but they help you read the code. I'd appreciate if you left in the comment about the title of the applet and where it can be found. This is so people who want to know what it is, know where to find it. You'll also need to place the ggraphk.class and gkcanvas.class file in the same directory as you place your html file that loads the applet. If your applet uses any images, place them in the same directory as well.

Template:

<!-- Goetz's Graphics Kit. Copyright Lawrence Goetz 1998. -->
<!-- Web: http://www.lawrencegoetz.com E-mail: goetz@lawrencegoetz.com-->

<!-- Adjust the width and height of the applet here. -->
<applet code=ggraphk.class name=ggraphk width= height= >

        <!-- The filename of the script goes here. -->
       
<param name=filename value="">

        <!-- HTML code for non Java visitors goes here. -->
       
You do not have Java or it is not enabled.
</applet>


Applet Size:

Change the width and the height to suit your needs. If you make the size too small, the objects will get cropped at the edges. If you leave off a value, the applet will not be displayed, and an error message may appear.
Example:
<applet code=ggraphk.class name=ggraphk width=600 height=400>

File Name:

You need to define the file name of the script.
Example.
<param name=filename value="drawing.txt">

You can replace "You do not have Java or it is not enabled." with some other text or html code (such as the tag for an animated gif). This is so visitors without Java can see something.

The system may hang a bit when exiting the browser while the applet is running.

I have tested it on Netscape 3.04 and Internet Explorer 3.0. It worked fine on both these browsers. If for some reason it's not working, restart your browser and try again. It takes a few seconds the first time Java is loaded.  When you view the first applet from the time the browser is started, it may appear to pause a moment before starting.

When making changes to the script, in Netscape you may need to do a shift-reload for the applet to reread the script. In IE, the regular reload command rereads the script. In Netscape the page may hang a bit when doing the shift-reload. So give it a few extra seconds for it to respond.

Commands:

Color Commands

The defaults are white background and black drawing color. However it's best to clear the screen at the beginning and define the colors on your own.

color choice
Set the choice of color to draw with.

clear choice
Clears the screen and makes the background the color choice specified.

You can change the color to draw with anywhere in the program to define the color of an object that will be drawn.

Color choices:

white
black
gray
red
pink
orange
yellow
green
magenta
cyan
blue


Drawing commands

When programming the x,y locations, 0,0 is the upper left hand corner of the applet. You can draw until width-1,height-1. For example if the size is 600,400. You can draw from 0,0 to 599,399. The x,y values are positive. Negative values or those larger than the applet's size will be drawn off the applet's display. You can use these values to make objects appear to move into the applet.

The order you list the instructions is the order in which they get processed. If you want to layer objects, first place the object that's in the back. Then draw the next object over previous one.

line x1 y1 x2 y2
Displays a line from the point x1,y1 to x2,y2.

box x y width height
Draw a box from the upper left corner x,y with the width to the right and the height going down. Set width and height the same for a square.

boxfill x y width height
Same as box, but displays a solid box. You can use this to erase an object from the screen. Make a box the same color as the background color and it will seem to make the object disappear. This is good for making animated displays.

arc x y width height startAngle arcAngle
Display an arc with the upper left corner of the arc at x,y. The width and height of the arc specify size of the arc. The start and arc angles define what part of the arc to draw. Start angle 0 and arc angle 360 will make a full circle. 0 degrees is 3 o'clock on the arc. Positive values go counterclockwise, negative values go clockwise.

arcfill x y width height startAngle arcAngle
Same as arc, but makes a solid object.

A polygon is a shape defined by many points. It will connect the points to define the shape. You can use a polygon to define triangles, pentagons, and many other shapes. Netscape & IE display polygons differently. To make it compatible, always close your polygons. Give the last point on the polygon the same value as the first point and it will be closed.

polygon x y
Defines a point of the polygon.
It does not always close the polygon. It's best to give the last point the same value as the first point, so it closes. The order you give the points, is the order in which they are connected.

polygondraw
Draws the polygon on the screen.

polygonfill
Same as polygondraw, except that it makes a solid object. It does not always close the polygon. It's best to give the last point the same value as the first point, so it closes. If it can not close it, it will not display anything.

You need to call polygon x y to define the points on the polygon, before calling polygondraw or polygonfill.

polygonnew
After you draw your polygon and you want to define a new one, you use this command to make a new polygon.


Special Options

loop
If you want the script to run more than once, then use this option.

//
Any line that has // followed by a space will not be processed. Use this for a comment in your script.

pause time
Displays what's in the frame and pauses the program for the time specified. The time is given in ms. 1000 ms = 1 sec.
You can do animations with the pause option. Clearing the screen after a pause will allow you to make animation frames. If you don't clear, it will let you build the scene progressively.
If you have multiple frames and never call the pause command, you will not see the intended outcome. Also if you loop the script and do not call the pause command, you will not see what you intended.

pauseable
Place this option at the beginning of the script to have the applet pause while the mouse is over the applet. This is useful if you have frames with different URLs in your script. This will prevent the visitor from clicking the wrong URL.


Text Options

textset text
Set up the text to be displayed on the screen. For centering text, sometimes you need to add a space to the end of the text for it to center properly.

textdisplay x y size format
Displays the text set by textset on the screen at x,y.  Size determines the font size in points. Size 12 is a typical size, less than 12 it gets hard to read. If you want to format the text use:
i for italic.
b for bold.
ib for italic & bold combination.
If you want plan text, do not use the format command.

textdisplaycenterscreen size format
Similar to textdisplay, except it doesn't take any x,y location. It displays in the center of the screen.

textdisplaycenter y size format
Similar to textdisplaycenterscreen, except it takes a y location to display at the center of the screen.


Image Options

image file x y
Display a jpg or gif file at x,y on the screen. x y is the upper left corner of the image.
If you want to display a lot of images, like a series of banner ads, make the applet's size the size of the image. Then display the images at 0 0.
If the image is not found, no image is displayed nor is an error given. The image name must not contain spaces.

imagecenter file
This displays an image at the center of the screen.

imagecentery y file
This displays an image at the center of the y location specified.

Use the following resize options with caution! In Netscape it works fine. However in my version of IE (3.0), it does not work correctly. In IE it does not display anything, unless called a second time. If you use this in a loop, in IE the first time it will not display the image.

image file x y width height

This is similar to the regular image display, except for the addition of the image's width and height percentage. Use this if you want to display the image in a different size than the original. 50 by 50 will be half the size, 200 by 200 will be twice the size.

imagecenter file width height
Displays an image at the center of the screen with the width and height percentage specified.

imagecentery y file width height
Displays an image at the center of the y location with the width and height percentage specified.


Linking Options

url
Give an address to link to if the applet is clicked. Be sure to include the http:// in the web address. For local files you don't need the http://. Examples:
url http://www.lawrencegoetz.com/
url games.html

You can change the url value anywhere in the script. This lets different screens go to different links.

nourl
Clears the url value. Use this if in the script you no longer want the applet linked to anything.

info
This will display info in the browser's status area when the mouse goes over the applet. You can use this multiple times in the script to correspond with different screens.

noinfo
Clears the info value. Use this if in the script you no longer want the applet to display info in the browser's status area.

target
Use this to define the target for the url to load in. This is used when using frames. The default is _self.

_top will display the site in the main window of the browser (as if there were no frames).
_blank will display the site in a new browser window.
_self will display the site in the frame that the applet is in.
name will display the site in the frame specified by name. Frame's name must not contain any spaces.


Examples:

A simple text display.
Script
Applet in action

Using the graphics functions to draw graphics, this example displays sales graphs.
Script

Applet

This example shows how you can use text to make a fancy display.
Script

Applet

This example shows how to make a series of banner ads.
Script
Applet

This example shows a display where an image zooms in.
Script
Applet

An example banner ad with expanding image effect.
Script
Applet in action

Send comments, questions or problems to:
goetz@lawrencegoetz.com

Visit my web site for other programs I've made.

Thank you,

Lawrence Goetz