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

Rev	Author	Line No.	Line
8225	bpr	1	#include "canvasdraw.h"
		2
15111	schaersvoo	3	void add_js_zoom_buttons(char *stroke_color,double stroke_opacity){
		4	fprintf(js_include_file,"\n/* draw zoom buttons */\
8448	schaersvoo	5	var draw_zoom_buttons = function(){\
		6	var obj;var canvas_type =%d;\
		7	if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
		8	obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
16844	bpr	9	} else {\
8448	schaersvoo	10	obj = create_canvas%d(canvas_type,xsize,ysize);\
		11	};\
		12	var ctx = obj.getContext(\"2d\");\
15313	schaersvoo	13	ctx.font =\"20px Arial\";\
8448	schaersvoo	14	ctx.textAlign = \"right\";\
9406	schaersvoo	15	ctx.fillStyle=\"rgba(%s,%f)\";\
8448	schaersvoo	16	ctx.fillText(\"+\",xsize,ysize);\
15111	schaersvoo	17	ctx.fillText(\"\\u2212\",xsize - 15,ysize-2);\
8448	schaersvoo	18	ctx.fillText(\"\\u2192\",xsize - 30,ysize-2);\
		19	ctx.fillText(\"\\u2190\",xsize - 45,ysize-2);\
		20	ctx.fillText(\"\\u2191\",xsize - 60,ysize-2);\
		21	ctx.fillText(\"\\u2193\",xsize - 75,ysize-2);\
11002	schaersvoo	22	ctx.fillText(\"\\u00D7\",xsize - 90,ysize-2);\
8448	schaersvoo	23	ctx.stroke();\
15111	schaersvoo	24	};draw_zoom_buttons();",BG_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id,stroke_color,stroke_opacity);
8448	schaersvoo	25	}
		26
15111	schaersvoo	27	void add_js_popup(char *getfile_cmd){
14094	schaersvoo	28	fprintf(stdout,"\n<!-- begin command popup %d -->\n\
16844	bpr	29	<script>\n\
14038	schaersvoo	30	if( wims_status != 'done'){\
		31	var popup = window.open('','','toolbar=no,scrollbars=yes,menubar=no,location=no,resizable=yes,top=4,left=4,status=no, width = %dpx, height = %dpx');\
		32	var popupHTML =\"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\\n<html><head></head>\\n<body><div style='width:%dpx;height:%dpx;position:relative' id='canvas_div%d'></div><div id='tooltip_placeholder_div%d' style='display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;'><span id='tooltip_placeholder%d' style='display:none;'></span></div></body></html>\";\
		33	popup.document.write(popupHTML);\
		34	var s0 = popup.document.createElement(\"script\");\
		35	s0.text=\"var wims_status = window.opener.wims_status; var use_dragdrop_reply = window.opener.use_dragdrop_reply;window.opener.canvas_scripts.push('%d');\";\
		36	popup.document.getElementsByTagName(\"HEAD\")[0].appendChild(s0);\
		37	var s1 = popup.document.createElement(\"script\");\
		38	s1.src = \"%s\";\
		39	popup.document.getElementsByTagName(\"HEAD\")[0].appendChild(s1);\
		40	popup.document.close();\
16844	bpr	41	} else {\
		42	var canvas_div = document.getElementById('canvas_div%d');\
		43	canvas_div.style.display='block';\
15111	schaersvoo	44	};\n</script>\n<!-- end command popup %d -->\n",
9329	schaersvoo	45	canvas_root_id,
9333	schaersvoo	46	xsize+40,ysize+40,
9329	schaersvoo	47	xsize,ysize,
		48	canvas_root_id,
		49	canvas_root_id,
		50	canvas_root_id,
		51	canvas_root_id,
		52	getfile_cmd,
9331	schaersvoo	53	canvas_root_id,
9329	schaersvoo	54	canvas_root_id);
		55	}
		56
