Subversion Repositories wimsdev

Rev

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