4/10/2013

Preliminary version. All javascript code is generated by 'C-program'
It will be used and tested to replace "flydraw" , "GeoGebra" and "flyapplet" in Schaersvoorde modules.
(on Leiden mirror and intranet servers only)

Tested on : 
Microsoft IE10
Gecko browsers (Firefox > 17)
Opera (>9)

Unadressed issues at this point : 
-- OEF interface
-- Some bitmap operations (like copyresize etc)
-- Isolate static javascript code  components/functions from C-"programs"
   (first need to solve  re-draw issues; managing multiple canvasses in drag/click library)
   
For implemented commands: see canvasdraw.html
For demo: see demo-directory.
For live testing: use "directexec" module on Leiden mirror.
or search keywords 'html5' 'canvas' om leiden mirror 




- 4/10  added missing "userdraw line,color" "userdraw lines,color"
- 5/10  added missing "userdraw rect,color" "userdraw roundrect,color" "userdraw triangle,color"
- 6/10  corrected syntax "fill" == "floodfill" = pixel filling to a border 
- 7/10  added arc to shape_library
- 8/10  added specific removal of a 'click_filled' area. 
	size of 'measuring rectangle' may be tuned with "clickfillmarge" 
	default distance is 20 pix from original 'fill click'
- 9/10  added parallel to shape_library
- 10/10 added missing "userdraw polygone,color"
- 12/10 added support for multi-canvasses in a single html-page
	by using unique names for all potential conflicting functions 
	(experimental work in progress)
	reading of useractions in canvas is only possible for a single instance (for now)
- 13/10 corrected hexcolor input
- 15/10 circle x,y,radius(px),color will scale/resize on zooming (like all other draggable 'massive' objects)
- 18/10 corrected tooltip to work / integrate in 'real' wims modules 
	multiple instances of tooltip are allowed (as ofcourse is true for multiple canvas)
- 19/10 ellipse x,y,rx,ry,color is draggable/clickable and will scale/resize on zooming (like all other draggable 'massive' objects)
	added "use_rotate" argument to shape library
- 20/10 added testresults flydraw versus canvasdraw.
	tried to improve 'axisnumbering' in command 'grid' ( avoiding number overlap )
- 21/10 added commands:
	xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string-n
	yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string-n
	to automate filling axis with text insteadof default numbering xmin...xmax
	freestyle x/y-axistext move with panning (e.g stay in visual image)
	update 'drag curve fill mathml-input' example (selective removal of filled area)
- 22/10 grid: x/y major tics and x/y minor tics now different
	add command "fontcolor color" (previously fontcolor=strokecolor) now x/y axis-texts color may be different from axis / xy-tics color

- 24/10 add command "piechart xc,yc,radius,'data+colorlist'"
- 25/10 add command "legend string1:string2:...:string_n" to add an automatically sized legend to a graph 
	add command "barchart x1:y1:color1:x2:y2:color2...x_n:y_n:color_n" to automate generation of barchart
	to be used together with commands 'grid'. May be combined with freestyle x-axis / y0-axis text (commands 'xaxis' 'yaxis')
- 26/10 add command "linegraph x1:y1:x2:y2...x_n:y_n" : may be further controlled by commands 'strokecolor','linewidth','dashed','dashtype'
	to be used together with commands 'grid'. May be combined with freestyle x-axis / y0-axis text (commands 'xaxis' 'yaxis')
	Many different linegraphs may be used in a single plot.
	add commands "userdraw rects,color" "userdraw roundrects,color" for drawing multiple rectangles 
	(for example to be used for a barchart created by students)
- 27/10 add command "userdraw text,color" work in progress...just a single char, for now (no answer_type,yet)
	need to find a way to bypass browser differences...using 'String.fromCharCode(evt.keyCode);' is not really a safe method ?
	Would be nice to have some feedback (...)
- 28/10 preparing for adding all 'text' commands to drag / click library 
- 29/10 add horizontal text to drag / onclick
	vertical or rotated text can not be set drag / onclick, 
	because the mouse coordinates do not follow the transformation matrix if in the proximity of a text-object.
	(it is ofcource possible, but at a very very high price)
- 30/10 Finished command 'userdraw text,color'
	Any string of 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.
- 01/11 Added 'userdraw text,color' to reply types
- 03/11	Added check on canvas-support in function 'create_canvas()'; 
	try(document.createElement('canvas');)catch(e){alert("no support");return;} 
	E.g all non supported browsers will be excluded...no intention to offer 'canvas glue' library for IE < 9
	Just use a fairly recent Firefox / Opera / Chrome
- 08/11 Added commands 
	"copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,filename_URL"	and "copy x,y,x1,y1,x2,y2,filename_URL" 
	Todo: check compatibility...I'm not sure it works the same as in 'flydraw'
