JavaSketchpad to JSXGraph Help

Index of Help Link to Sebastian Lisken's JSP Tutorial

JavaSketchpad to JSXGraph: What is it?

JavaSketchpad to JSXGraph is a tool to convert JavaSketchpad (JSP) code into JSXGraph -form (JXG). You can write/copy JSP code directly into the textarea and click 'Create JXG' button to execute convertion. Program then creates a preview of the converted image, and JXG code ready to copy and paste into web page. You have possibility to modify the result of the converted JXG image with some options this program offers such as default point sizing or resize the original sketch by simply scaling it.

Program also converts jsp.awk script ($ form JSP code) designed by Sebastian Lisken. Convertor outputs both JXG-code and basic JSP code in its original form.

There is also a JXG editor, where you can edit converted JXG code, or create one from scratch. There is also some extra attributes you can use in JSP code to modify your result JXG image. These attributes can be placed as comments in JSP code, so they won't affect the functionality of the original JSP code. See Options definable by user for more information.

There is some restrictions and differences in functionality between JSP code and converteds JXG code. See Restrictions for more information.

About User interface: How does it work?

Left column is for inputting the JSP code and options. JSP codearea is on topleft corner. Here you should copy or write your JavaSketchpad code. 'Clear JSX' button clears the code and image (and all converted data) from right side. From dropmenu_noindent '- Load example -' you find some examplecodes. You can also load a code from file by clicking 'browse' (see Loading code from file' help section).

Otions are located on the bottom of the left column. Here you can insert fieldsize and scaling for the image (see Field size help section), you can (and should) select unique elementname and boardname for converted JSXGraph code, and do some other adjustments to converted image/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

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.

At the bottoms the is some optional attributes.

Options menu: Modifying the properties of converted JXG.

Here is explained all the options you can find from the left column options menu.

Board size, scaling and zooming

You can set JSXGraph field size changing options Board width and Board 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)];
">

WIDTH and HEIGHT values will be changed automatically, and you don't have to change these fields.

You can use options Scale for setting 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.

Zoom option will zoom in/out the your JXG image.

Board and element name

Here you can change board name and variable (array) name for each JSXGraph sketch.

You can input JXG board name to set the name of the created board in JSXGraph code.

You can input JXG element name to set the name of each element (variables) in JSXGraph code

It is important to give each JSX image individual board name and element names in case if several JSX images will be placed on same HTML-page. If names are same, boards and variables used in them will mix together and cause problems.

Source of the JSXGraph script

In input field Script source you should insert a link to jsxgraphcore.js file, so 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.6/jsxgraphcore.js

Adjusting point size

Use option Point size to change point sizes for all the points used in image as you want points sizes 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

Selection Label alignment 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.

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.

Draw axis

If yes draws axis to the board.

Inputting commands and operations as a JSP comment

There is a possibility to modify your JXG code by adding specified comment lines in original JSP code. In this way you can set attributes of specific element in JXG image by modifying your original JSP so that the functionality of original code wont be changed. You can also add elements that are not defined in JSP code to your JXG image.

JSP comments are inserted between curly brackets

{ JSP comment here }
. A commands inserted as a comment always starts with a comma
{,arrowL}

Here is a list of commands that can be inserted as a comment:

- arrowL
- arrowF
- snapToGrid
- psize
- label
- text
- latex
- labelAlign
- showInfoBox
- attVisible
- highlight
- dash
- locus
- setAttribute (not supported yet)
- jxg (not supported yet)
Open a list of all {,dot} commands in pdf (in finnish)

Comment must be placed right after the element it refers to.

Board name and element id given as JSP comment

You can input unique board name and element id as a comment in JSP code. Input board name with title 'JSX board name' and element id 'JSX element id'. Below you can see examples how to type these values.

{ JSX board name: Exmaple_board_01 }
{ JSX element id: example_el_01 }
#CODEBASE = "../jsp"
#ARCHIVE = "jsp4.jar"
#WIDTH = 400
#HEIGHT= 420
#ALIGN=Left
*TextFont = "Helvetica"
*TextBold = 1
*TextSize = 18
*MeasureFont = "Courier"
*MeasureSize = 14
*MeasureBold = 1
*MeasureInDegrees = 1
*DirectedAngles = 0
*BackRed =250
*BackGreen =250
*BackBlue =250
$RO FixedPoint(200,400)[black,label('0')];
$Ref Translation($RO,25,0)[hidden];
$Ray Ray($Ref,$RO)[black, hidden];
...
{ JSX board name = Example_02 }
{ JSX element id = example_02 }
#CODEBASE = "../jsp"
#ARCHIVE = "jsp4.jar"
#WIDTH = 400
#HEIGHT= 420
#ALIGN=Left
*TextFont = "Helvetica"
*TextBold = 1
*TextSize = 18
*MeasureFont = "Courier"
*MeasureSize = 14
*MeasureBold = 1
*MeasureInDegrees = 1
*DirectedAngles = 0
*BackRed =250
*BackGreen =250
*BackBlue =250
$RO FixedPoint(200,400)[black,label('0')];
$Ref Translation($RO,25,0)[hidden];
$Ray Ray($Ref,$RO)[black, hidden];
...
{ JSX board name Example_03 }
{ JSX element id example_03 }
#CODEBASE = "../jsp"
#ARCHIVE = "jsp4.jar"
#WIDTH = 400
#HEIGHT= 420
#ALIGN=Left
*TextFont = "Helvetica"
*TextBold = 1
*TextSize = 18
*MeasureFont = "Courier"
*MeasureSize = 14
*MeasureBold = 1
*MeasureInDegrees = 1
*DirectedAngles = 0
*BackRed =250
*BackGreen =250
*BackBlue =250
$RO FixedPoint(200,400)[black,label('0')];
$Ref Translation($RO,25,0)[hidden];
$Ray Ray($Ref,$RO)[black, hidden];
...