15111	schaersvoo	57	void add_js_tooltip(char tooltip_text,char bgcolor){
14062	schaersvoo	58	fprintf(stdout,"\n<!-- begin command intooltip %d -->\n\
16844	bpr	59	<script>\n\
7614	schaersvoo	60	var xsize = %d;\
		61	var ysize = %d;\
		62	var tooltip%d_obj_x = 0;\
		63	var tooltip%d_obj_y = 0;\
		64	var tooltip%d_flipflop = 0;\
		65	var tooltip%d_obj = document.getElementById(\"canvas_div%d\");\
		66	tooltip%d_obj.style.display=\"none\";\
		67	tooltip%d_obj.style.position=\"absolute\";\
		68	var tooltip%d_link = document.createElement(\"a\");\
		69	tooltip%d_link.addEventListener(\"mousemove\",tooltip%d_drag,false);\
		70	tooltip%d_link.setAttribute(\"onclick\",\"tooltip%d_show()\");\
		71	tooltip%d_link.innerHTML = \"%s\";\
		72	var tooltip_placeholder = document.getElementById(\"tooltip_placeholder%d\");\
		73	tooltip_placeholder.style.display=\"block\";\
		74	tooltip_placeholder.style.position=\"absolute\";\
		75	tooltip_placeholder.style.backgroundColor=\"%s\";\
		76	tooltip_placeholder.appendChild(tooltip%d_link);\
		77	function tooltip%d_drag(action){\
14038	schaersvoo	78	if(!action){ action = event; };\
7614	schaersvoo	79	if(action.clientX){\
		80	tooltip%d_obj.style.left = (tooltip%d_mouseX(action) + 10) +\"px\";\
		81	var ytop = tooltip%d_mouseY(action);\
		82	if(ytop + ysize < window.innerHeight){\
		83	tooltip%d_obj.style.top = (ytop - 10) +\"px\";\
16844	bpr	84	} else {\
7614	schaersvoo	85	tooltip%d_obj.style.top = parseInt(ytop - 0.8*ysize) +\"px\";\
14038	schaersvoo	86	};\
16844	bpr	87	} else {\
7614	schaersvoo	88	return null;\
14038	schaersvoo	89	};\
		90	};\
7614	schaersvoo	91	function tooltip%d_mouseX(action){\
		92	if(action.pageX){\
		93	return action.pageX;\
16844	bpr	94	} else {\
7614	schaersvoo	95	if(action.clientX){\
		96	return action.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);\
16844	bpr	97	} else {\
7614	schaersvoo	98	return null;\
14038	schaersvoo	99	};\
		100	};\
		101	};\
7614	schaersvoo	102	function tooltip%d_mouseY(action){\
		103	if(action.pageY){\
		104	return action.pageY;\
16844	bpr	105	} else {\
7614	schaersvoo	106	if(action.clientY){\
		107	return action.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop);\
16844	bpr	108	} else {\
7614	schaersvoo	109	return null;\
14038	schaersvoo	110	};\
		111	};\
		112	};\
7614	schaersvoo	113	function tooltip%d_show(){\
		114	if(tooltip%d_flipflop == 0){\
		115	tooltip%d_obj.style.display = \"block\";\
		116	tooltip%d_flipflop = 1;\
16844	bpr	117	} else {\
7614	schaersvoo	118	tooltip%d_flipflop = 0;\
		119	tooltip%d_obj.style.display = \"none\";\
14038	schaersvoo	120	};\
14090	schaersvoo	121	};\n</script>\n<!-- end command intooltip %d -->\n",canvas_root_id,xsize,ysize,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,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,tooltip_text,canvas_root_id,bgcolor,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,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
7614	schaersvoo	122
8224	bpr	123	}
7614	schaersvoo	124
		125
8224	bpr	126	/*
7614	schaersvoo	127
7991	schaersvoo	128	type = 0 : x-values only [command mousex]
		129	type = 1 : y-values only [command mousey]
		130	type = 2 : (x:y) [command mouse]
11017	schaersvoo	131	type = 3 : degree [command mouse_degree]
		132	type = 4 : radian
		133	type = 5 : radius
11040	schaersvoo	134
15111	schaersvoo	135	var mouse = getMouse(evt,canvas_div);\
11040	schaersvoo	136	var x = evt.clientX - mouse_canvas_rect.left;\
		137	var y = evt.clientY - mouse_canvas_rect.top;\
		138
7991	schaersvoo	139	*/
15111	schaersvoo	140	void add_js_mouse(int canvas_cnt,int precision,char *stroke_color,int font_size,double stroke_opacity,int type){
		141	fprintf(js_include_file,"\n/* command mouse on mouse canvas */\
7614	schaersvoo	142	function use_mouse_coordinates(){\
11041	schaersvoo	143	var display_type = %d;\
11006	schaersvoo	144	var canvas_type = %d;\
		145	var mouse_canvas = create_canvas%d(canvas_type,xsize,ysize);\
11005	schaersvoo	146	var mouse_context = mouse_canvas.getContext(\"2d\");\
15111	schaersvoo	147	mouse_canvas.addEventListener(\"mousemove\",show_coordinate%d,false);\
11005	schaersvoo	148	mouse_canvas.addEventListener(\"touchmove\", function(e){ e.preventDefault();show_coordinate%d(e.changedTouches[0]);},false);\
7614	schaersvoo	149	var prec = Math.log(%d)/(Math.log(10));\
		150	function show_coordinate%d(evt){\
15111	schaersvoo	151	var mouse = getMouse(evt,mouse_canvas);\
11002	schaersvoo	152	var x = mouse.x;\
		153	var y = mouse.y;\
11041	schaersvoo	154	var m_data = \"\";\
		155	switch(display_type){\
7996	schaersvoo	156	case 0: m_data = \" \"+(px2x(x)).toFixed(prec)+\" \"+unit_x;break;\
		157	case 1: m_data = \" \"+(px2y(y)).toFixed(prec)+\" \"+unit_y;break;\
7991	schaersvoo	158	case 2: m_data = \"(\"+(px2x(x)).toFixed(prec)+\":\"+(px2y(y)).toFixed(prec)+\")\";break;\
11017	schaersvoo	159	case 3: if(userdraw_radius[0]){ m_data = \" \"+( ( userdraw_radius[0])/(Math.PI/180) ).toFixed(prec)+\" \\u00B0 \";};break;\
		160	case 4: if(userdraw_radius[0]){ m_data = \" \"+(userdraw_radius[0]).toFixed(prec)+\" rad \";};break;\
12000	schaersvoo	161	case 5: if( userdraw_x.length > 0 ){var L = userdraw_x.length;m_data = \" R = \"+((xmax - xmin)*(distance(x,y,userdraw_x[L-1],userdraw_y[L-1]))/xsize).toFixed(prec)+\" \"+unit_x;};break;\
7991	schaersvoo	162	default:break;\
		163	};\
7614	schaersvoo	164	var s = parseInt(0.8%d(m_data.toString()).length);\
15313	schaersvoo	165	mouse_context.font = \"%dpx Arial\";\
11005	schaersvoo	166	mouse_context.fillStyle = \"rgba(%s,%f)\";\
		167	mouse_context.clearRect(0,0,s,1.2*%d);\
		168	mouse_context.fillText(m_data,0,%d);\
7614	schaersvoo	169	};\
11006	schaersvoo	170	};",type,MOUSE_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id,precision,canvas_root_id,font_size,font_size,stroke_color,stroke_opacity,font_size,font_size);
7856	schaersvoo	171	}
8112	schaersvoo	172
8224	bpr	173	/*
14208	schaersvoo	174	Math.sin: angle in radians
		175	x1 = xcos(a) - ysin(a)
		176	y1 = ycos(a) + xsin(a)
		177	show_display = 0 nothing
		178	show_display = 1 delta X
		179	show_display = 2 delta Y
		180	show_display = 3 delta R radians
		181	show_display = 4 delta degrees
		182	show_display = 5 delta X:Y
10952	schaersvoo	183
8112	schaersvoo	184	*/
15111	schaersvoo	185	void add_slider_display(int precision,int font_size,char *font_color,double stroke_opacity){
		186	fprintf(js_include_file,"\n/* add_slider_display */\
14208	schaersvoo	187	var slider_prec = Math.log(%d)/(Math.log(10));\
14038	schaersvoo	188	function show_slider_value(value,use_slider_display){\
8112	schaersvoo	189	var current_canvas = create_canvas%d(%d,xsize,ysize);\
		190	var current_context = current_canvas.getContext(\"2d\");\
		191	current_context.clearRect(0,0,xsize,ysize);\
		192	var string;\
10952	schaersvoo	193	switch(use_slider_display){\
14208	schaersvoo	194	case 0: return;\
		195	case 1: string = '\\u0394 x = '+value.toFixed(slider_prec)+' '+unit_x;break;\
		196	case 2: string = '\\u0394 y = '+value.toFixed(slider_prec)+' '+unit_y;break;\
		197	case 3: string = '\\u2221 = '+value.toFixed(slider_prec)+'\\u03C0 rad';break;\
		198	case 4: string = '\\u2221 = '+(value*(180/Math.PI)).toFixed(slider_prec)+'\\u00B0';break;\
		199	case 5: string = 'not implemented';break;\
		200	default: string = '['+value+']';break;\
8112	schaersvoo	201	};\
		202	var s = parseInt(1.2%d(string).length);\
15313	schaersvoo	203	current_context.font = '%dpx Arial';\
14208	schaersvoo	204	current_context.strokeStyle = 'rgba(%s,%.2f)';\
8112	schaersvoo	205	current_context.clearRect(0,0,s,1.2*%d);\
14208	schaersvoo	206	current_context.fillText(string,0,%d);};",precision,canvas_root_id,MOUSE_CANVAS,font_size,font_size,font_color,stroke_opacity,font_size,font_size);
8112	schaersvoo	207	}
11002	schaersvoo	208
15111	schaersvoo	209	void add_slider(int anim){
16872	schaersvoo	210	if(anim != 2 ){
15111	schaersvoo	211	fprintf(js_include_file,"\n/* add_slider aux*/\
16872	schaersvoo	212	if( typeof( slidergroup) !== 'object'){var slidergroup = [];};\
14208	schaersvoo	213	function rotateXY(obj,angle){\
		214	if( typeof(angle) === 'undefined' ){console.log('rotateXY() angle undefined');return obj;};\
		215	var len = obj.x.length;\
15111	schaersvoo	216	if( typeof(len) === 'undefined' ){obj.angle = angle;return obj;};\
		217	var cos = Math.cos(angle - obj.angle);\
		218	var sin = Math.sin(angle - obj.angle);\
14208	schaersvoo	219	obj.angle = angle;\
15111	schaersvoo	220	var xc,yc;\
		221	if( obj.use_rotation_center == 0 ){\
		222	xc = obj.x[0];\
		223	yc = obj.y[0];\
		224	}else{\
		225	xc = obj.rotation_center[0];\
		226	yc = obj.rotation_center[1];\
		227	};\
14208	schaersvoo	228	var x,y;\
		229	for(var p = 0 ; p < len ; p++ ){\
		230	x = obj.x[p];\
		231	y = obj.y[p];\
		232	obj.x[p] = (cos * (x - xc)) + (sin * (y - yc)) + xc;\
15111	schaersvoo	233	obj.y[p] = (cos * (y - yc)) - (sin * (x - xc)) + yc;\
14208	schaersvoo	234	};\
		235	return obj;\
		236	};\
		237	function rotateARC(obj,angle){\
		238	obj.h[0] = angle;\
		239	obj.angle = -1*angle;\
		240	return obj;\
		241	};\
15111	schaersvoo	242	function slider_show_it(XYR,dx,value,slider_id){\
		243	if(slidergroup.length != 0){\
		244	var len = slidergroup.length;var use_xml = false;\
		245	for(var i = 0;i < len;i++){\
		246	use_xml = false;var obj = slidergroup[i];\
		247	if( obj !== null ){\
		248	if( obj.use_slider[0] != -1 ){\
		249	var sl = obj.use_slider.length;\
		250	for(var s = 0 ; s < sl;s++ ){\
		251	if(obj.use_slider[s] == slider_id ){\
		252	if( typeof(obj.type) !== 'number' ){use_xml = true;};\
		253	switch(XYR){\
		254	case 'X' : obj = move(obj,dx,0);dragdrop_reply[obj.object_cnt].x = obj.x;break;\
		255	case 'Y' : obj = move(obj,0,dx);dragdrop_reply[obj.object_cnt].y = obj.y;break;\
		256	case 'R' : if(obj.type == 17 ){obj = rotateARC(obj,value);}else{obj = rotateXY(obj,value);};dragdrop_reply[obj.object_cnt].angle = obj.angle;break;\
		257	default : break;\
		258	};\
		259	};\
		260	};\
		261	};\
		262	if( use_xml ){ draw_xml(obj); }\
		263	dragstuff.draw();dragstuff.valid = false;\
		264	};\
		265	};\
		266	};\
		267	return;\
		268	};\
		269	");
16872	schaersvoo	270	}
15111	schaersvoo	271	if(anim == 0){fprintf(js_include_file,"\n/* add_slider */\
14208	schaersvoo	272	if( typeof(unit_x) === 'undefined' ){var unit_x = ' ';};\
		273	if( typeof(unit_y) === 'undefined' ){var unit_y = ' ';};\
15111	schaersvoo	274	function slider(XYR,text,slider_id ,width,height,linewidth,fillcolor,strokecolor,opacity,min,max,fontfamily,display){\
		275	if( wims_status == \"done\" ){return;};var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		276	var xcenter = 0.5width;var rcenter = 0.5width;fillcolor = 'rgba('+fillcolor+','+opacity[0]+')' \|\| 'rgba(200,200,0,0.2)';\
15655	schaersvoo	277	strokecolor = 'rgba('+strokecolor+','+opacity[1]+')';var title = document.createElement('SPAN');title.innerHTML = text;\
15111	schaersvoo	278	var br = document.createElement('BR');tooltip_div.appendChild(br);tooltip_div.appendChild(title);\
		279	var slider_canvas = document.createElement('canvas');slider_canvas.id = 'canvas'+slider_id;tooltip_div.appendChild(slider_canvas);\
		280	slider_canvas.width = width;slider_canvas.height = height;var slider_ctx = slider_canvas.getContext(\"2d\");\
		281	slider_ctx.font = fontfamily;slider_ctx.strokeStyle = strokecolor;\
		282	slider_ctx.fillStyle = fillcolor;slider_ctx.lineWidth = linewidth;slider_ctx.save();\
		283	slider_ctx.beginPath();slider_ctx.moveTo(0,height-10);slider_ctx.lineTo(width,height-10);\
		284	slider_ctx.moveTo(xcenter-10,10);slider_ctx.lineTo(xcenter+10,10);slider_ctx.lineTo(xcenter,height-10);\
		285	slider_ctx.lineTo(xcenter-10,10);slider_ctx.closePath();slider_ctx.stroke();slider_ctx.fill();\
		286	slider_canvas.addEventListener( 'mousemove' ,slide_me,false);\
		287	slider_canvas.addEventListener( 'mouseup' ,stop_slide_me,false);\
		288	slider_canvas.addEventListener( 'mousedown' ,start_slide_me,false);\
		289	slider_canvas.addEventListener( 'touchstart', function(e){ e.preventDefault();start_slide_me(e.changedTouches[0]);},false);\
		290	slider_canvas.addEventListener( 'touchend', function(e){ e.preventDefault();stop_slide_me(e.changedTouches[0]);},false);\
		291	slider_canvas.addEventListener( 'touchmove' ,function(e){ e.preventDefault();slide_me(e.changedTouches[0]);},false);\
		292	var slider_active = false;var value;\
		293	function stop_slide_me(evt){slider_active = false;};\
		294	function start_slide_me(evt){slider_active = true;};\
14208	schaersvoo	295	function slide_me(evt){\
15111	schaersvoo	296	if( slider_active == false ){return;};\
14208	schaersvoo	297	var canvas_rect = slider_canvas.getBoundingClientRect();\
		298	slider_ctx.clearRect(0,0,width,height);\
15111	schaersvoo	299	var px = parseInt(evt.clientX - canvas_rect.left);\
		300	slider_ctx.beginPath();slider_ctx.moveTo(0,height-10);slider_ctx.lineTo(width,height-10);\
		301	slider_ctx.moveTo(px-10,10);slider_ctx.lineTo(px+10,10);slider_ctx.lineTo(px,height-10);\
		302	slider_ctx.lineTo(px-10,10);slider_ctx.closePath();slider_ctx.stroke();slider_ctx.fill();\
		303	value = (px - rcenter)/width*(max - min);\
		304	if( display > 0 ){show_slider_value(value,display);};\
		305	var dx = px - xcenter;xcenter = px;\
		306	slider_show_it(XYR,dx,value,slider_id);\
14208	schaersvoo	307	};\
15111	schaersvoo	308	};",canvas_root_id);
8071	schaersvoo	309	}
15111	schaersvoo	310	if( anim == 1){
		311	fprintf(js_include_file,"\n/* add_anim_slider */\
		312	function animslider(XYR,text,slider_id ,width,height,linewidth,fillcolor,strokecolor,opacity,min,max,fontfamily,display)\
		313	{\
		314	document.addEventListener('readystatechange',function(event){\
		315	if(event.target.readyState === 'complete'){\
		316	var value= 0;\
		317	var timer = setInterval(function(){\
		318	value++;slider_show_it(XYR,value,value,slider_id);\
		319	if( value > width ){clearInterval( timer );}\
		320	},240);\
		321	};\
		322	},false);\
		323	};");
		324	}
16872	schaersvoo	325
16892	schaersvoo	326	if( anim == 2 ){/* use mouse in stead of a X\|Y slider... external images -via command 'copy' NOT supported !! need to add 'copy' to dragstuff library or introduce another command*/
16872	schaersvoo	327	fprintf(js_include_file,"\n/* add group move_ */\
16892	schaersvoo	328	if( typeof( slidergroup) !== 'object'){var slidergroup = [];};\
16882	schaersvoo	329	var move_group = function(num){\
16892	schaersvoo	330	canvas_div.addEventListener( 'mousemove' ,slidegroup_m,false);\
		331	canvas_div.addEventListener( 'mousedown' ,slidegroup_d,false);\
		332	canvas_div.addEventListener( 'mouseup' ,slidegroup_u,false);\
		333	canvas_div.addEventListener( 'touchstart', function(e){ e.preventDefault();slidegroup_d(e.changedTouches[0]);},false);\
		334	canvas_div.addEventListener( 'touchend', function(e){ e.preventDefault();slidegroup_u(e.changedTouches[0]);},false);\
		335	canvas_div.addEventListener( 'touchmove' ,function(e){ e.preventDefault();slidegroup_m(e.changedTouches[0]);},false);\
16872	schaersvoo	336	var slide_start = false;\
16892	schaersvoo	337	function slidegroup_d(e){slide_start = true;};\
		338	function slidegroup_u(e){slide_start = false;};\
16872	schaersvoo	339	function slidegroup_m(e){\
16892	schaersvoo	340	if(!slide_start){return;};\
16872	schaersvoo	341	var xy;var d_x;var d_y;var len = slidergroup.length;var use_xml = false;var once = 1;\
		342	for(var i = 0;i < len;i++){\
		343	use_xml = false;\
		344	if( typeof(slidergroup[i]) === 'object' ){\
		345	var obj = slidergroup[i];\
		346	if( obj.use_slider == num ){\
16892	schaersvoo	347	if( typeof(obj.type) !== 'number' ){use_xml = true;};\
		348	xy = getMouse(e,dragstuff.canvas);\
		349	if( once == 1 ){ d_x = xy.x - obj.x[0];d_y = xy.y - obj.y[0];once = 0;};\
		350	obj = move(obj,d_x,d_y);\
		351	if(obj.use_snap != 0 ){var lx = (obj.x).length;for(var t = 0;t < lx;t++){var xy = multisnap_check(obj.x[t],obj.y[t],obj.use_snap);obj.x[t] = xy[0];obj.y[t] = xy[1];};};\
16872	schaersvoo	352	dragdrop_reply[obj.object_cnt].x = obj.x;dragdrop_reply[obj.object_cnt].y = obj.y;\
16892	schaersvoo	353	if( use_xml ){obj.onclick = 5;draw_xml(obj);}else{dragstuff.selection = null;dragstuff.draw();dragstuff.valid = false;};\
		354	};\
		355	};\
		356	};\
16872	schaersvoo	357	dragstuff.valid = true;\
16892	schaersvoo	358	};\
16872	schaersvoo	359	};");
15111	schaersvoo	360	}
16872	schaersvoo	361
		362	}
15111	schaersvoo	363	/* dragdrop_reply[obj.object_cnt] = obj;
8097	schaersvoo	364	*/
8224	bpr	365	/*
7833	schaersvoo	366	adds inputfield for x-value: returns the js-calculated y-value after click on 'OK' button
		367	draws a non-configurable crosshair on this calculated location
		368	*/
15111	schaersvoo	369	void add_calc_y(char jsmath,int font_size,char css_class){
		370	fprintf(js_include_file,"\n/* add_calc_y */\
7858	schaersvoo	371	use_jsmath=1;\
7856	schaersvoo	372	function add_calc_y(){\
11002	schaersvoo	373	if( wims_status == \"done\" ){return;};\
		374	var fun = to_js_math(\"%s\");if(fun == null){return;};\
		375	function eval_jsmath(x){return parseFloat(eval(fun));};\
		376	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		377	var calc_div = document.createElement('div');\
		378	calc_div.id = \"calc_div\";\
		379	tooltip_div.appendChild(calc_div);\
		380	var label_x = \"x\";var label_y = \"y\";\
11088	schaersvoo	381	if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
		382	if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
17351	bpr	383	calc_div.innerHTML=\"<br><span style='font-style:italic;font-size:%dpx'>\"+label_x+\" : <input type='text' size='4' value='' id='calc_input_x' style='%s' /> \"+ label_y+\" : <input type='text' size='5' value='' id='calc_output_y' style='%s' readonly /><input id='calc_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;' /></span> \";\
11002	schaersvoo	384	var calc_button = document.getElementById(\"calc_button\");\
15111	schaersvoo	385	calc_button.addEventListener(\"mousedown\",show_it,false);\
11002	schaersvoo	386	calc_button.addEventListener(\"touchstart\", function(e){ e.preventDefault();show_it(e.changedTouches[0]);},false);\
		387	function show_it(){\
		388	var x_value=document.getElementById(\"calc_input_x\").value;\
		389	var y_value = eval_jsmath(x_value);\
		390	document.getElementById(\"calc_output_y\").value = y_value;\
		391	if(isNaN(y_value)){return;};\
		392	var canvas = create_canvas%d(123,xsize,ysize);\
		393	var ctx = canvas.getContext(\"2d\");\
		394	draw_crosshairs(ctx,[x2px(x_value)],[y2px(y_value)],1,5,\"#000000\",1,0,0,0,[0,0]);return;\
		395	};\
		396	};\
15111	schaersvoo	397	;add_calc_y();",jsmath,canvas_root_id,font_size,css_class,css_class,canvas_root_id);
7833	schaersvoo	398	}
		399	/*
		400	x-value of the mouse will be used to calculate via javascript the corresponding y-value using the verbatim js-math function
		401	a configurable crosshair and vertical/horizontal crosshair lines will be drawn
		402	function is called "use_mouse_coordinates() and thus can not be combined with command 'mouse'
		403	*/
16844	bpr	404	void add_trace_js_mouse(int canvas_cnt, char stroke_color, char jsmath,
		405	int font_size, double stroke_opacity, int line_width,
		406	int crosshair_size,char *css_class){
15111	schaersvoo	407	fprintf(js_include_file,"\n/* add_trace_jsmath */\
7858	schaersvoo	408	use_jsmath=1;\
7839	schaersvoo	409	function use_trace_jsmath(){\
7956	schaersvoo	410	if( wims_status == \"done\" ){return;};\
7833	schaersvoo	411	var label_x = \"x\";var label_y = \"y\";\
11088	schaersvoo	412	if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
		413	if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
7823	schaersvoo	414	var trace_canvas = create_canvas%d(%d,xsize,ysize);\
		415	var trace_context = trace_canvas.getContext(\"2d\");\
7856	schaersvoo	416	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
7839	schaersvoo	417	var trace_div = document.createElement('div');\
		418	trace_div.id = \"trace_div\";\
7856	schaersvoo	419	tooltip_div.appendChild(trace_div);\
17351	bpr	420	trace_div.innerHTML = \"<br><span style='font-style:italic;font-size:%dpx'>\"+label_x+\" : <input type='text' size='4' value='' id='trace_input_x' style='%s' />\"+label_y+\" : <input type='text' size='5' value='' id='trace_input_y' style='%s' readonly /></span> \";\
7858	schaersvoo	421	canvas_div.addEventListener(\"mousemove\",trace,false);\
11002	schaersvoo	422	canvas_div.addEventListener(\"touchmove\",function(e){ e.preventDefault();trace(e.changedTouches[0]);},false);\
7981	schaersvoo	423	var fun = to_js_math(\"%s\");if(fun == null){return;};\
7858	schaersvoo	424	function eval_jsmath(x){return parseFloat(eval(fun));};\
		425	function trace(evt){\
15111	schaersvoo	426	var mouse = getMouse(evt,trace_canvas);\
11002	schaersvoo	427	var x_px = mouse.x;\
7834	schaersvoo	428	var x = px2x(x_px);\
7823	schaersvoo	429	var y = eval_jsmath(x);\
		430	if(isNaN(y)){return;};\
7834	schaersvoo	431	var y_px = y2px(y);\
7823	schaersvoo	432	trace_context.clearRect(0,0,xsize,ysize);\
7834	schaersvoo	433	draw_crosshairs(trace_context,[x_px],[y_px],%d,%d,\"%s\",%f,0,0,0,[0,0]);\
7856	schaersvoo	434	document.getElementById(\"trace_input_x\").value = x;\
		435	document.getElementById(\"trace_input_y\").value = y;\
7823	schaersvoo	436	};\
		437	return;\
15111	schaersvoo	438	};use_trace_jsmath();",canvas_root_id,canvas_cnt,canvas_root_id,font_size,css_class,css_class,jsmath,line_width,crosshair_size,stroke_color,stroke_opacity);
7823	schaersvoo	439	}
7663	schaersvoo	440
8224	bpr	441	/*
		442	add a table with 2 textarea's labeled 'x' 'y' ( or 'xlabel' 'ylabel' if defined)
7749	schaersvoo	443	add two buttons: OK and NOK (OK draws; NOK will delete last item pair from userdraw_x / userdraw_y array's
		444	*/
15111	schaersvoo	445	void add_textarea_xy(char *css_class){
		446	fprintf(js_include_file,"\n/* add_textarea_xy */\
7856	schaersvoo	447	function add_textarea_xy(){\
7956	schaersvoo	448	if( wims_status == \"done\" ){return;};\
7856	schaersvoo	449	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		450	var textarea_div = document.createElement('div');\
		451	textarea_div.id = \"textarea_div\";\
		452	tooltip_div.appendChild(textarea_div);\
7663	schaersvoo	453	var label_x = \"x\";var label_y = \"y\";\
11088	schaersvoo	454	if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
		455	if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
7856	schaersvoo	456	textarea_div.innerHTML=\"\
		457	<table style=\'border:1px solid black;background-color:#ffffa0\' >\
		458	<tr>\
		459	<td><input id='textarea_ok_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/></td>\
		460	<td><input id='textarea_nok_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></td>\
		461	</tr>\
		462	<tr>\
		463	<td><em>\"+label_x+\"</em></td>\
		464	<td><em>\"+label_y+\"</em></td>\
		465	</tr>\
		466	<tr>\
8815	schaersvoo	467	<td><textarea rows='5' cols='2' id='userinput_x' style='%s' ></textarea></td>\
		468	<td><textarea rows='5' cols='2' id='userinput_y' style='%s' ></textarea></td>\
7856	schaersvoo	469	</tr>\
		470	</table>\";\
		471	var textarea_ok_button = document.getElementById(\"textarea_ok_button\");\
		472	var textarea_nok_button = document.getElementById(\"textarea_nok_button\");\
15111	schaersvoo	473	textarea_ok_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
		474	textarea_nok_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
7856	schaersvoo	475	return;\
15111	schaersvoo	476	};add_textarea_xy();",canvas_root_id,css_class,css_class);
7663	schaersvoo	477	}
		478
7838	schaersvoo	479	/*
7823	schaersvoo	480
7838	schaersvoo	481	*/
15111	schaersvoo	482	void add_setlimits(int font_size,char *css_class){
		483	fprintf(js_include_file,"\n/* add_setlimits */\
7839	schaersvoo	484	function use_setlimits(){\
7956	schaersvoo	485	if( wims_status == \"done\" ){return;};\
7858	schaersvoo	486	var label_x = \"x\";var label_y = \"y\";\
11088	schaersvoo	487	if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
		488	if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
7856	schaersvoo	489	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
7839	schaersvoo	490	var setlim_div = document.createElement('div');\
7856	schaersvoo	491	setlim_div.id = \"setlim_div\";\
		492	tooltip_div.appendChild(setlim_div);\
17351	bpr	493	setlim_div.innerHTML=\"<br><span style='font-style:italic;font-size:%dpx'>\"+label_x+\"min = <input type='text' size='4' value='\"+xmin+\"' id='userinput_xmin' style='%s' /> \"+label_x+\"max = <input type='text' size='4' value='\"+xmax+\"' id='userinput_xmax' style='%s' /><br>\"+label_y+\"min = <input type='text' size='4' value='\"+ymin+\"' id='userinput_ymin' style='%s' /> \"+label_y+\"max = <input type='text' size='4' value='\"+ymax+\"' id='userinput_ymax' style='%s' /><br><input id='set_limits' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;' />\";\
7838	schaersvoo	494	var setlimit_button = document.getElementById(\"set_limits\");\
		495	function set_limits(e){\
		496	xmin = safe_eval(document.getElementById('userinput_xmin').value);\
		497	xmax = safe_eval(document.getElementById('userinput_xmax').value);\
		498	ymin = safe_eval(document.getElementById('userinput_ymin').value);\
		499	ymax = safe_eval(document.getElementById('userinput_ymax').value);\
		500	if(xmin > xmax \|\| ymin > ymax){alert(\"your limits are not correct...\");return;}\
15111	schaersvoo	501	try{redraw_jsplot();}catch(e){console.log('redraw_jsplot failed:'+e);};\
		502	try{redraw_grid();}catch(e){console.log('redraw_grid failed:'+e);};\
		503	try{dragstuff.Zoom(xmin,xmax,ymin,ymax)}catch(e){console.log('zooming dragstuff failed:'+e);};return;};\
7839	schaersvoo	504	setlimit_button.addEventListener(\"mousedown\",function(e){set_limits();},false);\
15111	schaersvoo	505	};use_setlimits();",canvas_root_id,font_size,css_class,css_class,css_class,css_class);
7838	schaersvoo	506	}
8193	schaersvoo	507
15111	schaersvoo	508	void add_input_jsfunction(char css_class,char input_label,int input_cnt,char *stroke_color,float stroke_opacity,int line_width,int use_dashed,int dashtype0,int dashtype1,int font_size){
		509	fprintf(js_include_file,"\n/* add_input_jsfunction */\
8297	schaersvoo	510	function clear_jsfunction(canvas_plot_id,input_field){\
8193	schaersvoo	511	try{\
8297	schaersvoo	512	var canvas_plot = document.getElementById(\"wims_canvas%d\"+canvas_plot_id);\
		513	var canvas_plot_ctx = canvas_plot.getContext(\"2d\");\
8193	schaersvoo	514	if( confirm(\"clear function plot?\") ){\
8297	schaersvoo	515	canvas_plot_ctx.clearRect(0,0,xsize,ysize);\
		516	document.getElementById(input_field).value = \"\";\
		517	};\
		518	return;\
		519	}catch(e){alert(e+\"nothing to remove...\");};\
9244	schaersvoo	520	return;\
		521	};\
15111	schaersvoo	522	function add_input_jsfunction(input_cnt,css_class,input_label,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1){\
8297	schaersvoo	523	var canvas_plot_id = %d+input_cnt;\
15111	schaersvoo	524	var label = input_label[input_cnt];\
		525	if( typeof(multistrokecolors) === 'object'){ stroke_color = multistrokecolors[input_cnt];};\
8297	schaersvoo	526	var input_field = \"canvas_input\"+input_cnt;\
		527	var update_button_id = \"update_button\"+input_cnt;\
		528	var delete_button_id = \"delete_button\"+input_cnt;\
		529	if( wims_status == \"done\" ){return;};\
		530	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		531	var input_jsfunction_div = document.createElement('div');\
		532	input_jsfunction_div.id = \"input_jsfunction_div\"+input_cnt;\
		533	tooltip_div.appendChild(input_jsfunction_div);\
17351	bpr	534	input_jsfunction_div.innerHTML+=\"<br><span style='font-style:italic;font-size:%dpx;color:rgb(\"+stroke_color+\")'><b>\"+label+\" <input type='text' size='16' value='' id='\"+input_field+\"' style='\"+css_class+\"' /></b><input id='\"+update_button_id+\"' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='\"+delete_button_id+\"' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></span> \";\
8297	schaersvoo	535	var update_button = document.getElementById(update_button_id);\
		536	var delete_button = document.getElementById(delete_button_id);\
15111	schaersvoo	537	update_button.addEventListener(\"mousedown\",function(e){jsplot(canvas_plot_id,[rawmath(document.getElementById(input_field).value)],[line_width],[stroke_color],[stroke_opacity],[use_dashed],dashtype0,dashtype1,0,0,300,0,1);return;},false);\
8297	schaersvoo	538	delete_button.addEventListener(\"mousedown\",function(e){clear_jsfunction(canvas_plot_id,input_field);return;},false);\
9244	schaersvoo	539	};\
15111	schaersvoo	540	add_input_jsfunction(%d,\"%s\",%s,%d,\"%s\",%.2f,%d,%d,%d);",canvas_root_id,USERDRAW_JSPLOT,canvas_root_id,font_size,input_cnt,css_class,input_label,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);
8193	schaersvoo	541	}
		542
		543
8224	bpr	544	/*
		545	adds 2 inputfields (x:y) and 'ok' \| 'nok' button
7668	schaersvoo	546	these are used for user drawing with inputfields...
15529	schaersvoo	547	function update_me(){\
		548	var x = safe_eval(document.getElementById('userinput_x').value);\
		549	var y = safe_eval(document.getElementById('userinput_y').value);\
		550	userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
		551	return;\
		552	};\
7668	schaersvoo	553	*/
7823	schaersvoo	554
15111	schaersvoo	555	void add_input_xy(int font_size,char *css_class){
		556	fprintf(js_include_file,"\n/* add_input_xy */\
7856	schaersvoo	557	function add_input_xy(){\
7956	schaersvoo	558	if( wims_status == \"done\" ){return;};\
7856	schaersvoo	559	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		560	var input_xy_div = document.createElement('div');\
		561	input_xy_div.id = \"input_xy_div\";\
		562	tooltip_div.appendChild(input_xy_div);\
7663	schaersvoo	563	var label_x = \"x\";var label_y = \"y\";\
17351	bpr	564	input_xy_div.innerHTML=\"<br><span style='font-style:italic;font-size:%dpx'><b>( <input type='text' size='5' value='' id='userinput_x' style='%s' /> : <input type='text' size='5' value='' id='userinput_y' style='%s' /> )</b><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> \";\
7652	schaersvoo	565	var update_button = document.getElementById(\"update_button\");\
7668	schaersvoo	566	var delete_button = document.getElementById(\"delete_button\");\
15111	schaersvoo	567	update_button.addEventListener(\"mousedown\",function(e){update_me();redraw_userdraw();return;},false);\
		568	delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
		569	};add_input_xy();",canvas_root_id,font_size,css_class,css_class);
7652	schaersvoo	570	}
		571
7668	schaersvoo	572	/* adds 4 inputfields (x1:y1) --- (x2:y2) and 'ok' + 'nok' button */
15111	schaersvoo	573	void add_input_x1y1x2y2(int font_size,char *css_class){
		574	fprintf(js_include_file,"\n/* add_input_x1y1x2y2 */\
7856	schaersvoo	575	function add_input_x1y1x2y2(){\
7956	schaersvoo	576	if( wims_status == \"done\" ){return;};\
7856	schaersvoo	577	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		578	var input_x1y1x2y2_div = document.createElement('div');\
		579	input_x1y1x2y2_div.id = \"input_x1y1x2y2_div\";\
		580	tooltip_div.appendChild(input_x1y1x2y2_div);\
17351	bpr	581	input_x1y1x2y2_div.innerHTML=\"<br><span style='font-size:%dpx'><b>( <input type='text' size='5' value='' id='userinput_x1' style='%s' /> : <input type='text' size='5' value='' id='userinput_y1' style='%s' /> ) ----- ( <input type='text' size='5' value='' id='userinput_x2' style='%s' /> : <input type='text' size='5' value='' id='userinput_y2' style='%s'/> )</b><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> \";\
7652	schaersvoo	582	var update_button = document.getElementById(\"update_button\");\
7668	schaersvoo	583	var delete_button = document.getElementById(\"delete_button\");\
15111	schaersvoo	584	update_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
		585	delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
		586	};add_input_x1y1x2y2();",canvas_root_id,font_size,css_class,css_class,css_class,css_class);
7652	schaersvoo	587	}
		588
7668	schaersvoo	589	/* adds 3 inputfields Center (x:y) Radius r and 'ok'+'nok' buttons */
15111	schaersvoo	590	void add_input_xyr(int font_size,char *css_class){
		591	fprintf(js_include_file,"\n/* add_input_xyr */\
7856	schaersvoo	592	function add_input_xyr(){\
7956	schaersvoo	593	if( wims_status == \"done\" ){return;};\
7856	schaersvoo	594	var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
		595	var input_xyr_div = document.createElement('div');\
		596	input_xyr_div.id = \"input_xyr_div\";\
		597	tooltip_div.appendChild(input_xyr_div);\
17351	bpr	598	input_xyr_div.innerHTML=\"<br><span style='font-style:italic;font-size:%dpx'><b>Center : ( <input type='text' size='5' value='' id='userinput_x' style='%s' /> : <input type='text' size='5' value='' id='userinput_y' style='%s' /> ) Radius : <input type='text' size='5' value='' id='userinput_r' style='%s' /></b><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> \";\
7652	schaersvoo	599	var update_button = document.getElementById(\"update_button\");\
7668	schaersvoo	600	var delete_button = document.getElementById(\"delete_button\");\
15111	schaersvoo	601	update_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
		602	delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
		603	};add_input_xyr();",canvas_root_id,font_size,css_class,css_class,css_class);
7652	schaersvoo	604	}
		605
7749	schaersvoo	606	/* THESE JS-FUNCTIONS COULD BE MADE LESS COPY & PASTE "PROGRAMMING" */
		607
7663	schaersvoo	608	/* draw circle(s) / point(s) via 3 inputfields */
15111	schaersvoo	609	void add_input_circle(int type,int num){
8224	bpr	610	/*
		611	type = 0 : a point ...radius is fixed
7652	schaersvoo	612	type = 1 : a circle ... read inputfield userinput_r
		613	num = 1 : a single point / circle
		614	num = 2 : multiple points / circles
		615	*/
15111	schaersvoo	616	fprintf(js_include_file,"\n/* add_input_circle */\
7668	schaersvoo	617	function user_redraw(t){\
		618	var type = %d;\
		619	var num = %d;\
7780	schaersvoo	620	var lu = userdraw_x.length;\
12006	schaersvoo	621	if( t == -1 && lu > 0){userdraw_x.splice(lu-1,1);userdraw_y.splice(lu-1,1);if(type == 1){userdraw_radius.splice(lu-1,1);};context_userdraw.clearRect(0,0,xsize,ysize);draw_circles(context_userdraw,userdraw_x,userdraw_y,userdraw_radius,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);xy_cnt = userdraw_x.length;return;};\
7749	schaersvoo	622	var add_x = safe_eval( document.getElementById(\"userinput_x\").value );\
		623	var add_y = safe_eval( document.getElementById(\"userinput_y\").value );\
12006	schaersvoo	624	if( add_x != null && add_y != null ){if( type == 1 ){var add_r = safe_eval( document.getElementById(\"userinput_r\").value );if( add_r == null ){alert(\"illegal radius input \");return;};if( num == 1 ){userdraw_radius[0] = parseInt(Math.abs(xsize(add_r)/(xmax - xmin)));}else{userdraw_radius.push( parseInt(Math.abs(xsize(add_r)/(xmax - xmin))) );};}else{userdraw_radius[lu] = userdraw_radius[0];};if( num == 1 ){userdraw_x[0] = x2px(add_x);userdraw_y[0] = y2px(add_y);xy_cnt=1;}else{userdraw_x.push(x2px(add_x));userdraw_y.push(y2px(add_y));xy_cnt = userdraw_x.length;};context_userdraw.clearRect(0,0,xsize,ysize);draw_circles(context_userdraw,userdraw_x,userdraw_y,userdraw_radius,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);};\
7749	schaersvoo	625	return;\
		626	};",type,num);
7652	schaersvoo	627	}
7663	schaersvoo	628	/* draw crosshairs via inputfields x/y */
15111	schaersvoo	629	void add_input_crosshair(int num){
		630	fprintf(js_include_file,"\n/* add_input_crosshair */\
7668	schaersvoo	631	function user_redraw(t){\
7780	schaersvoo	632	var lu = userdraw_x.length;\
		633	if( t == -1 && lu > 0){\
		634	userdraw_x.splice(lu-1,1);\
		635	userdraw_y.splice(lu-1,1);\
7749	schaersvoo	636	context_userdraw.clearRect(0,0,xsize,ysize);\
		637	draw_crosshairs(context_userdraw,userdraw_x,userdraw_y,line_width,crosshair_size,stroke_color,stroke_opacity,0,0,0,[0,0]);\
		638	return;\
		639	};\
		640	var add_x = safe_eval( document.getElementById(\"userinput_x\").value );\
		641	var add_y = safe_eval( document.getElementById(\"userinput_y\").value );\
		642	if( add_x != null && add_y != null ){\
7654	schaersvoo	643	if( %d == 1 ){\
		644	userdraw_x[0] = x2px(add_x);\
		645	userdraw_y[0] = y2px(add_y);\
16844	bpr	646	} else {\
7654	schaersvoo	647	userdraw_x[lu] = x2px(add_x);\
		648	userdraw_y[lu] = y2px(add_y);\
		649	xy_cnt++;\
		650	};\
		651	context_userdraw.clearRect(0,0,xsize,ysize);\
		652	draw_crosshairs(context_userdraw,userdraw_x,userdraw_y,line_width,crosshair_size,stroke_color,stroke_opacity,0,0,0,[0,0]);\
		653	};\
7749	schaersvoo	654	return;\
7654	schaersvoo	655	};",num);
		656	}
		657
7663	schaersvoo	658	/* draw arrows via inputfields x/y */
15111	schaersvoo	659	void add_input_arrow(int num){
		660	fprintf(js_include_file,"\n/* add_input_arrow */\
7668	schaersvoo	661	function user_redraw(t){\
7780	schaersvoo	662	var lu = userdraw_x.length;\
		663	if( t == -1 && lu > 1 ){\
		664	userdraw_x.splice(lu-2,2);\
		665	userdraw_y.splice(lu-2,2);\
7747	schaersvoo	666	context_userdraw.clearRect(0,0,xsize,ysize);\
8071	schaersvoo	667	draw_arrows(context_userdraw,userdraw_x,userdraw_y,arrow_head,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,type,use_rotate,angle,0,[1,0,0,1,0,0]);\
7747	schaersvoo	668	return;\
		669	};\
7749	schaersvoo	670	var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
		671	var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
		672	var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
		673	var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
		674	if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
7654	schaersvoo	675	if( %d == 2 ){\
		676	var s = userdraw_x.length;\
7780	schaersvoo	677	userdraw_x[lu] = x2px(add_x1);\
		678	userdraw_y[lu] = y2px(add_y1);\
		679	userdraw_x[lu+1] = x2px(add_x2);\
		680	userdraw_y[lu+1] = y2px(add_y2);\
16844	bpr	681	} else {\
7654	schaersvoo	682	userdraw_x[0] = x2px(add_x1);\
		683	userdraw_y[0] = y2px(add_y1);\
		684	userdraw_x[1] = x2px(add_x2);\
		685	userdraw_y[1] = y2px(add_y2);\
		686	};\
		687	context_userdraw.clearRect(0,0,xsize,ysize);\
8071	schaersvoo	688	draw_arrows(context_userdraw,userdraw_x,userdraw_y,arrow_head,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,type,use_rotate,angle,0,[1,0,0,1,0,0]);\
7654	schaersvoo	689	};\
7749	schaersvoo	690	return;\
7654	schaersvoo	691	};",num);
		692	}
		693
7746	schaersvoo	694	/* draw line via inputfields x/y */
15111	schaersvoo	695	void add_input_line(int num){
		696	fprintf(js_include_file,"\n/* line via inputfields */\
7746	schaersvoo	697	function user_redraw(t){\
7780	schaersvoo	698	var lu = userdraw_x.length;\
		699	if( t == -1 && lu > 1){\
		700	userdraw_x.splice(lu-2,2);\
		701	userdraw_y.splice(lu-2,2);\
7746	schaersvoo	702	context_userdraw.clearRect(0,0,xsize,ysize);\
		703	draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,1,0,0);\
		704	return;\
		705	};\
7749	schaersvoo	706	var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
		707	var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
		708	var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
		709	var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
		710	if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
7746	schaersvoo	711	if( %d == 2 ){\
7780	schaersvoo	712	userdraw_x[lu] = x2px(add_x1);\
		713	userdraw_y[lu] = y2px(add_y1);\
		714	userdraw_x[lu+1] = x2px(add_x2);\
		715	userdraw_y[lu+1] = y2px(add_y2);\
16844	bpr	716	} else {\
7746	schaersvoo	717	userdraw_x[0] = x2px(add_x1);\
		718	userdraw_y[0] = y2px(add_y1);\
		719	userdraw_x[1] = x2px(add_x2);\
		720	userdraw_y[1] = y2px(add_y2);\
		721	};\
		722	context_userdraw.clearRect(0,0,xsize,ysize);\
		723	draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,1,0,0);\
		724	};\
7749	schaersvoo	725	return;\
7746	schaersvoo	726	};",num);
		727	}
		728
		729
