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:

Script source


Insert source link to the jsxgraphcore.js file, and it will be added to converted JSXGraph code.



Latest version of jsxgraphcore.js can be found at cdnjs http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.5/jsxgraphcore.js

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)

Label alignment


This selection changes alignment to elements.

This is the the place where label of the element begins related to the element.

Center/top: label is aligned centered/top related to the point Right/top: label is aligned to the right/top related to the point Center/top: label is aligned right/middle related to the point
Right/top: label is aligned to the right/bottom related to the point Center/top: label is aligned center/bottom related to the point Right/top: label is aligned to the left/bottom related to the point
Center/top: label is aligned left/middle related to the point Right/top: label is aligned to the left/top related to the point

Label alignment can also be adjusted by user values. See Options definable by user -> Label alignment.

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.

About


help file updated 31.05.2017

Link to Sebastian Lisken's JSP Tutorial

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}