Inicio WIMS

WIMS technical documentation

This document is currently under indexed style. You may change it to integral or folding style. There is also a general help and a paper on WIMS.

Canvasdraw Documentation

  • Store canvas in variable "A": \text{A=canvasdraw(xsize,ysize commande...)}
  • Direct display canvas in statement: \canvasdraw{xsize,ysize}{commande...}
Canvasdraw versus Flydraw

Implemented canvasdraw commands (10-01-2025)

canvasdraw ↑

canvasdraw
  • Canvasdraw will try use the same basic syntax structure as flydraw
  • General syntax
    • The transparency of all objects can be controlled by command opacity [0-255],[0,255]
    • line width of any object can be controlled by command linewidth int
    • any may be dashed by using keyword dashed before the object command.
      the dashing type can be controled by command dashtype int,intplease note: dashing may have different spacing depending on the angle of the line
      see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw
    • a fillable object can be set fillable by starting the object command with an f (like frect,fcircle,ftriangle ...) or by using the keyword filled before the object command.
      The fill colour of non_userdraw objects will be the stroke colour...(flydraw harmonization 19/10/2013)
      non-solid filling (grid,hatch,diamond,dot,text) is provided using command fillpattern a_pattern
      note: do not use a f with this non-solid pattern filling !
      for filltoborder x0,y0,color or fill x0,y0,color type filling (eg fill a region around x0,y0 with color until a border is encountered),
      there are non-solid pattern fill analogues:
    • all draggable objects may have a slider for translation / rotation; several objects may be translated / rotated by a single slider
    • a draggable object can be set draggable by a preceding command drag x/y/xy
      The translation can be read by javascript:read_dragdrop();The replyformat is: object_number : x-orig : y-orig : x-drag : y-drag
      The x-orig/y-orig will be returned in maximum precision (javascript float)...
      the x-drag/y-drag will be returned in defined precision number of decimals
      Multiple objects may be set draggable / clickable (no limit)
      not all flydraw objects may be dragged / clicked
      Only draggable / clickable objects will be scaled on zoom and will be translated in case of panning.
    • a onclick object can be set clickable by the preceding keyword onclick
      not all flydraw objects can be set clickable
    • remarks using a ; as command separator. Commands with only numeric or colour arguments may be using a ; as command separator (instead of a new line). Commands with a string argument may not use a ; as command separator !
      these exceptions are not really straight forward... so keep this in mind.
    • almost every userdraw object,color or multidraw command family may be combined with keywords "snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction or command snaptopoints x1,y1,x2,y2,...
    • every draggable | onclick object may be combined with keywords snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction or command snaptopoints x1,y1,x2,y2,...
    • almost every command for a single object has a multiple objects counterpart:
        general syntax rule:
      • object x1,y1,...,color
      • objects color,x1,y1,...
    • All inputfields or textareas generated, can be styled individually using command css some_css
      the fontsize used for labeling these elements can be controlled by command fontsize int
      command fontfamily is not active for these elements
  • If needed multiple interactive scripts (*) may be used in a single webpage.
    A function read_canvas() and / or read_dragdrop() can read all interactive userdata from these images.
    The global array canvas_scriptswill contain all unique random "canvas_root_id" of the included scripts.
    The included local javascript "read" functions read_canvas%d() and read_dragdrop%d() will have this %d = canvas_root_id
    e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function
    fun = eval("read_canvas"+canvas_scripts[0]) to read user based drawings / inputfield in this first image.
    The read_dragdrop is analogue.
    If the default reply formatting is not suitable, use command replyformat to format the replies for an individual canvas script,
    To read all user interactions from all included canvas scripts, use something like:
    function read_all_canvas_images(){
     var script_len = canvas_scripts.length;
     var draw_reply = "";
     var found_result = false;
     for(var p = 0 ; p < script_len ; p++){
      var fun = eval("read_canvas"+canvas_scripts[p]);
      if( typeof fun === 'function'){
       var result = fun();
       if( result  && result.length != 0){
        if(script_len == 1 ){.return result;};
         found_result = true;
         draw_reply = draw_reply + result + "newline";
        };
       };
      };
     if( found_result ){return draw_reply;}else{return null;};
    };
    (*) Note: the speed advantage over canvas-do-it-all 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 !
  • 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...)
  • You can check the javascript reply format in the wims tool direct exec
  • For usage within OEF (without anstype draw), something like this (a popup function plotter) will work:
    ext{popup_grapher=wims(exec canvasdraw
    popup
    size 400,400
    xrange -10,10
    yrange -10,10
    axis
    axisnumbering
    opacity 100,100
    grid 2,2,grey,2,2,6,black
    snaptogrid
    linewidth 2
    jsplot red,5*sin(1/x)
    strokecolor green
    functionlabel f(x)=
    userinput function
    mouse blue,22
    )
    }
    \statement{
    \popup_grapher
    }    .
  • 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.
  • 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 me an email with screenshots and the generated javascript include file.
  • There is limited support for touch devices: touchstart, touchmove and touchend in commands userdraw primitives , multidraw primitives , protractor, ruler 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 userinput.

affine ↑

affine a,b,c,d,tx,ty
  • defines a transformation matrix for subsequent objects
  • use keyword killaffine to end the transformation...the next objects will be drawn in the original x/y-range
  • a: Scales the drawings horizontally
  • b: Skews the drawings horizontally
  • c: Skews the drawings vertically
  • d: Scales the drawings vertically
  • tx: Moves the drawings horizontally in xrange coordinate system
  • ty: Moves the drawings vertically in yrange coordinate system
  • the data precision may be set by preceding command precision int
  • note: not all affine operations on canvasdraw objects will be identical to flydraw's behaviour. Make sure to check !
  • Ejemplo: affine Ejemplo: affine+latex

duplicates ↑

duplicates || allowdups
  • keyword (no arguments)
  • only useful in case of a multidraw student reply.
  • only useful in default replyformat (eg in case of a not specified replyformat).
  • if set, duplicate (x:y) coordinates will not be removed from the student reply.
  • technical: a javascript variable "allow_duplicate_answer = 1;" is declared.
  • default for command multidraw is: removal of duplicates.

angle ↑

angle xc,yc,width,start_angle,end_angle,color
  • width is in x-range
  • angles are in degrees
  • not compatible with flydraw
  • will zoom in/out
  • may be set onclick or drag&drop
  • if angle size is controlled by command slider, use radians to set limits of slider
  • angle and arc are exceptions in case of sliders...they are always active (e.g. not click-activated)
  • Ejemplo: angle Ejemplo: angle_slider

animate ↑

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)
    may be animated using command slider with keyword 'anim'
  • the animated point is a filled rectangle ; adjust colour with command fillcolor colorname/hexnumber
  • use linewidth to adjust size of the points
  • will animate a point on -only- the next jsplot/jscurve command. Only a single call to animate is allowed...in case of multiple animate keywords, only the last one is valid
  • only usable in combination with command jsplot (normal functions or parametric)
  • moves repeatedly from xmin to xmax or in case of a parametric function from tmin to tmax
  • use commands multilinewidth, multistrokecolor etc in case of multiple animated functions.
    use multiple functions as argument in a single call to jsplot color,fun1,fun2,fun3...fun_n
  • Ejemplo: animate_1 Ejemplo: animate_2

arc ↑

arc xc,yc,x-width,y-height,start_angle,end_angle,color

arrowarc ↑

arrowarc xc,yc,x-width,y-height,start_angle,end_angle,color,type
  • alternative command: arcarrow
  • uses same syntax as arc
  • for arrow hat: type = 1 : right
    type = 2 : left
    type = 3 : left&right
  • if the default arrow hat/head is not satisfactory , the size of the arrow may be set with command arrowhead
  • no other arrow types are implemented...yet
  • may be set draggable or onclick
  • attention: when width ad height are very different, the arrow hat is not drawn correctly. This is a flaw and not a feature...(for now: too much calculations to correct)
  • Ejemplo: arcarrow

arrow ↑

arrow x1,y1,x2,y2,h,color

arrows ↑

arrows color,head (px),x1,y1,x2,y2...x_n,y_n

arrow2 ↑

arrow2 x1,y1,x2,y2,h,color
  • draw a double headed arrow/vector from (x1:y1) to (x2:y2)
    with arrowhead size h in px and in color color
  • use command arrowhead int to adjust the arrow head size
  • use command linewidth int to adjust thickness of the arrow
  • may be set draggable / onclick
  • Ejemplo: arrow2

arrows2 ↑

arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n
  • draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color color
  • use command linewidth int to adjust thickness of the arrows
  • may be set draggable / onclick individually
  • Ejemplo: arrows2

arrowhead ↑

arrowhead int
  • default 8 (pixels)

audio ↑

audio x,y,w,h,loop,visible,audiofile location
  • x,y: left top corner of audio element (in xrange / yrange)
  • w,y: width and height in pixels
  • loop: 0 or 1 ( 1 = loop audio fragment)
  • visible: 0 or 1 (1 = show controls)
  • 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.
    the program will use both as source tag

axisnumbering ↑

axisnumbering

axis ↑

axis
  • keyword (no arguments required)
  • to be used before command grid (see command grid)

barchart ↑

barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n
  • may only to be used together with command grid
  • can be used together with freestyle x-axis/y-axis texts: see commands xaxis,xaxisup and yaxis
  • use command legend to provide an optional legend in right-top-corner
  • multiple barchart command may be used in a single script
  • also see command piechart
  • note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
  • Ejemplo: barchart

bezier ↑

bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end
  • draw a bezier curve between points, starting from (x_start:y_start)
  • can not be dragged or set onclick

bgcolor ↑

bgcolor colorname or #hex
  • use this color as background of the "div" containing the canvas(es)
  • Ejemplo: bgcolor

bgimage ↑

bgimage image_location
  • use an image as background; technical: we use the background of canvas_div
  • the background image will be resized to match "width = xsize" and "height = ysize"
  • Ejemplo: bgimage
blink time(seconds)
  • NOT IMPLEMETED -YET

boxplot ↑

boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max
  • example:
    xrange 0,300
    yrange 0,10
    boxplot x,4,8,120,160,170,220,245
    meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8
  • example:
    xrange 0,10
    yrange 0,300
    boxplot y,4,8,120,160,170,220,245
    meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8
  • use command filled to fill the box
    note: the strokecolor is used for filling Q1, the fillcolor is used for filling Q3
  • use command fillpattern some_pattern to use a (diamond for Q1, hatch for Q3) pattern.
  • use command opacity to adjust fill_opacity of stroke and fill colours
  • use command legend to automatically create a legend
    unicode allowed in legend
    use command fontfamily to set the font of the legend.
  • there is no limit to the number of boxplots used.
  • can not be set draggable and onclick is not ready yet
  • use keyword userboxplot before command boxplot, if a pupil must draw a boxplot (using his own min,Q1,median,Q3,max data)
  • use keyword userboxplotdata before command boxplot, if a pupil must generate the data by some means.
  • use command boxplotdata when the boxplot should be drawn from wims-generated raw statistical date
  • Ejemplo: boxplot_1 Ejemplo: boxplot_2 Ejemplo: boxplot_3

boxplotdata ↑

