Subversion Repositories wimsdev

Rev

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