WebSVN – wimsdev – Diff – /trunk/wims/src/Misc/canvasdraw/canvasmacro.c



 ctx.stroke();\
};draw_zoom_buttons();",BG_CANVAS,canvas_root_id,canvas_root_id,canvas_root_id,stroke_color,stroke_opacity);
}
 
void add_js_popup(char *getfile_cmd){
  fprintf(stdout,"\n<!-- begin command popup %d -->\n\
<script>\n\
if( wims_status != 'done'){\
 var popup = window.open('','','toolbar=no,scrollbars=yes,menubar=no,location=no,resizable=yes,top=4,left=4,status=no, width = %dpx, height = %dpx');\
 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>\";\
 popup.document.write(popupHTML);\

canvas_root_id,
canvas_root_id);
}
 
void add_js_tooltip(char *tooltip_text,char *bgcolor){
  fprintf(stdout,"\n<!-- begin command intooltip %d -->\n\
<script>\n\
var xsize = %d;\
var ysize = %d;\
var tooltip%d_obj_x = 0;\
var tooltip%d_obj_y = 0;\

 } 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);
 
}
 
 
/*
 
type = 0 : x-values only [command mousex]
type = 1 : y-values only [command mousey]

  var x = evt.clientX - mouse_canvas_rect.left;\
  var y = evt.clientY - mouse_canvas_rect.top;\
 
*/
void add_js_mouse(int canvas_cnt,int precision,char *stroke_color,int font_size,double stroke_opacity,int type){
  fprintf(js_include_file,"\n/* command mouse on mouse canvas */\
function use_mouse_coordinates(){\
 var display_type = %d;\
 var canvas_type = %d;\
 var mouse_canvas = create_canvas%d(canvas_type,xsize,ysize);\
 var mouse_context = mouse_canvas.getContext(\"2d\");\

show_display = 4 delta degrees
show_display = 5 delta X:Y
 
*/
void add_slider_display(int precision,int font_size,char *font_color,double stroke_opacity){
  fprintf(js_include_file,"\n/* add_slider_display */\
var slider_prec = Math.log(%d)/(Math.log(10));\
 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);\

 current_context.clearRect(0,0,s,1.2*%d);\
 current_context.fillText(string,0,%d);};",precision,canvas_root_id,MOUSE_CANVAS,font_size,font_size,font_color,stroke_opacity,font_size,font_size);
}
 
void add_slider(int anim){
  if(anim != 2 ){
    fprintf(js_include_file,"\n/* add_slider aux*/\
if( typeof( slidergroup) !== 'object'){var slidergroup = [];};\
function rotateXY(obj,angle){\
 if( typeof(angle) === 'undefined' ){console.log('rotateXY() angle undefined');return obj;};\
 var len = obj.x.length;\
 if( typeof(len) === 'undefined' ){obj.angle = angle;return obj;};\

 for(var p = 0 ; p < len ; p++ ){\
  x = obj.x[p];\
  y = obj.y[p];\
  obj.x[p] = (cos * (x - xc)) + (sin * (y - yc)) + xc;\
  obj.y[p] = (cos * (y - yc)) - (sin * (x - xc)) + yc;\
 };\
 return obj;\
};\
function rotateARC(obj,angle){\
 obj.h[0] = angle;\
 obj.angle = -1*angle;\

  };\
 };\
 return;\
};\
");
  }
  if(anim == 0){fprintf(js_include_file,"\n/* add_slider */\
if( typeof(unit_x) === 'undefined' ){var unit_x = ' ';};\
if( typeof(unit_y) === 'undefined' ){var unit_y = ' ';};\
function slider(XYR,text,slider_id ,width,height,linewidth,fillcolor,strokecolor,opacity,min,max,fontfamily,display){\
 if( wims_status == \"done\" ){return;};var tooltip_div = document.getElementById(\"tooltip_placeholder_div%d\");\
 var xcenter = 0.5*width;var rcenter = 0.5*width;fillcolor = 'rgba('+fillcolor+','+opacity[0]+')' || 'rgba(200,200,0,0.2)';\

  if( display > 0 ){show_slider_value(value,display);};\
  var dx = px - xcenter;xcenter = px;\
  slider_show_it(XYR,dx,value,slider_id);\
 };\
};",canvas_root_id);
  }
  if( anim == 1){
    fprintf(js_include_file,"\n/* add_anim_slider */\
function animslider(XYR,text,slider_id ,width,height,linewidth,fillcolor,strokecolor,opacity,min,max,fontfamily,display)\
{\
 document.addEventListener('readystatechange',function(event){\
  if(event.target.readyState === 'complete'){\
   var value= 0;\

    if( value > width ){clearInterval( timer );}\
   },240);\
  };\
 },false);\
};");
  }
 
  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*/
    fprintf(js_include_file,"\n/* add group move_ */\
if( typeof( slidergroup) !== 'object'){var slidergroup = [];};\
var move_group = function(num){\
 canvas_div.addEventListener( 'mousemove' ,slidegroup_m,false);\
 canvas_div.addEventListener( 'mousedown' ,slidegroup_d,false);\
 canvas_div.addEventListener( 'mouseup'   ,slidegroup_u,false);\

   };\
  };\
  dragstuff.valid = true;\
 };\
};");
  }
 
}
/*      dragdrop_reply[obj.object_cnt] = obj;
*/
/*
adds inputfield for x-value: returns the js-calculated y-value after click on 'OK' button
draws a non-configurable crosshair on this calculated location
*/
void add_calc_y(char *jsmath,int font_size,char *css_class){
  fprintf(js_include_file,"\n/* add_calc_y */\
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;}\

 function is called "use_mouse_coordinates() and thus can not be combined with command 'mouse'
*/
void add_trace_js_mouse(int canvas_cnt, char *stroke_color, char *jsmath,
  int font_size, double stroke_opacity, int line_width,
  int crosshair_size,char *css_class){
    fprintf(js_include_file,"\n/* add_trace_jsmath */\
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;}\

  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,font_size,css_class,css_class,jsmath,line_width,crosshair_size,stroke_color,stroke_opacity);
  }
 
/*
add a table with 2 textarea's labeled 'x' 'y' ( or 'xlabel' 'ylabel' if defined)
add two buttons: OK and NOK (OK draws; NOK will delete last item pair from userdraw_x / userdraw_y array's
*/
void add_textarea_xy(char *css_class){
  fprintf(js_include_file,"\n/* add_textarea_xy */\
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\";\

var textarea_nok_button = document.getElementById(\"textarea_nok_button\");\
textarea_ok_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
textarea_nok_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
return;\
};add_textarea_xy();",canvas_root_id,css_class,css_class);
  }
 
/*
 
*/
void add_setlimits(int font_size,char *css_class){
  fprintf(js_include_file,"\n/* add_setlimits */\
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;}\

setlimit_button.addEventListener(\"mousedown\",function(e){set_limits();},false);\
};use_setlimits();",canvas_root_id,font_size,css_class,css_class,css_class,css_class);
}
 
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){
  fprintf(js_include_file,"\n/* add_input_jsfunction */\
function clear_jsfunction(canvas_plot_id,input_field){\
 try{\
  var canvas_plot = document.getElementById(\"wims_canvas%d\"+canvas_plot_id);\
  var canvas_plot_ctx = canvas_plot.getContext(\"2d\");\
  if( confirm(\"clear function plot?\") ){\

 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);\
 delete_button.addEventListener(\"mousedown\",function(e){clear_jsfunction(canvas_plot_id,input_field);return;},false);\
};\
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);
}
 
 
/*
adds 2 inputfields (x:y) and 'ok' | 'nok' button
these are used for user drawing with inputfields...
function update_me(){\
 var x = safe_eval(document.getElementById('userinput_x').value);\
 var y = safe_eval(document.getElementById('userinput_y').value);\
 userdraw_x.push(x2px(x));userdraw_y.push(y2px(y));\
 return;\
};\
*/
 
void add_input_xy(int font_size,char *css_class){
  fprintf(js_include_file,"\n/* add_input_xy */\
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\";\

var update_button = document.getElementById(\"update_button\");\
var delete_button = document.getElementById(\"delete_button\");\
update_button.addEventListener(\"mousedown\",function(e){update_me();redraw_userdraw();return;},false);\
delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
};add_input_xy();",canvas_root_id,font_size,css_class,css_class);
}
 
/* adds 4 inputfields (x1:y1) --- (x2:y2) and 'ok' + 'nok' button */
void add_input_x1y1x2y2(int font_size,char *css_class){
  fprintf(js_include_file,"\n/* add_input_x1y1x2y2 */\
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\";\

var update_button = document.getElementById(\"update_button\");\
var delete_button = document.getElementById(\"delete_button\");\
update_button.addEventListener(\"mousedown\",function(e){redraw_userdraw();return;},false);\
delete_button.addEventListener(\"mousedown\",function(e){remove_last();return;},false);\
};add_input_x1y1x2y2();",canvas_root_id,font_size,css_class,css_class,css_class,css_class);
}
 
/* adds 3 inputfields Center (x:y) Radius r and 'ok'+'nok' buttons */
void add_input_xyr(int font_size,char *css_class){
  fprintf(js_include_file,"\n/* add_input_xyr */\
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\";\

type = 0 : a point ...radius is fixed
type = 1 : a circle ... read inputfield userinput_r
num = 1 : a single point / circle
num = 2 : multiple points / circles
*/
  fprintf(js_include_file,"\n/* add_input_circle */\
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);};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;};\

 return;\
};",type,num);
}
/* draw crosshairs via inputfields x/y */
void add_input_crosshair(int num){
  fprintf(js_include_file,"\n/* add_input_crosshair */\
function user_redraw(t){\
 var lu = userdraw_x.length;\
 if( t == -1 && lu > 0){\
  userdraw_x.splice(lu-1,1);\
  userdraw_y.splice(lu-1,1);\

};",num);
}
 
/* draw arrows via inputfields x/y */
void add_input_arrow(int num){
  fprintf(js_include_file,"\n/* add_input_arrow */\
function user_redraw(t){\
 var lu = userdraw_x.length;\
 if( t == -1 && lu > 1 ){\
  userdraw_x.splice(lu-2,2);\
  userdraw_y.splice(lu-2,2);\
  context_userdraw.clearRect(0,0,xsize,ysize);\
  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]);\
  return;\
 };\
 var add_x1 = safe_eval( document.getElementById(\"userinput_x1\").value );\
 var add_y1 = safe_eval( document.getElementById(\"userinput_y1\").value );\
 var add_x2 = safe_eval( document.getElementById(\"userinput_x2\").value );\
 var add_y2 = safe_eval( document.getElementById(\"userinput_y2\").value );\
 if( add_x1 != null && add_y1 != null && add_x2 != null && add_y2 != null ){\
  if( %d == 2 ){\
    var s = userdraw_x.length;\
    userdraw_x[lu] = x2px(add_x1);\
    userdraw_y[lu] = y2px(add_y1);\
    userdraw_x[lu+1] = x2px(add_x2);\
    userdraw_y[lu+1] = y2px(add_y2);\
  } else {\
   userdraw_x[0] = x2px(add_x1);\
   userdraw_y[0] = y2px(add_y1);\
   userdraw_x[1] = x2px(add_x2);\
   userdraw_y[1] = y2px(add_y2);\

};",num);
}
 
/* draw line via inputfields x/y */
void add_input_line(int num){
  fprintf(js_include_file,"\n/* line via inputfields  */\
function user_redraw(t){\
 var lu = userdraw_x.length;\
 if( t == -1 && lu > 1){\
  userdraw_x.splice(lu-2,2);\
  userdraw_y.splice(lu-2,2);\

}
 
 
/* draw polyline via inputfields x/y */
void add_input_polyline(){
  fprintf(js_include_file,"\n/* polyline_segment via inputfields */\
function user_redraw(t){\
 var lu = userdraw_x.length;\
 cnt = 1;\
 if( t == -1 && lu > 0){\
  userdraw_x.splice(lu-1,1);\

 return;\
};");
}
/* draw segment(s) via inputfields x/y */
void add_input_segment(int num){
  fprintf(js_include_file,"\n/* add_input_segment */\
function user_redraw(t){\
 var lu = userdraw_x.length;\
 if( t == -1 && lu > 1){\
  userdraw_x.splice(lu-2,2);\
  userdraw_y.splice(lu-2,2);\

};",num);
}
 
/* draw demilines(s) via inputfields x/y */
void add_input_demiline(int num){
  fprintf(js_include_file,"\n/* add_input_segment */\
function user_redraw(t){\
 var lu = userdraw_x.length;\
 if( t == -1 && lu > 1){\
  userdraw_x.splice(lu-2,2);\
  userdraw_y.splice(lu-2,2);\

 
7/2022: preserve all div's with html ('<' && '/>') eg mathml,katex,html and all external objects placed with function 'place_image_on_canvas(id)'
...hope this does not interfere with other things
https://wimsedu.info/?topic=geometrie-interactive-avec-canvasdraw
*/
  fprintf(js_include_file,"\n/* add clear button */\
clear_draw_area%d = function(){\
 if(typeof(fill_canvas_no) === 'number'){\
  var chk = document.getElementById('wims_canvas%d'+fill_canvas_no);\
  if( chk ){\
   var fill_ctx = chk.getContext(\"2d\");fill_ctx.clearRect(0,0,xsize,ysize);\

};\
add_clear_button();",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,css_class,button_text,canvas_root_id);
}
 
void add_color_palette(char *css_class){
  fprintf(js_include_file,"\n/* add color palette */\
function add_color_palette(){\
 var tooltip_placeholder_div = document.getElementById(\"tooltip_placeholder_div%d\");\
 var clen = palettecolors.length;\
 for( var p = 0 ; p < clen ; p++ ){\
  var button = document.createElement('input');\

 };
int NUMBER_OF_COLORNAMES=(sizeof(colors)/sizeof(colors[0]));
 
/* 10/2016 does not react to border color !! just any border will stop the filling */
void add_js_filltoborder(int canvas_type){
  fprintf(js_include_file,"\n/* command filltoborder */\
function filltoborder(xs,ys,bordercolors,colors,fill_canvas_no,use_special_filling,fill_ctx){\
 document.body.style.cursor = 'wait';\
 var canvas = document.getElementById(\"wims_canvas%d%d\");\
 if( ! canvas ){ return; };\
 document.body.style.cursor = 'wait';\

}
 
void add_js_ruler(double x,double y,double sizex,double sizey,char *font,
char *stroke_color,double stroke_opacity,char *fill_color,double fill_opacity,
int line_width,int dynamic,int use_snap){
  fprintf(js_include_file,"\n/* command ruler */\
 var ruler_data = new Array(3);\
 var ruler%d = function(){\
  var use_snap = %d;\
  var full = 2*Math.PI;\
  var once = true;\

  ruler%d();",dynamic,canvas_root_id);
 }
}
 
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){
 
/*
use_slider_display = 2 : angle in degrees
use_slider_display = 3 : angle in radians
void add_slider_display(FILE *js_include_file,int canvas_root_id,int precision,int font_size,char *font_color,double stroke_opacity){
*/
 
  if( type == 1 ){ /* geodriehoek */
    fprintf(js_include_file,"\n/* command protractor type 1 */\
 var protractor_data = new Array(3);\
 var protractor%d = function(){\
  var once = true;\
  var use_snap = %d;\
  var full = 2*Math.PI;\

   ctx_temp.beginPath();\
   ctx_temp.moveTo(xcenter-half,ycenter );\
   ctx_temp.lineTo(xcenter,ycenter-half);\
   ctx_temp.lineTo(xcenter+half,ycenter);\
   ctx_temp.lineTo(xcenter-half,ycenter);\
   ctx_temp.moveTo(xcenter,ycenter );\
   ctx_temp.lineTo(xcenter+0.5*half,ycenter-0.5*half);\
   ctx_temp.moveTo(xcenter,ycenter );\
   ctx_temp.lineTo(xcenter-0.5*half,ycenter-0.5*half);\
   ctx_temp.moveTo(xcenter,ycenter );\
   ctx_temp.lineTo(xcenter,ycenter-half);\
   ctx_temp.closePath();\
   ctx_temp.fill();\
   ctx_temp.stroke();\
   ctx_temp.beginPath();\
   ctx_temp.arc(xcenter,ycenter,radius1,0,Math.PI,false);\
   ctx_temp.closePath();\
   if( use_scale == 1 ){\
    ctx_temp.fillStyle = ctx_temp.strokeStyle;\

   ctx_temp.drawImage(canvas,xcenter,ycenter);\
   ctx_temp.save();\
   once = false;\
  };\
  ",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);
  }
 
  if( type != 1 ){
    fprintf(js_include_file,"\n/* command protractor type 0 */\
 var protractor_data = new Array(3);\
 var protractor%d = function(){\
  var once = true;\
  var use_snap = %d;\
  var full = 2*Math.PI;\

   };\
   ctx_temp.drawImage(canvas,0,0);\
   ctx_temp.save();\
   once = false;\
  };",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);
  }
  if( dynamic == -1 ){ /* rotate the protractors */
    fprintf(js_include_file,"\
  var protractor_x = xcenter;\
  var protractor_y = ycenter;\
  ctx.drawImage(canvas_temp,0,0);\
  var angle = 0;\
  if(wims_status != \"done\"){\

    default:protractor_stop(evt);\
   };\
  };\
 };\
 protractor%d();",canvas_root_id);
 
  }
  else
  {
    fprintf(js_include_file,"\
  ctx.save();\
  ctx.translate(xcenter,ycenter);\
  ctx.rotate(%d*Math.PI/180);\
  ctx.translate( -1*xcenter, -1*ycenter );\
  ctx.drawImage( canvas_temp,0,0 );\
  ctx.restore();\
 };\
 protractor%d();\
",dynamic,canvas_root_id);
  } /* end dynamic == -1*/
 
}
 
 
 
 
Subversion Repositories wimsdev

(root)/trunk/wims/src/Misc/canvasdraw/canvasmacro.c – Rev 17351 → 18556
