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