Subversion Repositories wimsdev

<input type='text' size='10' value='' id='search'  onkeydown='javascripts:if(event.keyCode == 13){look();}'/><input type='button' onclick='javascript:look();' value='search' />

<h2 style=text-align:center>Implemented canvasdraw commands (22-09-2017)</h2>

<table style='color:blue;font-size:0.8em;'><tr>

<td><a name='canvasdraw top' href='#canvasdraw'>canvasdraw</a></td>

<td><a name='affine top' href='#affine'>affine</a></td>

<td><a name='angle top' href='#angle'>angle</a></td>

<td><a name='animate top' href='#animate'>animate</a></td>

<td><a name='arc top' href='#arc'>arc</a></td>

<td><a name='arrow top' href='#arrow'>arrow</a></td>

<td><a name='vector top' href='#arrow'>vector</a></td>

<td><a name='arrows top' href='#arrows'>arrows</a></td>

<td><a name='vectors top' href='#arrows'>vectors</a></td>

</tr><tr>

<td><a name='arrow2 top' href='#arrow2'>arrow2</a></td>

<td><a name='arrows2 top' href='#arrows2'>arrows2</a></td>

<td><a name='arrowhead top' href='#arrowhead'>arrowhead</a></td>

<td><a name='audio top' href='#audio'>audio</a></td>

<td><a name='axisnumbering top' href='#axisnumbering'>axisnumbering</a></td>

<td><a name='axis top' href='#axis'>axis</a></td>

<td><a name='barchart top' href='#barchart'>barchart</a></td>

<td><a name='bezier top' href='#bezier'>bezier</a></td>

<td><a name='bgcolor top' href='#bgcolor'>bgcolor</a></td>

</tr><tr>

<td><a name='bgimage top' href='#bgimage'>bgimage</a></td>

<td><a name='blink top' href='#blink'>blink</a></td>

<td><a name='boxplot top' href='#boxplot'>boxplot</a></td>

<td><a name='boxplotdata top' href='#boxplotdata'>boxplotdata</a></td>

<td><a name='canvastype top' href='#canvastype'>canvastype</a></td>

<td><a name='centerstring top' href='#centerstring'>centerstring</a></td>

<td><a name='circle top' href='#circle'>circle</a></td>

<td><a name='circles top' href='#circles'>circles</a></td>

<td><a name='disks top' href='#circles'>disks</a></td>

</tr><tr>

<td><a name='clearbutton top' href='#clearbutton'>clearbutton</a></td>

<td><a name='delete top' href='#clearbutton'>delete</a></td>

<td><a name='erase top' href='#clearbutton'>erase</a></td>

<td><a name='clock top' href='#clock'>clock</a></td>

<td><a name='colorpalette top' href='#colorpalette'>colorpalette</a></td>

<td><a name='copy top' href='#copy'>copy</a></td>

<td><a name='copyresized top' href='#copyresized'>copyresized</a></td>

<td><a name='crosshair top' href='#crosshair'>crosshair</a></td>

<td><a name='crosshairs top' href='#crosshairs'>crosshairs</a></td>

</tr><tr>

<td><a name='crosshairsize top' href='#crosshairsize'>crosshairsize</a></td>

<td><a name='cursor top' href='#cursor'>cursor</a></td>

<td><a name='pointer top' href='#cursor'>pointer</a></td>

<td><a name='curve top' href='#curve'>curve</a></td>

<td><a name='dashed top' href='#dashed'>dashed</a></td>

<td><a name='dashtype top' href='#dashtype'>dashtype</a></td>

<td><a name='diamondfill top' href='#diamondfill'>diamondfill</a></td>

<td><a name='dotfill top' href='#dotfill'>dotfill</a></td>

<td><a name='drag top' href='#drag'>drag</a></td>

</tr><tr>

<td><a name='ellipse top' href='#ellipse'>ellipse</a></td>

<td><a name='fillall top' href='#fillall'>fillall</a></td>

<td><a name='filled top' href='#filled'>filled</a></td>

<td><a name='fillcolor top' href='#fillcolor'>fillcolor</a></td>

<td><a name='fillpattern top' href='#fillpattern'>fillpattern</a></td>

<td><a name='filltoborder top' href='#filltoborder'>filltoborder</a></td>

<td><a name='floodfill top' href='#floodfill'>floodfill</a></td>

<td><a name='fill top' href='#floodfill'>fill</a></td>

