Implemented canvasdraw commands (Tue Jun 17 19:52:22 CEST 2014)
- canvasdraw
- 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...)
- General syntax
- The transparency of all objects can be controlled by command 'opacity [0-255],[0,255]'
- a line based object can be controlled by command 'linewidth int'
- a line based object 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 will be the stroke colour...(19/10/2013) - a draggable object can be set draggable by a preceding command 'drag x/y/xy'
The translation can be read by javascript:read_dragdrop();
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 (in stead 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.
example:
size 200,200;xrange -5,5;yrange -5,5;hline 0,0,black;vline 0,0,black
plot red,sin(x)
drag xy
html 0,0,5,-5, €
lines green,2,0,2,-2,-2,2,-2,0;rectangle 1,1,4,4,purple;frectangle -1,-1,-4,-4,yellow
- size width,height
- set canvas size in pixels
- mandatory first command
- 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
- xrange xmin,xmax
- if not given: 0,xsize (eg in pixels)
- yrange ymin,ymax
- if not given 0,ysize (eg in pixels)
- trange tmin,tmax
- linewidth int
- arrowhead int
- crosshairsize int
- crosshair x,y,color
- draw a single crosshair point at (x;y) in color 'color'
- use command 'crosshairsize int' and / or 'linewidth int' to adust
- may be set draggable / onclick
- crosshairs color,x1,y1,x2,y2,...,x_n,y_n
- draw multiple crosshair points at given coordinates in color 'color'
- use command 'crosshairsize int' and / or 'linewidth int' to adust
- may be set draggable / onclick individually (!)
- point x,y,color
- draw a single point at (x;y) in color 'color'
- use command 'linewidth int' to adust size
- may be set draggable / onclick
- will not resize on zooming
(command 'circle x,y,r,color' will resize on zooming)
- points color,x1,y1,x2,y2,...,x_n,y_n
- draw multiple points at given coordinates in color 'color'
- use command 'linewidth int' to adust size
- may be set draggable / onclick individually (!)
- segment x1,y1,x2,y2,color
- draw a line segment between points (x1:y1)--(x2:y2) in color 'color'
- may be set draggable / onclick
- 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
- hline x,y,color
- draw a horizontal line through point (x:y) 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
- vline x,y,color
- draw a vertical line through point (x:y) in color 'color'
- may be set draggable / onclick
- square x,y,side,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'
- use command 'fillcolor color' before 'fsquare' to set the fill colour.
- may be set draggable / onclick
- roundrect x1,y1,x2,y2,radius,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'
- use command 'fillcolor color' before 'froundrect' to set the fill colour.
- may be set draggable / onclick
- rect x1,y1,x2,y2,color
- use command 'rect x1,y1,x2,y2,color' for a filled rectangle
- use command/keyword 'filled' before command 'rect x1,y1,x2,y2,color'
- use command 'fillcolor color' before 'frect' to set the fill colour.
- may be set draggable / onclick
- polyline color,x1,y1,x2,y2...x_n,y_n
- may be set draggable / onclick
- poly color,x1,y1,x2,y2...x_n,y_n
- draw closed polygon
- use command 'fpoly' to fill it, use command 'fillcolor color' to set the fill color
- may be set draggable / onclick
- arc xc,yc,width,height,start_angle,end_angle,color
- can not be set "onclick" or "drag xy"
- attention: width == height == radius in pixels)
- ellipse xc,yc,radius_x,radius_y,color
- a ellipse with center xc/yc in x/y-range
- radius_x and radius_y are in pixels
- may be set draggable / onclick
- will shrink / expand on zoom out / zoom in
- dashtype int ,int
- When dashed is set, the objects will be drawn with this dashtyp
- default value "dashtype 2,2"
- circle xc,yc,width (2*r in pixels),color
- use command 'fcircle xc,yc,d,color' or command 'filled' for a filled disk
- use command 'fillcolor color' to set the fillcolor
- may be set draggable / onclick
- will shrink / expand on zoom out / zoom in
- rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n
- draw rays in color 'color' and center (xc:yc)
- may be set draggable or onclick (every individual ray)
- arrow x1,y1,x2,y2,h,color
- draw a single headed arrow/vector from (x1:y1) to (x2:y2)
with arrowhead size h in px and in color 'color'
- use command 'linewidth int' to adjust thickness of the arrow
- may be set draggable / onclick
- 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
- parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]
- can not be set "onclick" or "drag xy"
- triangle x1,y1,x2,y2,x3,y3,color
- may be set draggable / onclic
- lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color
- can not be set "onclick" or "drag xy"
- snaptogrid
- keyword (no arguments rewquired) needs to be defined before command 'userdraw' and after command 'grid'
- in case of userdraw the drawn points will snap to xmajor / ymajor grid
- if xminor / yminor is defined, 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 ...
- xsnaptogrid
- keyword (no arguments rewquired) needs to be defined before command 'userdraw' and after command 'grid'
- in case of userdraw the drawn points will snap to xmajor grid
- if xminor is defined, 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 ...
- ysnaptogrid
- keyword (no arguments rewquired) needs to be defined before command 'userdraw' and after command 'grid'
- in case of userdraw the drawn points will snap to ymajor grid
- if yminor is defined, 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 ...
- usertextarea_xy
- keyword
- to be used in combination with command "userdraw object_type,color" wherein object_type is only segment / polyline for the time being...
- if set two textareas are added to the document
(one for x-values , one for y-values)
- the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
- user drawings will not zoom on zooming (or pan on panning)
- userinput_xy
- keyword
- 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)
- userdraw object_type,color
- implemented object_type:
- point
- points
- crosshair
- crosshairs
- line
- lines
- segment
- segments
- polyline
- circle
- circles
- arrow
- arrow2 (double arrow)
- arrows
- arrows2 (double arrows)
- triangle
- polygon
- poly[3-9]
- rect
- roundrect
- rects
- roundrects
- freehandline
- freehandlines
- path
- paths
- text
- 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.
while typing the background of every typed char will be lightblue..."backspace / delete / esc" will remove typed text.
You will need to hit "enter" to add the text to the array "userdraw_txt()" : lightblue background will disappear
Placing the cursor somewhere on a typed text and hitting "delete/backspace/esc" , a confirm will popup asking to delete the selected text.This text will be removed from the "userdraw_txt()" answer array.
Use commands 'fontsize' and 'fontfamily' to control the text appearance
- note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again.
- note: all objects will be removed -after a javascript confirm box- when clicked on an object point with middle or right mouse butten (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' or
- 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.!
- plotsteps a_number
- default 150
- use with care !
- fontsize font_size
- fontcolor color
- color: hexcolor or colorname
- default: black
- example usage: x/y-axis text
- animate type
- type may be "point" (nothing else , yet...)
- the point is a filled rectangle ; adjust colour with command 'fillcolor colorname/hexnumber'
- will animate a point on the next plot/curve command
- the curve will not be draw
- moves repeatedly from xmin to xmax
- 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...)
- 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'
the commands 'xlabel some_x_axis_name' and 'ylabel some_y_axis_name' will set the label for the input fields
- use 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 in stead of 2x etc etc
no check is done on the validity of your function and/or syntax
use error console to debug any errors...
- 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
- example: jsmath sin(x^2)
- the client browser will convert your math function to javascript math.
use parenthesis and rawmath : use 2*x in stead of 2x etc etc
no check is done on the validity of your function and/or syntax
use error console to debug any errors...
- jscurve color,formula(x)
- your function will be plotted by the javascript engine of the client browser.
- use parenthesis and rawmath : use 2*x in stead of 2x ; use 2^(sin(x))...etc etc
use error console to debug any errors...
- 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 commmand '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'
- curve color,formula(x)
- plot color,formula(x)
- use command trange before command curve / plot (trange -pi,pi)
curve color,formula1(t),formula2(t)
- 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
- 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
- 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.
- 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 Ariel".
In that case reset 'fontfamily' to something lke 'fontfamily Ariel' before the old flydraw commands.
- fontfamily font_description
- set the font family; for browsers that support it
- font_description: Ariel ,Courier, Helvetica etc
- in case commands
'string color,x,y,the string'
'stringup color,x,y,rotation,the string'
fontfamily can be something like:
italic 34px Ariel
- use correct syntax : 'font style' 'font size'px 'fontfamily'
- stringup color,x,y,rotation_degrees,the text string
- can not be set "onclick" or "drag xy" (because of translaton matrix...mouse incompatible)
- 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
- string color,x,y,the text string
- may be set "onclick" or "drag xy"
- unicode supported: string red,0,0,\u2232
- use a command like 'fontfamily italic 24px Ariel'
to set fonts on browser that support font change
- mathml x1,y1,x2,y2,mathml_string
- 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....
- 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'
- html x1,y1,x2,y2,html_string
- all tags are allowed
- can be set onclick
(dragging not supported)
javascript:read_dragdrop(); will return click number of mathml-object
- if inputfields are incorporated (with id's : id='mathml0',id='mathml1',...id='mathml_n')
the user_input values will be read by javascript:read_canvas();
If other inputfields (command input / command textarea) or userdraw is performed, these values will NOT be read as well.
- xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
- xaxistext num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
- use these x-axis values in stead of default xmin...xmax
- use command "fontcolor", "fontsize" , "fontfamily" to adjust font
defaults: black,12,Ariel
- if the 'x-axis words' are to big amd 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
- example:
size 400,400
xrange -5*pi,5*pi
yrange -100,500
axis
xaxis -4*pi:-4\u03c0:-3*pi:-3\u03c0:-2*pi:-2\u03c0:-1*pi:-\u03c0:0:0:pi:\u03c0:2*pi:2\u03c01:3*pi:3\u03c0:4*pi:4\u03c0
#'xmajor' steps should be synchronised with numbers eg. "1" in this example
grid pi,1,grey,1,3,6,grey
- yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
- yaxistext num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
- use command "fontcolor", "fontsize" , "fontfamily" to adjust font
defaults: black,12,Ariel
- use these y-axis values in stead of default ymin...ymax
- 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
- axisnumbering
- keyword, no aguments required
- axis
- keyword, no aguments required
- sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color
- primitive implementation of a 'broken scale' graph...
- not very versatile.
- example:
size 400,400
xrange 0,10000
yrange 0,100
sgraph 9000,50,100,10,4,4,grey,blue
userinput_xy
linewidth 2
userdraw segments,red
- grid step_x,step_y,gridcolor
- use command "fontcolor", "fontsize" , "fontfamily" to adjust font
defaults: black,12,Ariel
- 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)
- can not be set "onclick" or "drag xy"
- 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 commands "xaxis" or "xaxistext", "yaxis" or "yaxistext" to set tailormade values on axis (the used font is set by command fontfamily; default '12px 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')
- opacity 0-255,0-255
- rotate rotation_angle
- killaffine
- keyword : resets the transformation matrix to 1,0,0,1,0,0
- affine a,b,c,d,tx,ty
- defines a transformation matrix for subsequent objects
- use keyword 'killaffine' to end the transformation
- note 1: only 'draggable' / 'noclick' objects can be transformed.
- note 2: do not use 'onclick' or 'drag xy' with tranformation objects : the mouse coordinates do not get transformed (yet)
- note 3: no matrix operations on the transformation matrix implemented (yet)
- 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 pixels !
- ty: Moves the drawings vertically in pixels !
- translation tx,ty
- keyword "dashed"
- next object will be drawn with a dashed line
- change dashing scheme by using command "dashtype int,int)
- keyword "filled"
- the next 'fillable' object (only) will be filled
- use command "fillcolor color" to set fillcolor
- 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 !
- highlight color,opacity,linewidth
- NOT IMPLEMENTED
- use command "onclick" : when the object receives a userclick it will increase it's linewidth
- fillcolor colorname or #hex
- Set the color for a filled object : mainly used for command 'userdraw obj,stroke_color'
- All fillable massive object will have a fillcolor == strokecolor (just to be compatible with flydraw...)
- strokecolor colorname or #hex
- to be used for commands that do not supply a color argument (like command 'linegraph')
- bgimage image_location
- use an image as background .
(we use the background of 'canvas_div' )
- the background image will be resized to match "width = xsize" and "height = ysize"
- bgcolor colorname or #hex
- use this color as background of the "div" containing the canvas(es)
- copy x,y,x1,y1,x2,y2,[filename URL]
- 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 valuid for the next image
draggable / non-draggable images may be mixed
- if you want to draw / userdraw on an "imported" image, make sure it is transparent.
for example GNUPlot: set terminal gif transparent
- copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url
- 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
- If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized.
- 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 valuid for the next image
draggable / non-draggable images may be mixed
- if you want to draw / userdraw on an "imported" image, make sure it is transparent.
for example GNUPlot: set terminal gif transparent
- inputstyle style_description
- example: inputstyle color:blue;font-weight:bold;font-style:italic;font-size:16pt
- input x,y,size,editable,value
- to set inputfield "readonly", use editable = 0
- only active inputfields (editable = 1) will be read with read_canvas();
- if "$status=done" (e.g. in answer.phtml) the inputfield will be clearedand set readonly
Override this by keyword 'status'
- may be further controlled by "inputstyle" (inputcss is not yet implemented...)
- if mathml inputfields are present and / or some userdraw is performed, these data will NOT be send as well (javascript:read_canvas();)
- textarea x,y,cols,rows,readonly,value
- may be further controlled by "inputstyle"
- if "$status=done" (e.g. in answer.phtml) the inputfield will be clearedand 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();)
- precision int
- 10 = 1 decimal ; 100 = 2 decimals etc
- may be used / changed before every object
- the last precision value will be used for read_canvas()...if needed
- 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
- use command xlabel / ylabel to change text from xmin to 'xlabel'min etc
- note:the input value will not be checked on validity
- zoom button_color
- introduce a controlpanel at the lower right corner
- giving six 15x15pixel 'active' rectangle areas
(for x,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: 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 !!
- onclick
- keyword, no arguments
- if the next object is clicked, it's 'object sequence number' in fly script is returned
by javascript:read_canvas();
- Line based object will show an increase in linewidth
Font based objects will show the text in 'bold' when clicked.
- NOTE: not all objects may be set clickable
- 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 answer is : object_number : Xorg : Yorg : Xnew : Ynew
wherein object_number is the place of the draggable object in your script.
Only draggable object will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc)
- use keywordd 'snaptogrid' , 'xsnaptogrid' or 'ysnaptogrid' 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 !!
- blink time(seconds)
- mouse color,fontsize
- will display the cursor coordinates in 'color' and 'font size'
using default fontfamily Ariel
- 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
- 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 test will alos be shown with this bgcolor.
- 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
- 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)
- 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
- example:
wims getfile : video 0,0,120,120,myvideo.mp4
- video format may be in *.mp4 (todo:other formats)
- hatchfill x0,y0,dx,dy,color
- x0,y0 in xrange / yrange
- distances dx,dy in pixels
- diamondfill x0,y0,dx,dy,color
- x0,y0 in xrange / yrange
- distances dx,dy in pixels
- gridfill x0,y0,dx,dy,color
- x0,y0 in xrange / yrange
- distances dx,dy in pixels
- a draggable object may snap_to_grid (using keywords xysnaptogrid,xsnaprogrid, ysnaptogrid)
- userdraw object may snap_to_grid
- dotfill x0,y0,dx,dy,color
- x0,y0 in xrange / yrange
- distances dx,dy in pixels
- radius of dots is linewidth
- imagefill dx,dy,image_url
- The next suitable filled object will be filled with "image_url" tiled
- 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,$module_dir/gifs/my_image.gif
- normal url : imagefill 80,80,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.
- filltoborder x,y,bordercolor,color
- fill the region of point (x:y) bounded by 'bordercolor' with color 'color'
- any other color will not act as border to the bucket fill
- use this command after all boundary objects are declared.
- 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..
- floodfill x,y,color
- alternative syntax: fill x,y,color
- 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 'clickfill,color' for user click driven flood fill.
- NOTE: recognised colour boundaries are in the "drag canvas" e.g. only for objects that can be set draggable / clickable
- 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..
- clickfillmarge int
- default 20 (pixels)
- when using command "clickfill fillcolor" a coloured area my be reverted ("undo")
back to background colour with a middle mouse click
when the click is in a 40x40 rectangle around a stored m mouseclick (userdraw_x[] and userdraw_y[])
- clickfill fillcolor
- user left mouse click will floodfill the area with fillcolor
- multiple areas may be coloured
- the coloured areas can be removed (changed to "bgcolor") by middle / right mouse click
(if the click is in an 40x40 pixel area of the click coordinate that "painted" the area)
- the answer will be read as the (x:y) click coordinates per coloured area
- background color of main div may be set by using command "bgcolor color"
- may not be combined with command "userdraw"
- NOTE: recognised colour boundaries are in the "drag canvas" e.g. only for objects that can be set draggable / clickable
- setpixel x,y,color
- A "point" with diameter 1 pixel centeres at (x:y) in xrange / yrange
- pixels can not be dragged or clicked
- "pixelsize = 1" may be changed by command "pixelsize int"
- pixelsize int
- in case you want to deviate from default pixelsize = 1...
- pixels color,x1,y1,x2,y2,x3,y3...
- Draw "points" with diameter 1 pixel
- pixels can not be dragged or clicked
- "pixelsize = 1" may be changed by command "pixelsize int"
- replyformat number
- use number=-1 to deactivate the js-function read_canvas()
- default values should be fine !
- the last value for 'precision int' will be used to calculate the reply coordinates, if needed (read_canvas();)
- choose
- 1 = x1,x2,x3,x4....x_n
y1,y2,y3,y4....y_n
x/y in pixels - 2 = x1,x2,x3,x4....x_n
y1,y2,y3,y4....y_n
x/y in xrange / yrange coordinate system
- 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 - 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 - 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
- 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
- 7 = x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n
x/y in pixels - 8 = x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n
x/y in xrange / yrange coordinate system - 9 = x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n
x/y in pixels - 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 - 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 - 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 - 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,x2:y2:text2...x_n:y_n:text_n
- 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 - 21 = (x1:y1) (x2:y2) ... (x_n:y_n)
verbatim coordinate return 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 isx1,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)
- note to 'userdraw text,color' : the x / y-values are in pixels ! (this to avoid too lengthy calculations in javascript...)
legendcolors color1:color2:color3:...:color_n
- will be used to colour a legend: use this command after the legend command ! e.g.
legend test1:test2:test3
legendcolors blue:red:orange
- make sure the number of colours 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'
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
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)
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)
linegraph x1:y1;x2:y2...x_n:y;2
- 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' 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
-
- use command 'strokecolor' before command 'linegraph' to set the color of this graph
- use command 'linewidth' before command 'linegraph' to set linewidth of this graph
- use command '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 graph
clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]
- 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,[space]
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,white,white,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 )
- 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, 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
barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n
- will be used to create a legend for bar graph
- may only to be used together with command 'grid'
- can be used together with freestyle x-axis/y-axis texts : see commands 'xaxis' and 'yaxis'
- use command 'legend' to provide an optional legend in right-top-corner
- also see command '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 : 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 0-255,0-255" to adjust fill_opacity of colours
- use command "legend string1:string2:...:string_n" 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.
status
- keyword
- alernative keyword: nostatus
- used to override the effects of "status=done" in wims (answer.phtml)
- affects inputfields / textarea's 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'
xlogbase number
- sets the logbase number for the x-axis
- default value 10
- use together with commands xlogscale / xylogscale
ylogbase number
- sets the logbase number for the y-axis
- default value 10
- use together with commands ylogscale / xylogscale
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 [0-255],[0-255]'
- 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 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...
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 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...
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...