7663	schaersvoo	730	/* draw polyline via inputfields x/y */
15111	schaersvoo	731	void add_input_polyline(){
		732	fprintf(js_include_file,"\n/* polyline_segment via inputfields */\
7668	schaersvoo	733	function user_redraw(t){\
8071	schaersvoo	734	var lu = userdraw_x.length;\
7962	schaersvoo	735	cnt = 1;\
7780	schaersvoo	736	if( t == -1 && lu > 0){\
8071	schaersvoo	737	userdraw_x.splice(lu-1,1);\
		738	userdraw_y.splice(lu-1,1);\
		739	context_userdraw.clearRect(0,0,xsize,ysize);\
		740	draw_polyline(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
		741	return;\
		742	};\
		743	var add_x = safe_eval( document.getElementById(\"userinput_x\").value );\
		744	var add_y = safe_eval( document.getElementById(\"userinput_y\").value );\
7749	schaersvoo	745	if(add_x != null && add_y != null ){\
8071	schaersvoo	746	userdraw_x.push(x2px(add_x));\
		747	userdraw_y.push(y2px(add_y));\
		748	context_userdraw.clearRect(0,0,xsize,ysize);\
		749	draw_polyline(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
		750	};\
		751	return;\
7663	schaersvoo	752	};");
		753	}
		754	/* draw segment(s) via inputfields x/y */