<td><a name='fontcolor top' href='#fontcolor'>fontcolor</a></td>

</tr><tr>

<td><a name='fontfamily top' href='#fontfamily'>fontfamily</a></td>

<td><a name='fontsize top' href='#fontsize'>fontsize</a></td>

<td><a name='functionlabel top' href='#functionlabel'>functionlabel</a></td>

<td><a name='grid top' href='#grid'>grid</a></td>

<td><a name='gridfill top' href='#gridfill'>gridfill</a></td>

<td><a name='demiline top' href='#demiline'>demiline</a></td>

<td><a name='halfline top' href='#demiline'>halfline</a></td>

<td><a name='demilines top' href='#demilines'>demilines</a></td>

<td><a name='halflines top' href='#demilines'>halflines</a></td>

</tr><tr>

<td><a name='hatchfill top' href='#hatchfill'>hatchfill</a></td>

<td><a name='hline top' href='#hline'>hline</a></td>

<td><a name='horizontalline top' href='#hline'>horizontalline</a></td>

<td><a name='hlines top' href='#hlines'>hlines</a></td>

<td><a name='horizontallines top' href='#hlines'>horizontallines</a></td>

<td><a name='http top' href='#http'>http</a></td>

<td><a name='html top' href='#html'>html</a></td>

<td><a name='imagefill top' href='#imagefill'>imagefill</a></td>

<td><a name='inputstyle top' href='#inputstyle'>inputstyle</a></td>

</tr><tr>

<td><a name='input top' href='#input'>input</a></td>

<td><a name='intooltip top' href='#intooltip'>intooltip</a></td>

<td><a name='jscurve top' href='#jscurve'>jscurve</a></td>

<td><a name='jsplot top' href='#jscurve'>jsplot</a></td>

<td><a name='jsmath top' href='#jsmath'>jsmath</a></td>

<td><a name='killaffine top' href='#killaffine'>killaffine</a></td>

<td><a name='killrotate top' href='#killrotate'>killrotate</a></td>

<td><a name='killslider top' href='#killslider'>killslider</a></td>

<td><a name='killtranslation top' href='#killtranslation'>killtranslation</a></td>

</tr><tr>

<td><a name='killtranslate top' href='#killtranslation'>killtranslate</a></td>

<td><a name='line top' href='#line'>line</a></td>

<td><a name='lines top' href='#lines'>lines</a></td>

<td><a name='linewidth top' href='#linewidth'>linewidth</a></td>

<td><a name='lattice top' href='#lattice'>lattice</a></td>

<td><a name='levelcurve top' href='#levelcurve'>levelcurve</a></td>

<td><a name='legend top' href='#legend'>legend</a></td>

<td><a name='legendcolors top' href='#legendcolors'>legendcolors</a></td>

<td><a name='linegraph top' href='#linegraph'>linegraph</a></td>

</tr><tr>

<td><a name='mathml top' href='#mathml'>mathml</a></td>

<td><a name='mouse top' href='#mouse'>mouse</a></td>

<td><a name='mouse_degree top' href='#mouse_degree'>mouse_degree</a></td>

<td><a name='display top' href='#display'>display</a></td>

<td><a name='precision top' href='#precision'>precision</a></td>

<td><a name='mousex top' href='#mousex'>mousex</a></td>

<td><a name='mousey top' href='#mousey'>mousey</a></td>

<td><a name='multidash top' href='#multidash'>multidash</a></td>

<td><a name='multidraw top' href='#multidraw'>multidraw</a></td>

</tr><tr>

<td><a name='multilabel top' href='#multilabel'>multilabel</a></td>

<td><a name='multilinewidth top' href='#multilinewidth'>multilinewidth</a></td>

<td><a name='multifill top' href='#multifill'>multifill</a></td>

<td><a name='multifillcolors top' href='#multifillcolors'>multifillcolors</a></td>

<td><a name='multifillopacity top' href='#multifillopacity'>multifillopacity</a></td>

<td><a name='multisnaptogrid top' href='#multisnaptogrid'>multisnaptogrid</a></td>

<td><a name='multistrokecolors top' href='#multistrokecolors'>multistrokecolors</a></td>

<td><a name='multistrokeopacity top' href='#multistrokeopacity'>multistrokeopacity</a></td>

<td><a name='multiuserinput top' href='#multiuserinput'>multiuserinput</a></td>

</tr><tr>

<td><a name='noaxis top' href='#noaxis'>noaxis</a></td>