You can also write names inside same comment brackets

{ JSX board name: Example_03, JSX element id: example_03 }
...

Arrow to line (arrowL and arrowF)

This attribute draws an arrow to a line.

'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} Point(10,10)[black];
{2} Point(60,60)[black];
{3} Segment(1,2)[black];
{,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 can be drawn to following objects:
- Line
- Perpendicular
- Parallel
- Segment
- Ray

Snap to grid (snapToGrid)

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 set by adding command snapToGrid as a comment after a point, as in example below:

{1} Point(200,200)[label('A')];
{,snapToGrid}

Snap to grid works with following objects:

- Point
- Point on object

Point size (psize)

You can modify size of a single point(s) using command psize. This will override the point size selection from the options panel for the points it is set to.

E.g.

{1} Point(200,200)[label('A')];
{,psize(7)}

will change the size of point on line {1} to 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)
- Translations (if is translation of a point)

Label ( label() )

You can replace label defined in JSP code by using ,-command label().

For example

{1} Point(200,200)[label('u')];
{,label(' \\mathbf{u} ')}

will replace label 'u' with label '\\mathbf{u}' (for LaTeX typing). You can also use this command to input label for an element that has no label defined on JSP code.

Below is an example where point is given a label 'x' using ,-command.

{1} Point(200,200)[black];
{,label('x')}

Text ( text() )

You can replace text defined in JSP code by using ,-command text().

For example

{1} FixedText(10,10,'a')[black];
{,text('b')}

changes text 'a' to 'b', and

{1} FixedText(50,50,'R')[black];
{,text(' \\'+'( \\mathbf{R} \\'+')')}

will replace text 'R' with label ' \\'+'( \\mathbf{R} \\'+')' (so LaTeX typing can be used here).

Below is an example where point is given a label 'x' using ,-command.

{,text} can be used to change the text of the following elements

FixedText
Buttons
Measurements

Latex ( latex() )

You can replace FixedText defined in JSP code with LaTeX typing by using ,-command latex().

For example

{1} FixedText(50,50,'R')[black];
{,latex(\\mathbf{R})}

will replace text 'R' with label '\\mathbf{R}' and it will be inserted between latex brackets '\( \)' automatically.

Label alignment (labelAlignment())

If specified alignment for single point is wanted, it needs to be put in by using command labelAlign() to the sketch-code.

Here is an example

{1} Point(200,200)[label('A'];
{,labelAlign(-10,10)}

Here -10 is the x-offset, and 10 is y-offset.

Coordinates visibility (showInfoBox)

If you want to show infobox of some object(s) but not all of them, you can do this by using command showInfoBox as a JSP comment. This will override option chosen from options menu.

For example,

{1} Point(200,200)[label('A')];
{,showInfoBox}

will show the infobox of point defined on line {1}.

Attribute visible instead of hideElement (attVisible)

As a default converter uses a method .hideElement() to hide JXG elements that are set 'hidden' in JSP code. This might be problem sometimes. For example, when two parallel lines in JXG image are dragged to intersect and we have defined some other elements in relation to that appearing intersect point, those elements might not display correctly. This can usually be solved by setting those elements visibility by JXG attribute 'visible' instead of .hideElement(). You can change a single element visibility attribute by commant {,attVisible}.

For example

{1} Point(200,200)[label('A'), hidden];
{,attVisible}

Highlight objects (highlight)

As a default all the element highlighting is turned off in JXG code. If you want to highlight element(s) (so that when user touches an element it will be highlighted), you can use command {,highlight}

For example

{1} Point(200,200)[label('A')];
{,highlight}

Dashed lines (dash)

To use dashed line style, you can use command {dash(value)}, where value is an integer between 0 and 6.

For example

...
{3} Line(1,2)[blue];
{,dash(2)}

will draw a line with small dashes.

Effect of the different values (http://jsxgraph.uni-bayreuth.de/wiki/index.php/Line):
0: solid line
1: dotted line
2: line with small dashes
3: line with normal dashes
4: line with long dashes
5: line with alternating medium and big dashes and large gaps
6: line with alternating medium and big dashes and small gaps

Replace locus (locus#)

There is a possibility to replace Locus command in case it works slowly or if Locus is not working at all (there is big differences in locus operation between JSP and JXG). This command replaces Locus with JXG command functiongraph.

Using command locusR you can replace your original Locus. The syntax of this command is

{,locus#(jxg functiongraph, {attributes of the element in JXG form})#}

Below is an example of replacing locus in image

{93} Locus(91,86,85,10)[blue, layer(10), hidden];
{,locus# ( [function(x){return (@37@.Y() + @37@.Dist(@40@) * Math.sin(1/@37@.Dist(@40@) * (x - Math.PI/2)));},function(){return @45@.X()},function(){return @45@.X() + @62@.Dist(@45@)}],{strokeColor:'blue', visible:false} ) # }

JSP elements can be referred by using their line number between at (@) signs like in example above, or when using $JSP typing elements variable name between at (@) signs.

Setting JXG attributes of the element (setAttribute)

Not supported yet.

Adding JXG object (jxg)

Not supported yet.

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:
- Operation 'Calculate' is restricted to only have 10 variables (A, B, C, D, E, F, G, H, I, J) in use.

About

help file updated 13.03.2018
Link to Sebastian Lisken's JSP Tutorial