JavaSketchpad to JSXGraph

What is it?

JavaSketchpad to JSXGraph is a tool to convert JavaSketchpad (JSP) [http://www.dynamicgeometry.com/JavaSketchpad.html] code into JSXGraph code (JXG) [https://jsxgraph.uni-bayreuth.de/wp/index.html]. You can write/copy JSP code directly into the editable textarea, choose your settings and click 'Create JXG' button to execute convertion. Program then creates a preview of the converted image, and converted 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, such as point sizing or resize the original sketch by simply scaling it.

Program also converts [jsp.awk](https://www.math.uni-bielefeld.de/~lisken/jsp/") script ($ form JSP code) designed by Sebastian Lisken. Convertor outputs code in both JSXGraph and Java Sketchpad syntax.

There is also possibility to input some helpful attributes as comments in JSP code to modify your result JXG image. Since these attributes are given as JSP comments, they won't affect the functionality of the original JSP image. See Inputting commands and operations as a JSP comment for more information.

Conditions of the use

The JavaSketchpad-to-JSXGraph converter is property of the authors and the University of Eastern Finland, Department of Physics and Mathematics, and it is therefore eligble to the general conditions of e-materials of the Ministry of Education in Finland and EU. The JavaSketchpad-to-JSXGraph converter is free to use tool under UEF licence, in the hope it will be useful, but WITHOUT ANY WARRANTY.

Documentation

Open documentation from link below

http://cs.uef.fi/matematiikka/ABACUS/JavasketchpadToJSXgraph/doc/index.html

Table of contents:

• What is it?
• Conditions of the use
• Documentation

.................................

• Getting started
• Modifying convertion properties
• Board size, scaling and zooming
• Board and element name
• Source of the JSXGraph library
• Adjusting point size
• Label alignment
• Coordinates visibility
• LaTeX labels and texts
• Show grid]

• Axis visibility

• Inputting commands and operations as a JSP comment
• Board name and element id given as JSP comment
• Arrow to line arrowL and arrowF
• Snap to grid snapToGrid
• Point size psize
• Label label()
• Text text()
• Latex latex()
• Label alignment labelAlign()
• Coordinates visibility showInfoBox
• Attribute visible instead of hideElement attVisible
• Highlight objects highlight
• Dashed lines dash()

• Replace locus locus()

• Restrictions and errors
• Restrictions

• Errors

• Contact

• Useful links]

Getting started

Options menus are located in the top header. Here you can do adjustments to converted image and code output.

Left column is for inputting the JSP code. Here you should copy or write your JavaSketchpad code. 'Clear JSX' button clears the code and image (and all converted data) from right side. There are some example codes in dropmenu at the top of the codearea.

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

ui

Modifying conversion properties

Here is briefly explained some of the modifications you can set from the menus. There is also a tool tip for each option next to them. Tool tips open by placing cursor on top of the question mark.

Output options

These setting adjust the outcome of the converted code. Here are some options explained.

Clear trace button

Selection for Clear trace button. If Automatic' is selected, convertor is trying to recognize automatically if there should be Clear trace button added.

If 'Show' is selected Clear trace button is forced to be visible.

Selection 'Hide' will allways hide Clear trace button.

Style of the button can be chosen from few built in selections in ClearTrace style dropdown menu.

Source of the JSXGraph library

In input field Script source you should insert a link to jsxgraphcore.js file, so it will be added to converted JSXGraph code. This is for adding library in the converted codetext only, and does not affect the preview image. If this is empty, cloudflare repository will be used and added to code

//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js.

Table settings

Here you can modify table properties.

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.

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 JSXGraph image individual board name and element names in case if several JSX images will be placed on same HTML-page. If names are same, board ids and variable names used in them might cause some collisions.

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.

Object formats

These settings will affect the constructions in the JSXGraph image.

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.

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

Show object coordinates

If this is checked, infobox (coordinates) on top of the object will be shown when cursor is on top of the object.

If you want to show infobox for some object(s) but not all of them, you can do this by using command {,showInfoBox}. 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.

Buttons style

This menu is for setting styling properties of JSXGraph buttons.

Inputting commands and operations as a JSP comment

There is a possibility to modify your JSXGraph 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.

JSP comments are inserted between curly brackets { JSP comment here }.

These commands are inserted as a comment with comma as first char {,arrowL}

Here is a list of commands that can be inserted as a JSP 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

Snap to grid

Replace locus locus()

There is a possibility to replace Locus command in case it works slowly or if Locus is not working at all. Convertor creates locus as a JSXGraph tracecurve, and it might sometimes slow down or cause failure in convertor, especially if calculations for creating curve are timeconsuming. This command replaces Locus with JXG command functiongraph supplemented by user parameters.

