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

From JSXGraph Wiki
No edit summary
No edit summary
 
(13 intermediate revisions by 5 users not shown)
Line 3: Line 3:
<source lang="xml">
<source lang="xml">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<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>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</source>
</source>
Line 18: Line 17:
<source lang="xml">
<source lang="xml">
<script type="text/javascript">
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</script>
</source>
</source>
* Parameter 1: id of the division
* Parameter 1: id of the div tag
* Parameter 2: properties of the board. Possible entries are:
* Parameter 2: properties of the board.  
** originX
====Possible properties of the board====
** originY
* originX, originY (in pixel)
** unitX
* unitX, unitY (in pixel)
** unitY
* zoomX, zoomY
** zoomX
* Or easier than origin*, unit* and zoom*: [[Bounding box]]
** zoomY
* axis (true/false)
* grid (true/false)
* showNavigation (true/false)
* showCopyright (true/false)
More than one boards can be initialised simultaneously in one HTML file.
More than one boards can be initialised simultaneously in one HTML file.
=== Fourth step: Creating geometric elements ===
====The result====
Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():
<jsxgraph box="box" width="400" height="400">
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
board.createElement('point', [1,3], {trace:true, strokecolor:'red'});  
</jsxgraph>
 
====The complete code====
<source lang="xml">
<head>
<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/jsxgraphcore.js"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</body>
</source>
</source>
Another example:
=== Fourth step: [[Creating geometric elements]] ===
<source lang="javascript">
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true, strokecolor:'red'});
</source>
The parameters of createElement() are:
<source lang="javascript">
board.createElement(elementType, parentElements, attributes);
</source>
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())

Latest revision as of 07:45, 9 June 2011

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/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', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
  • Parameter 1: id of the div tag
  • Parameter 2: properties of the board.

Possible properties of the board

  • originX, originY (in pixel)
  • unitX, unitY (in pixel)
  • zoomX, zoomY
  • Or easier than origin*, unit* and zoom*: Bounding box
  • axis (true/false)
  • grid (true/false)
  • showNavigation (true/false)
  • showCopyright (true/false)

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

The result

The complete code

<head>
<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/jsxgraphcore.js"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</body>

Fourth step: Creating geometric elements

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Create_your_own_constructions/visualizations_using_JavaScript&oldid=5327"