15111	schaersvoo	755	void add_input_segment(int num){
		756	fprintf(js_include_file,"\n/* add_input_segment */\
7668	schaersvoo	757	function user_redraw(t){\
7780	schaersvoo	758	var lu = userdraw_x.length;\
		759	if( t == -1 && lu > 1){\
		760	userdraw_x.splice(lu-2,2);\
		761	userdraw_y.splice(lu-2,2);\
7746	schaersvoo	762	context_userdraw.clearRect(0,0,xsize,ysize);\
7668	schaersvoo	763	draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
		764	return;\
		765	};\
7749	schaersvoo	766	var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
		767	var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
		768	var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
		769	var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
		770	if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
7652	schaersvoo	771	if( %d == 2 ){\
		772	var s = userdraw_x.length;\
		773	userdraw_x[s] = x2px(add_x1);\
		774	userdraw_y[s] = y2px(add_y1);\
		775	userdraw_x[s+1] = x2px(add_x2);\
		776	userdraw_y[s+1] = y2px(add_y2);\
16844	bpr	777	} else {\
7652	schaersvoo	778	userdraw_x[0] = x2px(add_x1);\
		779	userdraw_y[0] = y2px(add_y1);\
		780	userdraw_x[1] = x2px(add_x2);\
		781	userdraw_y[1] = y2px(add_y2);\
		782	};\
		783	context_userdraw.clearRect(0,0,xsize,ysize);\
		784	draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
7668	schaersvoo	785	};\
7749	schaersvoo	786	return;\
7652	schaersvoo	787	};",num);
		788	}
