Subversion Repositories wimsdev

Rev

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