<td><a name='noayis top' href='#noayis'>noayis</a></td>

<td><a name='numberline top' href='#numberline'>numberline</a></td>

<td><a name='opacity top' href='#opacity'>opacity</a></td>

<td><a name='transparent top' href='#opacity'>transparent</a></td>

<td><a name='onclick top' href='#onclick'>onclick</a></td>

<td><a name='parallel top' href='#parallel'>parallel</a></td>

<td><a name='plotsteps top' href='#plotsteps'>plotsteps</a></td>

<td><a name='point top' href='#point'>point</a></td>

</tr><tr>

<td><a name='points top' href='#points'>points</a></td>

<td><a name='poly top' href='#poly'>poly</a></td>

<td><a name='polyline top' href='#polyline'>polyline</a></td>

<td><a name='popup top' href='#popup'>popup</a></td>

<td><a name='protractor top' href='#protractor'>protractor</a></td>

<td><a name='pixels top' href='#pixels'>pixels</a></td>

<td><a name='pixelsize top' href='#pixelsize'>pixelsize</a></td>

<td><a name='piechart top' href='#piechart'>piechart</a></td>

<td><a name='rays top' href='#rays'>rays</a></td>

</tr><tr>

<td><a name='rect top' href='#rect'>rect</a></td>

<td><a name='rects top' href='#rects'>rects</a></td>

<td><a name='replyformat top' href='#replyformat'>replyformat</a></td>

<td><a name='roundrect top' href='#roundrect'>roundrect</a></td>

<td><a name='roundrects top' href='#roundrects'>roundrects</a></td>

<td><a name='ruler top' href='#ruler'>ruler</a></td>

<td><a name='resetoffset top' href='#resetoffset'>resetoffset</a></td>

<td><a name='rotate top' href='#rotate'>rotate</a></td>

<td><a name='rotationcenter top' href='#rotationcenter'>rotationcenter</a></td>

</tr><tr>

<td><a name='size top' href='#size'>size</a></td>

<td><a name='segment top' href='#segment'>segment</a></td>

<td><a name='seg top' href='#segment'>seg</a></td>

<td><a name='segments top' href='#segments'>segments</a></td>

<td><a name='segs top' href='#segments'>segs</a></td>

<td><a name='setlimits top' href='#setlimits'>setlimits</a></td>

<td><a name='setpixel top' href='#setpixel'>setpixel</a></td>

<td><a name='slider top' href='#slider'>slider</a></td>

<td><a name='sliderfunction_x top' href='#sliderfunction_x'>sliderfunction_x</a></td>

</tr><tr>

<td><a name='sliderfunction_y top' href='#sliderfunction_y'>sliderfunction_y</a></td>

<td><a name='sgraph top' href='#sgraph'>sgraph</a></td>

<td><a name='snaptofunction top' href='#snaptofunction'>snaptofunction</a></td>

<td><a name='snaptofun top' href='#snaptofunction'>snaptofun</a></td>

<td><a name='snaptopoints top' href='#snaptopoints'>snaptopoints</a></td>

<td><a name='snaptogrid top' href='#snaptogrid'>snaptogrid</a></td>

<td><a name='square top' href='#square'>square</a></td>

<td><a name='status top' href='#status'>status</a></td>

<td><a name='string top' href='#string'>string</a></td>

</tr><tr>

<td><a name='stringup top' href='#stringup'>stringup</a></td>

<td><a name='highlight top' href='#highlight'>highlight</a></td>

<td><a name='strokecolor top' href='#strokecolor'>strokecolor</a></td>

<td><a name='text top' href='#text'>text</a></td>

<td><a name='textarea top' href='#textarea'>textarea</a></td>

<td><a name='textfill top' href='#textfill'>textfill</a></td>

<td><a name='textup top' href='#textup'>textup</a></td>

<td><a name='trace_jscurve top' href='#trace_jscurve'>trace_jscurve</a></td>

<td><a name='trange top' href='#trange'>trange</a></td>

</tr><tr>

<td><a name='ranget top' href='#trange'>ranget</a></td>

<td><a name='translation top' href='#translation'>translation</a></td>

<td><a name='translate top' href='#translation'>translate</a></td>

<td><a name='triangle top' href='#triangle'>triangle</a></td>

<td><a name='triangles top' href='#triangles'>triangles</a></td>

<td><a name='userboxplot top' href='#userboxplot'>userboxplot</a></td>

<td><a name='userboxplotdata top' href='#userboxplotdata'>userboxplotdata</a></td>

