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

From JSXGraph Wiki
No edit summary
No edit summary
Line 21: Line 21:
</script>
</script>
</source>
</source>
# Parameter 1: id of the division
* Parameter 1: id of the division
* Parameter 2: properties of the board. Possible entries are:
* Parameter 2: properties of the board. Possible entries are:
** originX
** originX
** originY
** originY
** unitX
** unitX
** unitY
** unitY
** zoomX
** zoomX
** zoomY
** zoomY
 
  More than one boards can be initialised simultaneously in one HTML file.
  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())

Revision as of 20:05, 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.
 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())