GeoGebra Applets and JavaScript

GeoGebra 3.0, November 27, 2007
Markus Hohenwarter

This document describes public methods available in geogebra.GeoGebraApplet to be used from an HTML page via JavaScript.
  1. Examples
  2. Available Methods
    1. Setting the state of objects
    2. Getting the state of objects
    3. Construction / User Interface
    4. GeoGebraApplet to JavaScript Communication
    5. GeoGebra's XML format

Examples

Example 1: the following HTML code fragment adds a "Reset" button to an HTML page that lets the user reset the construction shown in the GeoGebraApplet to its initial state:

<form>
<input type="button" value="Reset" onclick="document.applets[0].reset();">
</form>

Example 2: this adds two buttons "Hide A" and "Show A" change the visibility state of an object named "A" in the construction

<form>
<input type="button" value="Hide A" onclick="document.applets[0].setVisible('A', false);">
<input type="button" value="Show A" onclick="document.applets[0].setVisible('A', true);">
</form>

Example 3: a JavaScript function "myLittleConstruction()" is used to call several methods of the GeoGebraApplet. Note: the language is set to German ("de") with the applet parameter "language" in the applet tag in order to make sure that the German command "Gerade" (line) will work.

<applet name="ggbApplet" code="geogebra.GeoGebraApplet"
        archive="geogebra.jar"
        width=200 height=40>
    <param name="filename" value="circle.ggb">
    <param name="framePossible" value="false">
    <param name="language" value="de">
    Please <a href="http://www.java.com">install Java 1.4.2</a> (or later) to use this page.
</applet>

<script type="text/javascript">
function myLittelConstruction() {
var applet = document.ggbApplet;
applet.evalCommand("A = (1,1)"); 
applet.evalCommand("B = (3,2)"); 
applet.evalCommand("s = Gerade[A, B]"); 
}
</script>

<form>
<input type="button" value="Do construction" onclick="myLittelConstruction();">
</form>

Example 4: Have a look at the source code of the following example worksheet that uses JavaScript.

Available Methods

Command line

Method Signature Since Description
boolean evalCommand(String cmdString) 3.0 Evaluates the given string just like it would be evaluated when entered into GeoGebra's input text field. Returns whether command evaluation was successful.
Note: use the language parameter to ensure your local command names will work.

Setting the state of objects

Method Signature Since Description
void deleteObject(String objName) 2.7 Deletes the object with the given name.
void setValue(String objName, double value) 3.0 Sets the double value of the object with the given name. Note: if the specified object is not a number, nothing is done.
void setCoords(String objName, double x, double y) 3.0 Sets the coordinates of the object with the given name. Note: if the specified object is not a point or a vector, nothing is done.
void setColor(String objName, int red, int green, int blue) 2.7 Sets the color of the object with the given name.
void setVisible(String objName, boolean visible) 2.7 Shows or hides the object with the given name in the graphics window.
void setLabelVisible(String objName, boolean visible) 3.0 Shows or hides the label of the object with the given name in the graphics window.
void setLabelStyle(String objName, boolean visible) 3.0 Sets the label style of the object with the given name in the graphics window. Possible label styles are NAME = 0, NAME_VALUE = 1 and VALUE = 2.
void setFixed(String objName, boolean flag) 3.0 Sets the fixed state of the object with the given name. Note: fixed objects cannot be changed.
void setTrace(String objName, boolean flag) 3.0 Turns the trace of the object with the given name on or off.

Getting the state of objects

Method Signature Since Description
double getXcoord(String objName) 2.7 Returns the cartesian x-coord of the object with the given name. Note: returns 0 if the object is not a point or a vector.
double getYcoord(String objName) 2.7 Returns the cartesian y-coord of the object with the given name. Note: returns 0 if the object is not a point or a vector.
double getValue(String objName) 2.7 Returns the double value of the object with the given name (e.g. length of segment, area of polygon, etc.). Note: returns 0 if the object does not have a value.
String getColor(String objName) 2.7 Returns the color of the object with the given name as a hex string, e.g. "#FF0000" for red. Note that the hex string always starts with # and contains no lower case letters.
String getValueString(String objName) 2.7 Returns the value of the object with the given name as a string.
String getDefinitionString(String objName) 2.7 Returns the definition of the object with the given name as a string.
String getCommandString(String objName) 2.7 Returns the command of the object with the given name as a string.
String getObjectType(String objName) 2.7 Returns the type of the given object as a string (like "point", "line", "circle", etc.).
boolean exists(String objName) 2.7 Returns whether an object with the given name exists in the construction.
boolean isDefined(String objName) 2.7 Returns whether the given object's value is valid at the moment.
String [] getAllObjectNames()
Deprecated since 3.0 		2.7 Returns an array with all object names in the construction. Note: using arrays in JavaScript causes problems with some browsers. Use getObjectNumber() and getObjectName() instead.
int getObjectNumber() 3.0 Returns the number of objects in the construction.
String getObjectName(int i) 3.0 Returns the name of the n-th object of the construction.

Construction / User Interface

Method Signature Since Description
void setMode(int mode) 2.7 Sets the mouse mode (i.e. tool) for the graphics window (see Toolbar Mode Values and the applet parameters "showToolBar" and  "customTollBar")
void openFile(String strURL) 2.7 Opens a construction from a  file (given as absolute or relative URL string)
void reset() 2.7 Reloads the initial construction (given in filename parameter) of this applet.
void refreshViews() 2.7 Refreshs all views. Note: this clears all traces in the graphics window.
void setRepaintingActive(boolean flag)
 2.7 Turns the repainting of this applet on (true) or off (false). Note: use this method for efficient repainting when you invoke several methods.