Using command locus() you can replace your original Locus. The syntax of this command is

{,locus(function(x){return *some function*;}, *left interval border (optional)*, *right interval border (optional)* )}

Left and right interval borders can also be functions. 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})} ) }

JSP elements can be referred by using their line number (variable name) between {} brackets like in example above, or when using $JSP typing elements variable name normally like in JSP.

Restrictions and errors

Restrictions

At this moment convertor includes only constructions that are built in Java Sketchpad version 4 (jsp4). Most recent version of Java Sketchpad is 5.06. Here are listed those constructions that the translator does not yet support. However, the list is getting shorter all the time.

• These Applet invocation parameters are not supported yet, but will be
  • HSPACE and VSPACE not supported
  • Frame parameter
  • Font parameters
  • MeasureInDegrees parameter
  • PixelsPerLengthUnit parameter
  • Precision parameter parameter, although this can be set from convertor options
• These Applet invocation parameters are not and might never be supported, since they are quite needless to be used in convertor
  • CODE parameter
  • CODEBASE parameter
  • ARCHIVE parameter
  • Offscreen parameter
  • Construction parameter
  • Minimum grammar parameter
• These optionalFormats of an object (some only in jsp5) are not supported yet, but will be. Notice that some of these formats can be set by inputting value as JSP comment right after construction (see Inputting commands and operations as a JSP comment)
  • Line style formats, only thick is supported for now
  • Point style formats
  • Auto-start formats
  • Label formats
  • Layer formats
  • Image formats
  • Text style formats
  • Precision formats
• These legal constructions (some only in jsp5) are not supported yet, but will be.
  • PlotFixedXY (objRef1, num1, num2);
  • DriverPoint (num1, num2);
  • Bisector (objRef1, objRef2, objRef3);
  • PolarTranslation (objRef1, num1, num2);
  • Constructions that colorize geometric objects
    • Colorized_Spectrum (objRef1, objRef2, num1, num2, num3);
    • Colorized_Grayscale (objRef1, objRef2, num1, num2, num3);
    • Colorized_RGB (objRef1, objRef2,objRef3,objRef4, num1, num2, num3);
    • Colorized_HSV (objRef1, objRef2,objRef3,objRef4, num1, num2, num3);
  • ImageBetweenPoints (objRef1, objRef2, string);
  • Abscissa(objRef1, objRef2, numX, numY, string);
  • Ordinate(objRef1, objRef2, numX, numY, string);
  • CoordinateDistance(objRef1, objRef2, objRef3, numX, numY, string);
  • Parameter(initialValue, numX, numY, prefixStr);
  • ToggleVisibilityButton(numX, numY, string)(obj1, obj2 ... objN);
  • CoordSysByAxes(obj1, obj2);
  • Function(numX, numY, string, exprStr)(objRef1, ..., objRefN);
  • FunctionPlot (objRef1, objRef2, num1, num2, num3, num4);
  • PeggedText(objRef1, objRef2);
  • ConcatText(numX, numY)(objRef1, objRef2 ... objRefN);
• Macros are currently not working, but I'm also working on them.

Errors

Convertor outputs some detailed error messages, which unfortunately may sometimes be quite short. I'm improving the output mechanics for the errors constantly. To help you in the case of error, below are some of the most common causes for failed convertions, so when convertor doesn't work properly and error message is incomplete.

• Error description: Error name: Error. Error message: JSXGraph: Can't create line with parent types 'undefined' and 'undefined'.
  • Possible cause: There might be two variables with same line number or same name in your JSP code.
  • Solution: Rename variables.
• Error description: Error 7.
  • Possible cause: This indicates that there is one ore more macro functions in your code.
  • Solution: Remove macros, since they are not working currently.
• Error description: Application crash or jammig the browser
  • Possible cause: Most often this happens when there is a Locus constructor in JSP code that is too timeconsuming for JSXGraph to construct.
  • Solution: If you have Locus curves in your sketch, try first to locate if these cause the crash by removing or commenting these lines. In case Locus is the issue, try to replace them with dotcommand {,locus}
• Error description: No image and confusing error message.
  • Possible cause: Bug in convertor.
  • Solution: Contact me (htanska@uef.com), and report the problem as accurate as possible.

Contact

You can contact me via email, htanska@uef.fi

Useful links

• JSXGraph home page
• The Geometer's Sketchpad Resource Center
• Sebastian Lisken's JSP Tutorial
• University of Eastern Finland

This help file updated 27.11.2018