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) non-solid filling (grid,hatch,diamond,dot,text) is provided using command fillpattern a_pattern for filltoborder x0,y0,color or fill x0,y0,color type filling (eg fill a region around x0,y0 with color until a border is encountered), there are non-solid pattern fill analogues:
all draggable objects may have a slider for translation / rotation; several objects may be translated / rotated by a single slider
a draggable object can be set draggable by a preceding command 'drag x/y/xy' The translation can be read by javascript:read_dragdrop();The replyformat is : object_number : x-orig : y-orig : x-drag : y-drag The x-orig/y-orig will be returned in maximum precision (javascript float)... the x-drag/y-drag will be returned in defined 'precision' number of decimals Multiple objects may be set draggable / clickable (no limit) not all flydraw objects may be dragged / clicked Only draggable / clickable objects will be scaled on zoom and will be translated in case of panning
a 'onclick object' can be set 'clickable' by the preceding keyword 'onclick' not all flydraw objects can be set clickable
remarks using a ';' as command separator commands with only numeric or colour arguments may be using a ';' as command separator (instead of a new line) commands with a string argument may not use a ';' as command separator ! these exceptions are not really straight forward... so keep this in mind.
almost every 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
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)
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
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++; }; };
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'
can be used with command 'userdraw clickfill,color' when more than one fillcolor is wanted. in that case use for example replyformat 10 ... reply=x1:y1:color1,x2:y2:color2... the pupil can choose from the given colors by clicking small coloured buttons. the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat. the first color of the palette is color=0
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
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 !!
Use command 'userdraw clickfill,color' for user click driven flood fill.
use command canvastype to fill another canvas (default should be fine: DRAG_CANVAS = 5)
note: the fill-family of commands are very (client) cpu intensive operations! filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels : each pixel contains 4 data (R,G,B,Opacity) = 640000 data. on every data a few operations / comparisons are done... So have pity on your students CPU..
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 !
when using an image-url , make sure it contains an '/' in the filename...'fillpattern $$module_dir/gifs/test.jpg' will fill the next fillable object with this image.| the argument to html5 canvas routine 'createPattern(img,argument)' is set to 'repeat' e.g. if the image is smaller then the canvas, multiple copies will be used to fill the area ( e.g. ctx.fillStyle() = pattern) for example: size 150,150 xrange -5,5 yrange -5,5 drag xy fillpattern gifs/en.gif fcircle 0,0,100,red fillpattern gifs/nl.gif drag xy fcircle -3,2,100,green fillpattern gifs/cn.gif drag xy fcircle 3,2,100,green
fillpattern is also active for userdraw object,color"... the userdraw family a has also 'clickfill type' (e.g. an object gets filled between boundaries, when clicked) commands like: 'userdraw dotfill,color' 'userdraw hatchfill,color' etc
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..
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
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')
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...
your function will be plotted by the javascript engine of the client browser
if trange is defined, the two functions will be plotted parametric note: use x as variable...and not t. Use keyword animate to animate a point on the curve
use only basic math in your curve: sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e
use parenthesis and rawmath : use 2*x instead of 2x ; use 2^(sin(x))...etc etc use error console to debug any errors...
attention : last "precision" command in the canvasdraw script determines the calculation precision of the javascript curve plot !
no validity check is done by wims.
zooming & panning are implemented : use command 'zoom color' for mouse driven zooming or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax
zooming & panning is better than for curves produced by command curve color,formula because for avery change in x/y-range the curve is recalculated in javascript
use keyword animate for animating a point on the curve
use command 'trace_jscurve formula(x)` for tracing
use command 'jsmath formula(x)` for calculating and displaying indiviual points on the curve
commands plotjump / plotstep are not active for 'jscurve'
every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
plotting multiple js-curves on the same canvas (for example if you want to use 'userdraw clickfill,color' on canvastype number 111 ,use : jscurve red,fun1(x),fun2(x)...fun_n(x) you want to specify individual colors | opacity | linewidth for these multiple js-curves. use commands like: multistrokecolors,multilinewidth, multidash , multistroke the color given for the command "jscurve color,formulas(x)" will not be used in that case... but the color argument must still be given in any case (otherwise syntax error...)
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
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)
mathml will be displayed in a rectangle left top (x1:y1)... x2 and y2 are still needed, but not used as the right bottom corner of the embedded div element.
in case of drag(xy|x|y) | onclick the div rectangle left to corner will be the drag-anchor of the mathml object
can be set onclick javascript:read_dragdrop(); will return click numbers of mathml-objects if 4 click_able object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
can be set draggable the javascript:read_dragdrop() will return all coordinates in same order as the canvas script: unmoved object will have their original coordinates...
snaptogrid is supported...snaptopoints will work, but use with care...due to the primitive dragging technically: the dragstuff library is not used...the mathml is embedded in a new div element and not in the html5-canvas
when clicked, the mathml object will be drawn in red color; the div background color will be determined by the 'fillcolor' and 'opacity' settings
userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing.
draggable or onclick 'external images' from command copy or copyresized can be combined with drag and/or onclick mathml
other drag objects (circles/rects etc) are supported , but read_dragdrop() will probably be difficult to interpret...
if inputfields are incorporated in mathml (with id's : id='mathml0',id='mathml1',...id='mathml_n') the user_input values will be read by javascript:read_mathml(); attention: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
If other inputfields (command input / command textarea) or userdraw is performed, the function read_canvas() will not read mathml. Use some generic function to read it....
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)
for simple single object user drawings you could also use command 'userdraw'
implemented obj_types:
point | points
circle | circles
line | lines
segment | segments
arrow | arrows use command 'arrowhead int' for size (default value 8 pixels)
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
parallelogram | parallelograms
poly[3-9] | polys[3-9] draw 3...9 point polygone(s): polys3 is of course triangles
additionally objects may be user labelled, using obj_type 'text'... in this case allways a text input field and if multiuserinput=1 also (x:y) inputfields will be added to the page. use commands 'fontfamily' and 'fontcolor' to adjust. (command 'multistrokeopacity' may be set to adjust text opacity) note: text is always centered on the mouse-click or user-input coordinates ! note: no keyboard listeners are used
it makes no sense using something like "multidraw point,points" ... something like "multidraw polys4,polys7" will only result in drawing a '4 point polygone' and not a '7 point polygone' : this is a design flaw and not a feature...
note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise) to overrule use command/keyword "status" (no arguments required)
buttons for changing the obj_type (and 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' (the reserved div_area is used for the multidraw control buttons)
all 'multidraw' drawings will scale on zooming. this in contrast to the command 'userdraw'.
wims will not check the amount or validity of your command arguments ! ( use javascript console to debug any typo's )
a local function read_canvas%d will read all userbased drawings. The output is always a 11 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 = polys[3-9]_x+";"+polys[3-9]_y+"\n" line 8 = rects_x +";"+rects_y+"\n" line 9 = closedpoly_x+";"+closedpoly_y+"\n" line 10 = parallelogram_x+";"+parallelogram_y"\n" line 11 = 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
It is best to prepare / format the student reply in clientside javascript. However in wims language you could use something like this for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...) note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25 rep = !line 7 of reply rep = !translate ';' to '\n' in $rep pts = 5 # 5 points for polygon x_rep = !line 1 of $rep y_rep = !line 2 of $rep tot = !itemcnt $x_rep num_poly = $[$tot/$pts] idx = 0 !for p=1 to $num_poly !for s=1 to $pts !increase idx X = !item $idx of $x_rep Y = !item $idx of $y_rep # do some checking !next s !next p
attention: for command argument 'closedpoly' only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.
technical: all 10 'draw primitives' + 'text' will have their own -transparent- PNG bitmap canvas. So for example there can be a points_canvas entirely separated from a line_canvas. This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn) This in contrast to many very slow do-it-all HTML5 canvas javascript libraries. The mouselisteners are attached to the canvas-div element.
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. 3 and 5, in the list of command 'multifill', are filled (if the object is fillable...and not a line,segment,arrow or point...)
if not set all fillcolors (for circle | triangle | poly[3-9] | closedpoly ) will be 'stroke_color' , 'fill_opacity'
use these up to 6 colors for the draw primitives used by command 'multidraw obj_type_1,obj_type_2...obj_type_n
wims will not check if the number of colours matches the amount of draw primitives...
always use the same sequence as is used for 'multidraw'
can also be used with command 'userdraw clickfill,color' when more than one fillcolor is wanted. in that case use for example replyformat 10 ... reply=x1:y1:color1,x2:y2:color2... the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors if more control over the used colours is wanted , see command colorpalette color1,color2...
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, when the command 'multidraw' is used multidraw circles,points,lines,triangles objects 'points' and 'lines' may additionally be 'drawn' by direct input (inputfields) all other objects must be drawn with a mouse
in case of circle | circles a third inputfield for Radius (R) is added. the radius must be in the x/y coordinate system (x-range) and not in pixels...students don't think in pixels. note: R-values will not snap-to-grid
in case of line(s) | segment(s) | arrow(s) the user should write x1:y1 in the first inputfield and x2:y2 in the second. These 'hints' are pre-filled into the input field. other coordinate delimiters are ";" and "," e.g. x1;y1 or x1,y1. An error message (alert box) will popup when things are not correctly...
in case of a triangle | poly3, three inputfields are provided.
in case of 'text' and multiuserinput=1 , 3 inputfields will be shown : x,y,text
in case of 'text' and multiuserinput=0 , 1 inputfield will be shown : text ... a mouse click will place the text on the canvas.
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...)
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 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_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...
(xc : yc) center of circle diagram in xrange/yrange
radius in pixels
data+color list: a colon separated list of raw data and corresponding colours canvasdraw will not check validity of colornames... in case of trouble look into javascript debugging of your browser
example data+colorlist : 32:red:65:green:23:black:43:orange:43:yellow:14:white
the number of colors must match the number of data.
if defined 'fillpattern some_pattern' then the pie pieces will be filled with the respective color and a fill pattern... the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,...
use command "'opacity' to adjust fill_opacity of colours
use command 'legend' to automatically create a legend using the same colours as pie segments unicode allowed in legend expect javascript trouble if the amount of 'pie-slices', 'pie-colours' 'pie-legend-titles' do not match a javascript console is your best friend... use command 'fontfamily' to set the font of the legend.
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)
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...
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
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
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
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 ...
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.
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
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)
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 color multiple areas may be selected multiple colors may be provided using commands colorpalette color1,color2,color3,... or multifillcolors color1,color2,color_3,... use replyformat 10 for checking the user click color ... reply=x1:y1:color1,x2:y2:color2... attention: this will not work for pattern filling, because the pattern image is only generated once and after creation can not be changed ! the opacity of this image on a separate canvas is set to 0.01 and not 0 (!!)...in the 'fill algorithm' the opacity of the matching pixels is set to 1
dotfill : fill the clicked area with a dot pattern; use command linewidth to change dot size
diamondfill : fill the clicked area with a diamond pattern
hatchfill : fill the clicked area with a hatch pattern
gridfill : fill the clicked area with a grid pattern
textfill: fill the clicked area with a repeating string userdraw textfill,blue,some_text use command fontfamily to adjust text style and size
'clickfill | pattern filling' in general: the clicks may be set 'snaptogrid' can be used together with command 'floodfill' or 'fill' always use together with command 'clearbutton some_text' for removal of all click_colored areas the function read_canvas() will return the click coordinates in the sequence of the user clicks 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" , 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 button (e.g. event.which != 1 : all buttons but left)
use a prefix 'filled' or 'f' to set fillable objects filled. (fcircles,filledcircles etc)
use "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...
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
usable for commands numberline and grid or combinations thereof
use these x-axis num1...num_n values instead of default xmin...xmax
in case of command 'grid' . there is no need to use keyword axisnumbering
use command axis to have visual x/y-axis lines (see command grid
use command "fontcolor", "fontfamily" to adjust font defaults: black,12,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
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 ...
keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
may be used for points or other things requirering labels
only active for commands text and string (e.g. objects in the drag/drop/onclick-librariy
in case of inputfields the inputfield will be centered x and y on it's coordinates. for example: inputs 1,1,10,? point 1,1,red the point will be completely invisible note: keyword 'xyoffset' will also provide centering if used with input(s),color
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)
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...
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
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 ...
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)
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...
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 !!