| 189,15 → 189,15 |
|---|
| /* |
| @ canvasdraw |
| @ Canvasdraw will try use the same basic syntax structure as flydraw |
| @ General syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">opacity [0-255],[0,255]</a></li><li>line width of any object can be controlled by command <a href="#linewidth">linewidth int</a></li><li>any may be dashed by using keyword <a href="#dashed">dashed</a> before the object command.<br /> the dashing type can be controled by command <a href="#dashtype">dashtype int,int</a>please note: dashing may have different spacing depending on the angle of the line<br />see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw</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.<br />The fill colour of ''non_userdraw`` objects will be the stroke colour...(flydraw harmonization 19/10/2013)<br /> non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a><br />note: do not use a <b>f</b> with this non-solid pattern filling !<br />for <a href="#filltoborder">filltoborder x0,y0,color</a> or <a href="#filltoborder">fill x0,y0,color</a> type filling (eg fill a region around x0,y0 with color until a border is encountered),<br />there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>all draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li> <li> a draggable object can be set draggable by a preceding command <a href="#drag">drag x/y/xy</a><br />The translation can be read by javascript:read_dragdrop();The replyformat is: object_number : x-orig : y-orig : x-drag : y-drag<br />The x-orig/y-orig will be returned in maximum precision (javascript float)...<br />the x-drag/y-drag will be returned in defined ''precision`` number of decimals<br />Multiple objects may be set draggable / clickable (no limit)<br />not all flydraw objects may be dragged / clicked<br />Only draggable / clickable objects will be scaled on <a href="#zoom">zoom</a> and will be translated in case of panning.</li><li> a ''onclick object`` can be set ''clickable`` by the preceding keyword <a href="#onclick">onclick</a><br />not all flydraw objects can be set clickable</li><li><b>remarks using a '';`` as command separator</b>. 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 !<br />these exceptions are not really straight forward... so keep this in mind.</li><li>almost every <a href="#userdraw">userdraw object,color</a> or <a href="#multidraw">multidraw</a> command ''family`` may be combined with keywords <a href="#snaptogrid">"snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>every draggable | onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>almost every command for a single object has a multiple objects counterpart:<br /><ul>general syntax rule:<li><code>object x1,y1,...,color</code></li><li><code>objects color,x1,y1,...</code></li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#css">css some_css</a><br/>the fontsize used for labeling these elements can be controlled by command <a href="#fontsize">fontsize int</a> <br />command <code>fontfamily</code> is <b>not</b> active for these elements</li></ul> |
| @ If needed multiple interactive scripts (*) may be used in a single webpage.<br />A function <code>read_canvas()</code> and / or <code>read_dragdrop()</code> can read all interactive userdata from these images.<br />The global array <code>canvas_scripts</code>will contain all unique random "canvas_root_id" of the included scripts.<br />The included local javascript "read" functions ''read_canvas%d()`` and ''read_dragdrop%d()`` will have this ''%d = canvas_root_id``<br />e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function<br /><code>fun = eval("read_canvas"+canvas_scripts[0])</code> to read user based drawings / inputfield in this first image.<br />The read_dragdrop is analogue.<br />If the default reply formatting is not suitable, use command <a href='#replyformat'>replyformat</a> to format the replies for an individual canvas script,<br />To read all user interactions from all included canvas scripts, use something like:<br /><code>function read_all_canvas_images(){<br /> var script_len = canvas_scripts.length;<br /> var draw_reply = "";<br /> var found_result = false;<br /> for(var p = 0 ; p < script_len ; p++){<br /> var fun = eval("read_canvas"+canvas_scripts[p]);<br /> if( typeof fun === 'function'){<br /> var result = fun();<br /> if( result && result.length != 0){<br /> if(script_len == 1 ){.return result;};<br /> found_result = true;<br /> draw_reply = draw_reply + result + "newline";<br /> };<br /> };<br /> };<br /> if( found_result ){return draw_reply;}else{return null;};<br />};</code> <br />(*) Note: the speed advantage over <em>canvas-do-it-all</em> libraries is reduced to zero, when multiple canvasdraw scripts are present in a single page...<br />For example a typical canvasdraw script is between 5 and 40 kB...a large library like JSXgraph is approx 600 kB<br />In these cases it would be much faster to load a static general HTML5 canvas javascript draw library and parse it multiple raw fly instructions !<br /> |
| @ Canvasdraw can be used to paint a html5 bitmap image<br />by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job.<br />thus ensuring a minimal strain on the client browser <br />(unlike some popular ''canvas-do-it-all`` libraries, who have proven to be not suitable for low-end computers found in schools...) |
| @ General syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">opacity [0-255],[0,255]</a></li><li>line width of any object can be controlled by command <a href="#linewidth">linewidth int</a></li><li>any may be dashed by using keyword <a href="#dashed">dashed</a> before the object command.<br> the dashing type can be controled by command <a href="#dashtype">dashtype int,int</a>please note: dashing may have different spacing depending on the angle of the line<br>see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw</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.<br>The fill colour of ''non_userdraw`` objects will be the stroke colour...(flydraw harmonization 19/10/2013)<br> non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a><br>note: do not use a <b>f</b> with this non-solid pattern filling !<br>for <a href="#filltoborder">filltoborder x0,y0,color</a> or <a href="#filltoborder">fill x0,y0,color</a> type filling (eg fill a region around x0,y0 with color until a border is encountered),<br>there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>all draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li> <li> a draggable object can be set draggable by a preceding command <a href="#drag">drag x/y/xy</a><br>The translation can be read by javascript:read_dragdrop();The replyformat is: object_number : x-orig : y-orig : x-drag : y-drag<br>The x-orig/y-orig will be returned in maximum precision (javascript float)...<br>the x-drag/y-drag will be returned in defined ''precision`` number of decimals<br>Multiple objects may be set draggable / clickable (no limit)<br>not all flydraw objects may be dragged / clicked<br>Only draggable / clickable objects will be scaled on <a href="#zoom">zoom</a> and will be translated in case of panning.</li><li> a ''onclick object`` can be set ''clickable`` by the preceding keyword <a href="#onclick">onclick</a><br>not all flydraw objects can be set clickable</li><li><b>remarks using a '';`` as command separator</b>. 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 !<br>these exceptions are not really straight forward... so keep this in mind.</li><li>almost every <a href="#userdraw">userdraw object,color</a> or <a href="#multidraw">multidraw</a> command ''family`` may be combined with keywords <a href="#snaptogrid">"snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>every draggable | onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>almost every command for a single object has a multiple objects counterpart:<br><ul>general syntax rule:<li><code>object x1,y1,...,color</code></li><li><code>objects color,x1,y1,...</code></li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#css">css some_css</a><br/>the fontsize used for labeling these elements can be controlled by command <a href="#fontsize">fontsize int</a> <br>command <code>fontfamily</code> is <b>not</b> active for these elements</li></ul> |
| @ If needed multiple interactive scripts (*) may be used in a single webpage.<br>A function <code>read_canvas()</code> and / or <code>read_dragdrop()</code> can read all interactive userdata from these images.<br>The global array <code>canvas_scripts</code>will contain all unique random "canvas_root_id" of the included scripts.<br>The included local javascript "read" functions ''read_canvas%d()`` and ''read_dragdrop%d()`` will have this ''%d = canvas_root_id``<br>e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function<br><code>fun = eval("read_canvas"+canvas_scripts[0])</code> to read user based drawings / inputfield in this first image.<br>The read_dragdrop is analogue.<br>If the default reply formatting is not suitable, use command <a href='#replyformat'>replyformat</a> to format the replies for an individual canvas script,<br>To read all user interactions from all included canvas scripts, use something like:<br><code>function read_all_canvas_images(){<br> var script_len = canvas_scripts.length;<br> var draw_reply = "";<br> var found_result = false;<br> for(var p = 0 ; p < script_len ; p++){<br> var fun = eval("read_canvas"+canvas_scripts[p]);<br> if( typeof fun === 'function'){<br> var result = fun();<br> if( result && result.length != 0){<br> if(script_len == 1 ){.return result;};<br> found_result = true;<br> draw_reply = draw_reply + result + "newline";<br> };<br> };<br> };<br> if( found_result ){return draw_reply;}else{return null;};<br>};</code> <br>(*) Note: the speed advantage over <em>canvas-do-it-all</em> libraries is reduced to zero, when multiple canvasdraw scripts are present in a single page...<br>For example a typical canvasdraw script is between 5 and 40 kB...a large library like JSXgraph is approx 600 kB<br>In these cases it would be much faster to load a static general HTML5 canvas javascript draw library and parse it multiple raw fly instructions !<br> |
| @ Canvasdraw can be used to paint a html5 bitmap image<br>by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job.<br>thus ensuring a minimal strain on the client browser <br>(unlike some popular ''canvas-do-it-all`` libraries, who have proven to be not suitable for low-end computers found in schools...) |
| @ 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> |
| @ For usage within OEF (without anstype ''draw``), something like this (a popup function plotter) will work:<br /><code>\\text{popup_grapher=wims(exec canvasdraw <br />popup<br />size 400,400<br />xrange -10,10<br />yrange -10,10<br />axis<br />axisnumbering<br />opacity 100,100<br />grid 2,2,grey,2,2,6,black<br />snaptogrid<br />linewidth 2<br />jsplot red,5*sin(1/x)<br />strokecolor green<br />functionlabel f(x)=<br />userinput function<br />mouse blue,22<br />)<br />}<br />\\statement{<br />\\popup_grapher<br />}</code>. |
| @ Be aware that older browsers will probably not work correctly<br />no effort has been undertaken to add glue code for older browsers !! <br />in any case it is not wise to use older browsers...not just for canvasdraw. |
| @ For usage within OEF (without anstype ''draw``), something like this (a popup function plotter) will work:<br><code>\\text{popup_grapher=wims(exec canvasdraw <br>popup<br>size 400,400<br>xrange -10,10<br>yrange -10,10<br>axis<br>axisnumbering<br>opacity 100,100<br>grid 2,2,grey,2,2,6,black<br>snaptogrid<br>linewidth 2<br>jsplot red,5*sin(1/x)<br>strokecolor green<br>functionlabel f(x)=<br>userinput function<br>mouse blue,22<br>)<br>}<br>\\statement{<br>\\popup_grapher<br>}</code>. |
| @ Be aware that older browsers will probably not work correctly<br>no effort has been undertaken to add glue code for older browsers !! <br>in any case it is not wise to use older browsers...not just for canvasdraw. |
| @ Be aware that combining several different objects and interactivity may lead to problems. |
| @ 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. |
| @ There is limited support for touch devices: touchstart, touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#multidraw">multidraw primitives </a>, <a href="#protractor">protractor</a>, <a href="#ruler">ruler</a> and probably a few others... <br />Only single finger gestures are supported (for now).<br />The use of a special pen is advised for interactive drawing on touch devices.<br />For more accurate user-interaction (numeric, eg keyboard driven drawings) with canvasdraw on touch devices: use the command family <a href="#userinput_xy">userinput</a>. |
| @ There is limited support for touch devices: touchstart, touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#multidraw">multidraw primitives </a>, <a href="#protractor">protractor</a>, <a href="#ruler">ruler</a> and probably a few others... <br>Only single finger gestures are supported (for now).<br>The use of a special pen is advised for interactive drawing on touch devices.<br>For more accurate user-interaction (numeric, eg keyboard driven drawings) with canvasdraw on touch devices: use the command family <a href="#userinput_xy">userinput</a>. |
| */ |
| switch(type){ |
| case END:finished = 1;done = TRUE;break; |
| 287,13 → 287,13 |
|---|
| @ animate |
| @ keyword |
| @ if set, it will animate a point on a curve |
| @ all other canvas object or group of objects (like lines,circles,rects,points...images,svg,latex,mathml etc)<br />may be animated using command <a href='#slider'>slider</a> with keyword 'anim' |
| @ all other canvas object or group of objects (like lines,circles,rects,points...images,svg,latex,mathml etc)<br>may be animated using command <a href='#slider'>slider</a> with keyword 'anim' |
| @ the animated point is a filled rectangle ; adjust colour with command <code>fillcolor colorname/hexnumber</code> |
| @ use linewidth to adjust size of the points |
| @ will animate a point on -only- the next <a href='#jsplot'>jsplot/jscurve command</a>. Only a single call to <code>animate</code> is allowed...in case of multiple <code>animate</code> keywords, only the last one is valid |
| @ only usable in combination with command <a href='#jsplot'>jsplot</a> (normal functions or parametric) |
| @ moves repeatedly from <a href='#xrange'>xmin to xmax</a> or in case of a parametric function from <a href='#trange'>tmin to tmax</a> |
| @ use commands <a href='#multilinewidth'>multilinewidth</a>, <a href='#multistrokecolor'>multistrokecolor</a> etc in case of multiple animated functions.<br />use multiple functions as argument in a single call to <a href='#jsplot'>jsplot color,fun1,fun2,fun3...fun_n</a> |
| @ use commands <a href='#multilinewidth'>multilinewidth</a>, <a href='#multistrokecolor'>multistrokecolor</a> etc in case of multiple animated functions.<br>use multiple functions as argument in a single call to <a href='#jsplot'>jsplot color,fun1,fun2,fun3...fun_n</a> |
| @%animate_1%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%linewidth 4%fillcolor red%animate%trange -2*pi,2*pi%linewidth 1%opacity 255,50%canvastype 100%fill 1.2,1.2,red%canvastype 101%fill -1.2,-1.2,blue%jsplot blue,7*cos(x),5*sin(2*x) |
| @%animate_2%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%linewidth 4%fillcolor red%animate%trange -2*pi,2*pi%linewidth 1%opacity 255,50%canvastype 100%fill 1.2,1.2,red%canvastype 101%fill -1.2,-1.2,blue%multistrokecolors blue,blue,green,green,orange,orange%multilinewidth 2,2,3,3,1,1%jsplot blue,7*cos(x),5*sin(2*x),9*sin(x),5*cos(x),x^2,x |
| */ |
| 320,7 → 320,7 |
|---|
| } |
| else |
| { |
| canvas_error("animate can only be used once<br />multiple curves may be animated using something like:<br />jsplot red,sin(x),cos(x),x^2,sin(2*x)"); |
| canvas_error("animate can only be used once<br>multiple curves may be animated using something like:<br>jsplot red,sin(x),cos(x),x^2,sin(2*x)"); |
| } |
| break; |
| |
| 374,7 → 374,7 |
|---|
| @ arrowarc xc,yc,x-width,y-height,start_angle,end_angle,color,type |
| @ alternative: arcarrow |
| @ uses same syntax as <a href='#arc'>arc</a> |
| @ for arrow hat: type = 1 : right<br />type = 2 : left<br />type = 3 : left&right |
| @ for arrow hat: type = 1 : right<br>type = 2 : left<br>type = 3 : left&right |
| @ if the default arrow hat/head is not satisfactory , the size of the arrow may be set with command <a href='#arrowhead'>arrowhead</a> |
| @ no other arrow types are implemented...yet |
| @ may be set draggable or onclick |
| 421,7 → 421,7 |
|---|
| /* |
| @ arrow x1,y1,x2,y2,h,color |
| @ alternative: vector |
| @ draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color ''color`` |
| @ draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br>with arrowhead size h in px and in color ''color`` |
| @ use command <code>linewidth int</code> to adjust thickness of the arrow |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| @%arrow_drag%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 2%drag xy%arrow 0,0,4,3,8,blue%drag xy%arrow 0,0,-4,3,8,green%drag xy%arrow 0,0,4,-3,8,orange%drag xy%arrow 0,0,-4,-3,8,cyan |
| 497,7 → 497,7 |
|---|
| case ARROW2: |
| /* |
| @ arrow2 x1,y1,x2,y2,h,color |
| @ draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color ''color`` |
| @ draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br>with arrowhead size h in px and in color ''color`` |
| @ use command <code>arrowhead int</code> to adjust the arrow head size |
| @ use command <code>linewidth int</code> to adjust thickness of the arrow |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 585,7 → 585,7 |
|---|
| @ audio format may be in *.mp3 or *.ogg |
| @ If you are using *.mp3: be aware that FireFox will not (never) play this ! (Pattented format) |
| @ if you are using *.ogg: be aware that Microsoft based systems not support it natively |
| @ To avoid problems supply both types (mp3 and ogg) of audiofiles.<br />the program will use both as source tag |
| @ To avoid problems supply both types (mp3 and ogg) of audiofiles.<br>the program will use both as source tag |
| */ |
| js_function[DRAW_AUDIO] = 1; |
| for(i=0;i<7;i++){ |
| 725,12 → 725,12 |
|---|
| case BOXPLOT: |
| /* |
| @ boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max |
| @ example:<br /><code>xrange 0,300<br />yrange 0,10<br />boxplot x,4,8,120,160,170,220,245</code><br />meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8 |
| @ example:<br /><code>xrange 0,10<br />yrange 0,300<br />boxplot y,4,8,120,160,170,220,245</code><br />meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8 |
| @ use command <a href='#filled'>filled</a> to fill the box<br /><b>note:</b> the strokecolor is used for filling Q1, the fillcolor is used for filling Q3 |
| @ example:<br><code>xrange 0,300<br>yrange 0,10<br>boxplot x,4,8,120,160,170,220,245</code><br>meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8 |
| @ example:<br><code>xrange 0,10<br>yrange 0,300<br>boxplot y,4,8,120,160,170,220,245</code><br>meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8 |
| @ use command <a href='#filled'>filled</a> to fill the box<br><b>note:</b> the strokecolor is used for filling Q1, the fillcolor is used for filling Q3 |
| @ use command <a href='#fillpattern'>fillpattern some_pattern</a> to use a (diamond for Q1, hatch for Q3) pattern. |
| @ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of stroke and fill colours |
| @ use command <a href='#legend'>legend</a> to automatically create a legend <br />unicode allowed in legend<br />use command <a href='#fontfamily'>fontfamily</a> to set the font of the legend. |
| @ use command <a href='#legend'>legend</a> to automatically create a legend <br>unicode allowed in legend<br>use command <a href='#fontfamily'>fontfamily</a> to set the font of the legend. |
| @ there is no limit to the number of boxplots used. |
| @ can <b>not</b> be set draggable and <a href='#onclick'>onclick</a> is not ready yet |
| @ 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) |
| 786,7 → 786,7 |
|---|
| @ boxplotdata some_data |
| @ 'some_data' are a list of numbers separated by a comma "," (items) |
| @ only be used before command <code>boxplot</code>: the command <a href="#boxplot">boxplot</a> will provide the boxplot drawing of the data. |
| @ xrange 0,100<br />yrange 0,10<br />boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23<br />boxplot x,4,5 |
| @ xrange 0,100<br>yrange 0,10<br>boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23<br>boxplot x,4,5 |
| @ note: wims will not check your data input | format. use js-error console to debug any problems. |
| @ a javascript function <code>statistics()</code> will parse the data and calculate the values [min,Q1,median,Q3,max] and hand them to the boxplot draw function. |
| @ only a single call to <code>boxplotdata</code> can be made. If multiple boxplots should be present in a single canvas, then use multiple calls to command <a href='#boxplot'>boxplot</a> |
| 802,7 → 802,7 |
|---|
| canvas_type = (int) (get_real(infile,1)); |
| /* |
| @ canvastype TYPE |
| @ for now only useful before commands filltoborder / floodfill / clickfill etc operations<br />Only the images of this TYPE will be scanned and filled |
| @ for now only useful before commands filltoborder / floodfill / clickfill etc operations<br>Only the images of this TYPE will be scanned and filled |
| @ default value of TYPE is DRAG_CANVAS e.g. 5 (all clickable / draggable object are in this canvas) |
| @ use another TYPE, if you know what you are doing... |
| @ other possible canvasses (e.g. transparent PNG pictures, xsize × 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> |
| 945,10 → 945,10 |
|---|
| @ alternative: erase |
| @ adds a button to clear the <a href="#userdraw">userdraw</a> canvas with text ''value`` |
| @ <b>attention</b> command <code>clearbutton</code> is incompatible with <a href="#multidraw">multidraw</a> based drawings<br/>(in <code>multidraw</code> there is always a remove_object_button for every draw primitive) |
| @ normally <a href="#userdraw">userdraw</a> primitives have the option to use middle/right mouse button on<br /> a point of the object to remove this specific object...this clear button will remove all drawings |
| @ normally <a href="#userdraw">userdraw</a> primitives have the option to use middle/right mouse button on<br> a point of the object to remove this specific object...this clear button will remove all drawings |
| @ uses the tooltip placeholder div element: may not be used with command <code>intooltip</code> |
| @ use command <a href="#css">css</a> to style the button... |
| @ the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script<br />to change the style of all ''clearbutton`` of all included canvasdraw scripts, use something like<br /><code>if(document.getElementById("clearbutton"+canvas_scripts[0])){<br /> var p = 0;<br /> while(document.getElementById("clearbutton"+canvas_scripts[p])){<br /> document.getElementById("clearbutton"+canvas_scripts[p]).className="some_class_name";<br /> <!−−</code> or <code>document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); −−><br /> p++;<br /> };<br />};</code> |
| @ the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script<br>to change the style of all ''clearbutton`` of all included canvasdraw scripts, use something like<br><code>if(document.getElementById("clearbutton"+canvas_scripts[0])){<br> var p = 0;<br> while(document.getElementById("clearbutton"+canvas_scripts[p])){<br> document.getElementById("clearbutton"+canvas_scripts[p]).className="some_class_name";<br> <!−−</code> or <code>document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); −−><br> p++;<br> };<br>};</code> |
| @%clearbutton%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 255,50%userdraw circles,red%clearbutton Remove All |
| */ |
| if(reply_format == 29){/* eg multidraw is selected */ |
| 961,14 → 961,14 |
|---|
| /* |
| @ clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ] |
| @ use command <code>opacity stroke-opacity,fill-opacity</code> to adjust foreground (stroke) and background (fill) transparency |
| @ type hourglass:<br />type = 0: only segments<br />type = 1: only numbers<br />type = 2: numbers and segments |
| @ colors are optional: if not defined, default values will be used<br />default colours: clock 0,0,60,4,35,45,1,2<br />custom colours: clock 0,0,60,4,35,45,1,2,,,,yellow,red<br />custom colours: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow |
| @ type hourglass:<br>type = 0: only segments<br>type = 1: only numbers<br>type = 2: numbers and segments |
| @ colors are optional: if not defined, default values will be used<br>default colours: clock 0,0,60,4,35,45,1,2<br>custom colours: clock 0,0,60,4,35,45,1,2,,,,yellow,red<br>custom colours: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow |
| @ if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass... |
| @ 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<br />The active clock(s) can be adjusted by pupils</li><li>2: function read_canvas() will return the clicked clock <br />(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)<br />wherein: num = clock id (starts with 0) ; type = 1 (hours) ; type = 2 (minutes) ; type = 3 (seconds) <br />and diff = the increment of 'type' (positive or negative)</li></ul> |
| @ 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<br>The active clock(s) can be adjusted by pupils</li><li>2: function read_canvas() will return the clicked clock <br>(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)<br>wherein: num = clock id (starts with 0) ; type = 1 (hours) ; type = 2 (minutes) ; type = 3 (seconds) <br>and diff = the increment of 'type' (positive or negative)</li></ul> |
| @ canvasdraw will not check validity of colornames...the javascript console is your best friend |
| @ no combinations with other reply_types allowed, for now |
| @ if interactive is set to ''1``, 6 buttons per clock will be displayed for adjusting a clock (H+ M+ S+ H- M- S-)<br /> set_clock(clock_id,type,incr) <br />first clock has clock_id=0 ; type: H=1,M=2,S=3 ; incr: increment integer |
| @ note: if you need multiple -interactive- clocks on a webpage, use multiple ''clock`` commands in a single script !<br />and <i>not multiple canvas scripts</i> in a single page |
| @ if interactive is set to ''1``, 6 buttons per clock will be displayed for adjusting a clock (H+ M+ S+ H- M- S-)<br> set_clock(clock_id,type,incr) <br>first clock has clock_id=0 ; type: H=1,M=2,S=3 ; incr: increment integer |
| @ note: if you need multiple -interactive- clocks on a webpage, use multiple ''clock`` commands in a single script !<br>and <i>not multiple canvas scripts</i> in a single page |
| @ note: clocks will not zoom or pan, when using command <a href='#zoom'>zoom</a> |
| @%clock_1%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,0,0,red,green,blue,lightgrey,black |
| @%clock_2%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,1,1,red,green,blue,lightgrey,black |
| 1009,7 → 1009,7 |
|---|
| canvas_error("interactive clock may not be used together with other reply_types..."); |
| } |
| } |
| fprintf(stdout,"<p style=\"text-align:center\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,1)\" value=\"H+\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,1)\" value=\"M+\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,1)\" value=\"S+\" /><br /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,-1)\" value=\"H−\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,-1)\" value=\"M−\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,-1)\" value=\"S−\" /></p>",css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt); |
| fprintf(stdout,"<p style=\"text-align:center\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,1)\" value=\"H+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,1)\" value=\"M+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,1)\" value=\"S+\"><br><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,-1)\" value=\"H−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,-1)\" value=\"M−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,-1)\" value=\"S−\"></p>",css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt); |
| break; |
| case 3:if(clock_cnt == 0){ |
| if( reply_format == 0 ){ |
| 1022,7 → 1022,7 |
|---|
| } |
| } |
| /* |
| fprintf(stdout,"<p style=\"text-align:center\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,1)\" value=\"H+\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,1)\" value=\"M+\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,1)\" value=\"S+\" /><br /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,-1)\" value=\"H−\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,-1)\" value=\"M−\" /><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,-1)\" value=\"S−\" /></p>",css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt); |
| fprintf(stdout,"<p style=\"text-align:center\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,1)\" value=\"H+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,1)\" value=\"M+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,1)\" value=\"S+\"><br><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,-1)\" value=\"H−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,-1)\" value=\"M−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,-1)\" value=\"S−\"></p>",css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt); |
| */ |
| break; |
| case 2:if( reply_format == 0 ){ |
| 1066,7 → 1066,7 |
|---|
| /* |
| @ colorpalette color_name_1,color_name_2,...,color_name_8 |
| @ opacity will be the same for all colors and is set by command <a href="#opacity">opacity [0-255],[0-255]</a> |
| @ can be used with command <a href='#userdraw'>userdraw clickfill,color</a> when more than one fillcolor is wanted.<br />in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br />the pupil can choose from the given colors by clicking small coloured buttons.<br /> the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat.<br />the first color of the palette is color=0 |
| @ can be used with command <a href='#userdraw'>userdraw clickfill,color</a> when more than one fillcolor is wanted.<br>in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br>the pupil can choose from the given colors by clicking small coloured buttons.<br> the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat.<br>the first color of the palette is color=0 |
| @ make sure to include the ''remove button`` by using command <a href='#clearbutton'>clearbutton some_text</a> |
| */ |
| if( use_tooltip == 1 ){canvas_error("command 'colorpalette' is incompatible with command 'intooltip tip_text'");} |
| 1093,8 → 1093,8 |
|---|
| @ [filename] is the URL of the image |
| @ <em>TODO:move special image functions to generic 'dragstuff' library</em> |
| @ URL is normal URL of network reachable image file location |
| @ if command <a href="#drag">drag x/y/xy</a> is set before command ''copy``, the images will be draggable<br />javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br />the command drag is only valid for the next image<br />draggable / non-draggable images may be mixed<br />may be used together with preceding keywords ''snaptogrid``, ''xsnaptogrid``, ''ysnaptogrid`` or <code>snaptopoints x1,y1,x2,y2...</code>. |
| @ 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)<br />use 'read_dragdrop' to get the number of the clicked image(s)<br />use command 'clearbutton some_text' to reset the reply/click array.<br />example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0<br />after clicking the clear button: reply = 0,0,0,0<br />May be mixed with commands ''drag x|y|xy`` (use javascript read_canvas to get the new coordinates |
| @ if command <a href="#drag">drag x/y/xy</a> is set before command ''copy``, the images will be draggable<br>javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br>the command drag is only valid for the next image<br>draggable / non-draggable images may be mixed<br>may be used together with preceding keywords ''snaptogrid``, ''xsnaptogrid``, ''ysnaptogrid`` or <code>snaptopoints x1,y1,x2,y2...</code>. |
| @ 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)<br>use 'read_dragdrop' to get the number of the clicked image(s)<br>use command 'clearbutton some_text' to reset the reply/click array.<br>example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0<br>after clicking the clear button: reply = 0,0,0,0<br>May be mixed with commands ''drag x|y|xy`` (use javascript read_canvas to get the new coordinates |
| @ ''onclick`` for external images may be mixed with canvas generated stuff (like lines,curves, embeded XML etc) |
| @ you may draw / userdraw / drag other stuff on top of an "imported" image |
| @ the use of a slider is not possible: if needed, use command <a href='#html'>html x,y,<img src=my_image.svg /> </a> |
| 1159,15 → 1159,15 |
|---|
| /* |
| @ copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url |
| @ The image may be any "bitmap" or "SVG" |
| @ Insert the region from (x1,y1) to (x2,y2) (in pixels) of [ filename], <br />possibly resized,<br />to the region of (dx1,dy1) to (dx2,dy2) in x/y-range |
| @ Insert the region from (x1,y1) to (x2,y2) (in pixels) of [ filename], <br>possibly resized,<br>to the region of (dx1,dy1) to (dx2,dy2) in x/y-range |
| @ (dx1:dy1) must be left top corner; (dx2:dy2) must be right bottom corner of inserted image |
| @ If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized. |
| @ URL is normal URL of network reachable image file location<br />(as seen from public_html-root or network reachable 'http://some_server/my_images/test.gif'<br />(eg no special wims paths are searched !!) |
| @ if command <a href="#drag">drag x/y/xy</a> is set before command ''copy``, the images will be draggable<br />javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br />the command drag is only valid for the next image<br />draggable / non-draggable images may be mixed<br />may be used together with preceding keywords ''snaptogrid``,''xsnaptogrid``,''ysnaptogrid`` or <code>snaptopoints x1,y1,x2,y2...</code> |
| @ 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)<br />use ''read_dragdrop`` to get the number of the clicked image(s)<br />use command 'clearbutton some_text' to reset the reply/click array.<br />example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0<br />after clicking the clear button: reply = 0,0,0,0<br />May be mixed with commands ''drag x|y|xy`` (use javascript read_canvas to get the new coordinates |
| @ URL is normal URL of network reachable image file location<br>(as seen from public_html-root or network reachable 'http://some_server/my_images/test.gif'<br>(eg no special wims paths are searched !!) |
| @ if command <a href="#drag">drag x/y/xy</a> is set before command ''copy``, the images will be draggable<br>javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br>the command drag is only valid for the next image<br>draggable / non-draggable images may be mixed<br>may be used together with preceding keywords ''snaptogrid``,''xsnaptogrid``,''ysnaptogrid`` or <code>snaptopoints x1,y1,x2,y2...</code> |
| @ 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)<br>use ''read_dragdrop`` to get the number of the clicked image(s)<br>use command 'clearbutton some_text' to reset the reply/click array.<br>example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0<br>after clicking the clear button: reply = 0,0,0,0<br>May be mixed with commands ''drag x|y|xy`` (use javascript read_canvas to get the new coordinates |
| @ ''onclick`` for external images may be mixed with canvas generated stuff (like lines,curves etc) |
| @ you may draw / userdraw / drag stuff on top of an "imported" image |
| @ when set draggable, there will be special function 'read_canvas_images()'<br />now dragging external images may be combined with 'read_canvas()' from <a href='#userdraw'>userdraw</a> or <a href='#multidraw'>multidraw</a><br />set command <a href='#precision'>precision</a> before command ''copy`` |
| @ when set draggable, there will be special function 'read_canvas_images()'<br>now dragging external images may be combined with 'read_canvas()' from <a href='#userdraw'>userdraw</a> or <a href='#multidraw'>multidraw</a><br>set command <a href='#precision'>precision</a> before command ''copy`` |
| @ use keyword <a href='#centered'>centered</a> before command 'copyresized' to place image center at given coordinates. |
| @ <em>TODO:move special image functions to generic 'dragstuff' library</em> |
| */ |
| 1185,7 → 1185,7 |
|---|
| if( int_data[1] == -1 ){ int_data[10] = 1; }else{int_data[10] = 0; }/* resized / not resized */ |
| /* flag error when wrong diagonal: copyresized -1,-1,-1,-1,0,0,7,7,testfig.gif */ |
| if( int_data[7] < int_data[5] || int_data[6] < int_data[4]){ |
| canvas_error("in copyresized, use:<br />left top corner (dx1:dy1) and right bottom corner (dx2:dy2) ! "); |
| canvas_error("in copyresized, use:<br>left top corner (dx1:dy1) and right bottom corner (dx2:dy2) ! "); |
| } |
| int_data[2] = abs(int_data[2] - int_data[0]);/* swidth */ |
| int_data[3] = abs(int_data[3] - int_data[1]);/* sheight */ |
| 1309,7 → 1309,7 |
|---|
| @ cursor some CSS cursor_style |
| @ alternative: pointer |
| @ style can be any valid CSS property value |
| @ choose from these types:<br />alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,<br />ew-resize,grab,grabbing,help,move,n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,<br />nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,s-resize,se-resize,<br />sw-resize,text,url(myBall.cur),auto,vertical-text,w-resize,wait,zoom-in,zoom-out,initial |
| @ choose from these types:<br>alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,<br>ew-resize,grab,grabbing,help,move,n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,<br>nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,s-resize,se-resize,<br>sw-resize,text,url(myBall.cur),auto,vertical-text,w-resize,wait,zoom-in,zoom-out,initial |
| @ note: wims will not check the validity of your cursor declaration |
| @%cursor_css%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 3%drag xy%opacity 200,75%fcircles blue,-5,5,3,-4,-2,6,0,0,5,3,4,2,4,-5,4 |
| */ |
| 1320,7 → 1320,7 |
|---|
| /* |
| @ curve color,formula(x) |
| @ alternative: plot |
| @ use command <a href="#trange">trange</a> in parametric functions before <b>every</b> command curve / plot <code>trange -pi,pi<br />curve color,formula1(t),formula2(t)</code><br />A next parametric curve will only be correctly plot when trange is set again !<br/>this is a design flaw and not a feature... |
| @ use command <a href="#trange">trange</a> in parametric functions before <b>every</b> command curve / plot <code>trange -pi,pi<br>curve color,formula1(t),formula2(t)</code><br>A next parametric curve will only be correctly plot when trange is set again !<br/>this is a design flaw and not a feature... |
| @ use command <a href="#precision">precision</a> to increase the number of digits of the plotted points |
| @ use command <a href="#plotsteps">plotsteps</a> to increase / decrease the amount of plotted points (default 150) |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 1359,7 → 1359,7 |
|---|
| case CURVEDARROW: |
| /* |
| @ curvedarrow x1,y1,xc,yc,x2,y2,color |
| @ draw a single headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br /> note: the curve will <b>not go through</b> point (xc:yc) |
| @ draw a single headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br> note: the curve will <b>not go through</b> point (xc:yc) |
| @ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head. |
| @ use command <code>linewidth int</code> to adjust thickness of the arrow |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 1399,7 → 1399,7 |
|---|
| case CURVEDARROW2: |
| /* |
| @ curvedarrow2 x1,y1,xc,yc,x2,y2,color |
| @ draw a double headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br /> note: the curve will <b>not go through</b> point (xc:yc) |
| @ draw a double headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br> note: the curve will <b>not go through</b> point (xc:yc) |
| @ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head. |
| @ use command <code>linewidth int</code> to adjust thickness of the arrow |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 1438,7 → 1438,7 |
|---|
| case CURVEDARROWS: |
| /* |
| @ curvedarrows color,x1,y1,xc,yc,x2,y2,...,x_(n-1),y_(n-1),xc,yc,x_n,y_n |
| @ draw curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc<br /> note: the curve will <b>not go through</b> point (xc:yc) |
| @ draw curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc<br> note: the curve will <b>not go through</b> point (xc:yc) |
| @ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head. |
| @ use command <code>linewidth int</code> to adjust thickness of the arrow |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 1478,7 → 1478,7 |
|---|
| case CURVEDARROWS2: |
| /* |
| @ curvedarrows2 color,x1,y1,xc,yc,x2,y2,...x_(n-1),y_(n-1),xc,yc,x_n,y_n |
| @ draw double headed curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc. <br /> note: the curve will <b>not go through</b> point (xc:yc) |
| @ draw double headed curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc. <br> note: the curve will <b>not go through</b> point (xc:yc) |
| @ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head. |
| @ use command <code>linewidth int</code> to adjust thickness of the arrow |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 1621,13 → 1621,13 |
|---|
| @ drag [x][y][xy] |
| @ the next object will be draggable in x / y / xy direction |
| @ the displacement can be read by <code>javascript:read_dragdrop();</code> |
| @ the precision (default 2 decimals) in the student reply may be set with command <a href="#precision">precision</a>.<br />Use this 'precision' command before this command 'drag x|y|xy' ! |
| @ the precision (default 2 decimals) in the student reply may be set with command <a href="#precision">precision</a>.<br>Use this 'precision' command before this command 'drag x|y|xy' ! |
| @ <a href='#onclick'>onclick</a> and ''drag x|y|xy`` may be combined (for different objects: a single object can either be onclick or drag, not both ) |
| @ ''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) |
| @ <b>attention</b>: 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<br /> <code>linewidth 4<br />point 0,0,red<br />drag xy<br />point 0,0,blue</code><br />the red point will not be recognised as draggable ! in the example<br /><code>linewidth 4<br />drag xy<br />point 0,0,red<br />drag xy<br />point 0,0,blue</code><br />both points will be recognised |
| @ the answer is: drag_or_onclick_object_number : Xorg : Yorg : Xnew : Ynew<br />wherein object_number is the sequence number of the draggable & onclick objects in your script.<br />Only draggable & onclick objects will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc) |
| @ <b>attention</b>: 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<br> <code>linewidth 4<br>point 0,0,red<br>drag xy<br>point 0,0,blue</code><br>the red point will not be recognised as draggable ! in the example<br><code>linewidth 4<br>drag xy<br>point 0,0,red<br>drag xy<br>point 0,0,blue</code><br>both points will be recognised |
| @ the answer is: drag_or_onclick_object_number : Xorg : Yorg : Xnew : Ynew<br>wherein object_number is the sequence number of the draggable & onclick objects in your script.<br>Only draggable & onclick objects will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc) |
| @ use keyword <a href='#snaptogrid'>snaptogrid</a>, <a href='#xsnaptogrid'>xsnaptogrid</a>, <a href='#ysnaptogrid'>ysnaptogrid</a> or command <a href='#snaptopoints'>snaptopoints x1,y1,x2,y2,...</a> to switch from free to discrete movement |
| @ in case of external images (commands copy / copyresized) the external image can be set draggable ; always xy. <br />The function javascript;read_canvas() will return the xy-coordinates of all images. |
| @ in case of external images (commands copy / copyresized) the external image can be set draggable ; always xy. <br>The function javascript;read_canvas() will return the xy-coordinates of all images. |
| @%drag_x%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 200,40%drag x%linewidth 2%circles blue,-5,0,3,0,0,2,5,0,4,0,4,3,0,-3,4 |
| @%drag_y%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 200,40%drag y%linewidth 2%circles blue,-5,0,3,0,0,2,5,0,4,0,4,3,0,-3,4 |
| @%drag_xy%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 200,40%drag xy%linewidth 2%circles blue,-5,0,3,0,0,2,5,0,4,0,4,3,0,-3,4 |
| 1737,7 → 1737,7 |
|---|
| @ use this command after all boundary objects are declared. |
| @ Use command 'userdraw clickfill,color' for user click driven flood fill. |
| @ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5) |
| @ note: the fill-family of commands are very (client) cpu intensive operations!<br />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.<br />on every data a few operations / comparisons are done...<br />So have pity on your students CPU.. |
| @ note: the fill-family of commands are very (client) cpu intensive operations!<br>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.<br>on every data a few operations / comparisons are done...<br>So have pity on your students CPU.. |
| @%fillall%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%vlines black,-5,0,-5,0,-4,0,-4,0,3,0,3,0%hlines black,-5,0,-5,0,-5,4,-5,4,-5,-2,-5,-2%circles green,0,0,2,3,3,5,-5,-5,3%opacity 240,50%fillall blue,1,1,8,8,-8,-8 |
| */ |
| decimals = find_number_of_digits(precision); |
| 1773,7 → 1773,7 |
|---|
| @ use command <a href="#fillcolor">fillcolor color</a> to set fillcolor |
| @ use <a href="#fillpattern">fillpattern</a> for non-solid color filling. |
| @ use command <code>opacity 0-255,0-255</code> to set stroke and fill-opacity |
| @ use command <a href='#fill'>fill x,y,color</a> or <a href="#floodfill">floodfill x,y,color</a> to fill the space around (x;y) with color <br />pixel operation implemented in javascript: use with care ! |
| @ use command <a href='#fill'>fill x,y,color</a> or <a href="#floodfill">floodfill x,y,color</a> to fill the space around (x;y) with color <br>pixel operation implemented in javascript: use with care ! |
| */ |
| use_filled = 1; |
| break; |
| 1795,12 → 1795,12 |
|---|
| @ use a pattern as fillstyle |
| @ suitable for all fillable object including the <a href="#userdraw">userdraw objects' family</a> |
| @ note: do not use the ''f`` for a fillable object : this is used exclusively for solid colour filling. |
| @ the fillcolor is set by the object command, for example:<br /><code>size 370,370<br />xrange -5,5<br />yrange -5,5<br />opacity 165,150<br />fillpattern grid<br />fcircle -6,3,160,blue<br />fillpattern dot<br />fcircle -3,-3,160,red<br />fillpattern hatch<br />fcircle 0,3,160,green<br />filpattern diamond<br />fcircle 3,-3,160,cyan<br />userdraw dotfill,blue<br />zoom red</code> |
| @ the fillcolor is set by the object command, for example:<br><code>size 370,370<br>xrange -5,5<br>yrange -5,5<br>opacity 165,150<br>fillpattern grid<br>fcircle -6,3,160,blue<br>fillpattern dot<br>fcircle -3,-3,160,red<br>fillpattern hatch<br>fcircle 0,3,160,green<br>filpattern diamond<br>fcircle 3,-3,160,cyan<br>userdraw dotfill,blue<br>zoom red</code> |
| @ the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed) |
| @ the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a> |
| @ see <a href="#fillcolor">fillcolor</a> for solid color filling. |
| @ 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.|<br />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)<br />for example:<br /><code>size 150,150<br />xrange -5,5<br />yrange -5,5<br />drag xy<br />fillpattern gifs/en.gif<br />fcircle 0,0,100,red<br />fillpattern gifs/nl.gif<br />drag xy<br />fcircle -3,2,100,green<br />fillpattern gifs/cn.gif<br />drag xy<br />fcircle 3,2,100,green</code> |
| @ fillpattern is also active for <a href="#userdraw">userdraw object,color</a>...<br />the userdraw family a has also ''clickfill type`` (e.g. an object gets filled between boundaries, when clicked) commands like:<br />'userdraw dotfill,color'<br />'userdraw hatchfill,color' etc |
| @ 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.|<br>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)<br>for example:<br><code>size 150,150<br>xrange -5,5<br>yrange -5,5<br>drag xy<br>fillpattern gifs/en.gif<br>fcircle 0,0,100,red<br>fillpattern gifs/nl.gif<br>drag xy<br>fcircle -3,2,100,green<br>fillpattern gifs/cn.gif<br>drag xy<br>fcircle 3,2,100,green</code> |
| @ fillpattern is also active for <a href="#userdraw">userdraw object,color</a>...<br>the userdraw family a has also ''clickfill type`` (e.g. an object gets filled between boundaries, when clicked) commands like:<br>'userdraw dotfill,color'<br>'userdraw hatchfill,color' etc |
| @%fillpattern_1%size 400,400%xrange -5,5%yrange -5,5%opacity 165,150%fillpattern grid%circle -6,3,160,blue%fillpattern dot%circle -3,-3,160,red%fillpattern hatch%circle 0,3,160,green%filpattern diamond%circle 3,-3,160,cyan%zoom red |
| @%fillpattern_2%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%fillcolor green%fillpattern hatch%#fillpattern dot,diamond,grid,imageurl%userdraw circle,red |
| */ |
| 1836,7 → 1836,7 |
|---|
| @ any other color will not act as border to the bucket fill |
| @ use this command after all boundary objects are declared. |
| @ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5) |
| @ note: filltoborder is a very (client) cpu intensive operation!<br />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.<br />on every data a few operations / comparisons are done...<br />So have pity on your students CPU.. |
| @ note: filltoborder is a very (client) cpu intensive operation!<br>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.<br>on every data a few operations / comparisons are done...<br>So have pity on your students CPU.. |
| @ maybe used together with command <a href="#userdraw">userdraw clickfill,color</a> |
| @%filltoborder%size 400,400%xrange -10,10%yrange -10,10%canvastype 100%linewidth 2%precision 1000%jsplot blue,5*sin(x)%opacity 200,50%filltoborder 6,6,blue,blue%filltoborder 6,-6,blue,red |
| */ |
| 1872,7 → 1872,7 |
|---|
| @ use this command after all boundary objects are declared. |
| @ Use command <code>userdraw clickfill,color</code> for user click driven flood fill. |
| @ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5) |
| @ note: floodfill is a very (client) cpu intensive operation!<br />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.<br />on every data a few operations / comparisons are done...<br />So have pity on your students CPU.. |
| @ note: floodfill is a very (client) cpu intensive operation!<br>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.<br>on every data a few operations / comparisons are done...<br>So have pity on your students CPU.. |
| @%floodfill%size 400,400%xrange -10,10%yrange -10,10%canvastype 100%linewidth 2%precision 1000%jsplot blue,5*sin(x)%opacity 200,50%floodfill 6,6,blue%floodfill 6,-6,red |
| */ |
| for(i=0 ;i < 4 ; i++){ |
| 1925,7 → 1925,7 |
|---|
| /* |
| @ fontsize font_size |
| @ default value 12 |
| @ note: for some macros (like ''grid | legend | xaxistext | xlabel`` etc) sometimes command <a href="#fontfamily">fontfamily</a> can be used for some specific font-setting<br />this is however not always very straight forward... so just try and see what happens |
| @ note: for some macros (like ''grid | legend | xaxistext | xlabel`` etc) sometimes command <a href="#fontfamily">fontfamily</a> can be used for some specific font-setting<br>this is however not always very straight forward... so just try and see what happens |
| */ |
| font_size = (int) (get_real(infile,1)); |
| break; |
| 2035,7 → 2035,7 |
|---|
| @ group |
| @ keyword |
| @ work in 'progress' |
| @ all objects(*) after the command and until <a href="#kill">kill group</a> or <a href="#killslider">killslider</a> may be moved together with mouse moverments<br /> (*) for now all real canvas objects and latex / xml ; but no images (work in progress) |
| @ all objects(*) after the command and until <a href="#kill">kill group</a> or <a href="#killslider">killslider</a> may be moved together with mouse moverments<br> (*) for now all real canvas objects and latex / xml ; but no images (work in progress) |
| @ may be combined with slider driven movements or drag & drop |
| @%group%%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%linewidth 4%rotationcenter 0,0%slider -2*pi,2*pi,300,40,angle active,rotate%snaptogrid%ftriangle 0,-4,-2,-2,4,--5,blue%fillcolor red%fcircle -4.4,4.4,40,blue%kill slider%slider -20,20,300,40,x active,x-slide%ftriangle -2,0,0,4,2,0,green%fcircle 4.4,4.5,40,red%kill slider%slider -20,20,300,40,y active,y-slide%fcircle 4,-4,40,green%linewidth 4%fcircle -4,-4,40,orange%kill slider%group%fcircle -4.4,4.5,10,blue%fcircle -5.4,4.5,10,blue%fcircle -6.4,4.5,10,blue%fcircle -4.4,8,16,green%fcircle -5.4,8,16,green%fcircle -6.4,8,16,green%mouse red,22%zoom red |
| */ |
| 2346,7 → 2346,7 |
|---|
| @ note: using drag&drop for all external P,SPAN,DIV,IMG,SVG-images onto a canvasdraw element, use ''onclick=javascript:place_image_on_canvas(this.id)`` |
| @ note: sub & sup are supported in command family <a href='#string'>string</a>, e.g. real internal canvas objects ! |
| @%html-text%size 500,500%xrange -10,10%yrange -10,10%drag xy%centered%fillcolor lightblue%html 2,2,<h1 style='color:red'>DRAG ME</h1> %opacity 200,50%drag xy%fcircle 0,0,100,green |
| @%html-image-slider%size 500,500%xrange -10,10%yrange -10,10%fontsize 42%rotationcenter 0,0%centered%html 0,0,<img src="http://85.148.206.56/gifs/can1.gif" />%slider 0,pi,400,40,angle active degree, %centered%html 0,0,<img src="http://85.148.206.56/gifs/can2.gif" /> |
| @%html-image-slider%size 500,500%xrange -10,10%yrange -10,10%fontsize 42%rotationcenter 0,0%centered%html 0,0,<img src="http://85.148.206.56/gifs/can1.gif">%slider 0,pi,400,40,angle active degree, %centered%html 0,0,<img src="http://85.148.206.56/gifs/can2.gif"> |
| */ |
| js_function[DRAW_XML] = 1; |
| for(i=0;i<5;i++){ |
| 2429,10 → 2429,10 |
|---|
| @ to set inputfield "readonly", use editable = 0 |
| @ if no preset 'value' is needed...use a 'space' as last item argument |
| @ only active inputfields (editable = 1) will be read with read_canvas(); |
| @ if ''$status=done`` (e.g. in answer.phtml) the inputfield will be cleared and set readonly<br />override this by keyword <a href="#status">status</a> |
| @ if ''$status=done`` (e.g. in answer.phtml) the inputfield will be cleared and set readonly<br>override this by keyword <a href="#status">status</a> |
| @ may be further controlled by <a href="#css">css</a> |
| @ if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (javascript:read_canvas();) |
| @ use keyword <a href='#xoffset'>xoffset | centered</a> if the inputfield should be centered on (x:y)<br /> default is the left top corner is (x:y) |
| @ use keyword <a href='#xoffset'>xoffset | centered</a> if the inputfield should be centered on (x:y)<br> default is the left top corner is (x:y) |
| @ if the student must place an inputfield(s) somewhere on the canvas, use command <a href="#userdraw">userdraw input,color</a> or make use of a command like <a href="#userdraw">userdraw text,color</a> |
| @%input%size 400,400%xrange -10,10%yrange -10,10%linewidth 6%point 1,2,red%input 1,2,5,1, ?%point -5,5,red%input -5,5,5,1, ?%point 6,-5,red%input 6,-5,5,1, ?%point -5,-8,red%input -5,-8,5,1, ? |
| */ |
| 2464,8 → 2464,8 |
|---|
| @ link_text may contain HTML markup |
| @ the canvas will be displayed in a tooltip on ''link_text`` |
| @ 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'. |
| @ many ''userinput stuff`` will use the tooltip_placeholder_div element...only one is defined in the wims-page<br />and are therefore these commands are mutually exclusive.<br />keep this in mind... |
| @%intooltip%size 400,400%xrange -10,10%yrange -10,10%fontfamily Bold 42pt Courier%string black,0,0,Hello World%intooltip <span style="background-color:black;color:white;font-style:bold;font-size:48pt;">CLICK <br />HERE</span> |
| @ many ''userinput stuff`` will use the tooltip_placeholder_div element...only one is defined in the wims-page<br>and are therefore these commands are mutually exclusive.<br>keep this in mind... |
| @%intooltip%size 400,400%xrange -10,10%yrange -10,10%fontfamily Bold 42pt Courier%string black,0,0,Hello World%intooltip <span style="background-color:black;color:white;font-style:bold;font-size:48pt;">CLICK <br>HERE</span> |
| */ |
| if(use_input_xy != FALSE ){canvas_error("intooltip can not be combined with userinput_xy or other commands using the tooltip-div...see documentation");} |
| if( use_tooltip == 1 ){ canvas_error("command 'intooltip' cannot be combined with command 'popup'...");} |
| 2479,12 → 2479,12 |
|---|
| @ jscurve color,formula1(x),formula2(x),formula3(x),... |
| @ alternative: jsplot |
| @ your function will be plotted by the javascript engine of the client browser |
| @ if <a href='trange'>trange</a> is defined, the two functions will be plotted parametric<br /><b>note</b>: use <i>x</i> as variable...and not <i>t</i>. Use keyword <a href='#animate'>animate</a> to animate a point on the curve |
| @ if <a href='trange'>trange</a> is defined, the two functions will be plotted parametric<br><b>note</b>: use <i>x</i> as variable...and not <i>t</i>. Use keyword <a href='#animate'>animate</a> to animate a point on the curve |
| @ use only basic math in your curve: <code>sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e</code> |
| @ use parenthesis and rawmath: use 2*x instead of 2x ; use 2^(sin(x))...etc etc (use error console to debug any errors...) |
| @ <b>attention</b>: last ''precision`` command in the canvasdraw script determines the calculation precision of the javascript curve plot ! |
| @ no validity check is done by wims. |
| @ zooming & panning are implemented:<br />use command ''zoom color`` for mouse driven zooming<br />or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax |
| @ zooming & panning are implemented:<br>use command ''zoom color`` for mouse driven zooming<br>or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax |
| @ 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 |
| @ zooming & panning in case of userbased functionplot: reclick the OK button to re-plot curve onto the resized grid |
| @ use keyword <a href='animate'>animate</a> for animating a point on the curve |
| 2518,7 → 2518,7 |
|---|
| @ will calculate an y-value from a userinput x-value and draws a crosshair on these coordinates. |
| @ 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 |
| @ use command 'css some_css' for styling the display fields. Use command 'fontsize int' to size the labels ''x`` and ''y`` |
| @ the client browser will convert your math function to javascript math.<br />use parenthesis and rawmath: use 2*x instead of 2x etc etc<br />no check is done on the validity of your function and/or syntax<br />use error console to debug any errors... |
| @ the client browser will convert your math function to javascript math.<br>use parenthesis and rawmath: use 2*x instead of 2x etc etc<br>no check is done on the validity of your function and/or syntax<br>use error console to debug any errors... |
| @ be aware that the formula's of the plotted function(s) can be found in the page javascript source |
| @%jsmath%size 400,400%xrange -10,10%yrange -10,10%jsplot blue,sin(x^2)%jsmath sin(x^2) |
| */ |
| 2610,10 → 2610,10 |
|---|
| /* |
| @ latex x,y,tex string |
| @ alternative: math |
| @ note: <b>for a single greek letter</b> ,please be smart and use a command like <a href='#string'>string</a> along with <b>unicode</b> !! <br />possibly together with command <a href="#xyoffset">xoffset, yoffset or xyoffset</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a> |
| @ note: <b>for a single greek letter</b> ,please be smart and use a command like <a href='#string'>string</a> along with <b>unicode</b> !! <br>possibly together with command <a href="#xyoffset">xoffset, yoffset or xyoffset</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a> |
| @ you may also use command <a href="#mathml">mathml</a> for xml strings generated with wims commmand ''mathmlmath`` (will not work on KaTeX enabled WIMS) |
| @ transformation commands <a href='#affine'>affine</a>, <a href='#translation'>translation</a> and <a href='#rotate'>rotate</a> are supported.(onclick and drag will work) |
| @ can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br />if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object |
| @ can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br>if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object |
| @ can be set draggable:<code>javascript:read_dragdrop();</code> will return all coordinates in the same order as the canvas script: unmoved object will have their original coordinates... |
| @ can be moved/rotated with command <a href='#slider'>slider</a> |
| @ snaptogrid is supported |
| 2622,13 → 2622,13 |
|---|
| @ userdraw may be combined; the read_canvas() will contain the drawing. |
| @ draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> and all objects from commands <a href='#html'>html</a> or <a href='#obabel'>obabel</a> can be combined with drag and/or onclick mathml |
| @ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret... |
| @ if inputfields are incorporated in mathml (with id's: id='mathml0',id='mathml1',...id='mathml_n')<br />the user_input values will be read by <code>javascript:read_mathml();</code>. <b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();" |
| @ if inputfields are incorporated in mathml (with id's: id='mathml0',id='mathml1',...id='mathml_n')<br>the user_input values will be read by <code>javascript:read_mathml();</code>. <b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();" |
| @ If other inputfields (command input / command textarea) or userdraw are performed, the function read_canvas() will not read mathml. Use some generic function to read it.... |
| @ use keyword <a href='#centered'>centered</a> to center the katex div object on (x1:y1) <br />this may not work as expected for MathJaX [TO BE TESTED] |
| @ note: if you want to include external TeX via drag&drop onto a canvasdraw element, use \\mmlid{integer} in the tex-command:''!insmath \\mmlid{1}\\frac{1}{\pi}``<br /> (if your wims_mathml does not support it...use <a href="http://85.148.206.56/wims/download/Mathml.tar.gz">this version...</a>) |
| @ use keyword <a href='#centered'>centered</a> to center the katex div object on (x1:y1) <br>this may not work as expected for MathJaX [TO BE TESTED] |
| @ note: if you want to include external TeX via drag&drop onto a canvasdraw element, use \\mmlid{integer} in the tex-command:''!insmath \\mmlid{1}\\frac{1}{\pi}``<br> (if your wims_mathml does not support it...use <a href="http://85.148.206.56/wims/download/Mathml.tar.gz">this version...</a>) |
| @ note: the same is true for all external P,SPAN,DIV,IMG,SVG-images via drag&drop onto a canvasdraw element, use ''onclick=javascript:place_image_on_canvas(this.id)`` |
| @%latex_drag%size 400,400%xrange -10,10%yrange -10,10%grid 2,2,grey%strokecolor red%drag xy%centered%latex -6,5,\\frac{1}{2}+ \\frac{\\pi}{2}%strokecolor blue%drag xy%centered%latex -3,5,\\frac{1}{3}+ \\frac{\\pi}{3}%strokecolor green%drag xy%centered%latex 0,5,\\frac{1}{4}+ \\frac{\\pi}{4}%strokecolor orange%drag xy%fontfamily 26px Times%centered%latex 3,5,\\frac{1}{5}+ \\frac{\\pi}{6} |
| @%latex%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%vline 0,0,green%hline 0,0,green%fontfamily 16px Arial%fillcolor orange%strokecolor blue%linewidth 2%slider 0,4*pi,400,40,angle degree active, %centered%latex 0,0,\\frac{12345}{23456} \\times \\frac{12345}{23456}%translate 4,4%centered%rotate 180%drag xy%html 0,0,<table><tr><th>HTML TABLE</th></tr><tr><th><a href="https://wimsedu.info/">WIMS EDU </a> </th></tr><tr><td><img src="gifs/en.gif" /></tr><tr><td><img src="gifs/nl.gif" /></tr><tr><td><img src="gifs/fr.gif" /></tr><tr><td><img src="gifs/cn.gif" /></tr><tr><td><img src="gifs/it.gif" /></tr></table>%userdraw arrow2,red |
| @%latex%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%vline 0,0,green%hline 0,0,green%fontfamily 16px Arial%fillcolor orange%strokecolor blue%linewidth 2%slider 0,4*pi,400,40,angle degree active, %centered%latex 0,0,\\frac{12345}{23456} \\times \\frac{12345}{23456}%translate 4,4%centered%rotate 180%drag xy%html 0,0,<table><tr><th>HTML TABLE</th></tr><tr><th><a href="https://wimsedu.info/">WIMS EDU </a> </th></tr><tr><td><img src="gifs/en.gif"></tr><tr><td><img src="gifs/nl.gif"></tr><tr><td><img src="gifs/fr.gif"></tr><tr><td><img src="gifs/cn.gif"></tr><tr><td><img src="gifs/it.gif"></tr></table>%userdraw arrow2,red |
| */ |
| js_function[DRAW_XML] = 1; |
| for(i=0;i<3;i++){ |
| 2788,7 → 2788,7 |
|---|
| /* |
| @ lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n |
| @ draw multiple lines through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color' |
| @ or use multiple commands ''curve color,formula`` or ''jscurve color,formule`` to draw the line <br />(uses more points to draw the line; is however better draggable) |
| @ or use multiple commands ''curve color,formula`` or ''jscurve color,formule`` to draw the line <br>(uses more points to draw the line; is however better draggable) |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| @ <b>attention</b>: the flydraw command ''lines`` is equivalent to canvasdraw command <a href="#polyline">polyline</a> |
| @%lines%size 400,400%xrange -10,10%yrange -10,10%lines green,0,1,1,3,0,0,1,3,0,0,-2,1 |
| 2864,10 → 2864,10 |
|---|
| /* |
| @ levelcurve color,expression in x/y,l1,l2,... |
| @ draws very primitive level curves for expression, with levels l1,l2,l3,...,l_n |
| @ the quality is <b>not to be compared</b> with the Flydraw levelcurve. <br />(choose flydraw if you want quality...) |
| @ every individual level curve may be set 'onclick / drag xy' <br />e.g. every single level curve (l1,l2,l3...l_n) has a unique identifier |
| @ the quality is <b>not to be compared</b> with the Flydraw levelcurve. <br>(choose flydraw if you want quality...) |
| @ every individual level curve may be set 'onclick / drag xy' <br>e.g. every single level curve (l1,l2,l3...l_n) has a unique identifier |
| @ note: the arrays for holding the javascript data are limited in size |
| @ note: reduce image size if javascript data arrays get overloaded<br />(command 'plotsteps int' will not control the data size of the plot...) |
| @ note: reduce image size if javascript data arrays get overloaded<br>(command 'plotsteps int' will not control the data size of the plot...) |
| @%levelcurve%size 400,400%xrange -10,10%yrange -10,10%levelcurve red,x*y,1,2,3,4 |
| */ |
| fill_color = get_color(infile,0); |
| 2912,7 → 2912,7 |
|---|
| case LEGENDCOLORS: |
| /* |
| @ legendcolors color1:color2:color3:...:color_n |
| @ will be used to color a legend: use this command after the legend command ! e.g. <code>legend test1:test2:test3<br />legendcolors blue:red:orange</code>. |
| @ will be used to color a legend: use this command after the legend command ! e.g. <code>legend test1:test2:test3<br>legendcolors blue:red:orange</code>. |
| @ make sure the number of colors match the number of legend items |
| @ command ''legend`` in case of ''piechart`` and ''barchart`` will use these colours per default (no need to specify ''legendcolors``) |
| @%legendcolors%size 400,400%xrange -10,10%yrange -10,10%fontsize 18%legend legend 1:legend 2:legend 3%legendcolors red:green:blue%grid 1,1,grey |
| 2948,7 → 2948,7 |
|---|
| @ mathml x1,y1,mathml_string |
| @ this command is special for GECKO browsers, and it makes use of Native Mathml |
| @ For general use with all browsers, use command <a href='#latex'>latex</a> |
| @ can be set <a href='onclick'>onclick</a> and <a href='drag'>drag&drop</a> <br />Note: dragging is fairly primitive dragging of the div-element, and is not done using the <em>dragstuff library</em> |
| @ can be set <a href='onclick'>onclick</a> and <a href='drag'>drag&drop</a> <br>Note: dragging is fairly primitive dragging of the div-element, and is not done using the <em>dragstuff library</em> |
| @ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations |
| @ command <a href='#rotate'>rotate</a> will rotate the object |
| @ the mathml object is centered at (x1:y1) |
| 2961,7 → 2961,7 |
|---|
| @ userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing. |
| @ draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> can be combined with drag and/or onclick mathml |
| @ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret... |
| @ if inputfields are incorporated in mathml (with id's: id='mathml0',id='mathml1',...id='mathml_n')<br />the user_input values will be read by javascript:read_mathml();<br /><b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();" |
| @ if inputfields are incorporated in mathml (with id's: id='mathml0',id='mathml1',...id='mathml_n')<br>the user_input values will be read by javascript:read_mathml();<br><b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();" |
| @ 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.... |
| @ use keyword <a href='#centered'>centered</a> to center the mathml/xml object on (x1:y1) |
| @%mathml_onclick%size 400,400%xrange -10,10%yrange -10,10%onclick%strokecolor red%mathml -5,5,<span style="font-size:1em;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle id="wims_mathml366290"><mrow><mo stretchy="true">[</mo><mtable rowspacing="0.5ex" columnalign=" left " columnlines=" none " rowlines=" none " ><mtr><mtd><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mstyle displaystyle="true"><mfrac><mn>1</mn><mn>2</mn></mfrac></mstyle><mo>⋅</mo><msup><mi>x</mi> <mn>2</mn></msup></mtd></mtr> <mtr><mtd><mi>g</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mstyle displaystyle="true"><mfrac><mn>1</mn><mrow><msup><mi>x</mi> <mn>2</mn></msup></mrow></mfrac></mstyle></msqrt></mtd></mtr></mtable><mo stretchy="true">]</mo></mrow></mstyle></math></span>%onclick%strokecolor blue%mathml 5,5,<span style="font-size:1em;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle id="wims_mathml580175" ><mrow><mo stretchy="true">[</mo><mtable rowspacing="0.5ex" columnalign=" left " columnlines=" none " rowlines="none"><mtr><mtd><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mstyle displaystyle="true"><mfrac><mn>1</mn><mrow><mi>sin</mi><mrow><mo stretchy="true">(</mo><msup><mi>x</mi> <mn>2</mn></msup><mo stretchy="true">)</mo></mrow></mrow></mfrac></mstyle></mtd></mtr> <mtr><mtd><mi>g</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mrow><mi>sin</mi><mrow><mo stretchy="true">(</mo><msup><mi>x</mi> <mn>2</mn></msup><mo stretchy="true">)</mo></mrow></mrow></msqrt></mtd></mtr></mtable><mo stretchy="true">]</mo></mrow></mstyle></math></span> |
| 3021,7 → 3021,7 |
|---|
| case MOUSE_DEGREE: |
| /* |
| @ mouse_degree color,fontsize |
| @ will display the angle in degrees between x-axis, (0:0) and the cursor (x:y) in 'color' and 'font size'<br /> using a fontfamily Arial |
| @ will display the angle in degrees between x-axis, (0:0) and the cursor (x:y) in 'color' and 'font size'<br> using a fontfamily Arial |
| @ The angle is positive in QI and QIII and the angle value is negative in QII and QIV |
| @ note: use command 'mouse' at the end of your script code (the same is true for command 'zoom') |
| @%mouse_degree%size 400,400%xrange -10,10%yrange -10,10%userdraw arc,blue%precision 100000%mouse_degree red,22 |
| 3131,7 → 3131,7 |
|---|
| @ meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <code>multifill points,circle,segments</code>, are dashed |
| @ use before command <a href='#multidraw'>multidraw</a> |
| @ if not set all objects will be set ''not dashed``... unless a generic keyword ''dashed`` was given before command ''multidraw`` |
| @ the dash-type is not -yet- adjustable <br />(e.g. command <code>dashtype line_px,space_px</code> will give no control over multidraw objects) |
| @ the dash-type is not -yet- adjustable <br>(e.g. command <code>dashtype line_px,space_px</code> will give no control over multidraw objects) |
| @ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives... |
| @ always use the same sequence as is used for ''multidraw`` |
| */ |
| 3146,22 → 3146,22 |
|---|
| /* |
| @ multidraw obj_type_1,obj_type_2...obj_type_11 |
| @ for simple single object user drawings you could also use command <a href="#userdraw">userdraw</a> |
| @ 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>curvedarrow | curvedarrows</li><li>rect | rects</li><li>closedpoly<br /><b>only one</b> closedpolygon may be drawn.The number of ''corner points`` is not preset (e.g. not limited, freestyle), the polygon 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><li>images</li><li>crosshair | crosshairs</li><li>function <br/>for more function user input fields, use it multiple times<br />for 4 inputfields use : multidraw function,function,function,function</li></ul> |
| @ additionally objects may be user labelled, using obj_type ''text``...<br />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.<br />use commands ''fontfamily`` and ''fontcolor`` to adjust (command ''multistrokeopacity`` may be set to adjust text opacity)<br />note: text is always centered on the mouse-click or user-input coordinates !<br />note: no keyboard listeners are used |
| @ it makes no sense using something like ''multidraw point,points`` ... <br />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... |
| @ note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise) <br /> to overrule use command/keyword "status" (no arguments required) |
| @ buttons for changing the obj_type (and in case of ''multiuserinput``, some inputfields and buttons) <br />will be present in the reserved div ''tooltip_div`` and can be styled using command 'css some_css' |
| @ the button label will be default the ''object primitive name`` (like ''point``, ''circles``).<br />If you want a different label (e.g. an other language), use command ''multilabel``<br />for example in dutch: <br /><code>multilabel cirkel,lijnstuk,punten,STOP<br />multidraw circle,segment,points</code><br />(see command <a href='#multilabel'>multilabel</a> for more details) |
| @ 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>curvedarrow | curvedarrows</li><li>rect | rects</li><li>closedpoly<br><b>only one</b> closedpolygon may be drawn.The number of ''corner points`` is not preset (e.g. not limited, freestyle), the polygon 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><li>images</li><li>crosshair | crosshairs</li><li>function <br/>for more function user input fields, use it multiple times<br>for 4 inputfields use : multidraw function,function,function,function</li></ul> |
| @ additionally objects may be user labelled, using obj_type ''text``...<br>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.<br>use commands ''fontfamily`` and ''fontcolor`` to adjust (command ''multistrokeopacity`` may be set to adjust text opacity)<br>note: text is always centered on the mouse-click or user-input coordinates !<br>note: no keyboard listeners are used |
| @ it makes no sense using something like ''multidraw point,points`` ... <br>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... |
| @ note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise) <br> to overrule use command/keyword "status" (no arguments required) |
| @ buttons for changing the obj_type (and in case of ''multiuserinput``, some inputfields and buttons) <br>will be present in the reserved div ''tooltip_div`` and can be styled using command 'css some_css' |
| @ the button label will be default the ''object primitive name`` (like ''point``, ''circles``).<br>If you want a different label (e.g. an other language), use command ''multilabel``<br>for example in dutch: <br><code>multilabel cirkel,lijnstuk,punten,STOP<br>multidraw circle,segment,points</code><br>(see command <a href='#multilabel'>multilabel</a> for more details) |
| @ a right mouse button click will remove the last drawn object of the selected drawing type. All other type of objects are not removed |
| @ multidraw is incompatible with command ''tooltip`` (the reserved div_area is used for the multidraw control buttons) |
| @ all ''multidraw`` drawings will scale on zooming.<br />this in contrast to the command <a href="#userdraw">userdraw</a>. |
| @ wims will <b>not</b> check the amount or validity of your command arguments ! <br />( use javascript console to debug any typo's ) |
| @ a local function <code>read_canvas%d</code> will read all userbased drawings.<br />The output is always a 16 lines string with fixed sequence.<br/>line 1 = points_x+";"+points_y+"\\n"<br/>line 2 = circles_x+";"+circles_y+";"+multi_radius+"\\n"<br/>line 3 = segments_x+";"+segments_y+"\\n"<br/>line 4 = arrows_x+";"+arrows_y+"\\n"<br/>line 5 = lines_x+";"+lines_y+"\\n"<br/>line 6 = triangles_x+";"+triangles_y+"\\n"<br/>line 7 = polys[3-9]_x+";"+polys[3-9]_y+"\\n"<br/>line 8 = rects_x +";"+rects_y+"\\n"<br />line 9 = closedpoly_x+";"+closedpoly_y+"\\n"<br/>line 10 = parallelogram_x+";"+parallelogram_y"\\n"<br/>line 11 = text_x+";"+text_y+";"+text"\\n"<br />line 12 = image_x+";"+image_y+";"+image_id<br />line 13 = curvedarrows_x +";"+ curvedarrows_y +"\\n"<br />line 14 = curvedarrows2_x +";"+ curvedarrows2_y +"\\n"<br />line 15 = crosshairs_x +";"+ crosshairs_y +"\\n"<br />line 16 = userdraw_x +";"+userdraw_y + "\\n" note: this is for single ''userdraw object,color`` and ''replyformat 29``<br/>line 17 = userdraw_x +";"+userdraw_y +";"+userdraw_radius + "\\n" note: this is for single ''userdraw object,color`` and ''replyformat 29``<br/>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...``<br />In case of circles the radius is -for the time being- rounded to pixels<br /><b>use the wims "direct exec" tool to see the format of the reply</b> |
| @ It is best to prepare / format the student reply in clientside javascript.<br />However in ''wims`` language you could use something like this<br />for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)<br />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<br />rep = !line 7 of reply <br />rep = !translate ';' to '\\n' in $rep <br />pts = 5 # 5 points for polygon <br />x_rep = !line 1 of $rep <br />y_rep = !line 2 of $rep <br />tot = !itemcnt $x_rep <br />num_poly = $[$tot/$pts] <br />idx = 0 <br />!for p=1 to $num_poly <br /> !for s=1 to $pts <br /> !increase idx <br /> X = !item $idx of $x_rep <br /> Y = !item $idx of $y_rep <br /> # do some checking <br /> !next s <br />!next p <br /> |
| @ all ''multidraw`` drawings will scale on zooming.<br>this in contrast to the command <a href="#userdraw">userdraw</a>. |
| @ wims will <b>not</b> check the amount or validity of your command arguments ! <br>( use javascript console to debug any typo's ) |
| @ a local function <code>read_canvas%d</code> will read all userbased drawings.<br>The output is always a 16 lines string with fixed sequence.<br/>line 1 = points_x+";"+points_y+"\\n"<br/>line 2 = circles_x+";"+circles_y+";"+multi_radius+"\\n"<br/>line 3 = segments_x+";"+segments_y+"\\n"<br/>line 4 = arrows_x+";"+arrows_y+"\\n"<br/>line 5 = lines_x+";"+lines_y+"\\n"<br/>line 6 = triangles_x+";"+triangles_y+"\\n"<br/>line 7 = polys[3-9]_x+";"+polys[3-9]_y+"\\n"<br/>line 8 = rects_x +";"+rects_y+"\\n"<br>line 9 = closedpoly_x+";"+closedpoly_y+"\\n"<br/>line 10 = parallelogram_x+";"+parallelogram_y"\\n"<br/>line 11 = text_x+";"+text_y+";"+text"\\n"<br>line 12 = image_x+";"+image_y+";"+image_id<br>line 13 = curvedarrows_x +";"+ curvedarrows_y +"\\n"<br>line 14 = curvedarrows2_x +";"+ curvedarrows2_y +"\\n"<br>line 15 = crosshairs_x +";"+ crosshairs_y +"\\n"<br>line 16 = userdraw_x +";"+userdraw_y + "\\n" note: this is for single ''userdraw object,color`` and ''replyformat 29``<br/>line 17 = userdraw_x +";"+userdraw_y +";"+userdraw_radius + "\\n" note: this is for single ''userdraw object,color`` and ''replyformat 29``<br/>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...``<br>In case of circles the radius is -for the time being- rounded to pixels<br><b>use the wims "direct exec" tool to see the format of the reply</b> |
| @ It is best to prepare / format the student reply in clientside javascript.<br>However in ''wims`` language you could use something like this<br>for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)<br>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<br>rep = !line 7 of reply <br>rep = !translate ';' to '\\n' in $rep <br>pts = 5 # 5 points for polygon <br>x_rep = !line 1 of $rep <br>y_rep = !line 2 of $rep <br>tot = !itemcnt $x_rep <br>num_poly = $[$tot/$pts] <br>idx = 0 <br>!for p=1 to $num_poly <br> !for s=1 to $pts <br> !increase idx <br> X = !item $idx of $x_rep <br> Y = !item $idx of $y_rep <br> # do some checking <br> !next s <br>!next p <br> |
| @ <b>attention</b>: 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. |
| @ technical: all 10 ''draw primitives`` + ''text`` will have their own -transparent- PNG bitmap canvas. <br />So for example there can be a points_canvas entirely separated from a line_canvas.<br />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 too many very slow do-it-all HTML5 canvas javascript libraries.<br />The mouselisteners are attached to the canvas-div element. |
| @ a special object type is ''images``.<br />if used together with <a href='#imagepalette'>imagepalette</a> a image table will be integrated in the 'control section' of multidraw (set <code>multiuserinput 1</code> for ''images``) if not used with <a href='#imagepalette'>imagepalette</a>, provide the images or div's (<img> tag with bitmap or SVG or anything in a div element) somewhere on the html exercise page, with an onclick handler like:<br /><code><img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" /><br /><img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" /></code><br />etc ... when activating the multidraw ''image`` button, the images can be selected<br /> (left mouse button/onclick) and placed on the canvas...left mouse click.<br />using div's will enable you -amongst other content- to add math typesetting from the exercise page onto the canvas. |
| @ When you are not content with the default ''multidraw control panel``, you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and ''stop drawing`` in case you also want to drag&drop stuff...</br>To activate this feature, use <a href='#multilabel'>multilabel NOCONTROLS</a><br />The object types are internally represented by the following numbers (making typos will render your exercise null and void)<br/>point = 0<br />points =1<br />circle = 2<br />circles = 3<br />line = 4<br />lines = 5<br />segment = 6<br />segments = 7<br />arrow = 8<br />arrows = 9<br />triangle = 10<br />triangles = 11<br />closedspoly = 12<br />text = 13<br />rect = 14<br />rects = 15<br />poly[3-9] = 16<br />polys[3-9] = 17<br />parallelogram = 18<br />parallelograms = 19<br />images = 20<br />curvedarrow = 21<br />curvedarrows = 22<br />curvedarrow2 = 23<br />curvedarrows2 = 24<br />crosshair = 25<br />crosshairs = 26 <br />controls for example:<br /><code><input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' /><br /><input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' /> <br /><input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' /> </code><br/> If using multiple canvas scripts in a single page, loop through the canvas_scripts[n] <br />note: if using NOCONTROLS and just a single draw primitive (for example, just: 'multidraw circles'), the object may be drawn directly. (analogue to 'userdraw circles,color')<br />And since a right mouse button click will always remove the last drawn object of the current object type, there is no need for a special "remove button" |
| @ technical: all 10 ''draw primitives`` + ''text`` will have their own -transparent- PNG bitmap canvas. <br>So for example there can be a points_canvas entirely separated from a line_canvas.<br>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 too many very slow do-it-all HTML5 canvas javascript libraries.<br>The mouselisteners are attached to the canvas-div element. |
| @ a special object type is ''images``.<br>if used together with <a href='#imagepalette'>imagepalette</a> a image table will be integrated in the 'control section' of multidraw (set <code>multiuserinput 1</code> for ''images``) if not used with <a href='#imagepalette'>imagepalette</a>, provide the images or div's (<img> tag with bitmap or SVG or anything in a div element) somewhere on the html exercise page, with an onclick handler like:<br><code><img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" /><br><img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" /></code><br>etc ... when activating the multidraw ''image`` button, the images can be selected<br> (left mouse button/onclick) and placed on the canvas...left mouse click.<br>using div's will enable you -amongst other content- to add math typesetting from the exercise page onto the canvas. |
| @ When you are not content with the default ''multidraw control panel``, you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and ''stop drawing`` in case you also want to drag&drop stuff...</br>To activate this feature, use <a href='#multilabel'>multilabel NOCONTROLS</a><br>The object types are internally represented by the following numbers (making typos will render your exercise null and void)<br/>point = 0<br>points =1<br>circle = 2<br>circles = 3<br>line = 4<br>lines = 5<br>segment = 6<br>segments = 7<br>arrow = 8<br>arrows = 9<br>triangle = 10<br>triangles = 11<br>closedspoly = 12<br>text = 13<br>rect = 14<br>rects = 15<br>poly[3-9] = 16<br>polys[3-9] = 17<br>parallelogram = 18<br>parallelograms = 19<br>images = 20<br>curvedarrow = 21<br>curvedarrows = 22<br>curvedarrow2 = 23<br>curvedarrows2 = 24<br>crosshair = 25<br>crosshairs = 26 <br>controls for example:<br><code><input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' /><br><input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' /> <br><input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' /> </code><br/> If using multiple canvas scripts in a single page, loop through the canvas_scripts[n] <br>note: if using NOCONTROLS and just a single draw primitive (for example, just: 'multidraw circles'), the object may be drawn directly. (analogue to 'userdraw circles,color')<br>And since a right mouse button click will always remove the last drawn object of the current object type, there is no need for a special "remove button" |
| @%multidraw_function%size 400,400%xrange -10,10%yrange -10,10%fontfamily Italic 22px Helvetica%axis%axisnumbering%precision 0%grid 2,2,grey,1,1,5,black%multicolors red,green,blue%fontcolor orange%multilinewidth 1,2,3%multidraw text,function,function,function,line |
| @%multidraw%size 400,400%xrange -10,10%yrange -10,10%multidash 1,0%multilinewidth 1,2%multistrokecolors red,blue%multisnaptogrid 1,1%multilabel LINES,CIRCLES,STOP DRAWING%multidraw lines,circles |
| @%multidraw_images%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%drag xy%# use special function to read the drag coordinates%copy 0,0,-1,-1,-1,-1,gifs/images/skull_and_crossbones50.png%fontcolor green%fontfamily Bold 42pt Arial%imagepalette gifs/ca.gif,gifs/en.gif,gifs/nl.gif,gifs/fr.gif,gifs/cn.gif,gifs/de.gif,gifs/kh.gif,gifs/it.gif%multiuserinput 0,0,1%css color:blue;%multisnaptogrid 1,1,1%multilinewidth 0,4,0%# attention: use unicode text input without the slash %# \u222D ---> u222D at least will sometimes work%# otherwise cut&past unicode symbols into inputfield...%multilabel TEXT,REACTION ARROW,FLAGS,STOP DRAWING%multidraw text,arrow,images |
| 3228,8 → 3228,8 |
|---|
| @ multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text' |
| @ use before command <a href='#multidraw'>multidraw</a> |
| @ 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'...) |
| @ the ''stop drawing`` button text <b>must</b> be the last item on the ''multilabel`` -list <br />for example:<br /><code>multilabel punten,lijnen,Stop met Tekenen<br />multidraw points,lines</code> |
| @ all buttons can be ''styled`` by using command <code>css</code><br /><b>note:</b>If you want to add some CSS style to the buttons...<br />the id's of the ''draw buttons`` are their english command argument<br />(e.g. id="canvasdraw_points" for the draw points button).<br />the id of the ''stop drawing`` button is "canvasdraw_stop_drawing".<br />the id of the "OK" button is ''canvasdraw_ok_button`` |
| @ the ''stop drawing`` button text <b>must</b> be the last item on the ''multilabel`` -list <br>for example:<br><code>multilabel punten,lijnen,Stop met Tekenen<br>multidraw points,lines</code> |
| @ all buttons can be ''styled`` by using command <code>css</code><br><b>note:</b>If you want to add some CSS style to the buttons...<br>the id's of the ''draw buttons`` are their english command argument<br>(e.g. id="canvasdraw_points" for the draw points button).<br>the id of the ''stop drawing`` button is "canvasdraw_stop_drawing".<br>the id of the "OK" button is ''canvasdraw_ok_button`` |
| @ wims will not check the amount or validity of your input |
| @ always use the same sequence as is used for ''multidraw`` |
| @ if you don't want the controls, and want to write your own interface, set <code>multilabel NOCONTROLS</code> |
| 3265,7 → 3265,7 |
|---|
| /* |
| @ multifill 0,0,1,0,1,0,0 |
| @ 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...) |
| @ using a fillpattern: multifill 0,1,2,5,3,4<br />meaning: first object is not filled...second object is solid color filled...2=grid | 3=hatch | 4=diamond | 5=dot |
| @ using a fillpattern: multifill 0,1,2,5,3,4<br>meaning: first object is not filled...second object is solid color filled...2=grid | 3=hatch | 4=diamond | 5=dot |
| @ use before command <a href='#multidraw'>multidraw</a> |
| @ if not set all objects -except point|points- will be set ''not filled``... unless a command <code>filled</code> was given before command <code>multifill</code> |
| @ only suitable for draw_primitives like ''circle | circles``, ''triangle | triangles``, ''rect | rects``, ''poly[3-9] | polys[3-9]`` and ''polygon`` |
| 3292,7 → 3292,7 |
|---|
| @ use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_n</code> |
| @ wims will <b>not</b> check if the number of colours matches the amount of draw primitives... |
| @ always use the same sequence as is used for ''multidraw`` |
| @ can also be used with command <a href='#userdraw'>userdraw clickfill,color</a> when more than one fillcolor is wanted.<br />in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br />the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors<br />if more control over the used colours is wanted, see command <a href='#colorpalette'>colorpalette color1,color2...</a> |
| @ can also be used with command <a href='#userdraw'>userdraw clickfill,color</a> when more than one fillcolor is wanted.<br>in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br>the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors<br>if more control over the used colours is wanted, see command <a href='#colorpalette'>colorpalette color1,color2...</a> |
| */ |
| if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");} |
| fprintf(js_include_file,"var multifillcolors = ["); |
| 3327,8 → 3327,8 |
|---|
| @ only the xy-values snap_to_grid: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code> |
| @ only the x-values snap_to_grid: all objects snap to x-grid <code>multisnaptogrid 2,2,2,...</code> |
| @ only the y-values snap_to_grid: all objects snap to y-grid <code>multisnaptogrid 3,3,3,...</code> |
| @ if <a href='#snaptopoints'>snaptopoints</a> is defined: all objects snap to points <code>multisnaptogrid 4,4,4,...</code> <br /><b>make sure to define the points to snap on...</b> use command <a href='#snaptopoints'>snaptopoints</a> |
| @ <code>multisnaptogrid 0,1,2,3,4<br />multidraw text,arrow,line,circle,image</code><br />''text`` is free hand, ''arrow`` is snap to grid, ''line`` is snap to x-grid, ''circle`` is snap to y-grid, ''image`` is snap to points defined by command <a href='#snaptopoints'>snaptopoints</a> |
| @ if <a href='#snaptopoints'>snaptopoints</a> is defined: all objects snap to points <code>multisnaptogrid 4,4,4,...</code> <br><b>make sure to define the points to snap on...</b> use command <a href='#snaptopoints'>snaptopoints</a> |
| @ <code>multisnaptogrid 0,1,2,3,4<br>multidraw text,arrow,line,circle,image</code><br>''text`` is free hand, ''arrow`` is snap to grid, ''line`` is snap to x-grid, ''circle`` is snap to y-grid, ''image`` is snap to points defined by command <a href='#snaptopoints'>snaptopoints</a> |
| @ use before command <a href='#multidraw'>multidraw</a> |
| @ attention: if not set all objects will be set ''no snap``... unless a generic command ''snaptogrid`` was given before command ''multidraw`` |
| @ commands <a href='#xsnaptogrid'>xsnaptogrid</a>, <a href='#ysnaptogrid'>ysnaptogrid</a>, <a href='#snaptofunction'>snaptofunction</a> are <b>not</b> supported amd only functional for command <a href='#userdraw'>userdraw</a> |
| 3377,15 → 3377,15 |
|---|
| /* |
| @ multiuserinput 0,1,1,0 |
| @ alternative: multiinput |
| @ meaning, when the command ''multidraw`` is used <code>multidraw circles,points,lines,triangles</code><br />objects ''points`` and ''lines`` may additionally be ''drawn`` by direct input (inputfields)<br/>all other objects must be drawn with a mouse |
| @ 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 <b>not</b> in pixels...students don't think in pixels.<br />note: R-values will not snap-to-grid |
| @ in case of line(s) | segment(s) | arrow(s) the user should write <b>x1:y1</b> in the first inputfield and <b>x2:y2</b> in the second.<br />These ''hints`` are pre-filled into the input field.<br />Other coordinate delimiters are '';`` and '',`` e.g. <b>x1;y1</b> or <b>x1,y1</b>.<br />An error message (alert box) will popup when things are not correctly... |
| @ meaning, when the command ''multidraw`` is used <code>multidraw circles,points,lines,triangles</code><br>objects ''points`` and ''lines`` may additionally be ''drawn`` by direct input (inputfields)<br/>all other objects must be drawn with a mouse |
| @ 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 <b>not</b> in pixels...students don't think in pixels.<br>note: R-values will not snap-to-grid |
| @ in case of line(s) | segment(s) | arrow(s) the user should write <b>x1:y1</b> in the first inputfield and <b>x2:y2</b> in the second.<br>These ''hints`` are pre-filled into the input field.<br>Other coordinate delimiters are '';`` and '',`` e.g. <b>x1;y1</b> or <b>x1,y1</b>.<br>An error message (alert box) will popup when things are not correctly... |
| @ in case of a triangle | poly3, three inputfields are provided. |
| @ in case of ''text`` and ''multiuserinput=1, 3`` inputfields will be shown: ''x,y,text`` |
| @ in case of ''text`` and ''multiuserinput=0, 1`` inputfield will be shown: text ... a mouse click will place the text on the canvas. |
| @ may be styled using command <a href="#css">css</a> |
| @ an additional button ''stop drawing`` may be used to combine userbased drawings with ''drag∧drop`` or ''onclick`` elements |
| @ when exercise if finished (status=done) the buttons will not be shown.<br />To override this default behaviour use command / keyword ''status`` |
| @ when exercise if finished (status=done) the buttons will not be shown.<br>To override this default behaviour use command / keyword ''status`` |
| @ use before command <a href='#multidraw'>multidraw</a> |
| @ always use the same sequence as is used for ''multidraw`` |
| */ |
| 3401,10 → 3401,10 |
|---|
| @ alternative: killreset |
| @ keyword |
| @ may come in handy if canvas script code is generated using loops |
| @ if used the following properties will remain to be valid<br /><ul><li>filled</li><li>dash settings</li><li>onclick or drag settings</li><li>centering or offset</li></ul> |
| @ if used the following properties will remain to be valid<br><ul><li>filled</li><li>dash settings</li><li>onclick or drag settings</li><li>centering or offset</li></ul> |
| @ if used again, these properies will be reset to the default values and normal behaviour is continued (e.g. the above properties will be reset after 'use' on a canvas object) |
| @ etc etc |
| @ commands <a href='#slider'>slider</a>, <a href='#linear'>linear</a>, <a href='#rotate'>rotate</a>, <a href='#translate'>translate</a>, <a href='#affine'>affine</a> are always active until the 'kill' commands are given: <br /><a href='#killlinear'>killlinear</a>, <a href='#killrotate'>killrotate</a>, <a href='#killtranslate'>killtranslate</a> and <a href='#killaffine'>killaffine</a> |
| @ commands <a href='#slider'>slider</a>, <a href='#linear'>linear</a>, <a href='#rotate'>rotate</a>, <a href='#translate'>translate</a>, <a href='#affine'>affine</a> are always active until the 'kill' commands are given: <br><a href='#killlinear'>killlinear</a>, <a href='#killrotate'>killrotate</a>, <a href='#killtranslate'>killtranslate</a> and <a href='#killaffine'>killaffine</a> |
| @ commands like 'opacity', 'linewidth', 'fontsize', 'fontfamily' are only changed when redefined again |
| @%noreset%size 400,400%xrange -10,10%yrange -10,10%noreset%drag xy%linewidth 4%filled%rect -4,4,-2,2,blue%triangle -3,-3,0,0,1,-5,green%circle 0,0,50,orange%noreset%rect 2,4,4,2,blue |
| @%noreset_oefgraduation%size 800,100%xrange 0,11%yrange -1,1%hline 0,0,black%parallel 0,0,0,0.5,1,0,11,blue%noreset%onclick%centered%text black,1,0.6,large,20%text black,2,0.6,large,30%text black,3,0.6,large,40%text black,4,0.6,large,50%text black,5,0.6,large,60%text black,6,0.6,large,70%text black,7,0.6,large,80%text black,8,0.6,large,90%text black,9,0.6,large,100%text black,10,0.6,large,110 |
| 3488,10 → 3488,10 |
|---|
| @ see documentation of obabel for special keys |
| @ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations |
| @ command <a href='#rotate'>rotate</a> will rotate the object |
| @ can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br />if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object |
| @ can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br>if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object |
| @ can be set draggable: <code>javascript:read_dragdrop();</code> will return all coordinates in the same order as the canvas script: unmoved object will have their original coordinates... |
| @ snaptogrid is supported...snaptopoints will work, but use with care...due to the primitive dragging<br />technically: the dragstuff library is not used...the mathml is embedded in a new div element and not in the html5-canvas |
| @ external files may be loaded if they are present on the server or in the modules <br />for example:<br /> obabel 0,0,mol,$module_dir/caffeine.mol,-P100,-xb none |
| @ snaptogrid is supported...snaptopoints will work, but use with care...due to the primitive dragging<br>technically: the dragstuff library is not used...the mathml is embedded in a new div element and not in the html5-canvas |
| @ external files may be loaded if they are present on the server or in the modules <br>for example:<br> obabel 0,0,mol,$module_dir/caffeine.mol,-P100,-xb none |
| @%obabel_smi%size 400,400%xrange -10,10%yrange -10,10%fillcolor green%drag xy%centered%obabel 0,0,smi,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h |
| */ |
| js_function[DRAW_XML] = 1; |
| 3550,7 → 3550,7 |
|---|
| @ keyword (no arguments required) |
| @ if the next object is clicked, its ''object onclick_or_drag sequence number`` in fly script is returned by <code>javascript:read_canvas();</code> |
| @ 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`` |
| @ line based objects will show an increase in line width<br />font based objects will show the text in ''bold`` when clicked. |
| @ line based objects will show an increase in line width<br>font based objects will show the text in ''bold`` when clicked. |
| @ the click zone (accuracy) is determined by 2× the line width of the object |
| @ onclick and <a href="#drag">drag x|y|xy</a> may be combined in a single flyscript (although a single object can <b>not</b> be onclick and draggable at the same time...) |
| @ note: not all objects may be set onclick |
| 3771,7 → 3771,7 |
|---|
| @ brokenline color,x1,y1,x2,y2...x_n,y_n |
| @ path color,x1,y1,x2,y2...x_n,y_n |
| @ remark: there is <b>no</b> command polylines | brokenlines | paths ... just use multiple commands <code>polyline, x1,y1,x2,y2...x_n,y_n</code> |
| @ remark: there are commands <code>userdraw path(s),color</code> and <code>userdraw polyline,color</code>... these are two entirely different things ! the path(s) userdraw commands may be used for freehand drawing(s)<br />the polyline userdraw command is analogue to this polyline|brokenline command |
| @ remark: there are commands <code>userdraw path(s),color</code> and <code>userdraw polyline,color</code>... these are two entirely different things ! the path(s) userdraw commands may be used for freehand drawing(s)<br>the polyline userdraw command is analogue to this polyline|brokenline command |
| @ 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) |
| @ use command <a href='#segments'>segments</a> for a series of segments. These may be clicked/dragged individually |
| @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> |
| 3821,8 → 3821,8 |
|---|
| @ if fly-script starts with keyword ''popup``, the canvas image will be exclusively in a popup window (xsize px × ysize px) |
| @ if keyword ''popup`` is used after command <code>size xsize,ysize</code> the canvas will also be displayed in a popup window with size ''xsize × ysize`` |
| @ the popup window will be embedded into the page as a normal image, when ''status=done``; override with keyword <a href="#status">nostatus</a> |
| @ to access the read_canvas and read_dragdrop functions in a popup window, use:<br /> <code> function read_all(){<br /> if( typeof popup !== 'undefined' ){<br /> var fun1 = popup['read_dragdrop'+canvas_scripts[0]];<br />var fun2 = popup['read_canvas'+canvas_scripts[0]];<br /> popup.close();<br /> return "dragdrop="+fun1()+"\\ncanvas="+fun2();<br /> };</code> |
| @ to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: <code>popup.set_clock(clock_id,type,diff);</code> as js-function for a button (or something else) in your document page.<br />where in <b>clock_id</b> starts with 0 for the first clock<br /><b>type</b> is 1 for Hours,2 for Minutes and 3 for Seconds<br /><b>diff</b> is the increment (positive or negative) per click |
| @ to access the read_canvas and read_dragdrop functions in a popup window, use:<br> <code> function read_all(){<br> if( typeof popup !== 'undefined' ){<br> var fun1 = popup['read_dragdrop'+canvas_scripts[0]];<br>var fun2 = popup['read_canvas'+canvas_scripts[0]];<br> popup.close();<br> return "dragdrop="+fun1()+"\\ncanvas="+fun2();<br> };</code> |
| @ to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: <code>popup.set_clock(clock_id,type,diff);</code> as js-function for a button (or something else) in your document page.<br>where in <b>clock_id</b> starts with 0 for the first clock<br><b>type</b> is 1 for Hours,2 for Minutes and 3 for Seconds<br><b>diff</b> is the increment (positive or negative) per click |
| @%popup%popup%size 400,400%xrange -2*pi,2*pi%yrange -5,5%precision 0%axis%axisnumbering%opacity 100,190%grid 1,1,grey,2,2,5,black%linewidth 4%fillcolor blue%trange -pi,pi%animate%linewidth 1%precision 1000%jsplot red,4*cos(2*x),2*sin(3*x-pi/6)%strokecolor green%functionlabel H(x)=%userinput function |
| */ |
| use_tooltip = 2; |
| 3833,18 → 3833,18 |
|---|
| @ protractor x,y,x_width,type,mode,use_a_scale |
| @ x,y are the initial location |
| @ x_width: give the width in x-coordinate system (e.g. not in pixels !) |
| @ type = 1: a triangle range 0 - 180<br />type = 2: a circle shape 0 - 360 |
| @ mode: use -1 to set the protractor interactive (mouse movement of protractor)<br />use mode = '0° - 360°' to set the protractor with a static angle of some value |
| @ type = 1: a triangle range 0 - 180<br>type = 2: a circle shape 0 - 360 |
| @ mode: use -1 to set the protractor interactive (mouse movement of protractor)<br>use mode = '0° - 360°' to set the protractor with a static angle of some value |
| @ 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> |
| @ use_scale = 1: the protractor will have some scale values printed; use_scale=0 to disable |
| @ the rotating direction of the mouse around the protractor determines the clockwise/ counter clockwise rotation of the protractor... |
| @ commands ''stroke_color | fill_color | linewidth | opacity | font_family`` will determine the looks of the protractor. |
| @ default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians<br />use command ''precision`` to set the reply precision. |
| @ default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians<br>use command ''precision`` to set the reply precision. |
| @ if combined with a ruler, use replyformat = 32 |
| @ command <code>snap_to_grid</code> may be used to assist the pupil at placing the protractor |
| @ when using command ''zoom``, pay <b>attention</b> to the size and symmetry of your canvas<br />...to avoid a partial image, locate the start position near the center of the visual canvas<br />technical: the actual ''protractor`` is just a static generated image in a new canvas-memory<br />This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas.<br />That is the reason for the ''high-speed dragging and rotating``.<br />I've limited its size to xsize × ysize e.g. the same size as the visual canvas... |
| @ when using command ''zoom``, pay <b>attention</b> to the size and symmetry of your canvas<br>...to avoid a partial image, locate the start position near the center of the visual canvas<br>technical: the actual ''protractor`` is just a static generated image in a new canvas-memory<br>This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas.<br>That is the reason for the ''high-speed dragging and rotating``.<br>I've limited its size to xsize × ysize e.g. the same size as the visual canvas... |
| @ only one protractor allowed (for the time being) |
| @ usage: first left click on the protractor will activate dragging;<br />a second left click will activate rotating (just move mouse around)<br />a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3)<br />a next click will restart this sequence... |
| @ usage: first left click on the protractor will activate dragging;<br>a second left click will activate rotating (just move mouse around)<br>a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3)<br>a next click will restart this sequence... |
| @%protractor%size 400,400%xrange -5,10%yrange -5,10%hline 0,0,black%vline 0,0,black%fillcolor orange%opacity 255,40%protractor 2,-2,6,0,-1,1,1%mouse red,22 |
| */ |
| for( i = 0;i < 6; i++ ){ |
| 3923,12 → 3923,12 |
|---|
| @ piechart xc,yc,radius,'data+colorlist' |
| @ (xc: yc) center of circle diagram in xrange/yrange |
| @ radius in pixels |
| @ data+color list: a colon separated list of raw data and corresponding colours<br />canvasdraw will not check validity of colornames...<br />in case of trouble look into javascript debugging of your browser |
| @ data+color list: a colon separated list of raw data and corresponding colours<br>canvasdraw will not check validity of colornames...<br>in case of trouble look into javascript debugging of your browser |
| @ example data+colorlist: 32:red:65:green:23:black:43:orange:43:yellow:14:white |
| @ the number of colors must match the number of data. |
| @ if defined <a href='#fillpattern'>fillpattern some_pattern</a> then the pie pieces will be filled with the respective color and a fill pattern...<br />the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,... |
| @ if defined <a href='#fillpattern'>fillpattern some_pattern</a> then the pie pieces will be filled with the respective color and a fill pattern...<br>the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,... |
| @ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of colours |
| @ 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-colors``, ''pie-legend-titles`` do not match, a javascript console is your best friend...<br />use command ''fontfamily`` to set the font of the legend. |
| @ 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-colors``, ''pie-legend-titles`` do not match, a javascript console is your best friend...<br>use command ''fontfamily`` to set the font of the legend. |
| @ use command <a href='centered'>centered</a> to place <a href='#legend'>legend</a> text inside the piechart. The text is using the same color as the pie segment: use (fill) opacity to enhance visibility. |
| @%piechart_1%size 300,200%xrange -10,10%yrange -10,10%legend cars:motorcycles:bicycles:trikes%opacity 255,120%piechart -5,0,75,22:red:8:blue:63:green:7:purple% |
| @%piechart_2%size 200,200%xrange -10,10%yrange -10,10%fontfamily 16px Arial%centered%legend cars:motorcycles:bicycles:trikes%opacity 255,60%piechart 0,0,100,22:red:8:blue:63:green:7:purple |
| 4117,8 → 4117,8 |
|---|
| @ default values should be fine ! |
| @ use command <code>precision [0,1,10,100,1000,10000...]</code> before command ''replyformat`` to set the desired number of decimals in the student reply / drawing |
| @ the last value for ''precision int`` will be used to calculate the reply coordinates, if needed (read_canvas();) |
| @ choose<ul><li>replyformat 1: <code>x1,x2,x3,x4....x_n<br />y1,y2,y3,y4....y_n</code> x/y in pixels</li><li>replyformat 2: <code> x1,x2,x3,x4....x_n<br /> y1,y2,y3,y4....y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 3: <code> x1,x2,x3,x4....x_n<br /> y1,y2,y3,y4....y_n<br /> r1,r2,r3,r4....r_n</code> x/y in pixels, r in pixels</li><li>replyformat 4: <code> x1,x2,x3,x4....x_n<br /> y1,y2,y3,y4....y_n<br /> r1,r2,r3,r4....r_n</code> x/y in xrange / yrange coordinate system, r in pixels</li><li>replyformat 5: <code> Ax1,Ax2,Ax3,Ax4....Ax_n<br /> Ay1,Ay2,Ay3,Ay4....Ay_n<br /> Bx1,Bx2,Bx3,Bx4....Bx_n<br /> By1,By2,By3,By4....By_n<br /> Cx1,Cx2,Cx3,Cx4....Cx_n<br /> Cy1,Cy2,Cy3,Cy4....Cy_n<br /> ....<br /> Zx1,Zx2,Zx3,Zx4....Zx_n<br /> Zy1,Zy2,Zy3,Zy4....Zy_n</code> x/y in pixels</li><li>replyformat 6: <code> Ax1,Ax2,Ax3,Ax4....Ax_n<br /> Ay1,Ay2,Ay3,Ay4....Ay_n<br /> Bx1,Bx2,Bx3,Bx4....Bx_n<br /> By1,By2,By3,By4....By_n<br /> Cx1,Cx2,Cx3,Cx4....Cx_n<br /> Cy1,Cy2,Cy3,Cy4....Cy_n<br /> ....<br /> Zx1,Zx2,Zx3,Zx4....Zx_n<br /> Zy1,Zy2,Zy3,Zy4....Zy_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 7: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in pixels</li><li>replyformat 8: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 9: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in pixels</li><li>replyformat 10: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 11: <code> Ax1,Ay1,Ax2,Ay2<br />Bx1,By1,Bx2,By2<br /> Cx1,Cy1,Cx2,Cy2<br /> Dx1,Dy1,Dx2,Dy2<br /> ......<br /> Zx1,Zy1,Zx2,Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 12: <code> Ax1,Ay1,Ax2,Ay2<br /> Bx1,By1,Bx2,By2<br />Cx1,Cy1,Cx2,Cy2<br /> Dx1,Dy1,Dx2,Dy2<br /> ......<br /> Zx1,Zy1,Zx2,Zy2</code> x/y in pixels</li><li>replyformat 13: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 14: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2</code> x/y in pixels</li><li>replyformat 15: reply from inputfields,textareas <code>reply1,reply2,reply3,...,reply_n</code></li><li>replyformat 16: mathml input fields</li><li>replyformat 17: read ''userdraw text,color`` only <code>x1,y1,text1 \\n x2,y2,text2...\\n...x_n,y_n,text_n </code> x/y-values are in xrange/yrange</li><li>replyformat 18: read_canvas() will read all interactive clocks in <code>H1:M1:S1,H2:M2:S2...Hn:Mn:Sn</code></li><li>replyformat 19: read_canvas() will return the object number of marked / clicked object (clock), analogue to (shape library) onclick command</li><li>replyformat 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>replyformat 21: <code> (x1:y1) (x2:y2) ... (x_n:y_n)</code> verbatim coordinate return</li><li>replyformat 22: returns an array .... <code>reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 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 gives <code>x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn</code>; multiple occurences will be filtered out. The reply will be in x-y-range (xreply \\n yreply)</li><li>replyformat 24: read all inputfield values: even those set ''readonly``</li><li>replyformat 25: <code> angle1,angle2;...;angle_n</code> will return the radius (one or many) of the user drawn circle segment in degrees</li><li>replyformat 26: <code> rad1,rad2,...rad_n</code> will return the radius (one or many) of the user drawn circle segment in radians</li><li>replyformat 27: return (only) userdraw inputfields <code>x1,y1,text1<br /> x2,y2,text2...<br />...x_n,y_n,textn</code></li><li>replyformat 28: <code> x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> x / y / r in xrange / yrange coordinate system: may be used to reinput into command <code>circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> will not return anything else (e.g. no inputfields, text etc)</li><li>replyformat 34: a special for OEF and dragging external images -included via commands <a href='#copy'>copy</a> or <a href='#copyresized'>copyresized</a> there will be an extra function <code>read_canvas_images()</code> for reading the coordinates of the images.<br />for now this is a unique function, e.g. there is no ''canvas id`` linked to it. (TO DO !!! 18/5/2019)</li></ul> |
| @ special replyformat = 100 ; will access to the raw javascript object data...use: read_dragdrop([property,property,...])<br />for example properies like 'clicked','text', 'angle' , 'x' |
| @ choose<ul><li>replyformat 1: <code>x1,x2,x3,x4....x_n<br>y1,y2,y3,y4....y_n</code> x/y in pixels</li><li>replyformat 2: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 3: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n<br> r1,r2,r3,r4....r_n</code> x/y in pixels, r in pixels</li><li>replyformat 4: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n<br> r1,r2,r3,r4....r_n</code> x/y in xrange / yrange coordinate system, r in pixels</li><li>replyformat 5: <code> Ax1,Ax2,Ax3,Ax4....Ax_n<br> Ay1,Ay2,Ay3,Ay4....Ay_n<br> Bx1,Bx2,Bx3,Bx4....Bx_n<br> By1,By2,By3,By4....By_n<br> Cx1,Cx2,Cx3,Cx4....Cx_n<br> Cy1,Cy2,Cy3,Cy4....Cy_n<br> ....<br> Zx1,Zx2,Zx3,Zx4....Zx_n<br> Zy1,Zy2,Zy3,Zy4....Zy_n</code> x/y in pixels</li><li>replyformat 6: <code> Ax1,Ax2,Ax3,Ax4....Ax_n<br> Ay1,Ay2,Ay3,Ay4....Ay_n<br> Bx1,Bx2,Bx3,Bx4....Bx_n<br> By1,By2,By3,By4....By_n<br> Cx1,Cx2,Cx3,Cx4....Cx_n<br> Cy1,Cy2,Cy3,Cy4....Cy_n<br> ....<br> Zx1,Zx2,Zx3,Zx4....Zx_n<br> Zy1,Zy2,Zy3,Zy4....Zy_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 7: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in pixels</li><li>replyformat 8: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 9: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in pixels</li><li>replyformat 10: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 11: <code> Ax1,Ay1,Ax2,Ay2<br>Bx1,By1,Bx2,By2<br> Cx1,Cy1,Cx2,Cy2<br> Dx1,Dy1,Dx2,Dy2<br> ......<br> Zx1,Zy1,Zx2,Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 12: <code> Ax1,Ay1,Ax2,Ay2<br> Bx1,By1,Bx2,By2<br>Cx1,Cy1,Cx2,Cy2<br> Dx1,Dy1,Dx2,Dy2<br> ......<br> Zx1,Zy1,Zx2,Zy2</code> x/y in pixels</li><li>replyformat 13: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 14: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2</code> x/y in pixels</li><li>replyformat 15: reply from inputfields,textareas <code>reply1,reply2,reply3,...,reply_n</code></li><li>replyformat 16: mathml input fields</li><li>replyformat 17: read ''userdraw text,color`` only <code>x1,y1,text1 \\n x2,y2,text2...\\n...x_n,y_n,text_n </code> x/y-values are in xrange/yrange</li><li>replyformat 18: read_canvas() will read all interactive clocks in <code>H1:M1:S1,H2:M2:S2...Hn:Mn:Sn</code></li><li>replyformat 19: read_canvas() will return the object number of marked / clicked object (clock), analogue to (shape library) onclick command</li><li>replyformat 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>replyformat 21: <code> (x1:y1) (x2:y2) ... (x_n:y_n)</code> verbatim coordinate return</li><li>replyformat 22: returns an array .... <code>reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 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 gives <code>x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn</code>; multiple occurences will be filtered out. The reply will be in x-y-range (xreply \\n yreply)</li><li>replyformat 24: read all inputfield values: even those set ''readonly``</li><li>replyformat 25: <code> angle1,angle2;...;angle_n</code> will return the radius (one or many) of the user drawn circle segment in degrees</li><li>replyformat 26: <code> rad1,rad2,...rad_n</code> will return the radius (one or many) of the user drawn circle segment in radians</li><li>replyformat 27: return (only) userdraw inputfields <code>x1,y1,text1<br> x2,y2,text2...<br>...x_n,y_n,textn</code></li><li>replyformat 28: <code> x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> x / y / r in xrange / yrange coordinate system: may be used to reinput into command <code>circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> will not return anything else (e.g. no inputfields, text etc)</li><li>replyformat 34: a special for OEF and dragging external images -included via commands <a href='#copy'>copy</a> or <a href='#copyresized'>copyresized</a> there will be an extra function <code>read_canvas_images()</code> for reading the coordinates of the images.<br>for now this is a unique function, e.g. there is no ''canvas id`` linked to it. (TO DO !!! 18/5/2019)</li></ul> |
| @ special replyformat = 100 ; will access to the raw javascript object data...use: read_dragdrop([property,property,...])<br>for example properies like 'clicked','text', 'angle' , 'x' |
| */ |
| reply_format = (int) get_real(infile,1); |
| reply_precision = precision; |
| 4211,7 → 4211,7 |
|---|
| @ x,y are the initial location |
| @ x-width, y-height are the ruler dimensions width & height in xy-coordinate system |
| @ 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 |
| @ mode: use -1 to set the ruler interactive (eg mouse movement of ruler; drag & rotate)<br />use mode = '0° - 360°' to set the ruler with a static angle of some value |
| @ mode: use -1 to set the ruler interactive (eg mouse movement of ruler; drag & rotate)<br>use mode = '0° - 360°' to set the ruler with a static angle of some value |
| @ if combined with a protractor, use replyformat = 32 |
| @ only one ruler allowed (for the time being) |
| @ when using command ''zoom``, pay <b>attention</b> 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 have limited its size to xsize × ysize e.g. the same size as the visual canvas... |
| 4260,9 → 4260,9 |
|---|
| @ angle in degrees |
| @ (only) the next object will be rotated is given angle |
| @ positive values rotate counter clockwise |
| @ attention: all objects will be rotated around their first point...<br /><code>rotate 45<br />triangle 1,1,5,1,3,4,red</code><br />will rotate 45 degrees around point (1:1) |
| @ if another rotation center is needed, use command <a href="#rotationcenter">rotationcenter xc,yc</a>.<br />to reset this rotationcenter, use keyword <a href="#killrotate">killrotate</a> |
| @ attention: rotate will mess up the interactivity of the rotated object <br />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 |
| @ attention: all objects will be rotated around their first point...<br><code>rotate 45<br>triangle 1,1,5,1,3,4,red</code><br>will rotate 45 degrees around point (1:1) |
| @ if another rotation center is needed, use command <a href="#rotationcenter">rotationcenter xc,yc</a>.<br>to reset this rotationcenter, use keyword <a href="#killrotate">killrotate</a> |
| @ attention: rotate will mess up the interactivity of the rotated object <br>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 |
| @%rotate_1%size 400,400%xrange -10,10%yrange -10,10%fpoly yellow,0,0,4,3,2,5%rotate 45%fpoly violet,0,0,4,3,2,5%killrotate%rotate 90%fpoly violet,0,0,4,3,2,5% |
| */ |
| use_rotate = TRUE; |
| 4297,7 → 4297,7 |
|---|
| @ size width,height |
| @ set canvas size in pixels |
| @ mandatory first command (can only be preceded by keyword <a href="#popup">popup</a>) |
| @ if xrange and/or yrange is not given the range will be set to pixels:<br />xrange 0,xsize yrange 0,ysize<br />note: lower left corner is origin (0:0) !!! this in contrast to flydraw |
| @ if xrange and/or yrange is not given the range will be set to pixels:<br>xrange 0,xsize yrange 0,ysize<br>note: lower left corner is origin (0:0) !!! this in contrast to flydraw |
| */ |
| found_size_command = 1; |
| /* using fabs: however "xsize == int": so "xsize = abs( (int) get_real(infile,0))" would be the idea... */ |
| 4519,18 → 4519,18 |
|---|
| @ type may be: ''x,y,angle`` |
| @ if a slider value display is desired, use for argument ''type``: ''x display``, ''y display``, ''angle radian``, ''angle degree`` |
| @ is the slider is used for animation, add keyword ''anim`` or ''animate`` to ''type``; for now only one animated slider may be used... |
| @ default behaviour is: click on an object to use its slider(s)<br/>to use sliders without clicking on an object, use for ''type`` keyword ''active``<br />eg: <code>slider -2*pi,2*pi,300,30,angle degree active,Rotate</code> |
| @ default behaviour is: click on an object to use its slider(s)<br/>to use sliders without clicking on an object, use for ''type`` keyword ''active``<br>eg: <code>slider -2*pi,2*pi,300,30,angle degree active,Rotate</code> |
| @ if a unit (or something like that...) for x/y-value display is needed, use commands ''xunit`` and / or ''yunit`` |
| @ if the translation should be performed using a function, use for type: ''x function``, ''y function``<br />use commands ''sliderfunction_x`` and/or ''sliderfunction_y`` before the slider command to define the functions. Example:<code>sliderfunction_x x^2<br />sliderfunction_y y^2<br />slider -5,5,100,100,xy function,Some_Text<br />...some stuff to slide<br />killslider<br />sliderfunction_x x^2-2<br />slider -15,15,100,10,x function,Some_Other_Text<br />...more stuff to slide<br />killslider... etc</code> |
| @ if the translation should be performed using a function, use for type: ''x function``, ''y function``<br>use commands ''sliderfunction_x`` and/or ''sliderfunction_y`` before the slider command to define the functions. Example:<code>sliderfunction_x x^2<br>sliderfunction_y y^2<br>slider -5,5,100,100,xy function,Some_Text<br>...some stuff to slide<br>killslider<br>sliderfunction_x x^2-2<br>slider -15,15,100,10,x function,Some_Other_Text<br>...more stuff to slide<br>killslider... etc</code> |
| @ use command ''slider`` before draggable/clickable objects. |
| @ drag and drop may be combined with rotation slider<br />for example an arrow rotated by a slider may be placed anywhere (drag&drop)<br /><code>size 300,300<br />xrange -5,5<br />yrange -5,5<br />grid 1,1,grey<br />linewidth 3<br />drag xy<br />fillcolor orange<br />strokecolor blue<br />slider 0,2*pi,250,30,angle degrees,Rotate arrow<br />arrow 2,2,5,5,8,red</code><br />note: except a combination 'drag' and 'slider' for command 'latex, katex, mathml, html, obabel' |
| @ drag and drop may be combined with rotation slider<br>for example an arrow rotated by a slider may be placed anywhere (drag&drop)<br><code>size 300,300<br>xrange -5,5<br>yrange -5,5<br>grid 1,1,grey<br>linewidth 3<br>drag xy<br>fillcolor orange<br>strokecolor blue<br>slider 0,2*pi,250,30,angle degrees,Rotate arrow<br>arrow 2,2,5,5,8,red</code><br>note: except a combination 'drag' and 'slider' for command 'latex, katex, mathml, html, obabel' |
| @ no slider for a math function, these can be traced using command ''trace_jscurve some_function_in_x`` |
| @ a slider will affect all draggable objects after the ''slider`` command...<br />and can be used to group translate / rotate several objects...<br />until a next ''slider`` or keyword ''killslider`` |
| @ a slider will affect all draggable objects after the ''slider`` command...<br>and can be used to group translate / rotate several objects...<br>until a next ''slider`` or keyword ''killslider`` |
| @ amount of sliders is not limited. |
| @ a slider can not be set ''snaptogrid`` or other ''snapto*`` : you may always use 'drag xy' in combination with the slider objects |
| @ <code>javascript:read_dragdrop();</code> will return an array with ''object_number:slider_value`` |
| @ every draggable object may have its own slider (no limit in amount of sliders) |
| @ label: some slider text. <br />Note: on <a target='new' href='https://katex.org'>KaTeX</a> enabled wims, TeX produced by wims command ''mathmlmath``, is allowed. |
| @ label: some slider text. <br>Note: on <a target='new' href='https://katex.org'>KaTeX</a> enabled wims, TeX produced by wims command ''mathmlmath``, is allowed. |
| @ use fillcolor for slider controlkey |
| @ use strokecolor for slider bar |
| @ use fontfamily / fontcolor to set used fonts |
| 4540,7 → 4540,7 |
|---|
| @%slider_click%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 2%slider 0,2*pi,300,28,angle degree, name%fillcolor lightgreen%#CLICK ON THE OBJECTS TO ACTIVATE%opacity 255,30%ftriangle 2,2,-2,2,0,0,red%ftriangle -2,2,-2,-2,0,0,blue%ftriangle -2,-2,2,-2,0,0,green%ftriangle 2,-2,2,2,0,0,orange%rotationcenter 0,0%frect -2,2,2,-2,black |
| @%slider_active%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle degree active, name%fillcolor lightgreen%opacity 255,30%ftriangle 2,2,-2,2,0,0,red%ftriangle -2,2,-2,-2,0,0,blue%ftriangle -2,-2,2,-2,0,0,green%ftriangle 2,-2,2,2,0,0,orange%rotationcenter 0,0%frect -2,2,2,-2,black |
| @%slider_animate%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle anim active, name%fillcolor lightgreen%opacity 255,30%ftriangle 2,2,-2,2,0,0,red%ftriangle -2,2,-2,-2,0,0,blue%ftriangle -2,-2,2,-2,0,0,green%ftriangle 2,-2,2,2,0,0,orange%rotationcenter 0,0%frect -2,2,2,-2,black |
| @%slider_html_image%%size 400,400%xrange -6,6%yrange -6,6%bgcolor white%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle active degree,%centered%html 0,0,<img src="gifs/domains/sciences/flasks.svg" width="100px" height="100px" /> |
| @%slider_html_image%%size 400,400%xrange -6,6%yrange -6,6%bgcolor white%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle active degree,%centered%html 0,0,<img src="gifs/domains/sciences/flasks.svg" width="100px" height="100px"> |
| */ |
| js_function[INTERACTIVE] = 1; |
| int_data[2] = 0; /* --> show_display = 0; */ |
| 4602,7 → 4602,7 |
|---|
| /* |
| @ sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color |
| @ primitive implementation of a ''broken scale`` graph... |
| @ not very versatile: only usable in combination with userdraw <br />eg no other objects will obey this "coordinate system"<br />if you want to place an object into this coordinate system, be aware that 10% or 20% of xsize and/or ysize is ''lost``.<br />Use these "formulas" to recalculate the virtual coordinates:<br />factor=0.8 in case xstart != xmin (or ystart != ymin)<br />factor=0.9 in case xstart = xmin (or ystart = ymin)<br />px_x_point = ((factor*xsize)/(xmax - xstart))*(x_point - xmax)+xsize<br />x_recalculated = px*(xmax - xmin)/xsize + $xmin<br />px_y_point = -1*factor*y_point*ysize/(ymax - ystart) + ymax*factor*ysize/(ymax - ystart)<br />y_recalculated = ymax - py*(ymax - ymin)/ysize<br /> |
| @ not very versatile: only usable in combination with userdraw <br>eg no other objects will obey this "coordinate system"<br>if you want to place an object into this coordinate system, be aware that 10% or 20% of xsize and/or ysize is ''lost``.<br>Use these "formulas" to recalculate the virtual coordinates:<br>factor=0.8 in case xstart != xmin (or ystart != ymin)<br>factor=0.9 in case xstart = xmin (or ystart = ymin)<br>px_x_point = ((factor*xsize)/(xmax - xstart))*(x_point - xmax)+xsize<br>x_recalculated = px*(xmax - xmin)/xsize + $xmin<br>px_y_point = -1*factor*y_point*ysize/(ymax - ystart) + ymax*factor*ysize/(ymax - ystart)<br>y_recalculated = ymax - py*(ymax - ymin)/ysize<br> |
| @%sgraph%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%precision 0%mouse blue,22 |
| */ |
| js_function[DRAW_SGRAPH] = 1; |
| 4681,7 → 4681,7 |
|---|
| @ in case of userdraw the drawn points will snap to xmajor / ymajor grid |
| @ if no grid is defined, points will snap to every integer xrange/yrange value. (eg snap_x=1,snap_y=1) |
| @ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0. |
| @ if xminor / yminor is defined,(use keyword ''axis`` to activate the minor steps) the drawing will snap to xminor and yminor<br />use only even dividers in x/y-minor...for example <code>snaptogrid<br />axis<br />grid 2,1,grey,4,4,7,red</code> 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 ... |
| @ if xminor / yminor is defined,(use keyword ''axis`` to activate the minor steps) the drawing will snap to xminor and yminor<br>use only even dividers in x/y-minor...for example <code>snaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code> 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 ... |
| @%snaptogrid_1%size 400,400%xrange -5,5%yrange -5,5%axis%axisnumbering%precision 1%grid 1,1,grey,2,2,6,grey%linewidth 2%snaptogrid%userdraw crosshairs,blue%mouse red,22 |
| @%snaptogrid_2%size 400,400%xrange -5,5%yrange -5,5%axis%axisnumbering%precision 1%grid 1,1,grey,4,1,6,grey%linewidth 1%snaptogrid%userdraw crosshairs,blue%mouse red,22 |
| */ |
| 4737,10 → 4737,10 |
|---|
| /* |
| @ string color,x,y,the text string |
| @ may be set ''onclick`` or ''drag xy`` |
| @ note: when set ''onclick``, use an extra command ''fontsize`` (default: fontsize=12) to adjust the size of the clicked text-string<br />note: a clicked text string will be hardcoded : fontsize+10 in the font family courier |
| @ note: when set ''onclick``, use an extra command ''fontsize`` (default: fontsize=12) to adjust the size of the clicked text-string<br>note: a clicked text string will be hardcoded : fontsize+10 in the font family courier |
| @ unicode supported: <code>string red,0,0,\\u2232</code><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br/> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a> |
| @ use a command like <code>fontfamily italic 24px Arial</code> to set fonts on browser that support font change |
| @ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br />The font family for the sub/sup string will be Helvetica e.g. your font family settings will be ignored <br />to end the subscript/supscript, use an extra space...see example: |
| @ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>The font family for the sub/sup string will be Helvetica e.g. your font family settings will be ignored <br>to end the subscript/supscript, use an extra space...see example: |
| @%string_sup_sub%size 400,400%xrange -6,6%yrange -6,6%fontfamily 22px Arial%# use single space for separation in formula...%# use double space to create new word%string red,-5,0,H_3 O^+ + OH^\\u2212 \\u2192 2H_2 O% |
| @%string%size 400,400%xrange -10,10%yrange -10,10%fontfamily 14px Arial%crosshair -3,-3,red%crosshair 3,3,blue%string red,-3,-3,Hello World%fontfamily Italic 18px Arial%string red,3,3,Hello World%fontfamily 22pt STIX%string black,-10,8,\\u03B1 \\u03B2 \\u03B3 \\u03B4 \\u03B5 \\u03B6 \\u03B7 \\u03B8 \\u03B9 \\u03BA \\u03BB \\u03BC \\u03BD \\u03BE \\u03BF |
| */ |
| 4777,12 → 4777,12 |
|---|
| /* |
| @ stringup color,x,y,rotation_degrees,the text string |
| @ may be set ''onclick`` or ''drag xy`` |
| @ note: when set ''onclick``, use an extra command ''fontsize`` (default: fontsize=12) to adjust the size of the clicked text-string<br />note: a clicked text string will be hardcoded : fontsize+10 in the font family courier |
| @ note: when set ''onclick``, use an extra command ''fontsize`` (default: fontsize=12) to adjust the size of the clicked text-string<br>note: a clicked text string will be hardcoded : fontsize+10 in the font family courier |
| @ unicode supported: <code>stringup red,0,0,45,\\u2232</code> |
| @ use a command like <code>fontfamily bold 34px Courier</code> to set fonts on browser that support font change |
| @ you could use keyword <a href='#yoffset'>yoffset</a> to -sometimes- do a small correction of text placement under/above a point (e.g. text & point have thesame coordinates) |
| @ note: no need to ''killrotate`` after ''stringup``<br /><code>onclick<br />rotate 45<br />string red,0,0,AAAAAA<br/>killrotate<br />string red,4,4,BBBBBB</code><br />is identical with:<br /><code>onclick<br />stringup red,0,0,45,AAAAAA<br />string red,4,4,BBBBBB</code> |
| @ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br />to end the subscript/supscript, use an extra space...see example: |
| @ note: no need to ''killrotate`` after ''stringup``<br><code>onclick<br>rotate 45<br>string red,0,0,AAAAAA<br/>killrotate<br>string red,4,4,BBBBBB</code><br>is identical with:<br><code>onclick<br>stringup red,0,0,45,AAAAAA<br>string red,4,4,BBBBBB</code> |
| @ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see example: |
| @%stringup_sub_sup%size 400,400%xrange -6,6%yrange -6,6%fontfamily 22px Arial%# use single space for separation in formula...%# use double space to create new word%stringup red,-5,0,45,H_3 O^+ + OH^\\u2212 \\u2192 2H_2 O% |
| @%stringup%size 400,400%xrange -10,10%yrange -10,10%fontsize 24%fontfamily 14px Arial%crosshair -3,0,red%crosshair 3,0,blue%onclick%stringup red,-3,0,-90,Hello World%drag xy%stringup red,-3,0,-45,Hello World%stringup red,-3,0,45,Hello World%stringup red,-3,0,90,Hello World%stringup blue,3,0,-90,Hello World%stringup blue,3,0,-45,Hello World%stringup blue,3,0,45,Hello World%stringup blue,3,0,90,Hello World |
| |
| 4846,7 → 4846,7 |
|---|
| @ unicode supported: text red,0,0,huge,\\u2232 |
| @ special: use '_' and '^' to imitate html sup/sub, like H_3O^+ + OH^\\u22i2 \\u2192 2H_2 O |
| @ much better to use command <a href='#string'>string</a> combined with <a href='#fontfamily'>fontfamily</a> for a more fine grained control over html5 canvas text element |
| @ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br />to end the subscript/supscript, use an extra space...see <a href='#string'>string </a> command |
| @ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see <a href='#string'>string </a> command |
| @ Avoid mixing old flydraw commands ''text``, ''textup`` with new canvasdraw commands ''string``, ''stringup``. If the fontfamily was set completely like <code>fontfamily italic 24px Arial</code>. In that case reset ''fontfamily`` to something lke ''fontfamily Arial`` before the old flydraw commands. |
| @%text%size 400,400%xrange -10,10%yrange -10,10%fontsize 14%onclick%drag xy%text green,-4,-4,small,Hello World%drag xy%text red,-4,-2,large,Hello World%drag xy%text blue,-4,0,huge,Hello World%drag xy%text green,-4,3,giant,Hello World%drag xy |
| */ |
| 5029,7 → 5029,7 |
|---|
| @ 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 |
| @ use commands fontsize and css to format the fonts for labels and inputfields. |
| @ use commands ''linewidth, strokecolor, crosshairsize`` to adjust the corsshair. |
| @ the client browser will convert your math function to javascript math.<br />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...) |
| @ the client browser will convert your math function to javascript math.<br>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...) |
| @ be aware that the formulas of the plotted function(s) can be found in the page javascript source |
| @%trace_jscurve%size 400,400%xrange -10,10%yrange -10,10%precision 0%axis%axisnumbering%grid 2,2,grey,2,2,5,gray%recision 100%css color:blue;%linewidth 4%crosshairsize 8%trace_jscurve 5*sin(0.1*x^2)%linewidth 1%jsplot red,5*sin(0.1*x^2)%#only one curve can be traced |
| */ |
| 5148,7 → 5148,7 |
|---|
| @ keyword, no arguments |
| @ use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a> |
| @ if set, the student will have to calculate "min,Q1,median,Q3,max" and feed these data into the ''draw_boxplot`` function |
| @ for example: put the canvas-script into a html element with id='boxplot' and set style='display:none'<br />define a variable called ''student_boxplot`` and fill it with the 5 student-data (from inputfields or something)<br /><code>var student_boxplot = new Array(5)<br />function show_boxplot(){<br />student_boxplot[0] = min;<br />student_boxplot[1] = Q1;<br />student_boxplot[2] = median;<br />student_boxplot[3] = Q3;<br />student_boxplot[4] = max;<br />document.getElementById('boxplot').style.display = "block";<br />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);<br />};</code><br />In the canvas-script the function draw_boxplot has the following arguments:<br />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) |
| @ for example: put the canvas-script into a html element with id='boxplot' and set style='display:none'<br>define a variable called ''student_boxplot`` and fill it with the 5 student-data (from inputfields or something)<br><code>var student_boxplot = new Array(5)<br>function show_boxplot(){<br>student_boxplot[0] = min;<br>student_boxplot[1] = Q1;<br>student_boxplot[2] = median;<br>student_boxplot[3] = Q3;<br>student_boxplot[4] = max;<br>document.getElementById('boxplot').style.display = "block";<br>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);<br>};</code><br>In the canvas-script the function draw_boxplot has the following arguments:<br>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) |
| */ |
| js_function[DRAW_BOXPLOT] = 1; |
| fprintf(js_include_file,"var boxplot_source = 3;\n"); |
| 5176,9 → 5176,9 |
|---|
| @ only a single object_type is allowed. |
| @ right mouse click will remove last drawn object. |
| @ for multiple different 'userdraw' objects in an exercise, use command <a href="#multidraw">multidraw</a> |
| @ 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>curvedarrow</li><li>curvedarrows</li><li>curvedarrow2</li><li>curvedarrows2</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<br />multiple areas may be selected <br />multiple colors may be provided using commands <a href='#colorpalette'>colorpalette color1,color2,color3,...</a> use <a href='#replyformat'>replyformat 10</a> for checking the user click color ... reply=x1:y1:color1,x2:y2:color2...<br/>attention: this will <b>not</b> work for pattern filling, because the pattern image is only generated once and after creation can not be changed !<br />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<br />userdraw textfill,blue,some_text<br />use command <a href="#fontfamily">fontfamily</a> to adjust text style and size</li><li>''clickfill | pattern filling`` in general:<br />the clicks may be set <a href="#snaptogrid">snaptogrid</a><br />can be used together with command <a href="#floodfill">floodfill or fill</a><br /><b>always</b> use together with command <a href="#clearbutton">clearbutton some_text</a> for removal of all click_colored areas<br />the function read_canvas() will return the click coordinates in the sequence of the user clicks<br />use command <a href="#canvastype">canvastype</a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)</li><li>text <br />an inputfield is provided, unicode allowed. The text is drawn a the mouse click, or if used with command ''userinput inputfield`` also at the given x/y-coordonates</li><li>arc</li><li>arcs</li><li>image<br/>only a single "image" of every supported type(*) may be added to canvas window from the surrounding html page.<br />the image should have an 'id' and an onclick handler.<br />(*) supported types are ''svg``,''bitmap``,''p-element``,''div-element`` and ''mathml/tex-code`` with ''\\mmlid{int}``.</li><li>images</li><li>input<br/>place a single inputfield on ''canvas`` <br />use commands 'css' for css styling: use command ''linewidth`` for adjusting the input field size (default 1)</li><li>inputs<br/>place multiple inputfield: placing inputfields on top of each other is not possible</li><li>function : identical to <a href="#userinput">userinput function</a></li></ul> |
| @ note: mouselisteners are only active if ''$status != done`` (eg only drawing in an active/non-finished exercise) <br /> to overrule use command/keyword ''status`` (no arguments required) |
| @ note: object_type text: Any string or multiple strings may be placed anywhere on the canvas.<br />Use command ''fontfamily`` to set font |
| @ 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>curvedarrow</li><li>curvedarrows</li><li>curvedarrow2</li><li>curvedarrows2</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<br>multiple areas may be selected <br>multiple colors may be provided using commands <a href='#colorpalette'>colorpalette color1,color2,color3,...</a> use <a href='#replyformat'>replyformat 10</a> for checking the user click color ... reply=x1:y1:color1,x2:y2:color2...<br/>attention: this will <b>not</b> work for pattern filling, because the pattern image is only generated once and after creation can not be changed !<br>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<br>userdraw textfill,blue,some_text<br>use command <a href="#fontfamily">fontfamily</a> to adjust text style and size</li><li>''clickfill | pattern filling`` in general:<br>the clicks may be set <a href="#snaptogrid">snaptogrid</a><br>can be used together with command <a href="#floodfill">floodfill or fill</a><br><b>always</b> use together with command <a href="#clearbutton">clearbutton some_text</a> for removal of all click_colored areas<br>the function read_canvas() will return the click coordinates in the sequence of the user clicks<br>use command <a href="#canvastype">canvastype</a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)</li><li>text <br>an inputfield is provided, unicode allowed. The text is drawn a the mouse click, or if used with command ''userinput inputfield`` also at the given x/y-coordonates</li><li>arc</li><li>arcs</li><li>image<br/>only a single "image" of every supported type(*) may be added to canvas window from the surrounding html page.<br>the image should have an 'id' and an onclick handler.<br>(*) supported types are ''svg``,''bitmap``,''p-element``,''div-element`` and ''mathml/tex-code`` with ''\\mmlid{int}``.</li><li>images</li><li>input<br/>place a single inputfield on ''canvas`` <br>use commands 'css' for css styling: use command ''linewidth`` for adjusting the input field size (default 1)</li><li>inputs<br/>place multiple inputfield: placing inputfields on top of each other is not possible</li><li>function : identical to <a href="#userinput">userinput function</a></li></ul> |
| @ note: mouselisteners are only active if ''$status != done`` (eg only drawing in an active/non-finished exercise) <br> to overrule use command/keyword ''status`` (no arguments required) |
| @ note: object_type text: Any string or multiple strings may be placed anywhere on the canvas.<br>Use command ''fontfamily`` to set font |
| @ note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again. |
| @ 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.button != 1: all buttons but left) |
| @ use a prefix <a href='#filled'>filled</a> or ''f`` to set fillable objects filled. (fcircles,filledcircles etc)<br/> in case of ''fillpattern`` do not use the ''f`` prefix ! |
| 5190,11 → 5190,11 |
|---|
| @ may be combined with keyword <a href='#userinput_xy'>userinput_xy</a> |
| @ may be combined width the <a href='#snaptogrid'>snaptogrid snaptopoints </a> etc, to simplify the checking of the student reply |
| @ the cursor may be appropriately styled using command <a href='cursor'>cursor</a> |
| @ note: when zooming / panning after a drawing, the drawing will NOT be zoomed / panned...this is a "design" flaw and not a feature <br />To avoid trouble do not use zooming / panning together width userdraw.!<br />use command <a href="#multidraw">multidraw</a> is this is a problem for you... |
| @ note: when zooming / panning after a drawing, the drawing will NOT be zoomed / panned...this is a "design" flaw and not a feature <br>To avoid trouble do not use zooming / panning together width userdraw.!<br>use command <a href="#multidraw">multidraw</a> is this is a problem for you... |
| @ note: the default replyformat for ''userdraw input(s),color`` used format x1;y1;text1 \n x2;y2;test2 \n x_n;y_n;text_n (e.g. it is not a comma separated array...use ''direct exec`` to test) |
| @ note: a special case is ''userdraw image,boguscolor``. Images (bitmap or svg or div) present in the exercise page and the img/svg/div-tag with an unique 'id' and <code>onclick='javascript:place_image_on_canvas(this.id)'</code> can be placed onto the canvas.<br />The ''id`` and (x;y) coordinates will be returned using read_canvas();<br /> native MathML, MathJax or KaTeX typesetting may be included in div's.(experiments; wims_modules svn version only!) |
| @ note: command <br /><code>userdraw function,color</code> is identical to acombination of <code>strokecolor color</code> and <code>userinput function</code><br /> |
| @ note: commands :<br /><code>multicolors red,green,blue<br />multilabel f(x)=:g(x)=:h(x)=<br />userdraw functions3,color</code><br />is identical to commands :<br /><code>functionlabel f(x)=:p(x)=:w(x)=<br/>strokecolor red<br />userinput function <br />strokecolor green<br />userinput function <br />strokecolor blue<br />userinput function</code> |
| @ note: a special case is ''userdraw image,boguscolor``. Images (bitmap or svg or div) present in the exercise page and the img/svg/div-tag with an unique 'id' and <code>onclick='javascript:place_image_on_canvas(this.id)'</code> can be placed onto the canvas.<br>The ''id`` and (x;y) coordinates will be returned using read_canvas();<br> native MathML, MathJax or KaTeX typesetting may be included in div's.(experiments; wims_modules svn version only!) |
| @ note: command <br><code>userdraw function,color</code> is identical to acombination of <code>strokecolor color</code> and <code>userinput function</code><br> |
| @ note: commands :<br><code>multicolors red,green,blue<br>multilabel f(x)=:g(x)=:h(x)=<br>userdraw functions3,color</code><br>is identical to commands :<br><code>functionlabel f(x)=:p(x)=:w(x)=<br/>strokecolor red<br>userinput function <br>strokecolor green<br>userinput function <br>strokecolor blue<br>userinput function</code> |
| @%userdraw_canvastype_a%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%grid 2,2,grey%replyformat 10%colorpalette orange,yellow,red,green,lightgreen,blue,lightblue,cyan%canvastype 4%userdraw clickfill,blue%clearbutton REMOVE LAST RECTANGLE |
| @%userdraw_canvastype_b%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%canvastype 4%snaptogrid%replyformat 10%userdraw dotfill,blue%clearbutton REMOVE LAST RECTANGLE |
| @%userdraw_rect%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw rect,green |
| 5324,7 → 5324,7 |
|---|
| @ use command <code>strokecolor some_color</code> to adjust the plot / functionlabel color |
| @ use command <code>css some_css</code> to adjust the inputfields |
| @ use command <code>fontsize int</code> to adjust the label fonts. (default 12px) |
| @ the user input for the function will be corrected by a simple ''rawmath`` implementation...<br />an error message will be shown if javascript can not interpret the user input |
| @ the user input for the function will be corrected by a simple ''rawmath`` implementation...<br>an error message will be shown if javascript can not interpret the user input |
| @%userinput_function%size 400,400%xrange -10,10%yrange -10,10%functionlabel your function g(x)=%axis%axisnumbering%xlabel x-axis%ylabel y-axis%grid 2,2,grey,3,3,5,grey%css color:blue;text-align:center%userinput function%# note: number of function inputs not limited |
| @%userinput_points%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%# adding 2 inputfields for x and y%userinput inputfield%userdraw points,blue |
| @%userinput_arrows%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%#adding 4 inputfields for (x1;y1)---(x2;y2)%userinput inputfieldd%userdraw arrows,blue |
| 5365,10 → 5365,10 |
|---|
| @ userinput_xy |
| @ keyword (no arguments required) |
| @ to be used in combination with command "userdraw object_type,color" |
| @ if set two (or three) input fields are added to the document<br />(one for x-values, one for y-values and in case of drawing circle one for radius-values) |
| @ if set two (or three) input fields are added to the document<br>(one for x-values, one for y-values and in case of drawing circle one for radius-values) |
| @ the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates) |
| @ math input is allowed (e.g something like: 1+3,2*6,1/3,sqrt(3), sin(pi/4),10^-2,log(2)...)<br />eval function is ''protected`` against code injection. |
| @ can <b>not</b> be combined with command ''intooltip tiptext`` <br />note: the ''tooltip div element`` is used for placing inputfields |
| @ math input is allowed (e.g something like: 1+3,2*6,1/3,sqrt(3), sin(pi/4),10^-2,log(2)...)<br>eval function is ''protected`` against code injection. |
| @ can <b>not</b> be combined with command ''intooltip tiptext`` <br>note: the ''tooltip div element`` is used for placing inputfields |
| @ user drawings will not zoom on zooming (or pan on panning) |
| @ use command ''css some_css`` to adjust the inputarea. |
| @ use command ''fontsize int`` to adjust the text labels (if needed) |
| 5387,8 → 5387,8 |
|---|
| @ if set, a inputfield will be added to the page |
| @ repeat keyword for more function input fields |
| @ the userinput value will be plotted in the canvas |
| @ this value may be read with <code>read_canvas()</code>. <br />for do it yourself js-scripters: If this is the first inputfield in the script, its id is canvas_input0 |
| @ use before this command ''userinput_function``,<br />commands like ''css some_css``, ''xlabel some_description``, ''opacity int,int``, ''linewidth int``, ''dashed`` and ''dashtype int,int`` to modify |
| @ this value may be read with <code>read_canvas()</code>. <br>for do it yourself js-scripters: If this is the first inputfield in the script, its id is canvas_input0 |
| @ use before this command ''userinput_function``,<br>commands like ''css some_css``, ''xlabel some_description``, ''opacity int,int``, ''linewidth int``, ''dashed`` and ''dashtype int,int`` to modify |
| @ fontsize can be set using command ''fontsize int`` |
| @ incompatible with command ''intooltip link_text_or_image``: it uses the tooltip div for adding the inputfield |
| @%userinput_function%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%xlabel x-axis%ylabel y-axis%precision 0%grid 2,2,grey,2,2,5,grey%precision 1000%linewidth 2%# first inputfield%css color:blue;text-align:center;font-family:Italic;%strokecolor blue%functionlabel g(x)=:p(x)=:k(x)=%userinput function%# second inputfield%css color:green;text-align:center;font-family:Italic;%strokecolor green%userinput function%# third inputfield%css color:purple;text-align:center;font-family:Italic;%strokecolor purple%userinput function%# no limit in number of function inputfields |
| 5512,7 → 5512,7 |
|---|
| @ use these x-axis num1...num_n values instead of default xmin...xmax |
| @ in case of command ''grid``. there is no need to use keyword <a href="#axisnumbering">axisnumbering</a> |
| @ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a> |
| @ use command ''fontcolor``, ''fontfamily`` to adjust font <br />defaults: black,12,Arial<br />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>) |
| @ use command ''fontcolor``, ''fontfamily`` to adjust font <br>defaults: black,12,Arial<br>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>) |
| @ a javascript error message will flag non-matching value:name pairs |
| @ if the ''x-axis words`` are too big and will overlap, a simple alternating offset will be applied |
| @ to be used before command grid (see <a href="#grid">command grid</a>) |
| 5533,9 → 5533,9 |
|---|
| @ no need to use keyword <a href="#axisnumbering">axisnumbering</a> |
| @ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a> |
| @ use these x-axis num1...num_n values instead of default xmin...xmax |
| @ use command ''fontcolor``, <a href="#fontfamily">fontfamily</a> to adjust font <br />defaults: black,12,Arial<br />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>) |
| @ use command ''fontcolor``, <a href="#fontfamily">fontfamily</a> to adjust font <br>defaults: black,12,Arial<br>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>) |
| @ a javascript error message will flag non-matching value:name pairs |
| @ if the ''x-axis words`` are too big, they will overlap the graph<br /> (in this case the text will start from ysize upwards) |
| @ if the ''x-axis words`` are too big, they will overlap the graph<br> (in this case the text will start from ysize upwards) |
| @ to be used before command grid (see <a href="#grid">command grid</a>) |
| @''xmajor`` steps should be synchronised with numbers eg. "1" in the next example <code>grid 1,100,grey,1,4,6,grey</code> |
| @%xaxistextup%size 800,300%xrange -1,13%yrange -10,10%fontfamily Italic 18pt Courier%axis%xaxistextup 1:january:2:february:3:march:4:april:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december%grid 1,4,grey,1,2,10,red |
| 5612,7 → 5612,7 |
|---|
| @ in case of userdraw the drawn points will snap to xmajor grid |
| @ if no grid is defined, points will snap to every integer xrange value. (eg snap_x=1) |
| @ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0. |
| @ if xminor is defined (use keyword ''axis`` to activate xminor), the drawing will snap to xminor <br />use only even dividers in x-minor...for example<br /><code>xsnaptogrid<br />axis<br />grid 2,1,grey,4,4,7,red</code><br /> will snap on x=0, x=0.5, x=1, x=1.5 ....<br /> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br /> |
| @ if xminor is defined (use keyword ''axis`` to activate xminor), the drawing will snap to xminor <br>use only even dividers in x-minor...for example<br><code>xsnaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code><br> will snap on x=0, x=0.5, x=1, x=1.5 ....<br> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br> |
| @%xsnaptogrid_1%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%xsnaptogrid%userdraw segments,red%precision 1%display x,red,12 |
| @%xsnaptogrid_2%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%drag x%points red,0,0,0,0,0,0,0,0,0,0 |
| |
| 5639,7 → 5639,7 |
|---|
| @ may be used for points or other things requiring labels |
| @ use <a href="#fontfamily">fontfamily</a> for setting the font |
| @ only active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy |
| @ in case of inputfields the inputfield will be centered x and y on its coordinates.<br />for example:<br />inputs 1,1,10,? <br />point 1,1,red <br /> the point will be completely invisible<br />note: keyword ''xyoffset`` will also provide centering if used with <a href='#userdraw'>input(s),color</a> |
| @ in case of inputfields the inputfield will be centered x and y on its coordinates.<br>for example:<br>inputs 1,1,10,? <br>point 1,1,red <br> the point will be completely invisible<br>note: keyword ''xyoffset`` will also provide centering if used with <a href='#userdraw'>input(s),color</a> |
| @%xyoffset%size 400,400%xrange -10,10%yrange -10,10%fontfamily 12pt Arial%string blue,-9,-9,no offset%point -9,-9,red%centered%string blue,-6,-6,centered%point -6,-6,red%xoffset%string blue,-3,-3,xoffset%point -3,-3,red%yoffset%string blue,0,0,yoffset%point 0,0,red%xyoffset%string blue,3,3,xyoffset%point 3,3,red%resetoffset%string blue,6,6,resetoffset%point 6,6,red |
| */ |
| use_offset = 3; |
| 5660,8 → 5660,8 |
|---|
| /* |
| @ xlabel some_string |
| @ will be used to create a label for the x-axis (label is in quadrant I) |
| @ can only be used together with command ''grid``<br />not depending on keywords ''axis`` and ''axisnumbering`` |
| @ font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br />use command ''fontsize`` to adjust.<br />(command ''fontfamily`` is not active for this command) |
| @ can only be used together with command ''grid``<br>not depending on keywords ''axis`` and ''axisnumbering`` |
| @ font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br>use command ''fontsize`` to adjust.<br>(command ''fontfamily`` is not active for this command) |
| @ use <a href="#ylabel">ylabel</a> |
| @%xlabel%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%xlabel cm\\u00B2 %ylabel v\\u00B2 %precision 1%grid 2,2,grey,2,2,5,grey |
| */ |
| 5690,8 → 5690,8 |
|---|
| @ 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> |
| @ note: the complete canvas will be used for the ''log paper`` |
| @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values |
| @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br />\ |
| @ 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>...<br /> make sure the <a href='#precision'>precision</a> is set accordingly |
| @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\ |
| @ 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>...<br> make sure the <a href='#precision'>precision</a> is set accordingly |
| @ note: in case of userdraw, the use of keyword <a href='#userinput_xy'>userinput_xy</a> may be handy ! |
| @ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result... |
| @ <b>attention</b>: do not use command ''zoom`` |
| 5727,8 → 5727,8 |
|---|
| @ 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> |
| @ note: the complete canvas will be used for the ''log paper`` |
| @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values |
| @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br />\ |
| @ note: when using something like ''yrange 0.0001,0.01``...combined with commands ''mouse color,fontsize`` and/or ''userdraw type,color``...<br /> make sure the precision is set accordingly (eg command ''precision 10000``) |
| @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\ |
| @ note: when using something like ''yrange 0.0001,0.01``...combined with commands ''mouse color,fontsize`` and/or ''userdraw type,color``...<br> make sure the precision is set accordingly (eg command ''precision 10000``) |
| @ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy ! |
| @ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result... |
| @ <b>attention</b>: do not use command ''zoom`` |
| 5757,7 → 5757,7 |
|---|
| /* |
| @ yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n |
| @ alternative: yaxistext |
| @ use command ''fontcolor``, ''fontfamily`` to adjust font <br />defaults: black,12,Arial<br /> 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>) |
| @ use command ''fontcolor``, ''fontfamily`` to adjust font <br>defaults: black,12,Arial<br> 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>) |
| @ no need to use keyword <a href="#axisnumbering">axisnumbering</a> |
| @ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a> |
| @ use these y-axis num1...num_n values instead of default ymin...ymax |
| 5835,7 → 5835,7 |
|---|
| default: break; |
| } |
| } |
| if(ymin >= ymax){canvas_error(" yrange is not OK: ymin < ymax !<br />");} |
| if(ymin >= ymax){canvas_error(" yrange is not OK: ymin < ymax !<br>");} |
| fprintf(js_include_file,"var ymin = %f;var ymax = %f;",ymin,ymax); |
| found_size_command++; |
| break; |
| 5848,7 → 5848,7 |
|---|
| @ in case of userdraw the drawn points will snap to ymajor grid |
| @ if no grid is defined, points will snap to every integer yrange value. (eg snap_y=1) |
| @ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0. |
| @ if yminor is defined (use keyword ''axis`` to activate yminor), the drawing will snap to yminor <br />use only even dividers in y-minor...for example<br /><code>ysnaptogrid<br />axis<br />grid 2,1,grey,4,4,7,red</code><br /> will snap on x=0, x=0.5, x=1, x=1.5 ....<br /> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br /> |
| @ if yminor is defined (use keyword ''axis`` to activate yminor), the drawing will snap to yminor <br>use only even dividers in y-minor...for example<br><code>ysnaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code><br> will snap on x=0, x=0.5, x=1, x=1.5 ....<br> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br> |
| @%ysnaptogrid_1%size 400,400%xrange -10,10%yrange -10,10%ysnaptogrid%grid 1,1,grey%linewidth 2%userdraw crosshairs,blue%css font-size:8px;color:blue%clearbutton delete all crosshairs |
| @%ysnaptogrid_2%size 400,400%xrange -10,10%yrange -10,10%ysnaptogrid%grid 1,1,grey%linewidth 3%drag y%points red,0,0,0,0,0,0,0,0,0,0 |
| */ |
| 5859,8 → 5859,8 |
|---|
| /* |
| @ ylabel some_string |
| @ will be used to create a (vertical) label for the y-axis (label is in quadrant I) |
| @ can only be used together with command <a href="#grid">grid</a><br />not depending on keywords ''axis`` and ''axisnumbering`` |
| @ font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br />use command ''fontsize`` to adjust (command ''fontsize`` is not active for this command) |
| @ can only be used together with command <a href="#grid">grid</a><br>not depending on keywords ''axis`` and ''axisnumbering`` |
| @ font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br>use command ''fontsize`` to adjust (command ''fontsize`` is not active for this command) |
| @ use <a href="#xlabel">xlabel</a> |
| @%ylabel%size 400,400%xrange -10,10%yrange -10,10%fontsize 8%axis%axisnumbering%precision 1%xlabel x-axis%ylabel y-axis%grid 1,1,grey,2,2,2,red |
| */ |
| 5887,8 → 5887,8 |
|---|
| @ 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 color</li></ul> |
| @ note: the complete canvas will be used for the ''log paper`` |
| @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values |
| @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br />\ |
| @ note: when using something like ''yrange 0.0001,0.01``...combined with commands ''mouse color,fontsize`` and/or ''userdraw type,color``...<br /> make sure the precision is set accordingly (eg command ''precision 10000``) |
| @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\ |
| @ note: when using something like ''yrange 0.0001,0.01``...combined with commands ''mouse color,fontsize`` and/or ''userdraw type,color``...<br> make sure the precision is set accordingly (eg command ''precision 10000``) |
| @ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy ! |
| @ <b>attention</b>: do not use command ''zoom`` |
| @ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result... |
| 5927,7 → 5927,7 |
|---|
| /* |
| @ zoom button_color |
| @ introduce a very small ''controlpanel`` at the lower right corner (font size of the panel is fixed to: 22px Arial) |
| @ giving six 15×15px ''active`` rectangle areas<br />(''×,↓,↑,←,→,−,+``) for zooming and/or panning of the image |
| @ giving six 15×15px ''active`` rectangle areas<br>(''×,↓,↑,←,→,−,+``) for zooming and/or panning of the image |
| @ a mouse wheel is active for in/out zooming. Drag panning is not supported (this will conflict with many ''userdraw`` or ''multidraw`` primitives) |
| @ the ''controlpanel`` is not active for a ''userdraw`` mousedown (but it can interfere with some ''userdraw`` types) |
| @ the ''×`` symbol will reset to your original xmax/xmin ymax/ymin values. |
| 6036,7 → 6036,7 |
|---|
| x = double_data[i]*affine_matrix[0] + double_data[ii]*affine_matrix[1]+affine_matrix[4]; |
| y = double_data[i]*affine_matrix[2] + double_data[ii]*affine_matrix[3]+affine_matrix[5]; |
| /* |
| printf("(%f:%f) → (%f:%f)<br />",double_data[i],double_data[ii],x,y); |
| printf("(%f:%f) → (%f:%f)<br>",double_data[i],double_data[ii],x,y); |
| */ |
| double_data[i] = x; |
| double_data[ii] = y; |
| 6054,7 → 6054,7 |
|---|
| y = c*(double_data[ii]-center[1]) - s*(double_data[i] - center[0] ) + center[1]; |
| double_data[i] = x; |
| double_data[ii] = y; |
| // printf("(x:y) - (%f:%f)<br />",x,y); |
| // printf("(x:y) - (%f:%f)<br>",x,y); |
| } |
| } |
| /* not used: see transform() |
| 6119,7 → 6119,7 |
|---|
| is_hex = 1; |
| } |
| if( c != ' '){ |
| if( is_hex == 0 ){if(strchr(not_allowed,c) != 0){canvas_error("found something like a number...but is should have been a colour or #hex color number...<br />Do not use R,G,B !!! ");}} |
| if( is_hex == 0 ){if(strchr(not_allowed,c) != 0){canvas_error("found something like a number...but is should have been a colour or #hex color number...<br>Do not use R,G,B !!! ");}} |
| temp[i]=tolower(c); |
| i++; |
| } |
| 6246,7 → 6246,7 |
|---|
| |
| |
| void canvas_error(char *msg){ |
| fprintf(stdout,"\n</script><hr /><span style=\"color:red\">FATAL syntax error: line %d: %s</span><hr />",line_number,msg); |
| fprintf(stdout,"\n</script><hr><span style=\"color:red\">FATAL syntax error: line %d: %s</span><hr>",line_number,msg); |
| finished = 1; |
| exit(EXIT_SUCCESS); |
| } |
| 6269,7 → 6269,7 |
|---|
| } |
| |
| void add_to_buffer(char *tmp){ |
| //fprintf(stdout,"tmp = %s<br />buffer = %s<br />",tmp,buffer); |
| //fprintf(stdout,"tmp = %s<br>buffer = %s<br>",tmp,buffer); |
| if( tmp == NULL || tmp == 0 ){ canvas_error("nothing to add_to_buffer()...");} |
| /* do we have enough space left in buffer[MAX_BUFFER] ? */ |
| int space_left = (int) (sizeof(buffer) - strlen(buffer)); |
| 6278,7 → 6278,7 |
|---|
| } |
| else |
| { |
| canvas_error("your memory buffer is too big<br />simplify your script...it produces too many lines "); |
| canvas_error("your memory buffer is too big<br>simplify your script...it produces too many lines "); |
| } |
| tmp = NULL;free(tmp); |
| return; |
| 6329,7 → 6329,7 |
|---|
| while(ptr != NULL ){ |
| for(i = 0 ; i < 6; i++ ){if( strncmp(ptr,forbidden[i],2) == 0 ){return "NOT ALLOWED ARGUMENT";}} |
| argv[idx] = ptr; idx++; |
| if(idx > 18){canvas_error("too many arguments for obabel....see docs<br />");} |
| if(idx > 18){canvas_error("too many arguments for obabel....see docs<br>");} |
| ptr = strtok(NULL,","); |
| } |
| /* last arguments; no 'javascript', only 'svg to STDOUT' and 'NULL' */ |