boxplotdata some_data
  • 'some_data' are a list of numbers separated by a comma "," (items)
  • only be used before command boxplot: the command boxplot will provide the boxplot drawing of the data.
  • xrange 0,100
    yrange 0,10
    boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23
    boxplot x,4,5
  • note: wims will not check your data input | format. use js-error console to debug any problems.
  • a javascript function statistics() will parse the data and calculate the values [min,Q1,median,Q3,max] and hand them to the boxplot draw function.
  • only a single call to boxplotdata can be made. If multiple boxplots should be present in a single canvas, then use multiple calls to command boxplot
  • Ejemplo: boxplotdata

canvastype ↑

canvastype TYPE
  • for now only useful before commands filltoborder / floodfill / clickfill etc operations
    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)
    • EXTERNAL_IMAGE_CANVAS 0
    • BG_CANVAS 1
    • STATIC_CANVAS 2
    • MOUSE_CANVAS 3
    • GRID_CANVAS 4
    • DRAG_CANVAS 5
    • DRAW_CANVAS 6
    • TEXT_CANVAS 7
    • CLOCK_CANVAS 8
    • ANIMATE_CANVAS 9
    • TRACE_CANVAS 10
    • BOXPLOT_CANVAS 11
    • JSPLOT_CANVAS 100, will increase with every call
    • FILL_CANVAS 200, will increase with every call
    • USERDRAW_JSPLOT 300, will increase with every call
    • CLICKFILL_CANVAS 400, will increase with every call/click
    • BOXPLOT_CANVAS 500, will increase with every call

centered ↑

centered
  • keyword ; to place the text centered (in width and height) on the text coordinates(x:y)
  • may be used for text exactly centered on its (x;y)
  • use fontfamily for setting the font
  • may be active for commands text and string (e.g. objects in the drag/drop/onclick-library)
  • Ejemplo: centered

centerstring ↑

centerstring color,y-value,the text string
  • title color,y-value,the text string
  • draw a string centered on the canvas at y = y-value
  • can not be set onclick or drag xy (...)
  • unicode supported: centerstring red,5,\u2232
  • use a command like fontfamily italic 24pt Arial to set fonts on browser that support font change
  • Ejemplo: centerstring

circle ↑

circle xc,yc,width (2*r in pixels),color
  • use command fcircle xc,yc,d,color
  • alternative command: disk
  • use command fillcolor color to set the fillcolor
  • may be set draggable / onclick
  • will shrink / expand on zoom out / zoom in
  • Ejemplo: circle

circles ↑

circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n

clearbutton ↑

clearbutton value
  • alternative command: delete
  • alternative command: erase
  • adds a button to clear the userdraw canvas with text value
  • attention command clearbutton is incompatible with multidraw based drawings
    (in multidraw there is always a remove_object_button for every draw primitive)
  • normally userdraw primitives have the option to use middle/right mouse button on
    a point of the object to remove this specific object...this clear button will remove all drawings
  • uses the tooltip placeholder div element: may not be used with command intooltip
  • use command css to style the button...
  • the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script
    to change the style of all clearbutton of all included canvasdraw scripts, use something like
    if(document.getElementById("clearbutton"+canvas_scripts[0])){
     var p = 0;
     while(document.getElementById("clearbutton"+canvas_scripts[p])){
      document.getElementById("clearbutton"+canvas_scripts[p]).className="some_class_name";
      <!−−     or document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); −−>
      p++;
     };
    };
  • Ejemplo: clearbutton

clock ↑

clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]
  • use command opacity stroke-opacity,fill-opacity to adjust foreground (stroke) and background (fill) transparency
  • type hourglass:
    type = 0: only segments
    type = 1: only numbers
    type = 2: numbers and segments
  • colors are optional: if not defined, default values will be used
    default colours: clock 0,0,60,4,35,45,1,2
    custom colours: clock 0,0,60,4,35,45,1,2,,,,yellow,red
    custom colours: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow
  • if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
  • interactive
    • 0: not interactive, just clock(s)
    • 1: function read_canvas() will read all active clocks in H:M:S format
      The active clock(s) can be adjusted by pupils
    • 2: function read_canvas() will return the clicked clock
      (like multiplechoice; first clock in script in nr. 0 )
    • 3: no prefab buttons...create your own buttons (or other means) to make the clock(s) adjustable by javascript function set_clock(num,type,diff)
      wherein: num = clock id (starts with 0) ; type = 1 (hours) ; type = 2 (minutes) ; type = 3 (seconds)
      and diff = the increment of 'type' (positive or negative)
  • 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-)
    set_clock(clock_id,type,incr)
    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 !
    and not multiple canvas scripts in a single page
  • note: clocks will not zoom or pan, when using command zoom
  • Ejemplo: clock_1 Ejemplo: clock_2 Ejemplo: clock_3 Ejemplo: clock_4 Ejemplo: clock_5 Ejemplo: clock_6 Ejemplo: clock_7

colorpalette ↑

colorpalette color_name_1,color_name_2,...,color_name_8
  • opacity will be the same for all colors and is set by command opacity [0-255],[0-255]
  • can be used with command userdraw clickfill,color when more than one fillcolor is wanted.
    in that case use for example replyformat 10 ... reply=x1:y1:color1,x2:y2:color2...
    the pupil can choose from the given colors by clicking small coloured buttons.
    the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat.
    the first color of the palette is color=0
  • make sure to include the remove button by using command clearbutton some_text

copy ↑

copy x,y,x1,y1,x2,y2,[filename URL]
  • The image may be "bitmap" or "SVG"
  • Insert the region from (x1,y1) to (x2,y2) (in pixels) of [filename] to (x,y) in x/y-range
  • If x1=y1=x2=y2=-1, the whole [filename URL] is copied.
  • [filename] is the URL of the image
  • TODO:move special image functions to generic 'dragstuff' library
  • URL is normal URL of network reachable image file location
  • if command drag x/y/xy is set before command copy, the images will be draggable
    javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images
    the command drag is only valid for the next image
    draggable / non-draggable images may be mixed
    may be used together with preceding keywords snaptogrid, xsnaptogrid, ysnaptogrid or snaptopoints x1,y1,x2,y2....
  • if keyword onclick is set before command copy the image(s) is clickable (marked with a green rectangle around the image)
    use 'read_dragdrop' to get the number of the clicked image(s)
    use command 'clearbutton some_text' to reset the reply/click array.
    example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0
    after clicking the clear button: reply = 0,0,0,0
    May be mixed with commands drag x|y|xy (use javascript read_canvas to get the new coordinates
  • 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 html x,y,<img src=my_image.svg />
  • use keyword centered before command copy to place image center at given coordinates.
  • Ejemplo: copy_onclick Ejemplo: copy_drag_xy Ejemplo: copy_drag_xy_snaptogrid

copyresized ↑

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],
    possibly resized,
    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
    (as seen from public_html-root or network reachable 'http://some_server/my_images/test.gif'
    (eg no special wims paths are searched !!)
  • if command drag x/y/xy is set before command copy, the images will be draggable
    javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images
    the command drag is only valid for the next image
    draggable / non-draggable images may be mixed
    may be used together with preceding keywords snaptogrid,xsnaptogrid,ysnaptogrid or snaptopoints x1,y1,x2,y2...
  • if keyword onclick is set before command copy the image(s) is clickable (marked with a green rectangle around the image)
    use read_dragdrop to get the number of the clicked image(s)
    use command 'clearbutton some_text' to reset the reply/click array.
    example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0
    after clicking the clear button: reply = 0,0,0,0
    May be mixed with commands drag x|y|xy (use javascript read_canvas to get the new coordinates
  • 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()'
    now dragging external images may be combined with 'read_canvas()' from userdraw or multidraw
    set command precision before command copy
  • use keyword centered before command 'copyresized' to place image center at given coordinates.
  • TODO:move special image functions to generic 'dragstuff' library

crosshair ↑

crosshair x,y,color

crosshairs ↑

crosshairs color,x1,y1,x2,y2,...,x_n,y_n

crosshairsize ↑

crosshairsize int
  • default 8 (px)

css ↑

css css_class
  • may be used before any style-able html object (like inputfields or buttons) or some html objects that are generated by some canvasdraw commands
  • in case of multidraw this command must be a table css class, for example "wimstable"
  • Ejemplo: css

cursor ↑

cursor some CSS cursor_style
  • alternative command: pointer
  • style can be any valid CSS property value
  • choose from these types:
    alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,
    ew-resize,grab,grabbing,help,move,n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,
    nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,s-resize,se-resize,
    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
  • Ejemplo: cursor_css

curve ↑

curve color,formula(x)
  • alternative command: plot
  • use command trange in parametric functions before every command curve / plot trange -pi,pi
    curve color,formula1(t),formula2(t)
    A next parametric curve will only be correctly plot when trange is set again !
    this is a design flaw and not a feature...
  • use command precision to increase the number of digits of the plotted points
  • use command plotsteps to increase / decrease the amount of plotted points (default 150)
  • may be set draggable / onclick
  • if you need a plot beyond xrange / yrange, use jsplot (command curve will only calculate points within the xrange)
  • Ejemplo: curve

curvedarrow ↑

curvedarrow x1,y1,xc,yc,x2,y2,color

curvedarrow2 ↑

curvedarrow2 x1,y1,xc,yc,x2,y2,color

curvedarrows ↑

curvedarrows color,x1,y1,xc,yc,x2,y2,...,x_(n-1),y_(n-1),xc,yc,x_n,y_n

curvedarrows2 ↑

curvedarrows2 color,x1,y1,xc,yc,x2,y2,...x_(n-1),y_(n-1),xc,yc,x_n,y_n

dashed ↑

dashed
  • keyword (no arguments required)
  • next object will be drawn with a dashed line
  • change dashing scheme by using command dashtype
  • Ejemplo: dashed

dashtype ↑

dashtype line_width_px,space_width_px
  • every indiviual object may have its own dashtype, if needed...
  • When keyword dashed is set, the objects will be drawn with this dashtype
  • default value dashtype 2,2 e.g. 2px line and 2px space
  • HTML5 canvas specification supports more arguments (dashing schemes) ... but not all modern browsers are yet capable
  • Ejemplo: dashtype

diamondfill ↑

diamondfill x0,y0,dx,dy,color

dotfill ↑

dotfill x0,y0,dx,dy,color

drag ↑

drag [x][y][xy]
  • the next object will be draggable in x / y / xy direction
  • the displacement can be read by javascript:read_dragdrop();
  • the precision (default 2 decimals) in the student reply may be set with command precision.
    Use this 'precision' command before this command 'drag x|y|xy' !
  • onclick 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)
  • attention: static objects and onclick/drag objects of the same type (like point,circle,etc) with the same coordinates (e.g. objects that overlap) will give problems in the recognition algorithm) in this example
    linewidth 4
    point 0,0,red
    drag xy
    point 0,0,blue
    the red point will not be recognised as draggable ! in the example
    linewidth 4
    drag xy
    point 0,0,red
    drag xy
    point 0,0,blue
    both points will be recognised
  • the answer is: drag_or_onclick_object_number : Xorg : Yorg : Xnew : Ynew
    wherein object_number is the sequence number of the draggable & onclick objects in your script.
    Only draggable & onclick objects will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc)
  • use keyword snaptogrid, xsnaptogrid, ysnaptogrid or command snaptopoints x1,y1,x2,y2,... to switch from free to discrete movement
  • in case of external images (commands copy / copyresized) the external image can be set draggable ; always xy.
    The function javascript;read_canvas() will return the xy-coordinates of all images.
  • Ejemplo: drag_x Ejemplo: drag_y Ejemplo: drag_xy

