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