JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Tue Apr 17 2012 12:44:27 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: JSXGraph - Dynamic Mathematics with JavaScript
Description: JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.
Url: http://jsxgraph.uni-bayreuth.de/wp/
InternalName:
YoutubeId:
Keywords: JSXGraph
My Notes
--------
Xholon Workbooks should be able to use the JSXGraph library. This workbook explores this possibility, by trying to reproduce one of the examples at the JSXGraph site.
OK. I've been able to get the Circle example working.
How to draw the circle (or ellipse) and interact with it ::
Click the Run button above.
Click the Step button in the overlay.
Interact with the image.
How to edit the source code for the JSXGraph image ::
Locate the Blockbehavior editor further down on this page, and start editing the code in the act() function.
For example, change the values of any of the point or circle attributes.
Click the Refresh button in the overlay, or the Run button above.
Click the Step button in the overlay.
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
]]></script>
<_-.XholonClass>
<!-- types of domain objects -->
<PhysicalSystem/>
<Block/>
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<Block/>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:webEditionjs:inline:"><![CDATA[
function postConfigure() {
this.xholoncreationservice('requireScript', 'jsxgraphcore.js');
this.xholoncreationservice('requireStyle', 'jsxgraph.css');
}
function act() {
if (this.application("getTimeStep") == 0) {
// use the existing SVG div, and remove any content it has
var mySVGDiv = $("div#mySVGDiv");
mySVGDiv.css("width", "400").css("height", "250");
mySVGDiv.empty();
print("\nClick on the red points and move them around");
// http://jsxgraph.uni-bayreuth.de/wiki/index.php/Circle
var b = JXG.JSXGraph.initBoard('mySVGDiv', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.createElement('point',[0,0], {name:'A',size: 4, face: 'o'});
var p2 = b.createElement('point',[2,-1], {name:'B',size: 4, face: 'o'});
var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
}
}
]]></Blockbehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Click the Step button to replace this SVG image with a JSXGraph image</title>
<rect id="PhysicalSystem/JSXGraph" fill="#98FB98" height="50" width="50" x="25" y="0"/>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>