<td><a name='userdraw top' href='#userdraw'>userdraw</a></td>

<td><a name='userinput top' href='#userinput'>userinput</a></td>

</tr><tr>

<td><a name='userinput_function top' href='#userinput'>userinput_function</a></td>

<td><a name='userinput_textarea top' href='#userinput'>userinput_textarea</a></td>

<td><a name='userinput_xy top' href='#userinput'>userinput_xy</a></td>

<td><a name='userinput_xy top' href='#userinput_xy'>userinput_xy</a></td>

<td><a name='userinput_function top' href='#userinput_function'>userinput_function</a></td>

<td><a name='usertextarea_xy top' href='#usertextarea_xy'>usertextarea_xy</a></td>

<td><a name='vline top' href='#vline'>vline</a></td>

<td><a name='verticalline top' href='#vline'>verticalline</a></td>

<td><a name='vlines top' href='#vlines'>vlines</a></td>

</tr><tr>

<td><a name='verticallines top' href='#vlines'>verticallines</a></td>

<td><a name='video top' href='#video'>video</a></td>

<td><a name='xaxis top' href='#xaxis'>xaxis</a></td>

<td><a name='xaxistext top' href='#xaxis'>xaxistext</a></td>

<td><a name='xaxisup top' href='#xaxisup'>xaxisup</a></td>

<td><a name='xaxistextup top' href='#xaxisup'>xaxistextup</a></td>

<td><a name='xerrorbars top' href='#xerrorbars'>xerrorbars</a></td>

<td><a name='xrange top' href='#xrange'>xrange</a></td>

<td><a name='rangex top' href='#xrange'>rangex</a></td>

</tr><tr>

<td><a name='xsnaptogrid top' href='#xsnaptogrid'>xsnaptogrid</a></td>

<td><a name='xoffset top' href='#xoffset'>xoffset</a></td>

<td><a name='xyoffset top' href='#xyoffset'>xyoffset</a></td>

<td><a name='xunit top' href='#xunit'>xunit</a></td>

<td><a name='xlabel top' href='#xlabel'>xlabel</a></td>

<td><a name='xlogbase top' href='#xlogbase'>xlogbase</a></td>

<td><a name='xlogscale top' href='#xlogscale'>xlogscale</a></td>

<td><a name='xylogscale top' href='#xylogscale'>xylogscale</a></td>

<td><a name='yaxis top' href='#yaxis'>yaxis</a></td>

</tr><tr>

<td><a name='yerrorbars top' href='#yerrorbars'>yerrorbars</a></td>

<td><a name='yoffset top' href='#yoffset'>yoffset</a></td>

<td><a name='yrange top' href='#yrange'>yrange</a></td>

<td><a name='rangey top' href='#yrange'>rangey</a></td>

<td><a name='ysnaptogrid top' href='#ysnaptogrid'>ysnaptogrid</a></td>

<td><a name='ylabel top' href='#ylabel'>ylabel</a></td>

<td><a name='ylogbase top' href='#ylogbase'>ylogbase</a></td>

<td><a name='ylogscale top' href='#ylogscale'>ylogscale</a></td>

<td><a name='yunit top' href='#yunit'>yunit</a></td>

</tr><tr>

<td><a name='zoom top' href='#zoom'>zoom</a></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr></table>

<ul>

<li><a name='canvasdraw' href='#canvasdraw top'>  canvasdraw</a><ul>

<li><span style="color:blue;font-size:0.8em"> will try use the same syntax as flydraw or svgdraw to paint a html5 bitmap image<br />by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job.<br />thus ensuring a minimal strain on the client browser <br />(unlike some popular 'canvas-do-it-all' libraries, who have proven to be not suitable for low-end computers found in schools...)

</span></li>

