|
Quick start
Insert JavaSketchpad code into the field on top.

Click on the 'Create JSXG' button to see result in JSXGraph image and code.
User interface
JSP codearea is on topleft corner. Here you should copy or write your JavaSketchpad code. 'Clear codearea' button clears the code. From dropmenu '- Load example -' you find some examplecodes. You can also load a code from file by clicking 'browse' (see 'Loading code from file' help section).

Right column is for JSXGraph image and code. Here you can see converted image and code. You can save the code as HTML-file by clicking 'Save JSX/HTML' button, or you can simply copy the code by clicking 'Copy JSX code to clipboard' button, and the paste code on your webpage.

Here you can insert fieldsize and scaling for the image (see Field size -help section).

You can select unique elementname and boardname for converted JSXGraph code. You also need to input a jsxgraphcode.js source in here. Latest version of jsxgraphcore.js can be found at cdnjs http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.5/jsxgraphcore.js

At the bottoms the is some optional attributes.
Board size
You can change JSXGraph field size changing board width and height.

If your code has info about boardsize, it will be read automatically. For example if your code is copied straight from HTML code and it looks something like this
<APPLET CODEBASE="jsp" ARCHIVE="jsp4.jar"CODE="GSP.class"WIDTH=400 HEIGHT=200 ALIGN=Center TextFont="Helvetica"TextBold=1 TextSize=18>
<PARAM NAME=Offscreen VALUE=1><PARAM NAME=Frame VALUE=1> <PARAM NAME=LabelFont VALUE="Courier"> <PARAM NAME=LabelBold VALUE=1> <PARAM NAME=MeasureFont VALUE="Courier"> <PARAM NAME=MeasureSize VALUE=14> <PARAM NAME=MeasureBold VALUE=1> <PARAM NAME=MeasureInDegrees VALUE=1> <PARAM NAME=DirectedAngles VALUE=0> <PARAM NAME=BackRed VALUE=230> <PARAM NAME=BackGreen VALUE=230> <PARAM NAME=BackBlue VALUE=230>
<PARAM NAME=Construction VALUE="
{1} FixedText(5,185,'Reset = ''R''')[red,bold];
{2} FixedText(100,15,'X = {1, 2, 3}')[plain,font('Helvetica'),bold,black];
{3} FixedText(300,15,'Y = {1, 2, 3, 4, 9}')[plain,font('Helvetica'),bold,black];
{4} FixedPoint(100, 40)[red,label('1'),layer(5)];
{5} FixedPoint(100,100)[red,label('2'),layer(5)];
{6} FixedPoint(100,160)[red,label('3'),layer(5)];
{7} FixedPoint(300, 40)[blue,label('1'),layer(5)];
{8} FixedPoint(300, 70)[blue,label('2'),layer(5)];
{9} FixedPoint(300,100)[blue,label('3'),layer(5)];
{10} FixedPoint(300,130)[blue,label('4'),layer(5)];
{11} FixedPoint(300,160)[blue,label('9'),layer(5)];
{12} Point(100, 40)[magenta];
{13} Point(100,100)[magenta];
{14} Point(100,160)[magenta];
{15} Segment(4,12)[magenta,thick];
{16} Segment(5,13)[magenta,thick];
{17} Segment(6,14)[magenta,thick];
">
,
WIDTH and HEIGHT values will be changed automatically, and you don't have to change these fields.
Board name
Here you can change board name and variable (array) name for each JSXGraph sketch.
Board name changes the name of the created board in JSXGraph code:

Element name changes the name of each element (array of elements) in JSXGraph code:
Scale sketch
You can insert scale value if you like. Value should be given as decimal, e.g. 1.2
Default value here is 1.0. Scalevalue will multiply the length and the height properties of the image. All the element positions will stay realatively as they are in original sketch.
Point size
Change point size as you want points size to appear in final jsxgcode.
Point size can be choosed as a value from 1 to 5.
Point size affects to following objects:
- Point
- FixedPoint
- Point on object
- Intersection
- Midpoint
- Reflection (if reflection of a point)
- Rotation (if rotation of a point)
- Vectortranslation (if translation of a point)
Show object coordinates
If 'Yes' is selected, shows the infobox (coordinates) on top of the object when mouse
is touching the object.