ellipse ↑

ellipse xc,yc,width_x,height_y,color
  • ellipses with center xc/yc and width/height in x/y-range etc (this differs from flydraw syntax!)
  • may be set draggable / onclick
  • will shrink / expand on zoom out / zoom in
  • Ejemplo: ellipse

ellipses ↑

ellipses color,xc1,yc1,width_x1,height_y1,xc2,yc2,width_x2,height_y2,xc3,yc3,width_x3,height_y3,...
  • ellipses with center and height in x/y-range etc (this differs from flydraw syntax!)
  • may be set draggable / onclick
  • will shrink / expand on zoom out / zoom in
  • Ejemplo: ellipses

fillall ↑

fillall color,x1,y1,x2,y2...x_n,y_n
  • fill all region containing points (x1:y1),(x2:y2)...(x_n:y_n) with color 'color'
  • any other colors (objects) in the canvastype will act as border to the bucket fill
  • use this command after all boundary objects are declared.
  • Use command 'userdraw clickfill,color' for user click driven flood fill.
  • use command canvastype to fill another canvas (default should be fine: DRAG_CANVAS = 5)
  • note: the fill-family of commands are very (client) cpu intensive operations!
    filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels: each pixel contains 4 data (R,G,B,Opacity) = 640000 data.
    on every data a few operations / comparisons are done...
    So have pity on your students CPU..
  • Ejemplo: fillall

filled ↑

filled
  • keyword (no arguments required)
  • the next fillable object (only the next !) will be filled
  • use command fillcolor color to set fillcolor
  • use fillpattern for non-solid color filling.
  • use command opacity 0-255,0-255 to set stroke and fill-opacity
  • use command fill x,y,color or floodfill x,y,color to fill the space around (x;y) with color
    pixel operation implemented in javascript: use with care !

fillcolor ↑

fillcolor colorname or #hex
  • set the color: mainly used for command 'userdraw obj,stroke_color'
  • all fillable massive objects will have a fillcolor == strokecolor (just to be compatible with flydraw...)
  • see fillpattern for non-solid color filling.

fillpattern ↑

fillpattern grid | hatch | diamond | dot | image_url
  • alternative command: settileimage_url
  • use a pattern as fillstyle
  • suitable for all fillable object including the userdraw objects' family
  • 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:
    size 370,370
    xrange -5,5
    yrange -5,5
    opacity 165,150
    fillpattern grid
    fcircle -6,3,160,blue
    fillpattern dot
    fcircle -3,-3,160,red
    fillpattern hatch
    fcircle 0,3,160,green
    filpattern diamond
    fcircle 3,-3,160,cyan
    userdraw dotfill,blue
    zoom red
  • the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed)
  • the pattern color is set by command fillcolor and opacity
  • see fillcolor 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.|
    the argument to html5 canvas routine 'createPattern(img,argument)' is set to repeat e.g. if the image is smaller then the canvas, multiple copies will be used to fill the area ( e.g. ctx.fillStyle() = pattern)
    for example:
    size 150,150
    xrange -5,5
    yrange -5,5
    drag xy
    fillpattern gifs/en.gif
    fcircle 0,0,100,red
    fillpattern gifs/nl.gif
    drag xy
    fcircle -3,2,100,green
    fillpattern gifs/cn.gif
    drag xy
    fcircle 3,2,100,green
  • fillpattern is also active for userdraw object,color...
    the userdraw family a has also clickfill type (e.g. an object gets filled between boundaries, when clicked) commands like:
    'userdraw dotfill,color'
    'userdraw hatchfill,color' etc
  • Ejemplo: fillpattern_1 Ejemplo: fillpattern_2

filltoborder ↑

filltoborder x,y,bordercolor,color
  • fill the region of point (x:y) with color 'color'
  • any other color will not act as border to the bucket fill
  • use this command after all boundary objects are declared.
  • use command canvastype to fill another canvas (default should be fine: DRAG_CANVAS = 5)
  • note: filltoborder is a very (client) cpu intensive operation!
    filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels: each pixel contains 4 data (R,G,B,Opacity) = 640000 data.
    on every data a few operations / comparisons are done...
    So have pity on your students CPU..
  • maybe used together with command userdraw clickfill,color
  • Ejemplo: filltoborder

floodfill ↑

floodfill x,y,color
  • alternative command: fill
  • fill the region of point (x:y) with color 'color'
  • any other color or size of picture (borders of picture) will act as border to the bucket fill
  • use this command after all boundary objects are declared.
  • Use command userdraw clickfill,color for user click driven flood fill.
  • use command canvastype to fill another canvas (default should be fine: DRAG_CANVAS = 5)
  • note: floodfill is a very (client) cpu intensive operation!
    filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels: each pixel contains 4 data (R,G,B,Opacity) = 640000 data.
    on every data a few operations / comparisons are done...
    So have pity on your students CPU..
  • Ejemplo: floodfill

fontcolor ↑

fontcolor color

fontfamily ↑

fontfamily font_description
  • set the font family; for browsers that support it
  • font_description: Arial, Courier, Helvetica etc
  • in case commands string color,x,y,the string, stringup color,x,y,rotation,the string, fontfamily can be something like:fontfamily italic 34pt Arial. Use correct syntax: font style, font size pt, fontfamily
  • Ejemplo: fontfamily

fontsize ↑

fontsize font_size
  • default value 12
  • note: for some macros (like grid | legend | xaxistext | xlabel etc) sometimes command fontfamily can be used for some specific font-setting
    this is however not always very straight forward... so just try and see what happens

functionlabel ↑

functionlabel label_1:label_2:label_3...

grid ↑

grid step_x,step_y,gridcolor

gridfill ↑

gridfill x0,y0,dx,dy,color

group ↑

group
  • keyword
  • work in 'progress'
  • all objects(*) after the command and until kill group or killslider may be moved together with mouse moverments
    (*) 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
  • Ejemplo: group

demiline ↑

demiline x1,y1,x2,y2,color

demilines ↑

demilines color,x1,y1,x2,y2,....

hatchfill ↑

hatchfill x0,y0,dx,dy,color

hline ↑

hline x,y,color

hlines ↑

hlines color,x1,y1,x2,y2,...

http ↑

http x1,y1,x2,y2,http://some_adress.com
  • an active html-page will be displayed in an "iframe" rectangle left top (x1:y1), right bottom (x2:y2)
  • do not use interactivity (or mouse) if the mouse needs to be active in the iframe
  • can not be set onclick or drag xy
  • Ejemplo: http

html ↑

html x1,y1,html_string
  • all tags are allowed, html code using inputfields could be read using your own javascript code. Do not use ids like 'canvas_input0' etc.
  • can be set onclick and drag&drop
  • command affine will produce CSS3 matrix transformations
  • command rotate will rotate the object
  • use keyword centered to center the html object on (x1:y1)
  • 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 string, e.g. real internal canvas objects !
  • Ejemplo: html-text Ejemplo: html-image-slider

imagefill ↑

imagefill x,y,scaling to xsize × ysize?,image_url
  • The next suitable filled object will be filled with "image_url" tiled
  • scaling to xsize × ysize ? ... 1 = yes 0 = no
  • After pattern filling, the fill-color should be reset !
  • wims getins / image from class directory: imagefill 80,80,my_image.gif
  • normal url: imagefill 80,80,0,$module_dir/gifs/my_image.gif
  • normal url: imagefill 80,80,1,http://adres/a/b/c/my_image.jpg
  • if dx,dy is larger than the image, the whole image will be background to the next object.
  • Ejemplo: imagefill_tile Ejemplo: imagefill_scale

imagepalette ↑

imagepalette image1,image2,image3,...

input ↑

input x,y,size,editable,value
  • 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
    override this by keyword status
  • may be further controlled by css
  • if mathml inputfields are present and / or some userdraw is performed, these data will not be send as well (javascript:read_canvas();)
  • use keyword xoffset | centered if the inputfield should be centered on (x:y)
    default is the left top corner is (x:y)
  • if the student must place an inputfield(s) somewhere on the canvas, use command userdraw input,color or make use of a command like userdraw text,color
  • Ejemplo: input

intooltip ↑

intooltip link_text
  • link_text is a single line (span-element)
  • link_text may also be an image URL http://some_server/images/my_image.png or $module_dir/gifs/my_image.jpg
  • link_text may contain HTML markup
  • the canvas will be displayed in a tooltip on link_text
  • the canvas is default transparent: use command bgcolor color 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
    and are therefore these commands are mutually exclusive.
    keep this in mind...
  • Ejemplo: intooltip

jscurve ↑

jscurve color,formula1(x),formula2(x),formula3(x),...
  • alternative command: jsplot
  • your function will be plotted by the javascript engine of the client browser
  • if trange is defined, the two functions will be plotted parametric
    note: use x as variable...and not t. Use keyword animate to animate a point on the curve
  • use only basic math in your curve: sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e
  • use parenthesis and rawmath: use 2*x instead of 2x ; use 2^(sin(x))...etc etc (use error console to debug any errors...)
  • attention: 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:
    use command zoom color for mouse driven zooming
    or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax
  • zooming & panning is better than for curves produced by command curve color,formula 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 animate for animating a point on the curve
  • use command trace_jscurve formula(x) for tracing
  • use command jsmath formula(x) for calculating and displaying indiviual points on the curve
  • can not be set draggable / onclick (yet)
  • commands plotjump / plotstep are not active for jscurve
  • every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
  • plotting multiple js-curves on the same canvas (for example if you want to use 'userdraw clickfill,color' on canvastype number 111, use:
    jscurve red,fun1(x),fun2(x)...fun_n(x), you must specify individual multistrokecolors & multistrokeopacity & multilinewidth for these multiple js-curves to use different colors. Otherwise all curves will be the same color... Use commands like: multistrokecolors, multilinewidth, multidash, multistroke, color given for the command jscurve color,formulas(x) will not be used in that case... but the color argument must still be given in any case (otherwise syntax error...)
  • Ejemplo: jscurve

jsmath ↑

jsmath some_math_function
  • 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.
    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 formula's of the plotted function(s) can be found in the page javascript source
  • Ejemplo: jsmath

kill ↑

kill arguments
  • arguments may be: affine linear translation rotation slider offset reset
  • for documentation see: killaffine,killlinear,killtranslation...
  • multiple arguments are allowed (although not checked for validity...)

killaffine ↑

killaffine
  • keyword: resets the transformation matrix to 1,0,0,1,0,0
  • note: any active linear transformation will also be reset: tx=0, ty=0

killlinear ↑

killlinear
  • keyword: resets the transformation matrix to 1,0,0,1,tx,ty
  • note:any active transformation or rotation will not be killed (tx,ty remain active)

killrotate ↑

killrotate
  • will set the rotation angle to 0.
  • will also reset the command rotationcenter to the first (x;y) of the next rotatable/slidable object(s)
    eg a following rotate command will have the first object point as rotation center
  • if not set, the rotation center will remain unchanged
  • note:any active transformation or linear will not be killed (e.g an active transformation matrix remains active)
  • Ejemplo: killrotate

killslider ↑

killslider
  • keyword (no arguments required)
  • ends grouping of object under a previously defined slider

killtranslation ↑

killtranslation
  • alternative command: killtranslate
  • note: a active linear or affine transformation will not be 100% reset...only tx=0,ty=0
  • resets the translation matrix a,b,c,d,tx,ty to a,b,c,d,0,0

latex ↑

latex x,y,tex string
  • alternative command: math
  • note: for a single greek letter ,please be smart and use a command like string along with unicode !!
    possibly together with command xoffset, yoffset or xyoffset
    See https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode
    See https://en.wikipedia.org/wiki/Greek_script_in_Unicode
  • you may also use command mathml for xml strings generated with wims commmand mathmlmath (will not work on KaTeX enabled WIMS)
  • transformation commands affine, translation and rotate are supported.(onclick and drag will work)
  • can be set onclick: javascript:read_dragdrop(); will return click numbers of mathml-objects
    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:javascript:read_dragdrop(); 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 slider
  • snaptogrid is supported
  • when clicked, the colour of the 'div background' of the 'mathobject' will be determined by the fillcolor and opacity settings
  • userdraw may be combined with 'latex' ; the js-function 'read_canvas()' will contain the coordinates of the drawing.
  • userdraw may be combined; the read_canvas() will contain the drawing.
  • draggable or onclick 'external images' from command copy or copyresized and all objects from commands html or obabel 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')
    the user_input values will be read by javascript:read_mathml();. attention: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
  • 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 centered to center the katex div object on (x1:y1)
    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} rac{1}{pi}
    (if your wims_mathml does not support it...use this version...)
  • 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)
  • Ejemplo: latex_drag Ejemplo: latex