<li><span style="color:blue;font-size:0.8em"> general syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">'opacity [0-255],[0,255]'</a></il><li>line width of any object can be controlled by command <a href="#linewidth">'linewidth int'</a></li><li>any may be dashed by using keyword <a href="#dashed">'dashed'</a> before the object command.<br />the dashing type can be controled by command <a href="#dashtype">'dashtype int,int'</a></li><li>a fillable object can be set fillable by starting the object command with an 'f'<br />(like frect,fcircle,ftriangle...)<br />or by using the keyword <a href="#filled">'filled'</a> before the object command.<br />The fill colour of 'non_userdraw' objects will be the stroke colour...(flydraw harmonization 19/10/2013)<br />non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a><br />for <a href="#filltoborder">filltoborder x0,y0,color</a> or <a href="#filltoborder">fill x0,y0,color</a> type filling (eg fill a region around x0,y0 with color until a border is encountered),<br />there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>all draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li> <li> a draggable object can be set draggable by a preceding command <a href="#drag">'drag x/y/xy'</a><br />The translation can be read by javascript:read_dragdrop();The replyformat is : object_number : x-orig : y-orig : x-drag : y-drag<br />The x-orig/y-orig will be returned in maximum precision (javascript float)...<br />the x-drag/y-drag will be returned in defined 'precision' number of decimals<br />Multiple objects may be set draggable / clickable (no limit)<br /> not all flydraw objects may be dragged / clicked<br />Only draggable / clickable objects will be scaled on <a href="#zoom">zoom</a> and will be translated in case of panning</li><li> a 'onclick object' can be set 'clickable' by the preceding keyword <a href="#onclick">'onclick'</a><br />not all flydraw objects can be set clickable</li><li><b>remarks using a ';' as command separator</b><br />commands with only numeric or colour arguments may be using a ';' as command separator (instead of a new line)<br />commands with a string argument may not use a ';' as command separator !<br />these exceptions are not really straight forward... so keep this in mind.</li><li>almost every <a href="#userdraw">"userdraw object,color"</a> or <a href="#multidraw">"multidraw"</a> command 'family' may be combined with keywords <a href="#snaptogrid">"snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command "snaptopoints x1,y1,x2,y2,..." </li><li>every draggable | onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command "snaptopoints x1,y1,x2,y2,..." </li><li>almost every command for a single object has a multiple objects counterpart:<br /><ul>general syntaxrule:<li><em>single_object</em> x1,y1,...,color</li><li><em>multi_object</em> color,x1,y1,...</li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#inputstyle">'inputstyle some_css'</a><br/>the fontsize used for labeling these elements can be controlled by command <a href="fontsize">'fontsize int'</a> <br />command 'fontfamily' is <b>not</b> active for these elements </li></ul>

</span></li>