7663	schaersvoo	789
8244	schaersvoo	790	/* draw demilines(s) via inputfields x/y */
15111	schaersvoo	791	void add_input_demiline(int num){
		792	fprintf(js_include_file,"\n/* add_input_segment */\
8244	schaersvoo	793	function user_redraw(t){\
		794	var lu = userdraw_x.length;\
		795	if( t == -1 && lu > 1){\
		796	userdraw_x.splice(lu-2,2);\
		797	userdraw_y.splice(lu-2,2);\
		798	context_userdraw.clearRect(0,0,xsize,ysize);\
		799	draw_demilines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
		800	return;\
		801	};\
		802	var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
		803	var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
		804	var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
		805	var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
		806	if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
		807	if( %d == 2 ){\
		808	var s = userdraw_x.length;\
		809	userdraw_x[s] = x2px(add_x1);\
		810	userdraw_y[s] = y2px(add_y1);\
		811	userdraw_x[s+1] = x2px(add_x2);\
		812	userdraw_y[s+1] = y2px(add_y2);\
16844	bpr	813	} else {\
8244	schaersvoo	814	userdraw_x[0] = x2px(add_x1);\
		815	userdraw_y[0] = y2px(add_y1);\
		816	userdraw_x[1] = x2px(add_x2);\
		817	userdraw_y[1] = y2px(add_y2);\
		818	};\
		819	context_userdraw.clearRect(0,0,xsize,ysize);\
		820	draw_demilines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
		821	};\
		822	return;\
		823	};",num);
		824	}
		825
15111	schaersvoo	826	void add_clear_button(char css_class,char button_text){
11001	schaersvoo	827	/* 25/11/2014 added clearing of reply array
8448	schaersvoo	828	all members will be set to 0 eg reply[0] = 0 , reply[1] = 0 ...
16844	bpr	829	hope this does not interfere with existing work...
8448	schaersvoo	830	*/
11001	schaersvoo	831	/*
16844	bpr	832	5/2016 changed to 'setAttribute()' because of trouble on Chromium/Safari/IE
11080	schaersvoo	833	10/2016 corrected contex-reset-flaw when using "userdraw text,color" and added inputs to the things we can remove
11764	schaersvoo	834	7/2017 added 'userdraw clickfill,color' to removable things...one user_filling per click
16893	schaersvoo	835
16900	schaersvoo	836	7/2022: preserve all div's with html ('<' && '/>') eg mathml,katex,html and all external objects placed with function 'place_image_on_canvas(id)'
		837	...hope this does not interfere with other things
16893	schaersvoo	838	https://wimsedu.info/?topic=geometrie-interactive-avec-canvasdraw
11001	schaersvoo	839	*/
15111	schaersvoo	840	fprintf(js_include_file,"\n/* add clear button */\
8349	schaersvoo	841	clear_draw_area%d = function(){\
15111	schaersvoo	842	if(typeof(fill_canvas_no) === 'number'){\
		843	var chk = document.getElementById('wims_canvas%d'+fill_canvas_no);\
		844	if( chk ){\
		845	var fill_ctx = chk.getContext(\"2d\");fill_ctx.clearRect(0,0,xsize,ysize);\
		846	fill_canvas_no--;userdraw_x.splice(p,1);userdraw_y.splice(p,1);userdraw_radius.splice(p,1);\
		847	return;\
11763	schaersvoo	848	};\
		849	};\
11088	schaersvoo	850	if( typeof(context_userdraw) === 'object' ){\
16893	schaersvoo	851	if(document.getElementById(canvas_div.lastChild.id).tagName == 'DIV'){\
		852	var mathtxt = document.getElementById(canvas_div.lastChild.id).innerHTML;\
16900	schaersvoo	853	if(mathtxt.indexOf('<') == -1 && mathtxt.indexOf('/>') == -1 \|\| canvas_div.lastChild.id.indexOf('placed') != -1){\
16893	schaersvoo	854	document.getElementById(canvas_div.lastChild.id).innerHTML = null;\
		855	canvas_div.removeChild(document.getElementById(canvas_div.lastChild.id));\
		856	};\
14270	schaersvoo	857	};\
11001	schaersvoo	858	context_userdraw.clearRect(0,0,xsize,ysize);\
15111	schaersvoo	859	if( typeof(userdraw_text) !== 'undefined'){ userdraw_text = []; };\
11080	schaersvoo	860	if( document.getElementById(\"canvas_input0\") ){\
		861	var p = 0;var inp;\
		862	while( document.getElementById(\"canvas_input\"+p) ){\
		863	inp = document.getElementById(\"canvas_input\"+p);\
		864	canvas_div.removeChild(inp);\
		865	p++;\
		866	};\
		867	input_cnt = 0;start_input_cnt = 0; \
		868	};\
15111	schaersvoo	869	userdraw_x = [];userdraw_y = [];userdraw_radius = [];xy_cnt = 0;\
11080	schaersvoo	870	};\
14270	schaersvoo	871	if( typeof(external_ctx) === 'object'){\
14038	schaersvoo	872	external_ctx.clearRect(0,0,xsize,ysize);\
		873	for(var p = 0 ; p < userdraw_x.length; p++){\
		874	userdraw_x[p] = null;userdraw_y[p] = null;\
		875	};\
		876	};\
11080	schaersvoo	877	return;\
8350	schaersvoo	878	};\
		879	function add_clear_button(){\
8146	schaersvoo	880	var tooltip_placeholder_div = document.getElementById(\"tooltip_placeholder_div%d\");\
8350	schaersvoo	881	var button = document.createElement('input');\
9858	schaersvoo	882	button.setAttribute(\"type\" , \"button\");\
11024	schaersvoo	883	button.setAttribute(\"id\" , \"clearbutton%d\");\
15111	schaersvoo	884	button.setAttribute(\"class\" , \"%s\");\
9858	schaersvoo	885	button.setAttribute(\"value\" , \"%s\");\
8350	schaersvoo	886	button.setAttribute(\"onclick\",\"clear_draw_area%d()\");\
		887	tooltip_placeholder_div.appendChild(button);\
8146	schaersvoo	888	};\
15111	schaersvoo	889	add_clear_button();",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,css_class,button_text,canvas_root_id);
8146	schaersvoo	890	}
7858	schaersvoo	891
15111	schaersvoo	892	void add_color_palette(char *css_class){
		893	fprintf(js_include_file,"\n/* add color palette */\
11767	schaersvoo	894	function add_color_palette(){\
		895	var tooltip_placeholder_div = document.getElementById(\"tooltip_placeholder_div%d\");\
12006	schaersvoo	896	var clen = palettecolors.length;\
14038	schaersvoo	897	for( var p = 0 ; p < clen ; p++ ){\
12006	schaersvoo	898	var button = document.createElement('input');\
		899	button.setAttribute('type', 'button');\
		900	button.setAttribute('value', ' ');\
		901	button.setAttribute('id',palettecolors[p]);\
		902	button.setAttribute('style', \"%s\");\
		903	button.setAttribute('style','background-color:rgb('+palettecolors[p]+')');\
		904	button.setAttribute(\"backgroundColor\",palettecolors[p]);\
		905	button.addEventListener('mousedown',function(e){var id = this.getAttribute('id');multifillcolors[0]=id;multifillcolors[1]=id;multifillcolors[2]=id;},false);\
		906	tooltip_placeholder_div.appendChild(button);\
		907	};\
		908	};\
		909	add_color_palette();\
15111	schaersvoo	910	",canvas_root_id,css_class);
11767	schaersvoo	911	}
8146	schaersvoo	912
14230	schaersvoo	913
8225	bpr	914	struct colors colors[]={
7614	schaersvoo	915	{"#FF0000","red","255,0,0"},
		916	{"#00FF00","lime","0,255,0"},
		917	{"#0000FF","blue","0,0,255"},
		918	{"#FFA500","orange","255,165,0"},
		919	{"#E9967A","darksalmon","233,150,122"},
		920	{"#F0FFFF","azure","240,255,255"},
		921	{"#CD5C5C","indianred","205,92,92"},
		922	{"#E0FFFF","lightcyan","224,255,255"},
		923	{"#FFE4E1","mistyrose","255,228,225"},
		924	{"#DC143C","crimson","220,20,60"},
		925	{"#FFC0CB","pink","255,192,203"},
		926	{"#FFD700","gold","255,215,0"},
		927	{"#E6E6FA","lavender","230,230,250"},
		928	{"#808080","gray","128,128,128"},
		929	{"#F0F8FF","aliceblue","240,248,255"},
		930	{"#C71585","mediumvioletred","199,21,133"},
		931	{"#FFF0F5","lavenderblush","255,240,245"},
		932	{"#DAA520","goldenrod","218,165,32"},
		933	{"#FFB6C1","lightpink","255,182,193"},
		934	{"#00FFFF","aqua","0,255,255"},
		935	{"#FF69B4","hotpink","255,105,180"},
		936	{"#00FFFF","cyan","0,255,255"},
		937	{"#FF1493","deeppink","255,20,147"},
		938	{"#7FFFD4","aquamarine","127,255,212"},
		939	{"#FA8072","salmon","250,128,114"},
		940	{"#DEB887","burlywood","222,184,135"},
		941	{"#DB7093","palevioletred","219,112,147"},
		942	{"#D2B48C","tan","210,180,140"},
		943	{"#BDB76B","darkkhaki","189,183,107"},
		944	{"#B22222","firebrick","178,34,34"},
		945	{"#FF4500","orangered","255,69,0"},
		946	{"#8B4513","saddlebrown","139,69,19"},
		947	{"#FF8C00","darkorange","255,140,0"},
		948	{"#FFFFE0","lightyellow","255,255,224"},
		949	{"#FFFF00","yellow","255,255,0"},
		950	{"#FFFACD","lemonchiffon","255,250,205"},
		951	{"#F5F5DC","beige","245,245,220"},
		952	{"#FFEFD5","papayawhip","255,239,213"},
		953	{"#FAFAD2","lightgoldenrodyellow","250,250,210"},
		954	{"#FFE4B5","moccasin","255,228,181"},
		955	{"#B8860B","darkgoldenrod","184,134,11"},
		956	{"#FFF8DC","cornsilk","255,248,220"},
		957	{"#FFEBCD","blanchedalmond","255,235,205"},
		958	{"#FFE4C4","bisque","255,228,196"},
		959	{"#FFDEAD","navajowhite","255,222,173"},
		960	{"#F5DEB3","wheat","245,222,179"},
		961	{"#CD853F","peru","205,133,63"},
		962	{"#D2691E","chocolate","210,105,30"},
		963	{"#A0522D","sienna","160,82,45"},
		964	{"#A52A2A","brown","165,42,42"},
		965	{"#BC8F8F","rosybrown","188,143,143"},
		966	{"#F08080","lightcoral","240,128,128"},
		967	{"#FFA07A","lightsalmon","255,160,122"},
		968	{"#8B0000","darkred","139,0,0"},
		969	{"#800000","maroon","128,0,0"},
		970	{"#FAA460","sandybrown","250,164,96"},
		971	{"#FF7F50","coral","255,127,80"},
		972	{"#FF6347","tomato","255,99,71"},
		973	{"#FFDAB9","peachpuff","255,218,185"},
		974	{"#EEE8AA","palegoldenrod","238,232,170"},
		975	{"#F0E68C","khaki","240,230,140"},
		976	{"#D8BFD8","thistle","216,191,216"},
		977	{"#DDA0DD","plum","221,160,221"},
		978	{"#FF00FF","fuchsia","255,0,255"},
		979	{"#FF00FF","magenta","255,0,255"},
		980	{"#EE82EE","violet","238,130,238"},
		981	{"#DA70D6","orchid","218,112,214"},
		982	{"#BA55D3","mediumorchid","186,85,211"},
		983	{"#9370DB","mediumpurple","147,112,219"},
		984	{"#8A2BE2","blueviolet","138,43,226"},
		985	{"#9400D3","darkviolet","148,0,211"},
		986	{"#9932CC","darkorchid","153,50,204"},
		987	{"#8B008B","darkmagenta","139,0,139"},
		988	{"#800080","purple","128,0,128"},
		989	{"#4B0082","indigo","75,0,130"},
		990	{"#483D8B","darkslateblue","72,61,139"},
		991	{"#6A5ACD","slateblue","106,90,205"},
		992	{"#7B68EE","mediumslateblue","123,104,238"},
		993	{"#98FB98","palegreen","152,251,152"},
		994	{"#ADFF2F","greenyellow","173,255,47"},
		995	{"#7FFF00","chartreuse","127,255,0"},
		996	{"#7CFC00","lawngreen","124,252,0"},
		997	{"#00FF7F","springgreen","0,255,127"},
		998	{"#00FA9A","mediumspringgreen","0,250,154"},
		999	{"#90EE90","lightgreen","144,238,144"},
		1000	{"#32CD32","limegreen","50,205,50"},
		1001	{"#3CB371","mediumseagreen","60,179,113"},
		1002	{"#2E8B57","seagreen","46,139,87"},
		1003	{"#228B22","forestgreen","34,139,34"},
		1004	{"#008000","green","0,128,0"},
		1005	{"#006400","darkgreen","0,100,0"},
		1006	{"#9ACD32","yellowgreen","154,205,50"},
		1007	{"#6B8E23","olivedrab","107,142,35"},
		1008	{"#808000","olive","128,128,0"},
		1009	{"#556B2F","darkolivegreen","85,107,47"},
		1010	{"#8FBC8F","darkseagreen","143,188,143"},
		1011	{"#66CDAA","mediumaquamarine","102,205,170"},
		1012	{"#20B2AA","lightseagreen","32,178,170"},
		1013	{"#008B8B","darkcyan","0,139,139"},
		1014	{"#008080","teal","0,128,128"},
		1015	{"#AFEEEE","paleturquoise","175,238,238"},
		1016	{"#40E0D0","turquoise","64,224,208"},
		1017	{"#48D1CC","mediumturquoise","72,209,204"},
		1018	{"#00CED1","darkturquoise","0,206,209"},
		1019	{"#5F9EA0","cadetblue","95,158,160"},
		1020	{"#4682B4","steelblue","70,130,180"},
		1021	{"#B0C4DE","lightsteelblue","176,196,222"},
		1022	{"#B0E0E6","powderblue","176,224,230"},
		1023	{"#ADD8E6","lightblue","173,216,230"},
		1024	{"#87CEEB","skyblue","135,206,235"},
		1025	{"#87CEFA","lightskyblue","135,206,250"},
		1026	{"#00BFFF","deepskyblue","0,191,255"},
		1027	{"#1E90FF","dodgerblue","30,144,255"},
		1028	{"#6495ED","cornflowerblue","100,149,237"},
		1029	{"#4169E1","royalblue","65,105,225"},
		1030	{"#0000CD","mediumblue","0,0,205"},
		1031	{"#00008B","darkblue","0,0,139"},
		1032	{"#000080","navy","0,0,128"},
		1033	{"#191970","midnightblue","25,25,112"},
		1034	{"#DCDCDC","gainsboro","220,220,220"},
		1035	{"#D3D3D3","lightgrey","211,211,211"},
		1036	{"#808080","grey","128,128,128"},
		1037	{"#C0C0C0","silver","192,192,192"},
		1038	{"#A9A9A9","darkgray","169,169,169"},
		1039	{"#778899","lightslategray","119,136,153"},
		1040	{"#708090","slategray","112,128,144"},
		1041	{"#696969","dimgray","105,105,105"},
		1042	{"#2F4F4F","darkslategray","47,79,79"},
11877	schaersvoo	1043	{"#0a0a0a","black","10,10,10"},
7614	schaersvoo	1044	{"#F5FFFA","mintcream","245,255,250"},
		1045	{"#FFFFFF","white","255,255,255"},
		1046	{"#F0FFF0","honeydew","240,255,240"},
		1047	{"#F5F5F5","whitesmoke","245,245,245"},
		1048	{"#F8F8FF","ghostwhite","248,248,255"},
		1049	{"#FFFFF0","ivory","255,255,240"},
		1050	{"#FFFAFA","snow","255,250,250"},
		1051	{"#FFFAF0","floralwhite","255,250,240"},
		1052	{"#FFF5EE","seashell","255,245,238"},
		1053	{"#FDF5E6","oldlace","253,245,230"},
		1054	{"#FAF0E6","linen","250,240,230"},
		1055	{"#FAEBD7","antiquewhite","250,235,215"},
		1056	};