lattice ↑

lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color

linear ↑

linear a,b,c,d
  • defines a transformation matrix for subsequent objects
  • use keyword killlinear to end the transformation...the next objects will be drawn in the original x/y-range
  • a: Scales the drawings horizontally
  • b: Skews the drawings horizontally
  • c: Skews the drawings vertically
  • d: Scales the drawings vertically
  • the data precision may be set by preceding command precision int
  • note: any active translation (tx,ty) is not changed
  • Ejemplo: linear

line ↑

line x1,y1,x2,y2,color
  • draw a line through points (x1:y1)--(x2:y2) in color color
  • or use command curve color,formula to draw the line (uses more points to draw the line; is however better draggable)
  • may be set draggable / onclick
  • Ejemplo: line

lines ↑

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
    (uses more points to draw the line; is however better draggable)
  • may be set draggable / onclick
  • attention: the flydraw command lines is equivalent to canvasdraw command polyline
  • Ejemplo: lines

linewidth ↑

linewidth int

levelcurve ↑

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 not to be compared with the Flydraw levelcurve.
    (choose flydraw if you want quality...)
  • every individual level curve may be set 'onclick / drag xy'
    e.g. every single level curve (l1,l2,l3...l_n) has a unique identifier
  • note: the arrays for holding the javascript data are limited in size
  • note: reduce image size if javascript data arrays get overloaded
    (command 'plotsteps int' will not control the data size of the plot...)
  • Ejemplo: levelcurve

legend ↑

legend string1:string2:string3....string_n
  • will be used to create a legend for a graph
  • also see command piechart
  • will use the same colors per default as used in the graphs; use command legendcolors to override the default
  • use command fontsize to adjust. (command fontfamily is not active for command legend)
  • Ejemplo: legend

legendcolors ↑

legendcolors color1:color2:color3:...:color_n
  • will be used to color a legend: use this command after the legend command ! e.g. legend test1:test2:test3
    legendcolors blue:red:orange    .
  • 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)
  • Ejemplo: legendcolors

linegraph ↑

linegraph x1:y1:x2:y2...x_n:y_n
  • will plot your data in a graph
  • may only to be used together with command grid
  • can be used together with freestyle x-axis/y-axis texts: see commands xaxis,xaxisup and yaxis
  • use command legend to provide an optional legend in right-top-corner
  • also see command piechart
  • multiple linegraphs may be used in a single plot
  • note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
    • use command strokecolor before a command linegraph to set the color of this graph
    • use command linewidth before command linegraph to set linewidth of this graph
    • use keyword dashed before command linegraph to set dashing of the graph
    • if dashing is set, use command dashtype before command linegraph to set the type of dashing of the (individual) graph
  • Ejemplo: linegraph

mathml ↑

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 latex
  • can be set onclick and drag&drop
    Note: dragging is fairly primitive dragging of the div-element, and is not done using the dragstuff library
  • command affine will produce CSS3 matrix transformations
  • command rotate will rotate the object
  • the mathml object is centered at (x1:y1)
  • the mathml_string can be produced using WIMS commands like texmath followed by mathmlmath... or write correct TeX and use only mathmlmath
  • mathml will be displayed in a rectangle left top (x1:y1)
  • can be set onclick javascript:read_dragdrop(); will return click numbers of mathml-objects; 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: javascript:read_dragdrop() will return all coordinates in same order as the canvas script: unmoved objects will have their original coordinates...
  • snaptogrid is supported...snaptopoints will work, but use with care... due to the primitive dragging. Technically: the dragstuff library is not used... the mathml is embedded in a new div element and not in the html5-canvas.
  • when clicked, the mathml object will be drawn in red color; the div background color will be determined by the fillcolor and opacity settings.
  • userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing.
  • draggable or onclick 'external images' from command copy or copyresized 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')
    the user_input values will be read by javascript:read_mathml();
    attention: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
  • 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 centered to center the mathml/xml object on (x1:y1)
  • Ejemplo: mathml_onclick Ejemplo: mathml_drag

mouse ↑

mouse color,fontsize
  • will display the cursor (x:y) coordinates in color and fontsize using default fontfamily Arial
  • note: use command mouse at the end of your script code (the same is true for command zoom)
  • Ejemplo: mouse

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'
    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')
  • Ejemplo: mouse_degree

display ↑

display TYPE,color,fontsize
  • TYPE may be x | y | xy | degree | radian | radius
  • will display the mouse cursor coordinates as x-only,y-only,(x:y), the radius of a circle (this only in case 'userdraw circle(s),color') or the angle in degrees or radians for commands userdraw arc,color or protractor, ruler (if set dynamic).
  • use commands xunit and / or yunit to add the units to the mouse values. The degree | radian will always have the appropriate symbol).
  • just like commands mouse, mousex, mousey, mouse_degree... only other name
  • Ejemplo: display_x Ejemplo: display_y Ejemplo: display_xy Ejemplo: display_deg Ejemplo: display_rad Ejemplo: display_radius

precision ↑

precision int
  • 1 = no decimals ; 10 = 1 decimal ; 100 = 2 decimals etc
  • may be used / changed before every object
  • In case of user interaction (like userdraw or multidraw), this value will be used to determine the amount of decimals in the reply / answer
  • Ejemplo: precision

mousex ↑

mousex color,fontsize
  • will display the cursor x-coordinate in color and font size using the fontfamily Arial.
  • note: use command mouse at the end of your script code (the same is true for command zoom).

mousey ↑

mousey color,fontsize
  • will display the cursor y-coordinate in color and font size using default fontfamily Arial.
  • note: use command mouse at the end of your script code (the same is true for command zoom).

multidash ↑

multidash 0,1,1
  • meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like multifill points,circle,segments, are dashed
  • use before command multidraw
  • 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
    (e.g. command dashtype line_px,space_px will give no control over multidraw objects)
  • wims will not 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

multidraw ↑

multidraw obj_type_1,obj_type_2...obj_type_11
  • for simple single object user drawings you could also use command userdraw
  • implemented obj_types:
    • point | points
    • circle | circles
    • line | lines
    • segment | segments
    • arrow | arrows (use command 'arrowhead int' for size (default value 8 pixels))
    • curvedarrow | curvedarrows
    • rect | rects
    • closedpoly
      only one 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)
    • triangle | triangles
    • parallelogram | parallelograms
    • poly[3-9] | polys[3-9] draw 3...9 point polygone(s): polys3 is of course triangles
    • images
    • crosshair | crosshairs
    • function
      for more function user input fields, use it multiple times
      for 4 inputfields use : multidraw function,function,function,function
  • additionally objects may be user labelled, using obj_type text...
    in this case allways a text input field and if multiuserinput=1 also (x:y) inputfields will be added to the page.
    use commands fontfamily and fontcolor to adjust (command multistrokeopacity may be set to adjust text opacity)
    note: text is always centered on the mouse-click or user-input coordinates !
    note: no keyboard listeners are used
  • it makes no sense using something like multidraw point,points ...
    something like "multidraw polys4,polys7" will only result in drawing a 4 point polygone and not a 7 point polygone: this is a design flaw and not a feature...
  • note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise)
    to overrule use command/keyword "status" (no arguments required)
  • buttons for changing the obj_type (and in case of multiuserinput, some inputfields and buttons)
    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).
    If you want a different label (e.g. an other language), use command multilabel
    for example in dutch:
    multilabel cirkel,lijnstuk,punten,STOP
    multidraw circle,segment,points
    (see command multilabel 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.
    this in contrast to the command userdraw.
  • wims will not check the amount or validity of your command arguments !
    ( use javascript console to debug any typo's )
  • a local function read_canvas%d will read all userbased drawings.
    The output is always a 16 lines string with fixed sequence.
    line 1 = points_x+";"+points_y+" "
    line 2 = circles_x+";"+circles_y+";"+multi_radius+" "
    line 3 = segments_x+";"+segments_y+" "
    line 4 = arrows_x+";"+arrows_y+" "
    line 5 = lines_x+";"+lines_y+" "
    line 6 = triangles_x+";"+triangles_y+" "
    line 7 = polys[3-9]_x+";"+polys[3-9]_y+" "
    line 8 = rects_x +";"+rects_y+" "
    line 9 = closedpoly_x+";"+closedpoly_y+" "
    line 10 = parallelogram_x+";"+parallelogram_y" "
    line 11 = text_x+";"+text_y+";"+text" "
    line 12 = image_x+";"+image_y+";"+image_id
    line 13 = curvedarrows_x +";"+ curvedarrows_y +" "
    line 14 = curvedarrows2_x +";"+ curvedarrows2_y +" "
    line 15 = crosshairs_x +";"+ crosshairs_y +" "
    line 16 = userdraw_x +";"+userdraw_y + " " note: this is for single userdraw object,color and replyformat 29
    line 17 = userdraw_x +";"+userdraw_y +";"+userdraw_radius + " " note: this is for single userdraw object,color and replyformat 29
    The x/y-data are in x/y-coordinate system and display precision may be set by a previous command precision 0 | 10 | 100 | 1000...
    In case of circles the radius is -for the time being- rounded to pixels
    use the wims "direct exec" tool to see the format of the reply
  • It is best to prepare / format the student reply in clientside javascript.
    However in wims language you could use something like this
    for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)
    note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25
    rep = !line 7 of reply
    rep = !translate ';' to ' ' in $rep
    pts = 5 # 5 points for polygon
    x_rep = !line 1 of $rep
    y_rep = !line 2 of $rep
    tot = !itemcnt $x_rep
    num_poly = $[$tot/$pts]
    idx = 0
    !for p=1 to $num_poly
     !for s=1 to $pts
      !increase idx
      X = !item $idx of $x_rep
      Y = !item $idx of $y_rep
      # do some checking
     !next s
    !next p
  • attention: for command argument closedpoly, only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.
  • technical: all 10 draw primitives + text will have their own -transparent- PNG bitmap canvas.
    So for example there can be a points_canvas entirely separated from a line_canvas.
    This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn), this in contrast too many very slow do-it-all HTML5 canvas javascript libraries.
    The mouselisteners are attached to the canvas-div element.
  • a special object type is images.
    if used together with imagepalette a image table will be integrated in the 'control section' of multidraw (set multiuserinput 1 for images) if not used with imagepalette, 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:
    <img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" />
    <img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" />
    etc ... when activating the multidraw image button, the images can be selected
    (left mouse button/onclick) and placed on the canvas...left mouse click.
    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...
    To activate this feature, use multilabel NOCONTROLS
    The object types are internally represented by the following numbers (making typos will render your exercise null and void)
    point = 0
    points =1
    circle = 2
    circles = 3
    line = 4
    lines = 5
    segment = 6
    segments = 7
    arrow = 8
    arrows = 9
    triangle = 10
    triangles = 11
    closedspoly = 12
    text = 13
    rect = 14
    rects = 15
    poly[3-9] = 16
    polys[3-9] = 17
    parallelogram = 18
    parallelograms = 19
    images = 20
    curvedarrow = 21
    curvedarrows = 22
    curvedarrow2 = 23
    curvedarrows2 = 24
    crosshair = 25
    crosshairs = 26
    controls for example:
    <input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' />
    <input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' />
    <input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' />
    If using multiple canvas scripts in a single page, loop through the canvas_scripts[n]
    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')
    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"
  • Ejemplo: multidraw_function Ejemplo: multidraw Ejemplo: multidraw_images Ejemplo: multidraw_demo Ejemplo: multidraw_NOCONTROLS

