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' />
<h2 style=text-align:center>Implemented canvasdraw commands (22-09-2017)</h2>
<table style='color:blue;font-size:0.8em;'><tr>
<td><a name='canvasdraw top' href='#canvasdraw'>canvasdraw</a></td>
<td><a name='affine top' href='#affine'>affine</a></td>
<td><a name='angle top' href='#angle'>angle</a></td>
<td><a name='animate top' href='#animate'>animate</a></td>
<td><a name='arc top' href='#arc'>arc</a></td>
<td><a name='arrow top' href='#arrow'>arrow</a></td>
<td><a name='vector top' href='#arrow'>vector</a></td>
<td><a name='arrows top' href='#arrows'>arrows</a></td>
<td><a name='vectors top' href='#arrows'>vectors</a></td>
</tr><tr>
<td><a name='arrow2 top' href='#arrow2'>arrow2</a></td>
<td><a name='arrows2 top' href='#arrows2'>arrows2</a></td>
<td><a name='arrowhead top' href='#arrowhead'>arrowhead</a></td>
<td><a name='audio top' href='#audio'>audio</a></td>
<td><a name='axisnumbering top' href='#axisnumbering'>axisnumbering</a></td>
<td><a name='axis top' href='#axis'>axis</a></td>
<td><a name='barchart top' href='#barchart'>barchart</a></td>
<td><a name='bezier top' href='#bezier'>bezier</a></td>
<td><a name='bgcolor top' href='#bgcolor'>bgcolor</a></td>
</tr><tr>
<td><a name='bgimage top' href='#bgimage'>bgimage</a></td>
<td><a name='blink top' href='#blink'>blink</a></td>
<td><a name='boxplot top' href='#boxplot'>boxplot</a></td>
<td><a name='boxplotdata top' href='#boxplotdata'>boxplotdata</a></td>
<td><a name='canvastype top' href='#canvastype'>canvastype</a></td>
<td><a name='centerstring top' href='#centerstring'>centerstring</a></td>
<td><a name='circle top' href='#circle'>circle</a></td>
<td><a name='circles top' href='#circles'>circles</a></td>
<td><a name='disks top' href='#circles'>disks</a></td>
</tr><tr>
<td><a name='clearbutton top' href='#clearbutton'>clearbutton</a></td>
<td><a name='delete top' href='#clearbutton'>delete</a></td>
<td><a name='erase top' href='#clearbutton'>erase</a></td>
<td><a name='clock top' href='#clock'>clock</a></td>
<td><a name='colorpalette top' href='#colorpalette'>colorpalette</a></td>
<td><a name='copy top' href='#copy'>copy</a></td>
<td><a name='copyresized top' href='#copyresized'>copyresized</a></td>
<td><a name='crosshair top' href='#crosshair'>crosshair</a></td>
<td><a name='crosshairs top' href='#crosshairs'>crosshairs</a></td>
</tr><tr>
<td><a name='crosshairsize top' href='#crosshairsize'>crosshairsize</a></td>
<td><a name='cursor top' href='#cursor'>cursor</a></td>
<td><a name='pointer top' href='#cursor'>pointer</a></td>
<td><a name='curve top' href='#curve'>curve</a></td>
<td><a name='dashed top' href='#dashed'>dashed</a></td>
<td><a name='dashtype top' href='#dashtype'>dashtype</a></td>
<td><a name='diamondfill top' href='#diamondfill'>diamondfill</a></td>
<td><a name='dotfill top' href='#dotfill'>dotfill</a></td>
<td><a name='drag top' href='#drag'>drag</a></td>
</tr><tr>
<td><a name='ellipse top' href='#ellipse'>ellipse</a></td>
<td><a name='fillall top' href='#fillall'>fillall</a></td>
<td><a name='filled top' href='#filled'>filled</a></td>
<td><a name='fillcolor top' href='#fillcolor'>fillcolor</a></td>
<td><a name='fillpattern top' href='#fillpattern'>fillpattern</a></td>
<td><a name='filltoborder top' href='#filltoborder'>filltoborder</a></td>
<td><a name='floodfill top' href='#floodfill'>floodfill</a></td>
<td><a name='fill top' href='#floodfill'>fill</a></td>
<td><a name='fontcolor top' href='#fontcolor'>fontcolor</a></td>
</tr><tr>
<td><a name='fontfamily top' href='#fontfamily'>fontfamily</a></td>
<td><a name='fontsize top' href='#fontsize'>fontsize</a></td>
<td><a name='functionlabel top' href='#functionlabel'>functionlabel</a></td>
<td><a name='grid top' href='#grid'>grid</a></td>
<td><a name='gridfill top' href='#gridfill'>gridfill</a></td>
<td><a name='demiline top' href='#demiline'>demiline</a></td>
<td><a name='halfline top' href='#demiline'>halfline</a></td>
<td><a name='demilines top' href='#demilines'>demilines</a></td>
<td><a name='halflines top' href='#demilines'>halflines</a></td>
</tr><tr>
<td><a name='hatchfill top' href='#hatchfill'>hatchfill</a></td>
<td><a name='hline top' href='#hline'>hline</a></td>
<td><a name='horizontalline top' href='#hline'>horizontalline</a></td>
<td><a name='hlines top' href='#hlines'>hlines</a></td>
<td><a name='horizontallines top' href='#hlines'>horizontallines</a></td>
<td><a name='http top' href='#http'>http</a></td>
<td><a name='html top' href='#html'>html</a></td>
<td><a name='imagefill top' href='#imagefill'>imagefill</a></td>
<td><a name='inputstyle top' href='#inputstyle'>inputstyle</a></td>
</tr><tr>
<td><a name='input top' href='#input'>input</a></td>
<td><a name='intooltip top' href='#intooltip'>intooltip</a></td>
<td><a name='jscurve top' href='#jscurve'>jscurve</a></td>
<td><a name='jsplot top' href='#jscurve'>jsplot</a></td>
<td><a name='jsmath top' href='#jsmath'>jsmath</a></td>
<td><a name='killaffine top' href='#killaffine'>killaffine</a></td>
<td><a name='killrotate top' href='#killrotate'>killrotate</a></td>
<td><a name='killslider top' href='#killslider'>killslider</a></td>
<td><a name='killtranslation top' href='#killtranslation'>killtranslation</a></td>
</tr><tr>
<td><a name='killtranslate top' href='#killtranslation'>killtranslate</a></td>
<td><a name='line top' href='#line'>line</a></td>
<td><a name='lines top' href='#lines'>lines</a></td>
<td><a name='linewidth top' href='#linewidth'>linewidth</a></td>
<td><a name='lattice top' href='#lattice'>lattice</a></td>
<td><a name='levelcurve top' href='#levelcurve'>levelcurve</a></td>
<td><a name='legend top' href='#legend'>legend</a></td>
<td><a name='legendcolors top' href='#legendcolors'>legendcolors</a></td>
<td><a name='linegraph top' href='#linegraph'>linegraph</a></td>
</tr><tr>
<td><a name='mathml top' href='#mathml'>mathml</a></td>
<td><a name='mouse top' href='#mouse'>mouse</a></td>
<td><a name='mouse_degree top' href='#mouse_degree'>mouse_degree</a></td>
<td><a name='display top' href='#display'>display</a></td>
<td><a name='precision top' href='#precision'>precision</a></td>
<td><a name='mousex top' href='#mousex'>mousex</a></td>
<td><a name='mousey top' href='#mousey'>mousey</a></td>
<td><a name='multidash top' href='#multidash'>multidash</a></td>
<td><a name='multidraw top' href='#multidraw'>multidraw</a></td>
</tr><tr>
<td><a name='multilabel top' href='#multilabel'>multilabel</a></td>
<td><a name='multilinewidth top' href='#multilinewidth'>multilinewidth</a></td>
<td><a name='multifill top' href='#multifill'>multifill</a></td>
<td><a name='multifillcolors top' href='#multifillcolors'>multifillcolors</a></td>
<td><a name='multifillopacity top' href='#multifillopacity'>multifillopacity</a></td>
<td><a name='multisnaptogrid top' href='#multisnaptogrid'>multisnaptogrid</a></td>
<td><a name='multistrokecolors top' href='#multistrokecolors'>multistrokecolors</a></td>
<td><a name='multistrokeopacity top' href='#multistrokeopacity'>multistrokeopacity</a></td>
<td><a name='multiuserinput top' href='#multiuserinput'>multiuserinput</a></td>
</tr><tr>
<td><a name='noaxis top' href='#noaxis'>noaxis</a></td>
<td><a name='noayis top' href='#noayis'>noayis</a></td>
<td><a name='numberline top' href='#numberline'>numberline</a></td>
<td><a name='opacity top' href='#opacity'>opacity</a></td>
<td><a name='transparent top' href='#opacity'>transparent</a></td>
<td><a name='onclick top' href='#onclick'>onclick</a></td>
<td><a name='parallel top' href='#parallel'>parallel</a></td>
<td><a name='plotsteps top' href='#plotsteps'>plotsteps</a></td>
<td><a name='point top' href='#point'>point</a></td>
</tr><tr>
<td><a name='points top' href='#points'>points</a></td>
<td><a name='poly top' href='#poly'>poly</a></td>
<td><a name='polyline top' href='#polyline'>polyline</a></td>
<td><a name='popup top' href='#popup'>popup</a></td>
<td><a name='protractor top' href='#protractor'>protractor</a></td>
<td><a name='pixels top' href='#pixels'>pixels</a></td>
<td><a name='pixelsize top' href='#pixelsize'>pixelsize</a></td>
<td><a name='piechart top' href='#piechart'>piechart</a></td>
<td><a name='rays top' href='#rays'>rays</a></td>
</tr><tr>
<td><a name='rect top' href='#rect'>rect</a></td>
<td><a name='rects top' href='#rects'>rects</a></td>
<td><a name='replyformat top' href='#replyformat'>replyformat</a></td>
<td><a name='roundrect top' href='#roundrect'>roundrect</a></td>
<td><a name='roundrects top' href='#roundrects'>roundrects</a></td>
<td><a name='ruler top' href='#ruler'>ruler</a></td>
<td><a name='resetoffset top' href='#resetoffset'>resetoffset</a></td>
<td><a name='rotate top' href='#rotate'>rotate</a></td>
<td><a name='rotationcenter top' href='#rotationcenter'>rotationcenter</a></td>
</tr><tr>
<td><a name='size top' href='#size'>size</a></td>
<td><a name='segment top' href='#segment'>segment</a></td>
<td><a name='seg top' href='#segment'>seg</a></td>
<td><a name='segments top' href='#segments'>segments</a></td>
<td><a name='segs top' href='#segments'>segs</a></td>
<td><a name='setlimits top' href='#setlimits'>setlimits</a></td>
<td><a name='setpixel top' href='#setpixel'>setpixel</a></td>
<td><a name='slider top' href='#slider'>slider</a></td>
<td><a name='sliderfunction_x top' href='#sliderfunction_x'>sliderfunction_x</a></td>
</tr><tr>
<td><a name='sliderfunction_y top' href='#sliderfunction_y'>sliderfunction_y</a></td>
<td><a name='sgraph top' href='#sgraph'>sgraph</a></td>
<td><a name='snaptofunction top' href='#snaptofunction'>snaptofunction</a></td>
<td><a name='snaptofun top' href='#snaptofunction'>snaptofun</a></td>
<td><a name='snaptopoints top' href='#snaptopoints'>snaptopoints</a></td>
<td><a name='snaptogrid top' href='#snaptogrid'>snaptogrid</a></td>
<td><a name='square top' href='#square'>square</a></td>
<td><a name='status top' href='#status'>status</a></td>
<td><a name='string top' href='#string'>string</a></td>
</tr><tr>
<td><a name='stringup top' href='#stringup'>stringup</a></td>
<td><a name='highlight top' href='#highlight'>highlight</a></td>
<td><a name='strokecolor top' href='#strokecolor'>strokecolor</a></td>
<td><a name='text top' href='#text'>text</a></td>
<td><a name='textarea top' href='#textarea'>textarea</a></td>
<td><a name='textfill top' href='#textfill'>textfill</a></td>
<td><a name='textup top' href='#textup'>textup</a></td>
<td><a name='trace_jscurve top' href='#trace_jscurve'>trace_jscurve</a></td>
<td><a name='trange top' href='#trange'>trange</a></td>
</tr><tr>
<td><a name='ranget top' href='#trange'>ranget</a></td>
<td><a name='translation top' href='#translation'>translation</a></td>
<td><a name='translate top' href='#translation'>translate</a></td>
<td><a name='triangle top' href='#triangle'>triangle</a></td>
<td><a name='triangles top' href='#triangles'>triangles</a></td>
<td><a name='userboxplot top' href='#userboxplot'>userboxplot</a></td>
<td><a name='userboxplotdata top' href='#userboxplotdata'>userboxplotdata</a></td>
<td><a name='userdraw top' href='#userdraw'>userdraw</a></td>
<td><a name='userinput top' href='#userinput'>userinput</a></td>
</tr><tr>
<td><a name='userinput_function top' href='#userinput'>userinput_function</a></td>
<td><a name='userinput_textarea top' href='#userinput'>userinput_textarea</a></td>
<td><a name='userinput_xy top' href='#userinput'>userinput_xy</a></td>
<td><a name='userinput_xy top' href='#userinput_xy'>userinput_xy</a></td>
<td><a name='userinput_function top' href='#userinput_function'>userinput_function</a></td>
<td><a name='usertextarea_xy top' href='#usertextarea_xy'>usertextarea_xy</a></td>
<td><a name='vline top' href='#vline'>vline</a></td>
<td><a name='verticalline top' href='#vline'>verticalline</a></td>
<td><a name='vlines top' href='#vlines'>vlines</a></td>
</tr><tr>
<td><a name='verticallines top' href='#vlines'>verticallines</a></td>
<td><a name='video top' href='#video'>video</a></td>
<td><a name='xaxis top' href='#xaxis'>xaxis</a></td>
<td><a name='xaxistext top' href='#xaxis'>xaxistext</a></td>
<td><a name='xaxisup top' href='#xaxisup'>xaxisup</a></td>
<td><a name='xaxistextup top' href='#xaxisup'>xaxistextup</a></td>
<td><a name='xerrorbars top' href='#xerrorbars'>xerrorbars</a></td>
<td><a name='xrange top' href='#xrange'>xrange</a></td>
<td><a name='rangex top' href='#xrange'>rangex</a></td>
</tr><tr>
<td><a name='xsnaptogrid top' href='#xsnaptogrid'>xsnaptogrid</a></td>
<td><a name='xoffset top' href='#xoffset'>xoffset</a></td>
<td><a name='xyoffset top' href='#xyoffset'>xyoffset</a></td>
<td><a name='xunit top' href='#xunit'>xunit</a></td>
<td><a name='xlabel top' href='#xlabel'>xlabel</a></td>
<td><a name='xlogbase top' href='#xlogbase'>xlogbase</a></td>
<td><a name='xlogscale top' href='#xlogscale'>xlogscale</a></td>
<td><a name='xylogscale top' href='#xylogscale'>xylogscale</a></td>
<td><a name='yaxis top' href='#yaxis'>yaxis</a></td>
</tr><tr>
<td><a name='yerrorbars top' href='#yerrorbars'>yerrorbars</a></td>
<td><a name='yoffset top' href='#yoffset'>yoffset</a></td>
<td><a name='yrange top' href='#yrange'>yrange</a></td>
<td><a name='rangey top' href='#yrange'>rangey</a></td>
<td><a name='ysnaptogrid top' href='#ysnaptogrid'>ysnaptogrid</a></td>
<td><a name='ylabel top' href='#ylabel'>ylabel</a></td>
<td><a name='ylogbase top' href='#ylogbase'>ylogbase</a></td>
<td><a name='ylogscale top' href='#ylogscale'>ylogscale</a></td>
<td><a name='yunit top' href='#yunit'>yunit</a></td>
</tr><tr>
<td><a name='zoom top' href='#zoom'>zoom</a></td>
<td> </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) non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a> for <a href="#filltoborder">filltoborder x0,y0,color</a> or <a href="#filltoborder">fill x0,y0,color</a> type filling (eg fill a region around x0,y0 with color until a border is encountered), there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>all draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li> <li> a draggable object can be set draggable by a preceding command <a href="#drag">'drag x/y/xy'</a> 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='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='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='animate' href='#animate top'> animate</a><ul>
<li> keyword
</li>
<li> the animated point is a filled rectangle ; adjust colour with command 'fillcolor colorname/hexnumber'
</li>
<li> use linewidth to adjust size of the points
</li>
<li> will animate a point on the next jsplot/jscurve command
</li>
<li> only usable for command jsplot (normal functions or parametric)
</li>
<li> moves repeatedly from xmin to xmax or incase of a parametric function from tmin to tmax (set trange)
</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='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='arrowhead' href='#arrowhead top'> arrowhead int</a><ul>
<li> default 8 (pixels)
</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='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='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='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='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='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='blink' href='#blink top'> blink time(seconds)</a><ul>
<li> NOT IMPLEMETED -YET
</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='#fillpattern'>'fillpattern some_pattern'</a> to use a (diamond for Q1, hatch for Q3) pattern.
</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='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='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 (all clickable / draggable object are in this canvas)
</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 each other)<ul><li> EXTERNAL_IMAGE_CANVAS 0</li><li> BG_CANVAS 1</li><li> STATIC_CANVAS 2</li><li> MOUSE_CANVAS 3</li><li> GRID_CANVAS 4</li><li> DRAG_CANVAS 5</li><li> DRAW_CANVAS 6</li><li> TEXT_CANVAS 7</li><li> CLOCK_CANVAS 8</li><li> ANIMATE_CANVAS 9</li><li> TRACE_CANVAS 10</li><li>BOXPLOT_CANVAS 11</li><li> JSPLOT_CANVAS 100 , will increase with every call</li><li> FILL_CANVAS 200 , will increase with every call </li><li> USERDRAW_JSPLOT 300 , will increase with every call </li><li>CLICKFILL_CANVAS 400 , will increase with every call/click</li><li>BOXPLOT_CANVAS 500 , will increase with every call</li></ul>
</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='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='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='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='colorpalette' href='#colorpalette top'> colorpalette color_name_1,color_name_2,...,color_name_8</a><ul>
<li> opacity will be the same for all colors and is set by command <a href="#opacity">opacity [0-255],[0-255]</a>
</li>
<li> can be used with command <a href='#userdraw'>'userdraw clickfill,color'</a> when more than one fillcolor is wanted. in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2... the pupil can choose from the given colors by clicking small coloured buttons. the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat. the first color of the palette is color=0
</li>
<li> make sure to include the 'remove button' by using command <a href='#clearbutton'>clearbutton some_text</a>
</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='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='crosshairsize' href='#crosshairsize top'> crosshairsize int</a><ul>
<li> default 8 (px)
</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='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='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='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='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>
<li> there is also a command <a href="userdraw">userdraw diamondfill,color</a>
</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>
<li> there is also a command <a href="userdraw">userdraw dotfill,color</a>
</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='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='fillall' href='#fillall top'> fillall color,x1,y1,x2,y2...x_n,y_n</a><ul>
<li> fill all region containing points (x1:y1),(x2:y2)...(x_n:y_n) with color 'color'
</li>
<li> any other colors (objects) in the <a href="#canvastype>canvastype</a> 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: the fill-family of commands are very (client) cpu intensive operations! 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='filled' href='#filled top'> filled</a><ul>
<li> keyword (no arguments required)
</li>
<li> the next 'fillable' object (only the next !) will be filled
</li>
<li> use command <a href="fillcolor">"fillcolor color"</a> to set fillcolor
</li>
<li> use <a href="#fillpattern">fillpattern</a> for non-solid color filling.
</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='fillcolor' href='#fillcolor top'> fillcolor colorname or #hex</a><ul>
<li> set the color : 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>
<li> see <a href="#fillpattern">fillpattern</a> for non-solid color filling.
</li>
</ul>
<li><a name='fillpattern' href='#fillpattern top'> fillpattern grid | hatch | diamond | dot | image-url</a><ul>
<li> use a pattern as fillstyle
</li>
<li> suitable for all fillable object including the <a href="#userdraw">'userdraw objects' family</a>
</li>
<li> noy -yet- implemented in the <a href="#multidraw">multidraw objects family</a>...(will probably be too complex)
</li>
<li> the fillcolor is set by the object command, for example: size 370,370 xrange -5,5 yrange -5,5 opacity 165,150 fillpattern grid fcircle -6,3,160,blue fillpattern dot fcircle -3,-3,160,red fillpattern hatch fcircle 0,3,160,green filpattern diamond fcircle 3,-3,160,cyan userdraw dotfill,blue zoom red
</li>
<li> the pattern dimensions are hardcoded (linewidth ,radius,dx,dy are fixed)
</li>
<li> the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
</li>
<li> see <a href="#fillcolor">fillcolor</a> for solid color filling.
</li>
<li> when using an image-url , make sure it contains an '/' in the filename...'fillpattern $$module_dir/gifs/test.jpg' will fill the next fillable object with this image.| the argument to html5 canvas routine 'createPattern(img,argument)' is set to 'repeat' e.g. if the image is smaller then the canvas, multiple copies will be used to fill the area ( e.g. ctx.fillStyle() = pattern) for example: size 150,150 xrange -5,5 yrange -5,5 drag xy fillpattern gifs/en.gif fcircle 0,0,100,red fillpattern gifs/nl.gif drag xy fcircle -3,2,100,green fillpattern gifs/cn.gif drag xy fcircle 3,2,100,green
</li>
<li> fillpattern is also active for <a href="#userdraw">userdraw object,color"</a>... the userdraw family a has also 'clickfill type' (e.g. an object gets filled between boundaries, when clicked) commands like: 'userdraw dotfill,color' 'userdraw hatchfill,color' etc
</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>
<li> maybe used together with command <a href="#userdraw">userdraw clickfill,color</a>
</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='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='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='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='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='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='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> there is also a command <a href="userdraw">userdraw hatchfill,color</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='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>
<li> there is also a command <a href="userdraw">userdraw hatchfill,color</a>
</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='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='imagefill' href='#imagefill top'> imagefill dx,dy,scaling to xsize × ysize?,image_url</a><ul>
<li> The next suitable filled object will be filled with "image_url" tiled
</li>
<li> scaling to xsize × ysize ? ... 1 = yes 0 = no
</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,0,$module_dir/gifs/my_image.gif
</li>
<li> normal url : imagefill 80,80,1,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='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>
<li> use keyword <a href='#xoffset'>xoffset | centered</a> if the inputfield should be centered on (x:y) default is the left top corner is (x:y)
</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='jscurve' href='#jscurve top'> jscurve color,formula1(x),formula2(x),formula3(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> if <a href='trange'>trange</a> is defined, the two functions will be plotted parametric note: use x as variable...and not t. Use keyword <a href='#animate'>animate</a> to animate a point on the curve
</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 keyword <a href='animate'>animate</a> for animating a point on the curve
</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='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='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='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='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='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='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='linewidth' href='#linewidth top'> linewidth int</a><ul>
<li> default 1
</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='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='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='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='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='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)... x2 and y2 are still needed, but not used as the right bottom corner of the embedded div element.
</li>
<li> in case of drag(xy|x|y) | onclick the div rectangle left to corner will be the drag-anchor of the mathml object
</li>
<li> can be set onclick javascript:read_dragdrop(); will return click numbers of mathml-objects if 4 click_able object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
</li>
<li> can be set draggable the javascript:read_dragdrop() will return all coordinates in same order as the canvas script: unmoved object will have their original coordinates...
</li>
<li> snaptogrid is supported...snaptopoints will work, but use with care...due to the primitive dragging technically: the dragstuff library is not used...the mathml is embedded in a new div element and not in the html5-canvas
</li>
<li> when clicked, the mathml object will be drawn in red color; the div background color will be determined by the <a href="#fillcolor">'fillcolor'</a> and <a href="#opacity">'opacity'</a> settings
</li>
<li> userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing.
</li>
<li> draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> can be combined with drag and/or onclick mathml
</li>
<li> other drag objects (circles/rects etc) are supported , but read_dragdrop() will probably be difficult to interpret...
</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='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='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='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='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='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='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='multidraw' href='#multidraw top'> multidraw obj_type_1,obj_type_2...obj_type_11</a><ul>
<li> for simple single object user drawings you could 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</li><li>parallelogram | parallelograms</li><li>poly[3-9] | polys[3-9] draw 3...9 point polygone(s): polys3 is of course triangles </li></ul>
</li>
<li> additionally objects may be user labelled, using obj_type 'text'... in this case allways a text input field and if <a href='#multiuserinput'> multiuserinput=1 </a> also (x:y) inputfields will be added to the page. use commands 'fontfamily' and 'fontcolor' to adjust. (command 'multistrokeopacity' may be set to adjust text opacity) note: text is always centered on the mouse-click or user-input coordinates ! note: no keyboard listeners are used
</li>
<li> it makes no sense using something like "multidraw point,points" ... something like "multidraw polys4,polys7" will only result in drawing a '4 point polygone' and not a '7 point polygone' : this is a design flaw and not a feature...
</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' (the reserved div_area is used for the multidraw control buttons)
</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 11 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 = polys[3-9]_x+";"+polys[3-9]_y+"\n" line 8 = rects_x +";"+rects_y+"\n" line 9 = closedpoly_x+";"+closedpoly_y+"\n" line 10 = parallelogram_x+";"+parallelogram_y"\n" line 11 = 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> It is best to prepare / format the student reply in clientside javascript. However in wims language you could use something like this for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...) note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25 rep = !line 7 of reply rep = !translate ';' to '\n' in $rep pts = 5 # 5 points for polygon x_rep = !line 1 of $rep y_rep = !line 2 of $rep tot = !itemcnt $x_rep num_poly = $[$tot/$pts] idx = 0 !for p=1 to $num_poly  !for s=1 to $pts   !increase idx   X = !item $idx of $x_rep   Y = !item $idx of $y_rep   # do some checking  !next s !next p
</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 10 '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='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='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='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>
<li> can also be used with command <a href='#userdraw'>'userdraw clickfill,color'</a> when more than one fillcolor is wanted. in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2... the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors if more control over the used colours is wanted , see command <a href='#colorpalette'>colorpalette color1,color2...</a>
</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='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='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='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='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> in case of 'text' and multiuserinput=1 , 3 inputfields will be shown : x,y,text
</li>
<li> in case of 'text' and multiuserinput=0 , 1 inputfield will be shown : text ... a mouse click will place the text on the canvas.
</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='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='numberline' href='#numberline top'> numberline x0,x1,xmajor,xminor,y0,y1</a><ul>
<li> numberline is using xrange/yrange system for all dimensions
</li>
<li> multiple numberlines are allowed ; combinations with command <a href='#grid'>grid</a> is allowed; multiples commands <a href='#xaxis'>xaxis numbering</a> are allowed
</li>
<li> x0 is start x-value in xrange
</li>
<li> x1 is end x-value in xrange
</li>
<li> xmajor is step for major division
</li>
<li> xminor is divisor of xmajor; using small (30% of major tick) tick marks: this behaviour is 'hardcoded'
</li>
<li> is xminor is an even divisor, an extra tickmark (60% of major tick) is added to the numberline : this behaviour is 'hardcoded'
</li>
<li> y0 is bottom of numberline; y1 endpoint of major tics
</li>
<li> use command <a href="#linewidth">linewidth</a> to control appearance
</li>
<li> use <a href="#strokecolor">strokecolor</a> and <a href="#opacity">opacity</a> to controle measure line
</li>
<li> for all ticks linewidth and color / opacity are identical.
</li>
<li> if command <a href="#xaxis">xaxis</a> or <a href="#xaxisup">xaxisup</a> is not defined, the labeling will be on major ticks: x0...x1
</li>
<li> use <a href="#fontfamily">fontfamily</a> and <a href="#fontcolor">fontcolor</a> to control fonts settings
</li>
<li> may be used together with <a href="#userdraw">userdraw</a> , <a href="#multidraw">multidraw</a> and <a href="#drag">user drag</a> command family for the extra object drawn onto the numberline
</li>
<li> <a href="#snaptogrid">snaptogrid, snaptopoints etc</a> and <a href="#zoom">zooming and panning</a> is supported
</li>
<li> onclick and dragging of the numberline are not -yet- supported
</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='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='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='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='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='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='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='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='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='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='pixelsize' href='#pixelsize top'> pixelsize int</a><ul>
<li> in case you want to deviate from default pixelsize = 1(...)
</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 : 32:red:65:green:23:black:43:orange:43:yellow:14:white
</li>
<li> the number of colors must match the number of data.
</li>
<li> if defined <a href='#fillpattern'>'fillpattern some_pattern'</a> then the pie pieces will be filled with the respective color and a fill pattern... the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,...
</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='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='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='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='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='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='resetoffset' href='#resetoffset top'> resetoffset</a><ul>
<li> keyword ; use to restore text placement on the canvas to the real (x;y) coordinates of the left bottom corner of the text
</li>
<li> may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
</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='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='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='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='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='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='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='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='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='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='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='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='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='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='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='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='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='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>
<li> keyword 'xoffset | centered' is not active for commande 'textarea'
</li>
</ul>
<li><a name='textfill' href='#textfill top'> textfill x0,y0,color,some_text</a><ul>
<li> x0,y0 in xrange / yrange
</li>
<li> color will be used for the font color
</li>
<li> use command <a href="#fontfamily">fontfamily</a> to set font type and size
</li>
<li> there is also a command <a href="#userdraw">userdraw textfill,color,some_text</a>
</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='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='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='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='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='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='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='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 color multiple areas may be selected multiple colors may be provided using commands <a href='#colorpalette'>colorpalette color1,color2,color3,...</a> or <a href='#multifillcolors'>multifillcolors color1,color2,color_3,...</a> use <a href='#replyformat'>replyformat 10</a> for checking the user click color ... reply=x1:y1:color1,x2:y2:color2... attention: this will not work for pattern filling, because the pattern image is only generated once and after creation can not be changed ! the opacity of this image on a separate canvas is set to 0.01 and not 0 (!!)...in the 'fill algorithm' the opacity of the matching pixels is set to 1</li><li>dotfill : fill the clicked area with a dot pattern; use command linewidth to change dot size</li><li>diamondfill : fill the clicked area with a diamond pattern</li><li>hatchfill : fill the clicked area with a hatch pattern</li><li>gridfill : fill the clicked area with a grid pattern</li><li>textfill: fill the clicked area with a repeating string userdraw textfill,blue,some_text use command <a href="#fontfamily">fontfamily</a> to adjust text style and size</li><li>'clickfill | pattern filling' in general: the clicks may be set <a href="#snaptogrid">'snaptogrid'</a> can be used together with command <a href="#floodfill">'floodfill' or 'fill'</a> always use together with command <a href="clearbutton">'clearbutton some_text'</a> for removal of all click_colored areas the function read_canvas() will return the click coordinates in the sequence of the user clicks 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" , a confirm will popup asking to delete the selected text. This text will be removed from the "userdraw_txt()" answer array. Use commands 'fontsize' and 'fontfamily' to control the text appearance
</li>
<li> note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again.
</li>
<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 a prefix 'filled' or 'f' to set fillable objects filled. (fcircles,filledcircles etc)
</li>
<li> for non solid filling, use command <a href="#fillpattern">fillpattern grid,hatch,diamond,dot</a>
</li>
<li> use "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='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='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='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='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='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='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='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> usable for commands <a href="numberline">numberline</a> and <a href="grid">grid</a> or combinations thereof
</li>
<li> use these x-axis num1...num_n values instead of default xmin...xmax
</li>
<li> in case of command 'grid' . there is 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='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='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='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='xoffset' href='#xoffset top'> xoffset | centered</a><ul>
<li> keyword ; to place the text centered above the text coordinates(x:y) ...
</li>
<li> may be used for points or other things requirering centered labels
</li>
<li> may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-library)
</li>
</ul>
<li><a name='xyoffset' href='#xyoffset top'> xyoffset</a><ul>
<li> keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
</li>
<li> may be used for points or other things requirering labels
</li>
<li> only active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
</li>
<li> in case of inputfields the inputfield will be centered x and y on it's coordinates. for example: inputs 1,1,10,? point 1,1,red the point will be completely invisible note: keyword 'xyoffset' will also provide centering if used with <a href='#<li>userdraw'>input(s),color</a>
</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='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='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='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='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><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='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='yoffset' href='#yoffset top'> yoffset</a><ul>
<li> keyword, only active for commands <a href="#textup">textup</a> and <a href="#stringup">stringup</a>
</li>
<li> places the text under the (x:y) coordinates(x:y) eg the string 'hello' will end at char 'o' on (x:y) normal behaviour : string starts at (x:y)
</li>
<li> string ending on (x:y) is valid for all rotation angles
</li>
<li> may be used for points or other things requirering labels in y-direction
</li>
<li> other text position manipulations: see <a href="#xoffset">xoffset</a> for centering on x-coordinate or <a href="#xyoffset">xyoffset</a> label placement for points etc.
</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='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='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='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='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='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='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>
</ul>
<script type='text/javascript'>
var keys = ['canvasdraw' ,'canvasdraw','affine','angle','animate','arc','arrow','vector','arrows','vectors','arrow2','arrows2','arrowhead','audio','axisnumbering','axis','barchart','bezier','bgcolor','bgimage','blink','boxplot','boxplotdata','canvastype','centerstring','circle','circles','disks','clearbutton','delete','erase','clock','colorpalette','copy','copyresized','crosshair','crosshairs','crosshairsize','cursor','pointer','curve','dashed','dashtype','diamondfill','dotfill','drag','ellipse','fillall','filled','fillcolor','fillpattern','filltoborder','floodfill','fill','fontcolor','fontfamily','fontsize','functionlabel','grid','gridfill','demiline','halfline','demilines','halflines','hatchfill','hline','horizontalline','hlines','horizontallines','http','html','imagefill','inputstyle','input','intooltip','jscurve','jsplot','jsmath','killaffine','killrotate','killslider','killtranslation','killtranslate','line','lines','linewidth','lattice','levelcurve','legend','legendcolors','linegraph','mathml','mouse','mouse_degree','display','precision','mousex','mousey','multidash','multidraw','multilabel','multilinewidth','multifill','multifillcolors','multifillopacity','multisnaptogrid','multistrokecolors','multistrokeopacity','multiuserinput','noaxis','noayis','numberline','opacity','transparent','onclick','parallel','plotsteps','point','points','poly','polyline','popup','protractor','pixels','pixelsize','piechart','rays','rect','rects','replyformat','roundrect','roundrects','ruler','resetoffset','rotate','rotationcenter','size','segment','seg','segments','segs','setlimits','setpixel','slider','sliderfunction_x','sliderfunction_y','sgraph','snaptofunction','snaptofun','snaptopoints','snaptogrid','square','status','string','stringup','highlight','strokecolor','text','textarea','textfill','textup','trace_jscurve','trange','ranget','translation','translate','triangle','triangles','userboxplot','userboxplotdata','userdraw','userinput','userinput_function','userinput_textarea','userinput_xy','userinput_xy','userinput_function','usertextarea_xy','vline','verticalline','vlines','verticallines','video','xaxis','xaxistext','xaxisup','xaxistextup','xerrorbars','xrange','rangex','xsnaptogrid','xoffset','xyoffset','xunit','xlabel','xlogbase','xlogscale','xylogscale','yaxis','yerrorbars','yoffset','yrange','rangey','ysnaptogrid','ylabel','ylogbase','ylogscale','yunit','zoom'];
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 @ 13575 – Rev