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.
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.
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 }
{,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)
Comment must be placed right after the element it refers to.
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.
You can also write names inside same comment brackets
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
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: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:
Snap to grid works with following objects:
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.
will change the size of point on line {1} to 7.
Point size affects to following objects:
label()
)You can replace label defined in JSP code by using ,-command label()
.
For example
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.
text()
)You can replace text defined in JSP code by using ,-command text()
.
For example
changes text 'a' to 'b', and
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
latex()
)You can replace FixedText defined in JSP code with LaTeX typing by using ,-command latex()
.
For example
will replace text 'R' with label '\\mathbf{R}' and it will be inserted between latex brackets '\( \)' automatically.
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
Here -10 is the x-offset, and 10 is y-offset.
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,
will show the infobox of point defined on line {1}
.
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
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
dash
)To use dashed line style, you can use command {dash(value)}
, where value
is an integer between 0 and 6.
For example
will draw a line with small dashes.
Effect of the different values (http://jsxgraph.uni-bayreuth.de/wiki/index.php/Line):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
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.
setAttribute
)Not supported yet.
jxg
)Not supported yet.