multilabel ↑

multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'
  • use before command multidraw
  • 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 must be the last item on the multilabel -list
    for example:
    multilabel punten,lijnen,Stop met Tekenen
    multidraw points,lines
  • all buttons can be styled by using command css
    note:If you want to add some CSS style to the buttons...
    the id's of the draw buttons are their english command argument
    (e.g. id="canvasdraw_points" for the draw points button).
    the id of the stop drawing button is "canvasdraw_stop_drawing".
    the id of the "OK" button is canvasdraw_ok_button
  • 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 multilabel NOCONTROLS

multilinewidth ↑

multilinewidth linewidth_1,linewidth_2,...,linewidth_8
  • use before command multidraw
  • if not set all line widths will be set by a previous command linewidth int
  • use these up to 7 different line widths for the draw primitives used by command multidraw obj_type_1,obj_type_2...obj_type_7
  • wims will not 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

multifill ↑

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
    meaning: first object is not filled...second object is solid color filled...2=grid | 3=hatch | 4=diamond | 5=dot
  • use before command multidraw
  • if not set all objects -except point|points- will be set not filled... unless a command filled was given before command multifill
  • only suitable for draw_primitives like circle | circles, triangle | triangles, rect | rects, poly[3-9] | polys[3-9] and polygon
  • wims will not 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

multifillcolors ↑

multifillcolors color_name_1,color_name_2,...,color_name_8
  • use before command multidraw
  • if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be stroke_color, fill_opacity
  • use these up to 6 colors for the draw primitives used by command multidraw obj_type_1,obj_type_2...obj_type_n
  • wims will not 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 userdraw clickfill,color when more than one fillcolor is wanted.
    in that case use for example replyformat 10 ... reply=x1:y1:color1,x2:y2:color2...
    the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors
    if more control over the used colours is wanted, see command colorpalette color1,color2...

multifillopacity ↑

multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8
  • float values 0 - 1 or integer values 0 - 255
  • use before command multidraw
  • if not set all fill opacity_ will be set by previous command opacity int,int and keyword filled
  • use these up to 7 different stroke opacities for the draw primitives used by command multidraw obj_type_1,obj_type_2...obj_type_y
  • wims will not check the amount or validity of your input
  • always use the same sequence as is used for multidraw

multisnaptogrid ↑

multisnaptogrid 0,1,1
  • alternative command: multisnap
  • meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like multifill points,circle,segments, will snap to the xy-grid (default 1 in x/y-coordinate system: see command snaptogrid)
  • freehand drawing...specify precision for reply: all objects snap to grid multisnaptogrid 1,1,1,...
  • only the xy-values snap_to_grid: all objects snap to grid multisnaptogrid 1,1,1,...
  • only the x-values snap_to_grid: all objects snap to x-grid multisnaptogrid 2,2,2,...
  • only the y-values snap_to_grid: all objects snap to y-grid multisnaptogrid 3,3,3,...
  • if snaptopoints is defined: all objects snap to points multisnaptogrid 4,4,4,...
    make sure to define the points to snap on... use command snaptopoints
  • multisnaptogrid 0,1,2,3,4
    multidraw text,arrow,line,circle,image
    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 snaptopoints
  • use before command multidraw
  • attention: if not set all objects will be set no snap... unless a generic command snaptogrid was given before command multidraw
  • commands xsnaptogrid, ysnaptogrid, snaptofunction are not supported amd only functional for command userdraw
  • always use the same sequence as is used for multidraw
  • wims will not check if the number of 0 or 1's matches the amount of draw primitives...

multistrokecolors ↑

multistrokecolors color_name_1,color_name_2,...,color_name_8
  • use before command multidraw
  • if not set all colors will be stroke_color, stroke_opacity
  • use these up to 6 colors for the draw primitives used by command multidraw obj_type_1,obj_type_2...obj_type_7
  • wims will not check if the number of colours matches the amount of draw primitives...
  • always use the same sequence as is used for multidraw

multistrokeopacity ↑

multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7
  • float values 0 - 1 or integer values 0 - 255
  • use before command multidraw
  • if not set all stroke opacity_ will be set by previous command opacity int,int
  • use these up to 7 different stroke opacities for the draw primitives used by command multidraw obj_type_1,obj_type_2...obj_type_7
  • wims will not check the amount or validity of your input
  • always use the same sequence as is used for multidraw

multiuserinput ↑

multiuserinput 0,1,1,0
  • alternative command: multiinput
  • meaning, when the command multidraw is used multidraw circles,points,lines,triangles
    objects points and lines may additionally be drawn by direct input (inputfields)
    all other objects must be drawn with a mouse
  • in case of circle | circles a third inputfield for Radius (R) is added. The radius must be in the x/y coordinate system (x-range) and not in pixels...students don't think in pixels.
    note: R-values will not snap-to-grid
  • in case of line(s) | segment(s) | arrow(s) the user should write x1:y1 in the first inputfield and x2:y2 in the second.
    These hints are pre-filled into the input field.
    Other coordinate delimiters are ; and , e.g. x1;y1 or x1,y1.
    An error message (alert box) will popup when things are not correctly...
  • 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 css
  • 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.
    To override this default behaviour use command / keyword status
  • use before command multidraw
  • always use the same sequence as is used for multidraw

noreset ↑

noreset
  • alternative command: killreset
  • keyword
  • may come in handy if canvas script code is generated using loops
  • if used the following properties will remain to be valid
    • filled
    • dash settings
    • onclick or drag settings
    • centering or offset
  • 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 slider, linear, rotate, translate, affine are always active until the 'kill' commands are given:
    killlinear, killrotate, killtranslate and killaffine
  • commands like 'opacity', 'linewidth', 'fontsize', 'fontfamily' are only changed when redefined again
  • Ejemplo: noreset Ejemplo: noreset_oefgraduation

noxaxis ↑

noxaxis
  • keyword
  • if set, the automatic x-axis numbering will be ignored
  • use command axis to have a visual x/y-axis lines (see command grid)
  • to be used before command grid (see command grid)

noyaxis ↑

noyaxis
  • keyword
  • if set, the automatic y-axis numbering will be ignored
  • use command axis to have a visual x/y-axis lines (see command grid)
  • to be used before command grid (see command grid)

numberline ↑

numberline x0,x1,xmajor,xminor,y0,y1
  • numberline is using xrange/yrange system for all dimensions
  • multiple numberlines are allowed ; combinations with command grid is allowed; multiple commands xaxis numbering are allowed
  • x0 is start x-value in xrange
  • x1 is end x-value in xrange
  • xmajor is step for major division
  • xminor is divisor of xmajor; using small (30% of major tick) tick marks: this behaviour is hardcoded
  • is xminor is an even divisor, an extra tickmark (60% of major tick) is added to the numberline: this behaviour is hardcoded
  • y0 is bottom of numberline; y1 endpoint of major tics
  • use command linewidth to control appearance
  • use strokecolor and opacity to controle measure line
  • for all ticks linewidth and color / opacity are identical.
  • if command xaxis or xaxisup is not defined, the labeling will be on major ticks: x0...x1
  • use fontfamily and fontcolor to control fonts settings
  • may be used together with userdraw, multidraw and user drag command family for the extra object drawn onto the numberline
  • snaptogrid, snaptopoints etc and zooming and panning is supported
  • onclick and dragging of the numberline are not -yet- supported
  • note: in case of multiple numberlines, make sure the numberline without special x-axis numbering (e.g. ranging from xmin to xmax) comes first !
  • Ejemplo: numberline

obabel ↑

obabel x,y,type input,molecule smiles-code or file location, extra arguments,extra arguments,...
  • will call the obabel program, if installed.
  • output will be an svg file
  • see documentation of obabel for special keys
  • command affine will produce CSS3 matrix transformations
  • command rotate will rotate the object
  • can be set onclick: javascript:read_dragdrop(); will return click numbers of mathml-objects
    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: javascript:read_dragdrop(); 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
    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
    for example:
    obabel 0,0,mol,$module_dir/caffeine.mol,-P100,-xb none
  • Ejemplo: obabel_smi

opacity ↑

opacity [0-255],[0-255]
  • opacity [0.0 - 1.0],[0.0 - 1.0]
  • alternative command: transparent
  • first item is stroke opacity, second is fill opacity
  • Ejemplo: opacity

onclick ↑

onclick
  • keyword (no arguments required)
  • if the next object is clicked, its object onclick_or_drag sequence number in fly script is returned by javascript:read_canvas();
  • 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
    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 drag x|y|xy may be combined in a single flyscript (although a single object can not be onclick and draggable at the same time...)
  • note: not all objects may be set onclick
  • Ejemplo: onclick

parallel ↑

parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]
  • affine transformations should be identical to flydraw
  • in case of rotation or affine transformation , command parallel will produce n individual segments, and these may be set onclick or drag xy individually.
  • in case of no rotation or transformations the lines can not be set onclick or drag xy.
  • note: a large number of parallel lines (large n) may result in a canvasdraw error (...simplify your script...it produces too many lines...)
  • Ejemplo: parallel_click Ejemplo: parallel

plotsteps ↑

plotsteps a_number

point ↑

