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