Subversion Repositories wimsdev

Rev

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

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