[ Prev | Main | Next ]

SimpleGraph Applet



SimpleGraph is a configureable applet that shows the graph of a function and, optionally, marks a point on the graph. If there is a point, then the user can control its x-coordinate either by adjusting a slider at the bottom of the applet or by entering the x-coordinate in an input box. Here is what the applet looks like in its default configuration, with no applet params:

Here is the same applet, configured using a variety of applet params. This time, the applet appears as a button on the Web page. Clicking this button will open the applet in a separate, resizable window. (This happens automatically if the height of the applet is less than 100.) When the applet opens, you'll see that it uses different colors. There is a menu of examples at the top of the apple that the user can load. Furthermore, several new functions have been defined: The hyperbolic functions, "sinh(x)=(exp(x)-exp(-x))/2", "cosh(x)=(exp(x)+exp(x))/2", and "tanh(x)=sinh(x)/cosh(x)", have been added so that they can be used in expressions, even though they are not among the standard functions in the WCM parser. The parser has also been configured so that you can leave out the "*" operator in multiplication. "Mouse zooming" has been turned on. You can "zoom" by clicking, shift-clicking, or clicking-and-dragging on the canvas. "Panning" has been turned on, so you can right-click-and-drag to drag the graph. A "Restore" button has been added to the LimitsControlPanel to make it easy to get back to the original limits after a sequence of zooms.

The applet tag that creates the applet is as follows:

 <applet archive="webcompmath.jar" code="net.sourceforge.webcompmath.applets.SimpleGraph"

width=160 height=40>

<param name="BackgroundColor" value="0 0 150">

<param name="Limits" value="-3,3,-6,6">

<param name="PanelBackground" value="180 180 255">

<param name="CanvasColor" value="255, 255, 200">

<param name="UseMouseZoom" value="yes">

<param name="UsePanner" value = "yes">

<param name="UseRestoreButton" value="yes">

<param name="OptionalStars" value="yes">

<param name="GraphColor" value="180 0 0">

<param name="LineColor" value="black">

<param name="Function" value=" cosh(x)">

<param name="Define1" value="sinh(x)=(exp(x)-exp(-x))/2">

<param name="Define2" value="cosh(x)=(exp(x)+exp(-x))/2">

<param name="Define3" value="tanh(x)=sinh(x)/cosh(x)">

<param name="Example1" value="The Hyperbolic Sine Function; sinh(x) ; -3 3 -2 2 1">

<param name="Example2" value="The Hyperbolic Cosine Function; cosh(x); -3 3 -6 6 1">

<param name="Example3" value="The Hyperbolic Tangent Function; tanh(x); -6 6 -3 3 1">

</applet>

Finally, here is a stripped-down version where the user can't do anything except choose examples from the menu. Select one of the choices in the pop-up mene at the top of the applet to see the corresponding example. (In this case, the examples are cute graphs that use the trunc(x) function.) The value of the "UseLoadButton" parameter is set to "no", so the first example is loaded into the applet when it is created.

For this example, the applet tag is:

 <applet archive="webcompmath.jar" code="net.sourceforge.webcompmath.applets.SimpleGraph"

width=300 height=300>

<param name="UseFunctionInput" value="no">

<param name="ShowPoint" value="no">

<param name="UseLimitsPanel" value="no">

<param name="Example" value="The function trunc(x); trunc(x); -7, 7, -8, 8">

<param name="Example1" value="Truncing a parabola: trunc(x^2); trunc(x^2); -5 5 -2 20">

<param name="Example2" value="x^2 - trunc(x^2); x^2-trunc(x^2); -3 3 -3 3">

<param name="Example3" value="How about sin(x)*trunc(x)?; sin(x)*trunc(x); -5 5 -6 6">

<param name="Example4" value="The amazing 1 / trunc(1/x); 1/trunc(1/x); -1.5 1.5 -1.5 1.5">

<param name="UseLoadButton" value="no">

</applet>

Many of the applet params are processed by the source code in the base class, GenericGraphApplet. See the list of params for that class for information about those parameters. Here is a table of the applet params that are added in SimpleGraph, or whose processing is changed from that in GenericGraphApplet:

Param Name Type Default Description
GraphColor Color magenta The color used to draw the graph.
Function String abs(x) ^ x If there is a function input box, this is its initial contents. (This is already done by GenericGraphApplet.) If not, then SimpleGraph uses this value to define the function that is graphed when the applet starts. (Actually, the default uses the actual name of the independent variable, as specified by the "Variable" parameter.)
ShowPoint yes/no yes If the value is anything except "no", then a point is marked on the graph and inputs are added so the user can move the point.
DotColor Color (same as graph color) The color used for the crosshair that marks the point. This is ignored if "ShowPoint" is "no".
LineColor Color lightGray The color of the lines drawn from the point to the axes. This is ignored if "ShowPoint" is "no".
SliderStep int 1000 Sets the number of steps in the x slider.
XInputName String (same as variable name, usually x) Set the label used on the input box tied to the slider. This is usually labeled "x", but for an applet explaining the intermediate value theorem, you might want to label the slider input as "c".


[ Prev | Main | Next ]