point x,y,color
  • draw a single point at (x;y) in color 'color'
  • use command linewidth int to adjust size
  • may be set draggable / onclick
  • will not resize on zooming (command circle x,y,r,color will resize on zooming)
  • attention: in case of command rotate angle a point has rotation center (0:0) in x/y-range
  • Ejemplo: point

points ↑

points color,x1,y1,x2,y2,...,x_n,y_n

poly ↑

poly color,x1,y1,x2,y2...x_n,y_n

polyline ↑

polyline color,x1,y1,x2,y2...x_n,y_n
  • brokenline color,x1,y1,x2,y2...x_n,y_n
  • path color,x1,y1,x2,y2...x_n,y_n
  • remark: there is no command polylines | brokenlines | paths ... just use multiple commands polyline, x1,y1,x2,y2...x_n,y_n
  • remark: there are commands userdraw path(s),color and userdraw polyline,color... these are two entirely different things ! the path(s) userdraw commands may be used for freehand drawing(s)
    the polyline userdraw command is analogue to this polyline|brokenline command
  • the command interconnects the points in the given order with a line (canvasdraw will not close the drawing: use command polygon for this)
  • use command segments for a series of segments. These may be clicked/dragged individually
  • may be set draggable / onclick
  • Ejemplo: polyline_1 Ejemplo: polyline_2
popup
  • keyword (no arguments)
  • 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 size xsize,ysize 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 nostatus
  • to access the read_canvas and read_dragdrop functions in a popup window, use:
    function read_all(){
    if( typeof popup !== 'undefined' ){
    var fun1 = popup['read_dragdrop'+canvas_scripts[0]];
    var fun2 = popup['read_canvas'+canvas_scripts[0]];
    popup.close();
    return "dragdrop="+fun1()+" canvas="+fun2();
    };
  • to set a canvasdraw produced clock or multiple clocks...use something like: popup.set_clock(clock_id,type,diff); as js-function for a button (or something else) in your document page.
    where in clock_id starts with 0 for the first clock
    type is 1 for Hours,2 for Minutes and 3 for Seconds
    diff is the increment (positive or negative) per click
  • Ejemplo: popup

protractor ↑

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
    type = 2: a circle shape 0 - 360
  • mode: use -1 to set the protractor interactive (mouse movement of protractor)
    use mode = '0° - 360°' to set the protractor with a static angle of some value
  • if the value of the user_rotation angle is to be shown...use command display degree,color,fontsizedisplay radian,color,fontsize
  • 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
    use command precision to set the reply precision.
  • if combined with a ruler, use replyformat = 32
  • command snap_to_grid may be used to assist the pupil at placing the protractor
  • when using command zoom, pay attention to the size and symmetry of your canvas
    ...to avoid a partial image, locate the start position near the center of the visual canvas
    technical: the actual protractor is just a static generated image in a new canvas-memory
    This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas.
    That is the reason for the high-speed dragging and rotating.
    I've limited its size to xsize × ysize e.g. the same size as the visual canvas...
  • only one protractor allowed (for the time being)
  • usage: first left click on the protractor will activate dragging;
    a second left click will activate rotating (just move mouse around)
    a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3)
    a next click will restart this sequence...
  • Ejemplo: protractor

pixels ↑

pixels color,x1,y1,x2,y2,x3,y3...
  • draw rectangular "points" with diameter 1 pixel
  • pixels can not be dragged or clicked
  • "pixelsize = 1" may be changed by command pixelsize int
  • Ejemplo: pixels

pixelsize ↑

pixelsize int
  • in case you want to deviate from default pixelsize = 1(...)
  • pixelsize 100 is of course a filled rectangle 100px × 100px

piechart ↑

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
    canvasdraw will not check validity of colornames...
    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 fillpattern some_pattern then the pie pieces will be filled with the respective color and a fill pattern...
    the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,...
  • use command opacity to adjust fill_opacity of colours
  • use command legend 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...
    use command fontfamily to set the font of the legend.
  • use command centered to place legend text inside the piechart. The text is using the same color as the pie segment: use (fill) opacity to enhance visibility.
  • Ejemplo: piechart_1 Ejemplo: piechart_2

range ↑

range xmin,xmax,ymin,ymax
  • if not given: 0,xsize,0,ysize (eg in pixels)

rays ↑

rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n

rect ↑

rect x1,y1,x2,y2,color
  • use command frect x1,y1,x2,y2,color for a filled rectangle
  • use command/keyword filled before command rect x1,y1,x2,y2,color
  • may be set draggable / onclick
  • note: internally a rect is defined with 4 points. So when performing some affine transformation, other than translation, it will result in some morphing of the rectangle !
    this is a deviation of flydraw's rect&affine
  • Ejemplo: rect

rects ↑

rects color,x1,y1,x2,y2,.....
  • use command frect color,x1,y1,x2,y2,..... for a filled rectangle
  • use command/keyword filled before command rects color,x1,y1,x2,y2,....
  • use command fillcolor color before frects to set the fill colour.
  • may be set draggable / onclick individually
  • Ejemplo: rects

replyformat ↑

replyformat number
  • use number=-1 to deactivate the js-functions read_canvas() and read_dragdrop()
  • default values should be fine !
  • use command precision [0,1,10,100,1000,10000...] 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
    • replyformat 1: x1,x2,x3,x4....x_n
      y1,y2,y3,y4....y_n       x/y in pixels
    • replyformat 2: x1,x2,x3,x4....x_n
      y1,y2,y3,y4....y_n       x/y in xrange / yrange coordinate system
    • replyformat 3: x1,x2,x3,x4....x_n
      y1,y2,y3,y4....y_n
      r1,r2,r3,r4....r_n       x/y in pixels, r in pixels
    • replyformat 4: x1,x2,x3,x4....x_n
      y1,y2,y3,y4....y_n
      r1,r2,r3,r4....r_n       x/y in xrange / yrange coordinate system, r in pixels
    • replyformat 5: Ax1,Ax2,Ax3,Ax4....Ax_n
      Ay1,Ay2,Ay3,Ay4....Ay_n
      Bx1,Bx2,Bx3,Bx4....Bx_n
      By1,By2,By3,By4....By_n
      Cx1,Cx2,Cx3,Cx4....Cx_n
      Cy1,Cy2,Cy3,Cy4....Cy_n
      ....
      Zx1,Zx2,Zx3,Zx4....Zx_n
      Zy1,Zy2,Zy3,Zy4....Zy_n       x/y in pixels
    • replyformat 6: Ax1,Ax2,Ax3,Ax4....Ax_n
      Ay1,Ay2,Ay3,Ay4....Ay_n
      Bx1,Bx2,Bx3,Bx4....Bx_n
      By1,By2,By3,By4....By_n
      Cx1,Cx2,Cx3,Cx4....Cx_n
      Cy1,Cy2,Cy3,Cy4....Cy_n
      ....
      Zx1,Zx2,Zx3,Zx4....Zx_n
      Zy1,Zy2,Zy3,Zy4....Zy_n       x/y in xrange / yrange coordinate system
    • replyformat 7: x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n x/y in pixels
    • replyformat 8: x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n x/y in xrange / yrange coordinate system
    • replyformat 9: x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n x/y in pixels
    • replyformat 10: x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n x/y in xrange / yrange coordinate system
    • replyformat 11: Ax1,Ay1,Ax2,Ay2
      Bx1,By1,Bx2,By2
      Cx1,Cy1,Cx2,Cy2
      Dx1,Dy1,Dx2,Dy2
      ......
      Zx1,Zy1,Zx2,Zy2       x/y in xrange / yrange coordinate system
    • replyformat 12: Ax1,Ay1,Ax2,Ay2
      Bx1,By1,Bx2,By2
      Cx1,Cy1,Cx2,Cy2
      Dx1,Dy1,Dx2,Dy2
      ......
      Zx1,Zy1,Zx2,Zy2       x/y in pixels
    • replyformat 13: Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2 x/y in xrange / yrange coordinate system
    • replyformat 14: Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2 x/y in pixels
    • replyformat 15: reply from inputfields,textareas reply1,reply2,reply3,...,reply_n
    • replyformat 16: mathml input fields
    • replyformat 17: read userdraw text,color only x1,y1,text1 x2,y2,text2... ...x_n,y_n,text_n x/y-values are in xrange/yrange
    • replyformat 18: read_canvas() will read all interactive clocks in H1:M1:S1,H2:M2:S2...Hn:Mn:Sn
    • replyformat 19: read_canvas() will return the object number of marked / clicked object (clock), analogue to (shape library) onclick command
    • 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)
    • replyformat 21: (x1:y1) (x2:y2) ... (x_n:y_n) verbatim coordinate return
    • replyformat 22: returns an array .... reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n x/y in xrange / yrange coordinate system
    • 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 x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn; multiple occurences will be filtered out. The reply will be in x-y-range (xreply yreply)
    • replyformat 24: read all inputfield values: even those set readonly
    • replyformat 25: angle1,angle2;...;angle_n will return the radius (one or many) of the user drawn circle segment in degrees
    • replyformat 26: rad1,rad2,...rad_n will return the radius (one or many) of the user drawn circle segment in radians
    • replyformat 27: return (only) userdraw inputfields x1,y1,text1
      x2,y2,text2...
      ...x_n,y_n,textn
    • replyformat 28: x1,y1,r1,x2,y2,r2...x_n,y_n,r_n x / y / r in xrange / yrange coordinate system: may be used to reinput into command circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n will not return anything else (e.g. no inputfields, text etc)
    • replyformat 34: a special for OEF and dragging external images -included via commands copy or copyresized there will be an extra function read_canvas_images() for reading the coordinates of the images.
      for now this is a unique function, e.g. there is no canvas id linked to it. (TO DO !!! 18/5/2019)
  • special replyformat = 100 ; will access to the raw javascript object data...use: read_dragdrop([property,property,...])
    for example properies like 'clicked','text', 'angle' , 'x'

roundrect ↑

roundrect x1,y1,x2,y2,radius in px,color
  • use command froundrect x1,y1,x2,y2,radius,color for a filled rectangle
  • use command/keyword filled before command roundrect x1,y1,x2,y2,radius,color
  • fillcolor will be identical to color
  • may be set draggable / onclick
  • Ejemplo: roundrect

roundrects ↑

roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....

ruler ↑

ruler x,y,x-width,y-height,mode
  • 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)
    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 attention to the size and symmetry of your canvas to avoid a partial image, locate the start position near the center of the visual canvas; technical: the actual ruler is just a static generated image in a new canvas-memory. This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas. That is the reason for the high-speed dragging and rotating. I have limited its size to xsize × ysize e.g. the same size as the visual canvas...
  • usage: first left click on the ruler will activate dragging; a second left click will activate rotating (just move mouse around), a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3), a next click will restart this sequence...
  • Ejemplo: ruler_interactive Ejemplo: ruler_set_degree_45 Ejemplo: ruler_set_degree_125

reset ↑

reset
  • keyword
  • disables the effects of the noreset command
  • so the next objects will not be filled and dashed

resetoffset ↑

