Create your own constructions/visualizations using JavaScript: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 29: Line 29:
** zoomX
** zoomX
** zoomY
** zoomY
 
More than one boards can be initialised simultaneously in one HTML file.
  More than one boards can be initialised simultaneously in one HTML file.
=== Creating geometric elements ===
  Through the variable board new geometry elements can be added to the  
Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():
  board. All elements are added with the method createElement():
<source lang="javascript">
    board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true, strokecolor:'red'});  
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true, strokecolor:'red'});  
 
</source>
  The parameters of createElement() are:
The parameters of createElement() are:
    board.createElement(elementType, parentElements, attributes);
<source lang="javascript">
  where  
board.createElement(elementType, parentElements, attributes);
</source>
where  
     - elementType is a string containing the type of the element which is constructed.
     - elementType is a string containing the type of the element which is constructed.
       At the moment, possible types are:
       At the moment, possible types are:

Revision as of 20:08, 15 September 2008

First step

Link to prototye.js and to jsxgraphcore.js:

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>

Second step

Insert a div inside of the document body:

<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>

Third step

Connect JXG with the div (usually at the end of the document body) and call initBoard():

<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
</script>
  • Parameter 1: id of the division
  • Parameter 2: properties of the board. Possible entries are:
    • originX
    • originY
    • unitX
    • unitY
    • zoomX
    • zoomY

More than one boards can be initialised simultaneously in one HTML file.

Creating geometric elements

Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():

board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true, strokecolor:'red'});

The parameters of createElement() are:

board.createElement(elementType, parentElements, attributes);

where

   - elementType is a string containing the type of the element which is constructed.
     At the moment, possible types are:
   1) primitive elements:
    * angle
    * arc
    * arrow
    * circle
    * curve
    * group
    * line
    * point
    * polygon
    * sector
    * text
    * transform
   2) composite elements:
    * arrowparallel
    * bisector
    * circumcircle
    * circumcirclemidpoint
    * integral
    * midpoint
    * mirrorpoint
    * normal
    * parallel
    * parallelpoint
    * perpendicular
    * perpendicularpoint
    * reflection
   
   - parentElements is an array containing the parameters which define
     the element. This can be parent elements like two points which define
     a line. It can also consist of JavaScript functions, numbers,
     and strings containing GEONExT syntax. The possible array elements
     depend on the element type.
   - attributes is a JavaScript object. Usually it is given in the "literal object" form
       {key1:value1, key2:value2, ...}
 Properties of a point:
 - style
 - strokeColor
 - strokeWidth
 - fillColor
 - highlightStrokeColor
 - highlightFillColor
 - labelColor
 - 
 - visible
 - fixed
 - draft
 - trace
 - labelX
 - labelY
 - showcoord
 Additional properties of a line:
 - straightFirst
 - straightLast
 There are no additional properties of a circle

Additional properties for an element:

 needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false)
 These elements are updated only, if the origin of the board is moved or after zooming.
 

Possible parameters: el.setProperty('key1:value1','key2:value2',...); el.setProperty([key1:value1],[key2:value2],...); el.setProperty({key1:value1, key2:value2},...);


Methods JXG.JSXGraph: var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50}); Initializes a new board without loading a construction.

var board = JXG.JSXGraph.loadBoardFromFile(DOMid, filename, format); DOMid is the id of the div (or other HTML element) where the viewer should be displayed. filename is the name of the file containing the geometric construction. format iss the file format: 'Geonext' or 'Intergeo' Returns a pointer to the board.

var board = JXG.JSXGraph.loadBoardFromString(DOMid, string, format); Same as JXG.JSXGraph.loadBoardFromFile, but string contains the complete data of the geometric construction.

JXG.JSXGraph.freeBoard(board); Deletes the contents of a board. Should be called before a new construction is loaded.

The updates can be supressed with board.suspendUpdate() board.unsuspendUpdate() reestablishes the updating of all elements (and fires one update())