Subversion Repositories wimsdev

void add_drag_code(FILE *js_include_file,int canvas_cnt,int canvas_root_id);

void add_trace_js_mouse(FILE *js_include_file,int canvas_cnt,int canvas_root_id,char *stroke_color,char *jsmath,int font_size,double stroke_opacity,int line_width,int crosshair_size);

void add_setlimits(FILE *js_include_file, int canvas_root_id);

void add_safe_eval(FILE *js_include_file);

void add_to_js_math(FILE *js_include_file);

void add_calc_y(FILE *js_include_file,int canvas_root_id,char *jsmath);

void add_jsplot(FILE *js_include_file,int canvas_root_id);

void add_slider(FILE *js_include_file, int canvas_root_id,double v1,double v2,int width,int height,int type,char *label,int slider_cnt,char *stroke_color,char *fill_color,int line_width,double opacity,char *font_family,char *font_color,int use_slider_display);

void add_slider_display(FILE *js_include_file, int canvas_root_id,int precision,int font_size,char *font_color,double stroke_opacity);

void add_xyslider(FILE *js_include_file, int canvas_root_id,double v1,double v2,int width,int height,int type,char *label,int slider_cnt,char *stroke_color,char *fill_color,int line_width,double opacity,char *font_family,char *font_color,int use_slider_display);

void *my_newmem(size_t size);

void canvas_error(char *msg);

char *eval(int xsize,int ysize,char *fun,double xmin,double xmax,double ymin,double ymax,int xsteps,int precision);

char *eval_parametric(int xsize,int ysize,char *fun1,char* fun2,double xmin,double xmax,double ymin,double ymax, double tmin,double tmax,int plotsteps,int precision);

char *eval_levelcurve(int xsize,int ysize,char *fun,double xmin,double xmax,double ymin,double ymax,int plotsteps,int precision,double level);

char *data2js_array(int data[],int len);

char *xy2js_array(int xy[],int len);

char *double_xy2js_array(double xy[],int len,int decimals);

int find_number_of_digits(int i);

int x2px(double x);

int y2px(double y);

void add_clear_button(FILE *js_include_file,int canvas_root_id,char *input_style,char *button_text);

void add_js_inputs(FILE *js_include_file,int canvas_root_id,int num,int input_cnt,char *input_style,int line_width);

void add_js_mouse(FILE *js_include_file,int canvas_cnt,int canvas_root_id,int precision,char *stroke_color,int font_size,double stroke_opacity,int type);