resetoffset
  • keyword ; use to restore text placement on the canvas to the real (x;y) coordinates of the left bottom corner of the text
  • may be active for commands text and string (e.g. objects in the drag/drop/onclick-librariy

rotate ↑

rotate rotation_angle
  • 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...
    rotate 45
    triangle 1,1,5,1,3,4,red
    will rotate 45 degrees around point (1:1)
  • if another rotation center is needed, use command rotationcenter xc,yc.
    to reset this rotationcenter, use keyword killrotate
  • attention: rotate will mess up the interactivity of the rotated object
    e.g. if combined with command drag xy or keyword onclick: the mouse recognises the original -unrotated- coordinates of the object
  • Ejemplo: rotate_1

rotationcenter ↑

rotationcenter x_center,y_center
  • define an rotation center in your x/y-coordinate system
  • wims will not check the validity of your input; use javascript console to debug any erors
  • if not defined a rotation will be around the first point of an object
  • to be used before command rotate
  • use killrotate to reset to 'null'
    (eg. the rotationcenter of the next object(s) will be the first (x;y) coordinate of the object(s))
  • all other commands will use this rotation center, unless a killrotation is given
  • Ejemplo: rotationcenter Ejemplo: rotationcenter_slider

size ↑

size width,height
  • set canvas size in pixels
  • mandatory first command (can only be preceded by keyword popup)
  • if xrange and/or yrange is not given the range will be set to pixels:
    xrange 0,xsize yrange 0,ysize
    note: lower left corner is origin (0:0) !!! this in contrast to flydraw

segment ↑

segment x1,y1,x2,y2,color

segments ↑

segments color,x1,y1,x2,y2,...,x_n,y_n

setlimits ↑

setlimits
  • keyword: if set, it will produce 4 inputfields for xmin,xmax,ymin,ymax and an ok button
  • may be used for inputfield based zooming / panning
  • may be styled using command css
  • use commands xlabel / ylabel to change text from xmin to xlabel etc
  • note: the input value will not be checked on validity
  • Ejemplo: setlimits

setpixel ↑

setpixel x,y,color
  • A rectangular "point" with diameter 1 pixel centered at (x:y) in xrange / yrange
  • pixels can not be dragged or clicked
  • "pixelsize = 1" may be changed by command pixelsize int
  • Ejemplo: setpixel

slider ↑

slider start_value,end_value,width px,height px,type,label
  • 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)
    to use sliders without clicking on an object, use for type keyword active
    eg: slider -2*pi,2*pi,300,30,angle degree active,Rotate
  • 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
    use commands sliderfunction_x and/or sliderfunction_y before the slider command to define the functions. Example:sliderfunction_x x^2
    sliderfunction_y y^2
    slider -5,5,100,100,xy function,Some_Text
    ...some stuff to slide
    killslider
    sliderfunction_x x^2-2
    slider -15,15,100,10,x function,Some_Other_Text
    ...more stuff to slide
    killslider... etc
  • use command slider before draggable/clickable objects.
  • drag and drop may be combined with rotation slider
    for example an arrow rotated by a slider may be placed anywhere (drag&drop)
    size 300,300
    xrange -5,5
    yrange -5,5
    grid 1,1,grey
    linewidth 3
    drag xy
    fillcolor orange
    strokecolor blue
    slider 0,2*pi,250,30,angle degrees,Rotate arrow
    arrow 2,2,5,5,8,red
    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...
    and can be used to group translate / rotate several objects...
    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
  • javascript:read_dragdrop(); 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.
    Note: on KaTeX 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
  • use opacity (only fill opacity will be used) to set transparency
  • the slider canvas will be added to the tooltip div: so incompatible with command tooltip ; setlimits etc
  • Ejemplo: slider_x_y_angle Ejemplo: slider_click Ejemplo: slider_active Ejemplo: slider_animate Ejemplo: slider_html_image

sgraph ↑

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
    eg no other objects will obey this "coordinate system"
    if you want to place an object into this coordinate system, be aware that 10% or 20% of xsize and/or ysize is lost.
    Use these "formulas" to recalculate the virtual coordinates:
    factor=0.8 in case xstart != xmin (or ystart != ymin)
    factor=0.9 in case xstart = xmin (or ystart = ymin)
    px_x_point = ((factor*xsize)/(xmax - xstart))*(x_point - xmax)+xsize
    x_recalculated = px*(xmax - xmin)/xsize +
    px_y_point = -1*factor*y_point*ysize/(ymax - ystart) + ymax*factor*ysize/(ymax - ystart)
    y_recalculated = ymax - py*(ymax - ymin)/ysize
  • Ejemplo: sgraph

snaptofunction ↑

snaptofunction some_function_in_x,some_funtion_in_y
  • alternative command: snaptofun
  • the next object will snap to the calculated values
  • note: snaptofun is probably not really useful feature...
  • if you want only modification of y-values,just use: snaptofunction x,5*sin(1/y)
  • if you want only modification of x-values,just use: snaptofunction 5*sin(1/x),y
  • for now only one instance of snaptofunction is allowed
  • use rawmath on your functions: no validity checking is done by wims !
  • note: switching x and y coordinates? snaptofunction y,x
  • Ejemplo: snaptofunction_1 Ejemplo: snaptofunction_2

snaptopoints ↑

snaptopoints x1,y1,x2,y2,x3,y3....
  • a userdraw object will snap to these points.
  • the array size (e.g. the number of points) of command snaptopoints is limited by constant MAX_INT (canvasdraw.h)
    this command may be repeated multiple times (no limit) to add points
  • a draggable object (use command drag x|y|xy) will snap to the closed of these points when dragged (mouseup)
  • other options: use keyword snaptogrid, xsnaptogrid or ysnaptogrid
  • Ejemplo: snaptopoints Ejemplo: snaptopoints

snaptogrid ↑

snaptogrid
  • keyword (no arguments required)
  • a draggable object (use command drag x|y|xy) will snap to the given grid when dragged (mouseup)
  • 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
    use only even dividers in x/y-minor...for example snaptogrid
    axis
    grid 2,1,grey,4,4,7,red     will snap on x=0, x=0.5, x=1, x=1.5 .... will snap on y=0, y=0.25 y=0.5 y=0.75 ...
  • Ejemplo: snaptogrid_1 Ejemplo: snaptogrid_2

square ↑

square x,y,side (px),color
  • draw a square with left top corner (x:y) with side side in color 'color'
  • use command fsquare x,y,side,color for a filled square
  • use command/keyword filled before command square x,y,side,color
  • may be set draggable / onclick
  • Ejemplo: square

status ↑

status
  • keyword
  • alernative: nostatus
  • used to override the effects of status=done in wims (answer.phtml)
  • affects readonly in inputfields / textareas in canvasimage and all userdraw based commands
  • e.g.: if keyword status is set, the pupil will be able to modify the canvas when the wims $status variable is set to done

string ↑

string color,x,y,the text string

stringup ↑

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
    note: a clicked text string will be hardcoded : fontsize+10 in the font family courier
  • unicode supported: stringup red,0,0,45,\u2232
  • use a command like fontfamily bold 34px Courier to set fonts on browser that support font change
  • you could use keyword yoffset 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
    onclick
    rotate 45
    string red,0,0,AAAAAA
    killrotate
    string red,4,4,BBBBBB
    is identical with:
    onclick
    stringup red,0,0,45,AAAAAA
    string red,4,4,BBBBBB
  • super / sub script is supported, using '_' and '^'
    to end the subscript/supscript, use an extra space...see example:
  • Ejemplo: stringup_sub_sup Ejemplo: stringup

highlight ↑

highlight color,opacity,linewidth
  • NOT IMPLEMENTED
  • use command onclick: when the object receives a userclick it will increase its linewidth

strokecolor ↑

strokecolor colorname or #hex
  • to be used for commands that do not supply a color argument (like command linegraph)

text ↑

text fontcolor,x,y,font,text_string
  • font may be described by keywords: giant,huge,normal,small,tiny
  • use command fontsize to increase base fontsize for these keywords
  • may be set onclick or drag xy
  • backwards compatible with flydraw
  • 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 string combined with fontfamily for a more fine grained control over html5 canvas text element
  • super / sub script is supported, using '_' and '^'
    to end the subscript/supscript, use an extra space...see string command
  • Avoid mixing old flydraw commands text, textup with new canvasdraw commands string, stringup. If the fontfamily was set completely like fontfamily italic 24px Arial. In that case reset fontfamily to something lke fontfamily Arial before the old flydraw commands.
  • Ejemplo: text

textarea ↑

textarea x,y,cols,rows,readonly,value
  • may be further controlled by css
  • if $status=done (e.g. in answer.phtml) the inputfield will be cleared and set readonly. Override this by keyword status.
  • if mathml inputfields are present and / or some userdraw is performed, these data will not be send as well (javascript:read_canvas();)
  • keyword xoffset | centered is not active for command textarea
  • Ejemplo: textarea

textfill ↑

textfill x0,y0,color,some_text

textup ↑

textup fontcolor,x,y,font,text_string
  • can not be set onclick or drag xy (because of translaton matrix...mouse incompatible)
  • font may be described by keywords: giant,huge,normal,small,tiny
  • use command fontsize to increase base fontsize for the keywords
  • backwards compatible with flydraw
  • unicode supported: textup red,0,0,huge,\u2232
  • use command stringup and fontfamily for a more fine grained control over html5 canvas text element
  • Avoid mixing old flydraw commands text, textup with new canvasdraw commands string; stringup. If the fontfamily was set completely like fontfamily italic 24px Arial. In that case reset fontfamily to something like fontfamily Arial before the old flydraw commands.

trace_jscurve ↑

trace_jscurve some_math_function
  • will use a crosshair to trace the jsmath curve
  • two inputfields will display the current x/y-values (numerical evaluation by javascript)
  • 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.
    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
  • Ejemplo: trace_jscurve

trange ↑

trange tmin,tmax
  • alternative command: ranget
  • default -2,2

translation ↑

translation tx,ty
  • alternative command: translate
  • will translate the next objects tx in xrange and ty in yrange
  • use command killtranstation to end the command
  • Ejemplo: translation

triangle ↑

triangle x1,y1,x2,y2,x3,y3,color

triangles ↑

triangles color,x1,y1,x2,y2,x3,y3,...

userboxplot ↑

userboxplot
  • keyword, no arguments
  • use before command boxplot x_or_y,box-height_or_box-width,x_or_y-position
  • 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'
    define a variable called student_boxplot and fill it with the 5 student-data (from inputfields or something)
    var student_boxplot = new Array(5)
    function show_boxplot(){
    student_boxplot[0] = min;
    student_boxplot[1] = Q1;
    student_boxplot[2] = median;
    student_boxplot[3] = Q3;
    student_boxplot[4] = max;
    document.getElementById('boxplot').style.display = "block";
    draw_boxplot(12345,1,2.00,5.00,[0,0,0,0,0],4,"0,0,255",0.78,"255,165,0",0.60,1,0,1,1);
    };
    In the canvas-script the function draw_boxplot has the following arguments:
    draw_boxplot=function(canvas_type,xy,hw,cxy,data,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1)

userboxplotdata ↑

userboxplotdata
  • keyword, no arguments
  • use before command boxplot x_or_y,box-height_or_box-width,x_or_y-position
  • if set, the student will have to generate some statistical data. These data should be put in a named array student_boxplot_data
  • min,Q1,median,Q3,max are calculated by a js-function and the 'draw_boxplot' function will draw a boxplot.
  • see command userboxplot for calling 'draw_boxplot()'

userdraw ↑

userdraw object_type,color

