Subversion Repositories wimsdev

Rev

Rev 16827 | Rev 16872 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. #include "canvasdraw.h"
  2.  
  3. void add_js_zoom_buttons(char *stroke_color,double stroke_opacity){
  4. fprintf(js_include_file,"\n/* draw zoom buttons */\
  5. var draw_zoom_buttons = function(){\
  6. var obj;var canvas_type =%d;\
  7. if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\
  8.  obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\
  9. } else {\
  10.  obj = create_canvas%d(canvas_type,xsize,ysize);\
  11. };\
  12. var ctx = obj.getContext(\"2d\");\
  13. ctx.font =\"20px Arial\";\
  14. ctx.textAlign = \"right\";\
  15. ctx.fillStyle=\"rgba(%s,%f)\";\
  16. ctx.fillText(\"+\",xsize,ysize);\
  17. ctx.fillText(\"\\u2212\",xsize - 15,ysize-2);\
  18. ctx.fillText(\"\\u2192\",xsize - 30,ysize-2);\
  19. ctx.fillText(\"\\u2190\",xsize - 45,ysize-2);\
  20. ctx.fillText(\"\\u2191\",xsize - 60,ysize-2);\
  21. ctx.fillText(\"\\u2193\",xsize - 75,ysize-2);\
  22. ctx.fillText(\"\\u00D7\",xsize - 90,ysize-2);\
  23. ctx.stroke();\
  24. };draw_zoom_buttons();",BG_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id,stroke_color,stroke_opacity);
  25. }
  26.  
  27. void add_js_popup(char *getfile_cmd){
  28. fprintf(stdout,"\n<!-- begin command popup %d -->\n\
  29. <script>\n\
  30. if( wims_status != 'done'){\
  31. var popup = window.open('','','toolbar=no,scrollbars=yes,menubar=no,location=no,resizable=yes,top=4,left=4,status=no, width = %dpx, height = %dpx');\
  32. var popupHTML =\"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\\n<html><head></head>\\n<body><div style='width:%dpx;height:%dpx;position:relative' id='canvas_div%d'></div><div id='tooltip_placeholder_div%d' style='display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;'><span id='tooltip_placeholder%d' style='display:none;'></span></div></body></html>\";\
  33. popup.document.write(popupHTML);\
  34. var s0 = popup.document.createElement(\"script\");\
  35. s0.text=\"var wims_status = window.opener.wims_status; var use_dragdrop_reply = window.opener.use_dragdrop_reply;window.opener.canvas_scripts.push('%d');\";\
  36. popup.document.getElementsByTagName(\"HEAD\")[0].appendChild(s0);\
  37. var s1 = popup.document.createElement(\"script\");\
  38. s1.src = \"%s\";\
  39. popup.document.getElementsByTagName(\"HEAD\")[0].appendChild(s1);\
  40. popup.document.close();\
  41. } else {\
  42.  var canvas_div = document.getElementById('canvas_div%d');\
  43.  canvas_div.style.display='block';\
  44. };\n</script>\n<!-- end command popup %d -->\n",
  45. canvas_root_id,
  46. xsize+40,ysize+40,
  47. xsize,ysize,
  48. canvas_root_id,
  49. canvas_root_id,
  50. canvas_root_id,
  51. canvas_root_id,
  52. getfile_cmd,
  53. canvas_root_id,
  54. canvas_root_id);
  55. }
  56.  
  57. void add_js_tooltip(char *tooltip_text,char *bgcolor){
  58. fprintf(stdout,"\n<!-- begin command intooltip %d -->\n\
  59. <script>\n\
  60. var xsize = %d;\
  61. var ysize = %d;\
  62. var tooltip%d_obj_x = 0;\
  63. var tooltip%d_obj_y = 0;\
  64. var tooltip%d_flipflop = 0;\
  65. var tooltip%d_obj = document.getElementById(\"canvas_div%d\");\
  66. tooltip%d_obj.style.display=\"none\";\
  67. tooltip%d_obj.style.position=\"absolute\";\
  68. var tooltip%d_link = document.createElement(\"a\");\
  69. tooltip%d_link.addEventListener(\"mousemove\",tooltip%d_drag,false);\
  70. tooltip%d_link.setAttribute(\"onclick\",\"tooltip%d_show()\");\
  71. tooltip%d_link.innerHTML  = \"%s\";\
  72. var tooltip_placeholder = document.getElementById(\"tooltip_placeholder%d\");\
  73. tooltip_placeholder.style.display=\"block\";\
  74. tooltip_placeholder.style.position=\"absolute\";\
  75. tooltip_placeholder.style.backgroundColor=\"%s\";\
  76. tooltip_placeholder.appendChild(tooltip%d_link);\
  77. function tooltip%d_drag(action){\
  78. if(!action){ action = event; };\
  79. if(action.clientX){\
  80.  tooltip%d_obj.style.left = (tooltip%d_mouseX(action) + 10) +\"px\";\
  81.  var ytop = tooltip%d_mouseY(action);\
  82.  if(ytop + ysize < window.innerHeight){\
  83.   tooltip%d_obj.style.top = (ytop - 10) +\"px\";\
  84.  } else {\
  85.   tooltip%d_obj.style.top = parseInt(ytop - 0.8*ysize) +\"px\";\
  86.  };\
  87. } else {\
  88.  return null;\
  89. };\
  90. };\
  91. function tooltip%d_mouseX(action){\
  92. if(action.pageX){\
  93.  return action.pageX;\
  94. } else {\
  95.  if(action.clientX){\
  96.   return action.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);\
  97.  } else {\
  98.   return null;\
  99.  };\
  100. };\
  101. };\
  102. function tooltip%d_mouseY(action){\
  103. if(action.pageY){\
  104.  return action.pageY;\
  105. } else {\
  106.  if(action.clientY){\
  107.   return action.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop);\
  108.  } else {\
  109.   return null;\
  110.  };\
  111. };\
  112. };\
  113. function tooltip%d_show(){\
  114. if(tooltip%d_flipflop == 0){\
  115.  tooltip%d_obj.style.display = \"block\";\
  116.  tooltip%d_flipflop = 1;\
  117. } else {\
  118.  tooltip%d_flipflop = 0;\
  119.  tooltip%d_obj.style.display = \"none\";\
  120. };\
  121. };\n</script>\n<!-- end command intooltip %d -->\n",canvas_root_id,xsize,ysize,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,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,tooltip_text,canvas_root_id,bgcolor,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,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id);
  122.  
  123. }
  124.  
  125.  
  126. /*
  127.  
  128. type = 0 : x-values only [command mousex]
  129. type = 1 : y-values only [command mousey]
  130. type = 2 : (x:y)         [command mouse]
  131. type = 3 : degree        [command mouse_degree]
  132. type = 4 : radian
  133. type = 5 : radius
  134.  
  135.   var mouse = getMouse(evt,canvas_div);\
  136.   var x = evt.clientX - mouse_canvas_rect.left;\
  137.   var y = evt.clientY - mouse_canvas_rect.top;\
  138.  
  139. */
  140. void add_js_mouse(int canvas_cnt,int precision,char *stroke_color,int font_size,double stroke_opacity,int type){
  141. fprintf(js_include_file,"\n/* command mouse on mouse canvas */\
  142. function use_mouse_coordinates(){\
  143. var display_type = %d;\
  144. var canvas_type = %d;\
  145. var mouse_canvas = create_canvas%d(canvas_type,xsize,ysize);\
  146. var mouse_context = mouse_canvas.getContext(\"2d\");\
  147. mouse_canvas.addEventListener(\"mousemove\",show_coordinate%d,false);\
  148. mouse_canvas.addEventListener(\"touchmove\", function(e){ e.preventDefault();show_coordinate%d(e.changedTouches[0]);},false);\
  149. var prec = Math.log(%d)/(Math.log(10));\
  150. function show_coordinate%d(evt){\
  151.  var mouse = getMouse(evt,mouse_canvas);\
  152.  var x = mouse.x;\
  153.  var y = mouse.y;\
  154.  var m_data = \"\";\
  155.  switch(display_type){\
  156.   case 0: m_data = \" \"+(px2x(x)).toFixed(prec)+\" \"+unit_x;break;\
  157.   case 1: m_data = \" \"+(px2y(y)).toFixed(prec)+\" \"+unit_y;break;\
  158.   case 2: m_data = \"(\"+(px2x(x)).toFixed(prec)+\":\"+(px2y(y)).toFixed(prec)+\")\";break;\
  159.   case 3: if(userdraw_radius[0]){ m_data = \" \"+( ( userdraw_radius[0])/(Math.PI/180) ).toFixed(prec)+\" \\u00B0 \";};break;\
  160.   case 4: if(userdraw_radius[0]){ m_data = \" \"+(userdraw_radius[0]).toFixed(prec)+\" rad \";};break;\
  161.   case 5: if( userdraw_x.length > 0 ){var L = userdraw_x.length;m_data = \" R = \"+((xmax - xmin)*(distance(x,y,userdraw_x[L-1],userdraw_y[L-1]))/xsize).toFixed(prec)+\" \"+unit_x;};break;\
  162.   default:break;\
  163.  };\
  164.  var s = parseInt(0.8*%d*(m_data.toString()).length);\
  165.  mouse_context.font = \"%dpx Arial\";\
  166.  mouse_context.fillStyle = \"rgba(%s,%f)\";\
  167.  mouse_context.clearRect(0,0,s,1.2*%d);\
  168.  mouse_context.fillText(m_data,0,%d);\
  169. };\
  170. };",type,MOUSE_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id,precision,canvas_root_id,font_size,font_size,stroke_color,stroke_opacity,font_size,font_size);
  171. }
  172.  
  173. /*
  174. Math.sin: angle in radians
  175. x1 = x*cos(a) - y*sin(a)
  176. y1 = y*cos(a) + x*sin(a)
  177. show_display = 0  nothing
  178. show_display = 1 delta X
  179. show_display = 2 delta Y
  180. show_display = 3 delta R radians
  181. show_display = 4 delta degrees
  182. show_display = 5 delta X:Y
  183.  
  184. */
  185. void add_slider_display(int precision,int font_size,char *font_color,double stroke_opacity){
  186. fprintf(js_include_file,"\n/* add_slider_display */\
  187. var slider_prec = Math.log(%d)/(Math.log(10));\
  188. function show_slider_value(value,use_slider_display){\
  189. var current_canvas = create_canvas%d(%d,xsize,ysize);\
  190. var current_context = current_canvas.getContext(\"2d\");\
  191. current_context.clearRect(0,0,xsize,ysize);\
  192. var string;\
  193. switch(use_slider_display){\
  194.  case 0: return;\
  195.  case 1: string = '\\u0394 x = '+value.toFixed(slider_prec)+' '+unit_x;break;\
  196.  case 2: string = '\\u0394 y = '+value.toFixed(slider_prec)+' '+unit_y;break;\
  197.  case 3: string = '\\u2221 = '+value.toFixed(slider_prec)+'\\u03C0 rad';break;\
  198.  case 4: string = '\\u2221 = '+(value*(180/Math.PI)).toFixed(slider_prec)+'\\u00B0';break;\
  199.  case 5: string = 'not implemented';break;\
  200.  default: string = '['+value+']';break;\
  201. };\
  202. var s = parseInt(1.2*%d*(string).length);\
  203. current_context.font = '%dpx Arial';\
  204. current_context.strokeStyle = 'rgba(%s,%.2f)';\
  205. current_context.clearRect(0,0,s,1.2*%d);\
  206. current_context.fillText(string,0,%d);};",precision,canvas_root_id,MOUSE_CANVAS,font_size,font_size,font_color,stroke_opacity,font_size,font_size);
  207. }
  208.  
  209. void add_slider(int anim){
  210. fprintf(js_include_file,"\n/* add_slider aux*/\
  211. function rotateXY(obj,angle){\
  212. if( typeof(angle) === 'undefined' ){console.log('rotateXY() angle undefined');return obj;};\
  213. var len = obj.x.length;\
  214. if( typeof(len) === 'undefined' ){obj.angle = angle;return obj;};\
  215. var cos = Math.cos(angle - obj.angle);\
  216. var sin = Math.sin(angle - obj.angle);\
  217. obj.angle = angle;\
  218. var xc,yc;\
  219. if( obj.use_rotation_center == 0 ){\
  220.  xc = obj.x[0];\
  221.  yc = obj.y[0];\
  222. }else{\
  223.  xc = obj.rotation_center[0];\
  224.  yc = obj.rotation_center[1];\
  225. };\
  226. var x,y;\
  227. for(var p = 0 ; p < len ; p++ ){\
  228.  x = obj.x[p];\
  229.  y = obj.y[p];\
  230.  obj.x[p] = (cos * (x - xc)) + (sin * (y - yc)) + xc;\
  231.  obj.y[p] = (cos * (y - yc)) - (sin * (x - xc)) + yc;\
  232. };\
  233. return obj;\
  234. };\
  235. function rotateARC(obj,angle){\
  236. obj.h[0] = angle;\
  237. obj.angle = -1*angle;\
  238. return obj;\
  239. };\
  240. function slider_show_it(XYR,dx,value,slider_id){\
  241. if(slidergroup.length != 0){\
  242.  var len = slidergroup.length;var use_xml = false;\
  243.  for(var i = 0;i < len;i++){\
  244.   use_xml = false;var obj = slidergroup[i];\
  245.   if( obj !== null ){\
  246.    if( obj.use_slider[0] != -1 ){\
  247.     var sl = obj.use_slider.length;\
  248.     for(var s = 0 ; s < sl;s++ ){\
  249.      if(obj.use_slider[s] == slider_id ){\
  250.       if( typeof(obj.type) !== 'number' ){use_xml = true;};\
  251.       switch(XYR){\
  252.        case 'X' : obj = move(obj,dx,0);dragdrop_reply[obj.object_cnt].x = obj.x;break;\
  253.        case 'Y' : obj = move(obj,0,dx);dragdrop_reply[obj.object_cnt].y = obj.y;break;\
  254.        case 'R' : if(obj.type == 17 ){obj = rotateARC(obj,value);}else{obj = rotateXY(obj,value);};dragdrop_reply[obj.object_cnt].angle = obj.angle;break;\
  255.        default : break;\
  256.       };\
  257.      };\
  258.     };\
  259.    };\
  260.    if( use_xml ){ draw_xml(obj); }\
  261.    dragstuff.draw();dragstuff.valid = false;\
  262.   };\
  263.  };\
  264. };\
  265. return;\
  266. };\
  267. ");
  268.  
  269. if(anim == 0){fprintf(js_include_file,"\n/* add_slider */\
  270. if( typeof(unit_x) === 'undefined' ){var unit_x = ' ';};\
  271. if( typeof(unit_y) === 'undefined' ){var unit_y = ' ';};\
  272. function slider(XYR,text,slider_id ,width,height,linewidth,fillcolor,strokecolor,opacity,min,max,fontfamily,display){\
  273. if( wims_status == \"done\" ){return;};var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  274. var xcenter = 0.5*width;var rcenter = 0.5*width;fillcolor = 'rgba('+fillcolor+','+opacity[0]+')' || 'rgba(200,200,0,0.2)';\
  275. strokecolor = 'rgba('+strokecolor+','+opacity[1]+')';var title = document.createElement('SPAN');title.innerHTML = text;\
  276. var br = document.createElement('BR');tooltip_div.appendChild(br);tooltip_div.appendChild(title);\
  277. var slider_canvas = document.createElement('canvas');slider_canvas.id = 'canvas'+slider_id;tooltip_div.appendChild(slider_canvas);\
  278. slider_canvas.width = width;slider_canvas.height = height;var slider_ctx = slider_canvas.getContext(\"2d\");\
  279. slider_ctx.font = fontfamily;slider_ctx.strokeStyle = strokecolor;\
  280. slider_ctx.fillStyle = fillcolor;slider_ctx.lineWidth = linewidth;slider_ctx.save();\
  281. slider_ctx.beginPath();slider_ctx.moveTo(0,height-10);slider_ctx.lineTo(width,height-10);\
  282. slider_ctx.moveTo(xcenter-10,10);slider_ctx.lineTo(xcenter+10,10);slider_ctx.lineTo(xcenter,height-10);\
  283. slider_ctx.lineTo(xcenter-10,10);slider_ctx.closePath();slider_ctx.stroke();slider_ctx.fill();\
  284. slider_canvas.addEventListener( 'mousemove' ,slide_me,false);\
  285. slider_canvas.addEventListener( 'mouseup' ,stop_slide_me,false);\
  286. slider_canvas.addEventListener( 'mousedown' ,start_slide_me,false);\
  287. slider_canvas.addEventListener( 'touchstart', function(e){ e.preventDefault();start_slide_me(e.changedTouches[0]);},false);\
  288. slider_canvas.addEventListener( 'touchend',   function(e){ e.preventDefault();stop_slide_me(e.changedTouches[0]);},false);\
  289. slider_canvas.addEventListener( 'touchmove' ,function(e){ e.preventDefault();slide_me(e.changedTouches[0]);},false);\
  290. var slider_active = false;var value;\
  291. function stop_slide_me(evt){slider_active = false;};\
  292. function start_slide_me(evt){slider_active = true;};\
  293. function slide_me(evt){\
  294.  if( slider_active == false ){return;};\
  295.  var canvas_rect = slider_canvas.getBoundingClientRect();\
  296.  slider_ctx.clearRect(0,0,width,height);\
  297.  var px = parseInt(evt.clientX - canvas_rect.left);\
  298.  slider_ctx.beginPath();slider_ctx.moveTo(0,height-10);slider_ctx.lineTo(width,height-10);\
  299.  slider_ctx.moveTo(px-10,10);slider_ctx.lineTo(px+10,10);slider_ctx.lineTo(px,height-10);\
  300.  slider_ctx.lineTo(px-10,10);slider_ctx.closePath();slider_ctx.stroke();slider_ctx.fill();\
  301.  value = (px - rcenter)/width*(max - min);\
  302.  if( display > 0 ){show_slider_value(value,display);};\
  303.  var dx = px - xcenter;xcenter = px;\
  304.  slider_show_it(XYR,dx,value,slider_id);\
  305. };\
  306. };",canvas_root_id);
  307. }
  308. if( anim == 1){
  309. fprintf(js_include_file,"\n/* add_anim_slider */\
  310. function animslider(XYR,text,slider_id ,width,height,linewidth,fillcolor,strokecolor,opacity,min,max,fontfamily,display)\
  311. {\
  312. document.addEventListener('readystatechange',function(event){\
  313.  if(event.target.readyState === 'complete'){\
  314.   var value= 0;\
  315.   var timer = setInterval(function(){\
  316.    value++;slider_show_it(XYR,value,value,slider_id);\
  317.    if( value > width ){clearInterval( timer );}\
  318.   },240);\
  319.  };\
  320. },false);\
  321. };");
  322. }
  323. }
  324. /*      dragdrop_reply[obj.object_cnt] = obj;
  325. */
  326.  
  327. /*
  328. adds inputfield for x-value: returns the js-calculated y-value after click on 'OK' button
  329. draws a non-configurable crosshair on this calculated location
  330. */
  331. void add_calc_y(char *jsmath,int font_size,char *css_class){
  332. fprintf(js_include_file,"\n/* add_calc_y */\
  333. use_jsmath=1;\
  334. function add_calc_y(){\
  335. if( wims_status == \"done\" ){return;};\
  336. var fun = to_js_math(\"%s\");if(fun == null){return;};\
  337. function eval_jsmath(x){return parseFloat(eval(fun));};\
  338. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  339. var calc_div = document.createElement('div');\
  340. calc_div.id = \"calc_div\";\
  341. tooltip_div.appendChild(calc_div);\
  342. var label_x = \"x\";var label_y = \"y\";\
  343. if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
  344. if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
  345. calc_div.innerHTML=\"<br /><span style='font-style:italic;font-size:%dpx'>\"+label_x+\" : <input type='text' size='4' value='' id='calc_input_x' style='%s' />&nbsp;\"+ label_y+\" : <input type='text' size='5' value='' id='calc_output_y' style='%s' readonly /><input id='calc_button' type='button' value='OK' onclick=''  style='color:red;background-color:lightblue;' /></span> \";\
  346. var calc_button = document.getElementById(\"calc_button\");\
  347. calc_button.addEventListener(\"mousedown\",show_it,false);\
  348. calc_button.addEventListener(\"touchstart\", function(e){ e.preventDefault();show_it(e.changedTouches[0]);},false);\
  349. function show_it(){\
  350.  var x_value=document.getElementById(\"calc_input_x\").value;\
  351.  var y_value = eval_jsmath(x_value);\
  352.  document.getElementById(\"calc_output_y\").value = y_value;\
  353.  if(isNaN(y_value)){return;};\
  354.  var canvas = create_canvas%d(123,xsize,ysize);\
  355.  var ctx = canvas.getContext(\"2d\");\
  356.  draw_crosshairs(ctx,[x2px(x_value)],[y2px(y_value)],1,5,\"#000000\",1,0,0,0,[0,0]);return;\
  357. };\
  358. };\
  359. ;add_calc_y();",jsmath,canvas_root_id,font_size,css_class,css_class,canvas_root_id);
  360. }
  361. /*
  362.  x-value of the mouse will be used to calculate via javascript the corresponding y-value using the verbatim js-math function
  363.  a configurable crosshair and vertical/horizontal crosshair lines will be drawn
  364.  function is called "use_mouse_coordinates() and thus can not be combined with command 'mouse'
  365. */
  366. void add_trace_js_mouse(int canvas_cnt, char *stroke_color, char *jsmath,
  367.   int font_size, double stroke_opacity, int line_width,
  368.   int crosshair_size,char *css_class){
  369. fprintf(js_include_file,"\n/* add_trace_jsmath */\
  370. use_jsmath=1;\
  371. function use_trace_jsmath(){\
  372. if( wims_status == \"done\" ){return;};\
  373. var label_x = \"x\";var label_y = \"y\";\
  374. if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
  375. if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
  376. var trace_canvas = create_canvas%d(%d,xsize,ysize);\
  377. var trace_context = trace_canvas.getContext(\"2d\");\
  378. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  379. var trace_div = document.createElement('div');\
  380. trace_div.id = \"trace_div\";\
  381. tooltip_div.appendChild(trace_div);\
  382. trace_div.innerHTML = \"<br /><span style='font-style:italic;font-size:%dpx'>\"+label_x+\" : <input type='text' size='4' value='' id='trace_input_x' style='%s' />\"+label_y+\" : <input type='text' size='5' value='' id='trace_input_y' style='%s' readonly /></span> \";\
  383. canvas_div.addEventListener(\"mousemove\",trace,false);\
  384. canvas_div.addEventListener(\"touchmove\",function(e){ e.preventDefault();trace(e.changedTouches[0]);},false);\
  385. var fun = to_js_math(\"%s\");if(fun == null){return;};\
  386. function eval_jsmath(x){return parseFloat(eval(fun));};\
  387. function trace(evt){\
  388.  var mouse = getMouse(evt,trace_canvas);\
  389.  var x_px = mouse.x;\
  390.  var x = px2x(x_px);\
  391.  var y = eval_jsmath(x);\
  392.  if(isNaN(y)){return;};\
  393.  var y_px = y2px(y);\
  394.  trace_context.clearRect(0,0,xsize,ysize);\
  395.  draw_crosshairs(trace_context,[x_px],[y_px],%d,%d,\"%s\",%f,0,0,0,[0,0]);\
  396.  document.getElementById(\"trace_input_x\").value = x;\
  397.  document.getElementById(\"trace_input_y\").value = y;\
  398. };\
  399. return;\
  400. };use_trace_jsmath();",canvas_root_id,canvas_cnt,canvas_root_id,font_size,css_class,css_class,jsmath,line_width,crosshair_size,stroke_color,stroke_opacity);
  401. }
  402.  
  403. /*
  404. add a table with 2 textarea's labeled 'x' 'y' ( or 'xlabel' 'ylabel' if defined)
  405. add two buttons: OK and NOK (OK draws; NOK will delete last item pair from userdraw_x / userdraw_y array's
  406. */
  407. void add_textarea_xy(char *css_class){
  408. fprintf(js_include_file,"\n/* add_textarea_xy */\
  409. function add_textarea_xy(){\
  410. if( wims_status == \"done\" ){return;};\
  411. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  412. var textarea_div = document.createElement('div');\
  413. textarea_div.id = \"textarea_div\";\
  414. tooltip_div.appendChild(textarea_div);\
  415. var label_x = \"x\";var label_y = \"y\";\
  416. if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
  417. if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
  418. textarea_div.innerHTML=\"\
  419. <table style=\'border:1px solid black;background-color:#ffffa0\' >\
  420. <tr>\
  421. <td><input id='textarea_ok_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/></td>\
  422. <td><input id='textarea_nok_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></td>\
  423. </tr>\
  424. <tr>\
  425. <td><em>\"+label_x+\"</em></td>\
  426. <td><em>\"+label_y+\"</em></td>\
  427. </tr>\
  428. <tr>\
  429. <td><textarea rows='5' cols='2' id='userinput_x' style='%s' ></textarea></td>\
  430. <td><textarea rows='5' cols='2' id='userinput_y' style='%s' ></textarea></td>\
  431. </tr>\
  432. </table>\";\
  433. var textarea_ok_button = document.getElementById(\"textarea_ok_button\");\
  434. var textarea_nok_button = document.getElementById(\"textarea_nok_button\");\
  435. textarea_ok_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
  436. textarea_nok_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
  437. return;\
  438. };add_textarea_xy();",canvas_root_id,css_class,css_class);
  439. }
  440.  
  441. /*
  442.  
  443. */
  444. void add_setlimits(int font_size,char *css_class){
  445. fprintf(js_include_file,"\n/* add_setlimits */\
  446. function use_setlimits(){\
  447. if( wims_status == \"done\" ){return;};\
  448. var label_x = \"x\";var label_y = \"y\";\
  449. if( typeof(xaxislabel) !== 'undefined' ){label_x = xaxislabel;}\
  450. if( typeof(yaxislabel) !== 'undefined' ){label_y = yaxislabel;}\
  451. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  452. var setlim_div = document.createElement('div');\
  453. setlim_div.id = \"setlim_div\";\
  454. tooltip_div.appendChild(setlim_div);\
  455. setlim_div.innerHTML=\"<br /><span style='font-style:italic;font-size:%dpx'>\"+label_x+\"min = <input type='text' size='4' value='\"+xmin+\"' id='userinput_xmin' style='%s' /> \"+label_x+\"max = <input type='text' size='4' value='\"+xmax+\"' id='userinput_xmax' style='%s' /><br />\"+label_y+\"min = <input type='text' size='4' value='\"+ymin+\"' id='userinput_ymin' style='%s' /> \"+label_y+\"max = <input type='text' size='4' value='\"+ymax+\"' id='userinput_ymax' style='%s' /><br /><input id='set_limits' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;' />\";\
  456. var setlimit_button = document.getElementById(\"set_limits\");\
  457. function set_limits(e){\
  458. xmin = safe_eval(document.getElementById('userinput_xmin').value);\
  459. xmax = safe_eval(document.getElementById('userinput_xmax').value);\
  460. ymin = safe_eval(document.getElementById('userinput_ymin').value);\
  461. ymax = safe_eval(document.getElementById('userinput_ymax').value);\
  462. if(xmin > xmax || ymin > ymax){alert(\"your limits are not correct...\");return;}\
  463. try{redraw_jsplot();}catch(e){console.log('redraw_jsplot failed:'+e);};\
  464. try{redraw_grid();}catch(e){console.log('redraw_grid failed:'+e);};\
  465. try{dragstuff.Zoom(xmin,xmax,ymin,ymax)}catch(e){console.log('zooming dragstuff failed:'+e);};return;};\
  466. setlimit_button.addEventListener(\"mousedown\",function(e){set_limits();},false);\
  467. };use_setlimits();",canvas_root_id,font_size,css_class,css_class,css_class,css_class);
  468. }
  469.  
  470. void add_input_jsfunction(char *css_class,char *input_label,int input_cnt,char *stroke_color,float stroke_opacity,int line_width,int use_dashed,int dashtype0,int dashtype1,int font_size){
  471. fprintf(js_include_file,"\n/* add_input_jsfunction */\
  472. function clear_jsfunction(canvas_plot_id,input_field){\
  473. try{\
  474.  var canvas_plot = document.getElementById(\"wims_canvas%d\"+canvas_plot_id);\
  475.  var canvas_plot_ctx = canvas_plot.getContext(\"2d\");\
  476.  if( confirm(\"clear function plot?\") ){\
  477.   canvas_plot_ctx.clearRect(0,0,xsize,ysize);\
  478.   document.getElementById(input_field).value = \"\";\
  479.  };\
  480.  return;\
  481. }catch(e){alert(e+\"nothing to remove...\");};\
  482. return;\
  483. };\
  484. function add_input_jsfunction(input_cnt,css_class,input_label,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1){\
  485. var canvas_plot_id = %d+input_cnt;\
  486. var label = input_label[input_cnt];\
  487. if( typeof(multistrokecolors) === 'object'){ stroke_color = multistrokecolors[input_cnt];};\
  488. var input_field = \"canvas_input\"+input_cnt;\
  489. var update_button_id = \"update_button\"+input_cnt;\
  490. var delete_button_id = \"delete_button\"+input_cnt;\
  491. if( wims_status == \"done\" ){return;};\
  492. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  493. var input_jsfunction_div = document.createElement('div');\
  494. input_jsfunction_div.id = \"input_jsfunction_div\"+input_cnt;\
  495. tooltip_div.appendChild(input_jsfunction_div);\
  496. input_jsfunction_div.innerHTML+=\"<br /><span style='font-style:italic;font-size:%dpx;color:rgb(\"+stroke_color+\")'><b>\"+label+\" <input type='text' size='16' value='' id='\"+input_field+\"' style='\"+css_class+\"' /></b><input id='\"+update_button_id+\"' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/><input id='\"+delete_button_id+\"' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></span> \";\
  497. var update_button = document.getElementById(update_button_id);\
  498. var delete_button = document.getElementById(delete_button_id);\
  499. update_button.addEventListener(\"mousedown\",function(e){jsplot(canvas_plot_id,[rawmath(document.getElementById(input_field).value)],[line_width],[stroke_color],[stroke_opacity],[use_dashed],dashtype0,dashtype1,0,0,300,0,1);return;},false);\
  500. delete_button.addEventListener(\"mousedown\",function(e){clear_jsfunction(canvas_plot_id,input_field);return;},false);\
  501. };\
  502. add_input_jsfunction(%d,\"%s\",%s,%d,\"%s\",%.2f,%d,%d,%d);",canvas_root_id,USERDRAW_JSPLOT,canvas_root_id,font_size,input_cnt,css_class,input_label,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);
  503. }
  504.  
  505.  
  506. /*
  507. adds 2 inputfields (x:y) and 'ok' | 'nok' button
  508. these are used for user drawing with inputfields...
  509. function update_me(){\
  510.  var x = safe_eval(document.getElementById('userinput_x').value);\
  511.  var y = safe_eval(document.getElementById('userinput_y').value);\
  512.  userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
  513.  return;\
  514. };\
  515. */
  516.  
  517. void add_input_xy(int font_size,char *css_class){
  518. fprintf(js_include_file,"\n/* add_input_xy */\
  519. function add_input_xy(){\
  520. if( wims_status == \"done\" ){return;};\
  521. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  522. var input_xy_div = document.createElement('div');\
  523. input_xy_div.id = \"input_xy_div\";\
  524. tooltip_div.appendChild(input_xy_div);\
  525. var label_x = \"x\";var label_y = \"y\";\
  526. input_xy_div.innerHTML=\"<br /><span style='font-style:italic;font-size:%dpx'><b>( <input type='text' size='5' value='' id='userinput_x' style='%s' /> : <input type='text' size='5' value='' id='userinput_y' style='%s' /> )</b><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> \";\
  527. var update_button = document.getElementById(\"update_button\");\
  528. var delete_button = document.getElementById(\"delete_button\");\
  529. update_button.addEventListener(\"mousedown\",function(e){update_me();redraw_userdraw();return;},false);\
  530. delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
  531. };add_input_xy();",canvas_root_id,font_size,css_class,css_class);
  532. }
  533.  
  534. /* adds 4 inputfields (x1:y1) --- (x2:y2) and 'ok' + 'nok' button */
  535. void add_input_x1y1x2y2(int font_size,char *css_class){
  536. fprintf(js_include_file,"\n/* add_input_x1y1x2y2 */\
  537. function add_input_x1y1x2y2(){\
  538. if( wims_status == \"done\" ){return;};\
  539. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  540. var input_x1y1x2y2_div = document.createElement('div');\
  541. input_x1y1x2y2_div.id = \"input_x1y1x2y2_div\";\
  542. tooltip_div.appendChild(input_x1y1x2y2_div);\
  543. input_x1y1x2y2_div.innerHTML=\"<br /><span style='font-size:%dpx'><b>( <input type='text' size='5' value='' id='userinput_x1' style='%s' /> : <input type='text' size='5' value='' id='userinput_y1' style='%s' /> ) ----- ( <input type='text' size='5' value='' id='userinput_x2' style='%s' /> : <input type='text' size='5' value='' id='userinput_y2' style='%s'/> )</b><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> \";\
  544. var update_button = document.getElementById(\"update_button\");\
  545. var delete_button = document.getElementById(\"delete_button\");\
  546. update_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
  547. delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
  548. };add_input_x1y1x2y2();",canvas_root_id,font_size,css_class,css_class,css_class,css_class);
  549. }
  550.  
  551. /* adds 3 inputfields Center (x:y) Radius r and 'ok'+'nok' buttons */
  552. void add_input_xyr(int font_size,char *css_class){
  553. fprintf(js_include_file,"\n/* add_input_xyr */\
  554. function add_input_xyr(){\
  555. if( wims_status == \"done\" ){return;};\
  556. var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  557. var input_xyr_div = document.createElement('div');\
  558. input_xyr_div.id = \"input_xyr_div\";\
  559. tooltip_div.appendChild(input_xyr_div);\
  560. input_xyr_div.innerHTML=\"<br /><span style='font-style:italic;font-size:%dpx'><b>Center : ( <input type='text' size='5' value='' id='userinput_x' style='%s' /> : <input type='text' size='5' value='' id='userinput_y' style='%s' /> ) Radius : <input type='text' size='5' value='' id='userinput_r' style='%s' /></b><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> \";\
  561. var update_button = document.getElementById(\"update_button\");\
  562. var delete_button = document.getElementById(\"delete_button\");\
  563. update_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
  564. delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
  565. };add_input_xyr();",canvas_root_id,font_size,css_class,css_class,css_class);
  566. }
  567.  
  568. /* THESE JS-FUNCTIONS COULD BE MADE LESS COPY & PASTE "PROGRAMMING" */
  569.  
  570. /* draw circle(s) / point(s) via 3 inputfields */
  571. void add_input_circle(int type,int num){
  572. /*
  573. type = 0 : a point ...radius is fixed
  574. type = 1 : a circle ... read inputfield userinput_r
  575. num = 1 : a single point / circle
  576. num = 2 : multiple points / circles
  577. */
  578. fprintf(js_include_file,"\n/* add_input_circle */\
  579. function user_redraw(t){\
  580. var type = %d;\
  581. var num = %d;\
  582. var lu = userdraw_x.length;\
  583. if( t == -1 && lu > 0){userdraw_x.splice(lu-1,1);userdraw_y.splice(lu-1,1);if(type == 1){userdraw_radius.splice(lu-1,1);};context_userdraw.clearRect(0,0,xsize,ysize);draw_circles(context_userdraw,userdraw_x,userdraw_y,userdraw_radius,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);xy_cnt = userdraw_x.length;return;};\
  584. var add_x = safe_eval( document.getElementById(\"userinput_x\").value );\
  585. var add_y = safe_eval( document.getElementById(\"userinput_y\").value );\
  586. if( add_x != null && add_y != null ){if( type == 1 ){var add_r = safe_eval( document.getElementById(\"userinput_r\").value );if( add_r == null ){alert(\"illegal radius input \");return;};if( num == 1 ){userdraw_radius[0] = parseInt(Math.abs(xsize*(add_r)/(xmax - xmin)));}else{userdraw_radius.push( parseInt(Math.abs(xsize*(add_r)/(xmax - xmin))) );};}else{userdraw_radius[lu] = userdraw_radius[0];};if( num == 1 ){userdraw_x[0] = x2px(add_x);userdraw_y[0] = y2px(add_y);xy_cnt=1;}else{userdraw_x.push(x2px(add_x));userdraw_y.push(y2px(add_y));xy_cnt = userdraw_x.length;};context_userdraw.clearRect(0,0,xsize,ysize);draw_circles(context_userdraw,userdraw_x,userdraw_y,userdraw_radius,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);};\
  587. return;\
  588. };",type,num);
  589. }
  590. /* draw crosshairs via inputfields x/y */
  591. void add_input_crosshair(int num){
  592. fprintf(js_include_file,"\n/* add_input_crosshair */\
  593. function user_redraw(t){\
  594. var lu = userdraw_x.length;\
  595. if( t == -1 && lu > 0){\
  596.  userdraw_x.splice(lu-1,1);\
  597.  userdraw_y.splice(lu-1,1);\
  598.  context_userdraw.clearRect(0,0,xsize,ysize);\
  599.  draw_crosshairs(context_userdraw,userdraw_x,userdraw_y,line_width,crosshair_size,stroke_color,stroke_opacity,0,0,0,[0,0]);\
  600.  return;\
  601. };\
  602. var add_x = safe_eval( document.getElementById(\"userinput_x\").value );\
  603. var add_y = safe_eval( document.getElementById(\"userinput_y\").value );\
  604. if( add_x != null && add_y != null ){\
  605.  if( %d == 1 ){\
  606.   userdraw_x[0] = x2px(add_x);\
  607.   userdraw_y[0] = y2px(add_y);\
  608.  } else {\
  609.    userdraw_x[lu] = x2px(add_x);\
  610.    userdraw_y[lu] = y2px(add_y);\
  611.    xy_cnt++;\
  612.  };\
  613.  context_userdraw.clearRect(0,0,xsize,ysize);\
  614.  draw_crosshairs(context_userdraw,userdraw_x,userdraw_y,line_width,crosshair_size,stroke_color,stroke_opacity,0,0,0,[0,0]);\
  615. };\
  616. return;\
  617. };",num);
  618. }
  619.  
  620. /* draw arrows via inputfields x/y */
  621. void add_input_arrow(int num){
  622. fprintf(js_include_file,"\n/* add_input_arrow */\
  623. function user_redraw(t){\
  624. var lu = userdraw_x.length;\
  625. if( t == -1 && lu > 1 ){\
  626.  userdraw_x.splice(lu-2,2);\
  627.  userdraw_y.splice(lu-2,2);\
  628.  context_userdraw.clearRect(0,0,xsize,ysize);\
  629.  draw_arrows(context_userdraw,userdraw_x,userdraw_y,arrow_head,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,type,use_rotate,angle,0,[1,0,0,1,0,0]);\
  630.  return;\
  631. };\
  632. var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
  633. var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
  634. var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
  635. var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
  636. if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
  637.  if( %d == 2 ){\
  638.    var s = userdraw_x.length;\
  639.    userdraw_x[lu] = x2px(add_x1);\
  640.    userdraw_y[lu] = y2px(add_y1);\
  641.    userdraw_x[lu+1] = x2px(add_x2);\
  642.    userdraw_y[lu+1] = y2px(add_y2);\
  643.  } else {\
  644.   userdraw_x[0] = x2px(add_x1);\
  645.   userdraw_y[0] = y2px(add_y1);\
  646.   userdraw_x[1] = x2px(add_x2);\
  647.   userdraw_y[1] = y2px(add_y2);\
  648.  };\
  649.  context_userdraw.clearRect(0,0,xsize,ysize);\
  650.  draw_arrows(context_userdraw,userdraw_x,userdraw_y,arrow_head,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,type,use_rotate,angle,0,[1,0,0,1,0,0]);\
  651. };\
  652. return;\
  653. };",num);
  654. }
  655.  
  656. /* draw line via inputfields x/y */
  657. void add_input_line(int num){
  658. fprintf(js_include_file,"\n/* line via inputfields  */\
  659. function user_redraw(t){\
  660. var lu = userdraw_x.length;\
  661. if( t == -1 && lu > 1){\
  662.  userdraw_x.splice(lu-2,2);\
  663.  userdraw_y.splice(lu-2,2);\
  664.  context_userdraw.clearRect(0,0,xsize,ysize);\
  665.  draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,1,0,0);\
  666.  return;\
  667. };\
  668. var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
  669. var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
  670. var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
  671. var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
  672. if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
  673.  if( %d == 2 ){\
  674.    userdraw_x[lu] = x2px(add_x1);\
  675.    userdraw_y[lu] = y2px(add_y1);\
  676.    userdraw_x[lu+1] = x2px(add_x2);\
  677.    userdraw_y[lu+1] = y2px(add_y2);\
  678.  } else {\
  679.   userdraw_x[0] = x2px(add_x1);\
  680.   userdraw_y[0] = y2px(add_y1);\
  681.   userdraw_x[1] = x2px(add_x2);\
  682.   userdraw_y[1] = y2px(add_y2);\
  683.  };\
  684.  context_userdraw.clearRect(0,0,xsize,ysize);\
  685.  draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,1,0,0);\
  686. };\
  687. return;\
  688. };",num);
  689. }
  690.  
  691.  
  692. /* draw polyline via inputfields x/y */
  693. void add_input_polyline(){
  694. fprintf(js_include_file,"\n/* polyline_segment via inputfields */\
  695. function user_redraw(t){\
  696. var lu = userdraw_x.length;\
  697. cnt = 1;\
  698. if( t == -1 && lu > 0){\
  699.  userdraw_x.splice(lu-1,1);\
  700.  userdraw_y.splice(lu-1,1);\
  701.  context_userdraw.clearRect(0,0,xsize,ysize);\
  702.  draw_polyline(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
  703.  return;\
  704. };\
  705. var add_x = safe_eval( document.getElementById(\"userinput_x\").value );\
  706. var add_y = safe_eval( document.getElementById(\"userinput_y\").value );\
  707. if(add_x != null && add_y != null ){\
  708.  userdraw_x.push(x2px(add_x));\
  709.  userdraw_y.push(y2px(add_y));\
  710.  context_userdraw.clearRect(0,0,xsize,ysize);\
  711.  draw_polyline(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
  712. };\
  713. return;\
  714. };");
  715. }
  716. /* draw segment(s) via inputfields x/y */
  717. void add_input_segment(int num){
  718. fprintf(js_include_file,"\n/* add_input_segment */\
  719. function user_redraw(t){\
  720. var lu = userdraw_x.length;\
  721. if( t == -1 && lu > 1){\
  722.  userdraw_x.splice(lu-2,2);\
  723.  userdraw_y.splice(lu-2,2);\
  724.  context_userdraw.clearRect(0,0,xsize,ysize);\
  725.  draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
  726.  return;\
  727. };\
  728. var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
  729. var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
  730. var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
  731. var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
  732. if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
  733.  if( %d == 2 ){\
  734.    var s = userdraw_x.length;\
  735.    userdraw_x[s] = x2px(add_x1);\
  736.    userdraw_y[s] = y2px(add_y1);\
  737.    userdraw_x[s+1] = x2px(add_x2);\
  738.    userdraw_y[s+1] = y2px(add_y2);\
  739.  } else {\
  740.   userdraw_x[0] = x2px(add_x1);\
  741.   userdraw_y[0] = y2px(add_y1);\
  742.   userdraw_x[1] = x2px(add_x2);\
  743.   userdraw_y[1] = y2px(add_y2);\
  744.  };\
  745.  context_userdraw.clearRect(0,0,xsize,ysize);\
  746.  draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
  747. };\
  748. return;\
  749. };",num);
  750. }
  751.  
  752. /* draw demilines(s) via inputfields x/y */
  753. void add_input_demiline(int num){
  754. fprintf(js_include_file,"\n/* add_input_segment */\
  755. function user_redraw(t){\
  756. var lu = userdraw_x.length;\
  757. if( t == -1 && lu > 1){\
  758.  userdraw_x.splice(lu-2,2);\
  759.  userdraw_y.splice(lu-2,2);\
  760.  context_userdraw.clearRect(0,0,xsize,ysize);\
  761.  draw_demilines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
  762.  return;\
  763. };\
  764. var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
  765. var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
  766. var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
  767. var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
  768. if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
  769.  if( %d == 2 ){\
  770.    var s = userdraw_x.length;\
  771.    userdraw_x[s] = x2px(add_x1);\
  772.    userdraw_y[s] = y2px(add_y1);\
  773.    userdraw_x[s+1] = x2px(add_x2);\
  774.    userdraw_y[s+1] = y2px(add_y2);\
  775.  } else {\
  776.   userdraw_x[0] = x2px(add_x1);\
  777.   userdraw_y[0] = y2px(add_y1);\
  778.   userdraw_x[1] = x2px(add_x2);\
  779.   userdraw_y[1] = y2px(add_y2);\
  780.  };\
  781.  context_userdraw.clearRect(0,0,xsize,ysize);\
  782.  draw_demilines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\
  783. };\
  784. return;\
  785. };",num);
  786. }
  787.  
  788. void add_clear_button(char *css_class,char *button_text){
  789. /* 25/11/2014 added clearing of reply array
  790. all members will be set to 0 eg reply[0] = 0 , reply[1] = 0 ...
  791. hope this does not interfere with existing work...
  792. */
  793. /*
  794. 5/2016 changed  to 'setAttribute()' because of trouble on Chromium/Safari/IE
  795. 10/2016 corrected contex-reset-flaw when using "userdraw text,color" and added inputs to the things we can remove
  796. 7/2017 added 'userdraw clickfill,color' to removable things...one user_filling per click
  797. */
  798. fprintf(js_include_file,"\n/* add clear button */\
  799. clear_draw_area%d = function(){\
  800. if(typeof(fill_canvas_no) === 'number'){\
  801.  var chk = document.getElementById('wims_canvas%d'+fill_canvas_no);\
  802.  if( chk ){\
  803.   var fill_ctx = chk.getContext(\"2d\");fill_ctx.clearRect(0,0,xsize,ysize);\
  804.   fill_canvas_no--;userdraw_x.splice(p,1);userdraw_y.splice(p,1);userdraw_radius.splice(p,1);\
  805.   return;\
  806.  };\
  807. };\
  808. if( typeof(context_userdraw) === 'object' ){\
  809.  while( document.getElementById(canvas_div.lastChild.id).tagName == 'DIV'){\
  810.   document.getElementById(canvas_div.lastChild.id).innerHTML = null;\
  811.   canvas_div.removeChild(document.getElementById(canvas_div.lastChild.id));\
  812.  };\
  813.  context_userdraw.clearRect(0,0,xsize,ysize);\
  814.  if( typeof(userdraw_text) !== 'undefined'){ userdraw_text = []; };\
  815.  if( document.getElementById(\"canvas_input0\") ){\
  816.   var p = 0;var inp;\
  817.   while( document.getElementById(\"canvas_input\"+p) ){\
  818.    inp = document.getElementById(\"canvas_input\"+p);\
  819.    canvas_div.removeChild(inp);\
  820.    p++;\
  821.   };\
  822.   input_cnt = 0;start_input_cnt = 0; \
  823.  };\
  824.  userdraw_x = [];userdraw_y = [];userdraw_radius = [];xy_cnt = 0;\
  825. };\
  826. if( typeof(external_ctx) === 'object'){\
  827.  external_ctx.clearRect(0,0,xsize,ysize);\
  828.  for(var p = 0 ; p < userdraw_x.length; p++){\
  829.   userdraw_x[p] = null;userdraw_y[p] = null;\
  830.  };\
  831. };\
  832. return;\
  833. };\
  834. function add_clear_button(){\
  835. var tooltip_placeholder_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  836. var button = document.createElement('input');\
  837. button.setAttribute(\"type\" , \"button\");\
  838. button.setAttribute(\"id\" , \"clearbutton%d\");\
  839. button.setAttribute(\"class\" , \"%s\");\
  840. button.setAttribute(\"value\" , \"%s\");\
  841. button.setAttribute(\"onclick\",\"clear_draw_area%d()\");\
  842. tooltip_placeholder_div.appendChild(button);\
  843. };\
  844. add_clear_button();",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,css_class,button_text,canvas_root_id);
  845. }
  846.  
  847. void add_color_palette(char *css_class){
  848. fprintf(js_include_file,"\n/* add color palette */\
  849. function add_color_palette(){\
  850. var tooltip_placeholder_div = document.getElementById(\"tooltip_placeholder_div%d\");\
  851. var clen = palettecolors.length;\
  852. for( var p = 0 ; p < clen ; p++ ){\
  853.  var button = document.createElement('input');\
  854.  button.setAttribute('type', 'button');\
  855.  button.setAttribute('value', '  ');\
  856.  button.setAttribute('id',palettecolors[p]);\
  857.  button.setAttribute('style', \"%s\");\
  858.  button.setAttribute('style','background-color:rgb('+palettecolors[p]+')');\
  859.  button.setAttribute(\"backgroundColor\",palettecolors[p]);\
  860.  button.addEventListener('mousedown',function(e){var id = this.getAttribute('id');multifillcolors[0]=id;multifillcolors[1]=id;multifillcolors[2]=id;},false);\
  861.  tooltip_placeholder_div.appendChild(button);\
  862. };\
  863. };\
  864. add_color_palette();\
  865. ",canvas_root_id,css_class);
  866. }
  867.  
  868.  
  869. struct colors colors[]={
  870.  {"#FF0000","red","255,0,0"},
  871.  {"#00FF00","lime","0,255,0"},
  872.  {"#0000FF","blue","0,0,255"},
  873.  {"#FFA500","orange","255,165,0"},
  874.  {"#E9967A","darksalmon","233,150,122"},
  875.  {"#F0FFFF","azure","240,255,255"},
  876.  {"#CD5C5C","indianred","205,92,92"},
  877.  {"#E0FFFF","lightcyan","224,255,255"},
  878.  {"#FFE4E1","mistyrose","255,228,225"},
  879.  {"#DC143C","crimson","220,20,60"},
  880.  {"#FFC0CB","pink","255,192,203"},
  881.  {"#FFD700","gold","255,215,0"},
  882.  {"#E6E6FA","lavender","230,230,250"},
  883.  {"#808080","gray","128,128,128"},
  884.  {"#F0F8FF","aliceblue","240,248,255"},
  885.  {"#C71585","mediumvioletred","199,21,133"},
  886.  {"#FFF0F5","lavenderblush","255,240,245"},
  887.  {"#DAA520","goldenrod","218,165,32"},
  888.  {"#FFB6C1","lightpink","255,182,193"},
  889.  {"#00FFFF","aqua","0,255,255"},
  890.  {"#FF69B4","hotpink","255,105,180"},
  891.  {"#00FFFF","cyan","0,255,255"},
  892.  {"#FF1493","deeppink","255,20,147"},
  893.  {"#7FFFD4","aquamarine","127,255,212"},
  894.  {"#FA8072","salmon","250,128,114"},
  895.  {"#DEB887","burlywood","222,184,135"},
  896.  {"#DB7093","palevioletred","219,112,147"},
  897.  {"#D2B48C","tan","210,180,140"},
  898.  {"#BDB76B","darkkhaki","189,183,107"},
  899.  {"#B22222","firebrick","178,34,34"},
  900.  {"#FF4500","orangered","255,69,0"},
  901.  {"#8B4513","saddlebrown","139,69,19"},
  902.  {"#FF8C00","darkorange","255,140,0"},
  903.  {"#FFFFE0","lightyellow","255,255,224"},
  904.  {"#FFFF00","yellow","255,255,0"},
  905.  {"#FFFACD","lemonchiffon","255,250,205"},
  906.  {"#F5F5DC","beige","245,245,220"},
  907.  {"#FFEFD5","papayawhip","255,239,213"},
  908.  {"#FAFAD2","lightgoldenrodyellow","250,250,210"},
  909.  {"#FFE4B5","moccasin","255,228,181"},
  910.  {"#B8860B","darkgoldenrod","184,134,11"},
  911.  {"#FFF8DC","cornsilk","255,248,220"},
  912.  {"#FFEBCD","blanchedalmond","255,235,205"},
  913.  {"#FFE4C4","bisque","255,228,196"},
  914.  {"#FFDEAD","navajowhite","255,222,173"},
  915.  {"#F5DEB3","wheat","245,222,179"},
  916.  {"#CD853F","peru","205,133,63"},
  917.  {"#D2691E","chocolate","210,105,30"},
  918.  {"#A0522D","sienna","160,82,45"},
  919.  {"#A52A2A","brown","165,42,42"},
  920.  {"#BC8F8F","rosybrown","188,143,143"},
  921.  {"#F08080","lightcoral","240,128,128"},
  922.  {"#FFA07A","lightsalmon","255,160,122"},
  923.  {"#8B0000","darkred","139,0,0"},
  924.  {"#800000","maroon","128,0,0"},
  925.  {"#FAA460","sandybrown","250,164,96"},
  926.  {"#FF7F50","coral","255,127,80"},
  927.  {"#FF6347","tomato","255,99,71"},
  928.  {"#FFDAB9","peachpuff","255,218,185"},
  929.  {"#EEE8AA","palegoldenrod","238,232,170"},
  930.  {"#F0E68C","khaki","240,230,140"},
  931.  {"#D8BFD8","thistle","216,191,216"},
  932.  {"#DDA0DD","plum","221,160,221"},
  933.  {"#FF00FF","fuchsia","255,0,255"},
  934.  {"#FF00FF","magenta","255,0,255"},
  935.  {"#EE82EE","violet","238,130,238"},
  936.  {"#DA70D6","orchid","218,112,214"},
  937.  {"#BA55D3","mediumorchid","186,85,211"},
  938.  {"#9370DB","mediumpurple","147,112,219"},
  939.  {"#8A2BE2","blueviolet","138,43,226"},
  940.  {"#9400D3","darkviolet","148,0,211"},
  941.  {"#9932CC","darkorchid","153,50,204"},
  942.  {"#8B008B","darkmagenta","139,0,139"},
  943.  {"#800080","purple","128,0,128"},
  944.  {"#4B0082","indigo","75,0,130"},
  945.  {"#483D8B","darkslateblue","72,61,139"},
  946.  {"#6A5ACD","slateblue","106,90,205"},
  947.  {"#7B68EE","mediumslateblue","123,104,238"},
  948.  {"#98FB98","palegreen","152,251,152"},
  949.  {"#ADFF2F","greenyellow","173,255,47"},
  950.  {"#7FFF00","chartreuse","127,255,0"},
  951.  {"#7CFC00","lawngreen","124,252,0"},
  952.  {"#00FF7F","springgreen","0,255,127"},
  953.  {"#00FA9A","mediumspringgreen","0,250,154"},
  954.  {"#90EE90","lightgreen","144,238,144"},
  955.  {"#32CD32","limegreen","50,205,50"},
  956.  {"#3CB371","mediumseagreen","60,179,113"},
  957.  {"#2E8B57","seagreen","46,139,87"},
  958.  {"#228B22","forestgreen","34,139,34"},
  959.  {"#008000","green","0,128,0"},
  960.  {"#006400","darkgreen","0,100,0"},
  961.  {"#9ACD32","yellowgreen","154,205,50"},
  962.  {"#6B8E23","olivedrab","107,142,35"},
  963.  {"#808000","olive","128,128,0"},
  964.  {"#556B2F","darkolivegreen","85,107,47"},
  965.  {"#8FBC8F","darkseagreen","143,188,143"},
  966.  {"#66CDAA","mediumaquamarine","102,205,170"},
  967.  {"#20B2AA","lightseagreen","32,178,170"},
  968.  {"#008B8B","darkcyan","0,139,139"},
  969.  {"#008080","teal","0,128,128"},
  970.  {"#AFEEEE","paleturquoise","175,238,238"},
  971.  {"#40E0D0","turquoise","64,224,208"},
  972.  {"#48D1CC","mediumturquoise","72,209,204"},
  973.  {"#00CED1","darkturquoise","0,206,209"},
  974.  {"#5F9EA0","cadetblue","95,158,160"},
  975.  {"#4682B4","steelblue","70,130,180"},
  976.  {"#B0C4DE","lightsteelblue","176,196,222"},
  977.  {"#B0E0E6","powderblue","176,224,230"},
  978.  {"#ADD8E6","lightblue","173,216,230"},
  979.  {"#87CEEB","skyblue","135,206,235"},
  980.  {"#87CEFA","lightskyblue","135,206,250"},
  981.  {"#00BFFF","deepskyblue","0,191,255"},
  982.  {"#1E90FF","dodgerblue","30,144,255"},
  983.  {"#6495ED","cornflowerblue","100,149,237"},
  984.  {"#4169E1","royalblue","65,105,225"},
  985.  {"#0000CD","mediumblue","0,0,205"},
  986.  {"#00008B","darkblue","0,0,139"},
  987.  {"#000080","navy","0,0,128"},
  988.  {"#191970","midnightblue","25,25,112"},
  989.  {"#DCDCDC","gainsboro","220,220,220"},
  990.  {"#D3D3D3","lightgrey","211,211,211"},
  991.  {"#808080","grey","128,128,128"},
  992.  {"#C0C0C0","silver","192,192,192"},
  993.  {"#A9A9A9","darkgray","169,169,169"},
  994.  {"#778899","lightslategray","119,136,153"},
  995.  {"#708090","slategray","112,128,144"},
  996.  {"#696969","dimgray","105,105,105"},
  997.  {"#2F4F4F","darkslategray","47,79,79"},
  998.  {"#0a0a0a","black","10,10,10"},
  999.  {"#F5FFFA","mintcream","245,255,250"},
  1000.  {"#FFFFFF","white","255,255,255"},
  1001.  {"#F0FFF0","honeydew","240,255,240"},
  1002.  {"#F5F5F5","whitesmoke","245,245,245"},
  1003.  {"#F8F8FF","ghostwhite","248,248,255"},
  1004.  {"#FFFFF0","ivory","255,255,240"},
  1005.  {"#FFFAFA","snow","255,250,250"},
  1006.  {"#FFFAF0","floralwhite","255,250,240"},
  1007.  {"#FFF5EE","seashell","255,245,238"},
  1008.  {"#FDF5E6","oldlace","253,245,230"},
  1009.  {"#FAF0E6","linen","250,240,230"},
  1010.  {"#FAEBD7","antiquewhite","250,235,215"},
  1011.  };
  1012. int NUMBER_OF_COLORNAMES=(sizeof(colors)/sizeof(colors[0]));
  1013.  
  1014. /* 10/2016 does not react to border color !! just any border will stop the filling */
  1015. void add_js_filltoborder(int canvas_type){
  1016. fprintf(js_include_file,"\n/* command filltoborder */\
  1017. function filltoborder(xs,ys,bordercolors,colors,fill_canvas_no,use_special_filling,fill_ctx){\
  1018. document.body.style.cursor = 'wait';\
  1019. var canvas = document.getElementById(\"wims_canvas%d%d\");\
  1020. if( ! canvas ){ return; };\
  1021. document.body.style.cursor = 'wait';\
  1022. var ctx = canvas.getContext(\"2d\");\
  1023. ctx.save();\
  1024. xs = x2px(xs);\
  1025. ys = y2px(ys);\
  1026. if( xs <= 0 || xs >= xsize || ys <= 0 || ys >= ysize ){ document.body.style.cursor = 'default';return; };\
  1027. var image = ctx.getImageData(0, 0, xsize, ysize);\
  1028. var imageData = image.data;\
  1029. var pixelStack = [[xs, ys]];\
  1030. var px1;\
  1031. var newPos;\
  1032. var pixelPos;\
  1033. var found_left_border;\
  1034. var found_right_border;\
  1035. var fill_image;\
  1036. var fill_data;\
  1037. var _setPixel;\
  1038. function finish_filling(){\
  1039.  if(document.getElementById(\"wims_canvas%d\"+fill_canvas_no)){\
  1040.  console.log('dit canvas nummer '+fill_canvas_no+' bestaat al');\
  1041.  } else {\
  1042.   var fill_canvas = create_canvas%d(fill_canvas_no,xsize,ysize);\
  1043.   var fill_canvas_ctx = fill_canvas.getContext(\"2d\");\
  1044.   fill_canvas_ctx.clearRect(0,0,xsize,ysize);\
  1045.   fill_canvas_ctx.putImageData(image, 0, 0);\
  1046.  };\
  1047.  document.body.style.cursor = 'default';\
  1048.  return;\
  1049. };\
  1050. function _getPixel(pixelPos){\
  1051.  return {r:imageData[pixelPos], g:imageData[pixelPos+1], b:imageData[pixelPos+2], a:imageData[pixelPos+3]};\
  1052. };\
  1053. if( use_special_filling ){\
  1054.  fill_image = fill_ctx.getImageData(0, 0, xsize, ysize);\
  1055.  fill_data = fill_image.data;\
  1056.  _setPixel = function(pixelPos){\
  1057.   var n;var o;\
  1058.   for(var p = 0;p < 3; p++){\
  1059.    n = fill_data[pixelPos+p];\
  1060.    o = imageData[pixelPos+p];\
  1061.    if( n != o ){ imageData[pixelPos+p] = n; } else { if( o == 255 ){ o = 253;} imageData[pixelPos+p] = o+1;};\
  1062.   };\
  1063.   imageData[pixelPos+3] = 255;\
  1064.  };\
  1065. } else {\
  1066.  _setPixel = function(pixelPos){\
  1067.   imageData[pixelPos] = color.r;\
  1068.   imageData[pixelPos+1] = color.g;\
  1069.   imageData[pixelPos+2] = color.b;\
  1070.   imageData[pixelPos+3] = color.a;\
  1071.  };\
  1072. };\
  1073. function _comparePixel(px2){\
  1074.  if(px2.r === px1.r && px2.g === px1.g && px2.b === px1.b ){ return true;};\
  1075.  return false;\
  1076. };\
  1077. px1 = _getPixel(((ys * xsize) + xs) * 4);\
  1078. var color = {\
  1079.  r: parseInt(colors[0], 10),\
  1080.  g: parseInt(colors[1], 10),\
  1081.  b: parseInt(colors[2], 10),\
  1082.  a: parseInt(colors[3] || 255, 10)\
  1083. };\
  1084. var bordercolor = {\
  1085.  r: parseInt(bordercolors[0], 10),\
  1086.  g: parseInt(bordercolors[1], 10),\
  1087.  b: parseInt(bordercolors[2], 10),\
  1088.  a: parseInt(bordercolors[3] || 255, 10)\
  1089. };\
  1090. if( _comparePixel(color) ) { return true; };\
  1091. var cnt=0;\
  1092. var max=(xsize)*(ysize);\
  1093. function fill_me_up(){\
  1094. while (pixelStack.length) {\
  1095.  newPos = pixelStack.pop();\
  1096.  xs = newPos[0];ys = newPos[1];\
  1097.  pixelPos = (ys*xsize + xs) * 4;\
  1098.  while(ys >= 0 && _comparePixel(_getPixel(pixelPos))){\
  1099.   ys -= 1;\
  1100.   pixelPos -= xsize * 4;\
  1101.  };\
  1102.  pixelPos += xsize * 4;\
  1103.  ys += 1;\
  1104.  found_left_border = false;\
  1105.  found_right_border = false;\
  1106.  while( ys <= ysize-1 && _comparePixel(_getPixel(pixelPos)) ){\
  1107.   cnt++;if(cnt>max){console.log('kap er mee');finish_filling();};\
  1108.   ys += 1;\
  1109.   _setPixel(pixelPos);\
  1110.   if( xs > 1 ){\
  1111.    if( _comparePixel(_getPixel(pixelPos - 4)) ){\
  1112.    if( !found_left_border ){\
  1113.     pixelStack.push( [xs - 1, ys] );\
  1114.     found_left_border = true;\
  1115.    };\
  1116.   }\
  1117.   else if( found_left_border ){\
  1118.     found_left_border = false;\
  1119.    };\
  1120.   };\
  1121.   if( xs < xsize - 1 ){\
  1122.    if( _comparePixel(_getPixel(pixelPos + 4)) ){\
  1123.     if( !found_right_border){\
  1124.      pixelStack.push( [xs + 1, ys] );\
  1125.      found_right_border = true;\
  1126.     };\
  1127.    }\
  1128.    else if(found_right_border){\
  1129.      found_right_border = false;\
  1130.     };\
  1131.    };\
  1132.   pixelPos += xsize * 4;\
  1133.  };\
  1134. };\
  1135. };\
  1136. fill_me_up();\
  1137. finish_filling();\
  1138. return;\
  1139. };",canvas_root_id,canvas_type,canvas_root_id,canvas_root_id);
  1140. }
  1141.  
  1142. void add_js_ruler(double x,double y,double sizex,double sizey,char *font,
  1143. char *stroke_color,double stroke_opacity,char *fill_color,double fill_opacity,
  1144. int line_width,int dynamic,int use_snap){
  1145.  fprintf(js_include_file,"\n/* command ruler */\
  1146. var ruler_data = new Array(3);\
  1147. var ruler%d = function(){\
  1148.  var use_snap = %d;\
  1149.  var full = 2*Math.PI;\
  1150.  var once = true;\
  1151.  var canvas = create_canvas%d(3000,xsize,ysize);\
  1152.  var ctx = canvas.getContext(\"2d\");\
  1153.  var canvas_temp =  document.createElement(\"canvas\");\
  1154.  var size_x = xsize*(%f)/(xmax - xmin);\
  1155.  var size_y = ysize*(%f)/(ymax - ymin);\
  1156.  var dx = xsize/(xmax - xmin);\
  1157.  var dy = 0.8*ysize/(ymax - ymin);\
  1158.  canvas_temp.width = xsize;\
  1159.  canvas_temp.height = ysize;\
  1160.  var ctx_temp = canvas_temp.getContext(\"2d\");\
  1161.  var xcenter = x2px(%f);\
  1162.  var ycenter = y2px(%f);\
  1163.  var ruler_x = xcenter;\
  1164.  var ruler_y = ycenter;\
  1165.  ctx_temp.font = \"%s\";\
  1166.  ctx_temp.strokeStyle = \"rgba(%s,%f)\";\
  1167.  ctx_temp.fillStyle = \"rgba(%s,%f)\";\
  1168.  ctx_temp.lineWidth = %d;\
  1169.  ctx_temp.save();\
  1170.  if(once){\
  1171.   ctx_temp.beginPath();\
  1172.   ctx_temp.moveTo(ruler_x,ruler_y);\
  1173.   ctx_temp.lineTo(ruler_x+size_x,ruler_y);\
  1174.   ctx_temp.lineTo(ruler_x+size_x,ruler_y-size_y);\
  1175.   ctx_temp.lineTo(ruler_x,ruler_y-size_y);\
  1176.   ctx_temp.lineTo(ruler_x,ruler_y);\
  1177.   ctx_temp.closePath();\
  1178.   ctx_temp.fill();\
  1179.   ctx_temp.stroke();\
  1180.   ctx_temp.fillStyle = ctx_temp.strokeStyle;\
  1181.   var txtsize;\
  1182.   var num = 1;\
  1183.   for(var p = dx ; p < size_x ; p = p+dx){\
  1184.     txtsize = 0.5*(ctx_temp.measureText(num).width);\
  1185.     ctx_temp.fillText(num,ruler_x + p -txtsize,ruler_y - 0.9*dy);\
  1186.     num++;\
  1187.   };\
  1188.   ctx_temp.strokeStyle = \"rgba(0,0,255,0.6)\";\
  1189.   ctx_temp.lineWidth = 2;\
  1190.   for(var p = 0; p < size_x ; p = p+dx){\
  1191.    ctx_temp.beginPath();\
  1192.    ctx_temp.moveTo(ruler_x+p,ruler_y);\
  1193.    ctx_temp.lineTo(ruler_x+p,ruler_y-0.8*dy);\
  1194.    ctx_temp.closePath();\
  1195.    ctx_temp.stroke();\
  1196.   };\
  1197.   ctx_temp.strokeStyle = \"rgba(0,0,255,0.6)\";\
  1198.   ctx_temp.lineWidth = 1;\
  1199.   for(var p = 0; p < size_x ; p = p+0.5*dx){\
  1200.    ctx_temp.beginPath();\
  1201.    ctx_temp.moveTo(ruler_x+p,ruler_y);\
  1202.    ctx_temp.lineTo(ruler_x+p,ruler_y-0.6*dy);\
  1203.    ctx_temp.closePath();\
  1204.    ctx_temp.stroke();\
  1205.   };\
  1206.   ctx_temp.strokeStyle = \"rgba(255,0,0,0.6)\";\
  1207.   ctx_temp.lineWidth = 0.5;\
  1208.   for(var p = 0; p < size_x ; p = p+0.1*dx){\
  1209.    ctx_temp.beginPath();\
  1210.    ctx_temp.moveTo(ruler_x+p,ruler_y);\
  1211.    ctx_temp.lineTo(ruler_x+p,ruler_y-0.4*dy);\
  1212.    ctx_temp.closePath();\
  1213.    ctx_temp.stroke();\
  1214.   };\
  1215.   ctx_temp.drawImage(canvas,ruler_x,ruler_y);\
  1216.   once = false;\
  1217.  }",canvas_root_id,use_snap,canvas_root_id,sizex,sizey,x,y,font,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width);
  1218.  
  1219.  if( dynamic == -1 ){
  1220.  fprintf(js_include_file,"\
  1221. ctx.drawImage(canvas_temp,0,0);\
  1222.   if(wims_status != \"done\"){\
  1223.    canvas_div.addEventListener( 'mouseup'   , ruler_stop,false);\
  1224.    canvas_div.addEventListener( 'mousedown' , ruler_start,false);\
  1225.    canvas_div.addEventListener( 'mousemove' , ruler_move,false);\
  1226.    canvas_div.addEventListener( 'touchstart', function(e){ e.preventDefault();ruler_start(e.changedTouches[0]);},false);\
  1227.    canvas_div.addEventListener( 'touchmove', function(e){ e.preventDefault();ruler_move(e.changedTouches[0]);},false);\
  1228.    canvas_div.addEventListener( 'touchend', function(e){ e.preventDefault();ruler_stop(e.changedTouches[0]);},false);\
  1229.   };\
  1230.   function ruler_stop(evt){\
  1231.    ruler_data[0] = ruler_x;\
  1232.    ruler_data[1] = ruler_y;\
  1233.    ruler_data[2] = angle;\
  1234.    return;\
  1235.   };\
  1236.   var ruler_object_cnt = 0;\
  1237.   function ruler_start(evt){\
  1238.    var mouse = getMouse(evt,canvas);\
  1239.    var mouse_y = mouse.y;\
  1240.    if( mouse_y > ysize - 20 ){return;};\
  1241.    var mouse_x = mouse.x;\
  1242.    if( mouse_x > ruler_x - 50 && mouse_x < ruler_x + size_x + 50){\
  1243.     if( mouse_y > ruler_y - 50 && mouse_y < ruler_y + size_y + 50){\
  1244.      ruler_object_cnt++;\
  1245.      ruler_move(evt);\
  1246.      return;\
  1247.     };\
  1248.    }else{ruler_object_cnt = 0; return;};\
  1249.   };\
  1250.   var angle = 0;\
  1251.   function ruler_move(evt){\
  1252.    var mouse = getMouse(evt,canvas);\
  1253.    switch(ruler_object_cnt){\
  1254.     case 1:\
  1255.      angle = 0;\
  1256.      var xy = multisnap_check(mouse.x,mouse.y,use_snap);\
  1257.      ruler_y = xy[1];\
  1258.      if( ruler_y > ysize - 20 ){ruler_y = 0.5*ysize;ruler_x = 0.5*xsize;return;};\
  1259.      ruler_x = xy[0];\
  1260.      ctx.clearRect(0,0,xsize,ysize);\
  1261.      ctx.save();\
  1262.      ctx.translate(ruler_x - xcenter,ruler_y - ycenter);\
  1263.      ctx.drawImage(canvas_temp,0,0);\
  1264.      ctx.restore();\
  1265.      break;\
  1266.     case 2:\
  1267.      angle = find_angle(ruler_x,ruler_y,mouse.x,mouse.y);\
  1268.      ctx.clearRect(0,0,xsize,ysize);\
  1269.      ctx.save();\
  1270.      ctx.translate(ruler_x,ruler_y);\
  1271.      ctx.rotate(angle);\
  1272.      ctx.translate( -1*xcenter, -1*ycenter );\
  1273.      ctx.drawImage( canvas_temp,0,0 );\
  1274.      ctx.restore();\
  1275.      userdraw_radius[0] = 2*Math.PI - angle;\
  1276.      break;\
  1277.     case 3:ruler_object_cnt = 0;break;\
  1278.     default:ruler_stop(evt);break;\
  1279.    };\
  1280.   };\
  1281.  };\
  1282.  ruler%d();",canvas_root_id);
  1283.  }
  1284.  else
  1285.  {
  1286.   fprintf(js_include_file,"\
  1287.   ctx.clearRect(0,0,xsize,ysize);\
  1288.   ctx.save();\
  1289.   ctx.translate(ruler_x,ruler_y);\
  1290.   ctx.rotate(%d*Math.PI/180);\
  1291.   ctx.translate( -1*xcenter, -1*ycenter );\
  1292.   ctx.drawImage( canvas_temp,0,0 );\
  1293.   ctx.restore();\
  1294.  };\
  1295.  ruler%d();",dynamic,canvas_root_id);
  1296.  }
  1297. }
  1298.  
  1299. void add_js_protractor(int type,double xcenter,double ycenter,int size,char *font,char *stroke_color,double stroke_opacity,char *fill_color,double fill_opacity,int line_width,int use_scale,int dynamic,int use_snap){
  1300.  
  1301. /*
  1302. use_slider_display = 2 : angle in degrees
  1303. use_slider_display = 3 : angle in radians
  1304. void add_slider_display(FILE *js_include_file,int canvas_root_id,int precision,int font_size,char *font_color,double stroke_opacity){
  1305. */
  1306.  
  1307. if( type == 1 ){ /* geodriehoek */
  1308.  fprintf(js_include_file,"\n/* command protractor type 1 */\
  1309. var protractor_data = new Array(3);\
  1310. var protractor%d = function(){\
  1311.  var once = true;\
  1312.  var use_snap = %d;\
  1313.  var full = 2*Math.PI;\
  1314.  var canvas = create_canvas%d(2000,xsize,ysize);\
  1315.  var ctx = canvas.getContext(\"2d\");\
  1316.  var canvas_temp =  document.createElement(\"canvas\");\
  1317.  var size = parseInt(xsize*(%d)/(xmax - xmin));\
  1318.  canvas_temp.width = xsize;\
  1319.  canvas_temp.height = ysize;\
  1320.  var ctx_temp = canvas_temp.getContext(\"2d\");\
  1321.  var type = %d;\
  1322.  var xcenter = x2px(%f);\
  1323.  var ycenter = y2px(%f);\
  1324.  var half = 0.5*size;\
  1325.  var radius1 = 0.6*half;\
  1326.  var radius2 = 0.65*half;\
  1327.  var radius3 = 0.7*half;\
  1328.  ctx_temp.font = \"%s\";\
  1329.  ctx_temp.strokeStyle = \"rgba(%s,%f)\";\
  1330.  ctx_temp.fillStyle = \"rgba(%s,%f)\";\
  1331.  ctx_temp.lineWidth =%d;\
  1332.  var use_scale = %d;\
  1333.  if( once ){\
  1334.   ctx_temp.clearRect(0,0,canvas_temp.width,canvas_temp.height);\
  1335.   ctx_temp.beginPath();\
  1336.   ctx_temp.moveTo(xcenter-half,ycenter );\
  1337.   ctx_temp.lineTo(xcenter,ycenter-half);\
  1338.   ctx_temp.lineTo(xcenter+half,ycenter);\
  1339.   ctx_temp.lineTo(xcenter-half,ycenter);\
  1340.   ctx_temp.moveTo(xcenter,ycenter );\
  1341.   ctx_temp.lineTo(xcenter+0.5*half,ycenter-0.5*half);\
  1342.   ctx_temp.moveTo(xcenter,ycenter );\
  1343.   ctx_temp.lineTo(xcenter-0.5*half,ycenter-0.5*half);\
  1344.   ctx_temp.moveTo(xcenter,ycenter );\
  1345.   ctx_temp.lineTo(xcenter,ycenter-half);\
  1346.   ctx_temp.closePath();\
  1347.   ctx_temp.fill();\
  1348.   ctx_temp.stroke();\
  1349.   ctx_temp.beginPath();\
  1350.   ctx_temp.arc(xcenter,ycenter,radius1,0,Math.PI,false);\
  1351.   ctx_temp.closePath();\
  1352.   if( use_scale == 1 ){\
  1353.    ctx_temp.fillStyle = ctx_temp.strokeStyle;\
  1354.    var txtsize;\
  1355.    for(var p = 45 ; p < 180;p = p+45){\
  1356.     txtsize = 0.5*(ctx_temp.measureText(p).width);\
  1357.     ctx_temp.fillText(p,xcenter+0.5*half*Math.cos(p*Math.PI/180) - txtsize,ycenter-0.5*half*Math.sin(p*Math.PI/180));\
  1358.    };\
  1359.   };\
  1360.   for(var p = 10 ; p < 180;p = p+10){\
  1361.    ctx_temp.beginPath();\
  1362.    ctx_temp.moveTo(xcenter+radius1*Math.cos(p*Math.PI/180),ycenter-radius1*Math.sin(p*Math.PI/180));\
  1363.    ctx_temp.lineTo(xcenter+radius3*Math.cos(p*Math.PI/180),ycenter-radius3*Math.sin(p*Math.PI/180));\
  1364.    ctx_temp.closePath();\
  1365.    ctx_temp.stroke();\
  1366.   };\
  1367.   for(var p = 0 ; p < 180;p=p+2){\
  1368.    if(p%%10 != 0){\
  1369.     ctx_temp.beginPath();\
  1370.     ctx_temp.moveTo(xcenter+radius1*Math.cos(p*Math.PI/180),ycenter-radius1*Math.sin(p*Math.PI/180));\
  1371.     ctx_temp.lineTo(xcenter+radius2*Math.cos(p*Math.PI/180),ycenter-radius2*Math.sin(p*Math.PI/180));\
  1372.     ctx_temp.closePath();\
  1373.     ctx_temp.stroke();\
  1374.    };\
  1375.   };\
  1376.   ctx_temp.drawImage(canvas,xcenter,ycenter);\
  1377.   ctx_temp.save();\
  1378.   once = false;\
  1379.  };\
  1380.  ",canvas_root_id,use_snap,canvas_root_id,size,type,xcenter,ycenter,font,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width,use_scale);
  1381. }
  1382.  
  1383. if( type != 1 ){
  1384.  fprintf(js_include_file,"\n/* command protractor type 0 */\
  1385. var protractor_data = new Array(3);\
  1386. var protractor%d = function(){\
  1387.  var once = true;\
  1388.  var use_snap = %d;\
  1389.  var full = 2*Math.PI;\
  1390.  var canvas = create_canvas%d(2000,xsize,ysize);\
  1391.  var ctx = canvas.getContext(\"2d\");\
  1392.  var canvas_temp =  document.createElement(\"canvas\");\
  1393.  var size = parseInt(xsize*(%d)/(xmax - xmin));\
  1394.  canvas_temp.width = xsize;\
  1395.  canvas_temp.height = ysize;\
  1396.  var ctx_temp = canvas_temp.getContext(\"2d\");\
  1397.  var type = %d;\
  1398.  var xcenter = x2px(%f);\
  1399.  var ycenter = y2px(%f);\
  1400.  var half = 0.5*size;\
  1401.  var radius1 = 0.8*half;\
  1402.  var radius2 = 0.9*half;\
  1403.  var radius3 = half;\
  1404.  ctx_temp.font = \"%s\";\
  1405.  ctx_temp.strokeStyle = \"rgba(%s,%f)\";\
  1406.  ctx_temp.fillStyle = \"rgba(%s,%f)\";\
  1407.  ctx_temp.lineWidth =%d;\
  1408.  var use_scale = %d;\
  1409.  if( once ){\
  1410.   ctx_temp.clearRect(0,0,xsize,ysize);\
  1411.   ctx_temp.arc(xcenter,ycenter,radius1,0,2*Math.PI,false);\
  1412.   ctx_temp.arc(xcenter,ycenter,radius2,0,2*Math.PI,false);\
  1413.   ctx_temp.arc(xcenter,ycenter,radius3,0,2*Math.PI,false);\
  1414.   ctx_temp.fill();\
  1415.   ctx_temp.stroke();\
  1416.   if( use_scale == 1 ){\
  1417.    ctx_temp.fillStyle = ctx_temp.strokeStyle;\
  1418.    var txtsize;\
  1419.    for(var p = 0 ; p < 360;p = p+45){\
  1420.     txtsize = 0.5*(ctx_temp.measureText(p).width);\
  1421.     ctx_temp.fillText(p,xcenter+0.6*half*Math.cos(p*Math.PI/180) - txtsize,ycenter-0.6*half*Math.sin(p*Math.PI/180));\
  1422.    };\
  1423.   };\
  1424.   ctx_temp.strokeStyle = \"rgba(255,0,0,0.4)\";\
  1425.   for(var p = 0 ; p < 360;p = p+10){\
  1426.    ctx_temp.beginPath();\
  1427.    ctx_temp.moveTo(xcenter+radius1*Math.cos(p*Math.PI/180),ycenter-radius1*Math.sin(p*Math.PI/180));\
  1428.    ctx_temp.lineTo(xcenter+radius3*Math.cos(p*Math.PI/180),ycenter-radius3*Math.sin(p*Math.PI/180));\
  1429.    ctx_temp.closePath();\
  1430.    ctx_temp.stroke();\
  1431.   };\
  1432.   ctx_temp.strokeStyle = \"rgba(0,0,255,0.4)\";\
  1433.   for(var p = 0 ; p < 360;p=p+2){\
  1434.     ctx_temp.beginPath();\
  1435.     ctx_temp.moveTo(xcenter+radius2*Math.cos(p*Math.PI/180),ycenter-radius2*Math.sin(p*Math.PI/180));\
  1436.     ctx_temp.lineTo(xcenter+radius3*Math.cos(p*Math.PI/180),ycenter-radius3*Math.sin(p*Math.PI/180));\
  1437.     ctx_temp.closePath();\
  1438.     ctx_temp.stroke();\
  1439.   };\
  1440.   ctx_temp.strokeStyle = \"rgba(0,0,0,0.6)\";\
  1441.   for(var p = 0 ; p < 360;p=p+45){\
  1442.     ctx_temp.beginPath();\
  1443.     ctx_temp.moveTo(xcenter,ycenter);\
  1444.     ctx_temp.lineTo(xcenter+radius3*Math.cos(p*Math.PI/180),ycenter-radius3*Math.sin(p*Math.PI/180));\
  1445.     ctx_temp.closePath();\
  1446.     ctx_temp.stroke();\
  1447.   };\
  1448.   ctx_temp.drawImage(canvas,0,0);\
  1449.   ctx_temp.save();\
  1450.   once = false;\
  1451.  };",canvas_root_id,use_snap,canvas_root_id,size,type,xcenter,ycenter,font,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width,use_scale);
  1452. }
  1453. if( dynamic == -1 ){ /* rotate the protractors */
  1454.  fprintf(js_include_file,"\
  1455.  var protractor_x = xcenter;\
  1456.  var protractor_y = ycenter;\
  1457.  ctx.drawImage(canvas_temp,0,0);\
  1458.  var angle = 0;\
  1459.  if(wims_status != \"done\"){\
  1460.   canvas_div.addEventListener( 'mouseup'   , protractor_stop,false);\
  1461.   canvas_div.addEventListener( 'mousedown' , protractor_start,false);\
  1462.   canvas_div.addEventListener( 'mousemove' , protractor_move,false);\
  1463.   canvas_div.addEventListener( 'touchstart', function(e){ e.preventDefault();protractor_start(e.changedTouches[0]);},false);\
  1464.   canvas_div.addEventListener( 'touchmove', function(e){ e.preventDefault();protractor_move(e.changedTouches[0]);},false);\
  1465.   canvas_div.addEventListener( 'touchend', function(e){ e.preventDefault();protractor_stop(e.changedTouches[0]);},false);\
  1466.  };\
  1467.  function protractor_stop(evt){\
  1468.   protractor_data[0] = protractor_x;\
  1469.   protractor_data[1] = protractor_y;\
  1470.   protractor_data[2] = angle;\
  1471.   return;\
  1472.  };\
  1473.  var protractor_object_cnt = 0;\
  1474.  function protractor_start(evt){\
  1475.   var mouse = getMouse(evt,canvas);\
  1476.   var mouse_y = mouse.y;\
  1477.   if( mouse_y > ysize - 20 ){return;};\
  1478.   var mouse_x = mouse.x;\
  1479.   if( mouse_x > protractor_x - half && mouse_x < protractor_x + half ){\
  1480.    if( mouse_y > protractor_y - half && mouse_y < protractor_y + half ){\
  1481.     protractor_object_cnt++;\
  1482.     protractor_move(evt);\
  1483.     return;\
  1484.    };\
  1485.   }else{protractor_object_cnt = 0; return;};\
  1486.  };\
  1487.  function protractor_move(evt){\
  1488.   var mouse = getMouse(evt,canvas);\
  1489.   switch(protractor_object_cnt){\
  1490.    case 1:\
  1491.      var xy = multisnap_check(mouse.x,mouse.y,use_snap);\
  1492.      mouse.x = xy[0];\
  1493.      mouse.y = xy[1];\
  1494.      angle = 0;\
  1495.      protractor_x = mouse.x;\
  1496.      protractor_y = mouse.y;\
  1497.      if( protractor_y > ysize - 20 ){protractor_y = 0.5*ysize;protractor_x = 0.5*xsize;return;};\
  1498.      ctx.clearRect(0,0,xsize,ysize);\
  1499.      ctx.save();\
  1500.      ctx.translate(protractor_x - xcenter,protractor_y - ycenter);\
  1501.      ctx.drawImage(canvas_temp,0,0);\
  1502.      ctx.restore();\
  1503.      break;\
  1504.    case 2:\
  1505.     angle = find_angle(protractor_x,protractor_y,mouse.x,mouse.y);\
  1506.     ctx.clearRect(0,0,xsize,ysize);\
  1507.     ctx.save();\
  1508.     ctx.translate(protractor_x,protractor_y);\
  1509.     ctx.rotate(angle);\
  1510.     ctx.translate( -1*xcenter, -1*ycenter );\
  1511.     ctx.drawImage( canvas_temp,0,0 );\
  1512.     ctx.restore();\
  1513.     userdraw_radius[0] =2*Math.PI- angle;\
  1514.     break;\
  1515.    case 3:protractor_object_cnt = 0;break;\
  1516.    default:protractor_stop(evt);\
  1517.   };\
  1518.  };\
  1519. };\
  1520. protractor%d();",canvas_root_id);
  1521.  
  1522. }
  1523. else
  1524. {
  1525.  fprintf(js_include_file,"\
  1526.  ctx.save();\
  1527.  ctx.translate(xcenter,ycenter);\
  1528.  ctx.rotate(%d*Math.PI/180);\
  1529.  ctx.translate( -1*xcenter, -1*ycenter );\
  1530.  ctx.drawImage( canvas_temp,0,0 );\
  1531.  ctx.restore();\
  1532. };\
  1533. protractor%d();\
  1534. ",dynamic,canvas_root_id);
  1535. } /* end dynamic == -1*/
  1536.  
  1537. }
  1538.  
  1539.  
  1540.  
  1541.  
  1542.