- 11/11 If xrange / yrange is not given : 
	xmin = 0 xmax = xsize
	ymin = 0 ymax = ysize
	(was x/y-range -10,10)
	Preparing for command clock (work in progress)
- 12/11 Multiple clocks may be set interactive ; read_canvas() will read all active clocks in H:M:S 
	Add argument 'hourglass type' to controle appearance of analogue clock
	Add basic interactivness
	(work in progress)
- 13/11 Added interactive=2 (multiple choice  / onclick) to select a single clock
	clock x,y,r(px),H,M,S,type hourglass,interactive,H_color,M_color,S_color,background_color,foreground_color
- 14/11 implemented own versions of "tolower()" and "toupper()"...
	I can not use the normal implementations found in 'ctypes.h' for this purpose, due to a bug in FreeBSD's C-library
	(only when using canvasdraw in a 'chroot' environment , giving : Undefined symbol "_ThreadRuneLocale)
	Temporarily removed check on 'valid wims-session' : it is not working for a 'chroot' environment (TODO correct this !!) 
- 15/11 changed basic syntax of command clock : all colours are now optional
	clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]  
	default colours: clock 0,0,60,4,35,45,1,2,[space]
	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 
- 16/11 setting & reading clock (preliminiary: for now just html-buttons for adjusting H,M,S...should be active fields in canvas...) 
- 27/11 improved plotting of asymptotic curves
	correction of zoom_buttons (wrong panning in wrong direction...)
- 29/11 copy & copyresized of external images : preparing for drag&drop (outside the drag&drop shape library)
- 28/12 in case of command 'mathml' , look for 'mathml0' to trigger javascript:read_mathml() if no other ineractiveness was previously defined
	(was using keyword 'input' but changed wims_mathml to use a styled textarea as input...)
2014
- 22/1  Corrected commands with "pi"... javascript did not calculate the x-value...
	xaxis x_value:x_text:x_value:x_text:x_value:x_text....
	yaxis y_value:y_text:y_value:y_text:y_value:y_text....
	example (unicode allowed; no html)
	xaxis -4*pi:-4\u03c0:-3*pi:-3\u03c0:-2*pi:-2\u03c0:-1*pi:-\u03c0:pi/2:\u03c0/2:pi:\u03c0
- 23/1	Added a 'x' to pan/zoom-buttons (command "zoom color")
	When 'x' is pressed the page will reload (location.reload();) so the panned/zoomed image or drawing will be reset to it's original state.
	(On multiple panning/zooming the mouse coordinate display will get 'sluggish' and not very quick in response)
- 29/1  - Corrected js-fontfamily kludge...when something like "fontfamily italic 14px Ariel"
	was set, the argument fontsize of command "mouse color,fontsize" was ignored...due to the strict syntax in html/js
	fontfamily [type] [size]px [family] 
	- Now "mouse red,24" will default to font '24px Ariel'
	Command "intooltip tooltip_text" will accept html-text, images and now also Mathml as tooltip_text
	- read_canvas() : Added 'replyformat 21' : verbatim coordinate output (just for use in my existing checkfile)
	will output words (x1:y1) (x2:y2) (x3:y3) ... (x_n:y_n)
- 31/1  - read_canvas() : Added 'replyformat 22' : single array output (just for use in my existing checkfile)
	will output reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n
	
	- corrected tooltip when using images as 'linktext'
	- added commands 'xlabel some_string' ylabel some_string' 
	- commands 'xlabel' 'ylabel' only depend on command 'grid' (eg without 'axis' and/or 'axisnumbering')
	- command 'legend string1:string2:string3:..:string_n' may now be used with any 'grid' (e.g. not only for barchart/linegraph/piechart)
-1/2	- add command 'legendcolors color1:color2:color3:...:color_n'
          barchart & piechart will use -ofcourse- the same colours for legend
          for all other legends, we can specify. 
          If legendcolors was not set , the default stroke_color will be used in a 'legend'
          
-3/2	- solved(?) some strange fill issues (pixel manipulation) added demo 
-3/2	- added forgotten 'readonly' attribute to js-function 'draw_inputs()'
-5/2	- if inputfield has attribute 'readonly', do not read the value when using javascript:read_canvas();
	  eg only active inputfields will be read with read_canvas();
	- add command 'dsegment' as alias for dashed segment
-6/2	- added default fontfamily settings to 'legend', 'xlabel' and 'ylabel' ; size may be set by command 'fontsize'
	  the rest of the gridfonts (numbering or x/yaxis text) is determined by the 'fontfamily'
	  (something like:fontfamily bold italic 24px Courier)
	- added forgotten filling of an arc ;command 'filledarc'
-7/2	- corrected x-y mixup in case xrange/yrange was forgotten (eg xrange = 0 px ,sizex px)
	- command "bgimage url" will scale to fit background image
-8/2	- corrected syntax in bgimage:
	  canvas_div.style.background-size --> canvas_div.style.backgroundSize
	  
-12/2	- removed reading of mathml-inputfield in canvas (only "replyformat 16" will read it)
	  Using generic js-functions in wims-pages to read all mathml-inputs (including the ones in a canvas image !)
-19/2	- added command 'animate type' as primitive animation ; only 'point' on curve is implemented
-27/2	- solved nasty issue with "drawing on top of external image"  with copy / copyresized
	  - there is no way to paint on top of an external image loaded into a canvas...
	  - an external image copied into a canvas / resized etc... can not be set as CSS backgroundImage of a div... (at least in firefox)
	  - an external image copied into a canvas / resized etc... can be set as background of the document.body...
	  We just use the URL of the image...and add some CSS to it (no-repreat / Size / Position) and det the URL to the backgroundImage of the main div
	  
-28/2	- tried to correct copy/ropyresized ; using image as background image of div (e.g. no canvas !)
	  The commands are still not equal to Flydraw: I'm giving up on this !!
	  It works if not too much cropping is required.
-3/3	- synchronized commands "arrow" and "arrow2" with flydraw syntax; e.g. arrow x1,y1,x2,y2,head_in_px,color
-14/3	- forgotten 'break;'
-21/3	- corrected spurious segfault on Gentoo 64 bits (leiden) and OpenSuSE-32 : 
	    char *temp = str_replace( getstring(infile,1),"blah","beh"); 
	    Changed into:
	    char *temp = getstring(infile,1); 
	    if( strstr(temp,"blah") != 0 ){ temp = str_replace( temp ,"blah","beh");} 
	    On 32/64 bits FreeBSD ; 32/64 bits OpenBSD no problems
	    segfault occured in case  "blah" was not present in "temp"  (and no replacement was made) and string length wos big
	    Probably heve to look into str_replace() !

-23/3	- simplified buffer usage : now js-include file in wims-getfile-directoy is standard.
	  The rest is printed in a fairly small buffer and printed to stdout at the end of parsing the fly-script.
	  No option anymore to gzip the include.
	  canvasdraw now only works in correct wims_environment : e.g. ./canvadraw < fly.txt  will not work anymore
-25/3	- userdraw functions only active if wims $status != done
	  added keyword 'status' to disable this default behaviour (e.g. pupils may draw in canvas when wims $status=done 
-2/4	- added command / keyword 'snaptogrid' : a userdrawing will snap to the given grid...
	  grid 1,1,black : it will snap to all major grid lines 'n'
	  grid 1,1,black,2,2,6,grey  : will snap to all minor grid lines n/2 
	  todo: other gridfill commands may use snaptogrid
-5/4	- corrected flaw in 'normal' userdraw (without snaptogrid)

-8/4	- added to wims_svn
-11/4	- corrected flaw in snaptogrid : now works correctly for dividers xminor  and yminor (only if they are even dividers e.g. 2,4,6,8 etc)
-14/4   - added 'snaptogrid' to gridfill and dotfill (e.g. userdraw will snap to the grid)
-18/4	- added keyword 'userinput_xy' : if set 2 or 3 inputfields will be shown...the pupil will be able to 'draw' with mouse and/or by giving  a x-value and y-value (or radius-value)
	  for now: only implemented in 
	  'userdraw segment,color'
	  'userdraw segments,color'
	  'userdraw point,color'
	  'userdraw points,color'
	  'userdraw circle,color'
	  'userdraw circles,color'
	  'userdraw crosshair,color'
	  'userdraw crosshairs,color'
	  'userdraw arrow,color'
	  'userdraw arrows,color'
	  
-20/4	- work in progress: add command 'sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color'
	  for use as very (!) primitive 'broken axis graph'
-21/4	- corrected command grid in case xmin > 0  and / or ymin > 0
-22/4	- added semicolon ; as 'new line separator' (Marina Cazzola)
-23/4	- corrected sgraph
-24/4	- add userdraw polyline,color
	  add keyword usertextarea_xy (...)
-25/4	- add 'nok' button to remove last item from userdraw arrays
-5/5	- added commands 'ylogscale' , 'xlogscale' , 'xylogscale' , 'xlogbase' and 'ylogbase'
-10/5	- added 'userdraw polygon,color'  'userdraw line,color' and 'userdraw lines,color' to userinput_xy
	  (just more copy and paste "programming")
-11/5	- forgotten to clearRect()
-11/5	- corrected problems with ';' in html-text / text-arguments (the ';' is a command separator ... added 22/4)
-11/5	- corrected x-axis numbering in case of 'ylogscale'
-11/5	- added js function safe_eval() to command 'userinput_xy' to "safely" evaluate math inputs like 10^2 or sqrt(5)
	  corrected y-axis numbering in case of 'xlogscale'
-16/5	- command 'precision' before ylogscale / xlogscale will set the number of decimals of the x-axis / y -axis (a local variable precision is set)
	  if the mouse coordinate display or the student reply -in case of 'userdraw'-  needs a higher precision, just use as last command something like 'precision 10000' 
	  corrected mixup between userdraw polyline / polygon...
-18/5	- add replyformat 23 : used for 'userdraw polyline' : filtering out the second click on the same (+/- 5 px) point
	    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
	- removed command 'debug'
-19/5	- added keywords 
	  'xsnaptogrid' : will snap to xmajor (or xminor, if defined)
	  'ysnaptogrid' : will snap to ymajor (or yminor, if defined)
	  'snaptogrid'  " will snap to both xmajor and ymajor (or xminor and yminor, if defined) 
-20/5	- added command 'affine a,b,c,d,tx,ty' and keyword 'killaffine'  (Marina Cazzola)
	  note: mouse coordinates (for drag / onclick) are not transformed....TODO)
-21/5	- added forgotten commande 'dvline' and 'dhline'
	  corrected command 'rays color,xc,yc,x1,y1....xn,yn' (it was using pixels instead of x/y-range coordinates)
	  removed function get_double() from canvasdraw.
-22/5	- work in progress: added command 'levelcurve' 
          I'm not sure if this should be implemented in javascript...
-23/5	- command 'levelcurve' : the quality of the curves is not to be compared with the 'Flydraw levelcurve'
	  level curve may be set 'onclick' or 'draggable'; every single curve has an unique identifier
-27/5	- javascript variable 'precision' was gone fishing 
-30/5	- added commands "trace_jsmath some_js_math_function_in_x" and "jsmath some_js_math_function_in_x" 	  
-31/5	- slightly modified "trace_jsmath some_js_math_function_in_x" and "jsmath some_js_math_function_in_x"
	- work in progress: added keyword 'setlimits'  
-1/6	- added keyword 'setlimits'
	  allowing all combinations of 'setlimits', 'trace_jsmath' ,'jsmath' , 'userinput_xy+userdraw' , mouse , drag etc
-2/6    - BPR: replace the dependance with libmatheval to the wims evaluation.	  	  
-5/6	- work in progress: 
	    added command jscurve color,formula_in_x
	    for plotting curves using clientside calculations: formula is verbatim in page-source
	    added a lightweight javascipt function to convert math into js-math (only suitable for basic stuff)
-6/6	- removed randomness from command clock (was annoying)
	- corrected typo "};else{" in javascript  replyformat 7	    
	- changed command 'grid' : now zooming and axisnumbering is slightly better...but it stays amateur scribling, grrrr...    
	- added forgotten rotate&angle arguments to commands 'string / text'
	  todo CHECK THE REST !!
	- corrected inbalance in save() / restore() causing annoying problems in command 'arc'  
-7/6	- corrected more inbalance in save() / restore() in 'draw_arrow()'
	  added commands 'userdraw arrow2' and 'userdraw arrows2'
	- added 'replyformat -1' to disable the javascript read_canvas() function 
	  (in case you want to draw something...but not send the drawing to wims..) 
-8/6	- inputfields/textarea's in canvasimage will be cleared and set 'readonly' when wims status variable is 'done'
	  overide this default behaviour with keyword 'status' or 'nostatus'
-10/6	- added '(xy)snaptogrid' to drag library
-15/6	- added timeout for floodfill and filltoborder: the canvas was not yet 'drawn' in current setup , when floodfill was called...
 	- mouseup() in draglibrary corrected 
-17/6	- modified command 'piechart' and 'legend' : now multiple piecharts with legends may be present in a single canvas image
          (barchart and linegraph are closely linked to grid: there can be multiple linegraphs in a single grid...but there can only be 1 grid)
	- adapted 'safe_eval' to accept numbers like 2.345*10^5 (previous version only accepted 10^5...)
	  added some alert message when inputstring has unfinished calculations , 'like 123 + 10^5/678'
	- added flag to avoid multiple including of safe_eval, usd by several optional things
	- if wims_status='done' all 'drawing' related input fields are removed  (eg. userinput_xy etc) 
	- zoom in y-direction was gone fishing...
	- fix stupid error in 'replyformat 23' 
	- solved issue with precision (multiple roundings  x <--> px) in read_canvas() and js-functions x2px(x) / px2x(px):last precision in script is used for reply-precision  
	
	