8225	bpr	1057	int NUMBER_OF_COLORNAMES=(sizeof(colors)/sizeof(colors[0]));
7858	schaersvoo	1058
11005	schaersvoo	1059	/* 10/2016 does not react to border color !! just any border will stop the filling */
15111	schaersvoo	1060	void add_js_filltoborder(int canvas_type){
		1061	fprintf(js_include_file,"\n/* command filltoborder */\
		1062	function filltoborder(xs,ys,bordercolors,colors,fill_canvas_no,use_special_filling,fill_ctx){\
11820	schaersvoo	1063	document.body.style.cursor = 'wait';\
8199	schaersvoo	1064	var canvas = document.getElementById(\"wims_canvas%d%d\");\
		1065	if( ! canvas ){ return; };\
11817	schaersvoo	1066	document.body.style.cursor = 'wait';\
8199	schaersvoo	1067	var ctx = canvas.getContext(\"2d\");\
		1068	ctx.save();\
		1069	xs = x2px(xs);\
		1070	ys = y2px(ys);\
15111	schaersvoo	1071	if( xs <= 0 \|\| xs >= xsize \|\| ys <= 0 \|\| ys >= ysize ){ document.body.style.cursor = 'default';return; };\
8098	schaersvoo	1072	var image = ctx.getImageData(0, 0, xsize, ysize);\
		1073	var imageData = image.data;\
		1074	var pixelStack = [[xs, ys]];\
		1075	var px1;\
		1076	var newPos;\
		1077	var pixelPos;\
		1078	var found_left_border;\
		1079	var found_right_border;\
15111	schaersvoo	1080	var fill_image;\
		1081	var fill_data;\
		1082	var _setPixel;\
		1083	function finish_filling(){\
		1084	if(document.getElementById(\"wims_canvas%d\"+fill_canvas_no)){\
		1085	console.log('dit canvas nummer '+fill_canvas_no+' bestaat al');\
16844	bpr	1086	} else {\
15111	schaersvoo	1087	var fill_canvas = create_canvas%d(fill_canvas_no,xsize,ysize);\
		1088	var fill_canvas_ctx = fill_canvas.getContext(\"2d\");\
		1089	fill_canvas_ctx.clearRect(0,0,xsize,ysize);\
		1090	fill_canvas_ctx.putImageData(image, 0, 0);\
		1091	};\
		1092	document.body.style.cursor = 'default';\
		1093	return;\
		1094	};\
8098	schaersvoo	1095	function _getPixel(pixelPos){\
		1096	return {r:imageData[pixelPos], g:imageData[pixelPos+1], b:imageData[pixelPos+2], a:imageData[pixelPos+3]};\
11820	schaersvoo	1097	};\
		1098	if( use_special_filling ){\
15111	schaersvoo	1099	fill_image = fill_ctx.getImageData(0, 0, xsize, ysize);\
		1100	fill_data = fill_image.data;\
11817	schaersvoo	1101	_setPixel = function(pixelPos){\
11820	schaersvoo	1102	var n;var o;\
		1103	for(var p = 0;p < 3; p++){\
		1104	n = fill_data[pixelPos+p];\
		1105	o = imageData[pixelPos+p];\
		1106	if( n != o ){ imageData[pixelPos+p] = n; } else { if( o == 255 ){ o = 253;} imageData[pixelPos+p] = o+1;};\
		1107	};\
		1108	imageData[pixelPos+3] = 255;\
		1109	};\
16844	bpr	1110	} else {\
11820	schaersvoo	1111	_setPixel = function(pixelPos){\
11817	schaersvoo	1112	imageData[pixelPos] = color.r;\
		1113	imageData[pixelPos+1] = color.g;\
		1114	imageData[pixelPos+2] = color.b;\
		1115	imageData[pixelPos+3] = color.a;\
11820	schaersvoo	1116	};\
		1117	};\
8098	schaersvoo	1118	function _comparePixel(px2){\
11023	schaersvoo	1119	if(px2.r === px1.r && px2.g === px1.g && px2.b === px1.b ){ return true;};\
		1120	return false;\
8098	schaersvoo	1121	};\
		1122	px1 = _getPixel(((ys * xsize) + xs) * 4);\
15111	schaersvoo	1123	var color = {\
		1124	r: parseInt(colors[0], 10),\
		1125	g: parseInt(colors[1], 10),\
		1126	b: parseInt(colors[2], 10),\
		1127	a: parseInt(colors[3] \|\| 255, 10)\
8199	schaersvoo	1128	};\
15111	schaersvoo	1129	var bordercolor = {\
		1130	r: parseInt(bordercolors[0], 10),\
		1131	g: parseInt(bordercolors[1], 10),\
		1132	b: parseInt(bordercolors[2], 10),\
		1133	a: parseInt(bordercolors[3] \|\| 255, 10)\
8098	schaersvoo	1134	};\
15111	schaersvoo	1135	if( _comparePixel(color) ) { return true; };\
		1136	var cnt=0;\
		1137	var max=(xsize)*(ysize);\
		1138	function fill_me_up(){\
8098	schaersvoo	1139	while (pixelStack.length) {\
		1140	newPos = pixelStack.pop();\
		1141	xs = newPos[0];ys = newPos[1];\
		1142	pixelPos = (ysxsize + xs) 4;\
11023	schaersvoo	1143	while(ys >= 0 && _comparePixel(_getPixel(pixelPos))){\
		1144	ys -= 1;\
8098	schaersvoo	1145	pixelPos -= xsize * 4;\
15111	schaersvoo	1146	};\
8098	schaersvoo	1147	pixelPos += xsize * 4;\
11023	schaersvoo	1148	ys += 1;\
8098	schaersvoo	1149	found_left_border = false;\
		1150	found_right_border = false;\
15111	schaersvoo	1151	while( ys <= ysize-1 && _comparePixel(_getPixel(pixelPos)) ){\
		1152	cnt++;if(cnt>max){console.log('kap er mee');finish_filling();};\
11023	schaersvoo	1153	ys += 1;\
8098	schaersvoo	1154	_setPixel(pixelPos);\
11005	schaersvoo	1155	if( xs > 1 ){\
8098	schaersvoo	1156	if( _comparePixel(_getPixel(pixelPos - 4)) ){\
		1157	if( !found_left_border ){\
		1158	pixelStack.push( [xs - 1, ys] );\
		1159	found_left_border = true;\
11023	schaersvoo	1160	};\
8098	schaersvoo	1161	}\
		1162	else if( found_left_border ){\
		1163	found_left_border = false;\
15111	schaersvoo	1164	};\
		1165	};\
11005	schaersvoo	1166	if( xs < xsize - 1 ){\
8098	schaersvoo	1167	if( _comparePixel(_getPixel(pixelPos + 4)) ){\
		1168	if( !found_right_border){\
		1169	pixelStack.push( [xs + 1, ys] );\
		1170	found_right_border = true;\
15111	schaersvoo	1171	};\
8098	schaersvoo	1172	}\
		1173	else if(found_right_border){\
		1174	found_right_border = false;\
15111	schaersvoo	1175	};\
		1176	};\
8098	schaersvoo	1177	pixelPos += xsize * 4;\
15111	schaersvoo	1178	};\
11820	schaersvoo	1179	};\
15111	schaersvoo	1180	};\
		1181	fill_me_up();\
		1182	finish_filling();\
		1183	return;\
		1184	};",canvas_root_id,canvas_type,canvas_root_id,canvas_root_id);
8074	schaersvoo	1185	}
8083	schaersvoo	1186
15111	schaersvoo	1187	void add_js_ruler(double x,double y,double sizex,double sizey,char *font,
9289	schaersvoo	1188	char stroke_color,double stroke_opacity,char fill_color,double fill_opacity,
14057	schaersvoo	1189	int line_width,int dynamic,int use_snap){
15111	schaersvoo	1190	fprintf(js_include_file,"\n/* command ruler */\
9289	schaersvoo	1191	var ruler_data = new Array(3);\
		1192	var ruler%d = function(){\
14057	schaersvoo	1193	var use_snap = %d;\
9289	schaersvoo	1194	var full = 2*Math.PI;\
		1195	var once = true;\
		1196	var canvas = create_canvas%d(3000,xsize,ysize);\
		1197	var ctx = canvas.getContext(\"2d\");\
		1198	var canvas_temp = document.createElement(\"canvas\");\
		1199	var size_x = xsize*(%f)/(xmax - xmin);\
		1200	var size_y = ysize*(%f)/(ymax - ymin);\
		1201	var dx = xsize/(xmax - xmin);\
		1202	var dy = 0.8*ysize/(ymax - ymin);\
		1203	canvas_temp.width = xsize;\
		1204	canvas_temp.height = ysize;\
		1205	var ctx_temp = canvas_temp.getContext(\"2d\");\
		1206	var xcenter = x2px(%f);\
		1207	var ycenter = y2px(%f);\
		1208	var ruler_x = xcenter;\
		1209	var ruler_y = ycenter;\
		1210	ctx_temp.font = \"%s\";\
		1211	ctx_temp.strokeStyle = \"rgba(%s,%f)\";\
		1212	ctx_temp.fillStyle = \"rgba(%s,%f)\";\
		1213	ctx_temp.lineWidth = %d;\
		1214	ctx_temp.save();\
		1215	if(once){\
		1216	ctx_temp.beginPath();\
		1217	ctx_temp.moveTo(ruler_x,ruler_y);\
		1218	ctx_temp.lineTo(ruler_x+size_x,ruler_y);\
		1219	ctx_temp.lineTo(ruler_x+size_x,ruler_y-size_y);\
		1220	ctx_temp.lineTo(ruler_x,ruler_y-size_y);\
		1221	ctx_temp.lineTo(ruler_x,ruler_y);\
		1222	ctx_temp.closePath();\
		1223	ctx_temp.fill();\
		1224	ctx_temp.stroke();\
		1225	ctx_temp.fillStyle = ctx_temp.strokeStyle;\
		1226	var txtsize;\
		1227	var num = 1;\
		1228	for(var p = dx ; p < size_x ; p = p+dx){\
		1229	txtsize = 0.5*(ctx_temp.measureText(num).width);\
		1230	ctx_temp.fillText(num,ruler_x + p -txtsize,ruler_y - 0.9*dy);\
		1231	num++;\
		1232	};\
		1233	ctx_temp.strokeStyle = \"rgba(0,0,255,0.6)\";\
		1234	ctx_temp.lineWidth = 2;\
		1235	for(var p = 0; p < size_x ; p = p+dx){\
		1236	ctx_temp.beginPath();\
		1237	ctx_temp.moveTo(ruler_x+p,ruler_y);\
		1238	ctx_temp.lineTo(ruler_x+p,ruler_y-0.8*dy);\
		1239	ctx_temp.closePath();\
		1240	ctx_temp.stroke();\
		1241	};\
		1242	ctx_temp.strokeStyle = \"rgba(0,0,255,0.6)\";\
		1243	ctx_temp.lineWidth = 1;\
		1244	for(var p = 0; p < size_x ; p = p+0.5*dx){\
		1245	ctx_temp.beginPath();\
		1246	ctx_temp.moveTo(ruler_x+p,ruler_y);\
		1247	ctx_temp.lineTo(ruler_x+p,ruler_y-0.6*dy);\
		1248	ctx_temp.closePath();\
		1249	ctx_temp.stroke();\
		1250	};\
		1251	ctx_temp.strokeStyle = \"rgba(255,0,0,0.6)\";\
		1252	ctx_temp.lineWidth = 0.5;\
		1253	for(var p = 0; p < size_x ; p = p+0.1*dx){\
		1254	ctx_temp.beginPath();\
		1255	ctx_temp.moveTo(ruler_x+p,ruler_y);\
		1256	ctx_temp.lineTo(ruler_x+p,ruler_y-0.4*dy);\
		1257	ctx_temp.closePath();\
		1258	ctx_temp.stroke();\
		1259	};\
		1260	ctx_temp.drawImage(canvas,ruler_x,ruler_y);\
		1261	once = false;\
14057	schaersvoo	1262	}",canvas_root_id,use_snap,canvas_root_id,sizex,sizey,x,y,font,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width);
16844	bpr	1263
9289	schaersvoo	1264	if( dynamic == -1 ){
		1265	fprintf(js_include_file,"\
		1266	ctx.drawImage(canvas_temp,0,0);\
		1267	if(wims_status != \"done\"){\
		1268	canvas_div.addEventListener( 'mouseup' , ruler_stop,false);\
		1269	canvas_div.addEventListener( 'mousedown' , ruler_start,false);\
		1270	canvas_div.addEventListener( 'mousemove' , ruler_move,false);\
11002	schaersvoo	1271	canvas_div.addEventListener( 'touchstart', function(e){ e.preventDefault();ruler_start(e.changedTouches[0]);},false);\
		1272	canvas_div.addEventListener( 'touchmove', function(e){ e.preventDefault();ruler_move(e.changedTouches[0]);},false);\
		1273	canvas_div.addEventListener( 'touchend', function(e){ e.preventDefault();ruler_stop(e.changedTouches[0]);},false);\
9289	schaersvoo	1274	};\
		1275	function ruler_stop(evt){\
		1276	ruler_data[0] = ruler_x;\
		1277	ruler_data[1] = ruler_y;\
		1278	ruler_data[2] = angle;\
		1279	return;\
		1280	};\
15111	schaersvoo	1281	var ruler_object_cnt = 0;\
9289	schaersvoo	1282	function ruler_start(evt){\
15111	schaersvoo	1283	var mouse = getMouse(evt,canvas);\
11002	schaersvoo	1284	var mouse_y = mouse.y;\
		1285	if( mouse_y > ysize - 20 ){return;};\
		1286	var mouse_x = mouse.x;\
		1287	if( mouse_x > ruler_x - 50 && mouse_x < ruler_x + size_x + 50){\
		1288	if( mouse_y > ruler_y - 50 && mouse_y < ruler_y + size_y + 50){\
15111	schaersvoo	1289	ruler_object_cnt++;\
11002	schaersvoo	1290	ruler_move(evt);\
		1291	return;\
		1292	};\
15111	schaersvoo	1293	}else{ruler_object_cnt = 0; return;};\
9289	schaersvoo	1294	};\
		1295	var angle = 0;\
		1296	function ruler_move(evt){\
15111	schaersvoo	1297	var mouse = getMouse(evt,canvas);\
		1298	switch(ruler_object_cnt){\
9289	schaersvoo	1299	case 1:\
		1300	angle = 0;\
14057	schaersvoo	1301	var xy = multisnap_check(mouse.x,mouse.y,use_snap);\
		1302	ruler_y = xy[1];\
9289	schaersvoo	1303	if( ruler_y > ysize - 20 ){ruler_y = 0.5ysize;ruler_x = 0.5xsize;return;};\
14057	schaersvoo	1304	ruler_x = xy[0];\
9289	schaersvoo	1305	ctx.clearRect(0,0,xsize,ysize);\
		1306	ctx.save();\
		1307	ctx.translate(ruler_x - xcenter,ruler_y - ycenter);\
		1308	ctx.drawImage(canvas_temp,0,0);\
		1309	ctx.restore();\
		1310	break;\
		1311	case 2:\
11017	schaersvoo	1312	angle = find_angle(ruler_x,ruler_y,mouse.x,mouse.y);\
9289	schaersvoo	1313	ctx.clearRect(0,0,xsize,ysize);\
		1314	ctx.save();\
		1315	ctx.translate(ruler_x,ruler_y);\
		1316	ctx.rotate(angle);\
		1317	ctx.translate( -1xcenter, -1ycenter );\
		1318	ctx.drawImage( canvas_temp,0,0 );\
		1319	ctx.restore();\
11017	schaersvoo	1320	userdraw_radius[0] = 2*Math.PI - angle;\
9289	schaersvoo	1321	break;\
15111	schaersvoo	1322	case 3:ruler_object_cnt = 0;break;\
9289	schaersvoo	1323	default:ruler_stop(evt);break;\
		1324	};\
		1325	};\
		1326	};\
15111	schaersvoo	1327	ruler%d();",canvas_root_id);
9289	schaersvoo	1328	}
		1329	else
		1330	{
		1331	fprintf(js_include_file,"\
		1332	ctx.clearRect(0,0,xsize,ysize);\
		1333	ctx.save();\
		1334	ctx.translate(ruler_x,ruler_y);\
		1335	ctx.rotate(%d*Math.PI/180);\
		1336	ctx.translate( -1xcenter, -1ycenter );\
		1337	ctx.drawImage( canvas_temp,0,0 );\
		1338	ctx.restore();\
		1339	};\
		1340	ruler%d();",dynamic,canvas_root_id);
		1341	}
		1342	}
		1343
