Subversion Repositories wimsdev

Rev

Rev 18624 | Rev 18629 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 18624 Rev 18627
Line 194... Line 194...
194
      type = get_token(infile);
194
      type = get_token(infile);
195
      done = FALSE;
195
      done = FALSE;
196
  /*
196
  /*
197
  @ canvasdraw
197
  @ canvasdraw
198
  @ Canvasdraw will try use the same basic syntax structure as flydraw
198
  @ Canvasdraw will try use the same basic syntax structure as flydraw
199
  @ 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>
199
  @ 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>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,bordercolor,color</a> (fill a region around x0,y0 with color until a border of color borderolor is encountered) or <a href="#filltoborder">fill x0,y0,color</a> type filling (fill a region around x0,y0 with color until a border is encountered), there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>All draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li><li>A draggable object can be set draggable by a preceding command <a href="#drag">drag x/y/xy</a><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 color 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: <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>: the fontsize used for labeling these elements can be controlled by command <a href="#fontsize">fontsize int</a> command <code>fontfamily</code> is <b>not</b> active for these elements.</li></ul>
200
  @ 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>&nbsp;var script_len = canvas_scripts.length;<br>&nbsp;var draw_reply = "";<br>&nbsp;var found_result = false;<br>&nbsp;for(var p = 0 ; p < script_len ; p++){<br>&nbsp;&nbsp;var fun = eval("read_canvas"+canvas_scripts[p]);<br>&nbsp;&nbsp;if( typeof fun === 'function'){<br>&nbsp;&nbsp;&nbsp;var result = fun();<br>&nbsp;&nbsp;&nbsp;if( result&nbsp;&nbsp;&& result.length != 0){<br>&nbsp;&nbsp;&nbsp;&nbsp;if(script_len == 1 ){.return result;};<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;found_result = true;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_reply = draw_reply + result + "newline";<br>&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;};<br>&nbsp;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>
200
  @ 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>&nbsp;var script_len = canvas_scripts.length;<br>&nbsp;var draw_reply = "";<br>&nbsp;var found_result = false;<br>&nbsp;for(var p = 0 ; p < script_len ; p++){<br>&nbsp;&nbsp;var fun = eval("read_canvas"+canvas_scripts[p]);<br>&nbsp;&nbsp;if( typeof fun === 'function'){<br>&nbsp;&nbsp;&nbsp;var result = fun();<br>&nbsp;&nbsp;&nbsp;if( result&nbsp;&nbsp;&& result.length != 0){<br>&nbsp;&nbsp;&nbsp;&nbsp;if(script_len == 1 ){.return result;};<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;found_result = true;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_reply = draw_reply + result + "newline";<br>&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;};<br>&nbsp;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... For example a typical canvasdraw script is between 5 and 40 kB...a large library like JSXgraph is approx 600 kB. 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.
201
  @ 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...)
201
  @ Canvasdraw can be used to paint a html5 bitmap image by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job, thus ensuring a minimal strain on the client browser (unlike some popular ''canvas-do-it-all`` libraries, who have proven to be not suitable for low-end computers found in schools...)
202
  @ 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>
202
  @ 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>
203
  @ 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>.
203
  @ 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>.
204
  @ 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.
204
  @ Be aware that older browsers will probably not work correctly. no effort has been undertaken to add glue code for older browsers !! In any case it is not wise to use older browsers...not just for canvasdraw.
205
  @ Be aware that combining several different objects and interactivity may lead to problems.
205
  @ Be aware that combining several different objects and interactivity may lead to problems.
206
  @ 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.
206
  @ 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.
207
  @ 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>.
207
  @ 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... Only single finger gestures are supported (for now). The use of a special pen is advised for interactive drawing on touch devices. 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>.
208
  */
208
  */
