WebSVN – wimsdev – Blame – /trunk/wims/src/Misc/canvasdraw/canvasutils.c

Rev	Author	Line No.	Line
15111	schaersvoo	1	#include "canvasdraw.h"
		2	/*
		3	collection of javascript utilities (with no configurable parameters)
		4	*/
		5	void add_javascript_function(){
16643	schaersvoo	6	#ifdef KATEX_INSTALLED
16642	schaersvoo	7	char *mathjax="centered(xml_div,obj);";
		8	#else
		9	char *mathjax="setTimeout(function(){centered(xml_div,obj)},100);";
		10	#endif
15111	schaersvoo	11	int i;
		12	int type;
		13	for(i = 0 ; i < MAX_JS_FUNCTIONS; i++){
		14	/*
		15	fprintf(stdout,"checking js_function[%d] = %d<br />",i,js_function[i]);
		16	*/
		17	if( js_function[i] == 1){
		18	switch(i){
		19
15690	schaersvoo	20	case JS_ARROWHEAD:
		21	/* draw an arrowhead on object ; arrowhead on (x:y) from direction (x0:y0) */
		22	fprintf(js_include_file,"\n/* draw an arrowhead on object ; arrowhead on (x:y) from direction (x0:y0) */\
		23	function draw_arrowhead(x,y,x0,y0,ctx){\
		24	var angle = Math.atan2(x - x0,y - y0) + Math.PI;\
		25	var pie = Math.PI/6;\
		26	ctx.save();\
		27	ctx.fillStyle=ctx.strokeStyle;\
		28	ctx.beginPath();\
		29	ctx.moveTo(x,y);\
		30	ctx.moveTo(x - (arrow_head * Math.sin(angle - pie)),y - (arrow_head * Math.cos(angle - pie)));\
		31	ctx.lineTo(x,y);\
		32	ctx.lineTo(x - (arrow_head * Math.sin(angle + pie)),y - (arrow_head * Math.cos(angle + pie)));\
		33	ctx.closePath();\
		34	ctx.stroke();\
		35	ctx.fill();\
		36	ctx.restore();\
		37	};");
		38	break;
15111	schaersvoo	39	case JS_LOAD_IMAGE:
		40	fprintf(js_include_file,"\n/* get_image_from_url */\
		41	var image_cnt = 0;\
		42	if( typeof(image_patterns) !== 'object'){var image_patterns = [];};\
		43	var get_image_from_url = function(url){\
		44	var idx = Math.ceil(1000*(Math.random()));\
		45	var canvas = create_canvas%d(idx,xsize,ysize);\
		46	canvas.style.visibility = 'hidden';\
		47	var ctx = canvas.getContext(\"2d\");\
		48	var img = new Image();\
		49	img.src = url;\
		50	img.onload = function(){\
		51	var pat = ctx.createPattern(img,\"repeat\");\
		52	image_patterns.push(pat);\
		53	};\
		54	};",canvas_root_id);
		55	break;
		56
		57	case JS_SAFE_EVAL:
		58	/* to avoid easy js-code injection...but is it a real problem ? */
		59	fprintf(js_include_file," \n/* add safe eval function */function safe_eval(exp){\
		60	exp = exp.replace(/pi/g,'3.14159');\
		61	if(exp.indexOf('^') != -1){\
		62	exp = exp.replace(/[a-zA-Z]/g,' ');\
		63	exp = exp.replace(/\\*10\\^-/g,'e-');\
		64	exp = exp.replace(/\\*10\\^/g,'e+');\
		65	exp = exp.replace(/10\\^-/g,'1e-');exp = exp.replace(/10\\^/g,'1e+');\
		66	exp = eval(exp);\
		67	if(isNaN(exp)){alert(\"invalid input\\ntry just a real number \\ne.g. no calculations...\");return null;}\
		68	return exp;\
		69	};\
		70	var reg = /(?:[a-z$_][a-z0-9$_]*)\|(?:[;={}\\[\\]\"'!&<>^\\\\?:])/ig;\
		71	var valid = true;\
		72	exp = exp.replace(reg,function($0){\
		73	if(Math.hasOwnProperty($0)){\
		74	return \"Math.\"+$0;\
		75	}\
		76	else\
		77	{\
		78	valid = false;\
		79	}\
		80	}\
		81	);\
		82	if( !valid ){\
		83	alert(\"hmmm \"+exp+\" ?\"); exp = null;\
		84	}\
		85	else\
		86	{\
		87	try{ exp = eval(exp); } catch(e){alert(\"Invalid arithmetic expression\"); exp = null;};\
		88	};\
		89	return exp;\
		90	};");
		91	break;
		92
		93	case JS_RAWMATH:
		94	fprintf(js_include_file,"\n/* add_rawmath() */\
		95	function rawmath(i){\
		96	i=i.toLowerCase();\
		97	i=i.replace(/\\ /g,\"\");i=i.replace(/\\\\/g,\"^\");\
		98	if(i.indexOf(\"e+\")!=-1){i=i.replace(\"e+\",\"*10^\");};\
		99	if(i.indexOf(\"e-\")!=-1){i=i.replace(\"e-\",\"*10^-\");};\
		100	i=i.replace(/\\\\/g,\"*\");\
		101	if(i.charAt(0)==\"*\"){i=i.substring(1,i.length);};\
		102	var fun=[\"asin\",\"acos\",\"atan\",\"sin\",\"cos\",\"tan\",\"log\",\"ln\",\"pi\",\"e\",\"x\",\"y\"];\
		103	var cons=[\"pi\",\"e\",\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\"];\
		104	var cntl = 0;var cntr = 0;\
		105	var len = i.length;\
		106	for( var p = 0;p < len; p++){\
		107	if(i.charAt(p) == '('){cntl++;}\
		108	if(i.charAt(p) == ')'){cntr++;}\
		109	};\
		110	if(cntl != cntr){alert(\"unmatched parenthesis !!\");return null;};\
		111	for(var p = 0; p < 12 ; p++){\
		112	for(var d = 0; d < 12 ; d++){\
		113	while(i.indexOf(cons[d]+\"\"+fun[p])!=-1){\
		114	i = i.replace(cons[d]+\"\"+fun[p],cons[d]+\"*\"+fun[p]);\
		115	};\
		116	while(i.indexOf(fun[p]+\"\"+cons[d])!=-1){\
		117	i = i.replace(fun[p]+\"\"+cons[d],fun[p]+\"*\"+cons[d]);\
		118	};\
		119	};\
		120	};\
		121	if(i.indexOf(\"(\")!=-1){\
		122	for(var p = 0;p < 12; p++){\
		123	if(i.indexOf(cons[p]+\"(\")!=-1){\
		124	i = i.replace(cons[p]+\"(\",cons[p]+\"*(\");\
		125	};\
		126	if(i.indexOf(\")\"+cons[p])!=-1){\
		127	i = i.replace(\")\"+cons[p],\")*\"+cons[p]);\
		128	};\
		129	};\
		130	i = i.replace(/\\)\\(/g,\")*(\");\
		131	};\
		132	return i;\
		133	};");
		134	break;
		135
		136	case JS_PLOT:
		137	fprintf(js_include_file,"\n/* jsplot() */\
		138	var x_anim_points;var y_anim_points;var animation_steps;var animation_funs;\
		139	function jsplot(canvas_type,funs,linewidth,color,opacity,use_dashed,dashtype0,dashtype1,trange,plotsteps,use_parametric,use_animate,origin){\
		140	var obj = create_canvas%d(canvas_type,xsize,ysize);\
		141	var ctx = obj.getContext(\"2d\");\
		142	ctx.clearRect(0,0,xsize,ysize);\
		143	animation_funs = funs.length;\
		144	function eval_jsmath(x,func){return parseFloat(eval(func));};\
		145	if(origin == 0 ){\
		146	if( typeof(multilinewidth) !== 'undefined' && multilinewidth != null ){ linewidth = multilinewidth;};\
		147	if( typeof(multistrokecolors) !== 'undefined' && multistrokecolors != null ){ color = multistrokecolors;};\
		148	if( typeof(multistrokeopacity) !== 'undefined' && multistrokeopacity != null ){ opacity = multistrokeopacity;};\
		149	if( typeof(multidash) !== 'undefined' && multidash != null ){use_dashed = multidash;};\
		150	};\
		151	x_anim_points = [];y_anim_points = [];var idx=0;\
		152	if( use_parametric == 1){\
		153	for(var i = 0 ; i < animation_funs; i=i+2){\
15351	bpr	154	funs[i] = funs[i].replace(/t/g,'x');\
		155	funs[i+1] = funs[i+1].replace(/t/g,'x');\
		156	funs[i] = funs[i].replace(/xan/g,'tan');\
		157	funs[i+1] = funs[i+1].replace(/xan/g,'tan');\
15111	schaersvoo	158	var fun_x = to_js_math(funs[i]);\
		159	var fun_y = to_js_math(funs[i+1]);\
		160	if(fun_x == null \|\| fun_y == null){alert(\"Syntax Error...\\nAttention : try use very precise notation !\\nlike :\\n6(0.25)^(1.23)\\n1/(sin(5x))\\n(3x+4)/(x^(2pi)) \");return;};\
		161	try{ parseFloat( eval_jsmath( px2x(0),fun_x ) );}catch(e){alert(\"\\nSyntax Error...\\nAttention : try use very precise notation !\\nlike :\\n6(0.25)^(1.23)\\n1/(sin(5x))\\n(3x+4)/(x^(2pi))\");return;};\
		162	ctx.lineWidth = linewidth[i] \|\| linewidth;\
		163	ctx.strokeStyle='rgba('+color[i] \|\| color +','+opacity[i] \|\| opacity +')';\
		164	if(use_dashed[i] == \"1\" \|\| use_dashed == \"1\"){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{ctx.mozDash =[dashtype0,dashtype1];}};\
		165	var y1;var x1;var y2;var x2;\
		166	ctx.beginPath();\
		167	var tmin = trange[0];var tmax = trange[1];\
		168	var step = parseFloat((tmax - tmin)/plotsteps);\
		169	for(var p = tmin ; p < tmax; p = p+step ){\
		170	x1 = x2px(parseFloat(eval_jsmath(p,fun_x)));\
		171	y1 = y2px(parseFloat(eval_jsmath(p,fun_y)));\
		172	x2 = x2px(parseFloat(eval_jsmath(p+step,fun_x)));\
		173	y2 = y2px(parseFloat(eval_jsmath(p+step,fun_y)));\
		174	x_anim_points[idx] = x1;y_anim_points[idx] = y1;idx++;\
		175	ctx.moveTo(x1,y1);\
		176	ctx.lineTo(x2,y2);\
		177	ctx.moveTo(x1,y1);\
		178	ctx.lineTo(x2,y2);\
		179	};\
		180	ctx.closePath();\
		181	ctx.stroke();\
		182	};\
		183	animation_funs = 0.5*animation_funs;\
		184	}else{\
		185	for(var i = 0 ; i < animation_funs; i++){\
		186	var fun = to_js_math(funs[i]);\
		187	if(fun == null){alert(\"Syntax Error...\\nAttention : try use very precise notation !\\nlike :\\n6(0.25)^(1.23)\\n1/(sin(5x))\\n(3x+4)/(x^(2pi)) \");return;};\
		188	try{ parseFloat( eval_jsmath( px2x(0),fun ) );}catch(e){alert(\"\\nSyntax Error...\\nAttention : try use very precise notation !\\nlike :\\n6(0.25)^(1.23)\\n1/(sin(5x))\\n(3x+4)/(x^(2pi))\");return;};\
		189	if(use_dashed[i] == \"1\" \|\| use_dashed == \"1\"){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{ctx.mozDash =[dashtype0,dashtype1];}};\
		190	ctx.lineWidth = linewidth[i] \|\| linewidth;\
		191	ctx.strokeStyle='rgba('+color[i] \|\| color +','+opacity[i] \|\| opacity +')';\
		192	var y1;var x1;var y2;var x2;\
		193	ctx.beginPath();\
		194	for(var p = 0 ; p<xsize;p++){\
		195	x1 = px2x(p);\
		196	y1 = y2px(parseFloat(eval_jsmath(x1,fun)));\
		197	x2 = px2x(p+1);\
		198	y2 = y2px(parseFloat(eval_jsmath(x2,fun)));\
		199	x_anim_points[idx] = p;y_anim_points[idx] = y1;idx++;\
		200	if(Math.abs(y2-y1) < ysize ){\
		201	ctx.moveTo(p,y1);\
		202	ctx.lineTo(p+1,y2);\
		203	};\
		204	};\
		205	ctx.closePath();\
		206	ctx.stroke();\
		207	};\
		208	};\
		209	if( use_animate == 1 ){animation_steps = idx;animate_this();}\
		210	};",canvas_root_id);
		211	break;
		212
		213	case JS_MATH:
		214	fprintf(js_include_file,"\n/* to_js_math() */\
		215	function to_js_math(math_fun){\
		216	if(math_fun == null){return;};\
		217	var infun=[\"sqrt\",\"^\",\"asin\",\"acos\",\"atan\",\"log\",\"pi\",\"abs\",\"sin\",\"cos\",\"tan\",\"e\"];\
		218	var outfun=[\"Math.sqrt\",\"Math.pow\",\"Math.asin\",\"Math.acos\",\"Math.atan\",\"Math.log\",\"(3.14159265358979)\",\"Math.abs\",\"Math.sin\",\"Math.cos\",\"Math.tan\",\"(2.718281828459045)\"];\
		219	var len = infun.length;var in_fun;var In_Fun;var out_fun;var w_cnt;\
		220	for(var p=0 ; p < len ; p++){\
		221	in_fun = infun[p];In_Fun = in_fun.toUpperCase();out_fun = outfun[p];w_cnt=0;\
		222	if(math_fun.indexOf(in_fun) != -1){\
		223	if(in_fun == \"^\"){\
		224	var tab = [];var small_trick = \"___small_trick___\";\
		225	while (math_fun.indexOf(\"(\") != -1){\
		226	math_fun = math_fun.replace(/(\$[^\\(\$]*\\))/g, function(m, t){tab.push(t);return (small_trick + (tab.length - 1));});\
		227	w_cnt++;if(w_cnt>1000){alert(\"hmmm \"+math_fun+\" ?\\nUse command plot for more complex math functions...\");return null;};\
		228	};\
		229	tab.push(math_fun);w_cnt = 0;math_fun = small_trick + (tab.length - 1);\
		230	while (math_fun.indexOf(small_trick) != -1){\
		231	math_fun = math_fun.replace(new RegExp(small_trick + \"(\\\\d+)\", \"g\"), function(m, d){return tab[d].replace(/(\\w)\\^(\\w)/g, out_fun+\"($1,$2)\");});\
		232	w_cnt++;if(w_cnt>1000){alert(\"hmmm \"+math_fun+\" ?\\nUse command plot for more complex math functions...\");return null;};\
		233	};\
		234	}\
		235	else\
		236	{\
		237	while( math_fun.indexOf(in_fun) != -1 ){\
		238	math_fun = math_fun.replace(in_fun,out_fun);\
		239	math_fun = math_fun.replace(in_fun,In_Fun);\
		240	w_cnt++;if(w_cnt>1000){alert(\"hmmm \"+math_fun+\" ?\\nUse command plot for more complex math functions...\");return null;};\
		241	};\
		242	};\
		243	};\
		244	};\
		245	for(var p=0 ; p < len ; p++){\
		246	in_fun = infun[p];In_Fun = in_fun.toUpperCase();w_cnt = 0;\
		247	if(math_fun.indexOf(In_Fun) != -1 ){\
		248	while(math_fun.indexOf(In_Fun) != -1){\
		249	math_fun = math_fun.replace(In_Fun,in_fun);\
		250	w_cnt++;if(w_cnt>1000){alert(\"hmmm \"+math_fun+\" ?\\nUse command plot for more complex math functions...\");return null;};\
		251	};\
		252	};\
		253	};\
		254	return math_fun;\
		255	};");
		256	break;
		257
		258	case INTERACTIVE:
		259	fprintf(js_include_file,"\n/* add mouse support */ var isTouch = (('ontouchstart' in window) \|\| (navigator.msMaxTouchPoints > 0));var getMouse = function(e,element){var mx,my;var offsetX = 0,offsetY = 0;while( ( element = element.offsetParent) ){offsetX += element.offsetLeft;offsetY += element.offsetTop;};if(isTouch){mx = e.pageX - offsetX;my = e.pageY - offsetY;}else{mx = e.clientX - offsetX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft);my = e.clientY - offsetY + (document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop);};return {x: mx, y: my};};");
		260	break;
		261	case USERDRAW_AND_ZOOM:
		262	fprintf(js_include_file,"\n/* add zoom support for multidraw */\
		263	function recalculate_userdraw(xmin0,ymin0,xmax0,ymax0){\
		264	function x_zoom(px){\
		265	var x = parseFloat(px*(xmax0 - xmin0)/xsize + xmin0);\
		266	return parseFloat(xxsize/(xmax - xmin) - xsizexmin/(xmax - xmin));\
		267	};\
		268	function y_zoom(py){\
		269	var y = parseFloat(ymax0 - py*(ymax0 - ymin0)/ysize);\
		270	return parseFloat(-1yysize/(ymax - ymin) + ymax*ysize/(ymax - ymin));\
		271	};\
		272	function r_zoom(r){\
		273	return r*(xmin0/xmin);\
		274	};\
		275	var len = userdraw_x.length;\
		276	var x;var y;var r;\
		277	for(var p=0;p<len;p++){\
		278	x = userdraw_x[p];\
		279	y = userdraw_y[p];\
		280	userdraw_x[p] = x_zoom(x);\
		281	userdraw_y[p] = y_zoom(y);\
		282	if( userdraw_radius[p] ){\
		283	r = userdraw_radius[p];\
		284	userdraw_radius[p] = r_zoom(r);\
		285	};\
		286	};\
		287	};");
		288	break;
		289
		290	case DRAG_AND_ZOOM:
		291	fprintf(js_include_file,"\n/* add zoom support for drag&drop */\
		292	function recalculate_dragdrop(xmin0,ymin0,xmax0,ymax0){\
		293	function x_zoom(px){\
		294	var x = parseFloat(px*(xmax0 - xmin0)/xsize + xmin0);\
		295	return parseFloat(xxsize/(xmax - xmin) - xsizexmin/(xmax - xmin));\
		296	};\
		297	function y_zoom(py){\
		298	var y = parseFloat(ymax0 - py*(ymax0 - ymin0)/ysize);\
		299	return parseFloat(-1yysize/(ymax - ymin) + ymax*ysize/(ymax - ymin));\
		300	};\
		301	var len = dragstuff.shapes.length;\
		302	var shape;var L;var x;var y;\
		303	for(var p=0;p<len;p++){\
		304	shape = dragstuff.shapes[p];\
		305	L = shape.x.length;\
		306	for(var i=0;i<L;i++){\
		307	x = shape.x[i];\
		308	y = shape.y[i];\
		309	dragstuff.shapes[p].x[i] = x_zoom(x);\
		310	dragstuff.shapes[p].y[i] = y_zoom(y);\
		311	};\
		312	};\
		313	};");
		314	break;
		315
		316	case JSPLOT_AND_ZOOM:
		317	fprintf(js_include_file,"\n/* add zoom support for jscurves */\
		318	function redraw_jsplot(){for(var p=0; p <= all_jsplots;p++){try{var fun = eval('js_plot'+p);fun();}catch(e){};};};");
		319	break;
		320
		321	case JS_ZOOM:
		322	fprintf(js_include_file,"\n/* add zoom support */\
		323	var x_min_start = xmin;var x_max_start = xmax;var y_min_start = ymin;var y_max_start = ymax;\
		324	var zoomcanvas = create_canvas%d(%d,xsize,ysize);\
		325	function redraw_canvas%d(key){\
		326	var xmin0 = xmin;var xmax0 = xmax;var ymin0 = ymin;var ymax0 = ymax;\
		327	switch(key){\
		328	case 0: xmin++;ymin++;xmax--;ymax--;break;\
		329	case 1: xmin--;ymin--;xmax++;ymax++;break;\
		330	case 2: xmin--;xmax--;break;\
		331	case 3: xmin++;xmax++;break;\
		332	case 4: ymin--;ymax--;break;\
		333	case 5: ymax++;ymin++;break;\
		334	case 6: xmin = x_min_start;xmax=x_max_start;ymin=y_min_start;ymax=y_max_start;break;\
		335	default: break;\
		336	};\
		337	if(xmin >= xmax){xmin = x_min_start;xmax = x_max_start;};\
		338	if(ymin >= ymax){ymax = y_max_start;ymin = y_min_start;};\
		339	if( typeof(recalculate_multidraw) === 'function'){recalculate_multidraw(xmin0,xmax0,ymin0,ymax0);redraw_userdraw();}\
		340	if( typeof(recalculate_userdraw) === 'function'){recalculate_userdraw(xmin0,ymin0,xmax0,ymax0);redraw_userdraw();}\
		341	if( typeof(redraw_grid) === 'function'){redraw_grid();};\
		342	if( typeof(redraw_jsplot) === 'function'){redraw_jsplot();};\
		343	if( typeof(recalculate_dragdrop) === 'function'){recalculate_dragdrop(xmin0,ymin0,xmax0,ymax0);dragstuff.valid = false;dragstuff.draw();};\
		344	return;\
		345	};\
		346	canvas_div.addEventListener(\"mousedown\",check_zoom_or_pan,false);\
		347	canvas_div.addEventListener(\"wheel\",wheel_zoom,false);\
		348	canvas_div.addEventListener(\"touchstart\",function(e){ e.preventDefault();check_zoom_or_pan(e.changedTouches[0]);},false);\
		349	function wheel_zoom(evt){\
		350	evt.preventDefault();\
		351	var key = 1;\
		352	if(evt.deltaY > 0 ){key = 0};\
		353	redraw_canvas%d(key);\
		354	return;\
		355	};\
		356	function check_zoom_or_pan(evt){\
		357	var mouse = getMouse(evt,zoomcanvas);\
		358	var my = mouse.y;\
		359	if(my < ysize - 30){ return; };\
		360	var mx = mouse.x;\
		361	var key = -1;\
		362	for(var p = 15 ; p < 106 ; p = p+15){\
		363	key++;\
		364	if(mx > xsize - p){\
		365	redraw_canvas%d(key);\
		366	return;\
		367	};\
		368	};\
		369	return;\
		370	};",canvas_root_id,ZOOM_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id);
		371	break;
		372
		373	case DRAW_FILL_PATTERN:
		374	fprintf(js_include_file,"\n /* add fill pattern */ \
		375	function create_Pattern(x0,y0,type,color){document.body.style.cursor = 'wait';var idx = Math.ceil(1000*(Math.random()));var canvas = create_canvas%d(idx,xsize,ysize);canvas.style.visibility = 'hidden';var ctx = canvas.getContext(\"2d\");var x;var y;var dx = 6;var dy = 6;ctx.lineWidth = 1;ctx.strokeStyle = color;ctx.fillStyle = color;var pat;\
		376	switch(type){\
		377	case 2: for( x = 0 ; x < xsize ; x = x + dx ){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,ysize);ctx.closePath();ctx.stroke();};for( y = 0 ; y < ysize; y = y + dy ){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(xsize,y);ctx.closePath();ctx.stroke();}; pat = ctx.createPattern(canvas,\"no-repeat\");break;\
		378	case 3: y = ysize;ctx.beginPath();for( x = 0 ; x < xsize ; x = x + dx ){ctx.moveTo(x,0);ctx.lineTo(xsize,y);y = y - dy;};y = 0;for( x = xsize ; x > 0 ; x = x - dx){ctx.moveTo(x,ysize);ctx.lineTo(0,y); y = y + dy;};ctx.closePath();ctx.stroke(); pat = ctx.createPattern(canvas,\"no-repeat\");break;\
		379	case 4: y = ysize;ctx.beginPath();for( x = 0 ; x < xsize ; x = x + dx ){ctx.moveTo(x,0); ctx.lineTo(xsize,y); y = y - dy;};y = 0;for( x = xsize ; x > 0 ; x = x - dx){ctx.moveTo(x,ysize);ctx.lineTo(0,y);y = y + dy;};y = 0;for( x = 0 ; x < xsize ; x = x + dx ){ctx.moveTo(x,0); ctx.lineTo(0,y); y = y + dy;};y = 0;for( x = 0 ; x < xsize ; x = x + dx ){ctx.moveTo(xsize,y);ctx.lineTo(x,ysize);y = y + dy;};ctx.closePath(); ctx.stroke(); pat = ctx.createPattern(canvas,\"no-repeat\");break;\
		380	case 5: for( x = 0 ; x < xsize ; x = x + dx ){for( y = 0 ; y < ysize ; y = y + dy ){ctx.beginPath();ctx.arc(x,y,1,0,2*Math.PI,false);ctx.closePath();ctx.fill();};}; pat = ctx.createPattern(canvas,\"no-repeat\");break;\
		381	case 6: alert('wait for image '+(image_cnt+1)+'...');pat = image_patterns[image_cnt];image_cnt++;break;\
		382	default: break;\
		383	};\
		384	document.body.style.cursor = 'default';return pat;\
		385	};",canvas_root_id);
		386	break;
		387
		388	case JS_TRANSFORM_MOUSE:
		389	/* identify mouse coordinates on transformed objects using command affine */
		390	fprintf(js_include_file,"\n/* translate mouse */\
		391	function transform_mouse(mx,my,obj){\
		392	if( typeof(obj.affine_matrix) === 'undefined' ){console.log('translate_mouse() affine_matrix undefined');{x:mx,y:my};};\
		393	var m = obj.affine_matrix;\
		394	var d = 1/(m[0]m[3]-m[1]m[2]);\
		395	var im = [ m[3]d, -m[1]d,-m[2]d,m[0]d,d(m[2]m[5]-m[3]m[4]),d(m[1]m[4]-m[0]m[5]) ];\
		396	return { x:mxim[0]+myim[2]+im[4], y:mxim[1]+myim[3]+im[5] };};");
		397	break;
		398
		399	case JS_ROTATE_MOUSE:
		400	/*
		401	identify mouse coordinates on rotated STRING (no 14) objects used for command rotate :
		402	faster than transform matrix
		403	*/
		404	fprintf(js_include_file,"\n/* rotate mouse */\
		405	function rotate_mouse(mx,my,obj){\
		406	if( typeof(obj.angle) === 'undefined' ){console.log('rotate_mouse() angle undefined');return {x:mx,y:my};};\
		407	var cos = Math.cos(obj.angle);\
		408	var sin = Math.sin(obj.angle);\
		409	var xc = obj.rotation_center[0];\
		410	var yc = obj.rotation_center[1];\
		411	var x_r = parseInt((cos * (mx - xc)) + (sin * (my - yc)) + xc);\
		412	var y_r = parseInt((cos * (my - yc)) - (sin * (mx - xc)) + yc);\
		413	return {x:x_r,y:y_r};};");
		414	break;
		415
		416	case JS_FIND_ANGLE:
		417	fprintf(js_include_file,"\n/* function find_angle() */ function find_angle(xc,yc,x1,y1){var dx = x1 - xc;var dy = yc - y1;return Math.atan2(dx,dy);};");
		418	break;
		419
		420	case DRAG_EXTERNAL_IMAGE:
		421	/*
		422	the external_canvas is already created: it needs to be FIRST in order to do some drawing onto it
		423	reply is object{} and identical to reply from dragstuff library for drag&drop&click
		424	reply[object_cnt] = {type:onclick,x:x0,y:y0,r:radius,angle:angle,clicked:0\|1};
		425
		426
		427	img[6]= parseInt(img[6] - img[16]);\
		428	img[7]= parseInt(img[7] - img[17]);\
		429	else{\
		430	img[6]= parseInt(img[6] + img[16]);\
		431	img[7]= parseInt(img[7] + img[17]);\
		432	};\
		433
		434	*/
		435	fprintf(js_include_file,"\n/* drag external images */\
		436	var external_ctx = external_canvas.getContext(\"2d\");\
		437	var external_canvas_rect = external_canvas.getBoundingClientRect();\
		438	canvas_div.addEventListener(\"mousedown\",setxy,false);\
		439	canvas_div.addEventListener(\"mouseup\",dragstop,false);\
		440	canvas_div.addEventListener(\"mousemove\",dragxy,false);\
		441	canvas_div.addEventListener(\"touchstart\",function(e){ e.preventDefault();setxy(e.changedTouches[0]);},false);\
		442	canvas_div.addEventListener(\"touchend\" ,function(e){ e.preventDefault();dragstop(e.changedTouches[0]);},false);\
		443	canvas_div.addEventListener(\"touchmove\" ,function(e){ e.preventDefault();dragxy(e.changedTouches[0]);},false);\
		444	var selected_image = null;\
		445	if( typeof(ext_drag_images) !== 'object' ){var ext_drag_images = new Array();};\
		446	if( typeof(ext_image_cnt) == 'undefined'){var ext_image_cnt = 0;};\
		447	function drag_external_image(URL,sx,sy,swidth,sheight,x0,y0,width,height,onclick,object_cnt,use_offset,use_snap,resize){\
		448	var image = new Image();\
		449	image.src = URL;\
		450	slidergroup[object_cnt] = null;\
		451	image.onload = function(){\
		452	if( sx < 1 ){ sx = 0; };\
		453	if( sy < 1 ){ sy = 0; };\
		454	if( swidth < 1 ){swidth = image.width;};\
		455	if( sheight < 1 ){sheight = image.height;};\
		456	if( width < 1 ){width = image.width;};\
		457	if( height < 1 ){height = image.height;};\
		458	if( resize == 1 ){\
		459	if( swidth > image.width ){ swidth = image.width; };\
		460	if( sheight > image.height){ sheight = image.height;};\
		461	if( width > image.width ){ width = image.width; };\
		462	if( height > image.height){ height = image.height;};\
		463	};\
		464	var img = new Array(18);\
		465	img[0] = onclick;img[1] = image;img[2] = sx;img[3] = sy;img[4] = swidth;img[5] = sheight;\
		466	img[8] = width;img[9] = height;img[10] = object_cnt;img[11] = use_snap;\
		467	img[6] = x0;img[7] = y0;\
		468	img[12] = ext_image_cnt;\
		469	img[13] = img[6];img[14] = img[7];img[15] = 0;img[16] = 0;img[17] = 0;\
		470	if(use_offset == 4 ){\
		471	img[16] = 0.5*img[8];\
		472	img[17] = 0.5*img[9];\
		473	img[6]= parseInt(img[6] - img[16]);\
		474	img[7]= parseInt(img[7] - img[17]);\
		475	};\
		476	external_ctx.drawImage(img[1],img[2],img[3],img[4],img[5],img[6],img[7],img[8],img[9]);\
		477	dragdrop_reply[img[10]] = {object_cnt:object_cnt,type:img[0],x:x0,y:y0,r:0,angle:0,clicked:img[15]};\
		478	ext_drag_images[ext_image_cnt] = img;\
		479	ext_image_cnt++;\
		480	};\
		481	};\
		482	function dragstop(evt){\
		483	if(selected_image != null){\
		484	var s_img = ext_drag_images[selected_image];\
		485	dragdrop_reply[s_img[10]] = {type:s_img[0],x:s_img[6]+s_img[16],y:s_img[7]+s_img[17],r:s_img[8],angle:s_img[15],clicked:s_img[15]};\
		486	console.log(dragdrop_reply[s_img[12]]);\
		487	};\
		488	selected_image = null;return;\
		489	};\
		490	function dragxy(evt){\
		491	if( selected_image != null ){\
		492	var s_img = ext_drag_images[selected_image];\
		493	var mouse = getMouse(evt,external_canvas);\
		494	var xy = multisnap_check(mouse.x,mouse.y,s_img[11]);\
		495	xy[0] = parseInt(xy[0] - 0.5*s_img[8]);\
		496	xy[1] = parseInt(xy[1] - 0.5*s_img[9]);\
		497	s_img[6] = xy[0];s_img[7] = xy[1];\
		498	ext_drag_images[selected_image] = s_img;\
		499	external_ctx.clearRect(0,0,xsize,ysize);\
		500	for(var i = 0; i < ext_image_cnt ; i++){\
		501	var img = ext_drag_images[i];\
		502	external_ctx.drawImage(img[1],img[2],img[3],img[4],img[5],img[6],img[7],img[8],img[9]);\
		503	};\
		504	};\
		505	};\
		506	function setxy(evt){\
		507	if( ! selected_image ){\
		508	console.log(selected_image);\
		509	var mouse = getMouse(evt,external_canvas);\
		510	var xm = mouse.x;\
		511	var ym = mouse.y;\
		512	var img;var xmarge;var ymarge;\
		513	for(var p = 0 ; p < ext_image_cnt ; p++){\
		514	if( ext_drag_images[p] ){\
		515	img = ext_drag_images[p];\
		516	if( img[0] != 0 ){\
		517	xmarge = 0.5img[8];ymarge = 0.5img[9];\
		518	if( xm > img[6] - xmarge && xm < img[6] + img[8]){\
		519	if( ym > img[7] - ymarge && ym < img[7] + img[9]){\
		520	if( img[0] == 1){\
		521	if( dragdrop_reply[img[10]].clicked == 1 ){\
		522	dragdrop_reply[img[10]].clicked = 0;external_ctx.strokeStyle = '#ffffff';\
		523	}\
		524	else\
		525	{\
		526	dragdrop_reply[img[10]].clicked = 1;external_ctx.strokeStyle = '#00ff00';\
		527	};\
		528	external_ctx.lineWidth = 2;\
		529	external_ctx.beginPath();\
		530	external_ctx.rect(img[6]-2,img[7]-2,img[8]+2,img[9]+2);\
		531	external_ctx.closePath();\
		532	external_ctx.stroke();\
		533	return;\
		534	}\
		535	else\
		536	{\
		537	img[6] = xm;\
		538	img[7] = ym;\
		539	selected_image = p;\
		540	dragxy(evt);\
		541	ext_drag_images[p] = img;\
		542	};\
		543	};\
		544	};\
		545	};\
		546	};\
		547	};\
		548	}\
		549	else\
		550	{\
		551	selected_image = null;\
		552	};\
		553	};");
		554	break;
		555
		556	case DRAW_EXTERNAL_IMAGE:
		557	/*
		558	the external_canvas is already created: it needs to be FIRST in order to do some drawing onto it
		559	only drag_xy !
		560	snaptogrid \| xsnaptogrid \| ysnaptogrid works
		561	14/5/2019
		562	on heavy styled wims (unice.fr etc problems with mouse?
		563	now uniform method of retreiving mouse coordinates getMouse()
		564	*/
		565	fprintf(js_include_file,"\n/* draw external images */\
		566	function draw_external_image(URL,sx,sy,swidth,sheight,x0,y0,width,height,use_offset,resize){\
		567	var external_ctx = image_copy_canvas.getContext(\"2d\");\n\
		568	var image = new Image();\
		569	image.src = URL;\
		570	image.onload = function(){\
		571	if( sx < 1 ){ sx = 0; };\
		572	if( sy < 1 ){ sy = 0; };\
		573	if( swidth < 1 ){swidth = image.width;};\
		574	if( sheight < 1 ){sheight = image.height;};\
		575	if( width < 1 ){width = image.width;};\
		576	if( height < 1 ){height = image.height;};\
		577	if( resize == 1 ){\
		578	if( swidth > image.width ){ swidth = image.width; };\
		579	if( sheight > image.height){ sheight = image.height;};\
		580	if( width > image.width ){ width = image.width; };\
		581	if( height > image.height){ height = image.height;};\
		582	};\
		583	var img = new Array(9);\
		584	img[0] = image;img[1] = sx;img[2] = sy;img[3] = swidth;img[4] = sheight;img[5] = x0;img[6] = y0;\
		585	if(use_offset == 4 ){img[5] = parseInt(img[5] - 0.5width);img[6] = parseInt(img[6] - 0.5height);};\
		586	img[7] = width;img[8] = height;\
		587	external_ctx.drawImage(img[0],img[1],img[2],img[3],img[4],img[5],img[6],img[7],img[8]);\
		588	};\
		589	};");
		590	break;
		591
		592	case DRAW_BEZIER:
		593	fprintf(js_include_file,"\n/* draw bezier curve */\
		594	if( typeof(all_fill_patterns) != 'object' ){ var all_fill_patterns = []; };\
		595	function draw_bezier(canvas_type,linewidth,xy_points,fill_color,fill_opacity,stroke_color,stroke_opacity,use_filled,use_dashed,dashtype0,dashtype1,use_rotate,angle){\
		596	var obj;\
		597	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		598	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		599	}\
		600	else\
		601	{\
		602	obj = create_canvas%d(canvas_type,xsize,ysize);\
		603	};\
		604	var ctx = obj.getContext(\"2d\");\
		605	ctx.save();\
		606	ctx.strokeStyle=\"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		607	ctx.lineWidth = linewidth;\
		608	if(use_rotate == 1 ){ctx.rotate(angle*Math.PI/180);};\
		609	if(use_dashed == 1){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{ctx.mozDash = [dashtype0,dashtype1];};};\
		610	ctx.beginPath();\
		611	ctx.moveTo(x2px(xy_points[0]),y2px(xy_points[1]));\
		612	ctx.bezierCurveTo(x2px(xy_points[2]),y2px(xy_points[3]),x2px(xy_points[4]),y2px(xy_points[5]),x2px(xy_points[6]),y2px(xy_points[7]));\
		613	var color = \"rgba(\"+fill_color+\",\"+fill_opacity+\")\";\
		614	if(use_filled > 1 ){ if(! all_fill_patterns[use_filled] ){ var pat = create_Pattern(0,0,use_filled,color); all_fill_patterns[use_filled] = pat;};ctx.fillStyle = all_fill_patterns[use_filled]; } else { ctx.fillStyle = color;};\
		615	ctx.stroke();\
		616	ctx.restore();\
		617	};",canvas_root_id,canvas_root_id,canvas_root_id);
		618	break;
		619
		620	case DRAW_GRIDFILL:/* not used for userdraw */
		621	fprintf(js_include_file,"\n/* draw gridfill */\
		622	var grid_fill_pattern;\
		623	function draw_gridfill(canvas_type,x0,y0,dx,dy,linewidth,color,opacity,xsize,ysize,use_userdraw){\
		624	if( dx == 0 \|\| dy == 0 ){alert(\"increment is zero !!! \");return;};\
		625	var fc = %d+canvas_type;\
		626	var obj = create_canvas%d(fc,xsize,ysize);\
		627	var ctx = obj.getContext('2d');\
		628	var x,y;\
		629	ctx.fillStyle='rgba(255,255,255,0.01)';\
		630	ctx.rect(0,0,xsize,ysize);\
		631	ctx.fill();\
		632	ctx.lineWidth = linewidth;\
		633	ctx.strokeStyle=\"rgba(\"+color+\",0.01)\";\
		634	for( x = 0 ; x <= xsize ; x = x + dx ){\
		635	ctx.beginPath();\
		636	ctx.moveTo(x,0);\
		637	ctx.lineTo(x,ysize);\
		638	ctx.closePath();\
		639	ctx.stroke();\
		640	};\
		641	for( y = 0 ; y <= ysize; y = y + dy ){\
		642	ctx.beginPath();\
		643	ctx.moveTo(0,y);\
		644	ctx.lineTo(xsize,y);\
		645	ctx.closePath();\
		646	ctx.stroke();\
		647	};\
		648	if( use_userdraw ){\
		649	grid_fill_pattern = ctx;\
		650	}\
		651	else\
		652	{\
		653	setTimeout(function(){ filltoborder( x0,y0,color,color,canvas_type,true,ctx); },500);};return;\
		654	};",canvas_root_id,canvas_root_id);
		655	break;
		656
		657	case DRAW_IMAGEFILL:/* not used for userdraw */
		658	fprintf(js_include_file,"\n/* draw imagefill */\
		659	function draw_imagefill(canvas_type,x0,y0,URL,xsize,ysize,use_userdraw,use_scaling){\
		660	var fc = %d+canvas_type;\
		661	var obj = create_canvas%d(fc,xsize,ysize);\
		662	var ctx = obj.getContext('2d');\
		663	var img = new Image();\
		664	img.src = URL;\
		665	obj.style.visibility = 'hidden';\
		666	img.onload = function(){\
		667	if( use_scaling == 1 ){\
		668	ctx.drawImage(img,x0,y0,xsize,ysize);\
		669	}else{\
		670	var w0 = img.width;var h0 = img.height;var w;var h;\
		671	for( w = x0; w < xsize ; w = w + w0 ){\
		672	for( h = y0; h < ysize; h = h + h0){\
		673	ctx.drawImage(img,w,h,w0,h0);\
		674	};\
		675	};\
		676	};\
		677	if( use_userdraw ){\
		678	image_pattern = ctx;\
		679	}\
		680	else\
		681	{\
		682	setTimeout(function(){ filltoborder( x0,y0,'red','red',canvas_type,true,ctx); },500);\
		683	};\
		684	};\
		685	};",canvas_root_id,canvas_root_id);
		686	break;
		687
		688	case DRAW_DOTFILL:/* not used for userdraw */
		689	fprintf(js_include_file,"\n/* draw dotfill */\
		690	var dot_fill_pattern;\
		691	function draw_dotfill(canvas_type,x0,y0,dx,dy,radius,color,opacity,xsize,ysize,use_userdraw){\
		692	if( dx == 0 \|\| dy == 0 ){alert(\"increment is zero !!! \");return;};\
		693	var fc = %d+canvas_type;\
		694	var obj = create_canvas%d(fc,xsize,ysize);\
		695	var ctx = obj.getContext('2d');\
		696	var x,y;\
		697	ctx.fillStyle='rgba(255,255,255,0.01)';\
		698	ctx.rect(0,0,xsize,ysize);\
		699	ctx.fill();\
		700	ctx.fillStyle=\"rgba(\"+color+\",0.01)\";\
		701	ctx.strokeStyle=\"rgba(\"+color+\",0.01)\";\
		702	for( x = 0 ; x < xsize ; x = x + dx ){\
		703	for( y = 0 ; y < ysize ; y = y + dy ){\
		704	ctx.beginPath();\
		705	ctx.arc(x,y,radius,0,2*Math.PI,false);\
		706	ctx.closePath();\
		707	ctx.fill();\
		708	};\
		709	};\
		710	if( use_userdraw ){\
		711	dot_fill_pattern = ctx;\
		712	}\
		713	else\
		714	{\
		715	setTimeout(function(){ filltoborder( x0,y0,color,color,canvas_type,true,ctx); },500);\
		716	};\
		717	return;\
		718	};",canvas_root_id,canvas_root_id);
		719	break;
		720
16714	schaersvoo	721	case DRAW_SUBSUP:/* Uses 'script-size for numbers and for sub & sup strings */
16722	schaersvoo	722	/* use_offset
		723	0=none;
		724	1=yoffset
		725	2=xoffset
		726	3=xyoffset
		727	4=centered
		728	*/
16700	schaersvoo	729	fprintf(js_include_file,"\n/* draw sub sup imitation in canvas */\
16722	schaersvoo	730	function draw_subsup(ctx,x,y,txt,use_offset){\
16712	schaersvoo	731	var C;var c;var len = txt.length;var baseline = 'middle';var space = 0;ctx.save();var subsup=0;\
16722	schaersvoo	732	var m = 0.4*(ctx.measureText(txt).width);\
		733	var h = ctx.measureText('M').width;\
		734	switch(use_offset){\
		735	case 0:break;\
		736	case 1:y=y-h;;break;\
		737	case 2:x=x+h;break;\
		738	case 3:x=x+h;y=y-h;;break;\
		739	case 4:x=x-m;break;\
		740	default:break;\
		741	};\
16712	schaersvoo	742	var S = parseInt(ctx.font) \|\| 10;var s = 0.8*(parseInt(ctx.font)) \|\| 8;\
		743	ctx.font = S+'px Helvetica';ctx.textBaseline = baseline;\
16705	schaersvoo	744	for( c = 0 ; c < len ;c++){\
16700	schaersvoo	745	C = txt.charAt(c);space = 0;\
16714	schaersvoo	746	if(C == '_'){ctx.font = s+'px Helvetica';subsup = 1;c++;space = 3;baseline='top';C = txt.charAt(c);}\
		747	else\
		748	if(C == '^'){ctx.font = s+'px Helvetica';subsup = 1;c++;space = 3;baseline='bottom';C = txt.charAt(c);}\
		749	else\
		750	if(C == ' '){ctx.font = S+'px Helvetica';if(subsup == 1){space = 0.6*s - (ctx.measureText('M').width);subsup = 0;};baseline = 'middle';}\
		751	else\
		752	if(C >= '0' && C <= '9'){ctx.font = s+'px Helvetica';}\
		753	else{ctx.font = S+'px Helvetica';};\
16712	schaersvoo	754	ctx.textBaseline = baseline;ctx.fillText(C,x,y);x = space + x + ctx.measureText(C).width;\
16700	schaersvoo	755	};\
16705	schaersvoo	756	ctx.stroke();\
16700	schaersvoo	757	ctx.restore();\
		758	return;\
		759	};");
		760	break;
		761
15111	schaersvoo	762	case DRAW_TEXTFILL:/* not used for userdraw */
		763	fprintf(js_include_file,"\n/* draw textfill */\
		764	var text_fill_pattern;\
		765	function draw_textfill(canvas_type,x0,y0,color,fontfamily,xsize,ysize,txt,use_userdraw){\
		766	var fc = %d+canvas_type;\
		767	var obj = create_canvas%d(fc,xsize,ysize);\
		768	var ctx = obj.getContext('2d');\
		769	ctx.font = fontfamily;\
		770	var dx = 2+(ctx.measureText(txt)).width;\
		771	var dy = 2+(ctx.measureText('MI')).width;\
		772	ctx.fillStyle='rgba(255,255,255,0.01)';\
		773	ctx.rect(0,0,xsize,ysize);\
		774	ctx.fill();\
		775	ctx.fillStyle=\"rgba(\"+color+\",0.01)\";\
		776	ctx.strokeStyle=\"rgba(\"+color+\",0.01)\";\
		777	for(var x = 0 ; x <= xsize ; x = x + dx ){\
		778	for(var y = 0 ; y <= ysize ; y = y + dy ){\
		779	ctx.fillText(txt, x, y);\
		780	};\
		781	};\
		782	if( use_userdraw ){\
		783	text_fill_pattern = ctx;\
		784	}\
		785	else\
		786	{\
		787	setTimeout(function(){ filltoborder( x0,y0,color,color,canvas_type,true,ctx); },500);\
		788	};\
		789	return;};",canvas_root_id,canvas_root_id);
		790	break;
		791
		792	case DRAW_DIAMONDFILL:/* not used for userdraw */
		793	fprintf(js_include_file,"\n/* draw hatch fill */\
		794	var diamond_fill_pattern;\
		795	function draw_diamondfill(canvas_type,x0,y0,dx,dy,linewidth,color,stroke_opacity,xsize,ysize,use_userdraw){\
		796	if( dx == 0 \|\| dy == 0 ){alert(\"increment is zero !!! \");return;};\
		797	var fc = %d+canvas_type;\
		798	var obj = create_canvas%d(fc,xsize,ysize);\
		799	var ctx = obj.getContext('2d');\
		800	var x;\
		801	var y;\
		802	ctx.lineWidth = linewidth;\
		803	ctx.fillStyle='rgba(255,255,255,0.01)';\
		804	ctx.rect(0,0,xsize,ysize);\
		805	ctx.fill();\
		806	ctx.strokeStyle=\"rgba(\"+color+\",0.01)\";\
		807	y = ysize;\
		808	ctx.beginPath();\
		809	for( x = 0 ; x <= xsize ; x = x + dx ){\
		810	ctx.moveTo(x,0);\
		811	ctx.lineTo(xsize,y);\
		812	y = y - dy;\
		813	};\
		814	y=0;\
		815	for( x = xsize ; x >= 0 ; x = x - dx){\
		816	ctx.moveTo(x,ysize);\
		817	ctx.lineTo(0,y);\
		818	y = y + dy;\
		819	};\
		820	y = 0;\
		821	for( x = 0 ; x <= xsize ; x = x + dx ){\
		822	ctx.moveTo(x,0);\
		823	ctx.lineTo(0,y);\
		824	y = y + dy;\
		825	};\
		826	y = 0;\
		827	for( x = 0 ; x <= xsize ; x = x + dx ){\
		828	ctx.moveTo(xsize,y);\
		829	ctx.lineTo(x,ysize);\
		830	y = y + dy;\
		831	};\
		832	ctx.closePath();\
		833	ctx.stroke();\
		834	if( use_userdraw ){\
		835	diamond_fill_pattern = ctx;\
		836	}\
		837	else\
		838	{\
		839	setTimeout(function(){ filltoborder( x0,y0,color,color,canvas_type,true,ctx); },500);\
		840	};\
		841	return;\
		842	}",canvas_root_id,canvas_root_id);
		843	break;
		844
		845	case DRAW_HATCHFILL:/* not used for userdraw */
		846	fprintf(js_include_file,"\n/* draw hatch fill */\
		847	var hatch_fill_pattern;\
		848	function draw_hatchfill(canvas_type,x0,y0,dx,dy,linewidth,color,stroke_opacity,xsize,ysize,use_userdraw){\
		849	if( dx == 0 \|\| dy == 0 ){alert(\"increment is zero !!! \");return;};\
		850	var fc = %d+canvas_type;\
		851	var obj = create_canvas%d(fc,xsize,ysize);\
		852	var ctx = obj.getContext('2d');\
		853	var x,y;\
		854	ctx.fillStyle='rgba(255,255,255,0.01)';\
		855	ctx.rect(0,0,xsize,ysize);\
		856	ctx.fill();\
		857	ctx.strokeStyle=\"rgba(\"+color+\",0.01)\";\
		858	ctx.lineWidth = linewidth;\
		859	y = ysize;\
		860	ctx.beginPath();\
		861	for( x = 0 ; x <= xsize ; x = x + dx ){\
		862	ctx.moveTo(x,0);\
		863	ctx.lineTo(xsize,y);\
		864	y = y - dy;\
		865	};\
		866	y = 0;\
		867	for( x = xsize ; x >= dx ; x = x - dx){\
		868	ctx.moveTo(x,ysize);\
		869	ctx.lineTo(0,y);\
		870	y = y + dy;\
		871	};\
		872	ctx.closePath();\
		873	ctx.stroke();\
		874	if( use_userdraw ){\
		875	hatch_fill_pattern = ctx;\
		876	}\
		877	else\
		878	{\
		879	setTimeout(function(){ filltoborder( x0,y0,color,color,canvas_type,true,ctx); },500);\
		880	};\
		881	return;};",canvas_root_id,canvas_root_id);
		882	break;
		883
		884	case DRAW_LINES:/* used for js-tracing */
		885	fprintf(js_include_file,"\n/* draw lines */\
		886	function calc_line(x1,x2,y1,y2){\
		887	var marge = 2;\
		888	if(x1 < x2+marge && x1>x2-marge){\
		889	return [x1,0,x1,ysize];\
		890	};\
		891	if(y1 < y2+marge && y1>y2-marge){\
		892	return [0,y1,xsize,y1];\
		893	};\
		894	var Y1 = y1 - (x1)*(y2 - y1)/(x2 - x1);\
		895	var Y2 = y1 + (xsize - x1)*(y2 - y1)/(x2 - x1);\
		896	return [0,Y1,xsize,Y2];\
		897	};\
		898	var draw_lines = function(ctx,x_points,y_points,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle){\
		899	ctx.save();\
		900	var line = new Array(4);\
		901	if(use_rotate == 1 ){ctx.rotate(angle*Math.PI/180);}\
		902	ctx.lineWidth = line_width;\
		903	ctx.strokeStyle=\"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		904	if(use_dashed == 1){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{ctx.mozDash = [dashtype0,dashtype1];};};\
		905	for(var p = 0 ; p < x_points.length ; p = p+2 ){\
		906	line = calc_line(x_points[p],x_points[p+1],y_points[p],y_points[p+1]);\
		907	ctx.beginPath();\
		908	ctx.moveTo(line[0],line[1]);\
		909	ctx.lineTo(line[2],line[3]);\
		910	ctx.closePath();\
		911	ctx.stroke();\
		912	}\
		913	ctx.restore();\
		914	return;\
		915	};");
		916	break;
		917
		918	case DRAW_CROSSHAIRS:/* used for tracing */
		919	fprintf(js_include_file,"\n/* draw crosshairs */\
		920	var draw_crosshairs = function(ctx,x_points,y_points,line_width,crosshair_size,stroke_color,stroke_opacity,use_rotate,angle){\
		921	ctx.save();\
		922	if(use_rotate == 1 ){ctx.rotate(angle*Math.PI/180);}\
		923	ctx.lineWidth = line_width;\
		924	ctx.strokeStyle=\"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		925	var x1,x2,y1,y2;\
		926	for(var p = 0 ; p < x_points.length ; p++ ){\
		927	x1 = x_points[p] - crosshair_size;\
		928	x2 = x_points[p] + crosshair_size;\
		929	y1 = y_points[p] - crosshair_size;\
		930	y2 = y_points[p] + crosshair_size;\
		931	ctx.beginPath();\
		932	ctx.moveTo(x1,y1);\
		933	ctx.lineTo(x2,y2);\
		934	ctx.closePath();\
		935	ctx.stroke();\
		936	ctx.beginPath();\
		937	ctx.moveTo(x2,y1);\
		938	ctx.lineTo(x1,y2);\
		939	ctx.closePath();\
		940	ctx.stroke();\
		941	}\
		942	ctx.restore();\
		943	return;\
		944	};");
		945	break;
		946
		947	case DRAW_VIDEO:/* not used for userdraw */
		948	fprintf(js_include_file,"\n/* draw video */\
		949	var draw_video = function(canvas_root_id,x,y,w,h,URL){\
		950	var canvas_div = document.getElementById(\"canvas_div\"+canvas_root_id);\
		951	var video_div = document.createElement(\"div\");\
		952	canvas_div.appendChild(video_div);\
		953	video_div.style.position = \"absolute\";\
		954	video_div.style.left = x+\"px\";\
		955	video_div.style.top = y+\"px\";\
		956	video_div.style.width = w+\"px\";\
		957	video_div.style.height = h+\"px\";\
		958	var video = document.createElement(\"video\");\
		959	video_div.appendChild(video);\
		960	video.style.width = w+\"px\";\
		961	video.style.height = h+\"px\";\
		962	video.autobuffer = true;\
		963	video.controls = true;video.autoplay = false;\
		964	var src = document.createElement(\"source\");\
		965	src.type = \"video/mp4\";\
		966	src.src = URL;\
		967	video.appendChild(src);\
		968	video.load();\
		969	return;\
		970	};");
		971	break;
		972
		973	case DRAW_AUDIO:/* not used for userdraw */
		974	fprintf(js_include_file,"\n/* draw audio */\
		975	var draw_audio = function(canvas_root_id,x,y,w,h,loop,visible,URL1,URL2){\
		976	var canvas_div = document.getElementById(\"canvas_div\"+canvas_root_id);\
		977	var audio_div = document.createElement(\"div\");\
		978	canvas_div.appendChild(audio_div);\
		979	audio_div.style.position = \"absolute\";\
		980	audio_div.style.left = x+\"px\";\
		981	audio_div.style.top = y+\"px\";\
		982	audio_div.style.width = w+\"px\";\
		983	audio_div.style.height = h+\"px\";\
		984	var audio = document.createElement(\"audio\");\
		985	audio_div.appendChild(audio);\
		986	audio.setAttribute(\"style\",\"width:\"+w+\"px;height:\"+h+\"px\");\
		987	audio.autobuffer = true;\
		988	if(visible == 1 ){ audio.controls = true;audio.autoplay = false;}else{ audio.controls = false;audio.autoplay = true;};\
		989	if(loop == 1 ){ audio.loop = true;}else{ audio.loop = false;};\
		990	var src1 = document.createElement(\"source\");\
		991	src1.type = \"audio/ogg\";\
		992	src1.src = URL1;\
		993	audio.appendChild(src1);\
		994	var src2 = document.createElement(\"source\");\
		995	src2.type = \"audio/mpeg\";\
		996	src2.src = URL2;\
		997	audio.appendChild(src2);\
		998	audio.load();\
		999	return;\
		1000	};");
		1001	break;
		1002
		1003	case DRAW_HTTP:/* not used for userdraw */
		1004	fprintf(js_include_file,"\n/* draw http */\
		1005	var draw_http = function(canvas_root_id,x,y,w,h,URL){\
		1006	var canvas_div = document.getElementById(\"canvas_div\"+canvas_root_id);\
		1007	var http_div = document.createElement(\"div\");\
		1008	var iframe = document.createElement(\"iframe\");\
		1009	canvas_div.appendChild(http_div);\
		1010	http_div.appendChild(iframe);\
		1011	iframe.src = URL;\
		1012	iframe.setAttribute(\"width\",w);\
		1013	iframe.setAttribute(\"height\",h);\
		1014	return;\
		1015	};");
		1016	break;
		1017
		1018	case DRAW_XML:
		1019	/*
		1020	!! function draw_xml(object)
		1021	!! produced by : DRAW_XML
		1022	!! used by commands: katex,latex,mathml,html,obabel
		1023	!! uses js-functions: calculate_size(xml_div),rad2deg(rad)
		1024	!! user interaction: drag,onclick,slider
		1025	!! reply function: read_dragdrop()
		1026
		1027	onclick=0; no interaction
		1028	onclick=1: click
		1029	onclick=2: drag ==> always centered (use_offset=4)
		1030	onclick=3: slider + click on object
		1031	onclick=4: slider (always active , keyword 'active' in slider params)
		1032	onclick=5: slider + dragdrop
		1033	xy: drag_type = 0;
		1034	x: drag_type = 1;
		1035	y: drag_type = 2;
		1036
		1037	obj.type: mathml,katex,html,svg,image(bitmap) (attention: for centering image needs to be measured after loading page !!)
		1038	*/
		1039
		1040	fprintf(js_include_file,"\n/* draw xml */\
		1041	function centered(xml_div,obj){\
		1042	var ww = 0.5*(parseFloat(window.getComputedStyle(xml_div).width));\
		1043	var hh = 0.5*(parseFloat(window.getComputedStyle(xml_div).height));\
		1044	obj.offset = [ ww , hh ];\
16638	bpr	1045	xml_div.style.left = obj.x[0] - obj.offset[0] +'px';xml_div.style.top = obj.y[0] - obj.offset[1] +'px';\
15111	schaersvoo	1046	};\
		1047	function rad2deg(rad){return rad*180/(Math.PI);};\
		1048	if( typeof(slidergroup) !== 'object' ){ var slidergroup = [];};\
		1049	function draw_xml(obj){\
		1050	var mouse;var xy = [obj.x[0],obj.y[0]];\
		1051	var xml_div;\
		1052	dragdrop_reply[obj.object_cnt] = {object_cnt:obj.object_cnt,type:obj.onclick,x:obj.x,y:obj.y,r:0,angle:obj.angle,clicked:0};\
		1053	if( obj.once ){\
		1054	xml_div = document.createElement('DIV');\
		1055	canvas_div.appendChild(xml_div);\
		1056	if( obj.type == 'katex' ){ obj.mathml = LoadKaTeX('html',obj.mathml);};\
		1057	xml_div.id = 'xml_div'+obj.id;\
		1058	xml_div.innerHTML = obj.mathml;\
		1059	xml_div.style.position = \"absolute\";\
		1060	xml_div.style.color = \"rgba(\"+obj.stroke_color+\",\"+obj.stroke_opacity+\")\";\
		1061	xml_div.style.font = obj.fontfamily;\
		1062	if( ! obj.rotation_center){obj.rotation_center = [obj.x[0],obj.y[0]];}else{obj.rotation_center=[x2px(obj.rotation_center[0]) ,y2px(obj.rotation_center[1]) ];};\
16642	schaersvoo	1063	if( obj.use_center == 1 ){if( obj.type == 'image' ){xml_div.addEventListener('load',function(e){centered(xml_div,obj);},true);}else{%s};};\
15111	schaersvoo	1064	}\
		1065	else\
		1066	{\
		1067	xml_div = document.getElementById('xml_div'+obj.id );\
		1068	};\
		1069	if( typeof(xml_div) === 'undefined' ){console.log('hmmmmm'); return;};\
		1070	xml_div.style.left = parseInt(obj.x[0] - obj.offset[0]) +'px';\
		1071	xml_div.style.top = parseInt(obj.y[0] - obj.offset[1]) +'px';\
		1072	var back_color = 'rgba('+obj.fill_color+','+obj.fill_opacity+')';\
		1073	var no_color = 'rgba(255,255,255,0)';var dragging = false;\
		1074	if( obj.use_affine != 0 \|\| obj.angle != 0 ){\
		1075	xml_div.style.transform = 'matrix('+obj.transform[0]+','+obj.transform[1]+','+obj.transform[2]+','+obj.transform[3]+','+obj.transform[4]+','+obj.transform[5]+') rotate('+rad2deg(obj.angle)+'deg)';\
		1076	};\
		1077	if( obj.once ){\
		1078	obj.once = false;\
		1079	switch(obj.onclick){\
		1080	case 2:\
		1081	if(isTouch){\
		1082	canvas_div.addEventListener('touchmove' ,function(evt){ evt.preventDefault();if(!dragging){return;};mouse = getMouse(evt.changedTouches[0],xml_div);xy = multisnap_check( mouse.x,mouse.y,obj.use_snap);xml_div.style.left = xy[0] - obj.offset[0] - obj.transform[4] + 'px';xml_div.style.top = xy[1] - obj.offset[1] - obj.transform[5] + 'px';},false);\
		1083	canvas_div.addEventListener('touchend' ,function(evt){ evt.preventDefault();dragging = false;xml_div.style.backgroundColor = no_color;dragdrop_reply[obj.object_cnt] = {object_cnt:obj.object_cnt,type:obj.onclick,x:xy[0],y:xy[1],r:0,angle:obj.angle,clicked:0};obj.x[0] = xy[0];obj.y[0] = xy[1];},false);\
		1084	xml_div.addEventListener('touchstart',function(evt){evt.preventDefault();if(dragging){dragging = false;xml_div.style.backgroundColor = no_color;}else{dragging = true;xml_div.style.backgroundColor = back_color;};},false);\
		1085	xml_div.addEventListener('touchend' ,function(evt){ evt.preventDefault();dragging = false;xml_div.style.backgroundColor = no_color;dragdrop_reply[obj.object_cnt] = {object_cnt:obj.object_cnt,type:obj.onclick,x:xy[0],y:xy[1],r:0,angle:obj.angle,clicked:0};obj.x[0] = xy[0];obj.y[0] = xy[1];},false);\
		1086	}else{\
		1087	canvas_div.addEventListener('mousemove',function(evt){if(!dragging){return;};mouse = getMouse(evt,xml_div);xy = multisnap_check( mouse.x,mouse.y,obj.use_snap);xml_div.style.left = xy[0] - obj.offset[0] - obj.transform[4] + 'px';xml_div.style.top = xy[1] - obj.offset[1] - obj.transform[5] + 'px';},false);\
		1088	canvas_div.addEventListener('mouseup',function(evt){dragging = false;xml_div.style.backgroundColor = no_color;dragdrop_reply[obj.object_cnt] = {object_cnt:obj.object_cnt,type:obj.onclick,x:xy[0],y:xy[1],r:0,angle:obj.angle,clicked:0};obj.x[0] = xy[0];obj.y[0] = xy[1];},false);\
		1089	xml_div.addEventListener('mousedown', function(evt){if(dragging){dragging = false;xml_div.style.backgroundColor = no_color;}else{dragging = true;xml_div.style.backgroundColor = back_color;};},false);\
		1090	};\
		1091	break;\
		1092	case 1:\
		1093	if(isTouch ){\
		1094	xml_div.addEventListener('touchstart', function(e){ e.preventDefault();if(dragdrop_reply[obj.object_cnt].clicked == 0){ dragdrop_reply[obj.object_cnt].clicked = 1;xml_div.style.backgroundColor = back_color;}else{dragdrop_reply[obj.object_cnt].clicked = 0;xml_div.style.backgroundColor = no_color;};} ,false);\
		1095	}else{\
		1096	xml_div.addEventListener('mousedown' , function(evt){if(dragdrop_reply[obj.object_cnt].clicked == 0){ dragdrop_reply[obj.object_cnt].clicked = 1;xml_div.style.backgroundColor = back_color;}else{dragdrop_reply[obj.object_cnt].clicked = 0;xml_div.style.backgroundColor = no_color;};} ,false);\
		1097	};\
		1098	break;\
		1099	case 3:\
		1100	if(isTouch ){\
		1101	xml_div.addEventListener('touchstart',function(evt){ if(slidergroup[obj.object_cnt] == null ){ slidergroup[obj.object_cnt] = obj;xml_div.style.backgroundColor = back_color;}else{ slidergroup[obj.object_cnt] = null;xml_div.style.backgroundColor = no_color;};} ,false);\
		1102	}else{\
		1103	xml_div.addEventListener('mousedown' ,function(evt){ if(slidergroup[obj.object_cnt] == null ){ slidergroup[obj.object_cnt] = obj;xml_div.style.backgroundColor = back_color;}else{ slidergroup[obj.object_cnt] = null;xml_div.style.backgroundColor = no_color;};} ,false);\
		1104	};\
		1105	break;\
		1106	case 4:slidergroup[obj.object_cnt] = obj;break;\
		1107	case 5:slidergroup[obj.object_cnt] = obj;\
		1108	canvas_div.addEventListener('mousemove',function(evt){if(!dragging){return;};mouse = getMouse(evt,xml_div);xy = multisnap_check( mouse.x,mouse.y,obj.use_snap);xml_div.style.left = xy[0] - obj.offset[0] - obj.transform[4] + 'px';xml_div.style.top = xy[1] - obj.offset[1] - obj.transform[5] + 'px';},false);\
		1109	canvas_div.addEventListener('mouseup',function(evt){dragging = false;xml_div.style.backgroundColor = no_color;dragdrop_reply[obj.object_cnt] = {object_cnt:obj.object_cnt,type:obj.onclick,x:xy[0],y:xy[1],r:0,angle:obj.angle,clicked:0};obj.x[0] = xy[0];obj.y[0] = xy[1];},false);\
		1110	xml_div.addEventListener('mousedown', function(evt){if(dragging){dragging = false;xml_div.style.backgroundColor = no_color;}else{dragging = true;xml_div.style.backgroundColor = back_color;};},false);\
		1111	break;\
		1112	default: break;\
		1113	};\
		1114	};\
		1115	return;\
16642	schaersvoo	1116	};",mathjax);
15111	schaersvoo	1117
		1118	/*
		1119	console.log('angle='+obj.angle+'obj.use_center='+obj.use_center+'id='+obj.id+'xml_div.id = '+xml_div.id+' once ='+obj.once+' offset='+ obj.offset+' div x = '+xml_div.style.left+' div y ='+xml_div.style.top+' obj.x='+px2x(obj.x)+'obj.y='+px2y(obj.y));\
		1120	*/
		1121	break;
		1122
		1123	case DRAW_SGRAPH:
		1124	/*
		1125	xstart = given
		1126	ystart = given
		1127	sgraph(canvas_type,precision,xmajor,ymajor,xminor,yminor,majorcolor,minorcolor,fontfamily)
		1128	*/
		1129	fprintf(js_include_file,"\n/* draw sgraph */\
		1130	var draw_sgraph = function(canvas_type,precision,xmajor,ymajor,xminor,yminor,majorcolor,minorcolor,fontfamily,opacity,font_size){\
		1131	var obj;if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){obj = document.getElementById(\"wims_canvas%d\"+canvas_type);}else{ obj = create_canvas%d(canvas_type,xsize,ysize);};\
		1132	var ctx = obj.getContext(\"2d\");\
		1133	ctx.font = fontfamily;\
		1134	var minor_opacity = 0.8*opacity;\
		1135	ctx.clearRect(0,0,xsize,ysize);\
		1136	var zero_x = 0.1*xsize;\
		1137	var zero_y = 0.9*ysize;\
		1138	var snor_x;var snor_y;\
		1139	if( xstart != xmin){\
		1140	snor_x = 0.1*xsize;\
		1141	}\
		1142	else\
		1143	{\
		1144	snor_x = 0;\
		1145	xstart = xmin;\
		1146	};\
		1147	ctx.strokeStyle = \"rgba(\"+majorcolor+\",\"+opacity+\")\";\
		1148	ctx.lineWidth = 2;\
		1149	ctx.beginPath();\
		1150	ctx.moveTo(xsize,zero_y);\
		1151	ctx.lineTo(zero_x,zero_y);\
		1152	ctx.lineTo(zero_x,0);\
		1153	ctx.stroke();\
		1154	ctx.closePath();\
		1155	ctx.beginPath();\
		1156	ctx.moveTo(zero_x,zero_y);\
		1157	ctx.lineTo(zero_x + 0.25snor_x,zero_y - 0.1snor_x);\
		1158	ctx.lineTo(zero_x + 0.5snor_x,zero_y + 0.1snor_x);\
		1159	ctx.lineTo(zero_x + 0.75snor_x,zero_y - 0.1snor_x);\
		1160	ctx.lineTo(zero_x + snor_x,zero_y);\
		1161	ctx.stroke();\
		1162	ctx.closePath();\
		1163	ctx.beginPath();\
		1164	var num = xstart;\
		1165	var flipflop = 1;\
		1166	var step_x = xmajor*(xsize - zero_x - snor_x)/(xmax - xstart);\
		1167	var txtsize;var txt_marge=step_x - 5;\
		1168	for(var x = zero_x+snor_x ; x < xsize;x = x + step_x){\
		1169	txtsize = ctx.measureText(num).width;\
		1170	if( txtsize > txt_marge ){if( flipflop == 1 ){flipflop = 0;}else{flipflop = 1;};};\
		1171	if( flipflop == 1){\
		1172	ctx.fillText(num,x - 0.5*txtsize,zero_y+font_size);\
		1173	}\
		1174	else\
		1175	{\
		1176	ctx.fillText(num,x - 0.5txtsize,zero_y+2font_size);\
		1177	};\
		1178	num = num + xmajor;\
		1179	};\
		1180	ctx.stroke();\
		1181	ctx.closePath();\
		1182	ctx.lineWidth = 1;\
		1183	ctx.beginPath();\
		1184	for(var x = zero_x+snor_x ; x < xsize;x = x + step_x){\
		1185	ctx.moveTo(x,zero_y);\
		1186	ctx.lineTo(x,0);\
		1187	};\
		1188	ctx.stroke();\
		1189	ctx.closePath();\
		1190	if( xminor > 1){\
		1191	ctx.lineWidth = 0.5;\
		1192	ctx.beginPath();\
		1193	ctx.strokeStyle = \"rgba(\"+minorcolor+\",\"+minor_opacity+\")\";\
		1194	var minor_step_x = step_x / xminor;\
		1195	var nx;\
		1196	for(var x = zero_x+snor_x; x < xsize;x = x + step_x){\
		1197	num = 1;\
		1198	for(var p = 1 ; p < xminor ; p++){\
		1199	nx = x + num*minor_step_x;\
		1200	ctx.moveTo(nx,zero_y);\
		1201	ctx.lineTo(nx,0);\
		1202	num++;\
		1203	};\
		1204	};\
		1205	ctx.stroke();\
		1206	ctx.closePath();\
		1207	ctx.beginPath();\
		1208	ctx.lineWidth = 2;\
		1209	ctx.strokeStyle = \"rgba(\"+majorcolor+\",\"+opacity+\")\";\
		1210	for(var x = zero_x+snor_x ; x < xsize;x = x + step_x){\
		1211	ctx.moveTo(x,zero_y);ctx.lineTo(x,zero_y - 12);\
		1212	};\
		1213	for(var x = zero_x+snor_x ; x < xsize;x = x + minor_step_x){\
		1214	ctx.moveTo(x,zero_y);ctx.lineTo(x,zero_y - 6);\
		1215	};\
		1216	ctx.stroke();\
		1217	ctx.closePath();\
		1218	ctx.lineWidth = 0.5;\
		1219	};\
		1220	xmin = xstart - (xmajor*(zero_x+snor_x)/step_x);\
		1221	if( ystart != ymin){\
		1222	snor_y = 0.1*ysize;\
		1223	}\
		1224	else\
		1225	{\
		1226	snor_y = 0;\
		1227	ystart = ymin;\
		1228	};\
		1229	ctx.lineWidth = 2;\
		1230	ctx.strokeStyle = \"rgba(\"+majorcolor+\",\"+opacity+\")\";\
		1231	ctx.beginPath();\
		1232	ctx.moveTo(zero_x,zero_y);\
		1233	ctx.lineTo(zero_x - 0.1snor_y,zero_y - 0.25snor_y);\
		1234	ctx.lineTo(zero_x + 0.1snor_y,zero_y - 0.5snor_y);\
		1235	ctx.lineTo(zero_x - 0.1snor_y,zero_y - 0.75snor_y);\
		1236	ctx.lineTo(zero_x,zero_y - snor_y);\
		1237	ctx.stroke();\
		1238	ctx.closePath();\
		1239	ctx.beginPath();\
		1240	ctx.lineWidth = 1;\
		1241	num = ystart;\
		1242	var step_y = ymajor*(zero_y - snor_y)/(ymax - ystart);\
		1243	for(var y = zero_y - snor_y ; y > 0; y = y - step_y){\
		1244	ctx.moveTo(zero_x,y);\
		1245	ctx.lineTo(xsize,y);\
		1246	ctx.fillText(num,zero_x - ctx.measureText(num+\" \").width,parseInt(y+0.2*font_size));\
		1247	num = num + ymajor;\
		1248	};\
		1249	ctx.stroke();\
		1250	ctx.closePath();\
		1251	if( yminor > 1){\
		1252	ctx.lineWidth = 0.5;\
		1253	ctx.beginPath();\
		1254	ctx.strokeStyle = \"rgba(\"+minorcolor+\",\"+minor_opacity+\")\";\
		1255	var minor_step_y = step_y / yminor;\
		1256	var ny;\
		1257	for(var y = 0 ; y < zero_y - snor_y ;y = y + step_y){\
		1258	num = 1;\
		1259	for(var p = 1 ;p < yminor;p++){\
		1260	ny = y + num*minor_step_y;\
		1261	ctx.moveTo(zero_x,ny);\
		1262	ctx.lineTo(xsize,ny);\
		1263	num++;\
		1264	};\
		1265	};\
		1266	ctx.stroke();\
		1267	ctx.closePath();\
		1268	ctx.lineWidth = 2;\
		1269	ctx.beginPath();\
		1270	ctx.strokeStyle = \"rgba(\"+majorcolor+\",\"+opacity+\")\";\
		1271	for(var y = zero_y - snor_y ; y > 0 ;y = y - step_y){\
		1272	ctx.moveTo(zero_x,y);\
		1273	ctx.lineTo(zero_x+12,y);\
		1274	};\
		1275	for(var y = zero_y - snor_y ; y > 0 ;y = y - minor_step_y){\
		1276	ctx.moveTo(zero_x,y);\
		1277	ctx.lineTo(zero_x+6,y);\
		1278	};\
		1279	ctx.stroke();\
		1280	ctx.closePath();\
		1281	};\
		1282	ymin = ystart - (ymajor*(ysize - zero_y + snor_y)/step_y);\
		1283	if( typeof(legend%d) !== 'undefined' ){\
		1284	ctx.globalAlpha = 1.0;\
		1285	var y_offset = 2*font_size;\
		1286	var txt;var txt_size;\
		1287	var x_offset = xsize - 2*font_size;\
		1288	var l_length = legend%d.length;var barcolor = new Array();\
		1289	if( typeof(legendcolors%d) !== 'undefined' ){\
		1290	for(var p = 0 ; p < l_length ; p++){\
		1291	barcolor[p] = legendcolors%d[p];\
		1292	};\
		1293	}else{\
		1294	if( barcolor.length == 0 ){\
		1295	for(var p = 0 ; p < l_length ; p++){\
		1296	barcolor[p] = stroke_color;\
		1297	};\
		1298	};\
		1299	};\
		1300	for(var p = 0; p < l_length; p++){\
		1301	ctx.fillStyle = barcolor[p];\
		1302	txt = legend%d[p];\
		1303	txt_size = ctx.measureText(txt).width;\
		1304	ctx.fillText(legend%d[p],x_offset - txt_size, y_offset);\
		1305	y_offset = parseInt(y_offset + 1.5*font_size);\
		1306	};\
		1307	};\
		1308	if( typeof(xaxislabel) !== 'undefined' ){\
		1309	ctx.fillStyle = \'#000000\';\
		1310	var txt_size = ctx.measureText(xaxislabel).width + 4 ;\
		1311	ctx.fillText(xaxislabel,xsize - txt_size, zero_y - 7);\
		1312	};\
		1313	if( typeof(yaxislabel) !== 'undefined'){\
		1314	ctx.save();\
		1315	ctx.fillStyle = \'#000000\';\
		1316	var txt_size = ctx.measureText(yaxislabel).width;\
		1317	ctx.translate(zero_x+8 + font_size,txt_size+font_size);\
		1318	ctx.rotate(-0.5*Math.PI);\
		1319	ctx.fillText(yaxislabel,0,0);\
		1320	ctx.restore();\
		1321	};\
		1322	};",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
		1323	break;
		1324
		1325	case DRAW_NUMBERLINE:
		1326	fprintf(js_include_file,"\n/* draw numberline */\
		1327	var draw_numberline = function(canvas_type,use_axis_numbering,x0,x1,xmajor,xminor,y0,y1,linewidth,strokecolor,strokeopacity,fontfamily,fontcolor,precision){\
		1328	var obj = create_canvas%d(canvas_type,xsize,ysize);\
		1329	var ctx = obj.getContext(\"2d\");\
		1330	ctx.lineWidth = linewidth \|\| 1;\
		1331	ctx.strokeStyle = \"rgba(\"+strokecolor+\",\"+strokeopacity+\")\";\
15313	schaersvoo	1332	ctx.font = fontfamily \|\| 'Arial 12px';\
15111	schaersvoo	1333	var fontsize = parseInt(ctx.font);\
		1334	ctx.fillStyle = \"rgba(\"+fontcolor+\",\"+strokeopacity+\")\";\
		1335	x1 = x2px(x1);\
		1336	x0 = x2px(x0);\
		1337	y0 = y2px(y0);\
		1338	y1 = y2px(y1);\
		1339	var sub_devision = -1;\
		1340	if( xminor%%2 == 0 ){ sub_devision = xminor/2; };\
		1341	var ybase1 = parseInt( y0 + fontsize + 2 );\
		1342	var ybase2 = parseInt( ybase1 + fontsize + 2 );\
		1343	var yh = Math.abs(parseInt( y0 - 0.3*(y0 -y1)));\
		1344	var ys = Math.abs(parseInt( y0 - 0.6*(y0 -y1)));\
		1345	xmajor = x2px(xmajor) - x2px(0);\
		1346	var i;var len;var p;\
		1347	xminor = xmajor / xminor;\
		1348	ctx.beginPath();\
		1349	for(p = x0 ; p < x1 ; p = p + xmajor){\
		1350	ctx.moveTo(p,y0);ctx.lineTo(p,y1);i = 0;\
		1351	for(var s = p ; s < p + xmajor ; s = s + xminor ){\
		1352	ctx.moveTo(s,y0);\
		1353	if( sub_devision == i){ ctx.lineTo(s,ys); } else { ctx.lineTo(s,yh); };\
		1354	i++;\
		1355	};\
		1356	};\
		1357	ctx.moveTo(p,y0);ctx.lineTo(p,y1);\
		1358	ctx.closePath();\
		1359	ctx.stroke();\
		1360	if( use_axis_numbering >-1 ){\
		1361	var str = x_strings[use_axis_numbering];\
		1362	len = str.length;if((len/2+0.5)%%2 == 0){ alert(\"xaxis number unpaired: text missing ! \");return;};\
		1363	var corr;var x_nums;var x_text;var flipflop = 0;var off = ybase1;\
		1364	ctx.beginPath();\
		1365	if( x_strings_up[use_axis_numbering] == null){\
		1366	for(var p = 0 ; p < len ; p = p+2){\
		1367	var x_nums = x2px(eval(str[p]));\
		1368	var x_text = str[p+1];\
		1369	corr = ctx.measureText(x_text).width;\
		1370	if( corr > xmajor){ if(flipflop == 0 ){flipflop = 1; off = ybase2;}else{flipflop = 0; off = ybase1;};};\
		1371	ctx.fillText(x_text,parseInt(x_nums-0.5*corr),off);\
		1372	};\
		1373	}\
		1374	else\
		1375	{\
		1376	for(var p = 0 ; p < len ; p = p+2){\
		1377	x_nums = x2px(eval(str[p]));\
		1378	x_text = str[p+1];\
		1379	corr = ctx.measureText(x_text).width + ybase1 - fontsize;\
		1380	ctx.save();\
		1381	ctx.translate(x_nums+0.5*fontsize, corr);\
		1382	ctx.rotate(-1.5708);\
		1383	ctx.fillText(x_text,0,0);\
		1384	ctx.restore();\
		1385	};\
		1386	}\
		1387	}\
		1388	else\
		1389	{\
		1390	var corr;var num;var flipflop = 0;var off = ybase1;\
		1391	var prec = parseInt(Math.log(precision)/Math.log(10));\
		1392	for(var p = x0 ; p < x1+xmajor ; p = p+xmajor){\
		1393	num = (px2x(p)).toFixed(prec);\
		1394	corr = ctx.measureText(num).width;\
		1395	if( corr > xmajor){ if(flipflop == 0 ){flipflop = 1; off = ybase2;}else{flipflop = 0; off = ybase1;};};\
		1396	ctx.fillText(num,parseInt(p - 0.5*corr),off);\
		1397	};\
		1398	};\
		1399	};",canvas_root_id);
		1400	break;
		1401
		1402	case DRAW_GRID:/* not used for userdraw */
		1403	fprintf(js_include_file,"\n/* draw grid */\
		1404	var draw_grid%d = function(canvas_type,precision,stroke_opacity,xmajor,ymajor,xminor,yminor,tics_length,line_width,stroke_color,axis_color,font_size,font_family,use_axis,use_axis_numbering,use_dashed,dashtype0,dashtype1,font_color,fill_opacity){\
		1405	var obj;if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){obj = document.getElementById(\"wims_canvas%d\"+canvas_type);}else{obj = create_canvas%d(canvas_type,xsize,ysize);};\
		1406	var ctx = obj.getContext(\"2d\");ctx.clearRect(0,0,xsize,ysize);\
		1407	if(use_dashed == 1){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{ctx.mozDash = [dashtype0,dashtype1];};};\
		1408	ctx.save();\
		1409	var stroke_color = \"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		1410	ctx.fillStyle = \"rgba(\"+font_color+\",\"+1.0+\")\";\
		1411	var axis_color = \"rgba(\"+axis_color+\",\"+stroke_opacity+\")\";\
		1412	ctx.font = font_family;\
		1413	var barcolor = new Array();\
		1414	var xstep = xsize*xmajor/(xmax - xmin);\
		1415	var ystep = ysize*ymajor/(ymax - ymin);\
		1416	var x2step = xstep / xminor;\
		1417	var y2step = ystep / yminor;\
		1418	var zero_x = x2px(0);var zero_y = y2px(0);var f_x;var f_y;\
		1419	if(xmin < 0 ){ f_x = -1;}else{ f_x = 1;};\
		1420	if(ymin < 0 ){ f_y = -1;}else{ f_y = 1;};\
		1421	ctx.beginPath();\
		1422	ctx.lineWidth = line_width;\
		1423	ctx.strokeStyle = stroke_color;\
		1424	for(var p = zero_x ; p < xsize; p = p + xstep){\
		1425	ctx.moveTo(p,0);\
		1426	ctx.lineTo(p,ysize);\
		1427	};\
		1428	for(var p = zero_x ; p > 0; p = p - xstep){\
		1429	ctx.moveTo(p,0);\
		1430	ctx.lineTo(p,ysize);\
		1431	};\
		1432	for(var p = zero_y ; p < ysize; p = p + ystep){\
		1433	ctx.moveTo(0,p);\
		1434	ctx.lineTo(xsize,p);\
		1435	};\
		1436	for(var p = zero_y ; p > 0; p = p - ystep){\
		1437	ctx.moveTo(0,p);\
		1438	ctx.lineTo(xsize,p);\
		1439	};\
		1440	if( typeof(xaxislabel) !== 'undefined' ){\
		1441	ctx.save();\
15313	schaersvoo	1442	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	1443	var corr = parseInt(1.1*ctx.measureText(xaxislabel).width);\
		1444	ctx.fillText(xaxislabel,xsize - corr,zero_y - tics_length - 0.4*font_size);\
		1445	ctx.restore();\
		1446	};\
		1447	if( typeof(yaxislabel) !== 'undefined' ){\
		1448	ctx.save();\
15313	schaersvoo	1449	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	1450	var corr = parseInt(ctx.measureText(yaxislabel).width + font_size);\
		1451	ctx.translate(zero_x+tics_length + font_size,corr);\
		1452	ctx.rotate(-0.5*Math.PI);\
		1453	ctx.fillText(yaxislabel,0,0);\
		1454	ctx.restore();\
		1455	};\
		1456	ctx.stroke();\
		1457	ctx.closePath();",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
		1458
		1459	if( use_axis == 1 ){
		1460	fprintf(js_include_file,"\
		1461	ctx.save();\
		1462	ctx.beginPath();\
		1463	ctx.strokeStyle = stroke_color;\
		1464	ctx.lineWidth = 0.6*line_width;\
		1465	for(var p = zero_x ; p < xsize; p = p + x2step){\
		1466	ctx.moveTo(p,0);\
		1467	ctx.lineTo(p,ysize);\
		1468	};\
		1469	for(var p = zero_x ; p > 0; p = p - x2step){\
		1470	ctx.moveTo(p,0);\
		1471	ctx.lineTo(p,ysize);\
		1472	};\
		1473	for(var p = zero_y ; p < ysize; p = p + y2step){\
		1474	ctx.moveTo(0,p);\
		1475	ctx.lineTo(xsize,p);\
		1476	};\
		1477	for(var p = zero_y ; p > 0; p = p - y2step){\
		1478	ctx.moveTo(0,p);\
		1479	ctx.lineTo(xsize,p);\
		1480	};\
		1481	ctx.stroke();\
		1482	ctx.closePath();\
		1483	ctx.beginPath();\
		1484	ctx.lineWidth = 2*line_width;\
		1485	ctx.strokeStyle = axis_color;\
		1486	ctx.moveTo(0,zero_y);\
		1487	ctx.lineTo(xsize,zero_y);\
		1488	ctx.moveTo(zero_x,0);\
		1489	ctx.lineTo(zero_x,ysize);\
		1490	ctx.stroke();\
		1491	ctx.closePath();\
		1492	ctx.lineWidth = line_width+0.5;\
		1493	ctx.beginPath();\
		1494	for(var p = zero_x ; p < xsize; p = p + xstep){\
		1495	ctx.moveTo(p,zero_y-tics_length);\
		1496	ctx.lineTo(p,zero_y+tics_length);\
		1497	};\
		1498	for(var p = zero_x ; p > 0; p = p - xstep){\
		1499	ctx.moveTo(p,zero_y-tics_length);\
		1500	ctx.lineTo(p,zero_y+tics_length);\
		1501	};\
		1502	for(var p = zero_y ; p < ysize; p = p + ystep){\
		1503	ctx.moveTo(zero_x-tics_length,p);\
		1504	ctx.lineTo(zero_x+tics_length,p);\
		1505	};\
		1506	for(var p = zero_y ; p > 0; p = p - ystep){\
		1507	ctx.moveTo(zero_x-tics_length,p);\
		1508	ctx.lineTo(zero_x+tics_length,p);\
		1509	};\
		1510	for(var p = zero_x ; p < xsize; p = p + x2step){\
		1511	ctx.moveTo(p,zero_y-0.5*tics_length);\
		1512	ctx.lineTo(p,zero_y+0.5*tics_length);\
		1513	};\
		1514	for(var p = zero_x ; p > 0; p = p - x2step){\
		1515	ctx.moveTo(p,zero_y-0.5*tics_length);\
		1516	ctx.lineTo(p,zero_y+0.5*tics_length);\
		1517	};\
		1518	for(var p = zero_y ; p < ysize; p = p + y2step){\
		1519	ctx.moveTo(zero_x-0.5*tics_length,p);\
		1520	ctx.lineTo(zero_x+0.5*tics_length,p);\
		1521	};\
		1522	for(var p = zero_y ; p > 0; p = p - y2step){\
		1523	ctx.moveTo(zero_x-0.5*tics_length,p);\
		1524	ctx.lineTo(zero_x+0.5*tics_length,p);\
		1525	};\
		1526	ctx.stroke();\
		1527	ctx.closePath();\
		1528	ctx.restore();");
		1529	}
		1530
		1531	if( use_axis_numbering != -1 ){
		1532	fprintf(js_include_file,"\
		1533	ctx.save();\
		1534	ctx.fillColor = axis_color;\
		1535	ctx.strokeStyle = axis_color;\
		1536	ctx.lineWidth = 2*line_width;\
		1537	ctx.font = font_family;\
		1538	var shift = zero_y+2*font_size;var flip=0;var skip=0;var corr;var cnt;var disp_cnt;var prec;\
		1539	if( x_strings[use_axis_numbering] != null ){\
		1540	var str = x_strings[use_axis_numbering];\
		1541	var len = str.length;if((len/2+0.5)%%2 == 0){ alert(\"xaxis number unpaired: text missing ! \");return;};\
		1542	ctx.beginPath();\
		1543	if( x_strings_up[use_axis_numbering] == null){\
		1544	for(var p = 0 ; p < len ; p = p+2){\
		1545	var x_nums = x2px(eval(str[p]));\
		1546	var x_text = str[p+1];\
		1547	corr = ctx.measureText(x_text).width;\
		1548	skip = 1.2*corr/xstep;\
		1549	if( zero_y+2font_size > ysize ){shift = ysize - 2font_size;};\
		1550	if( skip > 1 ){if(flip == 0 ){flip = 1; shift = shift + font_size;}else{flip = 0; shift = shift - font_size;};};\
		1551	ctx.fillText(x_text,parseInt(x_nums-0.5*corr),shift);\
		1552	ctx.moveTo(x_nums,zero_y - tics_length);\
		1553	ctx.lineTo(x_nums,zero_y + tics_length);\
		1554	};\
		1555	}\
		1556	else\
		1557	{\
		1558	for(var p = 0 ; p < len ; p = p+2){\
		1559	var x_nums = x2px(eval(str[p]));\
		1560	var x_text = str[p+1];\
		1561	corr = 2 + tics_length + zero_y + ctx.measureText(x_text).width;\
		1562	if( corr > ysize ){corr = ysize;};\
		1563	ctx.save();\
		1564	ctx.translate(x_nums+0.25*font_size, corr);\
		1565	ctx.rotate(-1.5708);\
		1566	ctx.fillText(x_text,0,0);\
		1567	ctx.restore();\
		1568	ctx.moveTo(x_nums,zero_y - tics_length);\
		1569	ctx.lineTo(x_nums,zero_y + tics_length);\
		1570	};\
		1571	};\
		1572	ctx.closePath();\
		1573	}\
		1574	else\
		1575	{\
		1576	skip = 1;cnt = px2x(zero_x);\
		1577	prec = Math.log(precision)/(Math.log(10));\
		1578	var y_basis;if(f_y == 1){ y_basis = ysize }else{ y_basis = zero_y + 1.4*font_size;};\
		1579	for( var p = zero_x ; p < xsize ; p = p+xstep){\
		1580	if(skip == 0 ){\
		1581	disp_cnt = cnt.toFixed(prec);\
		1582	corr = ctx.measureText(disp_cnt).width;\
		1583	skip = parseInt(1.2*corr/xstep);\
		1584	ctx.fillText(disp_cnt,p-0.5*corr,y_basis);\
		1585	}\
		1586	else\
		1587	{\
		1588	skip--;\
		1589	};\
		1590	cnt = cnt + xmajor;\
		1591	};\
		1592	cnt = px2x(zero_x);skip = 1;\
		1593	for( var p = zero_x ; p > 0 ; p = p-xstep){\
		1594	if(skip == 0 ){\
		1595	disp_cnt = cnt.toFixed(prec);\
		1596	corr = ctx.measureText(disp_cnt).width;\
		1597	skip = parseInt(1.2*corr/xstep);\
		1598	ctx.fillText(disp_cnt,p-0.5*corr,y_basis);\
		1599	}\
		1600	else\
		1601	{\
		1602	skip--;\
		1603	};\
		1604	cnt = cnt - xmajor;\
		1605	};\
		1606	};\
		1607	if( y_strings != null ){\
		1608	var len = y_strings.length;if((len/2+0.5)%%2 == 0){ alert(\"yaxis number unpaired: text missing ! \");return;};\
		1609	ctx.beginPath();\
		1610	for(var p = 0 ; p < len ; p = p+2){\
		1611	var y_nums = y2px(eval(y_strings[p]));\
		1612	var y_text = y_strings[p+1];\
		1613	corr = 2 + tics_length + ctx.measureText(y_text).width;\
		1614	if( corr > zero_x){corr = parseInt(zero_x+2); }\
		1615	ctx.fillText(y_text,zero_x - corr,y_nums + 0.5*font_size);\
		1616	ctx.moveTo(zero_x - tics_length,y_nums);\
		1617	ctx.lineTo(zero_x + tics_length,y_nums);\
		1618	};\
		1619	ctx.closePath();\
		1620	}\
		1621	else\
		1622	{\
		1623	if(f_x == 1){ corr = 1.5*tics_length; }\
		1624	cnt = px2y(zero_y);skip = 1;\
		1625	for( var p = zero_y ; p < ysize ; p = p+ystep){\
		1626	if(skip == 0 ){\
		1627	skip = parseInt(1.4*font_size/ystep);\
		1628	disp_cnt = cnt.toFixed(prec);\
		1629	if(f_x == -1 ){ corr = parseInt(zero_x - (2 + tics_length + ctx.measureText(disp_cnt).width));};\
		1630	ctx.fillText(disp_cnt,parseInt(corr),parseInt(p+(0.4*font_size)));\
		1631	}\
		1632	else\
		1633	{\
		1634	skip--;\
		1635	};\
		1636	cnt = cnt - ymajor;\
		1637	};\
		1638	corr = 0;cnt = px2y(zero_y);skip = 1;\
		1639	if(f_x == 1){ corr = 1.5*tics_length; }\
		1640	for( var p = zero_y ; p > 0 ; p = p-ystep){\
		1641	if(skip == 0 ){\
		1642	skip = parseInt(1.4*font_size/ystep);\
		1643	disp_cnt = cnt.toFixed(prec);\
		1644	if(f_x == -1 ){corr = parseInt(zero_x - (2 + tics_length + ctx.measureText(disp_cnt).width));};\
		1645	ctx.fillText(disp_cnt,parseInt(corr),parseInt(p+(0.4*font_size)));\
		1646	}\
		1647	else\
		1648	{\
		1649	skip--;\
		1650	};\
		1651	cnt = cnt + ymajor;\
		1652	};\
		1653	};\
		1654	ctx.stroke();\
		1655	ctx.restore();");
		1656	}
		1657
		1658	if( legend_cnt != -1 ){
		1659	fprintf(js_include_file,"ctx.save();\
		1660	ctx.globalAlpha = 1.0;\
15313	schaersvoo	1661	ctx.font = \"bold \"+font_size+\"px Arial\";\
15111	schaersvoo	1662	var y_offset = 2*font_size;\
		1663	var txt;var txt_size;\
		1664	var x_offset = xsize - 2*font_size;\
		1665	var l_length = legend0.length;\
		1666	if( typeof(legendcolors0) !== 'undefined' ){\
		1667	for(var p = 0 ; p < l_length ; p++){\
		1668	barcolor[p] = legendcolors0[p];\
		1669	};\
		1670	}\
		1671	else\
		1672	{\
		1673	if( barcolor.length == 0 ){\
		1674	for(var p = 0 ; p < l_length ; p++){\
		1675	barcolor[p] = stroke_color;\
		1676	};\
		1677	};\
		1678	};\
		1679	for(var p = 0; p < l_length; p++){\
		1680	ctx.fillStyle = barcolor[p];\
		1681	txt = legend0[p];\
		1682	txt_size = ctx.measureText(txt).width;\
		1683	ctx.fillText(legend0[p],x_offset - txt_size, y_offset);\
		1684	y_offset = parseInt(y_offset + 1.5*font_size);\
		1685	};\
		1686	ctx.restore();");
		1687	}
		1688
		1689	if( barchart_cnt != 0 ){
		1690	fprintf(js_include_file,"ctx.save();\
		1691	var num_barcharts = 0;\
		1692	var bar_name = eval('barchart_0');\
		1693	while( typeof(bar_name) !== 'undefined' ){\
		1694	try{ bar_name = eval('barchart_'+num_barcharts);num_barcharts++;}catch(e){break;};\
		1695	};\
		1696	var bar_width = parseInt(0.8*x2step/(num_barcharts));\
		1697	for(var i=0 ; i< num_barcharts ; i++){\
		1698	bar_name = eval('barchart_'+i);\
		1699	var bar_x = new Array();\
		1700	var bar_y = new Array();\
		1701	var lb = bar_name.length;\
		1702	var idx = 0;\
		1703	var dx = parseInt(0.5ibar_width);\
		1704	for( var p = 0 ; p < lb ; p = p + 3 ){\
		1705	bar_x[idx] = x2px(bar_name[p]);\
		1706	bar_y[idx] = y2px(bar_name[p+1]);\
		1707	barcolor[idx] = bar_name[p+2];\
		1708	idx++;\
		1709	};\
		1710	ctx.globalAlpha = fill_opacity;\
		1711	for( var p = 0; p < idx ; p++ ){\
		1712	ctx.beginPath();\
		1713	ctx.strokeStyle = barcolor[p];\
		1714	ctx.fillStyle = barcolor[p];\
		1715	ctx.rect(bar_x[p]-0.4*x2step+dx,bar_y[p],bar_width,zero_y - bar_y[p]);\
		1716	ctx.fill();\
		1717	ctx.stroke();\
		1718	ctx.closePath();\
		1719	};\
		1720	};\
		1721	ctx.restore();");
		1722	}
		1723
		1724	if( linegraph_cnt != 0 ){
		1725	fprintf(js_include_file,"ctx.save();\
		1726	ctx.globalAlpha = 1.0;\
		1727	var i = 0;\
		1728	var line_name = eval('linegraph_'+i);\
		1729	while ( typeof(line_name) !== 'undefined' ){\
		1730	ctx.strokeStyle = 'rgba('+line_name[0]+','+stroke_opacity+')';\
		1731	ctx.lineWidth = parseInt(line_name[1]);\
		1732	if(line_name[2] == \"1\"){\
		1733	var d1 = parseInt(line_name[3]);\
		1734	var d2 = parseInt(line_name[4]);\
		1735	if(ctx.setLineDash){ ctx.setLineDash([d1,d2]); } else { ctx.mozDash = [d1,d2];};\
		1736	}\
		1737	else\
		1738	{\
		1739	if(ctx.setLineDash){ctx.setLineDash = null;};if(ctx.mozDash){ctx.mozDash = null;}\
		1740	};\
		1741	var data_x = new Array();var data_y = new Array();\
		1742	var lb = line_name.length;var idx = 0;\
		1743	for( var p = 5 ; p < lb ; p = p + 2 ){\
		1744	data_x[idx] = x2px(line_name[p]);\
		1745	data_y[idx] = y2px(line_name[p+1]);\
		1746	idx++;\
		1747	};\
		1748	for( var p = 0; p < idx ; p++){\
		1749	ctx.beginPath();\
		1750	ctx.moveTo(data_x[p],data_y[p]);\
		1751	ctx.lineTo(data_x[p+1],data_y[p+1]);\
		1752	ctx.stroke();\
		1753	ctx.closePath();\
		1754	};\
		1755	i++;\
		1756	try{ line_name = eval('linegraph_'+i); }catch(e){ break; }\
		1757	};\
		1758	ctx.restore();return;");
		1759	}
		1760	fprintf(js_include_file,"};");
		1761
		1762	break;
		1763
		1764	case DRAW_PIECHART:
		1765	fprintf(js_include_file,"\n/* draw piecharts */\
		1766	if( typeof(all_fill_patterns) != 'object' ){ var all_fill_patterns = []; };\
		1767	function draw_piechart(canvas_type,x_center,y_center,radius, data_color_list,fill_opacity,legend_cnt,font_family,use_filled,use_offset){\
		1768	var obj;\
		1769	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		1770	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		1771	}\
		1772	else\
		1773	{\
		1774	obj = create_canvas%d(canvas_type,xsize,ysize);\
		1775	};\
		1776	var center_text = use_offset \|\| 0;\
		1777	var ld = data_color_list.length;\
		1778	var sum = 0;\
		1779	var idx = 0;\
		1780	var font_size = parseInt(font_family.replace(/[^0-9\\.]+/g, \"\"));\
		1781	var colors = new Array();\
		1782	var data = new Array();\
		1783	for(var p = 0;p < ld; p = p + 2){\
		1784	data[idx] = parseFloat(data_color_list[p]);\
		1785	sum = sum + data[idx];\
		1786	colors[idx] = data_color_list[p+1];\
		1787	idx++;\
		1788	};\
		1789	if( use_filled > 1 ){\
		1790	var i = 2;\
		1791	for(var p = 0 ; p < idx ; p++){\
		1792	if(i > 5 ){ i = 2; };\
		1793	var pat = create_Pattern(0,0,i,colors[p]); all_fill_patterns[p] = pat;i++;\
		1794	};\
		1795	};\
		1796	var ctx = obj.getContext(\"2d\");\
		1797	ctx.save();\
		1798	var angle;\
		1799	var angle_end = 0;\
		1800	var offset = Math.PI / 2;\
		1801	ctx.globalAlpha = fill_opacity;\
		1802	var angles = [];\
		1803	for(var p=0; p < idx; p++){\
		1804	ctx.beginPath();\
		1805	ctx.moveTo(x_center,y_center);\
		1806	angle = Math.PI * (2 * data[p] / sum);\
		1807	ctx.arc(x_center,y_center, radius, angle_end - offset, angle_end + angle - offset, false);\
		1808	ctx.lineTo(x_center, y_center);\
		1809	if( use_filled > 1 ){ ctx.fillStyle = all_fill_patterns[p]; }else{ ctx.fillStyle = colors[p];};\
		1810	ctx.fill();\
		1811	ctx.closePath();\
		1812	angles.push(angle_end + angle - offset);\
		1813	angle_end = angle_end + angle;\
		1814	};\
		1815	if(typeof(legend0) !== 'undefined'){\
		1816	var legenda = eval(\"legend\"+legend_cnt);\
		1817	ctx.globalAlpha = 1.0;\
		1818	ctx.font = font_family;\
		1819	var y_offset = font_size;\
		1820	var x_offset = 0;\
		1821	var txt;var txt_size;\
		1822	for(var p = 0; p < idx; p++){\
		1823	ctx.fillStyle = colors[p];\
		1824	txt = legenda[p];\
		1825	txt_size = ctx.measureText(txt).width + 2;\
		1826	if(center_text == 4){\
		1827	ctx.save();\
		1828	ctx.translate(x_center, y_center);\
		1829	ctx.rotate(angles[p]);\
		1830	ctx.fillText(txt,radius-txt_size,0);\
		1831	ctx.restore();\
		1832	}\
		1833	else\
		1834	{\
		1835	if( x_center + radius + txt_size > xsize ){ x_offset = x_center + radius + txt_size - xsize;} else { x_offset = 0; };\
		1836	ctx.fillText(txt,x_center + radius - x_offset, y_center - radius + y_offset);\
		1837	y_offset = parseInt(y_offset + 1.5*font_size);\
		1838	};\
		1839	};\
		1840	};\
		1841	ctx.restore();\
		1842	};",canvas_root_id,canvas_root_id,canvas_root_id);
		1843	break;
		1844
		1845	case DRAW_JSBOXPLOT:
		1846	fprintf(js_include_file,"\n/* draw jsboxplots */\
		1847	if( typeof(all_fill_patterns) != 'object' ){ var all_fill_patterns = []; };\
		1848	function statistics(data){\
		1849	var len = data.length;\
		1850	var min = 10000000;\
		1851	var max = -10000000;\
		1852	var sum = 0;var d;\
		1853	for(var i=0;i<len;i++){\
		1854	d = data[i];\
		1855	if(d < min){min = d;}else{if(d > max){max = d;};};\
		1856	sum+= parseFloat(data[i]);\
		1857	};\
		1858	var mean = parseFloat(sum/len);\
		1859	var variance = 0;\
		1860	for(var i=0;i<len;i++){\
		1861	d = data[i];\
		1862	variance += (d - mean)*(d - mean);\
		1863	};\
		1864	variance = parseFloat(variance / len);\
		1865	var std = Math.sqrt(variance);\
		1866	data.sort(function(a,b){return a - b;});\
		1867	var median;var Q1;var Q3;\
		1868	var half = Math.floor(0.5*len);\
		1869	var q1 = Math.floor(0.25*len);\
		1870	var q3 = Math.floor(0.75*len);\
		1871	var half = Math.floor(0.5*len);\
		1872	if(len %%2 == 1){\
		1873	median = data[half];\
		1874	Q1 = data[q1];\
		1875	Q3 = data[q3];\
		1876	}\
		1877	else\
		1878	{\
		1879	median = (data[half - 1] + data[half] )/2;\
		1880	Q1 = (data[q1 - 1] + data[q1] )/2;\
		1881	Q3 = (data[q3 - 1] + data[q3] )/2;\
		1882	};\
		1883	return [min,Q1,median,Q3,max];\
		1884	};");
		1885	break;
		1886
		1887	case DRAW_BOXPLOT:
		1888	fprintf(js_include_file,"\n/* draw boxplots */\
		1889	if( typeof(all_fill_patterns) != 'object' ){ var all_fill_patterns = []; };\
		1890	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){\
		1891	var obj;\
		1892	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){obj = document.getElementById(\"wims_canvas%d\"+canvas_type);}else{obj = create_canvas%d(canvas_type,xsize,ysize);};\
		1893	var ctx = obj.getContext(\"2d\");\
		1894	ctx.clearRect(0,0,xsize,ysize);\
		1895	ctx.save();\
		1896	ctx.lineWidth = line_width;\
		1897	ctx.strokeStyle = \"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		1898	var colors = new Array(2);\
		1899	colors[0] = \"rgba(\"+fill_color+\",\"+fill_opacity+\")\";\
		1900	colors[1] = \"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		1901	if( use_filled > 1 ){\
		1902	var pat = create_Pattern(0,0,3,colors[0]);\
		1903	all_fill_patterns[0] = pat;\
		1904	pat = create_Pattern(0,0,4,colors[1]);\
		1905	all_fill_patterns[1] = pat;\
		1906	};\
		1907	if(use_dashed == 1){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{if(ctx.mozDash){ ctx.mozDash = [dashtype0,dashtype1];};};};\
		1908	var hh = 0.25*hw;\
		1909	switch(boxplot_source){\
		1910	case 1: if( typeof(jsboxplot_data) === 'undefined'){return;};data = statistics(jsboxplot_data);break;\
		1911	case 2: if( typeof(student_boxplot_data) === 'undefined'){return;};data = statistics(student_boxplot_data);break;\
		1912	case 3: if( typeof(student_boxplot) === 'undefined'){return;};data = student_boxplot;break;\
		1913	default: break;\
		1914	};\
		1915	var min,Q1,median,Q3,max;\
		1916	if(xy == 1 ){\
		1917	min=x2px(data[0]);Q1=x2px(data[1]);median=x2px(data[2]);Q3=x2px(data[3]);max=x2px(data[4]);\
		1918	hh = Math.abs(y2px(hh) - y2px(ystart));\
		1919	hw = Math.abs(y2px(hw) - y2px(ystart));\
		1920	cxy = y2px(cxy);\
		1921	ctx.beginPath();\
		1922	ctx.moveTo(min,cxy);\
		1923	ctx.lineTo(Q1,cxy);\
		1924	ctx.moveTo(Q3,cxy);\
		1925	ctx.lineTo(max,cxy);\
		1926	ctx.moveTo(min,cxy+hh);\
		1927	ctx.lineTo(min,cxy-hh);\
		1928	ctx.moveTo(max,cxy+hh);\
		1929	ctx.lineTo(max,cxy-hh);\
		1930	ctx.closePath();\
		1931	ctx.stroke();\
		1932	ctx.beginPath();\
		1933	ctx.rect(Q1,cxy-2*hh,median-Q1,hw);\
		1934	ctx.closePath();\
		1935	if( use_filled != 0 ){\
		1936	if( use_filled == 1 ) {ctx.fillStyle = colors[0]; }else{ ctx.fillStyle = all_fill_patterns[0] };\
		1937	ctx.fill();\
		1938	};\
		1939	ctx.stroke();\
		1940	ctx.beginPath();\
		1941	ctx.rect(median,cxy-2*hh,Q3-median,hw);\
		1942	ctx.closePath();\
		1943	if( use_filled != 0 ){\
		1944	if( use_filled == 1 ) {ctx.fillStyle = colors[1]; }else{ ctx.fillStyle = all_fill_patterns[1] };\
		1945	ctx.fill();\
		1946	};\
		1947	ctx.stroke();\
		1948	}else{\
		1949	min=y2px(data[0]);Q1=y2px(data[1]);median=y2px(data[2]);Q3=y2px(data[3]);max=y2px(data[4]);\
		1950	hh = Math.abs(x2px(hh) - x2px(xstart));\
		1951	hw = Math.abs(x2px(hw) - x2px(xstart));\
		1952	cxy = x2px(cxy);\
		1953	ctx.beginPath();\
		1954	ctx.moveTo(cxy,min);\
		1955	ctx.lineTo(cxy,Q1);\
		1956	ctx.moveTo(cxy,Q3);\
		1957	ctx.lineTo(cxy,max);\
		1958	ctx.moveTo(cxy + hh,min);\
		1959	ctx.lineTo(cxy - hh,min);\
		1960	ctx.moveTo(cxy + hh,max);\
		1961	ctx.lineTo(cxy - hh,max);\
		1962	ctx.closePath;\
		1963	ctx.stroke();\
		1964	ctx.beginPath();\
		1965	ctx.rect(cxy - 2*hh,Q1,hw,median - Q1);\
		1966	ctx.closePath();\
		1967	if( use_filled != 0 ){\
		1968	if( use_filled == 1 ) {ctx.fillStyle = colors[0]; }else{ ctx.fillStyle = all_fill_patterns[0] };\
		1969	ctx.fill();\
		1970	};\
		1971	ctx.stroke();\
		1972	ctx.beginPath();\
		1973	ctx.rect(cxy - 2*hh,median,hw,Q3 - median);\
		1974	ctx.closePath();\
		1975	if( use_filled != 0 ){\
		1976	if( use_filled == 1 ) {ctx.fillStyle = colors[1]; }else{ ctx.fillStyle = all_fill_patterns[1] };\
		1977	ctx.fill();\
		1978	};\
		1979	ctx.stroke();\
		1980	};\
		1981	ctx.restore();};",canvas_root_id,canvas_root_id,canvas_root_id);
		1982	break;
		1983
		1984	case DRAW_CENTERSTRING:
		1985	fprintf(js_include_file,"\n/* draw centerstring */\
		1986	var draw_centerstring = function(canvas_type,y,font_family,stroke_color,stroke_opacity,text){\
		1987	var obj;\
		1988	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		1989	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		1990	}\
		1991	else\
		1992	{\
		1993	obj = create_canvas%d(canvas_type,xsize,ysize);\
		1994	};\
		1995	var ctx = obj.getContext(\"2d\");\
		1996	ctx.save();\
		1997	ctx.clearRect(0,0,xsize,ysize);\
		1998	ctx.font = font_family;\
		1999	ctx.fillStyle = \"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		2000	var stringwidth = ctx.measureText(text).width;\
		2001	var x = parseInt((xsize - stringwidth)/2);if( x < 0 ){x = 0;};\
		2002	ctx.fillText(text,x,y2px(y));\
		2003	ctx.restore();\
		2004	return;\
		2005	};",canvas_root_id,canvas_root_id,canvas_root_id);
		2006	break;
		2007
		2008	case DRAW_TEXTS:
		2009	fprintf(js_include_file,"\n/* draw text */\
		2010	var draw_text = function(canvas_type,x,y,font_size,font_family,stroke_color,stroke_opacity,angle2,text,use_rotate,angle,use_offset){\
		2011	var obj;\
		2012	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		2013	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		2014	}\
		2015	else\
		2016	{\
		2017	obj = create_canvas%d(canvas_type,xsize,ysize);\
		2018	};\
		2019	var ctx = obj.getContext(\"2d\");\
		2020	if( font_family != 'null' ){\
		2021	ctx.font = font_family;\
		2022	}\
		2023	else\
		2024	{\
15313	schaersvoo	2025	ctx.font = font_size+'px Arial';\
15111	schaersvoo	2026	};\
		2027	if( use_offset == 3 ){if(angle2 < 0 ){ y = y + 0.8font_size; x = x + (Math.cos(angle2))font_size; }else{y = y - 0.8font_size; x = x + (Math.sin(angle2))font_size;};};\
		2028	if(angle2 == 0 && angle != 0){\
		2029	ctx.save();\
		2030	if(use_rotate == 1 ){\
		2031	ctx.rotate(angle*Math.PI/180);};\
		2032	ctx.restore();\
		2033	};\
		2034	ctx.fillStyle = \"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		2035	if(angle2 != 0){\
		2036	ctx.save();\
		2037	ctx.translate(x,y);\
		2038	ctx.rotate((360-angle2)*(Math.PI / 180));\
		2039	ctx.fillText(text,0,0);\
		2040	ctx.restore();\
		2041	}\
		2042	else\
		2043	{\
		2044	ctx.fillText(text,x,y);\
		2045	};\
		2046	return;\
		2047	};",canvas_root_id,canvas_root_id,canvas_root_id);
		2048	break;
		2049
		2050	case DRAW_INPUTS:
		2051	/* function center_input may be used for other centering...if not? integrate it in draw_static_inputs...*/
		2052	fprintf(js_include_file,"\n/* draw static input fields */\
		2053	if(typeof(input_cnt) !== 'undefined' ){var input_cnt = 0;};\
		2054	var draw_static_inputs = function(root_id,num,x,y,size,readonly,css_class,value,use_offset){\
		2055	var input = document.createElement(\"input\");\
		2056	input.setAttribute(\"id\",\"canvas_input\"+num);\
		2057	input.setAttribute(\"style\",\"text-align:center;position:absolute;left:\"+x+\"px;top:\"+y+\"px;\");\
		2058	if(css_class != \"none\"){input.setAttribute(\"class\",css_class);};\
		2059	input.setAttribute(\"size\",size);\
		2060	input.setAttribute(\"value\",value);\
		2061	input.addEventListener(\"touchstart\", function(e){this.focus();},false);\
		2062	if( readonly == 0 \|\| wims_status == \"done\" ){ input.setAttribute(\"readonly\",\"readonly\");if( wims_status == \"done\" ){input.setAttribute(\"value\",\"\");};};\
		2063	canvas_div.appendChild(input);\
		2064	if(use_offset != 0 ){ center_input('canvas_input'+num,x,y,css_class);};\
		2065	input_cnt++;\
		2066	};\
		2067	function center_input(id,x,y,css_class){\
		2068	var inp = document.getElementById(id);\
		2069	var pos = inp.getBoundingClientRect();\
		2070	var center_x = parseInt(x - 0.5*(pos.width));\
		2071	var center_y = parseInt(y - 0.5*(pos.height));\
		2072	try{if(css_class != \"none\"){inp.setAttribute(\"class\",css_class);};inp.setAttribute(\"style\",\"text-align:center;position:absolute;left:\"+center_x+\"px;top:\"+center_y+\"px;\");}\
		2073	catch(e){console.log('error :'+e);return;};\
		2074	};");
		2075	break;
		2076
		2077	case DRAW_TEXTAREAS:
		2078	fprintf(js_include_file,"\n/* draw text area inputfields */\
		2079	var draw_textareas = function(root_id,num,x,y,cols,rows,readonly,style,value){\
		2080	var canvas_div = document.getElementById(\"canvas_div\"+root_id);\
		2081	var textarea = document.createElement(\"textarea\");\
		2082	textarea.setAttribute(\"id\",\"canvas_input\"+num);\
		2083	textarea.setAttribute(\"style\",\"position:absolute;left:\"+x+\"px;top:\"+y+\"px;\"+style);\
		2084	textarea.setAttribute(\"cols\",cols);\
		2085	textarea.setAttribute(\"rows\",rows);\
		2086	textarea.value = value;\
		2087	if( readonly == 0 \|\| wims_status == \"done\" ){ textarea.setAttribute(\"readonly\",\"readonly\");if( wims_status == \"done\" ){textarea.value=\"\";};};\
		2088	canvas_div.appendChild(textarea);};");
		2089	break;
		2090
		2091	case DRAW_PIXELS:
		2092	fprintf(js_include_file,"\n/* draw pixel */\
		2093	var draw_setpixel = function(x,y,color,opacity,pixelsize){\
		2094	var idx = 2000+Math.ceil(1000*(Math.random()));\
		2095	var canvas = create_canvas%d(idx,xsize,ysize);\
		2096	var d = 0.5*pixelsize;\
		2097	var ctx = canvas.getContext(\"2d\");\
		2098	if(pixelsize%%2 == 1){ ctx.translate(0.5,0.5);};\
		2099	ctx.fillStyle = \"rgba(\"+color+\",\"+opacity+\")\";\
		2100	ctx.clearRect(0,0,xsize,ysize);\
		2101	for(var p=0; p<x.length;p++){\
		2102	ctx.fillRect( x2px(x[p]) - d, y2px(y[p]) - d , pixelsize, pixelsize );\
		2103	};\
		2104	ctx.fill();ctx.stroke();\
		2105	};",canvas_root_id);
		2106	break;
		2107
		2108	case DRAW_CLOCK:
		2109	fprintf(js_include_file,"\n/* command clock */\
		2110	var clock_canvas = create_canvas%d(%d,xsize,ysize);\
		2111	var clock_ctx = clock_canvas.getContext(\"2d\");\
		2112	var clock = function(xc,yc,radius,H,M,S,type,interaction,h_color,m_color,s_color,bg_color,fg_color){\
		2113	clock_ctx.clearRect(xc - radius,yc - radius,2radius,2radius);\
		2114	clock_ctx.save();\
		2115	clock_ctx.globalAlpha = clock_bg_opacity;\
		2116	this.type = type \|\| 0;\
		2117	this.interaction = interaction \|\| 0;\
		2118	this.H = H;\
		2119	this.M = M;\
		2120	this.S = S;\
		2121	this.xc = xc \|\| xsize/2;\
		2122	this.yc = yc \|\| ysize/2;\
		2123	this.radius = radius \|\| xsize/4;\
		2124	var font_size = parseInt(0.2*this.radius);\
		2125	this.H_color = h_color \|\| \"black\";\
		2126	this.M_color = m_color \|\| \"black\";\
		2127	this.S_color = s_color \|\| \"black\";\
		2128	this.fg_color = fg_color \|\| \"black\";\
		2129	this.bg_color = bg_color \|\| \"white\";\
		2130	clock_ctx.translate(this.xc,this.yc);\
		2131	clock_ctx.beginPath();\
		2132	clock_ctx.arc(0,0,this.radius,0,2*Math.PI,false);\
		2133	clock_ctx.fillStyle = this.bg_color;\
		2134	clock_ctx.fill();\
		2135	clock_ctx.closePath();\
		2136	clock_ctx.beginPath();\
		2137	clock_ctx.font = font_size+\"px Arial\";\
		2138	clock_ctx.fillStyle = this.fg_color;\
		2139	clock_ctx.textAlign = \"center\";\
		2140	clock_ctx.textBaseline = 'middle';\
		2141	var angle;var x1,y1,x2,y2;\
		2142	var angle_cos;var angle_sin;\
		2143	clock_ctx.globalAlpha = clock_fg_opacity;\
		2144	switch(type){\
		2145	case 0:clock_ctx.beginPath();\
		2146	for(var p = 1; p <= 12 ; p++){\
		2147	angle_cos = this.radius(Math.cos(p (Math.PI * 2) / 12));\
		2148	angle_sin = this.radius(Math.sin(p (Math.PI * 2) / 12));\
		2149	x1 = 0.8angle_cos;y1 = 0.8angle_sin;x2 = angle_cos;y2 = angle_sin;\
		2150	clock_ctx.moveTo(x1,y1);\
		2151	clock_ctx.lineTo(x2,y2);\
		2152	};\
		2153	for(var p = 1; p <= 60 ; p++){\
		2154	angle_cos = this.radius(Math.cos(p (Math.PI * 2) / 60));\
		2155	angle_sin = this.radius(Math.sin(p (Math.PI * 2) / 60));\
		2156	x1 = 0.9angle_cos;y1 = 0.9angle_sin;x2 = angle_cos;y2 = angle_sin;\
		2157	clock_ctx.moveTo(x1,y1);\
		2158	clock_ctx.lineTo(x2,y2);\
		2159	};\
		2160	clock_ctx.closePath();\
		2161	clock_ctx.stroke();\
		2162	break;\
		2163	case 1:\
		2164	for(var p= 1; p <= 12 ; p++){ angle = (p - 3) * (Math.PI * 2) / 12;x1 = 0.9this.radiusMath.cos(angle);y1 = 0.9this.radiusMath.sin(angle);clock_ctx.fillText(p, x1, y1);};break;\
		2165	case 2:\
		2166	for(var p= 1; p <= 12 ; p++){ angle = (p - 3) * (Math.PI * 2) / 12;x1 = 0.8this.radiusMath.cos(angle);y1 = 0.8this.radiusMath.sin(angle);clock_ctx.fillText(p, x1, y1);};\
		2167	clock_ctx.beginPath();\
		2168	for(var p = 1; p <= 12 ; p++){\
		2169	angle_cos = this.radius(Math.cos(p (Math.PI * 2) / 12));\
		2170	angle_sin = this.radius(Math.sin(p (Math.PI * 2) / 12));\
		2171	x1 = 0.9angle_cos;y1 = 0.9angle_sin;x2 = angle_cos;y2 = angle_sin;\
		2172	clock_ctx.moveTo(x1,y1);\
		2173	clock_ctx.lineTo(x2,y2);\
		2174	};\
		2175	for(var p = 1; p <= 60 ; p++){\
		2176	angle_cos = this.radius(Math.cos(p (Math.PI * 2) / 60));\
		2177	angle_sin = this.radius(Math.sin(p (Math.PI * 2) / 60));\
		2178	x1 = 0.95angle_cos;y1 = 0.95angle_sin;x2 = angle_cos;y2 = angle_sin;\
		2179	clock_ctx.moveTo(x1,y1);\
		2180	clock_ctx.lineTo(x2,y2);\
		2181	};\
		2182	clock_ctx.closePath();\
		2183	clock_ctx.stroke();\
		2184	break;\
		2185	};\
		2186	angle = (this.H - 3 + this.M/60 ) * 2 * Math.PI / 12;\
		2187	clock_ctx.rotate(angle);\
		2188	clock_ctx.beginPath();\
		2189	clock_ctx.moveTo(-3, -2);\
		2190	clock_ctx.lineTo(-3, 2);\
		2191	clock_ctx.lineTo(this.radius * 0.6, 1);\
		2192	clock_ctx.lineTo(this.radius * 0.6, -1);\
		2193	clock_ctx.fillStyle = this.H_color;\
		2194	clock_ctx.fill();\
		2195	clock_ctx.rotate(-angle);\
		2196	angle = (this.M - 15 + this.S/60) * 2 * Math.PI / 60;\
		2197	clock_ctx.rotate(angle);\
		2198	clock_ctx.beginPath();\
		2199	clock_ctx.moveTo(-3, -2);\
		2200	clock_ctx.lineTo(-3, 2);\
		2201	clock_ctx.lineTo(this.radius * 0.8, 1);\
		2202	clock_ctx.lineTo(this.radius * 0.8, -1);\
		2203	clock_ctx.fillStyle = this.M_color;\
		2204	clock_ctx.fill();\
		2205	clock_ctx.rotate(-angle);\
		2206	angle = (this.S - 15) * 2 * Math.PI / 60;\
		2207	clock_ctx.rotate(angle);\
		2208	clock_ctx.beginPath();\
		2209	clock_ctx.moveTo(0,0);\
		2210	clock_ctx.lineTo(this.radius * 0.9, 1);\
		2211	clock_ctx.lineTo(this.radius * 0.9, -1);\
		2212	clock_ctx.strokeStyle = this.S_color;\
		2213	clock_ctx.stroke();\
		2214	clock_ctx.restore();\
		2215	};",canvas_root_id,CLOCK_CANVAS);
		2216	break;
		2217
		2218	case DRAW_LATTICE:
		2219	fprintf(js_include_file,"\n/* draw lattice */\
		2220	var draw_lattice = function(canvas_type,line_width,x0,y0,dx1,dy1,dx2,dy2,n1,n2,fill_color,fill_opacity,stroke_color,stroke_opacity,use_rotate,angle,use_filled){\
		2221	var obj;\
		2222	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		2223	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		2224	}\
		2225	else\
		2226	{\
		2227	obj = create_canvas%d(canvas_type,xsize,ysize);\
		2228	};\
		2229	var ctx = obj.getContext(\"2d\");\
		2230	ctx.save();\
		2231	if(use_rotate == 1 ){ctx.rotate(angle*Math.PI/180);}\
		2232	var color = \"rgba(\"+fill_color+\",\"+fill_opacity+\")\";\
		2233	if(use_filled > 1 ){ if(! all_fill_patterns[use_filled] ){ var pat = create_Pattern(0,0,use_filled,color); all_fill_patterns[use_filled] = pat;};ctx.fillStyle = all_fill_patterns[use_filled]; } else { ctx.fillStyle = color;};\
		2234	ctx.strokeStyle=\"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\
		2235	var radius = line_width;\
		2236	var x = 0;\
		2237	var y = 0;\
		2238	var x_step_px = xsize/(xmax-xmin);\
		2239	var y_step_px = ysize/(ymax-ymin);\
		2240	var xv1 = dx1*x_step_px;\
		2241	var yv1 = dy1*y_step_px;\
		2242	var xv2 = dx2*x_step_px;\
		2243	var yv2 = dy2*y_step_px;\
		2244	for(var p = 0; p < n1 ;p++){\
		2245	x = p*xv1 + x0;\
		2246	y = p*yv1 + y0;\
		2247	for(var c = 0; c < n2 ; c++){\
		2248	ctx.beginPath();\
		2249	ctx.arc(x+cxv2,y+cyv2,radius,0,2*Math.PI,false);\
		2250	ctx.fill();\
		2251	ctx.stroke();\
		2252	ctx.closePath();\
		2253	};\
		2254	};\
		2255	ctx.restore();\
		2256	return;\
		2257	};",canvas_root_id,canvas_root_id,canvas_root_id);
		2258	break;
		2259
		2260	case DRAW_XYLOGSCALE:
		2261	fprintf(js_include_file,"\n/* draw xylogscale */\
		2262	var draw_grid%d = function(canvas_type,line_width,major_color,minor_color,major_opacity,minor_opacity,font_size,font_family,font_color,use_axis_numbering,precision){\
		2263	var obj;\
		2264	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		2265	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		2266	}\
		2267	else\
		2268	{\
		2269	obj = create_canvas%d(canvas_type,xsize,ysize);\
		2270	};\
		2271	var ctx = obj.getContext(\"2d\");\
		2272	ctx.clearRect(0,0,xsize,ysize);\
		2273	ctx.save();\
		2274	var xmarge;var ymarge;var x_e;var y_e;var num;var corr;var xtxt;var ytxt;\
		2275	var x_min = Math.log(xmin)/Math.log(xlogbase);\
		2276	var x_max = Math.log(xmax)/Math.log(xlogbase);\
		2277	var y_min = Math.log(ymin)/Math.log(ylogbase);\
		2278	var y_max = Math.log(ymax)/Math.log(ylogbase);\
		2279	if(use_axis_numbering != -1){\
		2280	ctx.font = font_family;\
		2281	xmarge = ctx.measureText(ylogbase+'^'+y_max.toFixed(0)+' ').width;\
		2282	ymarge = parseInt(1.5*font_size);\
		2283	ctx.save();\
		2284	ctx.fillStyle=\"rgba(255,215,0,0.2)\";\
		2285	ctx.rect(0,0,xmarge,ysize);\
		2286	ctx.rect(0,ysize-ymarge,xsize,ysize);\
		2287	ctx.fill();\
		2288	ctx.restore();\
		2289	}else{xmarge = 0;ymarge = 0;};\
		2290	if( typeof(xaxislabel) !== 'undefined' ){\
		2291	ctx.save();\
15313	schaersvoo	2292	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	2293	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2294	corr = ctx.measureText(xaxislabel).width;\
		2295	ctx.fillText(xaxislabel,xsize - 1.5corr,ysize - 2font_size);\
		2296	ctx.restore();\
		2297	};\
		2298	if( typeof(yaxislabel) !== 'undefined' ){\
		2299	ctx.save();\
15313	schaersvoo	2300	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	2301	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2302	corr = ctx.measureText(yaxislabel).width;\
		2303	ctx.translate(xmarge+font_size,corr+font_size);\
		2304	ctx.rotate(-0.5*Math.PI);\
		2305	ctx.fillText(yaxislabel,0,0);\
		2306	ctx.restore();\
		2307	};\
		2308	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2309	ctx.lineWidth = line_width;\
		2310	for(var p = x_min; p <= x_max ; p++){\
		2311	num = Math.pow(xlogbase,p);\
		2312	for(var i = 1 ; i < xlogbase ; i++){\
		2313	x_e = x2px(i*num);\
		2314	if( i == 1 ){\
		2315	ctx.lineWidth = line_width;\
		2316	ctx.strokeStyle=\"rgba(\"+major_color+\",\"+major_opacity+\")\";\
		2317	if( use_axis_numbering != -1 && p > x_min){\
		2318	xtxt = xlogbase+'^'+p.toFixed(0);\
		2319	corr = 0.5*(ctx.measureText(xtxt).width);\
		2320	ctx.fillText(xtxt,x_e - corr,ysize - 4);\
		2321	};\
		2322	}else{\
		2323	ctx.lineWidth = 0.2*line_width;\
		2324	ctx.strokeStyle=\"rgba(\"+minor_color+\",\"+minor_opacity+\")\";\
		2325	};\
		2326	if( x_e >= xmarge ){\
		2327	ctx.beginPath();\
		2328	ctx.moveTo(x_e,0);\
		2329	ctx.lineTo(x_e,ysize - ymarge);\
		2330	ctx.stroke();\
		2331	ctx.closePath();\
		2332	};\
		2333	};\
		2334	};\
		2335	for(var p = y_min; p <= y_max ; p++){\
		2336	num = Math.pow(ylogbase,p);\
		2337	for(var i = 1 ; i < ylogbase ; i++){\
		2338	y_e = y2px(i*num);\
		2339	if( i == 1 ){\
		2340	ctx.lineWidth = line_width;\
		2341	ctx.strokeStyle=\"rgba(\"+major_color+\",\"+major_opacity+\")\";\
		2342	if( use_axis_numbering != -1 && p > y_min){\
		2343	ctx.fillText(ylogbase+'^'+p.toFixed(0),0,y_e);\
		2344	};\
		2345	}else{\
		2346	ctx.lineWidth = 0.2*line_width;\
		2347	ctx.strokeStyle=\"rgba(\"+minor_color+\",\"+minor_opacity+\")\";\
		2348	};\
		2349	ctx.beginPath();\
		2350	ctx.moveTo(xmarge,y_e);\
		2351	ctx.lineTo(xsize,y_e);\
		2352	ctx.stroke();\
		2353	ctx.closePath();\
		2354	};\
		2355	};\
		2356	ctx.restore();\
		2357	};",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
		2358	break;
		2359
		2360	case DRAW_XLOGSCALE:
		2361	fprintf(js_include_file,"\n/* draw xlogscale */\
		2362	var draw_grid%d = function(canvas_type,line_width,major_color,minor_color,major_opacity,minor_opacity,font_size,font_family,font_color,use_axis_numbering,ymajor,yminor,precision){\
		2363	var obj;\
		2364	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		2365	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		2366	}\
		2367	else\
		2368	{\
		2369	obj = create_canvas%d(canvas_type,xsize,ysize);\
		2370	};\
		2371	var ctx = obj.getContext(\"2d\");\
		2372	ctx.clearRect(0,0,xsize,ysize);\
		2373	ctx.save();\
		2374	ctx.lineWidth = line_width;\
		2375	var prec = Math.log(precision)/Math.log(10);\
		2376	var x_min = Math.log(xmin)/Math.log(xlogbase);\
		2377	var x_max = Math.log(xmax)/Math.log(xlogbase);\
		2378	var y_min = 0;var y_max = ysize;var x_e;var corr;\
		2379	var xtxt;var ytxt;var num;var xmarge;var ymarge;\
		2380	if(use_axis_numbering != -1){\
		2381	ctx.font = font_family;\
		2382	xmarge = ctx.measureText(ymax.toFixed(prec)+' ').width;\
		2383	ymarge = parseInt(1.5*font_size);\
		2384	ctx.save();\
		2385	ctx.fillStyle=\"rgba(255,215,0,0.2)\";\
		2386	ctx.rect(0,0,xmarge,ysize);\
		2387	ctx.rect(0,ysize-ymarge,xsize,ysize);\
		2388	ctx.fill();\
		2389	ctx.restore();\
		2390	}else{xmarge = 0;ymarge = 0;};\
		2391	if( typeof(xaxislabel) !== 'undefined' ){\
		2392	ctx.save();\
15313	schaersvoo	2393	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	2394	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2395	corr = ctx.measureText(xaxislabel).width;\
		2396	ctx.fillText(xaxislabel,xsize - 1.5corr,ysize - 2font_size);\
		2397	ctx.restore();\
		2398	};\
		2399	if( typeof(yaxislabel) !== 'undefined' ){\
		2400	ctx.save();\
15313	schaersvoo	2401	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	2402	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2403	corr = ctx.measureText(yaxislabel).width;\
		2404	ctx.translate(xmarge+font_size,corr+font_size);\
		2405	ctx.rotate(-0.5*Math.PI);\
		2406	ctx.fillText(yaxislabel,0,0);\
		2407	ctx.restore();\
		2408	};\
		2409	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2410	ctx.lineWidth = line_width;\
		2411	for(var p = x_min; p <= x_max ; p++){\
		2412	num = Math.pow(xlogbase,p);\
		2413	for(var i = 1 ; i < xlogbase ; i++){\
		2414	x_e = x2px(i*num);\
		2415	if( i == 1 ){\
		2416	ctx.lineWidth = line_width;\
		2417	ctx.strokeStyle=\"rgba(\"+major_color+\",\"+major_opacity+\")\";\
		2418	if( use_axis_numbering != -1 && p > x_min ){\
		2419	xtxt = xlogbase+'^'+p.toFixed(0);\
		2420	corr = 0.5*(ctx.measureText(xtxt).width);\
		2421	ctx.fillText(xtxt,x_e - corr,ysize - 4);\
		2422	};\
		2423	}else{\
		2424	ctx.lineWidth = 0.2*line_width;\
		2425	ctx.strokeStyle=\"rgba(\"+minor_color+\",\"+minor_opacity+\")\";\
		2426	};\
		2427	if( x_e >= xmarge ){\
		2428	ctx.beginPath();\
		2429	ctx.moveTo(x_e,0);\
		2430	ctx.lineTo(x_e,ysize - ymarge);\
		2431	ctx.stroke();\
		2432	ctx.closePath();\
		2433	};\
		2434	};\
		2435	};\
		2436	var stepy = Math.abs(y2px(ymajor) - y2px(0));\
		2437	var minor_step = stepy / yminor;\
		2438	for(var y = 0 ; y < ysize - stepy ; y = y + stepy){\
		2439	ctx.strokeStyle=\"rgba(\"+major_color+\",\"+major_opacity+\")\";\
		2440	ctx.lineWidth = line_width;\
		2441	ctx.beginPath();\
		2442	ctx.moveTo(xmarge,y);\
		2443	ctx.lineTo(xsize,y);\
		2444	ctx.stroke();\
		2445	ctx.closePath();\
		2446	if( use_axis_numbering != -1){\
		2447	ytxt = (px2y(y)).toFixed(prec);\
		2448	ctx.fillText( ytxt,0 ,y + 0.5*font_size );\
		2449	};\
		2450	for(var dy = 1 ; dy < yminor ; dy++){\
		2451	ctx.strokeStyle=\"rgba(\"+minor_color+\",\"+minor_opacity+\")\";\
		2452	ctx.lineWidth = 0.2*line_width;\
		2453	ctx.beginPath();\
		2454	ctx.moveTo(xmarge,y+dy*minor_step);\
		2455	ctx.lineTo(xsize,y+dy*minor_step);\
		2456	ctx.stroke();\
		2457	ctx.closePath();\
		2458	};\
		2459	};\
		2460	ctx.restore();\
		2461	};",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
		2462	break;
		2463
		2464	case DRAW_YLOGSCALE:
		2465	fprintf(js_include_file,"\n/* draw ylogscale */\
		2466	var draw_grid%d = function(canvas_type,line_width,major_color,minor_color,major_opacity,minor_opacity,font_size,font_family,font_color,use_axis_numbering,xmajor,xminor,precision){\
		2467	var obj;\
		2468	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		2469	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
		2470	}\
		2471	else\
		2472	{\
		2473	obj = create_canvas%d(canvas_type,xsize,ysize);\
		2474	};\
		2475	var ctx = obj.getContext(\"2d\");\
		2476	ctx.clearRect(0,0,xsize,ysize);\
		2477	ctx.save();\
		2478	ctx.lineWidth = line_width;\
		2479	var y_min = Math.log(ymin)/Math.log(ylogbase);\
		2480	var y_max = Math.log(ymax)/Math.log(ylogbase);\
		2481	var x_min = 0;var x_max = xsize;var y_s;var y_e;var num;var xmarge;var ymarge;\
		2482	if(use_axis_numbering != -1){\
		2483	ctx.font = font_family;\
		2484	xmarge = ctx.measureText(ylogbase+\"^\"+y_max.toFixed(0)+' ').width;\
		2485	ymarge = 2*font_size;\
		2486	ctx.save();\
		2487	ctx.fillStyle=\"rgba(255,215,0,0.2)\";\
		2488	ctx.rect(0,0,xmarge,ysize);\
		2489	ctx.rect(0,ysize-ymarge,xsize,ysize);\
		2490	ctx.fill();\
		2491	ctx.restore();\
		2492	}else{xmarge = 0;ymarge = 0;};\
		2493	if( typeof(xaxislabel) !== 'undefined' ){\
		2494	ctx.save();\
15313	schaersvoo	2495	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	2496	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2497	corr = ctx.measureText(xaxislabel).width;\
		2498	ctx.fillText(xaxislabel,xsize - 1.5corr,ysize - 2font_size);\
		2499	ctx.restore();\
		2500	};\
		2501	if( typeof(yaxislabel) !== 'undefined' ){\
		2502	ctx.save();\
15313	schaersvoo	2503	ctx.font = \"italic \"+font_size+\"px Arial\";\
15111	schaersvoo	2504	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2505	corr = ctx.measureText(yaxislabel).width;\
		2506	ctx.translate(xmarge+font_size,corr+font_size);\
		2507	ctx.rotate(-0.5*Math.PI);\
		2508	ctx.fillText(yaxislabel,0,0);\
		2509	ctx.restore();\
		2510	};\
		2511	ctx.fillStyle = \"rgba(\"+font_color+\",\"+major_opacity+\")\";\
		2512	ctx.lineWidth = line_width;\
		2513	for(var p = y_min; p <= y_max ; p++){\
		2514	num = Math.pow(ylogbase,p);\
		2515	for(var i = 1 ; i < ylogbase ; i++){\
		2516	y_e = y2px(i*num);\
		2517	if( i == 1 ){\
		2518	ctx.lineWidth = line_width;\
		2519	ctx.strokeStyle=\"rgba(\"+major_color+\",\"+major_opacity+\")\";\
		2520	if( use_axis_numbering != -1 && p > y_min){\
		2521	ctx.fillText(ylogbase+'^'+p.toFixed(0),0,y_e);\
		2522	};\
		2523	}else{\
		2524	ctx.lineWidth = 0.2*line_width;\
		2525	ctx.strokeStyle=\"rgba(\"+minor_color+\",\"+minor_opacity+\")\";\
		2526	};\
		2527	ctx.beginPath();\
		2528	ctx.moveTo(xmarge,y_e);\
		2529	ctx.lineTo(xsize,y_e);\
		2530	ctx.stroke();\
		2531	ctx.closePath();\
		2532	};\
		2533	};\
		2534	var stepx = Math.abs(x2px(xmajor) - x2px(0));\
		2535	var minor_step = stepx / xminor;\
		2536	var prec = Math.log(precision)/Math.log(10);\
		2537	var xtxt;var corr;var flip = 0;\
		2538	for(var x = stepx ; x < xsize ; x = x + stepx){\
		2539	ctx.strokeStyle=\"rgba(\"+major_color+\",\"+major_opacity+\")\";\
		2540	ctx.lineWidth = line_width;\
		2541	ctx.beginPath();\
		2542	ctx.moveTo(x,ysize-ymarge);\
		2543	ctx.lineTo(x,0);\
		2544	ctx.stroke();\
		2545	ctx.closePath();\
		2546	if( use_axis_numbering != -1){\
		2547	xtxt = (px2x(x)).toFixed(prec);\
		2548	corr = 0.5*(ctx.measureText(xtxt).width);\
		2549	if(flip == 0 ){flip = 1;ctx.fillText( xtxt,x - corr ,ysize - 0.2*font_size );}else{\
		2550	flip = 0;ctx.fillText( xtxt,x - corr ,ysize - 1.2*font_size );};\
		2551	};\
		2552	for(var dx = 1 ; dx < xminor ; dx++){\
		2553	ctx.strokeStyle=\"rgba(\"+minor_color+\",\"+minor_opacity+\")\";\
		2554	ctx.lineWidth = 0.2*line_width;\
		2555	ctx.beginPath();\
		2556	ctx.moveTo(x+dx*minor_step,ysize - ymarge);\
		2557	ctx.lineTo(x+dx*minor_step,0);\
		2558	ctx.stroke();\
		2559	ctx.closePath();\
		2560	};\
		2561	};\
		2562	ctx.restore();\
		2563	};",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
		2564	break;
		2565
		2566	case ADD_USER_INPUTS:
		2567	fprintf(js_include_file,"\n/* add_input_xy */\
		2568	function add_input_xy(){\
		2569	if( wims_status == \"done\" ){return;};\
		2570	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		2571	var input_xy_div = document.createElement('div');\
		2572	input_xy_div.id = \"input_xy_div\";\
		2573	tooltip_div.appendChild(input_xy_div);",canvas_root_id);
		2574
		2575	if(strstr(draw_type,"polyline") != NULL \|\| strstr(draw_type,"point") != NULL \|\| strstr(draw_type,"cross") != NULL ){ /* ( input_x : input_y )*/
		2576	type=1;
		2577	fprintf(js_include_file,"input_xy_div.innerHTML=\"<br /><span class='%s'>(<input type='text' size='2' value='' id='userinput_x'/> : <input type='text' size='2' value='' id='userinput_y'/>)<input id='update_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='delete_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></span> \";",css_class);
		2578	}else{
		2579	if(strstr(draw_type,"circle") != NULL ){/* M: (input_x :input_y) R:input_r*/
		2580	type=2;
		2581	fprintf(js_include_file,"input_xy_div.innerHTML=\"<br /><span class='%s'>M: (<input type='text' size='2' value='' id='userinput_x'/> : <input type='text' size='2' value='' id='userinput_y'/>)   R: <input type='text' size='2' value='' id='userinput_r'/><input id='update_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='delete_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></span> \";",css_class);
		2582	}else{
		2583	type=3;
		2584	if(strstr(draw_type,"segment") != NULL \|\| strstr(draw_type,"line") != NULL \|\| strstr(draw_type,"arrow") != NULL ){ /* ( input_x1 : input_y1) --- ( input_x2 : input_y2) */
		2585	fprintf(js_include_file,"input_xy_div.innerHTML=\"<br /><span class='%s'>(<input type='text' size='2' value='' id='userinput_x1'/> : <input type='text' size='2' value='' id='userinput_y1'/>) −−− (<input type='text' size='2' value='' id='userinput_x2'/> : <input type='text' size='2' value='' id='userinput_y2'/>)<input id='update_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='delete_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></span> \";",css_class);
		2586	}else{
		2587	type=4;
		2588	if(strstr(draw_type,"triang") != NULL ){ /* ( input_x1 : input_y1) --- ( input_x2 : input_y2) --- ( input_x3 : input_y3) */
		2589	fprintf(js_include_file,"input_xy_div.innerHTML=\"<br /><span class='%s'>⃤  <input id='update_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='delete_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/><br/>(<input type='text' size='2' value='' id='userinput_x1'/> : <input type='text' size='2' value='' id='userinput_y1'/>)<br/>(<input type='text' size='2' value='' id='userinput_x2'/> : <input type='text' size='2' value='' id='userinput_y2'/>)<br/>(<input type='text' size='2' value='' id='userinput_x3'/> : <input type='text' size='2' value='' id='userinput_y3'/>)</span> \";",css_class);
		2590	}else{
		2591	type=5;
		2592	if(strstr(draw_type,"text") != NULL ){ /Text: input_r ( input_x1 : input_y1) /
		2593	fprintf(js_include_file,"input_xy_div.innerHTML=\"<br /><span class='%s'>(<input type='text' size='2' value='' id='userinput_x'/>:<input type='text' size='2' value='' id='userinput_y'/>) <input id='update_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='delete_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></span> \";",css_class);
		2594	}else{canvas_error("command 'userinput' or 'userinput_xy' is not supported for your 'userdraw' type...");
		2595	}}}}}
		2596
		2597	fprintf(js_include_file,"\
		2598	var update_button = document.getElementById(\"update_button\");\
		2599	var delete_button = document.getElementById(\"delete_button\");\
		2600	update_button.addEventListener(\"mousedown\",function(e){update_me();redraw_userdraw();return;},false);\
		2601	delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
		2602	};add_input_xy();");
		2603
		2604	switch(type){
		2605	case 1:
		2606	fprintf(js_include_file,"\n/* add_input_xy */\
		2607	function update_me(){\
15529	schaersvoo	2608	var x = safe_eval(document.getElementById('userinput_x').value);\
		2609	var y = safe_eval(document.getElementById('userinput_y').value);\
15111	schaersvoo	2610	userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
		2611	return;\
		2612	};");break;
		2613	case 2:
		2614	fprintf(js_include_file,"\n/* add_input_xy */\
		2615	function update_me(){\
15529	schaersvoo	2616	var x = safe_eval(document.getElementById('userinput_x').value);\
		2617	var y = safe_eval(document.getElementById('userinput_y').value);\
		2618	var r = safe_eval(document.getElementById('userinput_r').value);\
15111	schaersvoo	2619	r = scale_x_radius(r);\
		2620	userdraw_radius.push(r);userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
		2621	return;\
		2622	};");break;
		2623	case 3:
		2624	fprintf(js_include_file,"\n/* add_input_xy */\
		2625	function update_me(){\
		2626	var x,y;\
		2627	for(var p=1; p<3;p++){\
15529	schaersvoo	2628	x = safe_eval(document.getElementById('userinput_x'+p).value);\
		2629	y = safe_eval(document.getElementById('userinput_y'+p).value);\
15111	schaersvoo	2630	userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
		2631	};\
		2632	return;\
		2633	};");
		2634	break;
		2635	case 4:
		2636	fprintf(js_include_file,"\n/* add_input_xy */\
		2637	function update_me(){\
		2638	var x,y;\
		2639	for(var p=1; p<4;p++){\
15529	schaersvoo	2640	x = safe_eval(document.getElementById('userinput_x'+p).value);\
		2641	y = safe_eval(document.getElementById('userinput_y'+p).value);\
15111	schaersvoo	2642	userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
		2643	};\
		2644	return;\
		2645	};");
		2646	break;
		2647	case 5:
		2648	/* a inputfield with 'id=userdraw_text_abc' is provided by command 'userdraw text,color'*/
		2649	fprintf(js_include_file,"\n/* add_input_xy */\
		2650	function update_me(){\
15529	schaersvoo	2651	var x = safe_eval(document.getElementById('userinput_x').value);\
		2652	var y = safe_eval(document.getElementById('userinput_y').value);\
15111	schaersvoo	2653	var txt = conv_to_unicode(document.getElementById('userdraw_text_abc').value);\
		2654	userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));userdraw_text.push(txt.replace(/\\\\/g,' '));\
		2655	return;\
		2656	};");
		2657	break;
		2658	default: canvas_error("hmmm, I've no idea...");break;
		2659	}
		2660
		2661	break;
		2662
		2663	default:break;
		2664	}
		2665	}
		2666	}
		2667	return;
		2668	}

Subversion Repositories wimsdev

(root)/trunk/wims/src/Misc/canvasdraw/canvasutils.c – Rev 16722