<li><span style="color:blue;font-size:0.8em"> If needed multiple interactive scripts may be used in a single webpage.<br />A function 'read_canvas()' and / or 'read_dragdrop()' can read all interactive userdata from these images.<br />The global array 'canvas_scripts' will contain all unique random "canvas_root_id" of the included scripts.<br />The included local javascript "read" functions "read_canvas%d()" and "read_dragdrop%d()" will have this "%d = canvas_root_id"<br />e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function<br />fun = eval("read_canvas"+canvas_scripts[0]) to read user based drawings / inputfield in this first image.<br />The read_dragdrop is analogue.<br />If the default reply formatting is not suitable, use command <a href='#replyformat'>'replyformat'</a> to format the replies for an individual canvas script,<br />To read all user interactions from all included canvas scripts , use something like:<br /><em>function read_all_canvas_images(){<br />&nbsp;var script_len = canvas_scripts.length;<br />&nbsp;var draw_reply = "";<br />&nbsp;var found_result = false;<br />&nbsp;for(var p = 0 ; p < script_len ; p++){<br />&nbsp;&nbsp;var fun = eval("read_canvas"+canvas_scripts[p]);<br />&nbsp;&nbsp;if( typeof fun === 'function'){<br />&nbsp;&nbsp;&nbsp;var result = fun();<br />&nbsp;&nbsp;&nbsp;if( result&nbsp;&nbsp;&& result.length != 0){<br />&nbsp;&nbsp;&nbsp;&nbsp;if(script_len == 1 ){ return result;};<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;found_result = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_reply = draw_reply + result + "\n";<br />&nbsp;&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;};<br />&nbsp;if( found_result ){return draw_reply;}else{return null;};<br />};</em>

</span></li>

<li><span style="color:blue;font-size:0.8em"> you can check the javascript reply format in the wims tool <a href="http://localhost/wims/wims.cgi?lang=en&module=tool/directexec">direct exec</a>

</span></li>

<li><span style="color:blue;font-size:0.8em"> for usage within OEF (without anstype "draw"), something like this (a popup function plotter) will work:<br /><small>\text{popup_grapher=wims(exec canvasdraw <br />popup<br />size 400,400<br />xrange -10,10<br />yrange -10,10<br />axis<br />axisnumbering<br />opacity 100,100<br />grid 2,2,grey,2,2,6,black<br />snaptogrid<br />linewidth 2<br />jsplot red,5*sin(1/x)<br />strokecolor green<br />functionlabel f(x)=<br />userinput function<br />mouse blue,22<br />)<br />}<br />\statement{<br />\popup_grapher<br />}</small>

</span></li>

<li><span style="color:blue;font-size:0.8em"> be aware that older browsers will probably not work correctly<br />no effort has been undertaken to add glue code for older browsers !! <br />in any case it's not wise to use older browsers...not just for canvasdraw

</span></li>

<li><span style="color:blue;font-size:0.8em"> if you find flaws, errors or other incompatibilities -not those mentioned in this document- send <a href='mailto:jm.evers-at-schaersvoorde.nl'>me</a> an email with screenshots and the generated javascript include file.

</span></li>

<li><span style="color:blue;font-size:0.8em"> there is limited support for touch devices : touchstart,touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#protractor">protractor</a> and <a href="#ruler">ruler</a><br />only single finger gestures are supported (for now)<br />for more accurate user-interaction with canvasdraw on touch devices: use the command family <a href="userinput_xy">userinput</a>

</span></li>

</ul>

<li><a name='affine' href='#affine top'>  affine a,b,c,d,tx,ty</a><ul>

<li><span style="color:blue;font-size:0.8em"> defines a transformation matrix for subsequent objects

</span></li>

<li><span style="color:blue;font-size:0.8em"> images drawn by setting skew params a &amp; d will be very different from Flydraw's "affine a,b,c,d,e,tx,ty" !!

</span></li>

<li><span style="color:blue;font-size:0.8em"> use keyword 'killaffine' to end the transformation

</span></li>

<li><span style="color:blue;font-size:0.8em"> note 1: only 'draggable' / 'noclick' objects can be transformed.

</span></li>

<li><span style="color:blue;font-size:0.8em"> note 2: do not use 'onclick' or 'drag xy' with tranformation objects : the mouse coordinates do not get transformed (yet)

</span></li>

<li><span style="color:blue;font-size:0.8em"> note 3: no matrix operations on the transformation matrix implemented (yet)

</span></li>

<li><span style="color:blue;font-size:0.8em"> a : Scales the drawings horizontally

</span></li>

<li><span style="color:blue;font-size:0.8em"> b : Skews the drawings horizontally

</span></li>

<li><span style="color:blue;font-size:0.8em"> c : Skews the drawings vertically

</span></li>

<li><span style="color:blue;font-size:0.8em"> d : Scales the drawings vertically

</span></li>

<li><span style="color:blue;font-size:0.8em"> tx: Moves the drawings horizontally in xrange coordinate system

</span></li>

<li><span style="color:blue;font-size:0.8em"> ty: Moves the drawings vertically in yrange coordinate system

</span></li>

<li><span style="color:blue;font-size:0.8em"> the data precision may be set by preceding command "precision int"

</span></li>

</ul>

<li><a name='angle' href='#angle top'>  angle xc,yc,width,start_angle,end_angle,color</a><ul>

<li><span style="color:blue;font-size:0.8em"> width is in x-range

</span></li>

<li><span style="color:blue;font-size:0.8em"> will zoom in/out

</span></li>

<li><span style="color:blue;font-size:0.8em"> if size is controlled by command <a href='#slider'>'slider'</a> use radians to set limits of slider.

</span></li>

</ul>

<li><a name='animate' href='#animate top'>  animate</a><ul>

<li><span style="color:blue;font-size:0.8em"> keyword

</span></li>

<li><span style="color:blue;font-size:0.8em"> the animated point is a filled rectangle ; adjust colour with command 'fillcolor colorname/hexnumber'

</span></li>

<li><span style="color:blue;font-size:0.8em"> use linewidth to adjust size of the points

</span></li>

<li><span style="color:blue;font-size:0.8em"> will animate a point on the next jsplot/jscurve command

</span></li>

<li><span style="color:blue;font-size:0.8em"> only usable for command jsplot (normal functions or parametric)

</span></li>

<li><span style="color:blue;font-size:0.8em"> moves repeatedly from xmin to xmax or incase of a parametric function from tmin to tmax (set trange)

</span></li>

</ul>

<li><a name='arc' href='#arc top'>  arc xc,yc,width,height,start_angle,end_angle,color</a><ul>

<li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set "onclick" or "drag xy"

</span></li>

<li><span style="color:blue;font-size:0.8em"> <b>attention</b>: width in height in x/y-range

</span></li>

<li><span style="color:blue;font-size:0.8em"> will not zoom in or zoom out (because radius is given in pixels an not in x/y-system !). Panning will work

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href='#angle'>'angle'</a> for scalable angle

</span></li>

</ul>

<li><a name='arrow' href='#arrow top'>  arrow x1,y1,x2,y2,h,color</a><ul>

<li><span style="color:blue;font-size:0.8em">alternative command:<a name='vector' href='#vector top'>vector</a></span></li>

<li><span style="color:blue;font-size:0.8em"> draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color 'color'

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrow

</span></li>

<li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>

</span></li>

</ul>

<li><a name='arrows' href='#arrows top'>  arrows color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>

<li><span style="color:blue;font-size:0.8em">alternative command:<a name='vectors' href='#vectors top'>vectors</a></span></li>

<li><span style="color:blue;font-size:0.8em"> draw single headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrow

</span></li>

<li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually

</span></li>

</ul>

<li><a name='arrow2' href='#arrow2 top'>  arrow2 x1,y1,x2,y2,h,color</a><ul>

<li><span style="color:blue;font-size:0.8em"> draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color 'color'

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command 'arrowhead int' to adjust the arrow head size

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrow

</span></li>

<li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>

</span></li>

</ul>

<li><a name='arrows2' href='#arrows2 top'>  arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>

<li><span style="color:blue;font-size:0.8em"> draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command 'linewidth int' to adjust thickness of the arrows

</span></li>

<li><span style="color:blue;font-size:0.8em"> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually

</span></li>

</ul>

<li><a name='arrowhead' href='#arrowhead top'>  arrowhead int</a><ul>

<li><span style="color:blue;font-size:0.8em"> default 8 (pixels)

</span></li>

</ul>

<li><a name='audio' href='#audio top'>  audio x,y,w,h,loop,visible,audiofile location</a><ul>

<li><span style="color:blue;font-size:0.8em"> x,y : left top corner of audio element (in xrange / yrange)

</span></li>

<li><span style="color:blue;font-size:0.8em"> w,y : width and height in pixels

</span></li>

<li><span style="color:blue;font-size:0.8em"> loop : 0 or 1 ( 1 = loop audio fragment)

</span></li>

<li><span style="color:blue;font-size:0.8em"> visible : 0 or 1 (1 = show controls)

</span></li>

<li><span style="color:blue;font-size:0.8em"> audio format may be in *.mp3 or *.ogg

</span></li>

<li><span style="color:blue;font-size:0.8em"> If you are using *.mp3 : be aware that FireFox will not (never) play this ! (Pattented format)

</span></li>

<li><span style="color:blue;font-size:0.8em"> if you are using *.ogg : be aware that Microsoft based systems not support it natively

</span></li>

<li><span style="color:blue;font-size:0.8em"> To avoid problems supply both types (mp3 and ogg) of audiofiles.<br />the program will use both as source tag

</span></li>

<li><span style="color:blue;font-size:0.8em"> example: upload both audio1.ogg and audio1.mp3 to http://server/files/<br />audio 0,0,http://server/files/audio1.mp3<br />svdraw will copy html-tag audio1.mp3 to audio1.ogg<br /> and the browser will play the compatible file (audio1.ogg or audio1.mp3)<br />

</span></li>

</ul>

<li><a name='axisnumbering' href='#axisnumbering top'>  axisnumbering</a><ul>

<li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)

</span></li>

<li><span style="color:blue;font-size:0.8em"> for special numbering of x-axis or y-axis see grid related commands <a href="#axis">axis</a> <a href="#xaxis">xaxis</a> , <a href="#xaxisup">xaxisup</a>, <a href="#noxaxis">noxaxis</a> ,<a href="#yaxis">yaxis</a> , <a href="#yaxisup">yaxisup</a>, <a href="#noyaxis">noyaxis</a>

</span></li>

<li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)