209
      switch(type){
209
      switch(type){
210
        case END:finished = 1;done = TRUE;break;
210
        case END:finished = 1;done = TRUE;break;
211
        case 0:sync_input(infile);break;
211
        case 0:sync_input(infile);break;
212
        case AFFINE:
212
        case AFFINE:
Line 291... Line 291...
291
  /*
291
  /*
292
  @ animate
292
  @ animate
293
  @ keyword
293
  @ keyword
294
  @ if set, it will animate a point on a curve
294
  @ if set, it will animate a point on a curve
295
  @ 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'
295
  @ 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'
296
  @ the animated point is a filled rectangle ; adjust colour with command <code>fillcolor colorname/hexnumber</code>
296
  @ the animated point is a filled rectangle ; adjust color with command <code>fillcolor colorname/hexnumber</code>
297
  @ use linewidth to adjust size of the points
297
  @ use linewidth to adjust size of the points
298
  @ 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
298
  @ 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
299
  @ only usable in combination with command <a href='#jsplot'>jsplot</a> (normal functions or parametric)
299
  @ only usable in combination with command <a href='#jsplot'>jsplot</a> (normal functions or parametric)
300
  @ 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>
300
  @ 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>
301
  @ 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>
301
  @ 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>
Line 706... Line 706...
706
  @ boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max
706
  @ boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max
707
  @ 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
707
  @ 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
708
  @ 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
708
  @ 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
709
  @ 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
709
  @ 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
710
  @ use command <a href='#fillpattern'>fillpattern some_pattern</a> to use a (diamond for Q1, hatch for Q3) pattern.
710
  @ use command <a href='#fillpattern'>fillpattern some_pattern</a> to use a (diamond for Q1, hatch for Q3) pattern.
711
  @ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of stroke and fill colours
711
  @ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of stroke and fill colors
712
  @ 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.
712
  @ 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.
713
  @ there is no limit to the number of boxplots used.
713
  @ there is no limit to the number of boxplots used.
714
  @ can <b>not</b> be set draggable and <a href='#onclick'>onclick</a> is not ready yet
714
  @ can <b>not</b> be set draggable and <a href='#onclick'>onclick</a> is not ready yet
715
  @ 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)
715
  @ 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)
716
  @ use keyword <a href="#userboxplotdata">userboxplotdata</a> before command boxplot, if a pupil must generate the data by some means.
716
  @ use keyword <a href="#userboxplotdata">userboxplotdata</a> before command boxplot, if a pupil must generate the data by some means.
Line 777... Line 777...
777
  /*
777
  /*
778
  @ canvastype TYPE
778
  @ canvastype TYPE
779
  @ for now only useful before commands filltoborder / floodfill / clickfill etc operations<br>Only the images of this TYPE will be scanned and filled
779
  @ for now only useful before commands filltoborder / floodfill / clickfill etc operations<br>Only the images of this TYPE will be scanned and filled
780
  @ default value of TYPE is DRAG_CANVAS e.g. 5 (all clickable / draggable object are in this canvas)
780
  @ default value of TYPE is DRAG_CANVAS e.g. 5 (all clickable / draggable object are in this canvas)
781
  @ use another TYPE, if you know what you are doing...
781
  @ use another TYPE, if you know what you are doing...
782
  @ other possible canvasses (e.g. transparent PNG pictures, xsize &times; 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>
782
  @ other possible canvasses (e.g. transparent PNG pictures, xsize &times; 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>
783
  */
783
  */
784
          break;
784
          break;
785
        case CENTERED:
785
        case CENTERED:
786
          use_offset = 4;
786
          use_offset = 4;
787
   /*
787
   /*
Line 928... Line 928...
928
        case CLOCK:
928
        case CLOCK:
929
  /*
929
  /*
930
  @ clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]
930
  @ clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]
931
  @ use command <code>opacity stroke-opacity,fill-opacity</code> to adjust foreground (stroke) and background (fill) transparency
931
  @ use command <code>opacity stroke-opacity,fill-opacity</code> to adjust foreground (stroke) and background (fill) transparency
932
  @ type hourglass:<br>type = 0: only segments<br>type = 1: only numbers<br>type = 2: numbers and segments
932
  @ type hourglass:<br>type = 0: only segments<br>type = 1: only numbers<br>type = 2: numbers and segments
933
  @ 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
933
  @ colors are optional: if not defined, default values will be used<br>default colors: clock 0,0,60,4,35,45,1,2<br>custom colors: clock 0,0,60,4,35,45,1,2,,,,yellow,red<br>custom colors: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow
934
  @ if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
934
  @ if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
935
  @ 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>
935
  @ 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>
936
  @ canvasdraw will not check validity of colornames...the javascript console is your best friend
936
  @ canvasdraw will not check validity of colornames...the javascript console is your best friend
937
  @ no combinations with other reply_types allowed, for now
937
  @ no combinations with other reply_types allowed, for now
938
  @ 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
938
  @ 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
939
  @ 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
939
  @ 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
940
  @ note: clocks will not zoom or pan, when using command <a href='#zoom'>zoom</a>
940
  @ note: clocks will not zoom or pan, when using command <a href='#zoom'>zoom</a>
941
  @%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
941
  @%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
942
  @%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
942
  @%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
943
  @%clock_3%size 400,400%xrange -10,10%yrange -10,10%clock -5,0,80,4,35,45,2,2,red,green,blue,lightgrey,black%clock 5,0,80,3,15,65,2,2,red,green,blue,lightgrey,black
943
  @%clock_3%size 400,400%xrange -10,10%yrange -10,10%clock -5,0,80,4,35,45,2,2,red,green,blue,lightgrey,black%clock 5,0,80,3,15,65,2,2,red,green,blue,lightgrey,black
944
  @%clock_4%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,0,0,red,green,blue,lightgrey,black
944
  @%clock_4%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,0,0,red,green,blue,lightgrey,black
Line 1715... Line 1715...
1715
  /*
1715
  /*
1716
  @ fillpattern grid | hatch | diamond | dot | image_url
1716
  @ fillpattern grid | hatch | diamond | dot | image_url
1717
  @ alternative: settile image_url
1717
  @ alternative: settile image_url
1718
  @ use a pattern as fillstyle
1718
  @ use a pattern as fillstyle
1719
  @ suitable for all fillable object including the <a href="#userdraw">userdraw objects' family</a>
1719
  @ suitable for all fillable object including the <a href="#userdraw">userdraw objects' family</a>
1720
  @ note: do not use the ''f`` for a fillable object : this is used exclusively for solid colour filling.
1720
  @ note: do not use the ''f`` for a fillable object : this is used exclusively for solid color filling.
1721
  @ 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>circle -6,3,160,blue<br>fillpattern dot<br>circle -3,-3,160,red<br>fillpattern hatch<br>circle 0,3,160,green<br>fillpattern diamond<br>circle 3,-3,160,cyan<br>userdraw dotfill,blue<br>zoom red</code>
1721
  @ 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>circle -6,3,160,blue<br>fillpattern dot<br>circle -3,-3,160,red<br>fillpattern hatch<br>circle 0,3,160,green<br>fillpattern diamond<br>circle 3,-3,160,cyan<br>userdraw dotfill,blue<br>zoom red</code>
1722
  @ the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed)
1722
  @ the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed)
1723
  @ the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
1723
  @ the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
1724
  @ see <a href="#fillcolor">fillcolor</a> for solid color filling.
1724
  @ see <a href="#fillcolor">fillcolor</a> for solid color filling.
1725
  @ when using an image-url, make sure it contains an ''/`` in the filename...''fillpattern &#36;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>circle 0,0,100,red<br>fillpattern gifs/nl.gif<br>drag xy<br>circle -3,2,100,green<br>fillpattern gifs/cn.gif<br>drag xy<br>circle 3,2,100,green</code>
1725
  @ when using an image-url, make sure it contains an ''/`` in the filename...''fillpattern &#36;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>circle 0,0,100,red<br>fillpattern gifs/nl.gif<br>drag xy<br>circle -3,2,100,green<br>fillpattern gifs/cn.gif<br>drag xy<br>circle 3,2,100,green</code>
Line 2488... Line 2488...
2488
  @ 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)
2488
  @ 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)
2489
  @ 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
2489
  @ 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
2490
  @ 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...
2490
  @ 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...
2491
  @ can be moved/rotated with command <a href='#slider'>slider</a>
2491
  @ can be moved/rotated with command <a href='#slider'>slider</a>
2492
  @ snaptogrid is supported
2492
  @ snaptogrid is supported
2493
  @ when clicked, the colour of the 'div background' of the 'mathobject' will be determined by the <a href="#fillcolor">fillcolor</a> and <a href="#opacity">opacity</a> settings
2493
  @ when clicked, the color of the 'div background' of the 'mathobject' will be determined by the <a href="#fillcolor">fillcolor</a> and <a href="#opacity">opacity</a> settings
2494
  @ userdraw may be combined with 'latex' ; the js-function 'read_canvas()' will contain the coordinates of the drawing.
2494
  @ userdraw may be combined with 'latex' ; the js-function 'read_canvas()' will contain the coordinates of the drawing.
2495
  @ userdraw may be combined; the read_canvas() will contain the drawing.
2495
  @ userdraw may be combined; the read_canvas() will contain the drawing.
2496
  @ 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
2496
  @ 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
2497
  @ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
2497
  @ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
2498
  @ 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();"
2498
  @ 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();"
Line 2761... Line 2761...
2761
        case LEGENDCOLORS:
2761
        case LEGENDCOLORS:
2762
  /*
2762
  /*
2763
  @ legendcolors color1:color2:color3:...:color_n
2763
  @ legendcolors color1:color2:color3:...:color_n
2764
  @ 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>.
2764
  @ 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>.
2765
  @ make sure the number of colors match the number of legend items
2765
  @ make sure the number of colors match the number of legend items
2766
  @ command ''legend`` in case of ''piechart`` and ''barchart`` will use these colours per default (no need to specify ''legendcolors``)
2766
  @ command ''legend`` in case of ''piechart`` and ''barchart`` will use these colors per default (no need to specify ''legendcolors``)
2767
  @%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
2767
  @%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
2768
  */
2768
  */
2769
          if(legend_cnt == -1){canvas_error("use command \"legend\" before command \"legendcolors\" ! ");}
2769
          if(legend_cnt == -1){canvas_error("use command \"legend\" before command \"legendcolors\" ! ");}
2770
          temp = get_string(infile,1);
2770
          temp = get_string(infile,1);
2771
          if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
2771
          if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
Line 3123... Line 3123...
3123
  /*
3123
  /*
3124
  @ multifillcolors color_name_1,color_name_2,...,color_name_8
3124
  @ multifillcolors color_name_1,color_name_2,...,color_name_8
3125
  @ use before command <a href='#multidraw'>multidraw</a>
3125
  @ use before command <a href='#multidraw'>multidraw</a>
3126
  @ if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be ''stroke_color``, ''fill_opacity``
3126
  @ if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be ''stroke_color``, ''fill_opacity``
3127
  @ 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>
3127
  @ 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>
3128
  @ wims will <b>not</b> check if the number of colours matches the amount of draw primitives...
3128
  @ wims will <b>not</b> check if the number of colors matches the amount of draw primitives...
3129
  @ always use the same sequence as is used for ''multidraw``
3129
  @ always use the same sequence as is used for ''multidraw``
3130
  @ 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>
3130
  @ 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 colors is wanted, see command <a href='#colorpalette'>colorpalette color1,color2...</a>
3131
  */
3131
  */
3132
          if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
3132
          if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
3133
          fprintf(js_include_file,"var multifillcolors = [");
3133
          fprintf(js_include_file,"var multifillcolors = [");
3134
          while( ! done ){
3134
          while( ! done ){
3135
            temp = get_color(infile,1);
3135
            temp = get_color(infile,1);
Line 3178... Line 3178...
3178
  /*
3178
  /*
3179
  @ multistrokecolors color_name_1,color_name_2,...,color_name_8
3179
  @ multistrokecolors color_name_1,color_name_2,...,color_name_8
3180
  @ use before command <a href='#multidraw'>multidraw</a>
3180
  @ use before command <a href='#multidraw'>multidraw</a>
3181
  @ if not set all colors will be ''stroke_color``, ''stroke_opacity``
3181
  @ if not set all colors will be ''stroke_color``, ''stroke_opacity``
3182
  @ use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
3182
  @ use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
3183
  @ wims will <b>not</b> check if the number of colours matches the amount of draw primitives...
3183
  @ wims will <b>not</b> check if the number of colors matches the amount of draw primitives...
3184
  @ always use the same sequence as is used for ''multidraw``
3184
  @ always use the same sequence as is used for ''multidraw``
3185
  */
3185
  */
3186
          if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
3186
          if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
3187
          fprintf(js_include_file,"var multistrokecolors = [");
3187
          fprintf(js_include_file,"var multistrokecolors = [");
3188
          while( ! done ){
3188
          while( ! done ){
Line 3742... Line 3742...
3742
        case PIECHART:
3742
        case PIECHART:
3743
  /*
3743
  /*
3744
  @ piechart xc,yc,radius,'data+colorlist'
3744
  @ piechart xc,yc,radius,'data+colorlist'
3745
  @ (xc: yc) center of circle diagram in xrange/yrange
3745
  @ (xc: yc) center of circle diagram in xrange/yrange
3746
  @ radius in pixels
3746
  @ radius in pixels
3747
  @ 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
3747
  @ data+color list: a colon separated list of raw data and corresponding colors<br>canvasdraw will not check validity of colornames...<br>in case of trouble look into javascript debugging of your browser
3748
  @ example data+colorlist: 32:red:65:green:23:black:43:orange:43:yellow:14:white
3748
  @ example data+colorlist: 32:red:65:green:23:black:43:orange:43:yellow:14:white
3749
  @ the number of colors must match the number of data.
3749
  @ the number of colors must match the number of data.
3750
  @ 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,...
3750
  @ 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,...
3751
  @ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of colours
3751
  @ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of colors
3752
  @ 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.
3752
  @ use command <a href='#legend'>legend</a> to automatically create a legend using the same colors 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.
3753
  @ 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.
3753
  @ 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.
3754
  @%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%
3754
  @%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%
3755
  @%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
3755
  @%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
3756
  */
3756
  */
3757
          js_function[DRAW_PIECHART] = 1;
3757
          js_function[DRAW_PIECHART] = 1;
Line 5442... Line 5442...
5442
  @ the x/y-range are set using commands <code>xrange xmin,xmax</code> and <code>yrange ymin,ymax</code>
5442
  @ the x/y-range are set using commands <code>xrange xmin,xmax</code> and <code>yrange ymin,ymax</code>
5443
  @ ymajor is the major step on the y-axis; yminor is the divisor for the y-step
5443
  @ ymajor is the major step on the y-axis; yminor is the divisor for the y-step
5444
  @ the linewidth is set using command ''linewidth int``
5444
  @ the linewidth is set using command ''linewidth int``
5445
  @ the opacity of major / minor grid lines is set by command <a href='#opacity'>opacity</a>
5445
  @ the opacity of major / minor grid lines is set by command <a href='#opacity'>opacity</a>
5446
  @ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number``
5446
  @ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number``
5447
  @ 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>
5447
  @ 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 color</li></ul>
5448
  @ note: the complete canvas will be used for the ''log paper``
5448
  @ note: the complete canvas will be used for the ''log paper``
5449
  @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
5449
  @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
5450
  @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
5450
  @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
5451
  @ 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
5451
  @ 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
5452
  @ note: in case of userdraw, the use of keyword <a href='#userinput_xy'>userinput_xy</a> may be handy !
5452
  @ note: in case of userdraw, the use of keyword <a href='#userinput_xy'>userinput_xy</a> may be handy !
Line 5477... Line 5477...
5477
  @ xylogscale majorcolor,minorcolor
5477
  @ xylogscale majorcolor,minorcolor
5478
  @ the x/y-range are set using commands ''xrange xmin,xmax`` and ''yrange ymin,ymax``
5478
  @ the x/y-range are set using commands ''xrange xmin,xmax`` and ''yrange ymin,ymax``
5479
  @ the linewidth is set using command ''linewidth int``
5479
  @ the linewidth is set using command ''linewidth int``
5480
  @ the opacity of major / minor grid lines is set by command ''opacity [0-255],[0-255]``
5480
  @ the opacity of major / minor grid lines is set by command ''opacity [0-255],[0-255]``
5481
  @ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number`` and/or ''ylogbase number``
5481
  @ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number`` and/or ''ylogbase number``
5482
  @ 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>
5482
  @ 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 color</li></ul>
5483
  @ note: the complete canvas will be used for the ''log paper``
5483
  @ note: the complete canvas will be used for the ''log paper``
5484
  @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
5484
  @ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
5485
  @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
5485
  @ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
5486
  @ 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``)
5486
  @ 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``)
5487
  @ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy !
5487
  @ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy !