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  
-18/6	- solved small issue with removal of userdraw circle	
        - added some info on 'sgraph' (...)
        - increased value MAX_INT from 64 -> 128 : this is used for several arrays in C 
-21/6	- corrected command jsplot : now more complex(...) functions may be used.
-23/6	- added command 'centerstring color,y,text' for placing a x-centered text in the canvas 
	- added "replyformat 24" read all inputfields/textareas even those set 'readonly'  
	 "replyformat 15" will only report inputfields/textareas set 'write' (eg not set 'readonly')

-27/6   


	- removed some '\n' from js include code
-28/6	- corrected preference behaviour of commands 'zoom' and 'mouse'
          ('mouse' was only active when 'zoom' function was called before 'mouse')
          Now the sequence is not important. However  both commands should be called at the end of the script 
        - added 
          'userdraw hline,color'
          'userdraw hlines,color'
          'userdraw vline,color'
          'userdraw vlines,color'
        - reverted some correction mechanism for grid / axisnumbering when zooming out...need to rething 
        - changed command 'barchart' : now "unlimited" barchart commands will be plotted in a single graph.
-29/6	- added mousex / mousey commands : just show x or y values of mouse coordinates
-30/6	- corrected command 'linegraph'
	- added 'margin-left:auto;margin-right:auto' to canvas_div
	- added 'margin-bottom:4px' to tooltip_placeholder_div
	- added fill/stroke opacity to js clock
-1/7	- corrected typo in 'clock'
	- corrected read_canvas() replyformat 18 : reading user modified clock values H:M:S could be negative...
-2/7	- layout of [H+] [M+] [S+] and [H-] [M-] [S-] buttons in analogue interactive clock 




