WebSVN – wimsdev – /trunk/wims/public_html/scripts/help/en/canvasdraw.phtml

<input type='text' size='10' value='' id='search' onkeydown='javascripts:if(event.keyCode == 13){look();}'/><input type='button' onclick='javascript:look();' value='search' />
<center><h3>Implemented canvasdraw commands (31-10-2016)</h3></center>
<table style='color:blue;font-size:0.8em;'><tr>
<td><a name='canvasdraw top' href='#canvasdraw'>canvasdraw</a></td>
<td><a name='size top' href='#size'>size</a></td>
<td><a name='xrange top' href='#xrange'>xrange</a></td>
<td><a name='rangex top' href='#xrange'>rangex</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='trange top' href='#trange'>trange</a></td>
<td><a name='ranget top' href='#trange'>ranget</a></td>
<td><a name='linewidth top' href='#linewidth'>linewidth</a></td>
</tr><tr>
<td><a name='crosshairsize top' href='#crosshairsize'>crosshairsize</a></td>
<td><a name='crosshair top' href='#crosshair'>crosshair</a></td>
<td><a name='crosshairs top' href='#crosshairs'>crosshairs</a></td>
<td><a name='point top' href='#point'>point</a></td>
<td><a name='points top' href='#points'>points</a></td>
<td><a name='yerrorbars top' href='#yerrorbars'>yerrorbars</a></td>
<td><a name='xerrorbars top' href='#xerrorbars'>xerrorbars</a></td>
<td><a name='circle top' href='#circle'>circle</a></td>
<td><a name='circles top' href='#circles'>circles</a></td>
</tr><tr>
<td><a name='disks top' href='#circles'>disks</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='line top' href='#line'>line</a></td>
<td><a name='lines top' href='#lines'>lines</a></td>
<td><a name='demiline top' href='#demiline'>demiline</a></td>
<td><a name='halfline top' href='#demiline'>halfline</a></td>
</tr><tr>
<td><a name='demilines top' href='#demilines'>demilines</a></td>
<td><a name='halflines top' href='#demilines'>halflines</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='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='square top' href='#square'>square</a></td>
<td><a name='rect top' href='#rect'>rect</a></td>
<td><a name='rects top' href='#rects'>rects</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='polyline top' href='#polyline'>polyline</a></td>
<td><a name='poly top' href='#poly'>poly</a></td>
<td><a name='arc top' href='#arc'>arc</a></td>
</tr><tr>
<td><a name='angle top' href='#angle'>angle</a></td>
<td><a name='ellipse top' href='#ellipse'>ellipse</a></td>
<td><a name='dashtype top' href='#dashtype'>dashtype</a></td>
<td><a name='rays top' href='#rays'>rays</a></td>
<td><a name='arrowhead top' href='#arrowhead'>arrowhead</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='parallel top' href='#parallel'>parallel</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='lattice top' href='#lattice'>lattice</a></td>
<td><a name='multistrokeopacity top' href='#multistrokeopacity'>multistrokeopacity</a></td>
<td><a name='multifillopacity top' href='#multifillopacity'>multifillopacity</a></td>
<td><a name='multilabel top' href='#multilabel'>multilabel</a></td>
</tr><tr>
<td><a name='multilinewidth top' href='#multilinewidth'>multilinewidth</a></td>
<td><a name='multidash top' href='#multidash'>multidash</a></td>
<td><a name='multisnaptogrid top' href='#multisnaptogrid'>multisnaptogrid</a></td>
<td><a name='multifill top' href='#multifill'>multifill</a></td>
<td><a name='multistrokecolors top' href='#multistrokecolors'>multistrokecolors</a></td>
<td><a name='multifillcolors top' href='#multifillcolors'>multifillcolors</a></td>
<td><a name='multiuserinput top' href='#multiuserinput'>multiuserinput</a></td>
<td><a name='multidraw top' href='#multidraw'>multidraw</a></td>
<td><a name='ruler top' href='#ruler'>ruler</a></td>
</tr><tr>
<td><a name='protractor top' href='#protractor'>protractor</a></td>
<td><a name='userdraw top' href='#userdraw'>userdraw</a></td>
<td><a name='note: top' href='#note:'>note:</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='xsnaptogrid top' href='#xsnaptogrid'>xsnaptogrid</a></td>
<td><a name='ysnaptogrid top' href='#ysnaptogrid'>ysnaptogrid</a></td>
</tr><tr>
<td><a name='userinput top' href='#userinput'>userinput</a></td>
<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='usertextarea_xy top' href='#usertextarea_xy'>usertextarea_xy</a></td>
<td><a name='userinput_xy top' href='#userinput_xy'>userinput_xy</a></td>
<td><a name='functionlabel top' href='#functionlabel'>functionlabel</a></td>
<td><a name='userinput_function top' href='#userinput_function'>userinput_function</a></td>
<td><a name='plotsteps top' href='#plotsteps'>plotsteps</a></td>
</tr><tr>
<td><a name='fontsize top' href='#fontsize'>fontsize</a></td>
<td><a name='fontcolor top' href='#fontcolor'>fontcolor</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='curve top' href='#curve'>curve</a></td>
<td><a name='levelcurve top' href='#levelcurve'>levelcurve</a></td>
<td><a name='bezier top' href='#bezier'>bezier</a></td>
<td><a name='trace_jscurve top' href='#trace_jscurve'>trace_jscurve</a></td>
<td><a name='jsmath top' href='#jsmath'>jsmath</a></td>
</tr><tr>
<td><a name='text top' href='#text'>text</a></td>
<td><a name='textup top' href='#textup'>textup</a></td>
<td><a name='fontfamily top' href='#fontfamily'>fontfamily</a></td>
<td><a name='stringup top' href='#stringup'>stringup</a></td>
<td><a name='string top' href='#string'>string</a></td>
<td><a name='centerstring top' href='#centerstring'>centerstring</a></td>
<td><a name='mathml top' href='#mathml'>mathml</a></td>
<td><a name='http top' href='#http'>http</a></td>
<td><a name='html top' href='#html'>html</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='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='yaxis top' href='#yaxis'>yaxis</a></td>
<td><a name='axisnumbering top' href='#axisnumbering'>axisnumbering</a></td>
<td><a name='axis top' href='#axis'>axis</a></td>
</tr><tr>
<td><a name='killslider top' href='#killslider'>killslider</a></td>
<td><a name='sliderfunction_x top' href='#sliderfunction_x'>sliderfunction_x</a></td>
<td><a name='sliderfunction_y top' href='#sliderfunction_y'>sliderfunction_y</a></td>
<td><a name='slider top' href='#slider'>slider</a></td>
<td><a name='sgraph top' href='#sgraph'>sgraph</a></td>
<td><a name='grid top' href='#grid'>grid</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='rotationcenter top' href='#rotationcenter'>rotationcenter</a></td>
</tr><tr>
<td><a name='rotate top' href='#rotate'>rotate</a></td>
<td><a name='killrotate top' href='#killrotate'>killrotate</a></td>
<td><a name='killaffine top' href='#killaffine'>killaffine</a></td>
<td><a name='affine top' href='#affine'>affine</a></td>
<td><a name='killtranslation top' href='#killtranslation'>killtranslation</a></td>
<td><a name='killtranslate top' href='#killtranslation'>killtranslate</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='animate top' href='#animate'>animate</a></td>
</tr><tr>
<td><a name='dashed top' href='#dashed'>dashed</a></td>
<td><a name='filled top' href='#filled'>filled</a></td>
<td><a name='highlight top' href='#highlight'>highlight</a></td>
<td><a name='fillcolor top' href='#fillcolor'>fillcolor</a></td>
<td><a name='strokecolor top' href='#strokecolor'>strokecolor</a></td>
<td><a name='bgimage top' href='#bgimage'>bgimage</a></td>
<td><a name='bgcolor top' href='#bgcolor'>bgcolor</a></td>
<td><a name='copy top' href='#copy'>copy</a></td>
<td><a name='copyresized top' href='#copyresized'>copyresized</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='inputstyle top' href='#inputstyle'>inputstyle</a></td>
<td><a name='input top' href='#input'>input</a></td>
<td><a name='textarea top' href='#textarea'>textarea</a></td>
<td><a name='precision top' href='#precision'>precision</a></td>
<td><a name='setlimits top' href='#setlimits'>setlimits</a></td>
<td><a name='zoom top' href='#zoom'>zoom</a></td>
</tr><tr>
<td><a name='onclick top' href='#onclick'>onclick</a></td>
<td><a name='drag top' href='#drag'>drag</a></td>
<td><a name='blink top' href='#blink'>blink</a></td>
<td><a name='xunit top' href='#xunit'>xunit</a></td>
<td><a name='yunit top' href='#yunit'>yunit</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='display top' href='#display'>display</a></td>
<td><a name='mouse_degree top' href='#mouse_degree'>mouse_degree</a></td>
</tr><tr>
<td><a name='mousex top' href='#mousex'>mousex</a></td>
<td><a name='mousey top' href='#mousey'>mousey</a></td>
<td><a name='mouse top' href='#mouse'>mouse</a></td>
<td><a name='intooltip top' href='#intooltip'>intooltip</a></td>
<td><a name='popup top' href='#popup'>popup</a></td>
<td><a name='audio top' href='#audio'>audio</a></td>
<td><a name='video top' href='#video'>video</a></td>
<td><a name='hatchfill top' href='#hatchfill'>hatchfill</a></td>
<td><a name='diamondfill top' href='#diamondfill'>diamondfill</a></td>
</tr><tr>
<td><a name='gridfill top' href='#gridfill'>gridfill</a></td>
<td><a name='dotfill top' href='#dotfill'>dotfill</a></td>
<td><a name='imagefill top' href='#imagefill'>imagefill</a></td>
<td><a name='canvastype top' href='#canvastype'>canvastype</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='setpixel top' href='#setpixel'>setpixel</a></td>
<td><a name='pixelsize top' href='#pixelsize'>pixelsize</a></td>
</tr><tr>
<td><a name='pixels top' href='#pixels'>pixels</a></td>
<td><a name='replyformat top' href='#replyformat'>replyformat</a></td>
<td><a name='legendcolors top' href='#legendcolors'>legendcolors</a></td>
<td><a name='legend top' href='#legend'>legend</a></td>
<td><a name='xlabel top' href='#xlabel'>xlabel</a></td>
<td><a name='ylabel top' href='#ylabel'>ylabel</a></td>
<td><a name='linegraph top' href='#linegraph'>linegraph</a></td>
<td><a name='barchart top' href='#barchart'>barchart</a></td>
<td><a name='clock top' href='#clock'>clock</a></td>
</tr><tr>
<td><a name='piechart top' href='#piechart'>piechart</a></td>
<td><a name='userboxplotdata top' href='#userboxplotdata'>userboxplotdata</a></td>
<td><a name='userboxplot top' href='#userboxplot'>userboxplot</a></td>
<td><a name='boxplotdata top' href='#boxplotdata'>boxplotdata</a></td>
<td><a name='boxplot top' href='#boxplot'>boxplot</a></td>
<td><a name='status top' href='#status'>status</a></td>
<td><a name='xlogbase top' href='#xlogbase'>xlogbase</a></td>
<td><a name='ylogbase top' href='#ylogbase'>ylogbase</a></td>
<td><a name='xlogscale top' href='#xlogscale'>xlogscale</a></td>
</tr><tr>
<td><a name='ylogscale top' href='#ylogscale'>ylogscale</a></td>
<td><a name='xylogscale top' href='#xylogscale'>xylogscale</a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></table>
<ul>
<li><a name='canvasdraw' href='#canvasdraw top'> canvasdraw</a><ul>
<li> will try use the same syntax as flydraw or svgdraw to paint a html5 bitmap image by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job. thus ensuring a minimal strain on the client browser (unlike some popular 'canvas-do-it-all' libraries, who have proven to be not suitable for low-end computers found in schools...)
</li>
<li> 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. 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' (like frect,fcircle,ftriangle...) or by using the keyword <a href="#filled">'filled'</a> before the object command. The fill colour of 'non_userdraw' objects will be the stroke colour...(flydraw harmonization 19/10/2013)</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> The translation can be read by javascript:read_dragdrop();The replyformat is : object_number : x-orig : y-orig : x-drag : y-drag The x-orig/y-orig will be returned in maximum precision (javascript float)... the x-drag/y-drag will be returned in defined 'precision' number of decimals Multiple objects may be set draggable / clickable (no limit) not all flydraw objects may be dragged / clicked 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> not all flydraw objects can be set clickable</li><li>remarks using a ';' as command separator commands with only numeric or colour arguments may be using a ';' as command separator (instead of a new line) commands with a string argument may not use a ';' as command separator ! 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: <ul>general syntaxrule:<li>single_object x1,y1,...,color</li><li>multi_object color,x1,y1,...</li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#inputstyle">'inputstyle some_css'</a> the fontsize used for labeling these elements can be controlled by command <a href="fontsize">'fontsize int'</a> command 'fontfamily' is not active for these elements </li></ul>
</li>
<li> If needed multiple interactive scripts may be used in a single webpage. A function 'read_canvas()' and / or 'read_dragdrop()' can read all interactive userdata from these images. The global array 'canvas_scripts' will contain all unique random "canvas_root_id" of the included scripts. The included local javascript "read" functions "read_canvas%d()" and "read_dragdrop%d()" will have this "%d = canvas_root_id" e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function fun = eval("read_canvas"+canvas_scripts[0]) to read user based drawings / inputfield in this first image. The read_dragdrop is analogue. If the default reply formatting is not suitable, use command <a href='#replyformat'>'replyformat'</a> to format the replies for an individual canvas script, To read all user interactions from all included canvas scripts , use something like: function read_all_canvas_images(){  var script_len = canvas_scripts.length;  var draw_reply = "";  var found_result = false;  for(var p = 0 ; p < script_len ; p++){   var fun = eval("read_canvas"+canvas_scripts[p]);   if( typeof fun === 'function'){    var result = fun();    if( result  && result.length != 0){     if(script_len == 1 ){ return result;};      found_result = true;      draw_reply = draw_reply + result + "\n";     };    };   };  if( found_result ){return draw_reply;}else{return null;}; };
</li>
<li> 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>
</li>
<li> for usage within OEF (without anstype "draw"), something like this (a popup function plotter) will work: \text{popup_grapher=wims(exec canvasdraw popup size 400,400 xrange -10,10 yrange -10,10 axis axisnumbering opacity 100,100 grid 2,2,grey,2,2,6,black snaptogrid linewidth 2 jsplot red,5*sin(1/x) strokecolor green functionlabel f(x)= userinput function mouse blue,22 ) } \statement{ \popup_grapher }
</li>
<li> be aware that older browsers will probably not work correctly no effort has been undertaken to add glue code for older browsers !! in any case it's not wise to use older browsers...not just for canvasdraw
</li>
<li> 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.
</li>
<li> 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> only single finger gestures are supported (for now) for more accurate user-interaction with canvasdraw on touch devices: use the command family <a href="userinput_xy">userinput</a>
</li>
</ul>
<li><a name='size' href='#size top'> size width,height</a><ul>
<li> set canvas size in pixels
</li>
<li> mandatory first command (can only be preceded by keyword <a href="#popup">'popup'</a>)
</li>
<li> if xrange and/or yrange is not given the range will be set to pixels : xrange 0,xsize yrange 0,ysize note: lower left corner is Origin (0:0) !!! this in contrast to flydraw
</li>
</ul>
<li><a name='xrange' href='#xrange top'> xrange xmin,xmax</a><ul>
<li>alternative command:<a name='rangex' href='#rangex top'>rangex</a></li>
<li> if not given: 0,xsize (eg in pixels)
</li>
</ul>
<li><a name='yrange' href='#yrange top'> yrange ymin,ymax</a><ul>
<li>alternative command:<a name='rangey' href='#rangey top'>rangey</a></li>
<li> if not given 0,ysize (eg in pixels)
</li>
</ul>
<li><a name='trange' href='#trange top'> trange tmin,tmax</a><ul>
<li>alternative command:<a name='ranget' href='#ranget top'>ranget</a></li>
<li> default -2,2
</li>
</ul>
<li><a name='linewidth' href='#linewidth top'> linewidth int</a><ul>
<li> default 1
</li>
</ul>
<li><a name='crosshairsize' href='#crosshairsize top'> crosshairsize int</a><ul>
<li> default 8 (px)
</li>
</ul>
<li><a name='crosshair' href='#crosshair top'> crosshair x,y,color</a><ul>
<li> draw a single crosshair point at (x;y) in color 'color'
</li>
<li> use command 'crosshairsize int' and / or 'linewidth int' to adust
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='crosshairs' href='#crosshairs top'> crosshairs color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
<li> draw multiple crosshair points at given coordinates in color 'color'
</li>
<li> use command 'crosshairsize int' and / or 'linewidth int' to adust
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
</ul>
<li><a name='point' href='#point top'> point x,y,color</a><ul>
<li> draw a single point at (x;y) in color 'color'
</li>
<li> use command 'linewidth int' to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> will not resize on zooming (command 'circle x,y,r,color' will resize on zooming)
</li>
<li> attention: in case of command <a href="#rotate">'rotate angle'</a> a point has rotation center (0:0) in x/y-range
</li>
</ul>
<li><a name='points' href='#points top'> points color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
<li> draw multiple points at given coordinates in color 'color'
</li>
<li> use command 'linewidth int' to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
<li> attention: in case of command <a href="#rotate">'rotate angle'</a> the points have rotation center (0:0) in x/y-range
</li>
</ul>
<li><a name='yerrorbars' href='#yerrorbars top'> yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</a><ul>
<li> draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'
</li>
<li> the errors E1 and E2 values are in yrange.
</li>
<li> use command 'linewidth int' to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
</ul>
<li><a name='xerrorbars' href='#xerrorbars top'> xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n</a><ul>
<li> draw multiple points with x-errorbars E1 (error value left from point) and E2 (error value right from point) at given coordinates in color 'color'
</li>
<li> the errors E1 and E2 values are in xrange.
</li>
<li> use command 'linewidth int' to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
</ul>
<li><a name='circle' href='#circle top'> circle xc,yc,width (2*r in pixels),color</a><ul>
<li> use command 'fcircle xc,yc,d,color'
</li>
<li> alternative: disk for a filled circle
</li>
<li> use command 'fillcolor color' to set the fillcolor
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
</ul>
<li><a name='circles' href='#circles top'> circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n</a><ul>
<li> attention r = radius in x-range (!)
</li>
<li> use keyword 'filled' or command 'fcircles' to produce solid circles
</li>
<li>alternative command:<a name='disks' href='#disks top'>disks</a></li>
<li> use command 'fillcolor color' to set the fillcolor
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> (individually)
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
</ul>
<li><a name='segment' href='#segment top'> segment x1,y1,x2,y2,color</a><ul>
<li>alternative command:<a name='seg' href='#seg top'>seg</a></li>
<li> draw a line segment between points (x1:y1)--(x2:y2) in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='segments' href='#segments top'> segments color,x1,y1,x2,y2,...,x_n,y_n</a><ul>
<li>alternative command:<a name='segs' href='#segs top'>segs</a></li>
<li> draw multiple segments between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color 'color'
</li>
<li> use command 'linewidth int' to adust size
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
</ul>
<li><a name='line' href='#line top'> line x1,y1,x2,y2,color</a><ul>
<li> draw a line through points (x1:y1)--(x2:y2) in color 'color'
</li>
<li> or use command 'curve color,formula' to draw the line (uses more points to draw the line; is however better draggable)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='lines' href='#lines top'> lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n</a><ul>
<li> draw multiple lines through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color'
</li>
<li> or use multiple commands 'curve color,formula' or "jscurve color,formule" to draw the line (uses more points to draw the line; is however better draggable)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> attention: the flydraw command "lines" is equivalent to canvasdraw command <a href="#polyline">"polyline"</a>
</li>
</ul>
<li><a name='demiline' href='#demiline top'> demiline x1,y1,x2,y2,color</a><ul>
<li>alternative command:<a name='halfline' href='#halfline top'>halfline</a></li>
<li> draws a halfline starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='demilines' href='#demilines top'> demilines color,x1,y1,x2,y2,....</a><ul>
<li>alternative command:<a name='halflines' href='#halflines top'>halflines</a></li>
<li> draws halflines starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex) etc etc
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> indiviually
</li>
</ul>
<li><a name='hline' href='#hline top'> hline x,y,color</a><ul>
<li>alternative command:<a name='horizontalline' href='#horizontalline top'>horizontalline</a></li>
<li> draw a horizontal line through point (x:y) in color 'color'
</li>
<li> or use command <a href='#curve'>'curve color,formula'</a> to draw the line (uses more points to draw the line; is however better draggable)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='hlines' href='#hlines top'> hlines color,x1,y1,x2,y2,...</a><ul>
<li>alternative command:<a name='horizontallines' href='#horizontallines top'>horizontallines</a></li>
<li> draw horizontal lines through points (x1:y1)...(xn:yn) in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
</ul>
<li><a name='vline' href='#vline top'> vline x,y,color</a><ul>
<li>alternative command:<a name='verticalline' href='#verticalline top'>verticalline</a></li>
<li> draw a vertical line through point (x:y) in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='vlines' href='#vlines top'> vlines color,x1,y1,x2,y2....</a><ul>
<li>alternative command:<a name='verticallines' href='#verticallines top'>verticallines</a></li>
<li> draw vertical lines through points (x1:y1),(x2:y2)... in color 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
</ul>
<li><a name='square' href='#square top'> square x,y,side (px) ,color</a><ul>
<li> draw a square with left top corner (x:y) with side 'side' in color 'color'
</li>
<li> use command 'fsquare x,y,side,color' for a filled square
</li>
<li> use command/keyword <a href='#filled'>'filled'</a> before command 'square x,y,side,color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='rect' href='#rect top'> rect x1,y1,x2,y2,color</a><ul>
<li> use command 'frect x1,y1,x2,y2,color' for a filled rectangle
</li>
<li> use command/keyword <a href='#filled'>'filled'</a> before command 'rect x1,y1,x2,y2,color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='rects' href='#rects top'> rects color,x1,y1,x2,y2,.....</a><ul>
<li> use command 'frect color,x1,y1,x2,y2,.....' for a filled rectangle
</li>
<li> use command/keyword <a href='#filled'>'filled'</a> before command 'rects color,x1,y1,x2,y2,....'
</li>
<li> use command 'fillcolor color' before 'frects' to set the fill colour.
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
</ul>
<li><a name='roundrect' href='#roundrect top'> roundrect x1,y1,x2,y2,radius in px,color</a><ul>
<li> use command 'froundrect x1,y1,x2,y2,radius,color' for a filled rectangle
</li>
<li> use command/keyword <a href='#filled'>'filled'</a> before command 'roundrect x1,y1,x2,y2,radius,color'
</li>
<li> fillcolor will be identical to 'color'
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='roundrects' href='#roundrects top'> roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....</a><ul>
<li> for filled roundrects use command/keyword <a href='#filled'>'filled'</a> before command
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
</ul>
<li><a name='polyline' href='#polyline top'> polyline color,x1,y1,x2,y2...x_n,y_n</a><ul>
<li> brokenline color,x1,y1,x2,y2...x_n,y_n
</li>
<li> path color,x1,y1,x2,y2...x_n,y_n
</li>
<li> remark: there is no command polylines | brokenlines | paths ... just use multiple commands "polyline ,x1,y1,x2,y2...x_n,y_n"
</li>
<li> remark: there are commands "userdraw path(s),color" and "userdraw polyline,color"... these are two entirely different things ! the path(s) userdraw commands may be used for freehand drawing(s) the polyline userdraw command is analogue to this polyline|brokenline command
</li>
<li> the command interconnects the points in the given order with a line (canvasdraw will not close the drawing: use command <a href="#poly">polygon</a> for this)
</li>
<li> use command <a href='#segments'>'segments'</a> for a series of segments. these may be clicked/dragged individually
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='poly' href='#poly top'> poly color,x1,y1,x2,y2...x_n,y_n</a><ul>
<li> polygon color,x1,y1,x2,y2...x_n,y_n
</li>
<li> draw closed polygon
</li>
<li> use command 'fpoly' to fill it or use keyword <a href='#filled'>'filled'</a>
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='arc' href='#arc top'> arc xc,yc,width,height,start_angle,end_angle,color</a><ul>
<li> can not be set "onclick" or "drag xy"
</li>
<li> attention: width in height in x/y-range
</li>
<li> will not zoom in or zoom out (because radius is given in pixels an not in x/y-system !). Panning will work
</li>
<li> use command <a href='#angle'>'angle'</a> for scalable angle
</li>
</ul>
<li><a name='angle' href='#angle top'> angle xc,yc,width,start_angle,end_angle,color</a><ul>
<li> width is in x-range
</li>
<li> will zoom in/out
</li>
<li> if size is controlled by command <a href='#slider'>'slider'</a> use radians to set limits of slider.
</li>
</ul>
<li><a name='ellipse' href='#ellipse top'> ellipse xc,yc,radius_x,radius_y,color</a><ul>
<li> a ellipse with center xc/yc in x/y-range
</li>
<li> radius_x and radius_y are in pixels
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> will shrink / expand on zoom out / zoom in
</li>
</ul>
<li><a name='dashtype' href='#dashtype top'> dashtype line_width_px,space_width_px</a><ul>
<li> every indiviual object may have its own dashtype, if needed...
</li>
<li> When keyword <a href='#dashed'>dashed</a> is set, the objects will be drawn with this dashtype
</li>
<li> default value "dashtype 2,2" e.g. 2px line and 2px space
</li>
<li> html5 canvas specification supports more arguments (dashing schemes) ... but not all modern browsers are yet capable
</li>
</ul>
<li><a name='rays' href='#rays top'> rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n</a><ul>
<li> draw rays in color 'color' and center (xc:yc)
</li>
<li> may be set draggable or onclick (every individual ray)
</li>
</ul>
<li><a name='arrowhead' href='#arrowhead top'> arrowhead int</a><ul>
<li> default 8 (pixels)
</li>
</ul>
<li><a name='arrow' href='#arrow top'> arrow x1,y1,x2,y2,h,color</a><ul>
<li>alternative command:<a name='vector' href='#vector top'>vector</a></li>
<li> draw a single headed arrow / vector from (x1:y1) to (x2:y2) with arrowhead size h in px and in color 'color'
</li>
<li> use command 'linewidth int' to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='arrows' href='#arrows top'> arrows color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>
<li>alternative command:<a name='vectors' href='#vectors top'>vectors</a></li>
<li> draw single headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'
</li>
<li> use command 'linewidth int' to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
</ul>
<li><a name='arrow2' href='#arrow2 top'> arrow2 x1,y1,x2,y2,h,color</a><ul>
<li> draw a double headed arrow/vector from (x1:y1) to (x2:y2) with arrowhead size h in px and in color 'color'
</li>
<li> use command 'arrowhead int' to adjust the arrow head size
</li>
<li> use command 'linewidth int' to adjust thickness of the arrow
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='arrows2' href='#arrows2 top'> arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n</a><ul>
<li> draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'
</li>
<li> use command 'linewidth int' to adjust thickness of the arrows
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
</li>
</ul>
<li><a name='parallel' href='#parallel top'> parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]</a><ul>
<li> can not be set "onclick" or "drag xy"
</li>
</ul>
<li><a name='triangle' href='#triangle top'> triangle x1,y1,x2,y2,x3,y3,color</a><ul>
<li> use ftriangle or keyword <a href='#filled'>'filled'</a> for a solid triangle
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
</ul>
<li><a name='triangles' href='#triangles top'> triangles color,x1,y1,x2,y2,x3,y3,...</a><ul>
<li> use ftriangles or keyword <a href='#filled'>'filled'</a> for solid triangles
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
</li>
</ul>
<li><a name='lattice' href='#lattice top'> lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color</a><ul>
<li> can not be set "onclick" or "drag xy"
</li>
</ul>
<li><a name='multistrokeopacity' href='#multistrokeopacity top'> multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7</a><ul>
<li> float values 0 - 1 or integer values 0 - 255
</li>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all stroke opacity_ will be set by previous command 'opacity int,int'
</li>
<li> use these up to 7 different stroke opacities for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_7
</li>
<li> wims will not check the amount or validity of your input
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multifillopacity' href='#multifillopacity top'> multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8</a><ul>
<li> float values 0 - 1 or integer values 0 - 255
</li>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all fill opacity_ will be set by previous command 'opacity int,int' and keyword 'filled'
</li>
<li> use these up to 7 different stroke opacities for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_y
</li>
<li> wims will not check the amount or validity of your input
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multilabel' href='#multilabel top'> multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'</a><ul>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all labels (e.g. the value='' of input type 'button') will be set by the english names for the draw_primitives (like 'point','circle'...)
</li>
<li> the 'stop drawing' button text must be the last item on the 'multilabel' -list for example: multilabel punten,lijnen,Stop met Tekenen multidraw points,lines
</li>
<li> all buttons can be 'styled' by using commant 'inputstyle' note:If you want to add some CSS style to the buttons... the id's of the 'draw buttons' are their english command argument (e.g. id="canvasdraw_points" for the draw points button). the id of the 'stop drawing' button is "canvasdraw_stop_drawing". the id of the "OK" button is"canvasdraw_ok_button"
</li>
<li> wims will not check the amount or validity of your input
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multilinewidth' href='#multilinewidth top'> multilinewidth linewidth_1,linewidth_2,...,linewidth_8</a><ul>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all line width will be set by a previous command 'linewidth int'
</li>
<li> use these up to 7 different line widths for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_7
</li>
<li> wims will not check if the number of 0 or 1's matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multidash' href='#multidash top'> multidash 0,1,1</a><ul>
<li> meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like 'multifill points,circle,segments', are dashed
</li>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all objects will be set 'not dashed'... unless a generic keyword 'dashed' was given before command 'multidraw'
</li>
<li> the dash-type is not -yet- adjustable (e.g. command dashtype line_px,space_px will give no control over multidraw objects)
</li>
<li> wims will not check if the number of 0 or 1's matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multisnaptogrid' href='#multisnaptogrid top'> multisnaptogrid 0,1,1</a><ul>
<li> meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like 'multifill points,circle,segments', will snap to the xy-grid (default 1 in x/y-coordinate system: see command <a href='#snaptogrid'>'snaptogrid'</a>)
</li>
<li> only the x-values snap_to_grid: multisnaptogrid 0,2,2
</li>
<li> only the y-values snap_to_grid: multisnaptogrid 0,3,3
</li>
<li> mixing allowed: multisnaptogrid 1,2,3,0 e.g. the first object will snap to the xy-grid, the second draw object will snap to the x-values, the third object will snap to the y-valeus of the grid, the last object may be placed anywhere on the canvas
</li>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all objects will be set 'no snap'... unless a generic command 'snaptogrid' was given before command 'multidraw'
</li>
<li> commands <a href='#xsnaptogrid'>'xsnaptogrid'</a>, <a href='#ysnaptogrid'>'ysnaptogrid'</a>, <a href='#snaptofunction'>'snaptofunction'</a> and <a href='#snaptopoints'>'snaptopoints</a> x1,y1,x2,y2...' are not supported at this time
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
<li> wims will not check if the number of 0 or 1's matches the amount of draw primitives...
</li>
</ul>
<li><a name='multifill' href='#multifill top'> multifill 0,0,1,0,1,0,0</a><ul>
<li> meaning draw objects no. 3 and 5, in the list of command 'multifill', are filled (if the object is fillable...and not a line,segment,arrow or point...)
</li>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all objects -except point|points- will be set 'not filled'... unless a command 'filled' was given before command 'multifill'
</li>
<li> only suitable for draw_primitives like 'circle | circles' , 'triangle | triangles' and 'polygon'
</li>
<li> wims will not check if the number of 0 or 1's matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multistrokecolors' href='#multistrokecolors top'> multistrokecolors color_name_1,color_name_2,...,color_name_8</a><ul>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all colors will be 'stroke_color' , 'stroke_opacity'
</li>
<li> use these up to 6 colors for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_7
</li>
<li> wims will not check if the number of colours matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multifillcolors' href='#multifillcolors top'> multifillcolors color_name_1,color_name_2,...,color_name_8</a><ul>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be 'stroke_color' , 'fill_opacity'
</li>
<li> use these up to 6 colors for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_n
</li>
<li> wims will not check if the number of colours matches the amount of draw primitives...
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multiuserinput' href='#multiuserinput top'> multiuserinput 0,1,1,0</a><ul>
<li> meaning, when the command 'multidraw' is used multidraw circles,points,lines,triangles objects 'points' and 'lines' may additionally be 'drawn' by direct input (inputfields) all other objects must be drawn with a mouse
</li>
<li> in case of circle | circles a third inputfield for Radius (R) is added. the radius must be in the x/y coordinate system (x-range) and not in pixels...students don't think in pixels. note: R-values will not snap-to-grid
</li>
<li> in case of line(s) | segment(s) | arrow(s) the user should write x1:y1 in the first inputfield and x2:y2 in the second. These 'hints' are pre-filled into the input field. other coordinate delimiters are ";" and "," e.g. x1;y1 or x1,y1. An error message (alert box) will popup when things are not correctly...
</li>
<li> in case of a triangle | poly3, three inputfields are provided.
</li>
<li> may be styled using command <a href="#inputstyle">"inputstyle"</a>
</li>
<li> an additional button 'stop drawing' may be used to combine userbased drawings with 'drag&drop' or 'onclick' elements
</li>
<li> when exercise if finished (status=done) the buttons will not be shown. To override this default behaviour use command / keyword 'status'
</li>
<li> use before command <a href='#multidraw'>'multidraw'</a>
</li>
<li> always use the same sequence as is used for 'multidraw'
</li>
</ul>
<li><a name='multidraw' href='#multidraw top'> multidraw obj_type_1,obj_type_2...obj_type_8</a><ul>
<li> for single object user drawings you may also use command <a href="#userdraw">'userdraw'</a>
</li>
<li> implemented obj_types:<ul><li>point | points </li><li>circle | circles </li><li>line | lines </li><li>segment | segments </li><li>arrow | arrows use command 'arrowhead int' for size (default value 8 pixels)</li><li>rect | rects </li><li>closedpoly only one closedpolygon may be drawn.The number of 'corner points' is not preset (e.g. not limited,freestyle) the polygone is closed when clicking on the first point again..(+/- 10px) </li><li>triangle | triangles poly3, poly4, ... poly9 | polys3, polys4, ... polys9 (only 3 inputfields for poly*) parallelogram | parallelograms (no inputfields: parallelogram can be used for vector "contructions")</li></ul>
</li>
<li> additionally objects may be user labelled, using obj_type 'text'... in this case allways a text input field and a (x:y) inputfield will be added to the page. use commands 'fontfamily' and 'fontcolor' to adjust. (command 'multistrokeopacity' may be set to adjust text opacity) note: no keyboard listeners are used
</li>
<li> it makes no sense using something like "multidraw point,points" ...
</li>
<li> note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise) to overrule use command/keyword "status" (no arguments required)
</li>
<li> buttons for changing the obj_type (and incase of 'multiuserinput' , some inputfields and buttons) will be present in the reserved div 'tooltip_div' and can be styled using command 'inputstyle some_css'
</li>
<li> the button label will be default the 'object primitive name' (like 'point', 'circles'). If you want a different label (e.g. an other language) ,use command 'multilabel' for example in dutch: multilabel cirkel,lijnstuk,punten,STOP multidraw circle,segment,points (see command <a href='#multilabel'>'multilabel'</a> for more details)
</li>
<li> multidraw is incompatible with command 'tooltip'
</li>
<li> all 'multidraw' drawings will scale on zooming. this in contrast to the command <a href="#userdraw">'userdraw'</a>.
</li>
<li> wims will not check the amount or validity of your command arguments ! ( use javascript console to debug any typo's )
</li>
<li> a local function read_canvas%d will read all userbased drawings. The output is always a 9 lines string with fixed sequence. line 1 = points_x+";"+points_y+"\n" line 2 = circles_x+";"+circlespoint_y+";"+multi_radius+"\n" line 3 = segments_x+";"+segments_y+"\n" line 4 = arrows_x+";"+arrows_y+"\n" line 5 = lines_x+";"+lines_y+"\n" line 6 = triangles_x+";"+triangles_y+"\n" line 7 = rects_x +";"+rects_y+"\n" line 8 = closedpoly_x+";"+closedpoly_y+"\n" line 9 = text_x+";"+text_y+";"+text"\n" The x/y-data are in x/y-coordinate system and display precision may be set by a previous command 'precision 0 | 10 | 100 | 1000...' In case of circles the radius is -for the time being- rounded to pixels use the wims "direct exec" tool to see the format of the reply
</li>
<li> attention: for command argument 'closedpoly' only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.
</li>
<li> technical: all 8 'draw primitives' + 'text' will have their own -transparent- PNG bitmap canvas. So for example there can be a points_canvas entirely separated from a line_canvas. This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn) This in contrast to many very slow do-it-all HTML5 canvas javascript libraries. The mouselisteners are attached to the canvas-div element.
</li>
</ul>
<li><a name='ruler' href='#ruler top'> ruler x,y,x-width ,y-height,mode</a><ul>
<li> x,y are the initial location
</li>
<li> x-width , y-height are the ruler dimensions width & height in xy-coordinate system
</li>
<li> the ruler scale is by definition the x-scale, set by command 'xrange' for example: a ruler x-width of 6 will have a scale ranging from 0 to 6
</li>
<li> mode : use -1 to set the ruler interactive (eg mouse movement of ruler; drag & rotate) use mode = '0° - 360°' to set the ruler with a static angle of some value
</li>
<li> if combined with a protractor, use replyformat = 32
</li>
<li> only one ruler allowed (for the time being)
</li>
<li> when using command 'zoom' , pay attention to the size and symmetry of your canvas ...to avoid a partial image, locate the start position near the center of the visual canvas technical: the actual 'ruler' is just a static generated image in a new canvas-memory This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas. That is the reason for the 'high-speed dragging and rotating'. I've limited its size to xsize × ysize e.g. the same size as the visual canvas...
</li>
<li> usage: first left click on the ruler will activate dragging; a second left click will activate rotating (just move mouse around) a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3) a next click will restart this sequence...
</li>
</ul>
<li><a name='protractor' href='#protractor top'> protractor x,y,x_width,type,mode,use_a_scale</a><ul>
<li> x,y are the initial location
</li>
<li> x_width : give the width in x-coordinate system (e.g. not in pixels !)
</li>
<li> type = 1 : a triangle range 0 - 180 type = 2 : a circle shape 0 - 360
</li>
<li> mode : use -1 to set the protractor interactive (mouse movement of protractor) use mode = '0° - 360°' to set the protractor with a static angle of some value
</li>
<li> if the value of the user_rotation angle is to be shown...use command <a href='#display'>display degree,color,fontsize</a><a href='#display'>display radian,color,fontsize</a>
</li>
<li> use_scale = 1 : the protractor will have some scale values printed; use_scale=0 to disable
</li>
<li> the rotating direction of the mouse around the protractor determines the clockwise/ counter clockwise rotation of the protractor...
</li>
<li> commands stroke_color | fill_color | linewidth | opacity | font_family will determine the looks of the protractor.
</li>
<li> default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians use command 'precision' to set the reply precision.
</li>
<li> if combined with a ruler, use replyformat = 32
</li>
<li> command snap_to_grid may be used to assist the pupil at placing the protractor
</li>
<li> when using command 'zoom' , pay attention to the size and symmetry of your canvas ...to avoid a partial image, locate the start position near the center of the visual canvas technical: the actual 'protractor' is just a static generated image in a new canvas-memory This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas. That is the reason for the 'high-speed dragging and rotating'. I've limited its size to xsize × ysize e.g. the same size as the visual canvas...
</li>
<li> only one protractor allowed (for the time being)
</li>
<li> usage: first left click on the protractor will activate dragging; a second left click will activate rotating (just move mouse around) a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3) a next click will restart this sequence...
</li>
</ul>
<li><a name='userdraw' href='#userdraw top'> userdraw object_type,color</a><ul>
<li> only a single object_type is allowed.
</li>
<li> for multiple object user drawings use command <a href="#multidraw">'multidraw'</a>
</li>
<li> implemented object_type: <ul><li>point</li><li>points</li><li>crosshair</li><li>crosshairs</li><li>line</li><li>lines</li><li>vline</li><li>vlines</li><li>hline</li><li>hlines</li><li>demiline</li><li>demilines</li><li>segment</li><li>segments</li><li>polyline | brokenline </li><li>circle</li><li>circles</li><li>arrow</li><li>arrow2 (double arrow)</li><li>arrows</li><li>arrows2 (double arrows)</li><li>triangle</li><li>polygon</li><li>poly[3-9] (e.g poly3 ... poly7...poly9 </li><li>rect</li><li>roundrect</li><li>rects</li><li>roundrects</li><li>freehandline | path</li><li>freehandlines | paths</li><li>clickfill : fill the clicked area with a color the click may be set <a href="#snaptogrid">snapped...</a>only one area can be selected use command <a href="#canvastype">'canvastype'</a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)</li><li>text</li><li>arc</li><li>arcs</li><li>input place a single inputfield on 'canvas' use commands 'inputstyle' for css styling: use command 'linewidth' for adjusting the input field size (default 1)</li><li>inputs place multiple inputfield : placing inputfields on top of each other is not possible</li></ul>
</li>
<li> note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise) to overrule use command/keyword "status" (no arguments required)
</li>
<li> note: object_type text: Any string or multiple strings may be placed anywhere on the canvas. "backspace / delete / esc" will remove typed text if the mouse is clicked non the text. You will need to hit "enter" to add the text to the array "userdraw_txt" Placing the cursor somewhere on a typed text and hitting "delete/backspace/esc" ,
</li>
</ul>
<li><a name='note:' href='#note: top'> note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again.</a><ul>
<li> note: all objects will be removed -after a javascript confirm box- when clicked on an object point with middle or right mouse button (e.g. event.which != 1 : all buttons but left)
</li>
<li> use command "filled", "opacity int,int" and "fillcolor color" to trigger coloured filling of fillable objects
</li>
<li> use command "dashed" and/or "dashtype int,int" to trigger dashing
</li>
<li> use command "replyformat int" to control / adjust output formatting of javascript function read_canvas();
</li>
<li> may be combined with onclick or drag xy of other components of flyscript objects (although not very usefull...)
</li>
<li> may be combined with keyword 'userinput_xy'
</li>
<li> note: when zooming / panning after a drawing, the drawing will NOT be zoomed / panned...this is a "design" flaw and not a feature To avoid trouble do not use zooming / panning together width userdraw.! use command <a href="#multidraw">multidraw</a> is this is a problem for you...
</li>
</ul>
<li><a name='snaptofunction' href='#snaptofunction top'> snaptofunction some_function_in_x,some_funtion_in_y</a><ul>
<li>alternative command:<a name='snaptofun' href='#snaptofun top'>snaptofun</a></li>
<li> the next object will snap to the calculated values
</li>
<li> if you want only modification of y-values,just use: snaptofunction x,5*sin(1/y)
</li>
<li> if you want only modification of x-values,just use: snaptofunction 5*sin(1/x),y
</li>
<li> for now only one instance of 'snaptofunction' is allowed
</li>
<li> use rawmath on your functions: no validity checking is done by wims !
</li>
<li> example: .... snaptofunction 5*(cos(x),4*sin(y) linewidth 3 userdraw points,blue ....
</li>
<li> example : switching x and y coordinates? snaptofunction y,x
</li>
</ul>
<li><a name='snaptopoints' href='#snaptopoints top'> snaptopoints x1,y1,x2,y2,x3,y3....</a><ul>
<li> a userdraw object will snap to these points.
</li>
<li> the array size (e.g. the number of points) of command 'snaptopoints' is limited by constant MAX_INT (canvasdraw.h)
</li>
<li> a draggable object (use command "drag x|y|xy") will snap to the clossed of these points when dragged (mouseup)
</li>
<li> other options: use keyword "snaptogrid", "xsnaptogrid" or "ysnaptogrid"
</li>
</ul>
<li><a name='snaptogrid' href='#snaptogrid top'> snaptogrid</a><ul>
<li> keyword (no arguments required)
</li>
<li> a draggable object (use command "drag x|y|xy") will snap to the given grid when dragged (mouseup)
</li>
<li> in case of userdraw the drawn points will snap to xmajor / ymajor grid
</li>
<li> if no grid is defined ,points will snap to every integer xrange/yrange value. (eg snap_x=1,snap_y=1)
</li>
<li> if you do not want a visible grid, but you only want a 'snaptogrid' with some value...define this grid with opacity 0.
</li>
<li> if xminor / yminor is defined,(use keyword 'axis' to activate the minor steps) the drawing will snap to xminor and yminor use only even dividers in x/y-minor...for example snaptogrid axis grid 2,1,grey,4,4,7,red will snap on x=0, x=0.5, x=1, x=1.5 .... will snap on y=0, y=0.25 y=0.5 y=0.75 ...
</li>
</ul>
<li><a name='xsnaptogrid' href='#xsnaptogrid top'> xsnaptogrid</a><ul>
<li> keyword (no arguments required)
</li>
<li> a draggable object (use command "drag x|y|xy") will snap to the given x-grid values when dragged (mouseup)
</li>
<li> in case of userdraw the drawn points will snap to xmajor grid
</li>
<li> if no grid is defined ,points will snap to every integer xrange value. (eg snap_x=1)
</li>
<li> if you do not want a visible grid, but you only want a 'snaptogrid' with some value...define this grid with opacity 0.
</li>
<li> if xminor is defined (use keyword 'axis' to activate xminor), the drawing will snap to xminor use only even dividers in x-minor...for example xsnaptogrid axis grid 2,1,grey,4,4,7,red will snap on x=0, x=0.5, x=1, x=1.5 .... will snap on y=0, y=0.25 y=0.5 y=0.75 ...
</li>
</ul>
<li><a name='ysnaptogrid' href='#ysnaptogrid top'> ysnaptogrid</a><ul>
<li> keyword (no arguments required)
</li>
<li> a draggable object (use command "drag x|y|xy") will snap to the given y-grid values when dragged (mouseup)
</li>
<li> in case of userdraw the drawn points will snap to ymajor grid
</li>
<li> if no grid is defined ,points will snap to every integer yrange value. (eg snap_y=1)
</li>
<li> if you do not want a visible grid, but you only want a 'snaptogrid' with some value...define this grid with opacity 0.
</li>
<li> if yminor is defined (use keyword 'axis' to activate yminor), the drawing will snap to yminor use only even dividers in y-minor...for example ysnaptogrid axis grid 2,1,grey,4,4,7,red will snap on x=0, x=0.5, x=1, x=1.5 .... will snap on y=0, y=0.25 y=0.5 y=0.75 ...
</li>
</ul>
<li><a name='userinput' href='#userinput top'> userinput function | textarea | inputfield</a><ul>
<li>alternative command:<a name='userinput_function' href='#userinput_function top'>userinput_function</a></li>
<li>alternative command:<a name='userinput_textarea' href='#userinput_textarea top'>userinput_textarea</a></li>
<li>alternative command:<a name='userinput_xy' href='#userinput_xy top'>userinput_xy</a></li>
<li> textarea and inputfield are only usable in combination with some 'userdraw draw_ type'
</li>
<li> function may be used any time (e.g. without userdraw)
</li>
<li> multiple 'userinput function' commands may be used.
</li>
<li> use command "functionlabel some_string" to define the inputfield text : default value "f(x)="
</li>
<li> use command 'strokecolor some_color' to adjust the plot / functionlabel color
</li>
<li> use command 'inputstyle some_css' to adjust the inputfields
</li>
<li> use command 'fontsize int' to adjust the label fonts. (default 12px)
</li>
<li> the user input for the function will be corrected by a simple 'rawmath' implementation... an error message will be shown if javascript can not interpret the user input
</li>
</ul>
<li><a name='usertextarea_xy' href='#usertextarea_xy top'> usertextarea_xy</a><ul>
<li> keyword (no arguments required)
</li>
<li> to be used in combination with command "userdraw object_type,color" wherein object_type is only segment / polyline for the time being...
</li>
<li> if set two textareas are added to the document (one for x-values , one for y-values)
</li>
<li> the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
</li>
<li> user drawings will not zoom on zooming (or pan on panning)
</li>
<li> use command 'inputstyle some_css' to adjust the inputarea.
</li>
<li> use command 'fontsize int' to adjust the text labels (if needed)
</li>
</ul>
<li><a name='userinput_xy' href='#userinput_xy top'> userinput_xy</a><ul>
<li> keyword (no arguments required)
</li>
<li> to be used in combination with command "userdraw object_type,color"
</li>
<li> if set two (or three) input fields are added to the document (one for x-values , one for y-values and in case of drawing circle one for radius-values)
</li>
<li> the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
</li>
<li> math input is allowed (e.g something like: 1+3,2*6,1/3,sqrt(3), sin(pi/4),10^-2,log(2)...) eval function is 'protected' against code injection.
</li>
<li> can not be combined with command "intooltip tiptext" note: the 'tooltip div element' is used for placing inputfields
</li>
<li> user drawings will not zoom on zooming (or pan on panning)
</li>
<li> use command 'inputstyle some_css' to adjust the inputarea.
</li>
<li> use command 'fontsize int' to adjust the text labels (if needed)
</li>
</ul>
<li><a name='functionlabel' href='#functionlabel top'> functionlabel 'some string'</a><ul>
<li> default value "f(x)="
</li>
<li> no mathml allowed (just ascii string)
</li>
<li> use command 'fontsize int' to adjust the size
</li>
<li> use command 'strokecolor colorname' to adjust the labels (individually, if needed)
</li>
<li> if needed, use before every command 'userinput function | inputfield | textarea'
</li>
</ul>
<li><a name='userinput_function' href='#userinput_function top'> userinput_function</a><ul>
<li> keyword (no arguments required)
</li>
<li> if set , a inputfield will be added to the page
</li>
<li> repeat keyword for more function input fields
</li>
<li> the userinput value will be plotted in the canvas
</li>
<li> this value may be read with 'read_canvas()'. for do it yourself js-scripters : If this is the first inputfield in the script, its id is canvas_input0
</li>
<li> use before this command 'userinput_function', commands like 'inputstyle some_css' , 'xlabel some_description' , 'opacity int,int' , 'linewidth int' , 'dashed' and 'dashtype int,int' to modify
</li>
<li> fontsize can be set using command 'fontsize int'
</li>
<li> incompatible with command 'intooltip link_text_or_image' : it uses the tooltip div for adding the inputfield
</li>
</ul>
<li><a name='plotsteps' href='#plotsteps top'> plotsteps a_number</a><ul>
<li> default 150
</li>
<li> only used for commands <a href="#curve">"curve / plot"</a> and <a href="#levelcurve">"levelcurve"</a>
</li>
<li> use with care !
</li>
</ul>
<li><a name='fontsize' href='#fontsize top'> fontsize font_size</a><ul>
<li> default value 12
</li>
<li> note:for some macro's (like grid | legend | xaxistext | xlabel etc) sometimes command <a href="#fontfamily">"fontfamily"</a> can be used for some specific font-setting this is however not always very straight forward...so just try and see what happens
</li>
</ul>
<li><a name='fontcolor' href='#fontcolor top'> fontcolor color</a><ul>
<li> color: hexcolor or colorname
</li>
<li> default: black
</li>
<li> example usage: x/y-axis text
</li>
</ul>
<li><a name='jscurve' href='#jscurve top'> jscurve color,formula(x)</a><ul>
<li>alternative command:<a name='jsplot' href='#jsplot top'>jsplot</a></li>
<li> your function will be plotted by the javascript engine of the client browser.
</li>
<li> use only basic math in your curve: sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e
</li>
<li> use parenthesis and rawmath : use 2*x instead of 2x ; use 2^(sin(x))...etc etc use error console to debug any errors...
</li>
<li> attention : last "precision" command in the canvasdraw script determines the calculation precision of the javascript curve plot !
</li>
<li> no validity check is done by wims.
</li>
<li> zooming & panning are implemented : use command 'zoom color' for mouse driven zooming or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax
</li>
<li> zooming & panning is better than for curves produced by command <a href="#curve">curve color,formula</a> because for avery change in x/y-range the curve is recalculated in javascript
</li>
<li> use command 'trace_jscurve formula(x)` for tracing
</li>
<li> use command 'jsmath formula(x)` for calculating and displaying indiviual points on the curve
</li>
<li> can not be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> (yet)
</li>
<li> commands plotjump / plotstep are not active for 'jscurve'
</li>
<li> every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
</li>
<li> plotting multiple js-curves on the same canvas (for example if you want to use 'userdraw clickfill,color' on <a href="#canvastype">canvastype</a> number 111 ,use : jscurve red,fun1(x),fun2(x)...fun_n(x) you want to specify individual colors | opacity | linewidth for these multiple js-curves. use commands like: <a href="#multistrokecolors">multistrokecolors</a>,<a href="#multilinewidth">multilinewidth</a>, <a href="#multidash">multidash</a> , <a href="multistrokeopacity">multistroke</a> the color given for the command "jscurve color,formulas(x)" will not be used in that case... but the color argument must still be given in any case (otherwise syntax error...)
</li>
</ul>
<li><a name='curve' href='#curve top'> curve color,formula(x)</a><ul>
<li> alernative : plot color,formula(x)
</li>
<li> use command <a href="#trange">trange</a> in parametric functions before command curve / plot (trange -pi,pi) curve color,formula1(t),formula2(t)
</li>
<li> use command <a href="#precision">"precision" </a>to ncrease the number of digits of the plotted points
</li>
<li> use command <a href="#plotsteps">"plotsteps"</a> to increase / decrease the amount of plotted points (default 150)
</li>
<li> may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
</li>
<li> if you need a plot beyond xrange / yrange, use <a href="#jsplot">"jsplot"'</a> (command "curve" will only calculate points within the xrange)
</li>
</ul>
<li><a name='levelcurve' href='#levelcurve top'> levelcurve color,expression in x/y,l1,l2,...</a><ul>
<li> draws very primitive level curves for expression, with levels l1,l2,l3,...,l_n
</li>
<li> the quality is not to be compared with the Flydraw levelcurve. (choose flydraw if you want quality...)
</li>
<li> every individual level curve may be set 'onclick / drag xy' e.g. every single level curve (l1,l2,l3...l_n) has a unique identifier
</li>
<li> note : the arrays for holding the javascript data are limited in size
</li>
<li> note : reduce image size if javascript data arrays get overloaded (command 'plotsteps int' will not control the data size of the plot...)
</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> draw a bezier curve between points, starting from (x_start:y_start)
</li>
<li> can not be dragged or set onclick
</li>
</ul>
<li><a name='trace_jscurve' href='#trace_jscurve top'> trace_jscurve some_math_function</a><ul>
<li> will use a crosshair to trace the jsmath curve
</li>
<li> two inputfields will display the current x/y-values (numerical evaluation by javascript)
</li>
<li> default labels 'x' and 'y' use commands 'xlabel some_x_axis_name' and 'ylabel some_y_axis_name' to customize the labels for the input fields
</li>
<li> use commands fontsize and inputstyle to format the fonts for labels and inputfields.
</li>
<li> use commands linewidth,strokecolor,crosshairsize to adjust the corsshair.
</li>
<li> the client browser will convert your math function to javascript math. use parenthesis and rawmath : use 2*x instead of 2x etc etc no check is done on the validity of your function and/or syntax use error console to debug any errors...
</li>
<li> be aware that the formula's of the plotted function(s) can be found in the page javascript source
</li>
</ul>
<li><a name='jsmath' href='#jsmath top'> jsmath some_math_function</a><ul>
<li> will calculate an y-value from a userinput x-value and draws a crosshair on these coordinates.
</li>
<li> default labels 'x' and 'y' the commands 'xlabel some_x_axis_name' and 'ylabel some_y_axis_name' will set the label for the input fields
</li>
<li> use command 'inputstyle some_css' for styling the display fields. Use command 'fontsize int' to size the labels 'x' and 'y'
</li>
<li> example: jsmath sin(x^2)
</li>
<li> the client browser will convert your math function to javascript math. use parenthesis and rawmath : use 2*x instead of 2x etc etc no check is done on the validity of your function and/or syntax use error console to debug any errors...
</li>
<li> be aware that the formula's of the plotted function(s) can be found in the page javascript source
</li>
</ul>
<li><a name='text' href='#text top'> text fontcolor,x,y,font,text_string</a><ul>
<li> font may be described by keywords : giant,huge,normal,small,tiny
</li>
<li> use command 'fontsize' to increase base fontsize for these keywords
</li>
<li> may be set "onclick" or "drag xy"
</li>
<li> backwards compatible with flydraw
</li>
<li> unicode supported: text red,0,0,huge,\u2232
</li>
<li> use command 'string' combined with 'fontfamily' for a more fine grained control over html5 canvas text element
</li>
<li> Avoid mixing old flydraw commands 'text' 'textup' with new canvasdraw commands 'string' stringup' If the fontfamily was set completely like "fontfamily italic 24px Ariel". In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
</li>
</ul>
<li><a name='textup' href='#textup top'> textup fontcolor,x,y,font,text_string</a><ul>
<li> can not be set "onclick" or "drag xy" (because of translaton matrix...mouse incompatible)
</li>
<li> font may be described by keywords : giant,huge,normal,small,tiny
</li>
<li> use command 'fontsize' to increase base fontsize for the keywords
</li>
<li> backwards compatible with flydraw
</li>
<li> unicode supported: textup red,0,0,huge,\u2232
</li>
<li> use command 'stringup' and 'fontfamily' for a more fine grained control over html5 canvas text element
</li>
<li> Avoid mixing old flydraw commands 'text' 'textup' with new canvasdraw commands 'string' stringup' If the fontfamily was set completely like "fontfamily italic 24px Ariel". In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
</li>
</ul>
<li><a name='fontfamily' href='#fontfamily top'> fontfamily font_description</a><ul>
<li> set the font family; for browsers that support it
</li>
<li> font_description: Ariel ,Courier, Helvetica etc
</li>
<li> in case commands 'string color,x,y,the string' 'stringup color,x,y,rotation,the string' fontfamily can be something like: italic 34px Ariel
</li>
<li> use correct syntax : 'font style' 'font size'px 'fontfamily'
</li>
</ul>
<li><a name='stringup' href='#stringup top'> stringup color,x,y,rotation_degrees,the text string</a><ul>
<li> can not be set "onclick" or "drag xy" (because of translaton matrix...mouse incompatible)
</li>
<li> unicode supported: stringup red,0,0,45,\u2232
</li>
<li> use a command like 'fontfamily bold 34px Courier' to set fonts on browser that support font change
</li>
</ul>
<li><a name='string' href='#string top'> string color,x,y,the text string</a><ul>
<li> may be set "onclick" or "drag xy"
</li>
<li> unicode supported: string red,0,0,\u2232
</li>
<li> use a command like 'fontfamily italic 24px Ariel' to set fonts on browser that support font change
</li>
</ul>
<li><a name='centerstring' href='#centerstring top'> centerstring color,y-value,the text string</a><ul>
<li> title color,y-value,the text string
</li>
<li> draw a string centered on the canvas at y = y-value
</li>
<li> can not be set "onclick" or "drag xy" (...)
</li>
<li> unicode supported: centerstring red,5,\u2232
</li>
<li> use a command like 'fontfamily italic 24px Ariel' to set fonts on browser that support font change
</li>
</ul>
<li><a name='mathml' href='#mathml top'> mathml x1,y1,x2,y2,mathml_string</a><ul>
<li> mathml will be displayed in a rectangle left top (x1:y1) , right bottom (x2:y2)
</li>
<li> can be set onclick (however dragging is not supported) javascript:read_dragdrop(); will return click number of mathml-object
</li>
<li> if inputfields are incorporated in mathml (with id's : id='mathml0',id='mathml1',...id='mathml_n') the user_input values will be read by javascript:read_mathml(); attention: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
</li>
<li> If other inputfields (command input / command textarea) or userdraw is performed, the function read_canvas() will not read mathml. Use some generic function to read it....
</li>
</ul>
<li><a name='http' href='#http top'> http x1,y1,x2,y2,http://some_adress.com</a><ul>
<li> an active html-page will be displayed in an "iframe" rectangle left top (x1:y1) , right bottom (x2:y2)
</li>
<li> do not use interactivity (or mouse) if the mouse needs to be active in the iframe
</li>
<li> can not be 'set onclick' or 'drag xy'
</li>
</ul>
<li><a name='html' href='#html top'> html x1,y1,x2,y2,html_string</a><ul>
<li> all tags are allowed html-code using inputfields could be read using your own javascript-code. Do not use id's like 'canvas_input0' etc.
</li>
<li> can be set onclick (however dragging not supported)
</li>
</ul>
<li><a name='noaxis' href='#noaxis top'> noaxis</a><ul>
<li> keyword
</li>
<li> if set, the automatic x-axis numbering will be ignored
</li>
<li> use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="grid">grid</a>
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<li><a name='noayis' href='#noayis top'> noayis</a><ul>
<li> keyword
</li>
<li> if set, the automatic y-axis numbering will be ignored
</li>
<li> use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="grid">grid</a>
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<li><a name='xaxis' href='#xaxis top'> xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
<li>alternative command:<a name='xaxistext' href='#xaxistext top'>xaxistext</a></li>
<li> use these x-axis num1...num_n values instead of default xmin...xmax
</li>
<li> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
</li>
<li> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="grid">grid</a>
</li>
<li> use command "fontcolor", "fontfamily" to adjust font defaults: black,12,Ariel note: command "fontsize" is not active for this command.("fontsize" can be used for the <a href="#legend">"legend"</a> in a <a href="#grid">grid</a>)
</li>
<li> a javascript error message will flag non-matching value:name pairs
</li>
<li> if the 'x-axis words' are too big and will overlap, a simple alternating offset will be applied
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
<li> example: size 400,400 xrange 0,13 yrange -100,500 axis xaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december #'xmajor' steps should be synchronised with numbers eg. "1" in this example grid 1,100,grey,1,4,6,grey
</li>
</ul>
<li><a name='xaxisup' href='#xaxisup top'> xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
<li>alternative command:<a name='xaxistextup' href='#xaxistextup top'>xaxistextup</a></li>
<li> the text will be rotated 90° up
</li>
<li> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
</li>
<li> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="grid">grid</a>
</li>
<li> use these x-axis num1...num_n values instead of default xmin...xmax
</li>
<li> use command "fontcolor","fontfamily" to adjust font defaults: black,12,Ariel note: command "fontsize" is not active for this command.("fontsize" can be used for the <a href="#legend">"legend"</a> in a <a href="#grid">grid</a>)
</li>
<li> a javascript error message will flag non-matching value:name pairs
</li>
<li> if the 'x-axis words' are too big, they will overlap the graph (in this case the text will start from ysize upwards)
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
<li> example: size 400,400 xrange 0,13 yrange -100,500 axis xaxisup 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december #'xmajor' steps should be synchronised with numbers eg. "1" in this example grid 1,100,grey,1,4,6,grey
</li>
</ul>
<li><a name='yaxis' href='#yaxis top'> yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n</a><ul>
<li> alternativ : yaxistext num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
</li>
<li> use command "fontcolor", "fontfamily" to adjust font defaults: black,12,Ariel note: command "fontsize" is not active for this command.("fontsize" can be used for the <a href="#legend">"legend"</a> in a <a href="#grid">grid</a>)
</li>
<li> no need to use keyword <a href="#axisnumbering">axisnumbering</a>
</li>
<li> use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="grid">grid</a>
</li>
<li> use these y-axis num1...num_n values instead of default ymin...ymax
</li>
<li> a javascript error message will flag non-matching value:name pairs
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
<li> example: size 400,400 yrange 0,13 xrange -100,500 axis yaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december #'ymajor' steps should be synchronised with numbers eg. "1" in this example grid 100,1,grey,4,1,6,grey
</li>
</ul>
<li><a name='axisnumbering' href='#axisnumbering top'> axisnumbering</a><ul>
<li> keyword (no arguments required)
</li>
<li> 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>
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<li><a name='axis' href='#axis top'> axis</a><ul>
<li> keyword (no arguments required)
</li>
<li> to be used before command grid (see <a href="#grid">command grid</a>)
</li>
</ul>
<li><a name='killslider' href='#killslider top'> killslider</a><ul>
<li> keyword (no arguments required)
</li>
<li> ends grouping of object under a previously defined slider
</li>
</ul>
<li><a name='sliderfunction_x' href='#sliderfunction_x top'> sliderfunction_x some_function_in_x</a><ul>
<li> default value "x"
</li>
<li> the x-value of the slider object(s) will be calculated with this function.
</li>
<li> default is the x-slider value itself
</li>
<li> only used by command 'slider'
</li>
<li> define before a slider command !
</li>
</ul>
<li><a name='sliderfunction_y' href='#sliderfunction_y top'> sliderfunction_y some_function_in_y</a><ul>
<li> default value "y"
</li>
<li> the y-value of the slider object(s) will be calculated with this function.
</li>
<li> only used by command 'slider'
</li>
<li> define before a slider command !
</li>
</ul>
<li><a name='slider' href='#slider top'> slider start_value,end_value,width px,height px,type,label</a><ul>
<li> type may be : xy,x,y,angle
</li>
<li> if a slider value display is desired, use for argument type: xy display x display y display angle radian angle degree
</li>
<li> if a unit (or something like that...) for x/y-value display is needed, use commands 'xunit' and / or 'yunit'
</li>
<li> if the translation should be performed using a function, use for type: xy function,x function,y function use commands sliderfunction_x and/or sliderfunction_y before the slider command to define the functions example: sliderfunction_x x^2 sliderfunction_y y^2 slider -5,5,100,100,xy function,Some_Text ...some stuff to slide killslider sliderfunction_x x^2-2 slider -15,15,100,10,x function,Some_Other_Text ...more stuff to slide killslider ... etc
</li>
<li> use command 'slider' before draggable/clickable objects.
</li>
<li> drag and drop may be combined with rotation slider for example an arrow rotated by a slider may be placed anywhere (drag&drop)size 300,300 xrange -5,5 yrange -5,5 grid 1,1,grey linewidth 3 drag xy fillcolor orange strokecolor blue slider 0,2*pi,250,30,angle degrees,Rotate arrow arrow 2,2,5,5,8,red
</li>
<li> no slider for a math function, these can be traced using command 'trace_jscurve some_function_in_x'
</li>
<li> a slider will affect all draggable objects after the 'slider' command... and can be used to group translate / rotate several objects... until a next 'slider' or keyword 'killslider'
</li>
<li> amount of sliders is not limited.
</li>
<li> javascript:read_dragdrop(); will return an array with 'object_number:slider_value'
</li>
<li> type=xy: will produce a 2D 'slider' [rectangle width x heigh px] in your web page
</li>
<li> every draggable object may have its own slider (no limit in amount of sliders)
</li>
<li> label: some slider text
</li>
<li> use fillcolor for slider ball
</li>
<li> use strokecolor for slider bar
</li>
<li> use fontfamily / fontcolor to set used fonts
</li>
<li> use opacity (only fill opacity will be used) to set transparency
</li>
<li> the slider canvas will be added to the 'tooltip div' : so incompatible with command tooltip ; setlimits etc
</li>
</ul>
<li><a name='sgraph' href='#sgraph top'> sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color</a><ul>
<li> primitive implementation of a 'broken scale' graph...
</li>
<li> not very versatile: only usable in combination with userdraw eg no other objects will obey this "coordinate system" if you want to place an object into this coordinate system, be aware that 10% or 20% of xsize and/or ysize is 'lost'. Use these "formulas" to recalculate the virtual coordinates: factor=0.8 in case xstart != xmin (or ystart != ymin) factor=0.9 in case xstart = xmin (or ystart = ymin) px_x_point = ((factor*xsize)/(xmax - xstart))*(x_point - xmax)+xsize x_recalculated = px*(xmax - xmin)/xsize + $xmin px_y_point = -1*factor*y_point*ysize/(ymax - ystart) + ymax*factor*ysize/(ymax - ystart) y_recalculated = ymax - py*(ymax - ymin)/ysize
</li>
<li> example: size 400,400 xrange 0,10000 yrange 0,100 sgraph 9000,50,100,10,4,4,grey,blue userinput_xy linewidth 2 userdraw segments,red
</li>
</ul>
<li><a name='grid' href='#grid top'> grid step_x,step_y,gridcolor</a><ul>
<li> if keywords <a href="#axis">"axis"</a> or <a href="#axisnumbering">"axisnumbering"</a> are set, use : grid step_x,step_y,major_color,minor_x,minor_y,tics height in px,axis_color minor x step = step_x / minor_x
</li>
<li> in that case, use command <a href="#fontcolor">"fontcolor"</a>, <a href="#fontsize">"fontsize"</a> and / or <a href="#fontfamily">"fontfamily"</a> to adjust font defaults: black,12,Ariel
</li>
<li> if xmin > 0 and/or ymin > 0 and zooming / panning is not activ: be aware that the x/y-axis numbering and x/y major/minor tic marks will not be visual as they are placed under the x-axis and left to the y-axis (in Quadrant II and IV)
</li>
<li> can not be set <a href="#onclick">"onclick"</a> or <a href="#drag">"drag xy"</a>
</li>
<li> use commands <a href="#xlabel">'xlabel some_string'</a> and/or <a href="#ylabel">'ylabel some_string'</a> to label axis; use command "fontsize" to adjust size:the font family is non-configurable 'italic your_fontsize px Ariel' !
</li>
<li> see commands (see <a href="#xaxis">"xaxis" or xaxistext"</a>, <a href="#yaxis">"yaxis" or "yaxistext"</a> to set tailormade values on axis (the used font is set by <a href="fontfamily">command fontfamily</a>; default '12px Ariel')
</li>
<li> see command <a href="#legend">"legend"</a>to set a legend for the graph ; use command <a href="#fontsize">"fontsize"</a> to adjust size (the font family is non-configurable 'bold your_fontsize px Ariel')
</li>
</ul>
<li><a name='opacity' href='#opacity top'> opacity 0-255,0-255</a><ul>
<li> opacity 0.0 - 1.0,0.0 - 1.0
</li>
<li>alternative command:<a name='transparent' href='#transparent top'>transparent</a></li>
<li> first item is stroke opacity, second is fill opacity
</li>
</ul>
<li><a name='rotationcenter' href='#rotationcenter top'> rotationcenter x_center,y_center</a><ul>
<li> define an rotation center in your x/y-coordinate system
</li>
<li> wims will not check the validity of your input; use javascript console to debug any erors
</li>
<li> if not defined a rotation will be around the first point of an object
</li>
<li> to be used before command <a href="#rotate">rotate</a>
</li>
<li> all other commands will use this rotation center, unless a <a href="#killrotation">killrotation</a> is given
</li>
</ul>
<li><a name='rotate' href='#rotate top'> rotate rotation_angle</a><ul>
<li> angle in degrees
</li>
<li> (only) the next object will be rotated is given angle
</li>
<li> positive values rotate counter clockwise
</li>
<li> attention: all objects will be rotated around their first point... rotate 45 triangle 1,1,5,1,3,4,red will rotate 45 degrees around point (1:1)
</li>
<li> if another rotation center is needed, use command <a href="#rotationcenter">'rotationcenter xc,yc'</a>. to reset this rotationcenter, use keyword <a href="killrotate">'killrotate'</a>
</li>
<li> attention: rotate will mess up the interactivity of the rotated object e.g. if combined with command <a href="#drag">"drag xy"</a> or keyword <a href="onclick">"onclick"</a> : the mouse recognises the original -unrotated- coordinates of the object
</li>
</ul>
<li><a name='killrotate' href='#killrotate top'> killrotate will reset the command <a href="#rotationcenter">rotationcenter xc,yc</a></a><ul>
<li> a following rotate command will have the first object point as rotation center
</li>
<li> if not set, the rotation center will remain unchanged
</li>
</ul>
<li><a name='killaffine' href='#killaffine top'> killaffine</a><ul>
<li> keyword : resets the transformation matrix to 1,0,0,1,0,0
</li>
</ul>
<li><a name='affine' href='#affine top'> affine a,b,c,d,tx,ty</a><ul>
<li> defines a transformation matrix for subsequent objects
</li>
<li> images drawn by setting skew params a & d will be very different from Flydraw's "affine a,b,c,d,e,tx,ty" !!
</li>
<li> use keyword 'killaffine' to end the transformation
</li>
<li> note 1: only 'draggable' / 'noclick' objects can be transformed.
</li>
<li> note 2: do not use 'onclick' or 'drag xy' with tranformation objects : the mouse coordinates do not get transformed (yet)
</li>
<li> note 3: no matrix operations on the transformation matrix implemented (yet)
</li>
<li> a : Scales the drawings horizontally
</li>
<li> b : Skews the drawings horizontally
</li>
<li> c : Skews the drawings vertically
</li>
<li> d : Scales the drawings vertically
</li>
<li> tx: Moves the drawings horizontally in xrange coordinate system
</li>
<li> ty: Moves the drawings vertically in yrange coordinate system
</li>
<li> the data precision may be set by preceding command "precision int"
</li>
</ul>
<li><a name='killtranslation' href='#killtranslation top'> killtranslation</a><ul>
<li>alternative command:<a name='killtranslate' href='#killtranslate top'>killtranslate</a></li>
<li> resets the translation matrix to 1,0,0,1,0,0
</li>
</ul>
<li><a name='translation' href='#translation top'> translation tx,ty</a><ul>
<li>alternative command:<a name='translate' href='#translate top'>translate</a></li>
<li> will translate the next objects tx in xrange and ty in yrange
</li>
<li> use command 'killtranstation' to end the command
</li>
</ul>
<li><a name='animate' href='#animate top'> animate type</a><ul>
<li> REMOVED : this should be done with a slider
</li>
<li> type may be "point" (nothing else , yet...)
</li>
<li> the point is a filled rectangle ; adjust colour with command 'fillcolor colorname/hexnumber'
</li>
<li> will animate a point on the next plot/curve command
</li>
<li> the curve will not be draw
</li>
<li> moves repeatedly from xmin to xmax
</li>
</ul>
<li><a name='dashed' href='#dashed top'> dashed</a><ul>
<li> keyword (no arguments required)
</li>
<li> next object will be drawn with a dashed line
</li>
<li> change dashing scheme by using command <a href="#dashtype">dashtype</a>
</li>
</ul>
<li><a name='filled' href='#filled top'> filled</a><ul>
<li> keyword (no arguments required)
</li>
<li> the next 'fillable' object (only) will be filled
</li>
<li> use command "fillcolor color" to set fillcolor
</li>
<li> use command "opacity 0-255,0-255" to set stroke and fill-opacity
</li>
<li> use command "fill x,y,color" or "floodfill x,y,color" to fill the space around (x;y) with color pixel operation implemented in javascript: use with care !
</li>
</ul>
<li><a name='highlight' href='#highlight top'> highlight color,opacity,linewidth</a><ul>
<li> NOT IMPLEMENTED
</li>
<li> use command "onclick" : when the object receives a userclick it will increase its linewidth
</li>
</ul>
<li><a name='fillcolor' href='#fillcolor top'> fillcolor colorname or #hex</a><ul>
<li> set the color for a filled object : mainly used for command 'userdraw obj,stroke_color'
</li>
<li> all fillable massive objects will have a fillcolor == strokecolor (just to be compatible with flydraw...)
</li>
</ul>
<li><a name='strokecolor' href='#strokecolor top'> strokecolor colorname or #hex</a><ul>
<li> to be used for commands that do not supply a color argument (like command 'linegraph')
</li>
</ul>
<li><a name='bgimage' href='#bgimage top'> bgimage image_location</a><ul>
<li> use an image as background . technical: we use the background of 'canvas_div'
</li>
<li> the background image will be resized to match "width = xsize" and "height = ysize"
</li>
</ul>
<li><a name='bgcolor' href='#bgcolor top'> bgcolor colorname or #hex</a><ul>
<li> use this color as background of the "div" containing the canvas(es)
</li>
</ul>
<li><a name='copy' href='#copy top'> copy x,y,x1,y1,x2,y2,[filename URL]</a><ul>
<li> The image may be "bitmap" or "SVG"
</li>
<li> Insert the region from (x1,y1) to (x2,y2) (in pixels) of [filename] to (x,y) in x/y-range
</li>
<li> If x1=y1=x2=y2=-1, the whole [filename URL] is copied.
</li>
<li> [filename] is the URL of the image
</li>
<li> URL is normal URL of network reachable image file location (eg special url for 'classexo' not -yet- implemented)
</li>
<li> if command <a href="#drag">'drag x/y/xy'</a> is set before command 'copy', the images will be draggable javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images the command drag is only valid for the next image draggable / non-draggable images may be mixed may be used together with preceding keywords 'snaptogrid','xsnaptogrid','ysnaptogrid' or 'snaptopoints x1,y1,x2,y2...'
</li>
<li> if keyword <a href="#onclick">'onclick'</a> is set before command 'copy' the image(s) is clickable (marked with a green rectangle around the image) use 'read_dragdrop' to get the number of the clicked image(s) use command 'clearbutton some_text' to reset the reply/click array. example: 4 images; student clicked on image 2 and 3 : reply = 0,1,1,0 after clicking the clear button: reply = 0,0,0,0 May be mixed with commands 'drag x|y|xy' (use javascript read_canvas to get the new coordinates
</li>
<li> 'onclick' for external images may be mixed with canvas generated stuff (like lines,curves etc)
</li>
<li> you may draw / userdraw / drag other stuff on top of an "imported" image
</li>
</ul>
<li><a name='copyresized' href='#copyresized top'> copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url</a><ul>
<li> The image may be any "bitmap" or "SVG"
</li>
<li> Insert the region from (x1,y1) to (x2,y2) (in pixels) of [ filename], possibly resized, to the region of (dx1,dy1) to (dx2,dy2) in x/y-range
</li>
<li> (dx1:dy1) must be left top corner; (dx2 :dy2) must be right bottom corner of inserted image
</li>
<li> If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized.
</li>
<li> URL is normal URL of network reachable image file location (as seen from public_html-root or network reachable 'http://some_server/my_images/test.gif' (eg no special wims paths are searched !!)
</li>
<li> if command <a href="#drag">'drag x/y/xy'</a> is set before command 'copy', the images will be draggable javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images the command drag is only valid for the next image draggable / non-draggable images may be mixed may be used together with preceding keywords 'snaptogrid','xsnaptogrid','ysnaptogrid' or 'snaptopoints x1,y1,x2,y2...'
</li>
<li> if keyword <a href="#onclick">'onclick'</a> is set before command 'copy' the image(s) is clickable (marked with a green rectangle around the image) use 'read_dragdrop' to get the number of the clicked image(s) use command 'clearbutton some_text' to reset the reply/click array. example: 4 images; student clicked on image 2 and 3 : reply = 0,1,1,0 after clicking the clear button: reply = 0,0,0,0 May be mixed with commands 'drag x|y|xy' (use javascript read_canvas to get the new coordinates
</li>
<li> 'onclick' for external images may be mixed with canvas generated stuff (like lines,curves etc)
</li>
<li> you may draw / userdraw / drag stuff on top of an "imported" image
</li>
</ul>
<li><a name='clearbutton' href='#clearbutton top'> clearbutton value</a><ul>
<li>alternative command:<a name='delete' href='#delete top'>delete</a></li>
<li>alternative command:<a name='erase' href='#erase top'>erase</a></li>
<li> adds a button to clear the <a href="#userdraw">userdraw</a> canvas with text 'value'
</li>
<li> attention command 'clearbutton' is incompatible with <a href="multidraw">multidraw</a> based drawings (in 'multidraw' there is always a remove_object_button for every drawprimitive)
</li>
<li> normally <a href="#userdraw">userdraw</a> primitives have the option to use middle/right mouse button on a point of the object to remove this specific object...this clear button will remove all drawings
</li>
<li> uses the tooltip placeholder div element: may not be used with command 'intooltip'
</li>
<li> use command <a href="#inputstyle">'inputstyle'</a> to style the button...
</li>
<li> the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script to change the style of all "clearbutton" of all included canvasdraw scripts, use something like if(document.getElementById("clearbutton"+canvas_scripts[0])){  var p = 0;  while(document.getElementById("clearbutton"+canvas_scripts[p])){   document.getElementById("clearbutton"+canvas_scripts[p]).className="some_class_name";   <!−− or document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); −−>   p++;  }; };
</li>
</ul>
<li><a name='inputstyle' href='#inputstyle top'> inputstyle style_description</a><ul>
<li> may be used before any 'style-able' html object.(like inputfields or buttons) or any html objects that are generated by some canvasdraw commands
</li>
<li> example: inputstyle color:blue;font-weight:bold;font-style:italic;font-size:16pt
</li>
</ul>
<li><a name='input' href='#input top'> input x,y,size,editable,value</a><ul>
<li> to set inputfield "readonly", use editable = 0
</li>
<li> only active inputfields (editable = 1) will be read with read_canvas();
</li>
<li> if "$status=done" (e.g. in answer.phtml) the inputfield will be cleared and set readonly override this by keyword <a href="#status">'status'</a>
</li>
<li> may be further controlled by <a href="#inputstyle">"inputstyle"</a> (inputcss is not yet implemented...)
</li>
<li> if mathml inputfields are present and / or some userdraw is performed, these data will not be send as well (javascript:read_canvas();)
</li>
</ul>
<li><a name='textarea' href='#textarea top'> textarea x,y,cols,rows,readonly,value</a><ul>
<li> may be further controlled by <a href="#inputstyle">"inputstyle"</a>
</li>
<li> if "$status=done" (e.g. in answer.phtml) the inputfield will be cleared and set readonly override this by keyword <a href="#status">'status'.</a>
</li>
<li> if mathml inputfields are present and / or some userdraw is performed, these data will not be send as well (javascript:read_canvas();)
</li>
</ul>
<li><a name='precision' href='#precision top'> precision int</a><ul>
<li> 1 = no decimals ; 10 = 1 decimal ; 100 = 2 decimals etc
</li>
<li> may be used / changed before every object
</li>
<li> In case of user interaction (like 'userdraw' or 'multidraw') this value will be used to determine the amount of decimals in the reply / answer
</li>
</ul>
<li><a name='setlimits' href='#setlimits top'> setlimits</a><ul>
<li> keyword : if set, it will produce 4 inputfields for 'xmin,xmax,ymin,ymax' and an 'ok' button
</li>
<li> may be used for inputfield based zooming / panning
</li>
<li> may be styled using command <a href="#inputstyle">inputstyle</a>
</li>
<li> use commands <a href="#xlabel">xlabel / ylabel</a> to change text from xmin to 'xlabel' etc
</li>
<li> note:the input value will not be checked on validity
</li>
</ul>
<li><a name='zoom' href='#zoom top'> zoom button_color</a><ul>
<li> introduce a very small 'controlpanel' at the lower right corner
</li>
<li> giving six 15×15px 'active' rectangle areas (for ×,leftarrow,rightarrow,uparrow,downarrow and a '-' and a '+' sign ) for zooming and/or panning of the image
</li>
<li> the 'x' symbol will do a 'location.reload' of the page, and thus reset all canvas drawings.
</li>
<li> choose an appropriate colour, so the small 'x,arrows,-,+' are clearly visible
</li>
<li> command 'opacity' may be used to set stroke_opacity of 'buttons
</li>
<li> note: use command 'zoom' at the end of your script code (the same is true for command 'mouse')
</li>
<li> note: only objects that may be set draggable / clickable will be zoomed / panned
</li>
<li> note: when an object is dragged, zooming / panning will cause the coordinates to be reset to the original position :( e.g. dragging / panning will get lost. (array with 'drag data' is erased) This is a design flaw and not a feature !!
</li>
</ul>
<li><a name='onclick' href='#onclick top'> onclick</a><ul>
<li> keyword (no arguments required)
</li>
<li> if the next object is clicked, its 'object onclick_or_drag sequence number' in fly script is returned by javascript:read_canvas();
</li>
<li> onclick seqeuence numbering starts at '0'. e.g. if there are 6 objects set onclick, the first onclick object will have id-number '0', the last id-number '5'
</li>
<li> line based objects will show an increase in line width font based objects will show the text in 'bold' when clicked.
</li>
<li> the click zone (accuracy) is determined by 2× the line width of the object
</li>
<li> onclick and <a href="#drag">drag x|y|xy</a> may be combined in a single flyscript (although a single object can not be onclick and draggable at the same time...)
</li>
<li> note: not all objects may be set onclick
</li>
</ul>
<li><a name='drag' href='#drag top'> drag [x][y][xy]</a><ul>
<li> the next object will be draggable in x / y / xy direction
</li>
<li> the displacement can be read by 'javascript:read_dragdrop();'
</li>
<li> the precision (default 2 decimals) in the student reply may be set with command <a href="#precision">'precision'.</a> Use this 'precision' command before this command 'drag x|y|xy' !
</li>
<li> 'onclick' and 'drag x|y|xy' may be combined (for different objects: a single object can either be onclick or drag , not both )
</li>
<li> 'multi_objects' will be numbered in the given x/y-sequence (example: points red,0,0,1,1,2,2,3,3 : point (0:0) is object_number 1)
</li>
<li> attention: static objects and 'onclick/drag' objects of the same type (like point,circle,etc) with the same coordinates (e.g. objects that overlap) will give problems in the 'recognition algorithm') in this example linewidth 4 point 0,0,red drag xy point 0,0,blue the blue point will not be recognised as draggable ! linewidth 4 drag xy point 0,0,red drag xy point 0,0,blue both points will be recognised
</li>
<li> the answer is : drag_or_onclick_object_number : Xorg : Yorg : Xnew : Ynew wherein object_number is the sequence number of the draggable & onclick objects in your script. Only draggable & onclick objects will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc)
</li>
<li> use keyword 'snaptogrid' , 'xsnaptogrid' , 'ysnaptogrid' or command 'snaptopoints x1,y1,x2,y2,...' to switch from free to discrete movement
</li>
<li> in case of external images (commands copy / copyresized) the external image can be set draggable ; always xy. The function javascript;read_canvas() will return the xy-coordinates of all images.
</li>
<li> note: in case an object is dragged , zooming or panning will cause the coordinates to be reset to the original position :( e.g. dragging / panning will get lost. (array with 'drag data' is erased) This is a design flaw and not a feature !!
</li>
</ul>
<li><a name='blink' href='#blink top'> blink time(seconds)</a><ul>
<li> NOT IMPLEMETED -YET
</li>
</ul>
<li><a name='xunit' href='#xunit top'> xunit some_unit_for_x-values</a><ul>
<li> unicode allowed (no html code)
</li>
<li> use together with command mousex
</li>
<li> will display the cursor x-coordinate in 'unit'
</li>
</ul>
<li><a name='yunit' href='#yunit top'> yunit some_unit_for_y-values</a><ul>
<li> unicode allowed (no html code)
</li>
<li> use together with command mousey
</li>
<li> will display the cursor y-coordinate in 'unit'
</li>
</ul>
<li><a name='cursor' href='#cursor top'> cursor 'some CSS cursor_style'</a><ul>
<li>alternative command:<a name='pointer' href='#pointer top'>pointer</a></li>
<li> style can be any valid CSS property value, like crosshair,grabbing,move etc
</li>
<li> wims will not check the validity of your cursor declaration
</li>
</ul>
<li><a name='display' href='#display top'> display TYPE,color,fontsize</a><ul>
<li> TYPE may be x | y | xy | degree | radian | radius
</li>
<li> will display the mouse cursor coordinates as x-only,y-only,(x:y), the radius of a circle (this only in case 'userdraw circle(s),color') or the angle in degrees or radians for commands "userdraw arc,color" or protractor , ruler (if set dynamic)
</li>
<li> use commands 'xunit' and / or 'yunit' to add the units to the mouse values. The "degree | radian" will always have the appropriate symbol)
</li>
<li> just like commands 'mouse','mousex','mousey','mouse_degree'...only other name)
</li>
</ul>
<li><a name='mouse_degree' href='#mouse_degree top'> mouse_degree color,fontsize</a><ul>
<li> will display the angle in degrees between x-axis, (0:0) and the cursor (x:y) in 'color' and 'font size' using a fontfamily Ariel
</li>
<li> The angle is positive in QI and QIII and the angle value is negative in QII and QIV
</li>
<li> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
</li>
</ul>
<li><a name='mousex' href='#mousex top'> mousex color,fontsize</a><ul>
<li> will display the cursor x-coordinate in 'color' and 'font size' using the fontfamily Ariel
</li>
<li> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
</li>
</ul>
<li><a name='mousey' href='#mousey top'> mousey color,fontsize</a><ul>
<li> will display the cursor y-coordinate in 'color' and 'font size' using default fontfamily Ariel
</li>
<li> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
</li>
</ul>
<li><a name='mouse' href='#mouse top'> mouse color,fontsize</a><ul>
<li> will display the cursor (x:y) coordinates in 'color' and 'font size' using default fontfamily Ariel
</li>
<li> note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
</li>
</ul>
<li><a name='intooltip' href='#intooltip top'> intooltip link_text</a><ul>
<li> link_text is a single line (span-element)
</li>
<li> link_text may also be an image URL 'http://some_server/images/my_image.png' or '$module_dir/gifs/my_image.jpg'
</li>
<li> link_text may contain HTML markup
</li>
<li> the canvas will be displayed in a tooltip on 'link_text'
</li>
<li> the canvas is default transparent: use command <a href="#bgcolor">'bgcolor color'</a> to adjust background-color the link text will also be shown with this 'bgcolor'.
</li>
<li> many 'userinput stuff' will use the tooltip_placeholder_div element...only one is defined in the wims-page and are therefor these commands are mutually exclusive. keep this in mind...
</li>
</ul>
<li><a name='popup' href='#popup top'> popup</a><ul>
<li> keyword (no arguments)
</li>
<li> if fly-script starts with keyword 'popup', the canvas image will be exclusively in a popup window (xsize px × ysize px)
</li>
<li> if keyword 'popup' is used after command 'size xsize,ysize' the canvas will also be displayed in a popup window with size 'xsize × ysize'
</li>
<li> the popup window will be embedded into the page as a 'normal' image , when 'status=done' ; override with keyword <a href="#status"> 'nostatus'</a>
</li>
<li> to access the read_canvas and read_dragdrop functions in a popup window, use: function read_all(){ if( typeof popup !== 'undefined' ){ var fun1 = popup['read_dragdrop'+canvas_scripts[0]]; var fun2 = popup['read_canvas'+canvas_scripts[0]]; popup.close(); return "dragdrop="+fun1()+"\ncanvas="+fun2(); };
</li>
<li> to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: popup.set_clock(clock_id,type,diff); as js-function for a button (or something else) in your document page. wherein clock_id starts with 0 for the first clock type is 1 for Hours,2 for Minutes and 3 for Seconds diff is the increment (positive or negative) per click
</li>
</ul>
<li><a name='audio' href='#audio top'> audio x,y,w,h,loop,visible,audiofile location</a><ul>
<li> x,y : left top corner of audio element (in xrange / yrange)
</li>
<li> w,y : width and height in pixels
</li>
<li> loop : 0 or 1 ( 1 = loop audio fragment)
</li>
<li> visible : 0 or 1 (1 = show controls)
</li>
<li> audio format may be in *.mp3 or *.ogg
</li>
<li> If you are using *.mp3 : be aware that FireFox will not (never) play this ! (Pattented format)
</li>
<li> if you are using *.ogg : be aware that Microsoft based systems not support it natively
</li>
<li> To avoid problems supply both types (mp3 and ogg) of audiofiles. the program will use both as source tag
</li>
<li> example: upload both audio1.ogg and audio1.mp3 to http://server/files/ audio 0,0,http://server/files/audio1.mp3 svdraw will copy html-tag audio1.mp3 to audio1.ogg and the browser will play the compatible file (audio1.ogg or audio1.mp3)
</li>
</ul>
<li><a name='video' href='#video top'> video x,y,w,h,videofile location</a><ul>
<li> x,y : left top corner of audio element (in xrange / yrange)
</li>
<li> w,y : width and height in pixels
</li>
<li> example: wims getfile : video 0,0,120,120,myvideo.mp4
</li>
<li> video format may be in *.mp4 (todo:other formats)
</li>
</ul>
<li><a name='hatchfill' href='#hatchfill top'> hatchfill x0,y0,dx,dy,color</a><ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
</ul>
<li><a name='diamondfill' href='#diamondfill top'> diamondfill x0,y0,dx,dy,color</a><ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
</ul>
<li><a name='gridfill' href='#gridfill top'> gridfill x0,y0,dx,dy,color</a><ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
<li> a draggable object may <a href="#snaptogrid">snap_to_grid</a> (using keywords snaptogrid,xsnaprogrid, ysnaptogrid or snaptopoints)
</li>
<li> userdraw object may snap_to_grid
</li>
</ul>
<li><a name='dotfill' href='#dotfill top'> dotfill x0,y0,dx,dy,color</a><ul>
<li> x0,y0 in xrange / yrange
</li>
<li> distances dx,dy in pixels
</li>
<li> radius of dots is linewidth
</li>
</ul>
<li><a name='imagefill' href='#imagefill top'> imagefill dx,dy,image_url</a><ul>
<li> The next suitable filled object will be filled with "image_url" tiled
</li>
<li> After pattern filling ,the fill-color should be reset !
</li>
<li> wims getins / image from class directory : imagefill 80,80,my_image.gif
</li>
<li> normal url : imagefill 80,80,$module_dir/gifs/my_image.gif
</li>
<li> normal url : imagefill 80,80,http://adres/a/b/c/my_image.jpg
</li>
<li> if dx,dy is larger than the image, the whole image will be background to the next object.
</li>
</ul>
<li><a name='canvastype' href='#canvastype top'> canvastype TYPE</a><ul>
<li> for now only usefull before commands filltoborder / floodfill / clickfill etc operations Only the images of this TYPE will be scanned and filled
</li>
<li> default value of TYPE is DRAG_CANVAS e.g. 5
</li>
<li> use another TYPE if you know what you are doing...
</li>
<li> other possible canvasses (transparent PNG pictures xsize x ysize on top of eachother)<ul><li>EXTERNAL_IMAGE_CANVAS = 0</li><li>BG_CANVAS = 1</li><li> STATIC_CANVAS = 2</li><li> MOUSE_CANVAS = 3 : used for command "mouse"</li><li> GRID_CANVAS = 4 :used for command "grid"</li><li> DRAG_CANVAS = 5 :default</li><li> DRAW_CANVAS = 6 :used for some static drawings</li><li> TEXT_CANVAS = 7 : used for text-strings</li><li> CLOCK_CANVAS = 8 : used for command "clock"</li><li> ANIMATE_CANVAS = 9 : not used for now</li><li> TRACE_CANVAS = 10 : used for command "trace_jscurve"</li><li> JSPLOT_CANVAS = 111 : will be increased with every new command "jscurve"</li> <li> FILL_CANVAS = 12 : this will be filled...so do not use ! </li><li> USERDRAW_JSPLOT 13 : will be increased with every new command "userinput function"</li></ul>
</li>
</ul>
<li><a name='filltoborder' href='#filltoborder top'> filltoborder x,y,bordercolor,color</a><ul>
<li> fill the region of point (x:y) with color 'color'
</li>
<li> any other color will not act as border to the bucket fill
</li>
<li> use this command after all boundary objects are declared.
</li>
<li> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
</li>
<li> note: filltoborder is a very (client) cpu intensive operation! filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels : each pixel contains 4 data (R,G,B,Opacity) = 640000 data. on every data a few operations / comparisons are done... So have pity on your students CPU..
</li>
</ul>
<li><a name='floodfill' href='#floodfill top'> floodfill x,y,color</a><ul>
<li>alternative command:<a name='fill' href='#fill top'>fill</a></li>
<li> fill the region of point (x:y) with color 'color'
</li>
<li> any other color or size of picture (borders of picture) will act as border to the bucket fill
</li>
<li> use this command after all boundary objects are declared.
</li>
<li> Use command 'userdraw clickfill,color' for user click driven flood fill.
</li>
<li> use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
</li>
<li> note: floodfill is a very (client) cpu intensive operation! filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels : each pixel contains 4 data (R,G,B,Opacity) = 640000 data. on every data a few operations / comparisons are done... So have pity on your students CPU..
</li>
</ul>
<li><a name='setpixel' href='#setpixel top'> setpixel x,y,color</a><ul>
<li> A rectangular "point" with diameter 1 pixel centered at (x:y) in xrange / yrange
</li>
<li> pixels can not be dragged or clicked
</li>
<li> "pixelsize = 1" may be changed by command "pixelsize int"
</li>
</ul>
<li><a name='pixelsize' href='#pixelsize top'> pixelsize int</a><ul>
<li> in case you want to deviate from default pixelsize = 1(...)
</li>
</ul>
<li><a name='pixels' href='#pixels top'> pixels color,x1,y1,x2,y2,x3,y3...</a><ul>
<li> draw rectangular "points" with diameter 1 pixel
</li>
<li> pixels can not be dragged or clicked
</li>
<li> "pixelsize = 1" may be changed by command "pixelsize int"
</li>
</ul>
<li><a name='replyformat' href='#replyformat top'> replyformat number</a><ul>
<li> use number=-1 to deactivate the js-functions read_canvas() and read_dragdrop()
</li>
<li> default values should be fine !
</li>
<li> use command 'precision [0,1,10,100,1000,10000...]' before command 'replyformat' to set the desired number of decimals in the student reply / drawing
</li>
<li> the last value for 'precision int' will be used to calculate the reply coordinates, if needed (read_canvas();)
</li>
<li> choose<ul><li>1 = x1,x2,x3,x4....x_n y1,y2,y3,y4....y_n x/y in pixels</li><li>2 = x1,x2,x3,x4....x_n y1,y2,y3,y4....y_n x/y in xrange / yrange coordinate system </li><li>3 = x1,x2,x3,x4....x_n y1,y2,y3,y4....y_n r1,r2,r3,r4....r_n x/y in pixels r in pixels</li><li>4 = x1,x2,x3,x4....x_n y1,y2,y3,y4....y_n r1,r2,r3,r4....r_n x/y in xrange / yrange coordinate system r in pixels</li><li>5 = Ax1,Ax2,Ax3,Ax4....Ax_n Ay1,Ay2,Ay3,Ay4....Ay_n Bx1,Bx2,Bx3,Bx4....Bx_n By1,By2,By3,By4....By_n Cx1,Cx2,Cx3,Cx4....Cx_n Cy1,Cy2,Cy3,Cy4....Cy_n .... Zx1,Zx2,Zx3,Zx4....Zx_n Zy1,Zy2,Zy3,Zy4....Zy_n x/y in pixels </li><li>6 = Ax1,Ax2,Ax3,Ax4....Ax_n Ay1,Ay2,Ay3,Ay4....Ay_n Bx1,Bx2,Bx3,Bx4....Bx_n By1,By2,By3,By4....By_n Cx1,Cx2,Cx3,Cx4....Cx_n Cy1,Cy2,Cy3,Cy4....Cy_n .... Zx1,Zx2,Zx3,Zx4....Zx_n Zy1,Zy2,Zy3,Zy4....Zy_n x/y in xrange / yrange coordinate system </li><li>7 = x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n x/y in pixels</li><li>8 = x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n x/y in xrange / yrange coordinate system</li><li>9 = x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n x/y in pixels</li><li>10 = x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n x/y in xrange / yrange coordinate system</li><li>11 = Ax1,Ay1,Ax2,Ay2 Bx1,By1,Bx2,By2 Cx1,Cy1,Cx2,Cy2 Dx1,Dy1,Dx2,Dy2 ...... Zx1,Zy1,Zx2,Zy2 x/y in xrange / yrange coordinate system</li><li>12 = Ax1,Ay1,Ax2,Ay2 Bx1,By1,Bx2,By2 Cx1,Cy1,Cx2,Cy2 Dx1,Dy1,Dx2,Dy2 ...... Zx1,Zy1,Zx2,Zy2 x/y in pixels</li><li>13 = Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2 x/y in xrange / yrange coordinate system</li><li>14 = Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2 x/y in pixels</li><li>15 = reply from inputfields,textareas reply1,reply2,reply3,...,reply_n</li><li>16 = mathml input fields </li><li>17 = read "userdraw text,color" only (x1,y1,text1 \n x2,y2,text2...\n...x_n,y_n,text_n x/y-values are in xrang/yrange</li><li>18 = read_canvas() will read all interactive clocks in H1:M1:S1,H2:M2:S2...Hn:Mn:Sn</li><li>19 = read_canvas() will return the object number of marked / clicked object (clock) analogue to (shape library) onclick command </li><li>20 = read_canvas() will reply "object_number:x:y" of external images : object_number of the first draggable external image in the fly-script starts with 0 e.g. expect something like 0:-5:4,1:6:2,2:-2:-5 the first image position is (-5:4) , the second image position is (6:2) and the third image position is (-2:-5) <li>21 = (x1:y1) (x2:y2) ... (x_n:y_n) verbatim coordinate return</li><li>22 = returns an array .... reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n x/y in xrange / yrange coordinate system</li><li>23 : can only be used for drawtype 'polyline' a typical click sequence in drawtype polyline is x1,y1,x2,y2,x2,y2,x3,y3,x3,y3.....,x(n-1),y(n-1),x(n-1),y(n-1),xn,yn --replyformat 23--> x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn multiple occurences will be filtered out.The reply will be in x-y-range (xreply \n yreply)</li><li>24 = read all inputfield values: even those set 'readonly'</li><li>25 = angle1,angle2...angle_n : will return the radius (one or many) of the user drawn circle segment in degrees </li><li>26 = rad1,rad2...rad_n : will return the radius (one or many) of the user drawn circle segment in radians </li><li>27 = return (only) userdraw inputfields x1,y1,text1 \n x2,y2,text2...\n...x_n,y_n,text_n</li><li>28 = x1,y1,r1,x2,y2,r2...x_n,y_n,r_n x / y / r in xrange / yrange coordinate system: may be used to reinput into command 'circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n' will not return anything else (e.g. no inputfields , text etc)</li></ul>
</li>
</ul>
<li><a name='legendcolors' href='#legendcolors top'> legendcolors color1:color2:color3:...:color_n</a><ul>
<li> will be used to colour a legend: use this command after the legend command ! e.g. legend test1:test2:test3 legendcolors blue:red:orange
</li>
<li> make sure the number of colours match the number of legend items
</li>
<li> command 'legend' in case of 'piechart' and 'barchart' will use these colours per default (no need to specify 'legendcolors'
</li>
</ul>
<li><a name='legend' href='#legend top'> legend string1:string2:string3....string_n</a><ul>
<li> will be used to create a legend for a graph
</li>
<li> also see command <a href='#piechart'>'piechart'</a>
</li>
<li> will use the same colors per default as used in the graphs : use command <a href='#legendcolors'>'legendcolors'</a> to override the default
</li>
<li> use command <a href="#fontsize">fontsize</a> to adjust. (command "fontfamily" is not active for command "legend")
</li>
</ul>
<li><a name='xlabel' href='#xlabel top'> xlabel some_string</a><ul>
<li> will be used to create a label for the x-axis (label is in quadrant I)
</li>
<li> can only be used together with command 'grid'</a> not depending on keywords 'axis' and 'axisnumbering'
</li>
<li> font setting: italic Courier, fontsize will be slightly larger (fontsize + 4) use command "fontsize" to adjust. (command "fontfamily" is not active for this command)
</li>
</ul>
<li><a name='ylabel' href='#ylabel top'> ylabel some_string</a><ul>
<li> will be used to create a (vertical) label for the y-axis (label is in quadrant I)
</li>
<li> can only be used together with command <a href="#grid">'grid'</a> not depending on keywords 'axis' and 'axisnumbering'
</li>
<li> font setting: italic Courier, fontsize will be slightly larger (fontsize + 4) use command "fontsize" to adjust. (command "fontfamily" is not active for this command)
</li>
</ul>
<li><a name='linegraph' href='#linegraph top'> linegraph x1:y1:x2:y2...x_n:y_n</a><ul>
<li> will plot your data in a graph
</li>
<li> may only to be used together with command <a href='#grid'>'grid'</a>
</li>
<li> 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>
</li>
<li> use command <a href='#legend'>'legend'</a> to provide an optional legend in right-top-corner
</li>
<li> also see command <a href='#piechart'>'piechart'</a>
</li>
<li> multiple linegraphs may be used in a single plot
</li>
<li> note: your arguments are not checked by canvasdraw : use your javascript console in case of trouble...
</li>
<li> <ul><li>use command <a href='#strokecolor'>'strokecolor'</a> before a command 'linegraph' to set the color of this graph</li><li>use command <a href='#linewidth'>'linewidth'</a> before command 'linegraph' to set linewidth of this graph</li><li>use keyword <a href='#dashed'>'dashed'</a> before command 'linegraph' to set dashing of the graph</li><li>if dashing is set, use command <a href='#dashtype'>'dashtype'</a> before command 'linegraph' to set the type of dashing of the (individual) graph</li></ul>
</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> may only to be used together with command <a href='#grid'>'grid'</a>
</li>
<li> 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>
</li>
<li> use command <a href='#legend'>'legend'</a> to provide an optional legend in right-top-corner
</li>
<li> multiple barchart command may be used in a single script
</li>
<li> also see command <a href='#piechart'>'piechart'</a>
</li>
<li> note: your arguments are not checked by canvasdraw : use your javascript console in case of trouble...
</li>
</ul>
<li><a name='clock' href='#clock top'> clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]</a><ul>
<li> use command 'opacity stroke-opacity,fill-opacity' to adjust foreground (stroke) and background (fill) transparency
</li>
<li> type hourglass: type = 0 : only segments type = 1 : only numbers type = 2 : numbers and segments
</li>
<li> colors are optional: if not defined, default values will be used default colours: clock 0,0,60,4,35,45,1,2 custom colours: clock 0,0,60,4,35,45,1,2,,,,yellow,red custom colours: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow
</li>
<li> if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
</li>
<li> interactive <ul><li>0 : not interactive, just clock(s)</li><li>1 : function read_canvas() will read all active clocks in H:M:S format The active clock(s) can be adjusted by pupils</li><li>2 : function read_canvas() will return the clicked clock (like multiplechoice; first clock in script in nr. 0 )</li><li>3: no prefab buttons...create your own buttons (or other means) to make the clock(s) adjustable by javascript function set_clock(num,type,diff) wherein: num = clock id (starts with 0) ; type = 1 (hours) ; type = 2 (minutes) ; type = 3 (seconds) and diff = the increment of 'type' (positive or negative) </li></ul>
</li>
<li> canvasdraw will not check validity of colornames...the javascript console is your best friend
</li>
<li> no combinations with other reply_types allowed, for now
</li>
<li> if interactive is set to '1', 6 buttons per clock will be displayed for adjusting a clock (H+ M+ S+ H- M- S-) set_clock(clock_id,type,incr) first clock has clock_id=0 ; type : H=1,M=2,S=3 ; incr : increment integer
</li>
<li> note: if you need multiple -interactive- clocks on a webpage, use multiple 'clock' commands in a single script ! and not multiple canvas scripts in a single page
</li>
<li> note: clocks will not zoom or pan, when using command <a href='#zoom'>'zoom'</a>
</li>
</ul>
<li><a name='piechart' href='#piechart top'> piechart xc,yc,radius,'data+colorlist'</a><ul>
<li> (xc : yc) center of circle diagram in xrange/yrange
</li>
<li> radius in pixels
</li>
<li> data+color list: a colon separated list of raw data and corresponding colours canvasdraw will not check validity of colornames... in case of trouble look into javascript debugging of your browser
</li>
<li> example data+colorlist : 132:red:23565:green:323:black:234324:orange:23434:yellow:2543:white
</li>
<li> the number of colors must match the number of data.
</li>
<li> use command "<a href='#opacity'>'opacity'</a> to adjust fill_opacity of colours
</li>
<li> use command <a href='#legend'>'legend'</a> to automatically create a legend using the same colours as pie segments unicode allowed in legend expect javascript trouble if the amount of 'pie-slices', 'pie-colours' 'pie-legend-titles' do not match a javascript console is your best friend... use command 'fontfamily' to set the font of the legend.
</li>
</ul>
<li><a name='userboxplotdata' href='#userboxplotdata top'> userboxplotdata</a><ul>
<li> keyword, no arguments
</li>
<li> use before command <a href="#boxplot">'boxplot x_or_y,box-height_or_box-width,x_or_y-position'</a>
</li>
<li> if set, the student will have to generate some statistical data. These data should be put in a named array "student_boxplot_data"
</li>
<li> "min,Q1,median,Q3,max" are calculated by a js-function and the 'draw_boxplot' function will draw a boxplot.
</li>
<li> see command <a href="#userboxplot">'userboxplot'</a> for calling 'draw_boxplot()'
</li>
</ul>
<li><a name='userboxplot' href='#userboxplot top'> userboxplot</a><ul>
<li> keyword, no arguments
</li>
<li> use before command <a href="#boxplot">'boxplot x_or_y,box-height_or_box-width,x_or_y-position'</a>
</li>
<li> if set, the student will have to calculate "min,Q1,median,Q3,max" and feed these data into the 'draw_boxplot' function
</li>
<li> for example: put the canvas-script into a html element with id='boxplot'and set style='display:none' define a variable called 'student_boxplot' and fill it with the 5 student-data (from inputfields or something) var student_boxplot = new Array(5) function show_boxplot(){ student_boxplot[0] = min; student_boxplot[1] = Q1; student_boxplot[2] = median; student_boxplot[3] = Q3; student_boxplot[4] = max; document.getElementById('boxplot').style.display = "block"; draw_boxplot(12345,1,2.00,5.00,[0,0,0,0,0],4,"0,0,255",0.78,"255,165,0",0.60,1,0,1,1); }; In the canvas-script the function draw_boxplot has the following arguments: draw_boxplot=function(canvas_type,xy,hw,cxy,data,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1)
</li>
</ul>
<li><a name='boxplotdata' href='#boxplotdata top'> boxplotdata some_data</a><ul>
<li> 'some_data' are a list of numbers separated by a comma "," (items)
</li>
<li> only be used before command 'boxplot': the command <a href="#boxplot">'boxplot'</a> will provide the boxplot drawing of the data.
</li>
<li> xrange 0,100 yrange 0,10 boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23 boxplot x,4,5
</li>
<li> note: wims will not check your data input | format. use js-error console to debug any problems.
</li>
<li> a javascript function 'statistics()' will parse the data and calculate the values [min,Q1,median,Q3,max] and hand them to the boxplot draw function.
</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> example: xrange 0,300 yrange 0,10 boxplot x,4,8,120,160,170,220,245 meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8
</li>
<li> example: xrange 0,10 yrange 0,300 boxplot y,4,8,120,160,170,220,245 meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8
</li>
<li> use command <a href='filled'>'filled'</a> to fill the box note: the strokecolor is used for filling Q1, the fillcolor is used for filling Q3
</li>
<li> use command <a href='#opacity'>'opacity'</a> to adjust fill_opacity of stroke and fill colours
</li>
<li> use command <a href='#legend'>'legend'</a> to automatically create a legend unicode allowed in legend use command 'fontfamily' to set the font of the legend.
</li>
<li> there is no limit to the number of boxplots used.
</li>
<li> can not be set draggable (<a href='#onclick'>'onclick'</a> is not ready ,yet)
</li>
<li> 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)
</li>
<li> use keyword <a href="#userboxplotdata">'userboxplotdata'</a> before command boxplot, if a pupil must generate the data by some means.
</li>
<li> use command <a href="#boxplotdata">'boxplotdata'</a> when the boxplot should be drawn from wims-generated raw statistical date
</li>
</ul>
<li><a name='status' href='#status top'> status</a><ul>
<li> keyword
</li>
<li> alernative : nostatus
</li>
<li> used to override the effects of "status=done" in wims (answer.phtml)
</li>
<li> affects 'readonly' in inputfields / textarea's in canvasimage and all userdraw based commands
</li>
<li> e.g.: if keyword 'status' is set, the pupil will be able to modify the canvas when the 'wims $status variable' is set to 'done'
</li>
</ul>
<li><a name='xlogbase' href='#xlogbase top'> xlogbase number</a><ul>
<li> sets the logbase number for the x-axis
</li>
<li> default value 10
</li>
<li> use together with commands xlogscale / xylogscale
</li>
</ul>
<li><a name='ylogbase' href='#ylogbase top'> ylogbase number</a><ul>
<li> sets the logbase number for the y-axis
</li>
<li> default value 10
</li>
<li> use together with commands ylogscale / xylogscale
</li>
</ul>
<li><a name='xlogscale' href='#xlogscale top'> xlogscale ymajor,yminor,majorcolor,minorcolor</a><ul>
<li> the x/y-range are set using commands 'xrange xmin,xmax' and 'yrange ymin,ymax'
</li>
<li> ymajor is the major step on the y-axis; yminor is the divisor for the y-step
</li>
<li> the linewidth is set using command 'linewidth int'
</li>
<li> the opacity of major / minor grid lines is set by command <a href='#opacity'>'opacity</a>'
</li>
<li> default logbase number = 10 ... when needed , set the logbase number with command 'xlogbase number'
</li>
<li> the x/y- axis numbering is triggered by keyword 'axisnumbering'<ul><li>use command 'precision' before 'xlogscale' command to set the precision (decimals) of the axis numbering</li><li>use commands 'xlabel some_text' and/or 'ylabel some_text' for text on axis : use command 'fontsize int' to set the fontsize (default 12px)</li><li>use command 'fontfamily fnt_family_string' to set the fonts for axis-numbering</li><li>use command'fontcolor' to set the colour</li></ul>
</li>
<li> note: the complete canvas will be used for the 'log paper'
</li>
<li> note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
</li>
<li> note: command 'mouse color,fontsize' will show the real values in the logpaper. <li> note: when using something like 'xrange 0.0001,0.01'...combined with commands <a href='#mouse'>'mouse'</a> and/or <a href='#userdraw'>'userdraw</a>... make sure the <a href='#precision'>precision</a> is set accordingly
</li>
<li> note: in case of userdraw , the use of keyword <a href='#userinput_xy'>'userinput_xy'</a> may be handy !
</li>
<li> attention: keyword 'snaptogrid' may not lead to the desired result...
</li>
</ul>
<li><a name='ylogscale' href='#ylogscale top'> ylogscale xmajor,xminor,majorcolor,minorcolor</a><ul>
<li> the x/y-range are set using commands 'xrange xmin,xmax' and 'yrange ymin,ymax'
</li>
<li> xmajor is the major step on the x-axis; xminor is the divisor for the x-step
</li>
<li> the linewidth is set using command 'linewidth int'
</li>
<li> the opacity of major / minor grid lines is set by command 'opacity [0-255],[0-255]'
</li>
<li> default logbase number = 10 ... when needed , set the logbase number with command 'ylogbase number'
</li>
<li> the x/y- axis numbering is triggered by keyword 'axisnumbering'<ul><li>use command 'precision' before 'ylogscale' command to set the precision (decimals) of the axis numbering</li><li>use commands 'xlabel some_text' and/or 'ylabel some_text' for text on axis : use command 'fontsize int' to set the fontsize (default 12px)</li><li>use command 'fontfamily fnt_family_string' to set the fonts for axis-numbering</li><li>use command'fontcolor' to set the colour</li></ul>
</li>
<li> note: the complete canvas will be used for the 'log paper'
</li>
<li> note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
</li>
<li> note: command 'mouse color,fontsize' will show the real values in the logpaper. <li> note: when using something like 'yrange 0.0001,0.01'...combined with commands 'mouse color,fontsize' and/or 'userdraw type,color'... make sure the precision is set accordingly (eg command 'precision 10000')
</li>
<li> note: in case of userdraw , the use of keyword 'userinput_xy' may be handy !
</li>
<li> attention: keyword 'snaptogrid' may not lead to the desired result...
</li>
</ul>
<li><a name='xylogscale' href='#xylogscale top'> xylogscale majorcolor,minorcolor</a><ul>
<li> the x/y-range are set using commands 'xrange xmin,xmax' and 'yrange ymin,ymax'
</li>
<li> the linewidth is set using command 'linewidth int'
</li>
<li> the opacity of major / minor grid lines is set by command 'opacity [0-255],[0-255]'
</li>
<li> default logbase number = 10 ... when needed , set the logbase number with command 'xlogbase number' and/or 'ylogbase number'
</li>
<li> the x/y- axis numbering is triggered by keyword 'axisnumbering'<ul><li>use commands 'xlabel some_text' and/or 'ylabel some_text' for text on axis : use command 'fontsize int' to set the fontsize (default 12px)</li><li>use command 'fontfamily fnt_family_string' to set the fonts for axis-numbering</li><li>use command'fontcolor' to set the colour</li></ul>
</li>
<li> note: the complete canvas will be used for the 'log paper'
</li>
<li> note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
</li>
<li> note: command 'mouse color,fontsize' will show the real values in the logpaper. <li> note: when using something like 'yrange 0.0001,0.01'...combined with commands 'mouse color,fontsize' and/or 'userdraw type,color'... make sure the precision is set accordingly (eg command 'precision 10000')
</li>
<li> note: in case of userdraw , the use of keyword 'userinput_xy' may be handy !
</li>
<li> attention: keyword 'snaptogrid' may not lead to the desired result...
</li>
</ul>
</li>
</ul>
<script type='text/javascript'>
var keys = ['canvasdraw' ,'canvasdraw','size','xrange','rangex','yrange','rangey','trange','ranget','linewidth','crosshairsize','crosshair','crosshairs','point','points','yerrorbars','xerrorbars','circle','circles','disks','segment','seg','segments','segs','line','lines','demiline','halfline','demilines','halflines','hline','horizontalline','hlines','horizontallines','vline','verticalline','vlines','verticallines','square','rect','rects','roundrect','roundrects','polyline','poly','arc','angle','ellipse','dashtype','rays','arrowhead','arrow','vector','arrows','vectors','arrow2','arrows2','parallel','triangle','triangles','lattice','multistrokeopacity','multifillopacity','multilabel','multilinewidth','multidash','multisnaptogrid','multifill','multistrokecolors','multifillcolors','multiuserinput','multidraw','ruler','protractor','userdraw','note:','snaptofunction','snaptofun','snaptopoints','snaptogrid','xsnaptogrid','ysnaptogrid','userinput','userinput_function','userinput_textarea','userinput_xy','usertextarea_xy','userinput_xy','functionlabel','userinput_function','plotsteps','fontsize','fontcolor','jscurve','jsplot','curve','levelcurve','bezier','trace_jscurve','jsmath','text','textup','fontfamily','stringup','string','centerstring','mathml','http','html','noaxis','noayis','xaxis','xaxistext','xaxisup','xaxistextup','yaxis','axisnumbering','axis','killslider','sliderfunction_x','sliderfunction_y','slider','sgraph','grid','opacity','transparent','rotationcenter','rotate','killrotate','killaffine','affine','killtranslation','killtranslate','translation','translate','animate','dashed','filled','highlight','fillcolor','strokecolor','bgimage','bgcolor','copy','copyresized','clearbutton','delete','erase','inputstyle','input','textarea','precision','setlimits','zoom','onclick','drag','blink','xunit','yunit','cursor','pointer','display','mouse_degree','mousex','mousey','mouse','intooltip','popup','audio','video','hatchfill','diamondfill','gridfill','dotfill','imagefill','canvastype','filltoborder','floodfill','fill','setpixel','pixelsize','pixels','replyformat','legendcolors','legend','xlabel','ylabel','linegraph','barchart','clock','piechart','userboxplotdata','userboxplot','boxplotdata','boxplot','status','xlogbase','ylogbase','xlogscale','ylogscale','xylogscale'];
var keys_len = keys.length;
function match(s1,s2){
var n1 = s1.length;
if(n1 < 3){return 0;}
var n2 = s2.length;
var c1,c2,found;
var count = n1 - Math.abs(n1 - n2);
for(var p = 0;p < n1;p++){
c1=s1.charAt(p);
found = false;
for(var i = 0;i < n2;i++){
c2 = s2.charAt(i);
if(c1 == c2){found = true;count = count + n1 - Math.abs(p - i);}
};
if(! found ){count = count - n2;}
};
return count;
};
function look(){
var s = ((document.getElementById('search').value).replace(/\s/g, '')).toLowerCase();
var typo;var next_best = -1;var next_idx = s.length;var tmp;var ss;
for(var p = 0; p < keys_len ; p++){
ss = keys[p];
if( s == ss ){
window.location.href = '#'+ss;
return;
};
/* not ok? ... try to find a match for a reasonable typo... */
tmp = match(s,ss);
if(tmp > next_idx){
next_idx = tmp;
next_best = p;
};
};
if(next_best != -1 ){
typo = keys[next_best];
if(confirm('"'+s+'" is not a valid canvasdraw command\ndid you mean "'+typo+'" ?')){
window.location.href = '#'+typo;
return;
};
}
else
{
alert(s+' is not a valid canvasdraw command');
};
return;
};
</script>

Subversion Repositories wimsdev

(root)/trunk/wims/public_html/scripts/help/en/canvasdraw.phtml @ 11162 – Rev