</span></li>

</ul>

<li><a name='axis' href='#axis top'>  axis</a><ul>

<li><span style="color:blue;font-size:0.8em"> keyword (no arguments required)

</span></li>

<li><span style="color:blue;font-size:0.8em"> to be used before command grid (see <a href="#grid">command grid</a>)

</span></li>

</ul>

<li><a name='barchart' href='#barchart top'>  barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n</a><ul>

<li><span style="color:blue;font-size:0.8em"> may <b>only</b> to be used together with command <a href='#grid'>'grid'</a>

</span></li>

<li><span style="color:blue;font-size:0.8em"> can be used together with freestyle x-axis/y-axis texts : see commands <a href='#xaxis'>'xaxis'</a>,<a href='#xaxisup'>'xaxisup'</a> and <a href='#yaxis'>'yaxis'</a>

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href='#legend'>'legend'</a> to provide an optional legend in right-top-corner

</span></li>

<li><span style="color:blue;font-size:0.8em"> multiple barchart command may be used in a single script

</span></li>

<li><span style="color:blue;font-size:0.8em"> also see command <a href='#piechart'>'piechart'</a>

</span></li>

<li><span style="color:blue;font-size:0.8em"> note: your arguments are not checked by canvasdraw : use your javascript console in case of trouble...