userinput ↑

userinput function inputfield
  • alternative command: userinput_function
  • alternative command: userinput_xy
  • inputfield is only usable in combination with some userdraw draw_type
  • note: the input fields are not cleared after the object is drawn...be aware of multiple idential drawings (many clicks on the ok button)
  • userinput function may be used any time (e.g. without userdraw)
  • multiple userinput function commands may be used.
  • use command functionlabel some_string to define the inputfield text: default value "f(x)="
  • use command strokecolor some_color to adjust the plot / functionlabel color
  • use command css some_css to adjust the inputfields
  • use command fontsize int to adjust the label fonts. (default 12px)
  • the user input for the function will be corrected by a simple rawmath implementation...
    an error message will be shown if javascript can not interpret the user input
  • Ejemplo: userinput_function Ejemplo: userinput_points Ejemplo: userinput_arrows Ejemplo: userinput_combined

userinput_xy ↑

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
    (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)...)
    eval function is protected against code injection.
  • can not be combined with command intooltip tiptext
    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)
  • Ejemplo: userinput_xy

userinput_function ↑

userinput_function
  • alternative command: userinput
  • keyword (no arguments required)
  • 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 read_canvas().
    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,
    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
  • Ejemplo: userinput_function

vline ↑

vline x,y,color

vlines ↑

vlines color,x1,y1,x2,y2....

video ↑

video x,y,w,h,videofile location
  • x,y: left top corner of audio element (in xrange / yrange)
  • w,y: width and height in pixels
  • video format may be in *.mp4 (todo: other formats)
  • Ejemplo: video

xaxis ↑

xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
  • alternative command: xaxistext
  • usable for commands numberline and grid or combinations thereof
  • 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 axisnumbering
  • use command axis to have visual x/y-axis lines (see command grid
  • use command fontcolor, fontfamily to adjust font
    defaults: black,12,Arial
    note: command fontsize is not active for this command.(fontsize can be used for the legend in a grid)
  • 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 command grid)
  • xmajor steps should be synchronised with numbers eg. 1 in the next example grid 1,100,grey,1,4,6,grey
  • Ejemplo: xaxistext

xaxisup ↑

xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
  • alternative command: xaxistextup
  • the text will be rotated 90° up
  • no need to use keyword axisnumbering
  • use command axis to have visual x/y-axis lines (see command grid
  • use these x-axis num1...num_n values instead of default xmin...xmax
  • use command fontcolor, fontfamily to adjust font
    defaults: black,12,Arial
    note: command fontsize is not active for this command.(fontsize can be used for the legend in a grid)
  • a javascript error message will flag non-matching value:name pairs
  • if the x-axis words are too big, they will overlap the graph
    (in this case the text will start from ysize upwards)
  • to be used before command grid (see command grid)
  • xmajor steps should be synchronised with numbers eg. "1" in the next example grid 1,100,grey,1,4,6,grey
  • Ejemplo: xaxistextup

xerrorbars ↑

xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n
  • draw multiple points with x-errorbars E1 (error value left from point) and E2 (error value right from point) at given coordinates in color 'color'
  • the errors E1 and E2 values are in xrange.
  • use command linewidth int to adust size
  • may be set draggable / onclick individually (!)
  • Ejemplo: xerrorbars

newrange ↑

newrange xmin,xmax,ymin,ymax
  • objects defined after command will make use of this new range
  • https://wimsedu.info/?topic=dessiner-des-portions-de-fonctions-sur-un-meme-graphe

xrange ↑

xrange xmin,xmax
  • alternative command: rangex
  • if not given: 0,xsize (eg in pixels)

xsnaptogrid ↑

xsnaptogrid
  • keyword (no arguments required)
  • a draggable object (use command drag x|y|xy) will snap to the given x-grid values when dragged (mouseup)
  • 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
    use only even dividers in x-minor...for example
    xsnaptogrid
    axis
    grid 2,1,grey,4,4,7,red
    will snap on x=0, x=0.5, x=1, x=1.5 ....
    will snap on y=0, y=0.25 y=0.5 y=0.75 ...
  • Ejemplo: xsnaptogrid_1 Ejemplo: xsnaptogrid_2

xoffset ↑

xoffset
  • keyword ; to place the text centered above the text coordinates(x:y) ...
  • may be used for points or other things requiring centered labels
  • use fontfamily for setting the font
  • may be active for commands text and string (e.g. objects in the drag/drop/onclick-library)
  • Ejemplo: xoffset

xyoffset ↑

xyoffset
  • keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
  • may be used for points or other things requiring labels
  • use fontfamily for setting the font
  • only active for commands text and string (e.g. objects in the drag/drop/onclick-librariy
  • in case of inputfields the inputfield will be centered x and y on its coordinates.
    for example:
    inputs 1,1,10,?
    point 1,1,red
    the point will be completely invisible
    note: keyword xyoffset will also provide centering if used with input(s),color
  • Ejemplo: xyoffset

xunit ↑

xunit some_unit_for_x-values

xlabel ↑

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
    not depending on keywords axis and axisnumbering
  • font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)
    use command fontsize to adjust.
    (command fontfamily is not active for this command)
  • use ylabel
  • Ejemplo: xlabel

xlogbase ↑

xlogbase number
  • sets the logbase number for the x-axis
  • default value 10
  • use together with commands xlogscale / xylogscale

xlogscale ↑

xlogscale ymajor,yminor,majorcolor,minorcolor
  • the x/y-range are set using commands xrange xmin,xmax and yrange ymin,ymax
  • ymajor is the major step on the y-axis; yminor is the divisor for the y-step
  • the linewidth is set using command linewidth int
  • the opacity of major / minor grid lines is set by command opacity
  • default logbase number = 10 ... when needed, set the logbase number with command xlogbase number
  • the x/y- axis numbering is triggered by keyword axisnumbering
    • use command precision before xlogscale command to set the precision (decimals) of the axis numbering
    • use commands xlabel some_text and/or ylabel some_text for text on axis: use command fontsize int to set the fontsize (default 12px)
    • use command fontfamily fnt_family_string to set the fonts for axis-numbering
    • use command fontcolor to set the colour
  • 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.
  • note: when using something like xrange 0.0001,0.01...combined with commands mouse and/or userdraw...
    make sure the precision is set accordingly
  • note: in case of userdraw, the use of keyword userinput_xy may be handy !
  • attention: keyword snaptogrid may not lead to the desired result...
  • attention: do not use command zoom
  • Ejemplo: xlogscale

xylogscale ↑

xylogscale majorcolor,minorcolor
  • the x/y-range are set using commands xrange xmin,xmax and yrange ymin,ymax
  • the linewidth is set using command linewidth int
  • the opacity of major / minor grid lines is set by command opacity [0-255],[0-255]
  • default logbase number = 10 ... when needed, set the logbase number with command xlogbase number and/or ylogbase number
  • the x/y- axis numbering is triggered by keyword axisnumbering
    • use commands xlabel some_text and/or ylabel some_text for text on axis: use command fontsize int to set the fontsize (default 12px)
    • use command fontfamily fnt_family_string to set the fonts for axis-numbering
    • use command fontcolor to set the colour
  • 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.
  • note: when using something like yrange 0.0001,0.01...combined with commands mouse color,fontsize and/or userdraw type,color...
    make sure the precision is set accordingly (eg command precision 10000)
  • note: in case of userdraw, the use of keyword userinput_xy may be handy !
  • attention: keyword snaptogrid may not lead to the desired result...
  • attention: do not use command zoom
  • Ejemplo: xylogscale

yaxis ↑

yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
  • alternative command: yaxistext
  • use command fontcolor, fontfamily to adjust font
    defaults: black,12,Arial
    note: command fontsize is not active for this command.(fontsize can be used for the legend in a grid)
  • no need to use keyword axisnumbering
  • use command axis to have visual x/y-axis lines (see command grid
  • use these y-axis num1...num_n values instead of default ymin...ymax
  • a javascript error message will flag non-matching value:name pairs
  • to be used before command grid (see command grid)
  • Ejemplo: yaxistext

yerrorbars ↑

yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n
  • draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'
  • the errors E1 and E2 values are in yrange.
  • use command linewidth int to adust size
  • may be set draggable / onclick individually (!)
  • Ejemplo: yerrorbars

yoffset ↑

yoffset
  • keyword; to place the text centered above the text coordinates(x:y) ...
  • may be used for points or other things requiring centered labels
  • use fontfamily for setting the font
  • may be active for commands text and string (e.g. objects in the drag/drop/onclick-library)
  • Ejemplo: yoffset

yrange ↑

yrange ymin,ymax
  • alternative command: rangey
  • if not given 0,ysize (eg in pixels)

ysnaptogrid ↑

ysnaptogrid
  • keyword (no arguments required)
  • a draggable object (use command drag x|y|xy) will snap to the given y-grid values when dragged (mouseup)
  • 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
    use only even dividers in y-minor...for example
    ysnaptogrid
    axis
    grid 2,1,grey,4,4,7,red
    will snap on x=0, x=0.5, x=1, x=1.5 ....
    will snap on y=0, y=0.25 y=0.5 y=0.75 ...
  • Ejemplo: ysnaptogrid_1 Ejemplo: ysnaptogrid_2

ylabel ↑

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 grid
    not depending on keywords axis and axisnumbering
  • font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)
    use command fontsize to adjust (command fontsize is not active for this command)
  • use xlabel
  • Ejemplo: ylabel

ylogbase ↑

ylogbase number
  • sets the logbase number for the y-axis
  • default value 10
  • use together with commands ylogscale / xylogscale

ylogscale ↑

ylogscale xmajor,xminor,majorcolor,minorcolor
  • the x/y-range are set using commands xrange xmin,xmax and yrange ymin,ymax
  • xmajor is the major step on the x-axis; xminor is the divisor for the x-step
  • the linewidth is set using command linewidth int
  • the opacity of major / minor grid lines is set by command opacity [0-255],[0-255]
  • default logbase number = 10 ... when needed, set the logbase number with command ylogbase number
  • the x/y- axis numbering is triggered by keyword axisnumbering
    • use command precision before ylogscale command to set the precision (decimals) of the axis numbering
    • use commands xlabel some_text and/or ylabel some_text for text on axis: use command fontsize int to set the fontsize (default 12px)
    • use command fontfamily fnt_family_string to set the fonts for axis-numbering
    • use command fontcolor to set the color
  • 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.
  • note: when using something like yrange 0.0001,0.01...combined with commands mouse color,fontsize and/or userdraw type,color...
    make sure the precision is set accordingly (eg command precision 10000)
  • note: in case of userdraw, the use of keyword userinput_xy may be handy !
  • attention: do not use command zoom
  • attention: keyword snaptogrid may not lead to the desired result...

yunit ↑

yunit some_unit_for_y-values
  • unicode allowed (no html code)
  • use together with command mousey
  • will display the cursor y-coordinate in unit

zoom ↑

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
    (×,↓,↑,←,→,−,+) 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.
  • choose an appropriate color, so the small ×,↓,↑,←,→,−,+ are clearly visible
  • command opacity may be used to set stroke_opacity of buttons
  • note: on zooming, text will not increase / decrease the font size (todo??)
  • note: adding zooming will increase the size of the javascript include with approx. 11 kb