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