15111	schaersvoo	1344	void add_js_protractor(int type,double xcenter,double ycenter,int size,char font,char stroke_color,double stroke_opacity,char *fill_color,double fill_opacity,int line_width,int use_scale,int dynamic,int use_snap){
9289	schaersvoo	1345
		1346	/*
		1347	use_slider_display = 2 : angle in degrees
		1348	use_slider_display = 3 : angle in radians
		1349	void add_slider_display(FILE js_include_file,int canvas_root_id,int precision,int font_size,char font_color,double stroke_opacity){
		1350	*/
		1351
		1352	if( type == 1 ){ /* geodriehoek */
15111	schaersvoo	1353	fprintf(js_include_file,"\n/* command protractor type 1 */\
9289	schaersvoo	1354	var protractor_data = new Array(3);\
		1355	var protractor%d = function(){\
		1356	var once = true;\
14057	schaersvoo	1357	var use_snap = %d;\
9289	schaersvoo	1358	var full = 2*Math.PI;\
		1359	var canvas = create_canvas%d(2000,xsize,ysize);\
		1360	var ctx = canvas.getContext(\"2d\");\
		1361	var canvas_temp = document.createElement(\"canvas\");\
		1362	var size = parseInt(xsize*(%d)/(xmax - xmin));\
		1363	canvas_temp.width = xsize;\
		1364	canvas_temp.height = ysize;\
		1365	var ctx_temp = canvas_temp.getContext(\"2d\");\
		1366	var type = %d;\
		1367	var xcenter = x2px(%f);\
		1368	var ycenter = y2px(%f);\
		1369	var half = 0.5*size;\
		1370	var radius1 = 0.6*half;\
		1371	var radius2 = 0.65*half;\
		1372	var radius3 = 0.7*half;\
		1373	ctx_temp.font = \"%s\";\
		1374	ctx_temp.strokeStyle = \"rgba(%s,%f)\";\
		1375	ctx_temp.fillStyle = \"rgba(%s,%f)\";\
		1376	ctx_temp.lineWidth =%d;\
		1377	var use_scale = %d;\
		1378	if( once ){\
		1379	ctx_temp.clearRect(0,0,canvas_temp.width,canvas_temp.height);\
		1380	ctx_temp.beginPath();\
		1381	ctx_temp.moveTo(xcenter-half,ycenter );\
		1382	ctx_temp.lineTo(xcenter,ycenter-half);\
		1383	ctx_temp.lineTo(xcenter+half,ycenter);\
		1384	ctx_temp.lineTo(xcenter-half,ycenter);\
		1385	ctx_temp.moveTo(xcenter,ycenter );\
		1386	ctx_temp.lineTo(xcenter+0.5half,ycenter-0.5half);\
		1387	ctx_temp.moveTo(xcenter,ycenter );\
		1388	ctx_temp.lineTo(xcenter-0.5half,ycenter-0.5half);\
		1389	ctx_temp.moveTo(xcenter,ycenter );\
		1390	ctx_temp.lineTo(xcenter,ycenter-half);\
		1391	ctx_temp.closePath();\
		1392	ctx_temp.fill();\
		1393	ctx_temp.stroke();\
		1394	ctx_temp.beginPath();\
		1395	ctx_temp.arc(xcenter,ycenter,radius1,0,Math.PI,false);\
		1396	ctx_temp.closePath();\
		1397	if( use_scale == 1 ){\
		1398	ctx_temp.fillStyle = ctx_temp.strokeStyle;\
		1399	var txtsize;\
		1400	for(var p = 45 ; p < 180;p = p+45){\
		1401	txtsize = 0.5*(ctx_temp.measureText(p).width);\
		1402	ctx_temp.fillText(p,xcenter+0.5halfMath.cos(pMath.PI/180) - txtsize,ycenter-0.5halfMath.sin(pMath.PI/180));\
		1403	};\
		1404	};\
		1405	for(var p = 10 ; p < 180;p = p+10){\
		1406	ctx_temp.beginPath();\
		1407	ctx_temp.moveTo(xcenter+radius1Math.cos(pMath.PI/180),ycenter-radius1Math.sin(pMath.PI/180));\
		1408	ctx_temp.lineTo(xcenter+radius3Math.cos(pMath.PI/180),ycenter-radius3Math.sin(pMath.PI/180));\
		1409	ctx_temp.closePath();\
		1410	ctx_temp.stroke();\
		1411	};\
		1412	for(var p = 0 ; p < 180;p=p+2){\
		1413	if(p%%10 != 0){\
		1414	ctx_temp.beginPath();\
		1415	ctx_temp.moveTo(xcenter+radius1Math.cos(pMath.PI/180),ycenter-radius1Math.sin(pMath.PI/180));\
		1416	ctx_temp.lineTo(xcenter+radius2Math.cos(pMath.PI/180),ycenter-radius2Math.sin(pMath.PI/180));\
		1417	ctx_temp.closePath();\
		1418	ctx_temp.stroke();\
		1419	};\
		1420	};\
		1421	ctx_temp.drawImage(canvas,xcenter,ycenter);\
		1422	ctx_temp.save();\
		1423	once = false;\
		1424	};\
14057	schaersvoo	1425	",canvas_root_id,use_snap,canvas_root_id,size,type,xcenter,ycenter,font,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width,use_scale);
9289	schaersvoo	1426	}
		1427
11002	schaersvoo	1428	if( type != 1 ){
15111	schaersvoo	1429	fprintf(js_include_file,"\n/* command protractor type 0 */\
9289	schaersvoo	1430	var protractor_data = new Array(3);\
		1431	var protractor%d = function(){\
		1432	var once = true;\
14057	schaersvoo	1433	var use_snap = %d;\
9289	schaersvoo	1434	var full = 2*Math.PI;\
		1435	var canvas = create_canvas%d(2000,xsize,ysize);\
		1436	var ctx = canvas.getContext(\"2d\");\
		1437	var canvas_temp = document.createElement(\"canvas\");\
		1438	var size = parseInt(xsize*(%d)/(xmax - xmin));\
		1439	canvas_temp.width = xsize;\
		1440	canvas_temp.height = ysize;\
		1441	var ctx_temp = canvas_temp.getContext(\"2d\");\
		1442	var type = %d;\
		1443	var xcenter = x2px(%f);\
		1444	var ycenter = y2px(%f);\
		1445	var half = 0.5*size;\
		1446	var radius1 = 0.8*half;\
		1447	var radius2 = 0.9*half;\
		1448	var radius3 = half;\
		1449	ctx_temp.font = \"%s\";\
		1450	ctx_temp.strokeStyle = \"rgba(%s,%f)\";\
		1451	ctx_temp.fillStyle = \"rgba(%s,%f)\";\
		1452	ctx_temp.lineWidth =%d;\
		1453	var use_scale = %d;\
		1454	if( once ){\
		1455	ctx_temp.clearRect(0,0,xsize,ysize);\
		1456	ctx_temp.arc(xcenter,ycenter,radius1,0,2*Math.PI,false);\
		1457	ctx_temp.arc(xcenter,ycenter,radius2,0,2*Math.PI,false);\
		1458	ctx_temp.arc(xcenter,ycenter,radius3,0,2*Math.PI,false);\
		1459	ctx_temp.fill();\
		1460	ctx_temp.stroke();\
		1461	if( use_scale == 1 ){\
		1462	ctx_temp.fillStyle = ctx_temp.strokeStyle;\
		1463	var txtsize;\
		1464	for(var p = 0 ; p < 360;p = p+45){\
		1465	txtsize = 0.5*(ctx_temp.measureText(p).width);\
		1466	ctx_temp.fillText(p,xcenter+0.6halfMath.cos(pMath.PI/180) - txtsize,ycenter-0.6halfMath.sin(pMath.PI/180));\
		1467	};\
		1468	};\
		1469	ctx_temp.strokeStyle = \"rgba(255,0,0,0.4)\";\
		1470	for(var p = 0 ; p < 360;p = p+10){\
		1471	ctx_temp.beginPath();\
		1472	ctx_temp.moveTo(xcenter+radius1Math.cos(pMath.PI/180),ycenter-radius1Math.sin(pMath.PI/180));\
		1473	ctx_temp.lineTo(xcenter+radius3Math.cos(pMath.PI/180),ycenter-radius3Math.sin(pMath.PI/180));\
		1474	ctx_temp.closePath();\
		1475	ctx_temp.stroke();\
		1476	};\
		1477	ctx_temp.strokeStyle = \"rgba(0,0,255,0.4)\";\
		1478	for(var p = 0 ; p < 360;p=p+2){\
		1479	ctx_temp.beginPath();\
		1480	ctx_temp.moveTo(xcenter+radius2Math.cos(pMath.PI/180),ycenter-radius2Math.sin(pMath.PI/180));\
		1481	ctx_temp.lineTo(xcenter+radius3Math.cos(pMath.PI/180),ycenter-radius3Math.sin(pMath.PI/180));\
		1482	ctx_temp.closePath();\
		1483	ctx_temp.stroke();\
		1484	};\
		1485	ctx_temp.strokeStyle = \"rgba(0,0,0,0.6)\";\
		1486	for(var p = 0 ; p < 360;p=p+45){\
		1487	ctx_temp.beginPath();\
		1488	ctx_temp.moveTo(xcenter,ycenter);\
		1489	ctx_temp.lineTo(xcenter+radius3Math.cos(pMath.PI/180),ycenter-radius3Math.sin(pMath.PI/180));\
		1490	ctx_temp.closePath();\
		1491	ctx_temp.stroke();\
		1492	};\
		1493	ctx_temp.drawImage(canvas,0,0);\
		1494	ctx_temp.save();\
		1495	once = false;\
15111	schaersvoo	1496	};",canvas_root_id,use_snap,canvas_root_id,size,type,xcenter,ycenter,font,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width,use_scale);
11017	schaersvoo	1497	}
		1498	if( dynamic == -1 ){ /* rotate the protractors */
9289	schaersvoo	1499	fprintf(js_include_file,"\
		1500	var protractor_x = xcenter;\
		1501	var protractor_y = ycenter;\
		1502	ctx.drawImage(canvas_temp,0,0);\
11017	schaersvoo	1503	var angle = 0;\
9289	schaersvoo	1504	if(wims_status != \"done\"){\
		1505	canvas_div.addEventListener( 'mouseup' , protractor_stop,false);\
		1506	canvas_div.addEventListener( 'mousedown' , protractor_start,false);\
		1507	canvas_div.addEventListener( 'mousemove' , protractor_move,false);\
11002	schaersvoo	1508	canvas_div.addEventListener( 'touchstart', function(e){ e.preventDefault();protractor_start(e.changedTouches[0]);},false);\
		1509	canvas_div.addEventListener( 'touchmove', function(e){ e.preventDefault();protractor_move(e.changedTouches[0]);},false);\
		1510	canvas_div.addEventListener( 'touchend', function(e){ e.preventDefault();protractor_stop(e.changedTouches[0]);},false);\
9289	schaersvoo	1511	};\
		1512	function protractor_stop(evt){\
		1513	protractor_data[0] = protractor_x;\
		1514	protractor_data[1] = protractor_y;\
		1515	protractor_data[2] = angle;\
		1516	return;\
		1517	};\
15111	schaersvoo	1518	var protractor_object_cnt = 0;\
9289	schaersvoo	1519	function protractor_start(evt){\
15111	schaersvoo	1520	var mouse = getMouse(evt,canvas);\
11002	schaersvoo	1521	var mouse_y = mouse.y;\
		1522	if( mouse_y > ysize - 20 ){return;};\
		1523	var mouse_x = mouse.x;\
		1524	if( mouse_x > protractor_x - half && mouse_x < protractor_x + half ){\
		1525	if( mouse_y > protractor_y - half && mouse_y < protractor_y + half ){\
15111	schaersvoo	1526	protractor_object_cnt++;\
11002	schaersvoo	1527	protractor_move(evt);\
		1528	return;\
		1529	};\
15111	schaersvoo	1530	}else{protractor_object_cnt = 0; return;};\
9289	schaersvoo	1531	};\
		1532	function protractor_move(evt){\
15111	schaersvoo	1533	var mouse = getMouse(evt,canvas);\
		1534	switch(protractor_object_cnt){\
9289	schaersvoo	1535	case 1:\
14057	schaersvoo	1536	var xy = multisnap_check(mouse.x,mouse.y,use_snap);\
		1537	mouse.x = xy[0];\
		1538	mouse.y = xy[1];\
9289	schaersvoo	1539	angle = 0;\
14057	schaersvoo	1540	protractor_x = mouse.x;\
11002	schaersvoo	1541	protractor_y = mouse.y;\
9289	schaersvoo	1542	if( protractor_y > ysize - 20 ){protractor_y = 0.5ysize;protractor_x = 0.5xsize;return;};\
		1543	ctx.clearRect(0,0,xsize,ysize);\
		1544	ctx.save();\
		1545	ctx.translate(protractor_x - xcenter,protractor_y - ycenter);\
		1546	ctx.drawImage(canvas_temp,0,0);\
		1547	ctx.restore();\
		1548	break;\
		1549	case 2:\
11017	schaersvoo	1550	angle = find_angle(protractor_x,protractor_y,mouse.x,mouse.y);\
9289	schaersvoo	1551	ctx.clearRect(0,0,xsize,ysize);\
		1552	ctx.save();\
		1553	ctx.translate(protractor_x,protractor_y);\
		1554	ctx.rotate(angle);\
		1555	ctx.translate( -1xcenter, -1ycenter );\
		1556	ctx.drawImage( canvas_temp,0,0 );\
		1557	ctx.restore();\
11017	schaersvoo	1558	userdraw_radius[0] =2*Math.PI- angle;\
9289	schaersvoo	1559	break;\
15111	schaersvoo	1560	case 3:protractor_object_cnt = 0;break;\
9289	schaersvoo	1561	default:protractor_stop(evt);\
		1562	};\
		1563	};\
		1564	};\
15111	schaersvoo	1565	protractor%d();",canvas_root_id);
15313	schaersvoo	1566
9289	schaersvoo	1567	}
		1568	else
		1569	{
		1570	fprintf(js_include_file,"\
		1571	ctx.save();\
		1572	ctx.translate(xcenter,ycenter);\
		1573	ctx.rotate(%d*Math.PI/180);\
		1574	ctx.translate( -1xcenter, -1ycenter );\
		1575	ctx.drawImage( canvas_temp,0,0 );\
		1576	ctx.restore();\
		1577	};\
		1578	protractor%d();\
		1579	",dynamic,canvas_root_id);
		1580	} /* end dynamic == -1*/
		1581
		1582	}
9329	schaersvoo	1583
14038	schaersvoo	1584
		1585
14044	schaersvoo	1586

Subversion Repositories wimsdev

(root)/trunk/wims/src/Misc/canvasdraw/canvasmacro.c – Rev 17351