</span></li>

</ul>

<li><a name='bezier' href='#bezier top'>  bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end</a><ul>

<li><span style="color:blue;font-size:0.8em"> draw a bezier curve between points, starting from (x_start:y_start)

</span></li>

<li><span style="color:blue;font-size:0.8em"> can <b>not</b> be dragged or set onclick

</span></li>

</ul>

<li><a name='bgcolor' href='#bgcolor top'>  bgcolor colorname or #hex</a><ul>

<li><span style="color:blue;font-size:0.8em"> use this color as background of the "div" containing the canvas(es)

</span></li>

</ul>

<li><a name='bgimage' href='#bgimage top'>  bgimage image_location</a><ul>

<li><span style="color:blue;font-size:0.8em"> use an image as background .<br />technical: we use the background of 'canvas_div'

</span></li>

<li><span style="color:blue;font-size:0.8em"> the background image will be resized to match "width = xsize" and "height = ysize"

</span></li>

</ul>

<li><a name='blink' href='#blink top'>  blink time(seconds)</a><ul>

<li><span style="color:blue;font-size:0.8em"> NOT IMPLEMETED -YET

</span></li>

</ul>

<li><a name='boxplot' href='#boxplot top'>  boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max</a><ul>

<li><span style="color:blue;font-size:0.8em"> example:<br />xrange 0,300<br />yrange 0,10<br />boxplot x,4,8,120,160,170,220,245<br />meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8

</span></li>

<li><span style="color:blue;font-size:0.8em"> example:<br />xrange 0,10<br />yrange 0,300<br />boxplot y,4,8,120,160,170,220,245<br />meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href='#filled'>'filled'</a> to fill the box<br /><b>note:</b> the strokecolor is used for filling Q1, the fillcolor is used for filling Q3

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href='#fillpattern'>'fillpattern some_pattern'</a> to use a (diamond for Q1, hatch for Q3) pattern.

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href='#opacity'>'opacity'</a> to adjust fill_opacity of stroke and fill colours

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href='#legend'>'legend'</a> to automatically create a legend <br />unicode allowed in legend<br />use command 'fontfamily' to set the font of the legend.

</span></li>

<li><span style="color:blue;font-size:0.8em"> there is no limit to the number of boxplots used.

</span></li>

<li><span style="color:blue;font-size:0.8em"> can <b>not</b> be set draggable (<a href='#onclick'>'onclick'</a> is not ready ,yet)

</span></li>

<li><span style="color:blue;font-size:0.8em"> use keyword <a href="#userboxplot">'userboxplot'</a> before command boxplot, if a pupil must draw a boxplot (using his own min,Q1,median,Q3,max data)

</span></li>

<li><span style="color:blue;font-size:0.8em"> use keyword <a href="#userboxplotdata">'userboxplotdata'</a> before command boxplot, if a pupil must generate the data by some means.

</span></li>

<li><span style="color:blue;font-size:0.8em"> use command <a href="#boxplotdata">'boxplotdata'</a> when the boxplot should be drawn from wims-generated raw statistical date

</span></li>

</ul>

<li><a name='boxplotdata' href='#boxplotdata top'>  boxplotdata some_data</a><ul>

<li><span style="color:blue;font-size:0.8em"> 'some_data' are a list of numbers separated by a comma "," (items)

</span></li>

<li><span style="color:blue;font-size:0.8em"> only be used before command 'boxplot': the command <a href="#boxplot">'boxplot'</a> will provide the boxplot drawing of the data.

</span></li>

<li><span style="color:blue;font-size:0.8em"> xrange 0,100<br />yrange 0,10<br />boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23<br />boxplot x,4,5