If you want to show infobox of some object(s) but not all of them, you can do this
See more on Options definable by user -> Coorniates visibility.
Arrow to line
This extra attribute draws an arrow to a line.
When arrow is wanted to be drawn, attribute 'arrowF' or 'arrowL' needs to be added to sketch-code.
'arrowF' will draw the arrow head to the line at the position of its first point or the nearest intersection with the image border.
'arrowL' will draw the arrow head to the line at the position of its second point or the nearest intersection with the image border.
E.g. command '{1} Segment(3,4)[blue, arrowF];'
will draw an arrow head to the segment at the position of its first point, in this case referred to point at the codeline {3}.
Arrow drawing affects to following objects:
- Line
- Perpendicular
- Parallel
- Segment
- Ray
LaTeX labels
If option is set 'Yes', all the point labels are added two backslashes '\\' and a left bracket '(' on the left side of the label,
and two backslashes '\\' and a right bracket ')' on the right side of the label. This will then change the labels in LaTeX form,
but it needs an environment with MathJax loaded in it (like Moodle for example) to show the LaTeX fonts correctly.
Show grid
If option is set 'Yes', grid will be drawn in image.
Grid size (size of the coordinate unit) can be adjusted by using command UnitPoint in the code.
Snap to grid
Extra attribute that can be added as an option for points. If point is set to snap to grid,
it will snap to grid which size is defined by UnitPoint. Else grid size is 100 (that is one unit by default).
Snap to grid can be activated by adding text 'snapToGrid' in point options, as in example below:
'{1} Point(200,200)[label('A'), snapToGrid];'
San pto grid works with following objects:
- Point
- Point on object
Draw axis
If yes draws axis to the board.
Loading code from file
Code can be loaded from file (.txt .html etc). You have to be sure that there is only one JSP-appletcode in that file.
Result will be better, if the <param> -lines, including width and height info are included.
Most of the <param> -lines are not needed in the file, but it wont affect to the translation even though those lines are included.
Here is an example of a proper loadable txt-file:
<applet codebase="source"
code="GSP.class"
width="400" height="400"
align="middle">
<param name="Offscreen" value="1" />
<param name="Frame" value="1" />
<param name="LabelFont" value="Courier" />
<param name="LabelBold" value="1" />
<param name="MeasureFont" value="Courier" />
<param name="MeasureSize" value="14" />
<param name="MeasureBold" value="1" />
<param name="MeasureInDegrees" value="1" />
<param name="DirectedAngles" value="0" />
<param name="BackRed" value="255" />
<param name="BackGreen" value="220" />
<param name="BackBlue" value="255" />
<param name="Construction" value="
{1} Point(200,200)[black,label('A')];
{2} Point(250,250)[black,label('B')];
{3} Segment(1,2)[red,thick];
" />This page requires a Java capable browser. </applet>
In future some parameter values will affect if included in the file, param values MeasureSize, MeasureInDegrees, DirectedAngles soon.
Notice! If loading codefile seems not to work at first, check if the char '&' is changed in operation 'Origin&Unit' during the load.
In case this happens, you can change char '&' in the operation 'Origin&Unit' into 'And' so that it would be 'OperationAndUnit'.
You can also change it in the textarea in the translator after you have loaded the file.
Known restrictions
Operations that are not working at the moment:
'DriverPoint'
'Translation/MarkedAngle/MarkedDistance'
'Translation/FixedAngle/MarkedDistance' (some issues but works)
'Parameter'
Operation 'Calculate' is restricted to only have four variables (A, B, C and D) in use, so it can't calculate for example AB+C+D+E+ since E is fifth variable.
Options definable by user
Options menu
This section deals the options, that can be changed from the left column options menu.
Point size by user
You can change size of a single point(s) adding size value into the
sketch-code as an extra attribute 'psize(value)'.
E.g. command
{1} Point(200,200)[label('A'), psize(7)];
will change this point size to 7.
Another way to affect a single point is to write a JSP comment after the point construction line.
This is often better way, since you can use this code normally in JSP if you like.
Following will do the trick:
{1} Point(200,200)[label('A')];
{,psize(7)}
Point size affects to following objects:
- Point
- FixedPoint
- Point on object
- Intersection
- Midpoint
- Reflection (if reflection of a point)
- Rotation (if rotation of a point)
- Vectortranslation (if translation of a point)
Label alignment by user
If specified alignment is wanted, it needs to be put in as an extra attribute labelAlign()
to the sketch-code, like example below.
{1} Point(200,200)[label('A'), labelAlign(-10,10)];
Here -10 is the x-offset, and 10 is y-offset. There must be comma between two values.
Coordinates visibility (infobox) by user
If you want to show infobox of some object(s) but not all of them, you can do this
by adding extra attribute showInfoBox into the scketch-code options.
E.g. command
{1} Point(200,200)[label('A'), showInfoBox];
will show the infobox.
Command
{1} Point(200,200)[label('A'), labelAlign(-10,10), showInfoBox, psize(7)];
will change label alignment, show the infobox and change this point size to 7.
You can also add this extra option as a JSP comment after the construction line e.g.
{1} Point(200,200)[label('A')];
{,showInfoBox}
will do the same trick. There must be comma right after the '{' and right before the comment, so the converter reads it as a extra attribute
Good thing doing this is that the JSP sketch can be also generater from that code, since JPS
reads that extra line simply as comment.
Snap to grid
Draw an arrow head to line/segment
By writing extra attribute arrowL or arrowF you can draw a arrowhead to the endpoint of a line or segment.
arrowL (meaning arrowLast) will draw it at the end of the line/segment, and arrowF (meaning arrowFirst) will draw it at the start of the line/segment.
You can write the attribute in the construction attributes
{4} Segment(1,3)[red, arrowL];
or as a commentattribute right after the construction line
{4} Segment(1,3)[red];
{,arrowF}
|