void setErrorDialogsActive(boolean flag) 3.0 Turns showing of error dialogs on (true) or (off). Note: this is especially useful together with evalCommand().
void setCoordSystem(double xmin, double xmax, double ymin, double ymax) 3.0 Sets the Cartesian coordinate system of the graphics window.
void setAxesVisible(boolean xAxis, boolean yAxis) 3.0 Shows or hides the x- and y-axis of the coordinate system in the graphics window.
void setGridVisible(boolean flag) 3.0 Shows or hides the coordinate grid in the graphics window.

GeoGebraApplet to JavaScript Communication

With these methods you can implement Applet to JavaScript communication. When you use any of the following methods, you should make sure to insert the MAYSCRIPT option add the end of the first line of your applet tag. For example: <applet name="ggbApplet" code="geogebra.GeoGebraApplet" codebase="." archive="geogebra.jar" width="500" height="250" MAYSCRIPT>. The MAYSCRIPT option is only needed for GeoGebraApplet to JavaScript communication; it is not needed for JavaScript to access the GeoGebraApplet methods. 

For example, these methods can be used to 

Method Signature Since Description
void registerAddListener(String JSFunctionName) 3.0 Registers a JavaScript function as an add listener for the applet's construction. Whenever a new object is created in the GeoGebraApplet's construction, the JavaScript function JSFunctionName is called using the name of the newly created object as its single argument. 
Example: First, register a listening JavaScript function:
ggbApplet.registerAddListener("myAddListenerFunction");
When an object "A" is created, the GeoGebra Applet will call the Javascript function
myAddListenerFunction("A");
void unregisterAddListener(String objName) 3.0 Removes a previously registered add listener, see registerAddListener()
void registerRemoveListener(String JSFunctionName) 3.0 Registers a JavaScript function as a remove listener for the applet's construction. Whenever an object is deleted from the GeoGebraApplet's construction, the JavaScript function JSFunctionName is called using the name of the deleted object as its single argument. Note: when a construction is cleared, remove is not called for every single object, see registerClearListener().
Example: First, register a listening JavaScript function:
ggbApplet.registerRemoveListener("myRemoveListenerFunction");
When the object "A" is deleted, the GeoGebra Applet will call the Javascript function
myRemoveListenerFunction("A");
void unregisterRemoveListener(String objName) 3.0 Removes a previously registered remove listener, see registerRemoveListener()
void registerUpdateListener(String JSFunctionName) 3.0 Registers a JavaScript function as a update listener for the applet's construction. Whenever any object is updated in the GeoGebraApplet's construction, the JavaScript function JSFunctionNameis called using the name of the updated object as its single argument. Note: when you only want to listen for the updates of a single object use registerObjectUpdateListener() instead.
Example: First, register a listening JavaScript function:
ggbApplet.registerUpdateListener("myUpdateListenerFunction");
When the object "A" is updated, the GeoGebra Applet will call the Javascript function
myUpdateListenerFunction("A");
void unregisterUpdateListener(String objName) 3.0 Removes a previously registered update listener, see registerUpdateListener()
void registerObjectUpdateListener(String objName, String JSFunctionName) 3.0 Registers a JavaScript function as an update listener for a single object. Whenever the object with the given name is updated, the JavaScript function JSFunctionNameis called using the name of the updated object as its single argument. If objName previously had a mapping JavaScript function, the old value is replaced. Note: all object updated listeners are unregistered when their object is removed or the construction is cleared, see registerRemoveListener() and registerClearListener().
Example: First, register a listening JavaScript function:
ggbApplet.registerObjectUpdateListener("A", "myAupdateListenerFunction");
Whenever the object A is updated, the GeoGebra Applet will call the Javascript function
myAupdateListenerFunction("A");
Note: an object update listener will still work after an object is renamed.
void unregisterObjectUpdateListener(String objName) 3.0 Removes a previously registered object update listener of the object with the given name, see registerObjectUpdateListener()
void registerRenameListener(String JSFunctionName) 3.0 Registers a JavaScript function as a rename listener for the applet's construction. Whenever an object is renamed in the GeoGebraApplet's construction, the JavaScript function JSFunctionName is called using the old name and the new name of the renamed object as its two arguments. 
Example: First, register a listening JavaScript function:
ggbApplet.registerRenameListener("myRenameListenerFunction");
When an object "A" is renamed to "B", the GeoGebra Applet will call the Javascript function
myRenameListenerFunction("A", "B");
void unregisterRenameListener(String objName) 3.0 Removes a previously registered rename listener, see registerRenameListener()
void registerClearListener(String JSFunctionName) 3.0 Registers a JavaScript function as a clear listener for the applet's construction. Whenever the construction in the GeoGebraApplet is cleared (i.e. all objects are removed), the JavaScript function JSFunctionName is called using no arguments. Note: all updated listeners are unregistered when a construction is cleared. See registerUpdateListener() and registerRemoveListener().
Example: First, register a listening JavaScript function:
ggbApplet.registerClearListener("myClearListenerFunction");
When an object "A" is renamed to "B", the GeoGebra Applet will call the Javascript function
myClearListenerFunction();
void unregisterClearListener(String JSFunctionName) 3.0 Removes a previously registered clear listener, see registerClearListener()

GeoGebra's XML format

With these methods you can set everything in a construction (see GeoGebra's XML format).

Method Signature Since Description
void evalXML(String xmlString) 2.7 Evaluates the given XML string and changes the current construction. Note: the construction is NOT cleared before evaluating the XML string.   
void setXML(String xmlString) 2.7 Evaluates the given XML string and changes the current construction. Note: the construction is cleared before evaluating the XML string. This method could be used to load constructions.
String getXML()
 2.7 Returns the current construction in GeoGebra's XML format. This method could be used to save constructions.