will try use the same syntax as flydraw or svgdraw to paint a html5 bitmap image by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job. thus ensuring a minimal strain on the client browser (unlike some popular 'canvas-do-it-all' libraries, who have proven to be not suitable for low-end computers found in schools...)
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,int'
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)
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 command for a single object has a multiple objects counterpart:
general syntaxrule:
single_object x1,y1,...,color
multi_object color,x1,y1,...
All inputfields or textareas generated, can be styled individually using command 'inputstyle 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_scripts' will contain all unique random "canvas_root_id" of the included scripts. The included local javascript "read" functions "read_canvas%d()" and "read_dragdrop%d()" will have this "%d = canvas_root_id" e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function fun = eval("read_canvas"+canvas_scripts[0]) to read user based drawings / inputfield in this first image. The read_dragdrop is analogue. If the default reply formatting is not suitable, use command '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 + "\n"; }; }; }; if( found_result ){return draw_reply;}else{return null;}; };
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: \text{popup_grapher=wims(exec canvasdraw popup size 400,400 xrange -10,10 yrange -10,10 axis axisnumbering opacity 100,100 grid 2,2,grey,2,2,6,black snaptogrid linewidth 2 jsplot red,5*sin(1/x) strokecolor green functionlabel f(x)= userinput function mouse blue,22 ) } \statement{ \popup_grapher }
be aware that older browsers will probably not work correctly no effort has been undertaken to add glue code for older browsers !! in any case it's not wise to use older browsers...not just for canvasdraw
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 , protractor and ruler only single finger gestures are supported (for now) for more accurate user-interaction with canvasdraw on touch devices: use the command family userinput
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
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)
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
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 commant 'inputstyle' note:If you want to add some CSS style to the buttons... the id's of the 'draw buttons' are their english command argument (e.g. id="canvasdraw_points" for the draw points button). the id of the 'stop drawing' button is "canvasdraw_stop_drawing". the id of the "OK" button is"canvasdraw_ok_button"
wims will not check the amount or validity of your input
always use the same sequence as is used for 'multidraw'
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')
only the x-values snap_to_grid: multisnaptogrid 0,2,2
only the y-values snap_to_grid: multisnaptogrid 0,3,3
mixing allowed: multisnaptogrid 1,2,3,0 e.g. the first object will snap to the xy-grid, the second draw object will snap to the x-values, the third object will snap to the y-valeus of the grid, the last object may be placed anywhere on the canvas
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...)
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.
for single object user drawings you may 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)
rect | rects
closedpoly only one closedpolygon may be drawn.The number of 'corner points' is not preset (e.g. not limited,freestyle) the polygone is closed when clicking on the first point again..(+/- 10px)
triangle | triangles poly3, poly4, ... poly9 | polys3, polys4, ... polys9 (only 3 inputfields for poly*) parallelogram | parallelograms (no inputfields: parallelogram can be used for vector "contructions")
additionally objects may be user labelled, using obj_type 'text'... in this case allways a text input field and a (x:y) inputfield will be added to the page. use commands 'fontfamily' and 'fontcolor' to adjust. (command 'multistrokeopacity' may be set to adjust text opacity) note: no keyboard listeners are used
it makes no sense using something like "multidraw point,points" ...
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 incase of 'multiuserinput' , some inputfields and buttons) will be present in the reserved div 'tooltip_div' and can be styled using command 'inputstyle some_css'
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)
multidraw is incompatible with command 'tooltip'
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 9 lines string with fixed sequence. line 1 = points_x+";"+points_y+"\n" line 2 = circles_x+";"+circlespoint_y+";"+multi_radius+"\n" line 3 = segments_x+";"+segments_y+"\n" line 4 = arrows_x+";"+arrows_y+"\n" line 5 = lines_x+";"+lines_y+"\n" line 6 = triangles_x+";"+triangles_y+"\n" line 7 = rects_x +";"+rects_y+"\n" line 8 = closedpoly_x+";"+closedpoly_y+"\n" line 9 = text_x+";"+text_y+";"+text"\n" The x/y-data are in x/y-coordinate system and display precision may be set by a previous command 'precision 0 | 10 | 100 | 1000...' In case of circles the radius is -for the time being- rounded to pixels use the wims "direct exec" tool to see the format of the reply
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 8 'draw primitives' + 'text' will have their own -transparent- PNG bitmap canvas. So for example there can be a points_canvas entirely separated from a line_canvas. This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn) This in contrast to many very slow do-it-all HTML5 canvas javascript libraries. The mouselisteners are attached to the canvas-div element.
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've 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...
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
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...
for multiple object user drawings use command 'multidraw'
implemented object_type:
point
points
crosshair
crosshairs
line
lines
vline
vlines
hline
hlines
demiline
demilines
segment
segments
polyline | brokenline
circle
circles
arrow
arrow2 (double arrow)
arrows
arrows2 (double arrows)
triangle
polygon
poly[3-9] (e.g poly3 ... poly7...poly9
rect
roundrect
rects
roundrects
freehandline | path
freehandlines | paths
clickfill : fill the clicked area with a color the click may be set snapped...only one area can be selected use command 'canvastype' to fill another canvas (default should be fine: DRAG_CANVAS = 5)
text
arc
arcs
input place a single inputfield on 'canvas' use commands 'inputstyle' for css styling: use command 'linewidth' for adjusting the input field size (default 1)
inputs place multiple inputfield : placing inputfields on top of each other is not possible
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)
note: object_type text: Any string or multiple strings may be placed anywhere on the canvas. "backspace / delete / esc" will remove typed text if the mouse is clicked non the text. You will need to hit "enter" to add the text to the array "userdraw_txt" Placing the cursor somewhere on a typed text and hitting "delete/backspace/esc" ,
note: all objects will be removed -after a javascript confirm box- when clicked on an object point with middle or right mouse button (e.g. event.which != 1 : all buttons but left)
use command "filled", "opacity int,int" and "fillcolor color" to trigger coloured filling of fillable objects
use command "dashed" and/or "dashtype int,int" to trigger dashing
use command "replyformat int" to control / adjust output formatting of javascript function read_canvas();
may be combined with onclick or drag xy of other components of flyscript objects (although not very usefull...)
may be combined with keyword 'userinput_xy'
note: when zooming / panning after a drawing, the drawing will NOT be zoomed / panned...this is a "design" flaw and not a feature To avoid trouble do not use zooming / panning together width userdraw.! use command multidraw is this is a problem for you...
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 ...
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 ...
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 ...
textarea and inputfield are only usable in combination with some 'userdraw draw_ type'
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 'inputstyle 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
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 'inputstyle 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
note:for some macro's (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
your function will be plotted by the javascript engine of the client browser.
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
use command 'trace_jscurve formula(x)` for tracing
use command 'jsmath formula(x)` for calculating and displaying indiviual points on the 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 inputstyle 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 formula's of the plotted function(s) can be found in the page javascript source
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 'inputstyle some_css' for styling the display fields. Use command 'fontsize int' to size the labels 'x' and 'y'
example: jsmath sin(x^2)
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
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
use command 'string' combined with '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 Ariel". In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
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 Ariel". In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
mathml will be displayed in a rectangle left top (x1:y1) , right bottom (x2:y2)
can be set onclick (however dragging is not supported) javascript:read_dragdrop(); will return click number of mathml-object
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 command axis to have visual x/y-axis lines (see command grid
use command "fontcolor", "fontfamily" to adjust font defaults: black,12,Ariel note: command "fontsize" is not active for this command.("fontsize" can be used for the "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
example: size 400,400 xrange 0,13 yrange -100,500 axis xaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december #'xmajor' steps should be synchronised with numbers eg. "1" in this example grid 1,100,grey,1,4,6,grey
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,Ariel 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)
example: size 400,400 xrange 0,13 yrange -100,500 axis xaxisup 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december #'xmajor' steps should be synchronised with numbers eg. "1" in this example grid 1,100,grey,1,4,6,grey
alternativ : yaxistext num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
use command "fontcolor", "fontfamily" to adjust font defaults: black,12,Ariel note: command "fontsize" is not active for this command.("fontsize" can be used for the "legend" in a grid)
example: size 400,400 yrange 0,13 xrange -100,500 axis yaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december #'ymajor' steps should be synchronised with numbers eg. "1" in this example grid 100,1,grey,4,1,6,grey
if a slider value display is desired, use for argument type: xy display x display y display angle radian angle degree
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: xy function,x function,y function use commands sliderfunction_x and/or sliderfunction_y before the slider command to define the functions example: sliderfunction_x x^2 sliderfunction_y y^2 slider -5,5,100,100,xy function,Some_Text ...some stuff to slide killslider sliderfunction_x x^2-2 slider -15,15,100,10,x function,Some_Other_Text ...more stuff to slide killslider ... etc
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
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.
javascript:read_dragdrop(); will return an array with 'object_number:slider_value'
type=xy: will produce a 2D 'slider' [rectangle width x heigh px] in your web page
every draggable object may have its own slider (no limit in amount of sliders)
label: some slider text
use fillcolor for slider ball
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
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 + $xmin px_y_point = -1*factor*y_point*ysize/(ymax - ystart) + ymax*factor*ysize/(ymax - ystart) y_recalculated = ymax - py*(ymax - ymin)/ysize
if keywords "axis" or "axisnumbering" are set, use : grid step_x,step_y,major_color,minor_x,minor_y,tics height in px,axis_color minor x step = step_x / minor_x
if xmin > 0 and/or ymin > 0 and zooming / panning is not activ: be aware that the x/y-axis numbering and x/y major/minor tic marks will not be visual as they are placed under the x-axis and left to the y-axis (in Quadrant II and IV)
use commands 'xlabel some_string' and/or 'ylabel some_string' to label axis; use command "fontsize" to adjust size:the font family is non-configurable 'italic your_fontsize px Ariel' !
see command "legend"to set a legend for the graph ; use command "fontsize" to adjust size (the font family is non-configurable 'bold your_fontsize px Ariel')
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
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 !
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
URL is normal URL of network reachable image file location (eg special url for 'classexo' not -yet- implemented)
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 other stuff on top of an "imported" image
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
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 drawprimitive)
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'
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++; }; };
introduce a very small 'controlpanel' at the lower right corner
giving six 15×15px 'active' rectangle areas (for ×,leftarrow,rightarrow,uparrow,downarrow and a '-' and a '+' sign ) for zooming and/or panning of the image
the 'x' symbol will do a 'location.reload' of the page, and thus reset all canvas drawings.
choose an appropriate colour, so the small 'x,arrows,-,+' are clearly visible
command 'opacity' may be used to set stroke_opacity of 'buttons
note: use command 'zoom' at the end of your script code (the same is true for command 'mouse')
note: only objects that may be set draggable / clickable will be zoomed / panned
note: when an object is dragged, zooming / panning will cause the coordinates to be reset to the original position :( e.g. dragging / panning will get lost. (array with 'drag data' is erased) This is a design flaw and not a feature !!
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...)
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 blue point will not be recognised as draggable ! linewidth 4 drag xy point 0,0,red drag xy point 0,0,blue both points will be recognised
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.
note: in case an object is dragged , zooming or panning will cause the coordinates to be reset to the original position :( e.g. dragging / panning will get lost. (array with 'drag data' is erased) This is a design flaw and not a feature !!
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)
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 therefor these commands are mutually exclusive. keep this in mind...
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()+"\ncanvas="+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. wherein clock_id starts with 0 for the first clock type is 1 for Hours,2 for Minutes and 3 for Seconds diff is the increment (positive or negative) per click
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
example: upload both audio1.ogg and audio1.mp3 to http://server/files/ audio 0,0,http://server/files/audio1.mp3 svdraw will copy html-tag audio1.mp3 to audio1.ogg and the browser will play the compatible file (audio1.ogg or audio1.mp3)
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..
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..
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
14 = Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2 x/y in pixels
15 = reply from inputfields,textareas reply1,reply2,reply3,...,reply_n
16 = mathml input fields
17 = read "userdraw text,color" only (x1,y1,text1 \n x2,y2,text2...\n...x_n,y_n,text_n x/y-values are in xrang/yrange
18 = read_canvas() will read all interactive clocks in H1:M1:S1,H2:M2:S2...Hn:Mn:Sn
19 = read_canvas() will return the object number of marked / clicked object (clock) analogue to (shape library) onclick command
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)
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
23 : can only be used for drawtype 'polyline' a typical click sequence in drawtype polyline is x1,y1,x2,y2,x2,y2,x3,y3,x3,y3.....,x(n-1),y(n-1),x(n-1),y(n-1),xn,yn --replyformat 23--> x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn multiple occurences will be filtered out.The reply will be in x-y-range (xreply \n yreply)
24 = read all inputfield values: even those set 'readonly'
25 = angle1,angle2...angle_n : will return the radius (one or many) of the user drawn circle segment in degrees
26 = rad1,rad2...rad_n : will return the radius (one or many) of the user drawn circle segment in radians
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)
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)
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 "fontfamily" is not active for this command)
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'
(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 : 132:red:23565:green:323:black:234324:orange:23434:yellow:2543:white
the number of colors must match the number of data.
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-colours' 'pie-legend-titles' do not match a javascript console is your best friend... use command 'fontfamily' to set the font of the legend.
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)
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 '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 ('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
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 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...
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...