Subversion Repositories wimsdev

Rev

Rev 18572 | Rev 18588 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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