void add_js_points(FILE *js_include_file,int num,char *draw_type,int line_width, int radius ,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_circles(FILE *js_include_file,int num,char *draw_type, int line_width, int radius , char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_segments(FILE *js_include_file,int num,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_polyline(FILE *js_include_file,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_lines(FILE *js_include_file,int num,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_hlines(FILE *js_include_file,int num,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_arrows(FILE *js_include_file,int num,char *draw_type,int line_width,int type, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1,int arrow_head);

void add_js_crosshairs(FILE *js_include_file,int num,char *draw_type,int line_width, int crosshair_size ,char *stroke_color,double stroke_opacity);

void add_js_paths(FILE *js_include_file,int num,char *draw_type,int line_width, int closed_path,char *stroke_color,double stroke_opacity,int use_filled, char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_poly(FILE *js_include_file,int num,char *draw_type,int line_width,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_rect(FILE *js_include_file,int num,int roundrect,char *draw_type,int line_width,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_floodfill(FILE *js_include_file,int canvas_root_id);

void add_js_filltoborder(FILE *js_include_file,int canvas_root_id);

void add_js_arc(FILE *js_include_file,int canvas_root_id,int num,int line_width,char *stroke_color,double stroke_opacity,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1);

void add_js_text(FILE *js_include_file,int canvas_root_id,int font_size,char *font_family,char *font_color,double stroke_opacity);

void add_input_circle(FILE *js_include_file,int type,int num);

void add_input_segment(FILE *js_include_file,int num);

void add_input_line(FILE *js_include_file,int num);

void add_input_polyline(FILE *js_include_file);

void add_textarea_polygon(FILE *js_include_file);

void add_input_crosshair(FILE *js_include_file,int num);

void add_input_arrow(FILE *js_include_file,int num);

void add_input_xy(FILE *js_include_file, int canvas_root_id);

void add_input_xyr(FILE *js_include_file, int canvas_root_id);

void add_input_x1y1x2y2(FILE *js_include_file, int canvas_root_id);

void add_textarea_xy(FILE *js_include_file, int canvas_root_id);

void add_zoom_buttons(FILE *js_include_file,int canvas_root_id,char *stroke_color,double stroke_opacity);

void add_js_tooltip(int canvas_root_id,char *tooltip_text,char *bgcolor,int xsize,int ysize);

void add_input_jsfunction(FILE *js_include_file, int canvas_root_id,int num,char *input_style,int input_cnt,char *stroke_color,float stroke_opacity,int line_width,int use_dashed,int dashtype0,int dashtype1);

 

 

 

void add_js_inputs(FILE *js_include_file,int canvas_root_id,int num,int input_cnt,char *input_style,int line_width){

fprintf(js_include_file,"\n<!-- user draw inputfields -->\n\

var canvas_rect;\

var input_cnt = %d;\

var start_input_cnt = input_cnt;\

function user_drag(evt){return;}\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var x = evt.clientX - canvas_rect.left;\

var y = evt.clientY - canvas_rect.top;\

if( x_use_snap_to_grid == 1 ){\

 x = snap_to_x(x);\

};\

if( y_use_snap_to_grid == 1 ){\

 y = snap_to_y(y);\

};\

var num = %d;var inputs;\

if(evt.which == 1){\

 var inputs;var xi;var yi;var wi;var hi;\

 var found = 0;\

 if( start_input_cnt < input_cnt){\

  for(var p = start_input_cnt ; p < input_cnt ; p++ ){\

   inputs = document.getElementById(\"canvas_input\"+p);\

   xi = findPosX(inputs) - canvas_rect.left;\

   yi = findPosY(inputs) - canvas_rect.top;\

   wi = 4 + inputs.clientWidth;\

   hi = 4 + inputs.clientHeight;\

   if( x > xi - wi && x < xi + wi && y > yi - hi && y < yi + hi ){\

    found = 1;\

   };\

  };\

 };\

 if( found == 0 ){\

  if( num == 1 ){\

   inputs = document.getElementById(\"canvas_input\"+start_input_cnt);\

   try{canvas_div.removeChild(inputs);}catch(e){};\

   input_cnt = 0;\

  };\

  userdraw_x.push(x);userdraw_y.push(y);\

  draw_inputs(%d,input_cnt,x,y,%d,1,\"%s\",\"?\");\

  input_cnt++;\

 };\

}\

else\

{\

 for(var p = start_input_cnt ; p < input_cnt; p++){\

  inputs = document.getElementById(\"canvas_input\"+p);\

  try{canvas_div.removeChild(inputs);}catch(e){};\

 };\

 userdraw_x = [];userdraw_y = [];\

 input_cnt = start_input_cnt;\

};\

};",input_cnt,num,canvas_root_id,line_width,input_style);

 

void add_zoom_buttons(FILE *js_include_file,int canvas_root_id,char *stroke_color,double stroke_opacity){

fprintf(js_include_file,"\n<!-- draw zoom buttons -->\n\

var draw_zoom_buttons = function(){\

var obj;var canvas_type =%d;\

if( document.getElementById(\"wims_canvas%d\"+canvas_type) ){\

 obj = document.getElementById(\"wims_canvas%d\"+canvas_type);\

}\

else\

{\

 obj = create_canvas%d(canvas_type,xsize,ysize);\

};\

var ctx = obj.getContext(\"2d\");\

ctx.font =\"18px Ariel\";\

ctx.textAlign = \"right\";\

ctx.fillStyle=\"rgba(\"+%s+\",\"+%f+\")\";\

ctx.fillText(\"+\",xsize,ysize);\

ctx.fillText(\"\\u2212\",xsize - 15,ysize);\

ctx.fillText(\"\\u2192\",xsize - 30,ysize-2);\

ctx.fillText(\"\\u2190\",xsize - 45,ysize-2);\

ctx.fillText(\"\\u2191\",xsize - 60,ysize-2);\

ctx.fillText(\"\\u2193\",xsize - 75,ysize-2);\

ctx.fillText(\"\\u00D7\",xsize - 90,ysize-2);\

ctx.stroke();\

};\ndraw_zoom_buttons();",BG_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id,stroke_color,stroke_opacity);    

 

void add_js_circles(FILE *js_include_file,int num,char *draw_type,int line_width, int radius ,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var num = %d;\

userdraw_radius[0] = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_filled = %d;\

var fill_color = \"%s\";\

var fill_opacity = %f;\

var use_dashed = %d;\

var dashtype1 = %d;\

var dashtype0 = %d;\

var click_cnt = 0;\

var x0,y0,x1,y1;\

var canvas_rect;\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

y0 = evt.clientY - canvas_rect.top;\

if(y0 < ysize + 1){\

 x0 = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x0 = snap_to_x(x0);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y0 = snap_to_y(y0);\

 };\

 if(evt.which == 1){\

  if( click_cnt == 0 ){\

   userdraw_x[xy_cnt] = x0;\

   userdraw_y[xy_cnt] = y0;\

   userdraw_radius[xy_cnt] = line_width;\

   click_cnt = 1;\

   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);\

  }\

  else\

  {\

   click_cnt = 0;\

   if( num != 1 ){ xy_cnt++; }\

  }\

 }\

 else\

 {\

   canvas_remove(x0,y0);\

 }\

}\

};\

function user_drag(evt){\

if( click_cnt == 1 ){\

   canvas_rect = canvas_userdraw.getBoundingClientRect();\

   y1 = evt.clientY - canvas_rect.top;\

   x1 = evt.clientX - canvas_rect.left;\

   if( x_use_snap_to_grid == 1 ){\

    x0 = snap_to_x(x0);\

   };\

   if( y_use_snap_to_grid == 1 ){\

    y0 = snap_to_y(y0);\

   };\

   userdraw_radius[xy_cnt] = parseInt(Math.sqrt( (x1-x0)*(x1-x0) + (y1-y0)*(y1-y0) ));\

   userdraw_x[xy_cnt] = x0;\

   userdraw_y[xy_cnt] = y0;\

   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);\

 }\

};\

function canvas_remove(x,y){\

var marge = 10*line_width;\

var diff1;var diff2;\

for(var p = 0;p < userdraw_x.length ; p++){\

 diff1 = (x-userdraw_x[p])*(x - userdraw_x[p]) + (y - userdraw_y[p])*(y - userdraw_y[p]) - userdraw_radius[p]*userdraw_radius[p];\

 diff2 = (x-userdraw_x[p])*(x - userdraw_x[p]) + (y - userdraw_y[p])*(y - userdraw_y[p]) - (userdraw_radius[p] - marge)*(userdraw_radius[p] - marge);\

 if( diff1 < 0 && diff2 > 0 ){\

  if(confirm(\"remove circle ?\")){\

   if( num == 1 ){ userdraw_x = [];userdraw_y = []; userdraw_radius = [];xy_cnt = 0;context_userdraw.clearRect(0,0,xsize,ysize); return;}\

   else\

   {\

    userdraw_x.splice(p,1);\

    userdraw_y.splice(p,1);\

    userdraw_radius.splice(p,1);\

    xy_cnt--;\

    context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");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);\

   };\

  };\

  return;\

 }\

}\

};",draw_type,num,radius,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);

 

void add_js_crosshairs(FILE *js_include_file,int num,char *draw_type,int line_width, int crosshair_size ,char *stroke_color,double stroke_opacity){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on currect active canvas -->\n\

var num = %d;\

var crosshair_size = parseInt(0.5*%d);\

var canvas_rect;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

context_userdraw.lineWidth = line_width;\

context_userdraw.strokeStyle=\"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\

function user_drag(evt){return;}\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var x = evt.clientX - canvas_rect.left;\

var y = evt.clientY - canvas_rect.top;\

if( x_use_snap_to_grid == 1 ){\

 x = snap_to_x(x);\

};\

if( y_use_snap_to_grid == 1 ){\

 y = snap_to_y(y);\

};\

var x1,y1,x2,y2;\

if(evt.which == 1){\

  userdraw_x[xy_cnt] = x;\

  userdraw_y[xy_cnt] = y;\

  x1 = x - crosshair_size;\

  x2 = x + crosshair_size;\

  y1 = y - crosshair_size;\

  y2 = y + crosshair_size;\

  if( num != 1 ){ xy_cnt++;\

   for(var p = 0; p < xy_cnt - 1 ;p++){\

    if(x1 < userdraw_x[p] && x2 > userdraw_x[p]){\

     if(y1 < userdraw_y[p] && y2 > userdraw_y[p]){\

      canvas_remove(x,y);\

      context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");\

     }\

    }\

   }\

  };\

  context_userdraw.beginPath();\

  context_userdraw.moveTo(x1,y1);\

  context_userdraw.lineTo(x2,y2);\

  context_userdraw.closePath();\

  context_userdraw.stroke();\

  context_userdraw.beginPath();\

  context_userdraw.moveTo(x2,y1);\

  context_userdraw.lineTo(x1,y2);\

  context_userdraw.closePath();\

  context_userdraw.stroke();\

  context_userdraw.clearRect(0,0,xsize,ysize);\

  draw_crosshairs(context_userdraw,userdraw_x,userdraw_y,line_width,crosshair_size,stroke_color,stroke_opacity,0,0,0,[0,0]);\

}\

else\

{\

canvas_remove(x,y);\

}\

}\

function canvas_remove(x,y){\

var marge = 2*crosshair_size;\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   userdraw_x.splice(p,1);userdraw_y.splice(p,1);\

   context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");context_userdraw.clearRect(0,0,xsize,ysize);xy_cnt--;\

   draw_crosshairs(context_userdraw,userdraw_x,userdraw_y,line_width,crosshair_size,stroke_color,stroke_opacity,0,0,0,[0,0]);\

   return;\

  }\

 }\

}\

};",draw_type,num,crosshair_size,line_width,stroke_color,stroke_opacity);

 

void add_js_rect(FILE *js_include_file,int num,int roundrect,char *draw_type,int line_width,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on currect active canvas -->\n\

var canvas_rect;\

var roundrect = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_filled = %d;\

var fill_color = \"%s\";\

var fill_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var num = %d;\

var use_rotate = 0;\

var angle = 0;\

var closed_path = 1;\

var clickcnt = 0;\

xy_cnt = 0;\

var x0,y0,x1,y1;\

var marge = 10*line_width;\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

y0 = evt.clientY - canvas_rect.top;\

if( y0  < ysize + 1 ){\

 x0 = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x0 = snap_to_x(x0);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y0 = snap_to_y(y0);\

 };\

 if( evt.which == 1 ){\

  if(clickcnt == 0 ){\

   clickcnt = 1;\

   userdraw_x[xy_cnt] = x0;userdraw_y[xy_cnt] = y0;xy_cnt++;\

  }\

  else\

  {\

   clickcnt = 0;\

   if(roundrect == 0 ){\

    draw_rects(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

   }\

   else\

   {\

    draw_roundrects(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

   }\

   if( num != 1 ){ xy_cnt++; }else{xy_cnt--;}\

  }\

 }\

 else\

 {\

  canvas_remove(x0,y0);\

 };\

};\

};\

function user_drag(evt){\

if( clickcnt == 1 ){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 y1 = evt.clientY - canvas_rect.top;\

 x1 = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

 x1 = snap_to_x(x1);\

 };\

 if( y_use_snap_to_grid == 1 ){\

 y1 = snap_to_y(y1);\

 };\

 userdraw_x[xy_cnt] = x1;\

 userdraw_y[xy_cnt] = y1;\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 if( roundrect == 0 ){\

  draw_rects(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

 }\

 else\

 {\

  draw_roundrects(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

 };\

};\

};\

function canvas_remove(x,y){\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   if( confirm(\"remove rectangle ?\" )){\

    if( p%%2 == 0 ){\

     userdraw_x.splice(p,2);userdraw_y.splice(p,2);\

    }\

    else\

    {\

     userdraw_x.splice(p-1,2);userdraw_y.splice(p-1,2);\

    }\

    xy_cnt--;\

    context_userdraw.clearRect(0,0,xsize,ysize);\

    if(xy_cnt < 2){xy_cnt = 0;click_cnt = 0;userdraw_x = [];userdraw_y = [];return;};\

    if( roundrect == 0 ){\

     draw_rects(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

    }\

    else\

    {\

     draw_roundrects(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

    }\

    return;\

   };\

  };\

 };\

};\

};",draw_type,roundrect,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,num);

 

void add_js_poly(FILE *js_include_file,int num,char *draw_type,int line_width,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on currect active canvas -->\n\

var canvas_rect;\

var num = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_filled = %d;\

var fill_color = \"%s\";\

var fill_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var use_rotate = 0;\

var angle = 0;\

var use_translate = 0;\

var vector=[0,0];\

var closed_path = 1;\

var done = 1;\

var x,y;\

var marge = 10*line_width;\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

y = evt.clientY - canvas_rect.top;\

if( y < ysize + 1 ){\

 x = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 if( evt.which == 1){\

  if( num == -1 && xy_cnt > 2 ){\

   if( x - marge < userdraw_x[0] && x + marge > userdraw_x[0]){\

    if( y - marge < userdraw_y[0] && y + marge > userdraw_y[0]){\

     userdraw_x.splice(xy_cnt,1);userdraw_y.splice(xy_cnt,1);\

     draw_paths(context_userdraw,userdraw_x,userdraw_y,line_width,closed_path,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

     done = 1;return;\

    };\

   };\

  }\

  else\

  {\

   if( xy_cnt == num - 1){\

    draw_paths(context_userdraw,userdraw_x,userdraw_y,line_width,closed_path,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

    done = 1;return;\

   };\

  };\

  done = 0;\

  userdraw_x[xy_cnt] = x;userdraw_y[xy_cnt] = y;xy_cnt++;\

  user_drag(evt);\

 }\

 else\

 {\

  canvas_remove(x,y);\

  return;\

 }\

};\

};\

function user_drag(evt){\

if( done == 0 ){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 x = evt.clientX - canvas_rect.left;\

 y = evt.clientY - canvas_rect.top;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 userdraw_x[xy_cnt] = x;userdraw_y[xy_cnt] = y;\

 draw_paths(context_userdraw,userdraw_x,userdraw_y,line_width,closed_path,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,use_rotate,angle,0,[1,0,0,1,0,0]);\

}\

}\

function canvas_remove(x,y){\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   if( confirm(\"remove polygone ?\" )){\

    context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");context_userdraw.clearRect(0,0,xsize,ysize);\

    xy_cnt = 0;userdraw_x = [];userdraw_y = [];done = 1;\

   }\

   return;\

  }\

 }\

}\

};",draw_type,num,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);

 

void add_js_points(FILE *js_include_file,int num,char *draw_type,int line_width, int radius ,char *stroke_color,double stroke_opacity,int use_filled,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var num = %d;\

var canvas_rect;\

userdraw_radius[0] = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_filled = %d;\

var fill_color = \"%s\";\

var fill_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

function user_drag(evt){return;};\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var y = evt.clientY - canvas_rect.top;\

if( y < ysize + 1 ){\

 var lu = userdraw_x.length;\

 var x = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 if(evt.which == 1){\

  if( num == 1 ){\

  userdraw_x[0] = x;\

  userdraw_y[0] = y;\

  }\

  else\

  {\

  userdraw_x[lu] = x;\

  userdraw_y[lu] = y;\

  userdraw_radius[lu] = userdraw_radius[0];\

  };\

  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);\

 }\

 else\

 {\

 canvas_remove(x,y);\

 }\

}\

};\

function canvas_remove(x,y){\

var marge = 4*line_width;\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   userdraw_x.splice(p,1);userdraw_y.splice(p,1);\

   context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");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);\

   return;\

  }\

 }\

}\

};",draw_type,num,radius,line_width,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);

 

void add_js_polyline(FILE *js_include_file,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var canvas_rect;\

var cnt = 0;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

function user_draw(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var x = evt.clientX - canvas_rect.left;\

var y = evt.clientY - canvas_rect.top;\

var lu = userdraw_x.length;\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

if( x_use_snap_to_grid == 1 ){\

 x = snap_to_x(x);\

};\

if( y_use_snap_to_grid == 1 ){\

 y = snap_to_y(y);\

};\

if( evt.which == 1 ){\

 userdraw_x[lu] = x;userdraw_y[lu] = y;\

 if( cnt == 0 ){\

  user_drag(evt);\

  cnt = 1;\

 }\

 else\

 {\

   cnt = 0;\

   draw_polyline(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

 }\

}\

else\

{\

 canvas_remove(x,y);\

}\

};\

function user_drag(evt){\

if( cnt == 0){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 var x = evt.clientX - canvas_rect.left;\

 var y = evt.clientY - canvas_rect.top;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 var lu = userdraw_x.length;\

 if( lu > 0 ){\

  userdraw_x[lu - 1] = x; userdraw_y[lu - 1] = y;\

  draw_polyline(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

 };\

}\

};\

function canvas_remove(x,y){\

if( confirm(\"remove line ?\" )){\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 userdraw_x = [];userdraw_y = [];cnt = 1;\

 return;\

}\

};",draw_type,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);

 

void add_js_segments(FILE *js_include_file,int num,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var canvas_rect;\

var num = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var x0,y0;\

function user_draw(evt){\

var lu = userdraw_x.length;\

if( lu != 0 && lu%%2 == 0){\

 draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

}\

var y = evt.clientY - canvas_rect.top;\

if( y < ysize + 1){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 var x = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 if( evt.which == 1 ){\

  if( lu%%2 == 0){\

   x0 = x;y0 = y;\

   if(num == 1){ userdraw_x = [];userdraw_y = [];userdraw_x[0] = x0;userdraw_y[0] = y0;} else {userdraw_x[lu] = x0;userdraw_y[lu] = y0;}\

   draw_circles(context_userdraw,[x0],[y0],[line_width],line_width,stroke_color,stroke_opacity,1,stroke_color,stroke_opacity,0,1,1);\

   user_drag(evt);\

  }\

  else\

  {\

   if( num == 1 ){ userdraw_x[1] = x;userdraw_y[1] = y;} else {userdraw_x[lu] = x;userdraw_y[lu] = y;};\

   draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

  }\

 }\

 else\

 {\

  canvas_remove(x,y);\

 }\

}\

};\

function user_drag(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var x = evt.clientX - canvas_rect.left;\

var y = evt.clientY - canvas_rect.top;\

var lu = userdraw_x.length;\

if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

};\

if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

};\

if( lu%%2 != 0 ){\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 draw_circles(context_userdraw,[x0],[y0],[line_width],line_width,stroke_color,stroke_opacity,1,stroke_color,stroke_opacity,0,1,1);\

 draw_circles(context_userdraw,[x],[y],[line_width],line_width,stroke_color,stroke_opacity,1,stroke_color,stroke_opacity,0,1,1);\

 draw_segments(context_userdraw,[x0,x],[y0,y],line_width,stroke_color,stroke_opacity);\

 if( lu > 0){\

  draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

 }\

}\

};\

function canvas_remove(x,y){\

var marge = 10*line_width;\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   if( confirm(\"remove line ?\" )){\

    context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");context_userdraw.clearRect(0,0,xsize,ysize);\

    if( p%%2 == 0 ){\

     userdraw_x.splice(p,2);userdraw_y.splice(p,2);\

    }\

    else\

    {\

     userdraw_x.splice(p-1,2);userdraw_y.splice(p-1,2);\

    }\

    if(userdraw_x.length < 2){ userdraw_x = [];userdraw_y = [];return;};\

    draw_segments(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

   }\

   return;\

  }\

 }\

}\

};",draw_type,num,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);

 

void add_js_hlines(FILE *js_include_file,int num,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var canvas_rect;\

var num = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var x0,y0;\

function user_draw(evt){\

if( evt.which == 1 ){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 var y = evt.clientY - canvas_rect.top;\

 var x = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 var lu = userdraw_x.length;\

 switch(num){\

  case 1: userdraw_x[0] = x;userdraw_x[1] = xmax;userdraw_y[0] = y; userdraw_y[1] = y;break;\

  case 2: userdraw_x[lu] = x;userdraw_x[lu+1] = xmax;userdraw_y[lu] = y;userdraw_y[lu+1] = y;break;\

  case 3: userdraw_x[0] = x;userdraw_x[1] = x;userdraw_y[0] = y; userdraw_y[1] = ymax;break;\

  case 4: userdraw_x[lu] = x;userdraw_x[lu+1] = x;userdraw_y[lu] = y;userdraw_y[lu+1] = ymax;break;\

 };\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

}\

else\

{\

 userdraw_x = [];userdraw_y = [];context_userdraw.clearRect(0,0,xsize,ysize);return;\

};\

};\

function user_drag(evt){ return evt; };",draw_type,num,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);

 

 

void add_js_lines(FILE *js_include_file,int num,char *draw_type,int line_width, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var canvas_rect;\

var num = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var x0,y0;\

function user_draw(evt){\

var lu = userdraw_x.length;\

if( lu != 0 && lu%%2 == 0){\

 draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

}\

var y = evt.clientY - canvas_rect.top;\

if( y < ysize + 1){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 var x = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 if( evt.which == 1 ){\

  if( lu%%2 == 0){\

   x0 = x;y0 = y;\

   if(num == 1){ userdraw_x = [];userdraw_y = [];userdraw_x[0] = x0;userdraw_y[0] = y0;} else {userdraw_x[lu] = x0;userdraw_y[lu] = y0;}\

   draw_circles(context_userdraw,[x0],[y0],[line_width],line_width,stroke_color,stroke_opacity,1,stroke_color,stroke_opacity,0,1,1);\

   user_drag(evt);\

  }\

  else\

  {\

   if( num == 1 ){ userdraw_x[1] = x;userdraw_y[1] = y;} else {userdraw_x[lu] = x;userdraw_y[lu] = y;};\

   draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

  };\

 }\

 else\

 {\

  canvas_remove(x,y);\

 };\

};\

};\

function user_drag(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var x = evt.clientX - canvas_rect.left;\

var y = evt.clientY - canvas_rect.top;\

var lu = userdraw_x.length;\

if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

};\

if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

};\

if( lu%%2 != 0 ){\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 draw_circles(context_userdraw,[x0],[y0],[line_width],line_width,stroke_color,stroke_opacity,1,stroke_color,stroke_opacity,0,1,1);\

 draw_circles(context_userdraw,[x],[y],[line_width],line_width,stroke_color,stroke_opacity,1,stroke_color,stroke_opacity,0,1,1);\

 draw_lines(context_userdraw,[x0,x],[y0,y],line_width,stroke_color,stroke_opacity);\

 if( lu > 0){\

  draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

 }\

}\

};\

function canvas_remove(x,y){\

var marge = 10*line_width;\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   if( confirm(\"remove line ?\" )){\

    context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");context_userdraw.clearRect(0,0,xsize,ysize);\

    if( p%%2 == 0 ){\

     userdraw_x.splice(p,2);userdraw_y.splice(p,2);\

    }\

    else\

    {\

     userdraw_x.splice(p-1,2);userdraw_y.splice(p-1,2);\

    }\

    if(userdraw_x.length < 2){ userdraw_x = [];userdraw_y = [];return;};\

    draw_lines(context_userdraw,userdraw_x,userdraw_y,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);\

   }\

   return;\

  }\

 }\

}\

};",draw_type,num,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);

 

void add_js_arrows(FILE *js_include_file,int num,char *draw_type,int line_width,int type, char *stroke_color,double stroke_opacity,int use_dashed,int dashtype0,int dashtype1,int arrow_head){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var canvas_rect;\

var num = %d;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var arrow_head = %d;\

var x0,y0;\

var type = %d;\

var use_rotate = 0;var angle = 0;var use_translate = 0 ;var vector = [0,0];\

function user_draw(evt){\

var lu = userdraw_x.length;\

if( lu != 0 && lu%%2 == 0){\

 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]);\

}\

var y = evt.clientY - canvas_rect.top;\

if( y < ysize + 1){\

 canvas_rect = canvas_userdraw.getBoundingClientRect();\

 var x = evt.clientX - canvas_rect.left;\

 if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

 };\

 if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

 };\

 if( evt.which == 1 ){\

  if( lu%%2 == 0){\

   x0 = x;y0 = y;\

   if(num == 1){ userdraw_x = [];userdraw_y = [];userdraw_x[0] = x0;userdraw_y[0] = y0;} else {userdraw_x[lu] = x0;userdraw_y[lu] = y0;}\

   user_drag(evt);\

  }\

  else\

  {\

   if( num == 1 ){ userdraw_x[1] = x;userdraw_y[1] = y;} else {userdraw_x[lu] = x;userdraw_y[lu] = y;};\

   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]);\

  }\

 }\

 else\

 {\

  canvas_remove(x,y);\

 }\

}\

};\

function user_drag(evt){\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

var x = evt.clientX - canvas_rect.left;\

var y = evt.clientY - canvas_rect.top;\

var lu = userdraw_x.length;\

if( x_use_snap_to_grid == 1 ){\

  x = snap_to_x(x);\

};\

if( y_use_snap_to_grid == 1 ){\

  y = snap_to_y(y);\

};\

if( lu%%2 != 0 ){\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 draw_arrows(context_userdraw,[x0,x],[y0,y],arrow_head,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,type,use_rotate,angle,0,[1,0,0,1,0,0]);\

 if( lu > 0){\

   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]);\

 }\

}\

};\

function canvas_remove(x,y){\

var marge = 10*line_width;\

for(var p = 0;p < userdraw_x.length ; p++){\

 if(userdraw_x[p] < x + marge && userdraw_x[p] > x - marge ){\

  if(userdraw_y[p] < y + marge && userdraw_y[p] > y - marge ){\

   if( confirm(\"remove line ?\" )){\

    context_userdraw = null;context_userdraw = canvas_userdraw.getContext(\"2d\");context_userdraw.clearRect(0,0,xsize,ysize);\

    if( p%%2 == 0 ){\

     userdraw_x.splice(p,2);userdraw_y.splice(p,2);\

    }\

    else\

    {\

     userdraw_x.splice(p-1,2);userdraw_y.splice(p-1,2);\

    }\

    if(userdraw_x.length < 2){ userdraw_x = [];userdraw_y = [];return;};\

    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],type,use_rotate,angle,0,[1,0,0,1,0,0]);\

   }\

   return;\

  }\

 }\

}\

};",draw_type,num,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1,arrow_head,type);

 

 

void add_js_paths(FILE *js_include_file,int num,char *draw_type,int line_width, int closed_path,char *stroke_color,double stroke_opacity,int use_filled, char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"%s\" on final canvas -->\n\

var path_cnt = 0;\

temp_x = [];\

temp_y = [];\

var num = %d;\

xy_cnt=0;\

var line_width = %d;\

var stroke_color = \"%s\";\

var stroke_opacity = %f;\

var fill_color = \"%s\";\

var fill_opacity = %f;\

var use_filled = %d;\

var use_dashed = %d;\

var dashtype0 = %d;\

var dashtype1 = %d;\

var closed_path = 0;\

var click_cnt=0;\

var x0,y0;\

canvas_rect = canvas_userdraw.getBoundingClientRect();\

function user_draw(evt){\

if(evt.which == 1 ){\

 if( click_cnt == 0 ){\

  click_cnt = 1;\

  user_drag(evt);\

 }\

 else\

 {\

  userdraw_x[path_cnt] = new Array();\

  userdraw_y[path_cnt] = new Array();\

  userdraw_x[path_cnt] = temp_x;\

  userdraw_y[path_cnt] = temp_y;\

  path_cnt++;\

  temp_x = [];\

  temp_y = [];\

  click_cnt = 0;\

  xy_cnt = 0;\

 };\

}\

else\

{\

  canvas_remove(evt.clientX - canvas_rect.left,evt.clientY - canvas_rect.top);\

};\

context_userdraw.clearRect(0,0,xsize,ysize);\

for(var p=0; p < path_cnt; p++){\

 if(userdraw_x[p] != null){\

  draw_paths(context_userdraw,userdraw_x[p],userdraw_y[p],line_width,0,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);\

 };\

};\

};\

function user_drag(evt){\

if(click_cnt == 1 ){\

 temp_y[xy_cnt] = evt.clientY - canvas_rect.top;\

 if( temp_y[xy_cnt] < ysize + 1){\

  temp_x[xy_cnt] = evt.clientX - canvas_rect.left;\

  if( x_use_snap_to_grid == 1 ){\

   temp_x[xy_cnt] = snap_to_x(temp_x[xy_cnt]);\

  };\

  if( y_use_snap_to_grid == 1 ){\

   temp_y[xy_cnt] = snap_to_y(temp_y[xy_cnt]);\

  };\

  xy_cnt++;\

  draw_paths(context_userdraw,temp_x,temp_y,line_width,0,stroke_color,stroke_opacity,use_filled,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1);\

 };\

};\

};\

function canvas_remove(x,y){\

var marge = 4*line_width;\

var tmpx = [];\

var tmpy = [];\

for(var i = 0 ; i < path_cnt; i++){\

 tmpx = userdraw_x[i];\

 if(tmpx != null){\

  tmpy = userdraw_y[i];\

  for(var p = 0;p<tmpx.length;p++){\

   if( x + marge > tmpx[p] &&  x - marge < tmpx[p] ){\

    if( y + marge > tmpy[p] &&  y - marge < tmpy[p] ){\

     if(confirm(\"Remove this drawing ?\")){\

      userdraw_x[i] = null;\

      userdraw_y[i] = null;\

      xy_cnt = 0;click_cnt = 0;\

      return;\

     };\

    };\

   };\

  };\

 };\

};\

};",draw_type,num,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1);

 

void add_js_tooltip(int canvas_root_id,char *tooltip_text,char *bgcolor,int xsize,int ysize){

fprintf(stdout,"\n<!-- begin command intooltip %d -->\n\

<script type=\"text/javascript\">\n\

var xsize = %d;\

var ysize = %d;\

var tooltip%d_obj_x = 0;\

var tooltip%d_obj_y = 0;\

var tooltip%d_flipflop = 0;\

var tooltip%d_obj = document.getElementById(\"canvas_div%d\");\

tooltip%d_obj.style.display=\"none\";\

tooltip%d_obj.style.position=\"absolute\";\

var tooltip%d_link = document.createElement(\"a\");\

tooltip%d_link.addEventListener(\"mousemove\",tooltip%d_drag,false);\

tooltip%d_link.setAttribute(\"onclick\",\"tooltip%d_show()\");\

tooltip%d_link.innerHTML  = \"%s\";\

var tooltip_placeholder = document.getElementById(\"tooltip_placeholder%d\");\

tooltip_placeholder.style.display=\"block\";\

tooltip_placeholder.style.position=\"absolute\";\

tooltip_placeholder.style.backgroundColor=\"%s\";\

tooltip_placeholder.appendChild(tooltip%d_link);\

function tooltip%d_drag(action){\

if(!action){ action = event; }\

if(action.clientX){\

 tooltip%d_obj.style.left = (tooltip%d_mouseX(action) + 10) +\"px\";\

 var ytop = tooltip%d_mouseY(action);\

 if(ytop + ysize < window.innerHeight){\

  tooltip%d_obj.style.top = (ytop - 10) +\"px\";\

 }\

 else\

 {\

  tooltip%d_obj.style.top = parseInt(ytop - 0.8*ysize) +\"px\";\

 }\

}\

else\

{\

 return null;\

}\

}\

function tooltip%d_mouseX(action){\

if(action.pageX){\

 return action.pageX;\

}\

else\

{\

 if(action.clientX){\

  return action.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);\

 }\

 else\

 {\

  return null;\

 }\

}\

}\

function tooltip%d_mouseY(action){\

if(action.pageY){\

 return action.pageY;\

}\

else\

{\

 if(action.clientY){\

  return action.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop);\

 }\

 else\

 {\

  return null;\

 }\

}\

}\

function tooltip%d_show(){\

if(tooltip%d_flipflop == 0){\

 tooltip%d_obj.style.display = \"block\";\

 tooltip%d_flipflop = 1;\

}\

else\

{\

 tooltip%d_flipflop = 0;\

 tooltip%d_obj.style.display = \"none\";\

}\

};\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);

 

}

 

void add_js_arc(FILE *js_include_file,int canvas_root_id,int num,int line_width,char *stroke_color,double stroke_opacity,char *fill_color,double fill_opacity,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin userdraw \"arc\" on final canvas -->\n\

var canvas_rect = canvas_userdraw.getBoundingClientRect();\n\

function user_draw(evt){\

var num = %d;\

var x,xc,x1,x2,y,yc,y1,y2;var lu = userdraw_x.length;\

if( num == 1 && lu == 3 ){ userdraw_x = [];userdraw_y = [];userdraw_radius = [];};\

if(evt.which == 1){\

 x = evt.clientX - canvas_rect.left;\

 y = evt.clientY - canvas_rect.top;\

 if( x_use_snap_to_grid == 1 ){x = snap_to_x(x);};\

 if( y_use_snap_to_grid == 1 ){y = snap_to_y(y);};\

 if(num == 1 && lu == 3){userdraw_x = [];userdraw_y = [];userdraw_radius = [];};\

 lu = userdraw_x.push(x);userdraw_y.push(y);\

 if( lu != 0 && lu%%3 == 0){\

  context_userdraw.clearRect(0,0,xsize,ysize);\

  userdraw_radius = [];\

  for(var p = 0 ; p < lu; p = p + 3){\

    xc = userdraw_x[p];\

    yc = userdraw_y[p];\

    x1 = userdraw_x[p+1];\

    x2 = userdraw_x[p+2];\

    y1 = userdraw_y[p+1];\

    y2 = userdraw_y[p+2];\

    draw_userarc(context_userdraw,xc,yc,x1,y1,x2,y2,%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d);\

  };\

 };\

}\

else\

{\

 if( confirm(\"remove drawing ?\") ){\

  context_userdraw.clearRect(0,0,xsize,ysize);userdraw_x = [];userdraw_y = [];userdraw_radius = [];return;\

 };\

};\

};\

function user_drag(evt){ \

var lu = userdraw_x.length;\

if( (lu+1)%%3 == 0) {\

 var x2 = evt.clientX - canvas_rect.left;\

 var y2 = evt.clientY - canvas_rect.top;\

 var xc = userdraw_x[lu-2];\

 var yc = userdraw_y[lu-2];\

 var x1 = userdraw_x[lu-1];\

 var y1 = userdraw_y[lu-1];\

 context_userdraw.clearRect(0,0,xsize,ysize);\

 draw_userarc(context_userdraw,xc,yc,x1,y1,x2,y2,1,\"255,0,0\",0.6,\"255,255,0\",0.4,0,2,2);\

};\

return;\

};\

var draw_userarc = function(ctx,xc,yc,x1,y1,x2,y2,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1){\

ctx.save();\

if( use_dashed == 1){if(ctx.setLineDash){ctx.setLineDash([dashtype0,dashtype1]);}else{if(ctx.mozDash){ ctx.mozDash = [dashtype0,dashtype1];};};};\

ctx.lineWidth = line_width;\

ctx.strokeStyle =  \"rgba(\"+stroke_color+\",\"+stroke_opacity+\")\";\

ctx.fillStyle = \"rgba(\"+fill_color+\",\"+fill_opacity+\")\";\

var alpha = find_angle(xc,yc,x1,y1,x2,y2);\

if( %d == 1 ){userdraw_radius[0] = alpha;ctx.clearRect(0,0,xsize,ysize);}else{userdraw_radius.push(alpha);};\

var r = Math.sqrt(Math.pow(xc-x2,2)+Math.pow(yc-y2,2));\

var start;var tmp;var beta;\

if( x1 > x2 ){\

 tmp = x2; x2 = x1 ; x1 = tmp;\

 tmp = y2; y2 = y1 ; y1 = tmp;\

};\

if( y1 < yc ){\

 beta = find_angle(xc,yc,x1,yc,x1,y1);\

  if( x1 < xc ){\

   start = Math.PI + beta;\

  }\

  else\

  {\

   start = 2*Math.PI - beta;\

  }\

}\

else\

{\

 beta = find_angle(xc,yc,x2,yc,x2,y2);\

 if(x2 > xc){\

  start = beta;\

 }\

 else\

 {\

  start = Math.PI - beta;\

 }\

};\

ctx.translate(xc,yc);\

ctx.rotate(start);\

ctx.beginPath();\

ctx.arc(0,0,r,0,alpha,false);\

ctx.lineTo(0,0);\

ctx.closePath();\

ctx.fill();\

ctx.stroke();\

ctx.restore();\

};\

function find_angle(xc,yc,x1,y1,x2,y2){\

var a = Math.sqrt(Math.pow(xc-x1,2)+Math.pow(yc-y1,2));\

var b = Math.sqrt(Math.pow(xc-x2,2)+Math.pow(yc-y2,2));\

var c = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));\

return Math.acos((b*b+a*a-c*c)/(2*b*a));\

};",num,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_dashed,dashtype0,dashtype1,num);

 

void add_js_text(FILE *js_include_file,int canvas_root_id,int font_size,char *font_family,char *font_color,double stroke_opacity){

fprintf(js_include_file,"\n<!-- begin command userdraw text -->\n\

canvas_div.addEventListener(\"keydown\",user_text,false);\

var context_userdraw = canvas_userdraw.getContext(\"2d\");\

var font_color = \"%s\";\

var font_opacity = %f;\

var font_size = %d;\

var font_family = \"%s\";\

context_userdraw.fillStyle = \"rgba(\"+font_color+\",\"+font_opacity+\")\";\

context_userdraw.font = font_family;\

var userdraw_text = new Array();\

var txt_cnt = 0;\

var txt=\"\";\

var x_txt = 0;\

var y_txt = 0;\

var w_txt = 0;\

var typing = 0;\

var canvas_rect = canvas_userdraw.getBoundingClientRect();\

function user_draw(evt){\

y_txt = evt.clientY - canvas_rect.top;\

x_txt = evt.clientX - canvas_rect.left;\

if( x_use_snap_to_grid == 1 ){\

  x_txt = snap_to_x(x_txt);\

};\

if( y_use_snap_to_grid == 1 ){\

  y_txt = snap_to_y(y_txt);\

};\

return;\

};\

function user_drag(evt){\

return;\

};\

function user_text(evt){\

var kc = evt.keyCode;var w;\

if( kc== 8 || kc == 27 || kc == 46 ){\

 if(typing == 1 ){\

   w = context_userdraw.measureText(txt).width;\

   context_userdraw.clearRect(x_txt-2,y_txt-font_size-2,w+2,font_size+2);\

   txt = \"\";\

 }\

 else\

 {\

  for( var p=0 ; p < txt_cnt; p++){\

   var tmp = (userdraw_text[p]).split(\":\");\

   w = context_userdraw.measureText(tmp[0]).width;\

   var y1 = y_txt - font_size;\

   var y2 = y_txt + font_size;\

   if( tmp[1] < y2 && tmp[1] > y1){\

    var x1 = x_txt - font_size;\

    var x2 = x_txt + w;\

    if( tmp[0] < x2 && tmp[0] > x1){\

     if (confirm(\"delete this text : \"+tmp[2]+\"?\")){\

      context_userdraw.clearRect(x1,y1,x2,y2);\

      userdraw_text.splice(p,1);\

      txt_cnt--;\

      return;\

     };\

    };\

   };\

  };\

 };\

}\

else\

{\

 if( kc < 126 && kc > 40 ){\

  typing = 1;\

  txt=txt+String.fromCharCode(kc);\

  w = context_userdraw.measureText(txt).width;\

  context_userdraw.save();\

  context_userdraw.fillStyle = \"lightblue\";\

  context_userdraw.beginPath();\

  context_userdraw.rect(x_txt,y_txt-font_size,w,font_size);\

  context_userdraw.closePath();\

  context_userdraw.fill();\

  context_userdraw.restore();\

  context_userdraw.fillText(txt,x_txt,y_txt);\

 }\

 else\

 {\

  if(kc == 13 ){\

   w = context_userdraw.measureText(txt).width;\

   if(w < 1){alert(\"nothing typed...try again\");return;};\

   context_userdraw.clearRect(x_txt,y_txt-font_size,w,font_size);\

   context_userdraw.fillText(txt,x_txt,y_txt);\

   userdraw_text[txt_cnt] = Math.round(x_txt)+\":\"+Math.round(y_txt)+\":\"+txt;\

   txt=\"\";\

   w = 0;\

   txt_cnt++;\

   typing = 0;\

   return;\

  };\

 };\

};\

};",font_color,stroke_opacity,font_size,font_family);

 

 

 

void add_js_mouse(FILE *js_include_file,int canvas_cnt,int canvas_root_id,int precision,char *stroke_color,int font_size,double stroke_opacity,int type){

fprintf(js_include_file,"\n<!-- begin command mouse on current canvas -->\n\

function use_mouse_coordinates(){\

var type = %d;\

var current_canvas = create_canvas%d(%d,xsize,ysize);\

var current_context = current_canvas.getContext(\"2d\");\

current_context.clearRect(0,0,xsize,ysize);\

current_canvas.addEventListener(\"mousemove\",show_coordinate%d,false);\

current_canvas.addEventListener(\"touchmove\",show_coordinate%d,false);\

var prec = Math.log(%d)/(Math.log(10));\

function show_coordinate%d(evt){\

 var canvas_rect = (current_canvas).getBoundingClientRect();\

 var x = evt.clientX - canvas_rect.left;\

 var y = evt.clientY - canvas_rect.top;\

 var m_data = \"\";var l = userdraw_x.length;\

 switch(type){\

  case 0: m_data = \" \"+(px2x(x)).toFixed(prec)+\" \"+unit_x;break;\

  case 1: m_data = \" \"+(px2y(y)).toFixed(prec)+\" \"+unit_y;break;\

  case 2: m_data = \"(\"+(px2x(x)).toFixed(prec)+\":\"+(px2y(y)).toFixed(prec)+\")\";break;\

  case 3: m_data = \" \"+( ( Math.atan( ((xmax - xmin)*(px2y(y))) / ((ymax - ymin)*(px2x(x))) ) )/(Math.PI/180) ).toFixed(prec)+\" \\u00B0 \";break;\

  case 4: if( l > 0 ){ m_data = \" R = \"+((xmax - xmin)*(distance(x,y,userdraw_x[l-1],userdraw_y[l-1]))/xsize).toFixed(prec)+\" \"+unit_x;};break;\

  default:break;\

 };\

 var s = parseInt(0.8*%d*(m_data.toString()).length);\

 current_context.font = \"%dpx Ariel\";\

 current_context.fillStyle = \"rgba(%s,%f)\";\

 current_context.clearRect(0,0,s,1.2*%d);\

 current_context.fillText(m_data,0,%d);\

};\

};",type,canvas_root_id,MOUSE_CANVAS,canvas_root_id,canvas_root_id,precision,canvas_root_id,font_size,font_size,stroke_color,stroke_opacity,font_size,font_size);

void add_safe_eval(FILE *js_include_file){

fprintf(js_include_file," \nfunction safe_eval(exp){\

if(exp.indexOf('^') != -1){\

 exp = exp.replace(/[a-zA-Z]/g,' ');\

 exp = exp.replace(/\\*10\\^-/g,'e-');\

 exp = exp.replace(/\\*10\\^/g,'e+');\

 exp = exp.replace(/10\\^-/g,'1e-');exp = exp.replace(/10\\^/g,'1e+');\

 exp = eval(exp);\

 if(isNaN(exp)){alert(\"invalid input\\ntry just a real number \\ne.g. no calculations...\");return null;}\

 return exp;\

};\

var reg = /(?:[a-z$_][a-z0-9$_]*)|(?:[;={}\\[\\]\"'!&<>^\\\\?:])/ig;\

var valid = true;\

exp = exp.replace(reg,function($0){\

 if(Math.hasOwnProperty($0)){\

  return \"Math.\"+$0;\

 }\

 else\

 {\

  valid = false;\

 }\

}\

);\

if( !valid ){\

 alert(\"hmmm \"+exp+\" ?\"); exp = null;\

}\

else\

{\

 try{ exp = eval(exp); } catch(e){alert(\"Invalid arithmetic expression\"); exp = null;};\

};\

return exp;\

};");

 

void add_slider_display(FILE *js_include_file,int canvas_root_id,int precision,int font_size,char *font_color,double stroke_opacity){

fprintf(js_include_file,"<!-- begin add_slider_display -->\n\

function show_slider_value(value,use_slider_display){\

var current_canvas = create_canvas%d(%d,xsize,ysize);\

var current_context = current_canvas.getContext(\"2d\");\

current_context.clearRect(0,0,xsize,ysize);\

var prec = Math.log(%d)/(Math.log(10));\

var string;\

if(value.length == 2){\

 string = \" \"+value[0].toFixed(prec)+\" \"+unit_x+\":\"+value[1].toFixed(prec)+\" \"+unit_y;\

}else{\

 if(use_slider_display == 2){\

  value[0] = value[0]*180/Math.PI;\

  string = \" \"+value[0].toFixed(prec)+\"\\u00B0\";\

 }else{\

  if(use_slider_display == 3){\

   string = \" \"+value[0].toFixed(prec)+\"\\u03C0 rad\";\

  };\

 };\

};\

var s = parseInt(1.2*%d*(string).length);\

current_context.font = \"%dpx Ariel\";\

current_context.strokeStyle = \"rgba(%s,%.2f)\";\

current_context.clearRect(0,0,s,1.2*%d);\

current_context.fillText(string,0,%d);\

};\n",canvas_root_id,MOUSE_CANVAS,precision,font_size,font_size,font_color,stroke_opacity,font_size,font_size);

void add_slider(FILE *js_include_file,int canvas_root_id,double v1,double v2,int width,int height,int type,char *label,int slider_cnt,char *stroke_color,char *fill_color,int line_width,double opacity,char *font_family,char *font_color,int use_slider_display){

fprintf(js_include_file,"\n<!-- begin add_slider no. %d -->\n\

function add_slider_%d(){\

if( wims_status == \"done\" ){return;};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var slider_type = %d;\

var span = document.createElement(\"span\");\

span.style= \"font:%s;color:%s\";\

var title = document.createTextNode(\" %s \");\

var br = document.createElement(\"br\");\

span.appendChild(title);\

span.appendChild(br);\

tooltip_div.appendChild(span);\

var slider_fillcolor = \"%s\";\

var slider_strokecolor = \"%s\";\

var slider_linewidth = \"%d\";\

var slider_canvas = document.createElement(\"canvas\");\

slider_canvas.id = \"slider_canvas%d\";\

tooltip_div.appendChild(slider_canvas);\

br = document.createElement(\"br\");\

tooltip_div.appendChild(br);\

var slider_width = %d;\

var slider_height = %d;\

var slider_center = %d;\

var slider_radius = 4*slider_linewidth;\

var slider_opacity = %f;\

slider_canvas.width = slider_width;\

slider_canvas.height = slider_height;\

var canvas_rect = (slider_canvas).getBoundingClientRect();\

var slider_ctx = slider_canvas.getContext(\"2d\");\

slider_ctx.font = \"%s\";\

slider_ctx.strokeStyle = \"rgba(\"+slider_strokecolor+\",\"+slider_opacity+\")\";\

slider_ctx.fillStyle = \"rgba(\"+slider_fillcolor+\",\"+slider_opacity+\")\";\

slider_ctx.lineWidth = slider_linewidth;\

slider_ctx.beginPath();\

slider_ctx.arc(10,slider_center,slider_radius,0,2*Math.PI,false);\

slider_ctx.moveTo(10,slider_center);\

slider_ctx.lineTo(slider_width-10,slider_center);\

slider_ctx.rect(0,0,slider_width,slider_height);\

slider_ctx.closePath();\

slider_ctx.fill();\

slider_ctx.stroke();\

slider_canvas.addEventListener(\"mousemove\",slider_%d,false);\

function slider_%d(evt){\

var value_1 = %f;\

var value_2 = %f;\

slider_ctx.clearRect(0,0,slider_width,slider_height);\

var x = evt.clientX - canvas_rect.left;\

var value = x*(value_2 - value_1)/slider_width + value_1;\

slider_ctx.beginPath();\

slider_ctx.arc(x,slider_center,slider_radius,0,2*Math.PI,false);\

slider_ctx.moveTo(10,slider_center);\

slider_ctx.lineTo(slider_width-10,slider_center);\

slider_ctx.rect(0,0,slider_width,slider_height);\

slider_ctx.closePath();\

slider_ctx.fill();\

slider_ctx.stroke();\

dragstuff.Slide( [value] , %d );\

if(%d != 0 ){show_slider_value([value],%d);}\

return;\

};\

};\

add_slider_%d();",slider_cnt,slider_cnt,canvas_root_id,type,font_family,font_color,label,fill_color,stroke_color,line_width,slider_cnt,width,height,(int)(0.5*height),opacity,font_family,slider_cnt,slider_cnt,v1,v2,slider_cnt,use_slider_display,use_slider_display,slider_cnt);

 

 

void add_xyslider(FILE *js_include_file, int canvas_root_id,double v1,double v2,int width,int height,int type,char *label,int slider_cnt,char *stroke_color,char *fill_color,int line_width,double opacity,char *font_family,char *font_color,int use_slider_display){

fprintf(js_include_file,"\n<!-- begin add_slider no. %d -->\n\

function add_slider_%d(){\

if( wims_status == \"done\" ){return;};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var slider_type = %d;\

var span = document.createElement(\"span\");\

span.style= \"font:%s;color:%s\";\

var title = document.createTextNode(\" %s \");\

var br = document.createElement(\"br\");\

span.appendChild(title);\

span.appendChild(br);\

tooltip_div.appendChild(span);\

var slider_fillcolor = \"%s\";\

var slider_click = 0;\

var slider_strokecolor = \"%s\";\

var slider_linewidth = \"%d\";\

var slider_canvas = document.createElement(\"canvas\");\

slider_canvas.id = \"slider_canvas%d\";\

tooltip_div.appendChild(slider_canvas);\

br = document.createElement(\"br\");\

tooltip_div.appendChild(br);\

var slider_width = %d;\

var slider_height = %d;\

var slider_center = %d;\

var slider_radius = 4*slider_linewidth;\

var slider_opacity = %f;\

slider_canvas.width = slider_width;\

slider_canvas.height = slider_height;\

var canvas_rect = (slider_canvas).getBoundingClientRect();\

var slider_ctx = slider_canvas.getContext(\"2d\");\

slider_ctx.font = \"%s\";\

slider_ctx.strokeStyle = \"rgba(\"+slider_strokecolor+\",\"+slider_opacity+\")\";\

slider_ctx.fillStyle = \"rgba(\"+slider_fillcolor+\",\"+slider_opacity+\")\";\

slider_ctx.lineWidth = slider_linewidth;\

slider_ctx.beginPath();\

slider_ctx.arc(10,slider_center,slider_radius,0,2*Math.PI,false);\

slider_ctx.fill();\

slider_ctx.closePath();\

slider_ctx.rect(0,0,slider_width,slider_height);\

slider_ctx.stroke();\

slider_canvas.addEventListener(\"mousemove\",sliderdrag_%d,false);\

slider_canvas.addEventListener(\"mousedown\",sliderclick_%d,false);\

function sliderdrag_%d(evt){\

if(slider_click == 1){\

 var value_1 = %f;\

 var value_2 = %f;\

 var canvas_rect = (slider_canvas).getBoundingClientRect();\

 slider_ctx.clearRect(0,0,slider_width,slider_height);\

 var x = evt.clientX - canvas_rect.left;\

 var y = evt.clientY - canvas_rect.top;\

 var value_x = x*(value_2 - value_1)/slider_width + value_1;\

 var value_y = y*(value_2 - value_1)/slider_height + value_1;\

 slider_ctx.beginPath();\

 slider_ctx.arc(x,y,slider_radius,0,2*Math.PI,false);\

 slider_ctx.fill();\

 slider_ctx.rect(0,0,slider_width,slider_height);\

 slider_ctx.closePath();\

 slider_ctx.stroke();\

 dragstuff.Slide( [value_x,1-1*value_y] , %d );\

 if(%d != 0 ){show_slider_value([value_x,value_y],%d);}\

};\

};\

function sliderclick_%d(evt){\

 if(slider_click == 1){slider_click = 0;}else{slider_click = 1;};\

};\

};\

add_slider_%d();",slider_cnt,slider_cnt,canvas_root_id,type,font_family,font_color,label,fill_color,stroke_color,line_width,slider_cnt,width,height,(int)(0.5*height),opacity,font_family,slider_cnt,slider_cnt,slider_cnt,v1,v2,slider_cnt,use_slider_display,use_slider_display,slider_cnt,slider_cnt);

 

 

void add_calc_y(FILE *js_include_file,int canvas_root_id,char *jsmath){

fprintf(js_include_file,"\n<!-- begin add_calc_y -->\n\

use_jsmath=1;\

function add_calc_y(){\

if( wims_status == \"done\" ){return;};\

var fun = to_js_math(\"%s\");if(fun == null){return;};\

function eval_jsmath(x){return parseFloat(eval(fun));};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var calc_div = document.createElement('div');\

calc_div.id = \"calc_div\";\

tooltip_div.appendChild(calc_div);\

var label_x = \"x\";var label_y = \"y\";\

if( typeof xaxislabel !== 'undefined' ){label_x = xaxislabel;}\

if( typeof yaxislabel !== 'undefined' ){label_y = yaxislabel;}\

calc_div.innerHTML=\"<br /><span style='font-style:italic;font-size:10px'>\"+label_x+\" : <input type='text' size='4' value='' id='calc_input_x' style='text-align:center;color:blue;background-color:orange;' />&nbsp;\"+ label_y+\" : <input type='text' size='6' value='' id='calc_output_y' style='text-align:center;color:blue;background-color:lightgreen;' readonly' /><input id='calc_button' type='button' value='OK' onclick=''  style='color:red;background-color:lightblue;' /></span> \";\

var calc_button = document.getElementById(\"calc_button\");\

calc_button.addEventListener(\"mousedown\",function(e){var x_value=document.getElementById(\"calc_input_x\").value;\

var y_value = eval_jsmath(x_value);\

document.getElementById(\"calc_output_y\").value = y_value;\

if(isNaN(y_value)){return;};\

var canvas = create_canvas%d(123,xsize,ysize);\

var ctx = canvas.getContext(\"2d\");\

draw_crosshairs(ctx,[x2px(x_value)],[y2px(y_value)],1,5,\"#000000\",1,0,0,0,[0,0]);return;},false);\

};add_calc_y();",jsmath,canvas_root_id,canvas_root_id);

void add_trace_js_mouse(FILE *js_include_file,int canvas_cnt,int canvas_root_id,char *stroke_color,char *jsmath,int font_size,double stroke_opacity,int line_width,int crosshair_size){

fprintf(js_include_file,"\n<!-- begin command add_trace_jsmath  trace_canvas -->\n\

use_jsmath=1;\

function use_trace_jsmath(){\

if( wims_status == \"done\" ){return;};\

var label_x = \"x\";var label_y = \"y\";\

if( typeof xaxislabel !== 'undefined' ){label_x = xaxislabel;}\

if( typeof yaxislabel !== 'undefined' ){label_y = yaxislabel;}\

var trace_canvas = create_canvas%d(%d,xsize,ysize);\

var trace_context = trace_canvas.getContext(\"2d\");\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var trace_div = document.createElement('div');\

trace_div.id = \"trace_div\";\

tooltip_div.appendChild(trace_div);\

trace_div.innerHTML = \"<br /><span style='font-style:italic;font-size:10px'>\"+label_x+\" : <input type='text' size='4' value='' id='trace_input_x' style='text-align:center;color:blue;background-color:lightgreen;' />\"+label_y+\" : <input type='text' size='6' value='' id='trace_input_y' style='text-align:center;color:blue;background-color:lightgreen;' readonly' /></span> \";\

canvas_div.addEventListener(\"mousemove\",trace,false);\

canvas_div.addEventListener(\"touchmove\",trace,false);\

var fun = to_js_math(\"%s\");if(fun == null){return;};\

function eval_jsmath(x){return parseFloat(eval(fun));};\

function trace(evt){\

 var canvas_rect = (trace_canvas).getBoundingClientRect();\

 var x_px = evt.clientX - canvas_rect.left;\

 var x = px2x(x_px);\

 var y = eval_jsmath(x);\

 if(isNaN(y)){return;};\

 var y_px = y2px(y);\

 trace_context.clearRect(0,0,xsize,ysize);\

 draw_crosshairs(trace_context,[x_px],[y_px],%d,%d,\"%s\",%f,0,0,0,[0,0]);\

 document.getElementById(\"trace_input_x\").value = x;\

 document.getElementById(\"trace_input_y\").value = y;\

};\

return;\

};use_trace_jsmath();",canvas_root_id,canvas_cnt,canvas_root_id,jsmath,line_width,crosshair_size,stroke_color,stroke_opacity);

 

void add_textarea_xy(FILE *js_include_file, int canvas_root_id){

fprintf(js_include_file,"\n<!-- begin add_textarea_xy -->\n\

function add_textarea_xy(){\

if( wims_status == \"done\" ){return;};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var textarea_div = document.createElement('div');\

textarea_div.id = \"textarea_div\";\

tooltip_div.appendChild(textarea_div);\

var label_x = \"x\";var label_y = \"y\";\

if( typeof xaxislabel !== 'undefined' ){label_x = xaxislabel;}\

if( typeof yaxislabel !== 'undefined' ){label_y = yaxislabel;}\

textarea_div.innerHTML=\"\

<table style=\'border:1px solid black;background-color:#ffffa0\' >\

<tr>\

<td><input id='textarea_ok_button' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;'/></td>\

<td><input id='textarea_nok_button' type='button' value='NOK' onclick='' style='color:blue;background-color:red;'/></td>\

</tr>\

<tr>\

<td><em>\"+label_x+\"</em></td>\

<td><em>\"+label_y+\"</em></td>\

</tr>\

<tr>\

<td><textarea rows='5' cols='2' id='userinput_x' style='text-align:center;color:blue;background-color:orange;' ></textarea></td>\

<td><textarea rows='5' cols='2' id='userinput_y' style='text-align:center;color:blue;background-color:orange;' ></textarea></td>\

</tr>\

</table>\";\

var textarea_ok_button = document.getElementById(\"textarea_ok_button\");\

var textarea_nok_button = document.getElementById(\"textarea_nok_button\");\

textarea_ok_button.addEventListener(\"mousedown\",function(e){user_redraw(1);return;},false);\

textarea_nok_button.addEventListener(\"mousedown\",function(e){user_redraw(-1);return;},false);\

return;\

};add_textarea_xy();",canvas_root_id);

 

 

void add_setlimits(FILE *js_include_file, int canvas_root_id){

fprintf(js_include_file,"\n<!-- begin add_setlimits -->\n\

use_pan_and_zoom = 1;\

function use_setlimits(){\

if( wims_status == \"done\" ){return;};\

var label_x = \"x\";var label_y = \"y\";\

if( typeof xaxislabel !== 'undefined' ){label_x = xaxislabel;}\

if( typeof yaxislabel !== 'undefined' ){label_y = yaxislabel;}\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var setlim_div = document.createElement('div');\

setlim_div.id = \"setlim_div\";\

tooltip_div.appendChild(setlim_div);\

setlim_div.innerHTML=\"<br /><span style='font-style:italic;font-size:10px'>\"+label_x+\"min = <input type='text' size='4' value='\"+xmin+\"' id='userinput_xmin' style='text-align:center;color:blue;background-color:orange;' /> \"+label_x+\"max = <input type='text' size='4' value='\"+xmax+\"' id='userinput_xmax' style='text-align:center;color:blue;background-color:orange;' /><br />\"+label_y+\"min = <input type='text' size='4' value='\"+ymin+\"' id='userinput_ymin' style='text-align:center;color:blue;background-color:orange;' /> \"+label_y+\"max = <input type='text' size='4' value='\"+ymax+\"' id='userinput_ymax' style='text-align:center;color:blue;background-color:orange;' /><br /><input id='set_limits' type='button' value='OK' onclick='' style='color:red;background-color:lightblue;' />\";\

var setlimit_button = document.getElementById(\"set_limits\");\

function set_limits(e){\

xmin = safe_eval(document.getElementById('userinput_xmin').value);\

xmax = safe_eval(document.getElementById('userinput_xmax').value);\

ymin = safe_eval(document.getElementById('userinput_ymin').value);\

ymax = safe_eval(document.getElementById('userinput_ymax').value);\

if(xmin > xmax || ymin > ymax){alert(\"your limits are not correct...\");return;}\

try{start_canvas%d(1234)}catch(e){};try{dragstuff.Zoom(xmin,xmax,ymin,ymax)}catch(e){};return;};\

setlimit_button.addEventListener(\"mousedown\",function(e){set_limits();},false);\

};use_setlimits();",canvas_root_id,canvas_root_id);

 

void add_input_jsfunction(FILE *js_include_file, int canvas_root_id,int num,char *input_style,int input_cnt,char *stroke_color,float stroke_opacity,int line_width,int use_dashed,int dashtype0,int dashtype1){

fprintf(js_include_file,"\n<!-- begin add_input_jsfunction -->\n\

function clear_jsfunction(id){\

try{\

 var canvas_plot = document.getElementById(\"wims_canvas%d\"+id);\n\

 var canvas_plot_ctx = canvas_plot.getContext(\"2d\");\n\

 if( confirm(\"clear function plot?\") ){\

  canvas_plot_ctx.clearRect(0,0,xsize,ysize);\n\

  document.getElementById('canvas_input%d').value = \"\";\n\

 };\n\

 return;\n\

}catch(e){alert(\"nothing to remove...\");};\n\

return;\n\

};\n\

function add_input_jsfunction(){\

var num = %d;\n\

var canvas_plot_id = %d;\n\

if( wims_status == \"done\" ){return;};\n\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\n\

var input_jsfunction_div = document.createElement('div');\n\

input_jsfunction_div.id = \"input_jsfunction_div\";\n\

tooltip_div.appendChild(input_jsfunction_div);\n\

if( typeof xaxislabel == 'undefined' ){var xaxislabel = \"function\";}\

input_jsfunction_div.innerHTML=\"<br /><span style='font-style:italic;font-size:10px'><b>\"+xaxislabel+\" : <input type='text' size='16' value='' id='canvas_input%d' 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> \";\n\

var update_button = document.getElementById(\"update_button\");\n\

var delete_button = document.getElementById(\"delete_button\");\n\

update_button.addEventListener(\"mousedown\",function(e){jsplot(canvas_plot_id,document.getElementById('canvas_input%d').value,%d,'%s',%.2f,%d,%d,%d);return;},false);\

delete_button.addEventListener(\"mousedown\",function(e){clear_jsfunction(canvas_plot_id);return;},false);\n\

};add_input_jsfunction();",canvas_root_id,input_cnt,num,USERDRAW_JSPLOT,canvas_root_id,input_cnt,input_style,input_cnt,line_width,stroke_color,stroke_opacity,use_dashed,dashtype0,dashtype1);

 

 

 

void add_input_xy(FILE *js_include_file, int canvas_root_id){

fprintf(js_include_file,"\n<!-- begin add_input_xy -->\n\

function add_input_xy(){\

if( wims_status == \"done\" ){return;};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var input_xy_div = document.createElement('div');\

input_xy_div.id = \"input_xy_div\";\

tooltip_div.appendChild(input_xy_div);\

var label_x = \"x\";var label_y = \"y\";\

input_xy_div.innerHTML=\"<br /><span style='font-style:italic;font-size:10px'><b>( <input type='text' size='6' value='' id='userinput_x' style='text-align:center;color:blue;background-color:orange;' /> : <input type='text' size='6' value='' id='userinput_y' style='text-align:center;color:blue;background-color:orange;' /> )</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> \";\

var update_button = document.getElementById(\"update_button\");\

var delete_button = document.getElementById(\"delete_button\");\

update_button.addEventListener(\"mousedown\",function(e){user_redraw(1);return;},false);\

delete_button.addEventListener(\"mousedown\",function(e){user_redraw(-1);return;},false);\

};add_input_xy();",canvas_root_id);

 

void add_input_x1y1x2y2(FILE *js_include_file, int canvas_root_id){

fprintf(js_include_file,"\n<!-- begin add_input_x1y1x2y2 -->\n\

function add_input_x1y1x2y2(){\

if( wims_status == \"done\" ){return;};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var input_x1y1x2y2_div = document.createElement('div');\

input_x1y1x2y2_div.id = \"input_x1y1x2y2_div\";\

tooltip_div.appendChild(input_x1y1x2y2_div);\

input_x1y1x2y2_div.innerHTML=\"<br /><span><b>( <input type='text' size='6' value='' id='userinput_x1' style='text-align:center;color:blue;background-color:orange;' /> : <input type='text' size='6' value='' id='userinput_y1' style='text-align:center;color:blue;background-color:orange;' /> ) ----- ( <input type='text' size='6' value='' id='userinput_x2' style='text-align:center;color:blue;background-color:orange;' /> : <input type='text' size='6' value='' id='userinput_y2' style='text-align:center;color:blue;background-color:orange;'/> )</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> \";\

var update_button = document.getElementById(\"update_button\");\

var delete_button = document.getElementById(\"delete_button\");\

update_button.addEventListener(\"mousedown\",function(e){user_redraw(1);return;},false);\

delete_button.addEventListener(\"mousedown\",function(e){user_redraw(-1);return;},false);\

};add_input_x1y1x2y2();",canvas_root_id);

 

void add_input_xyr(FILE *js_include_file, int canvas_root_id){

fprintf(js_include_file,"\n<!-- begin add_input_xyr -->\n\

function add_input_xyr(){\

if( wims_status == \"done\" ){return;};\

var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\

var input_xyr_div = document.createElement('div');\

input_xyr_div.id = \"input_xyr_div\";\

tooltip_div.appendChild(input_xyr_div);\

input_xyr_div.innerHTML=\"<br /><span style='font-style:italic;font-size:10px'><b>Center : ( <input type='text' size='6' value='' id='userinput_x' style='text-align:center;color:blue;background-color:orange;' /> : <input type='text' size='6' value='' id='userinput_y' style='text-align:center;color:blue;background-color:orange;' /> ) Radius : <input type='text' size='6' value='' id='userinput_r' style='text-align:center;color:blue;background-color:orange;' /></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> \";\

var update_button = document.getElementById(\"update_button\");\

var delete_button = document.getElementById(\"delete_button\");\

update_button.addEventListener(\"mousedown\",function(e){user_redraw(1);return;},false);\

delete_button.addEventListener(\"mousedown\",function(e){user_redraw(-1);return;},false);\

};add_input_xyr();",canvas_root_id);

 

 

void add_input_circle(FILE *js_include_file,int type,int num){

fprintf(js_include_file,"\n<!-- begin add_input_circle -->\n\

function user_redraw(t){\

var type = %d;\

var num = %d;\

var lu = userdraw_x.length;\

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);\

 };\