WebSVN – wimsdev – Blame – /trunk/wims/src/Misc/canvasdraw/canvasdraw.c

Rev	Author	Line No.	Line
15111	schaersvoo	1	/*27/7/2013 version 0.01
7614	schaersvoo	2	"Inspired" by FLY program: http://martin.gleeson.com/fly
		3	*********************************************************************************
18552	bpr	4	* J.M. Evers 7/2013 *
		5	* This is all just amateur scriblings... So no copyrights. *
		6	* This source code file, and compiled objects derived from it, *
		7	* can be used and distributed without restriction, including for commercial use *
		8	* No warrenty whatsoever *
7614	schaersvoo	9	*********************************************************************************
		10	*/
18552	bpr	11	#define VERSION "0.5"
18104	georgesk	12
		13	#define _GNU_SOURCE
		14	#include <string.h>
		15
7848	bpr	16	#include "canvasdraw.h"
15348	bpr	17	void *tmp_buffer;
18552	bpr	18	FILE *js_include_file;
7614	schaersvoo	19	/******************************************************************************
		20	** Internal Functions
		21	******************************************************************************/
18552	bpr	22	void add_to_buffer(char tmp); / add tmp_buffer to the buffer */
		23	void sync_input(FILE infile);/ proceed with inputfile */
		24	void reset();/* reset some global variables like "use_filled", "use_dashed" */
		25	int get_token(FILE infile); / read next char until EOL*/
18623	bpr	26	char *fillcolor;
		27	int x2px(double x);
		28	int y2px(double y);
18606	bpr	29
18552	bpr	30	double px2x(int x);
		31	double px2y(int y);
		32	double get_real(FILE infile,int last); / read a value; calculation and symbols allowed */
		33	char str_replace ( const char word, const char sub_word, const char rep_word );
18623	bpr	34	char get_color(FILE infile,int last); /* read hex-color or colorname -> hex */
18552	bpr	35	char get_string(FILE infile,int last); /* get the string at the end of a command */
		36	char get_string_argument(FILE infile,int last); /* the same, but with "comma" as separator */
18558	bpr	37	int hypgeodaux(double q, double res, int full);
18552	bpr	38	char convert_hex2rgb(char hexcolor);
		39	void make_js_include(int canvas_root_id);
		40	void check_string_length(int length);/* checks if the length of string argument of command is correct */
		41	FILE *js_include_file;
		42	FILE get_file(int line_number, char **filename);
		43	FILE infile; / will be stdin */
7614	schaersvoo	44	/******************************************************************************
		45	** global
		46	******************************************************************************/
		47	int finished = FALSE;/* main variable for signalling the end of the fly-script ; if finished = 1 ; write to stdout or canvasz */
		48	int line_number = 1;/* used in canvas_error() ; keep track of line number in canvasdraw/fly - script */
		49	/* set some variables to avoid trouble (NaN) in case of syntax and other usage errors */
		50	int xsize = 320;
		51	int ysize = 320;
		52	double xmin = 0.0;
		53	double xmax = 320.0;
		54	double ymin = 0.0;
		55	double ymax = 320.0;
11893	schaersvoo	56	double tmax = 0;
		57	double tmin = 0;
7614	schaersvoo	58	/* flag to indicate parsing of line status */
8224	bpr	59	int done = FALSE;
7614	schaersvoo	60	int type; /* eg command number */
15111	schaersvoo	61	int onclick = 0;
		62	/*
15116	bpr	63
		64	1 = onclick ;
		65	2 = draggable ;
		66	3 = click+slideable ;
		67	4 = slideable without click
15111	schaersvoo	68	5 = draggable + slideable
		69	*/
14208	schaersvoo	70	char *slider_type="0";
15111	schaersvoo	71	char *my_sliders = "[-1]";
		72	int use_slider = -1;
		73	int last_slider = 0;
		74	double double_data[MAX_INT+1];
		75	int int_data[MAX_INT+1];
		76	int dragstuff[MAX_DRAGSTUFF];
		77	int js_function[MAX_JS_FUNCTIONS]; /* javascript functions include objects on demand basis: only once per object type */
		78	double affine_matrix[] = {1,0,0,1,0,0};
7785	schaersvoo	79	int use_affine = FALSE;
7614	schaersvoo	80	int use_rotate = FALSE;
14078	bpr	81	int use_filled = 0; /* 0:no fill, 1:fill,2=grid?,3=hatch?,4=diamond?,5=dot?,6=image? */
		82	int use_dashed = FALSE; /* dashing not natively supported in firefox, for now... */
15111	schaersvoo	83	double angle = 0.0;
7614	schaersvoo	84	char buffer[MAX_BUFFER];/* contains js-functions with arguments ... all other basic code is directly printed into js-include file */
9329	schaersvoo	85	char *getfile_cmd = "";
15111	schaersvoo	86	int reply_format = 0;
		87	unsigned int canvas_root_id;
		88	char *css_class;
		89	int font_size;
		90	char *draw_type;
		91	int jsplot_cnt = -1; /* keepint track on the curve identity */
		92	int input_cnt = 0;
		93	int dashtype[2] = { 4 , 4 }; /* just line_px and space_px: may have more arguments...if needed in future */
		94	char *function_label = "[\"f(x)=\",\"g(x)=\",\"h(x)=\"]";
		95	int drag_type = -1;/* 0,1,2: xy,x,y */
		96	int use_offset = 0;/* use_offset only for text shape objects... 0=none;1=yoffset;2=xoffset;3=xyoffset;4=centered*/
		97	int linegraph_cnt = 0; /* identifier for command 'linegraph' ; multiple line graphs may be plotted in a single plot*/
		98	int barchart_cnt = 0; /* identifier for command 'barchart' ; multiple charts may be plotted in a single plot*/
		99	int legend_cnt = -1; /* to allow multiple legends to be used, for multiple piecharts etc */
		100	int use_axis = FALSE;
		101	int use_axis_numbering = -1;
		102	int no_reset = FALSE;
		103
7614	schaersvoo	104	/******************************************************************************
		105	** Main Program
		106	******************************************************************************/
		107	int main(int argc, char *argv[]){
18552	bpr	108	/* need unique id for every call to canvasdraw: rand(); is too slow...will result in many identical id's */
		109	struct timeval tv;struct timezone tz;gettimeofday(&tv, &tz);
		110	canvas_root_id = (unsigned int) tv.tv_usec;
		111	infile = stdin;/* read flyscript via stdin */
		112	int i,c;
		113	for(i=0;i<MAX_DRAGSTUFF;i++){dragstuff[i] = 0;}
		114	for(i=0;i<MAX_INT;i++){int_data[i]=0;double_data[i]=0;}
		115	int use_snap = 0; /* 0 = none 1=grid: 2=x-grid: 3=y-grid: 4=snap to points */
		116	int print_drag_params_only_once = FALSE;/* avoid multiple useless identical lines about javascript precision and use_dragdrop */
18589	bpr	117	int line_width = 2;
18552	bpr	118	int decimals = 2;
		119	int use_dragstuff = 0;
		120	int precision = 100; /* 10 = 1;100=2;1000=3 decimal display for mouse coordinates or grid coordinate.May be redefined before every object */
		121	int use_userdraw = 0; /* 0=none,1=userdraw,2=multidraw flag to indicate user interaction */
		122	int use_tooltip = -1; /* 1= tooltip 2= popup window*/
		123	int use_parametric = FALSE;/* will be reset after parametric plotting */
		124	char *tooltip_text = "Click here";
		125	char temp = ""; / */
		126	char bgcolor = "";/ used for background of canvas_div ; default is tranparent */
		127	char *stroke_color = "255,0,0";
		128	char *fill_color = "255,255,255";
		129	char font_family = "12px Arial"; / commands xaxistext,yaxistext,legend,text/textup/string/stringup may us this */
		130	char *font_color = "#00000";
		131	draw_type = "points";
		132	char *fly_font = "normal";
		133	css_class = "none";
		134	char *flytext = "";
		135	int canvas_type = DRAG_CANVAS; /* to use a specific canvas for filling etc */
		136	int pixelsize = 1;
		137	int fill_cnt = 0;
		138	int use_zoom = 0;
		139	font_size = 12;/* this may lead to problems when using something like <code>fontfamily Italic 24px Arial</code> the ''fontsize`` value is not substituted into fontfamily !! */
		140	int fly_font_size = 12; /fly_font_size is relative to this... /
		141	for(i=0;i<MAX_JS_FUNCTIONS;i++){js_function[i]=0;}
		142	int arrow_head = 8; /* size in px needed for arrow based userdraw: "userdraw arrow,color" */
		143	int crosshair_size = 5; /* size in px*/
		144	int plot_steps = 250;/* the js-arrays with x_data_points and y_data_points will have size 250 each: use with care !!! use jscurve when precise plots are required */
		145	int found_size_command = 0; /* 1 = found size ; 2 = found xrange; 3 = found yrange: just to flag an error message */
		146	int object_cnt = 0; /counter to identify the "onclick" ojects ; 0 is first object set onclick: reply[object_cnt]=1 when clicked ; otherwise reply[object_cnt]=0 ; object_cnt is only increased when another object is set again /
		147	int clock_cnt = 0; /* counts the amount of clocks used -> unique object clock%d */
		148	int boxplot_cnt = 0;
		149	int drawxml_cnt = 0;
		150	int numberline_cnt = 0;
		151	int snap_to_points_cnt = 0;
		152	int reply_precision = 100; /* used for precision of student answers / drawings */
		153	char rotation_center = "null";/ needs to be removed... but is used for canvas CTX based rotation*/
		154	double rotationcenter[] = {0,0}; /* use for recalculating x/y values on rotation() */
		155	int use_animate = 0; /* used for jscurve / js parametric */
		156	int use_input_xy = 0; /* 1= input fields 2= textarea 3=calc y value*/
		157	size_t string_length = 0; /* measure the size of the user input fly-string */
18609	bpr	158	double stroke_opacity = 0.95; /* use some opacity as default */
18552	bpr	159	double fill_opacity = 0.5;/* use some opacity as default */
		160	char *URL = "http://localhost/images";
		161	memset(buffer,'\0',MAX_BUFFER);
		162	void *tmp_buffer = "";
18615	bpr	163	double res[10];
18552	bpr	164	/* default writing a unzipped js-include file into wims getfile directory */
		165	char *w_wims_session = getenv("w_wims_session");
		166	if( w_wims_session == NULL \|\| *w_wims_session == 0 ){canvas_error("Hmmm, your wims environment does not exist...\nCanvasdraw should be used within wims.");}
		167	int L0=strlen(w_wims_session) + 21;
		168	char getfile_dir = my_newmem(L0); / create memory to fit string precisely */
		169	snprintf(getfile_dir,L0, "../sessions/%s/getfile",w_wims_session);/* string will fit precisely */
		170	mode_t process_mask = umask(0); /* check if file exists */
		171	int result = mkdir(getfile_dir, S_IRWXU \| S_IRWXG \| S_IRWXO);
		172	if( result == 0 \|\| errno == EEXIST ){
		173	umask(process_mask); /* be sure to set correct permission */
		174	char *w_session = getenv("w_session");
		175	int L1 = (int) (strlen(w_session)) + find_number_of_digits(canvas_root_id) + 48;
		176	getfile_cmd = my_newmem(L1); /* create memory to fit string precisely */
		177	snprintf(getfile_cmd,L1,"wims.cgi?session=%s&cmd=getfile&special_parm=%d.js",w_session,canvas_root_id);/* extension ".gz" is MANDATORY for webserver */
13306	obado	178	/* write the include tag to html page:<script src="wims.cgi?session=%s&cmd=getfile&special_parm=11223344_js"></script> */
7614	schaersvoo	179	/* now write file into getfile dir*/
14066	bpr	180	char w_wims_home = getenv("w_wims_home"); / "/home/users/wims": we need absolute path for location */
7614	schaersvoo	181	int L2 = (int) (strlen(w_wims_home)) + (int) (strlen(w_wims_session)) + find_number_of_digits(canvas_root_id) + 23;
		182	char location = my_newmem(L2); / create memory to fit string precisely */
		183	snprintf(location,L2,"%s/sessions/%s/getfile/%d.js",w_wims_home,w_wims_session,canvas_root_id);/absolute path /
		184	js_include_file = fopen(location,"w");/* open the file location for writing */
14066	bpr	185	/* check on opening...if nogood: mount readonly? disk full? permissions not set correctly? */
		186	if(js_include_file == NULL){ canvas_error("SHOULD NOT HAPPEN: could not write to javascript include file...check your system logfiles !" );}
7614	schaersvoo	187
		188	/* ----------------------------------------------------- */
11997	schaersvoo	189
18552	bpr	190	/* while more lines to process */
7614	schaersvoo	191
		192	while(!finished){
18552	bpr	193	if(line_number>1 && found_size_command == 0 && use_tooltip != 2 ){canvas_error("command \"size xsize,ysize\" needs to come first ! ");}
		194	type = get_token(infile);
		195	done = FALSE;
		196	/*
		197	@ canvasdraw
		198	@ Canvasdraw will try use the same basic syntax structure as flydraw
18627	bpr	199	@ General syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">opacity [0-255],[0,255]</a></li><li>Line width of any object can be controlled by command <a href="#linewidth">linewidth int</a></li><li>Any may be dashed by using keyword <a href="#dashed">dashed</a> before the object command.<br> the dashing type can be controled by command <a href="#dashtype">dashtype int,int</a>please note: dashing may have different spacing depending on the angle of the line<br>see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw</li><li>A fillable object can be set fillable by starting the object command with an ''f`` (like ''frect``,''fcircle``,''ftriangle`` ...) or by using the keyword <a href="#filled">filled</a> before the object command.<br>Non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a><br>note: do not use a <b>f</b> with this non-solid pattern filling.<br>For <a href="#filltoborder">filltoborder x0,y0,bordercolor,color</a> (fill a region around x0,y0 with color until a border of color borderolor is encountered) or <a href="#filltoborder">fill x0,y0,color</a> type filling (fill a region around x0,y0 with color until a border is encountered), there are non-solid pattern fill analogues:<ul><li><a href="#gridfill">gridfill x,y,dx,dy,color</a></li><li><a href="#hatchfill">hatchfill x,y,dx,dy,color</a></li><li><a href="#diamondfill">diamondfill x,y,dx,dy,color</a></li><li><a href="#dotfill">dotfill x,y,dx,dy,color</a></li><li><a href="#textfill">textfill x,y,color,sometext_or_char</a></li></ul></li><li>All draggable objects may have a <a href="#slider">slider</a> for translation / rotation; several objects may be translated / rotated by a single slider</li><li>A draggable object can be set draggable by a preceding command <a href="#drag">drag x/y/xy</a><br>The translation can be read by javascript:read_dragdrop();The replyformat is: object_number : x-orig : y-orig : x-drag : y-drag<br>The x-orig/y-orig will be returned in maximum precision (javascript float)...<br>the x-drag/y-drag will be returned in defined ''precision`` number of decimals<br>Multiple objects may be set draggable / clickable (no limit)<br>not all flydraw objects may be dragged / clicked<br>Only draggable / clickable objects will be scaled on <a href="#zoom">zoom</a> and will be translated in case of panning.</li><li>A ''onclick object`` can be set ''clickable`` by the preceding keyword <a href="#onclick">onclick</a><br>Not all flydraw objects can be set clickable</li><li><b>Remarks using a '';`` as command separator</b>. Commands with only numeric or color arguments may be using a '';`` as command separator (instead of a new line). Commands with a string argument may not use a '';`` as command separator.<br>These exceptions are not really straight forward... so keep this in mind.</li><li>Almost every <a href="#userdraw">userdraw object,color</a> or <a href="#multidraw">multidraw</a> command ''family`` may be combined with keywords <a href="#snaptogrid">"snaptogrid \| xsnaptogrid \| ysnaptogrid \| snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>Every draggable \| onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid \| xsnaptogrid \| ysnaptogrid \| snaptofunction</a> or command <code>snaptopoints x1,y1,x2,y2,...</code></li><li>Almost every command for a single object has a multiple objects counterpart: <ul>general syntax rule:<li><code>object x1,y1,...,color</code></li><li><code>objects color,x1,y1,...</code></li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#css">css some_css</a>: the fontsize used for labeling these elements can be controlled by command <a href="#fontsize">fontsize int</a> command <code>fontfamily</code> is <b>not</b> active for these elements.</li></ul>
		200	@ If needed multiple interactive scripts () may be used in a single webpage.<br>A function <code>read_canvas()</code> and / or <code>read_dragdrop()</code> can read all interactive userdata from these images.<br>The global array <code>canvas_scripts</code>will contain all unique random "canvas_root_id" of the included scripts.<br>The included local javascript "read" functions ''read_canvas%d()`` and ''read_dragdrop%d()`` will have this ''%d = canvas_root_id``<br>e.g. canvas_scripts[0] will be the random id of the first script in the page and will thus provide a function<br><code>fun = eval("read_canvas"+canvas_scripts[0])</code> to read user based drawings / inputfield in this first image.<br>The read_dragdrop is analogue.<br>If the default reply formatting is not suitable, use command <a href='#replyformat'>replyformat</a> to format the replies for an individual canvas script,<br>To read all user interactions from all included canvas scripts, use something like:<br><code>function read_all_canvas_images(){<br> var script_len = canvas_scripts.length;<br> var draw_reply = "";<br> var found_result = false;<br> for(var p = 0 ; p < script_len ; p++){<br>  var fun = eval("read_canvas"+canvas_scripts[p]);<br>  if( typeof fun === 'function'){<br>   var result = fun();<br>   if( result  && result.length != 0){<br>    if(script_len == 1 ){.return result;};<br>     found_result = true;<br>     draw_reply = draw_reply + result + "newline";<br>    };<br>   };<br>  };<br> if( found_result ){return draw_reply;}else{return null;};<br>};</code> <br>() Note: the speed advantage over <em>canvas-do-it-all</em> libraries is reduced to zero, when multiple canvasdraw scripts are present in a single page... For example a typical canvasdraw script is between 5 and 40 kB...a large library like JSXgraph is approx 600 kB. In these cases it would be much faster to load a static general HTML5 canvas javascript draw library and parse it multiple raw fly instructions.
		201	@ Canvasdraw can be used to paint a html5 bitmap image by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job, thus ensuring a minimal strain on the client browser (unlike some popular ''canvas-do-it-all`` libraries, who have proven to be not suitable for low-end computers found in schools...)
18552	bpr	202	@ You can check the javascript reply format in the wims tool <a href="http://localhost/wims/wims.cgi?lang=en&module=tool/directexec">direct exec</a>
		203	@ For usage within OEF (without anstype ''draw``), something like this (a popup function plotter) will work:<br><code>\\text{popup_grapher=wims(exec canvasdraw <br>popup<br>size 400,400<br>xrange -10,10<br>yrange -10,10<br>axis<br>axisnumbering<br>opacity 100,100<br>grid 2,2,grey,2,2,6,black<br>snaptogrid<br>linewidth 2<br>jsplot red,5*sin(1/x)<br>strokecolor green<br>functionlabel f(x)=<br>userinput function<br>mouse blue,22<br>)<br>}<br>\\statement{<br>\\popup_grapher<br>}</code>.
18627	bpr	204	@ Be aware that older browsers will probably not work correctly. no effort has been undertaken to add glue code for older browsers !! In any case it is not wise to use older browsers...not just for canvasdraw.
18552	bpr	205	@ Be aware that combining several different objects and interactivity may lead to problems.
		206	@ If you find flaws, errors or other incompatibilities -not those mentioned in this document- send <a href='mailto:jm.evers-at-schaersvoorde.nl'>me</a> an email with screenshots and the generated javascript include file.
18627	bpr	207	@ There is limited support for touch devices: touchstart, touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#multidraw">multidraw primitives </a>, <a href="#protractor">protractor</a>, <a href="#ruler">ruler</a> and probably a few others... Only single finger gestures are supported (for now). The use of a special pen is advised for interactive drawing on touch devices. For more accurate user-interaction (numeric, eg keyboard driven drawings) with canvasdraw on touch devices: use the command family <a href="#userinput_xy">userinput</a>.
18552	bpr	208	*/
		209	switch(type){
		210	case END:finished = 1;done = TRUE;break;
		211	case 0:sync_input(infile);break;
		212	case AFFINE:
		213	/*
18556	bpr	214	@ affine a,b,c,d,tx,ty
		215	@ defines a transformation matrix for subsequent objects
		216	@ use keyword <a href='#killaffine'>killaffine</a> to end the transformation...the next objects will be drawn in the original x/y-range
		217	@ a: Scales the drawings horizontally
		218	@ b: Skews the drawings horizontally
		219	@ c: Skews the drawings vertically
		220	@ d: Scales the drawings vertically
		221	@ tx: Moves the drawings horizontally in xrange coordinate system
		222	@ ty: Moves the drawings vertically in yrange coordinate system
		223	@ the data precision may be set by preceding command ''precision int``
		224	@ <b>note</b>: not all affine operations on canvasdraw objects will be identical to flydraw's behaviour. Make sure to check !
		225	@%affine%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%#use larger linewith to improve selecting a draggable object !%linewidth 4%drag xy%frect 0,5,3,3,red%affine cos(pi/4),sin(pi/4),-cos(pi/2),sin(pi/2),-5,-5%drag xy%frect 0,5,3,3,red
		226	@%affine+latex%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%strokecolor blue%fontfamily 42px Arial%centered%drag xy%latex 5,5,\\frac{123}{\\pi^{234}}%affine cos(pi/4),sin(pi/4),-cos(pi/2),sin(pi/2),-5,-5%drag xy%latex 5,5,\\frac{123}{\\pi^{234}}
18552	bpr	227	*/
		228	for(i = 0 ; i<6;i++){
		229	switch(i){
		230	case 0: affine_matrix[0] = get_real(infile,0);break;
		231	case 1: affine_matrix[1] = get_real(infile,0);break;
		232	case 2: affine_matrix[2] = get_real(infile,0);break;
		233	case 3: affine_matrix[3] = get_real(infile,0);break;
		234	case 4: affine_matrix[4] = get_real(infile,0);break;
		235	case 5: affine_matrix[5] = get_real(infile,1);
		236	use_affine = TRUE;
		237	break;
		238	default: break;
		239	}
		240	}
		241	break;
14394	schaersvoo	242	case ALLOW_DUPLICATES:
18556	bpr	243	/*
		244	@ duplicates \|\| allowdups
		245	@ keyword (no arguments)
		246	@ only useful in case of a <a href="#multidraw">multidraw</a> student reply.
		247	@ only useful in default <a href="#replyformat">replyformat</a> (eg in case of a not specified replyformat).
		248	@ if set, duplicate (x:y) coordinates will not be removed from the student reply.
		249	@ technical: a javascript variable "allow_duplicate_answer = 1;" is declared.
		250	@ default for command multidraw is: removal of duplicates.
		251	*/
18552	bpr	252	fprintf(js_include_file,"var allow_duplicate_answers = 1;");
		253	break;
		254	case ANGLE:
18556	bpr	255	/*
		256	@ angle xc,yc,width,start_angle,end_angle,color
		257	@ width is in x-range
		258	@ angles are in degrees
		259	@ not compatible with ''flydraw``
		260	@ will zoom in/out
		261	@ may be set onclick or drag&drop
		262	@ if angle size is controlled by command <a href='#slider'>slider</a>, use radians to set limits of slider
		263	@ ''angle`` and <a href="#arc">arc</a> are exceptions in case of sliders...they are always active (e.g. not click-activated)
		264	@%angle%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor orange%angle 0,0,4,10,135,blue
		265	@%angle_slider%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%strokecolor blue%slider -2pi,2pi,260,28,angle active degree,blue arrow%arrow 0,0,8,0,8,blue%fillpattern diamond%angle 0,0,2,0,0,blue%killslider%strokecolor red%slider -2pi,2pi,260,28,angle active radian,red arrow%arrow 0,1,8,1,8,red%fillpattern dot%angle 0,1,2,0,0,red
		266	*/
18552	bpr	267	for(i=0;i<7;i++){
		268	switch(i){
		269	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		270	case 1:double_data[1] = get_real(infile,0);
		271	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		272	if(use_affine == TRUE ){ transform(2,2);}
		273	break; /* y-values */
		274	case 2:double_data[2] = get_real(infile,0);break; /* width x-range ! */
		275	case 3:double_data[3] = 0.0174532925(get_real(infile,0) - angle);break; / start angle in degrees -> radians */
		276	case 4:double_data[4] = 0.0174532925(get_real(infile,0) - angle);break; / end angle in degrees -> radians */
		277	case 5:stroke_color = get_color(infile,1);/* name or hex color */
		278	if( use_slider != -1 ){ onclick = 3; }/* always active in case of slider */
		279	decimals = find_number_of_digits(precision);
18557	bpr	280	tmp_buffer=my_newmem(MAX_BUFFER);
		281	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,17,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[0],decimals,double_data[1],decimals,double_data[1],decimals,double_data[2],decimals,double_data[2],decimals,double_data[3],decimals,double_data[4],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	282	add_to_buffer(tmp_buffer);
		283	dragstuff[17] = 1;
		284	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		285	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		286	break;
		287	}
		288	}
		289	break;
		290	case ANIMATE:
		291	/*
18556	bpr	292	@ animate
		293	@ keyword
		294	@ if set, it will animate a point on a curve
		295	@ all other canvas object or group of objects (like lines,circles,rects,points...images,svg,latex,mathml etc)<br>may be animated using command <a href='#slider'>slider</a> with keyword 'anim'
18627	bpr	296	@ the animated point is a filled rectangle ; adjust color with command <code>fillcolor colorname/hexnumber</code>
18556	bpr	297	@ use linewidth to adjust size of the points
		298	@ will animate a point on -only- the next <a href='#jsplot'>jsplot/jscurve command</a>. Only a single call to <code>animate</code> is allowed...in case of multiple <code>animate</code> keywords, only the last one is valid
		299	@ only usable in combination with command <a href='#jsplot'>jsplot</a> (normal functions or parametric)
		300	@ moves repeatedly from <a href='#xrange'>xmin to xmax</a> or in case of a parametric function from <a href='#trange'>tmin to tmax</a>
		301	@ use commands <a href='#multilinewidth'>multilinewidth</a>, <a href='#multistrokecolor'>multistrokecolor</a> etc in case of multiple animated functions.<br>use multiple functions as argument in a single call to <a href='#jsplot'>jsplot color,fun1,fun2,fun3...fun_n</a>
		302	@%animate_1%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%linewidth 4%fillcolor red%animate%trange -2pi,2pi%linewidth 1%opacity 255,50%canvastype 100%fill 1.2,1.2,red%canvastype 101%fill -1.2,-1.2,blue%jsplot blue,7cos(x),5sin(2*x)
		303	@%animate_2%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%linewidth 4%fillcolor red%animate%trange -2pi,2pi%linewidth 1%opacity 255,50%canvastype 100%fill 1.2,1.2,red%canvastype 101%fill -1.2,-1.2,blue%multistrokecolors blue,blue,green,green,orange,orange%multilinewidth 2,2,3,3,1,1%jsplot blue,7cos(x),5sin(2x),9sin(x),5*cos(x),x^2,x
18552	bpr	304	*/
		305	use_animate++;
		306	if( use_animate == 1 ){
		307	fprintf(js_include_file,"\nvar trace_canvas = create_canvas%d(%d,xsize,ysize);\
		308	var trace_ctx = trace_canvas.getContext('2d');\
		309	trace_ctx.fillStyle = 'rgba(%s,%f)';\
		310	trace_ctx.strokeStyle = 'rgba(%s,%f)';\
		311	trace_ctx.lineWidth = %d;var anim_pos = 0;\n\
		312	function animate_this(){\
		313	var sync;\
		314	var synchrone = Math.floor(animation_steps/animation_funs);\
		315	trace_ctx.clearRect(0,0,xsize,ysize);\
		316	for(var p=0; p<animation_funs;p++){\
		317	sync = p*synchrone;\
		318	trace_ctx.fillRect(x_anim_points[sync+anim_pos]-%d, y_anim_points[sync+anim_pos]-%d,%d,%d);\
		319	};\
		320	setTimeout(function(){\
		321	requestAnimationFrame(animate_this); anim_pos++;}, 50\
		322	);\
		323	if(anim_pos >= animation_steps){anim_pos = 0;};\
		324	};",canvas_root_id,ANIMATE_CANVAS,fill_color,fill_opacity,stroke_color,stroke_opacity,line_width,line_width,line_width,2line_width,2line_width);
		325	} else {
		326	canvas_error("animate can only be used once<br>multiple curves may be animated using something like:<br>jsplot red,sin(x),cos(x),x^2,sin(2*x)");
		327	}
		328	break;
		329	case ARC:
		330	/*
18556	bpr	331	@ arc xc,yc,x-width,y-height,start_angle,end_angle,color
		332	@ may be set ''onclick`` or ''drag xy``
		333	@ compatible with ''flydraw``
		334	@ attention: width & height in x/y-range
		335	@ for arrow hats on an arc, see command <a href='#arcarrow'>arcarrow or arrowarc</a>
		336	@ better use command <a href='#angle'>angle</a> for use with a <a href='#slider'>slider</a>
		337	@%arc%size 400,400%xrange -10,10%yrange -10,10%arc 0,0,4,4,10,135,red
		338	@%arc_filled%size 400,400%xrange -10,10%yrange -10,10%opacity 255,60%filled%fillcolor green%arc 0,0,4,4,10,135,red
18552	bpr	339	*/
18641	bpr	340	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	341	for(i=0;i<7;i++){
		342	switch(i){
		343	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		344	case 1:double_data[1] = get_real(infile,0);
		345	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		346	if(use_affine == TRUE ){ transform(4,2);}
		347	break; /* y-values */
		348	case 2:double_data[2] = get_real(infile,0);break; /* width x-range no pixels ! */
		349	case 3:double_data[3] = get_real(infile,0);
		350	break; /* height y-range no pixels ! */
		351	case 4:double_data[4] = get_real(infile,0) - angle ;break; /* start angle in degrees */
		352	case 5:double_data[5] = get_real(infile,0) - angle;break; /* end angle in degrees */
		353	case 6:stroke_color = get_color(infile,1);/* name or hex color */
		354	/* in Shape library:
		355	x[0] = x[1] = xc = double_data[0]
		356	y[0] = y[1] = yc = double_data[1]
		357	w[0] = width = double_data[2]
		358	w[1] = height = double_data[3]
		359	h[0] = start_angle = double_data[4]
		360	h[1] = end_angle = double_data[5]
		361	*/
18555	bpr	362	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		363	decimals = find_number_of_digits(precision);
18557	bpr	364
		365	tmp_buffer=my_newmem(MAX_BUFFER);
		366	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,12,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[0],decimals,double_data[1],decimals,double_data[1],decimals,double_data[2],decimals,double_data[3],decimals,double_data[4],decimals,double_data[5],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18555	bpr	367	add_to_buffer(tmp_buffer);reset();
		368	dragstuff[12] = 1;
		369	if(onclick != 0){object_cnt++;}
		370	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
18552	bpr	371	break;
		372	}
		373	}
		374	break;
		375	case ARCARROW:
		376	/*
18556	bpr	377	@ arrowarc xc,yc,x-width,y-height,start_angle,end_angle,color,type
		378	@ alternative: arcarrow
		379	@ uses same syntax as <a href='#arc'>arc</a>
		380	@ for arrow hat: type = 1 : right<br>type = 2 : left<br>type = 3 : left&right
		381	@ if the default arrow hat/head is not satisfactory , the size of the arrow may be set with command <a href='#arrowhead'>arrowhead</a>
		382	@ no other arrow types are implemented...yet
		383	@ may be set draggable or onclick
		384	@ attention: when width ad height are very different, the arrow hat is not drawn correctly. This is a flaw and not a feature...(for now: too much calculations to correct)
		385	@%arcarrow%size 400,400%xrange -10,10%yrange -10,10%noreset%onclick%arcarrow 0,0,7,7,50,275,blue,3%arcarrow 0,0,8,8,50,275,red,2%arcarrow 0,0,9,9,50,275,green,1
18552	bpr	386	*/
		387	for(i=0;i<8;i++){
		388	switch(i){
		389	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		390	case 1:double_data[1] = get_real(infile,0);
		391	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		392	if(use_affine == TRUE ){ transform(4,2);}
		393	break; /* y-values */
		394	case 2:double_data[2] = get_real(infile,0);break; /* width x-range no pixels ! */
		395	case 3:double_data[3] = get_real(infile,0);
		396	break; /* height y-range no pixels ! */
		397	case 4:double_data[4] = get_real(infile,0) - angle ;break; /* start angle in degrees */
		398	case 5:double_data[5] = get_real(infile,0) - angle;break; /* end angle in degrees */
		399	case 6:stroke_color = get_color(infile,0);/* name or hex color */
		400	break;
		401	case 7:int_data[0] = (int) get_real(infile,1);
		402	switch(int_data[0]){
		403	case 1: int_data[1] = 24;break; /* right */
		404	case 2: int_data[1] = 25;break; /* left */
		405	case 3: int_data[1] = 26;break; /* left&right */
		406	default:int_data[1] = 24;break;
		407	}
		408	if(int_data[0] == 1 ){int_data[1] = 24;}
		409	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		410	decimals = find_number_of_digits(precision);
18557	bpr	411
		412	tmp_buffer=my_newmem(MAX_BUFFER);
		413	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"var arrow_head = %d;dragstuff.addShape(new Shape(%d,%d,%d,%d,%d,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",arrow_head,drag_type,object_cnt,onclick,use_snap,int_data[1],decimals,double_data[0],decimals,double_data[0],decimals,double_data[1],decimals,double_data[1],decimals,double_data[2],decimals,double_data[3],decimals,double_data[4],decimals,double_data[5],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	414	add_to_buffer(tmp_buffer);
		415	dragstuff[int_data[1]] = 1;
		416	if(onclick != 0){object_cnt++;}
		417	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		418	js_function[JS_ARROWHEAD] = 1;
		419	reset();
		420	}
		421	}
		422	break;
		423	case ARROW:
		424	/*
		425	@ arrow x1,y1,x2,y2,h,color
		426	@ alternative: vector
		427	@ draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br>with arrowhead size h in px and in color ''color``
		428	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		429	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		430	@%arrow_drag%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 2%drag xy%arrow 0,0,4,3,8,blue%drag xy%arrow 0,0,-4,3,8,green%drag xy%arrow 0,0,4,-3,8,orange%drag xy%arrow 0,0,-4,-3,8,cyan
		431	@%arrow_click%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%%onclick%arrow 0,0,4,4,8,blue%onclick%arrow 0,0,-4,5,8,green%onclick%arrow 0,0,4,-6,8,orange%onclick%arrow 0,0,-4,-2,8,cyan
		432	*/
		433	for(i=0;i<6;i++){
		434	switch(i){
		435	case 0: double_data[0] = get_real(infile,0);break; /* x */
		436	case 1: double_data[1] = get_real(infile,0);break; /* y */
		437	case 2: double_data[2] = get_real(infile,0);break; /* x */
		438	case 3: double_data[3] = get_real(infile,0);break; /* y */
		439	case 4: arrow_head = (int) get_real(infile,0);break;/* h */
		440	case 5: stroke_color = get_color(infile,1);/* name or hex color */
		441	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		442	if(use_affine == TRUE ){ transform(4,2);}
		443	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		444	decimals = find_number_of_digits(precision);
18557	bpr	445	tmp_buffer=my_newmem(MAX_BUFFER);
		446	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,8,[%.f,%.f],[%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],arrow_head,arrow_head,arrow_head,arrow_head,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	447	if(onclick != 0){object_cnt++;}
		448	/* object_cnt++;*/
		449	add_to_buffer(tmp_buffer);reset();
		450	dragstuff[8] = 1;
		451	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		452	break;
		453	}
		454	}
		455	break;
		456	case ARROWS:
		457	/*
		458	@ arrows color,head (px),x1,y1,x2,y2...x_n,y_n
		459	@ alternative: vectors
		460	@ draw single headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'
		461	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		462	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		463	@%arrows_click%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%arrows red,8,0,0,4,3,0,0,2,4,0,0,-2,4,0,0,-3,-4,0,0,3,-2%
		464	@%arrows_drag%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag xy%arrows red,8,0,0,4,3,0,0,2,4,0,0,-2,4,0,0,-3,-4,0,0,3,-2%
		465	@%arrows_drag_slider%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag xy%# Click arrow(s) to activate %slider 0,2pi,300,30,angle degrees,Rotate%slider -5,5pi,300,30,x display,move in x-direction%slider -10,10*pi,300,30,y display,move in y-direction%arrows red,8,0,0,4,3,0,0,2,4,0,0,-2,4,0,0,-3,-4,0,0,3,-2%
		466	*/
		467	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		468	fill_color = stroke_color;
		469	arrow_head = (int) get_real(infile,0);/* h */
		470	i=0;
		471	while( ! done ){ /* get next item until EOL*/
		472	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		473	if(i%2 == 0 ){
		474	double_data[i] = get_real(infile,0); /* x */
		475	} else {
		476	double_data[i] = get_real(infile,1); /* y */
		477	}
		478	i++;
		479	}
		480	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		481	if( use_affine == TRUE ){ transform(i-1,2);}
		482	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		483	decimals = find_number_of_digits(precision);
		484	for(c = 0 ; c < i-1 ; c = c+4){
18557	bpr	485	tmp_buffer=my_newmem(MAX_BUFFER);
		486	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,8,[%.f,%.f],[%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],arrow_head,arrow_head,arrow_head,arrow_head,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	487	add_to_buffer(tmp_buffer);
		488	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		489	}
		490	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		491	dragstuff[8] = 1;
		492	reset();
		493	break;
		494	case ARROW2:
		495	/*
		496	@ arrow2 x1,y1,x2,y2,h,color
		497	@ draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br>with arrowhead size h in px and in color ''color``
		498	@ use command <code>arrowhead int</code> to adjust the arrow head size
		499	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		500	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		501	@%arrow2%size 400,400%xrange -10,10%yrange -10,10%drag xy%arrow2 0,0,4,3,8,blue%
		502	*/
		503	for(i=0;i<6;i++){
		504	switch(i){
		505	case 0: double_data[0] = get_real(infile,0);break; /* x */
		506	case 1: double_data[1] = get_real(infile,0);break; /* y */
		507	case 2: double_data[2] = get_real(infile,0);break; /* x */
		508	case 3: double_data[3] = get_real(infile,0);break; /* y */
		509	case 4: arrow_head = (int) get_real(infile,0);break;/* h */
		510	case 5: stroke_color = get_color(infile,1);/* name or hex color */
		511	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		512	if( use_affine == 1 ){ transform(4,2);}
		513	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		514	decimals = find_number_of_digits(precision);
18557	bpr	515	tmp_buffer=my_newmem(MAX_BUFFER);
		516	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,10,[%.f,%.f],[%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],arrow_head,arrow_head,arrow_head,arrow_head,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	517	add_to_buffer(tmp_buffer);
		518	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		519	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		520	dragstuff[10] = 1;
		521	reset();
		522	break;
		523	}
		524	}
		525	break;
		526	case ARROWS2:
		527	/*
		528	@ arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n
		529	@ draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color ''color``
		530	@ use command <code>linewidth int</code> to adjust thickness of the arrows
		531	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		532	@%arrows2%size 400,400%xrange -10,10%yrange -10,10%onclick%arrows2 red,8,0,0,4,3,1,1,2,4,2,2,-2,4,3,3,-3,-4,0,0,3,-2%
		533	*/
		534	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		535	fill_color = stroke_color;
		536	arrow_head = (int) get_real(infile,0);/* h */
		537	i=0;
		538	while( ! done ){ /* get next item until EOL*/
		539	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		540	if(i%2 == 0 ){
		541	double_data[i] = get_real(infile,0); /* x */
		542	} else {
		543	double_data[i] = get_real(infile,1); /* y */
		544	}
		545	i++;
		546	}
		547	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		548	if( use_affine == 1 ){ transform(i-1,2);}
		549	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
8386	schaersvoo	550
18552	bpr	551	decimals = find_number_of_digits(precision);
		552	for(c = 0 ; c < i-1 ; c = c+4){
18557	bpr	553	tmp_buffer=my_newmem(MAX_BUFFER);
		554	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,10,[%.f,%.f],[%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],arrow_head,arrow_head,arrow_head,arrow_head,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	555	add_to_buffer(tmp_buffer);
		556	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		557	}
		558	dragstuff[10] = 1;
		559	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		560	reset();
		561	break;
		562	case ARROWHEAD:
		563	/*
		564	@ arrowhead int
		565	@ default 8 (pixels)
		566	*/
		567	arrow_head = (int) (get_real(infile,1));
		568	break;
		569	case AUDIO:
		570	/*
		571	@ audio x,y,w,h,loop,visible,audiofile location
		572	@ x,y: left top corner of audio element (in xrange / yrange)
		573	@ w,y: width and height in pixels
		574	@ loop: 0 or 1 ( 1 = loop audio fragment)
		575	@ visible: 0 or 1 (1 = show controls)
		576	@ audio format may be in .mp3 or .ogg
		577	@ If you are using *.mp3: be aware that FireFox will not (never) play this ! (Pattented format)
		578	@ if you are using *.ogg: be aware that Microsoft based systems not support it natively
		579	@ To avoid problems supply both types (mp3 and ogg) of audiofiles.<br>the program will use both as source tag
		580	*/
		581	js_function[DRAW_AUDIO] = 1;
		582	for(i=0;i<7;i++){
		583	switch(i){
		584	case 0: int_data[0] = x2px(get_real(infile,0)); break; /* x in x/y-range coord system -> pixel */
		585	case 1: int_data[1] = y2px(get_real(infile,0)); break; /* y in x/y-range coord system -> pixel */
		586	case 2: int_data[2] = (int) (get_real(infile,0)); break; /* pixel width */
		587	case 3: int_data[3] = (int) (get_real(infile,0)); break; /* height pixel height */
		588	case 4: int_data[4] = (int) (get_real(infile,0)); if(int_data[4] != TRUE){int_data[4] = FALSE;} break; /* loop boolean */
		589	case 5: int_data[5] = (int) (get_real(infile,0)); if(int_data[5] != TRUE){int_data[5] = FALSE;} break; /* visible boolean */
		590	case 6:
		591	temp = get_string(infile,1);
		592	if( strstr(temp,".mp3") != 0 ){ temp = str_replace(temp,".mp3","");}
		593	if( strstr(temp,".ogg") != 0 ){ temp = str_replace(temp,".ogg","");}
18557	bpr	594	tmp_buffer=my_newmem(MAX_BUFFER);
		595	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_audio(%d,%d,%d,%d,%d,%d,%d,\"%s.ogg\",\"%s.mp3\");\n", canvas_root_id, int_data[0],int_data[1],int_data[2],int_data[3],int_data[4],int_data[5],temp,temp));
18552	bpr	596	add_to_buffer(tmp_buffer);
		597	break;
		598	default:break;
		599	}
		600	}
		601	reset();
		602	break;
		603	case AXIS_NUMBERING:
		604	/*
18556	bpr	605	@ axisnumbering
		606	@ keyword (no arguments required)
		607	@ for special numbering of x-axis or y-axis see grid related commands <a href="#axis">axis</a> <a href="#xaxis">xaxis</a>, <a href="#xaxisup">xaxisup</a>, <a href="#noxaxis">noxaxis</a>, <a href="#yaxis">yaxis</a>, <a href="#yaxisup">yaxisup</a>, <a href="#noyaxis">noyaxis</a>
		608	@ to be used before command grid (see <a href="#grid">command grid</a>)
18552	bpr	609	*/
		610	use_axis_numbering++;
		611	break;
		612	case AXIS:
		613	/*
18556	bpr	614	@ axis
		615	@ keyword (no arguments required)
		616	@ to be used before command grid (see <a href="#grid">command grid</a>)
8386	schaersvoo	617
18552	bpr	618	*/
		619	use_axis = TRUE;
		620	break;
		621	case BARCHART:
		622	/*
		623	@ barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n
		624	@ may <b>only</b> to be used together with command <a href='#grid'>grid</a>
		625	@ can be used together with freestyle x-axis/y-axis texts: see commands <a href='#xaxis'>xaxis</a>,<a href='#xaxisup'>xaxisup</a> and <a href='#yaxis'>yaxis</a>
		626	@ use command <a href='#legend'>legend</a> to provide an optional legend in right-top-corner
		627	@ multiple barchart command may be used in a single script
		628	@ also see command <a href='#piechart'>piechart</a>
		629	@ note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
		630	@%barchart%size 400,400%xrange -1,10%yrange -2,14%legend legend Z:legend A:this is B:C:D:E:F:G:H:X%legendcolors green:red:orange:lightblue:cyan:gold:purple:darkred:yellow:lightgreen%xaxis 0:Z:1:A:2:B:3:C:4:D:5:E:6:F:7:G:8:H:9:X%noyaxis%precision 1%fontfamily bold 15px Arial%grid 1,1,white%barchart 0:5.5:green:2:5.5:red:4:6.5:orange:6:8:lightblue:8:11:cyan:1:5.5:gold:3:9:purple:5:4:darkred:7:7:yellow:9:1:lightgreen%mouse red,14
		631	*/
		632	temp = get_string(infile,1);
		633	if( strstr( temp,":" ) != 0 ){ temp = str_replace(temp,":","\",\""); }
		634	fprintf(js_include_file,"var barchart_%d = [\"%s\"];",barchart_cnt,temp);
		635	barchart_cnt++;
		636	reset();
		637	break;
		638	case BEZIER:
		639	/*
		640	@ bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end
		641	@ draw a bezier curve between points, starting from (x_start:y_start)
		642	@ can <b>not</b> be dragged or set onclick
		643	*/
		644	js_function[DRAW_BEZIER] = 1;
		645	decimals = find_number_of_digits(precision);
		646	for(i = 0 ; i < 9; i++){
		647	switch(i){
		648	case 0: stroke_color = get_color(infile,0);break;
		649	case 1: double_data[0] = get_real(infile,0);break;/* start x */
		650	case 2: double_data[1] = get_real(infile,0);break;/* start y */
		651	case 3: double_data[2] = get_real(infile,0);break;/The x-coordinate of the first B�zier control point /
		652	case 4: double_data[3] = get_real(infile,0);break;/The y-coordinate of the first B�zier control point /
		653	case 5: double_data[4] = get_real(infile,0);break;/The x-coordinate of the second B�zier control point /
		654	case 6: double_data[5] = get_real(infile,0);break;/The y-coordinate of the second B�zier control point /
		655	case 7: double_data[6] = get_real(infile,0);break;/The x-coordinate of the B�zier end point /
		656	case 8: double_data[7] = get_real(infile,1);/The y-coordinate of the B�zier end point /
		657	if(use_rotate == TRUE ){rotate(8,angle,rotationcenter,2);}
		658	if(use_affine == TRUE ){ transform(2,5);}
18557	bpr	659	tmp_buffer=my_newmem(MAX_BUFFER);
		660	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"draw_bezier(%d,%d,[%f,%f,%f,%f,%f,%f,%f,%f],\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.2f);",STATIC_CANVAS,line_width,double_data[0],double_data[1],double_data[2],double_data[3],double_data[4],double_data[5],double_data[6],double_data[7],fill_color,fill_opacity,stroke_color,stroke_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle));
18552	bpr	661	add_to_buffer(tmp_buffer);
		662	break;
		663	default: break;
		664	}
		665	}
		666	reset();
		667	break;
		668	case BGCOLOR:
		669	/*
18556	bpr	670	@ bgcolor colorname or #hex
		671	@ use this color as background of the "div" containing the canvas(es)
		672	@%bgcolor%size 400,400%xrange -10,10%yrange -10,10%bgcolor lightblue
18552	bpr	673	*/
		674	/* [255,255,255]*/
		675	bgcolor = get_string(infile,1);
		676	if(strstr(bgcolor,"#") == NULL){ /* convert colorname -> #ff00ff */
		677	int found = 0;
		678	for( i = 0; i < NUMBER_OF_COLORNAMES ; i++ ){
		679	if( strcmp( colors[i].name , bgcolor ) == 0 ){
		680	bgcolor = colors[i].hex;
		681	found = 1;
		682	break;
		683	}
		684	}
		685	if(found == 0){canvas_error("your bgcolor is not in my rgb.txt data list: use hexcolor...something like #a0ffc4");}
		686	}
		687	fprintf(js_include_file,"/* set background color of canvas div */\ncanvas_div.style.backgroundColor = \"%s\";canvas_div.style.opacity = %f;\n",bgcolor,fill_opacity);
		688	break;
		689	case BGIMAGE:
		690	/*
18556	bpr	691	@ bgimage image_location
		692	@ use an image as background; technical: we use the background of ''canvas_div``
		693	@ the background image will be resized to match "width = xsize" and "height = ysize"
		694	@%bgimage%size 400,400%xrange -10,10%yrange -10,10%bgimage https://wims.unice.fr/wims/gifs/en.gif
18552	bpr	695	*/
		696	URL = get_string(infile,1);
		697	fprintf(js_include_file,"/* set background image to canvas div */\ncanvas_div.style.backgroundImage = \"url(%s)\";canvas_div.style.backgroundSize = \"%dpx %dpx\";\n",URL,xsize,ysize);
		698	break;
		699	case BLINK:
		700	/*
18556	bpr	701	@ blink time(seconds)
		702	@ NOT IMPLEMETED -YET
18552	bpr	703	*/
		704	break;
		705	case BOXPLOT:
		706	/*
		707	@ boxplot x_or_y,box-height_or_box-width,position,min,Q1,median,Q3,max
		708	@ example:<br><code>xrange 0,300<br>yrange 0,10<br>boxplot x,4,8,120,160,170,220,245</code><br>meaning: create a boxplot in x-direction, with height 4 (in yrange) and centered around line y=8
		709	@ example:<br><code>xrange 0,10<br>yrange 0,300<br>boxplot y,4,8,120,160,170,220,245</code><br>meaning: create a boxplot in y-direction, with width 4 (in xrange) and centered around line x=8
		710	@ use command <a href='#filled'>filled</a> to fill the box<br><b>note:</b> the strokecolor is used for filling Q1, the fillcolor is used for filling Q3
		711	@ use command <a href='#fillpattern'>fillpattern some_pattern</a> to use a (diamond for Q1, hatch for Q3) pattern.
18627	bpr	712	@ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of stroke and fill colors
18552	bpr	713	@ use command <a href='#legend'>legend</a> to automatically create a legend <br>unicode allowed in legend<br>use command <a href='#fontfamily'>fontfamily</a> to set the font of the legend.
		714	@ there is no limit to the number of boxplots used.
		715	@ can <b>not</b> be set draggable and <a href='#onclick'>onclick</a> is not ready yet
		716	@ use keyword <a href="#userboxplot">userboxplot</a> before command boxplot, if a pupil must draw a boxplot (using his own min,Q1,median,Q3,max data)
		717	@ use keyword <a href="#userboxplotdata">userboxplotdata</a> before command boxplot, if a pupil must generate the data by some means.
		718	@ use command <a href="#boxplotdata">boxplotdata</a> when the boxplot should be drawn from wims-generated raw statistical date
		719	@%boxplot_1%size 400,400%xrange 0,300%yrange 0,10%opacity 120,50%filled%fillcolor orange%strokecolor blue%linewidth 2%boxplot x,4,8,120,160,170,220,245
		720	@%boxplot_2%size 400,400%xrange 0,10%yrange 0,300%opacity 120,50%filled%fillcolor orange%strokecolor blue%linewidth 2%boxplot y,4,8,120,160,170,220,245
		721	@%boxplot_3%size 400,400%xrange 0,100%yrange 0,10%fillpattern hatch%linewidth 3%fillcolor red%strokecolor green%boxplot x,1,2,4,14,27,39,66%strokecolor blue%boxplot x,1,4,15,45,50,66,87%strokecolor red%boxplot x,1,6,45,70,80,90,100%strokecolor orange%boxplot x,1,8,28,38,48,56,77%mouse red,16
		722	*/
		723	js_function[DRAW_BOXPLOT] = 1;
		724	for(i=0;i<8;i++){
		725	switch(i){
		726	case 0: temp = get_string_argument(infile,0);
		727	if( strstr(temp,"x") != 0){int_data[0] = 1;}else{int_data[0] = 0;} break; /* x or y */
		728	case 1: double_data[0] = get_real(infile,0);break;/* height \| width */
		729	case 2:
		730	if( js_function[DRAW_JSBOXPLOT] == 0 ){
		731	double_data[1] = get_real(infile,0);
		732	fprintf(js_include_file,"var boxplot_source = 0;\n");/* we use given min,Q1,median,Q3,max */
		733	}
		734	else {
		735	double_data[1] = get_real(infile,1);
		736	double_data[2] = 1;
		737	double_data[3] = 1;
		738	double_data[4] = 1;
		739	double_data[5] = 1;
		740	double_data[6] = 1;
		741	double_data[7] = 1;
		742	i=8;
		743	}
		744	break;/* center value x or y */
		745	case 3: double_data[2] = get_real(infile,0); break;/* min */
		746	case 4: double_data[3] = get_real(infile,0); break;/* Q1 */
		747	case 5: double_data[4] = get_real(infile,0); break;/* median */
		748	case 6: double_data[5] = get_real(infile,0); break;/* Q3 */
		749	case 7: double_data[6] = get_real(infile,1); break;/* max */
		750	default:break;
		751	}
		752	}
		753	decimals = find_number_of_digits(precision);
		754	/function draw_boxplot(canvas_type,xy,hw,cxy,data,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1)/
18557	bpr	755	tmp_buffer=my_newmem(MAX_BUFFER);
		756	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"draw_boxplot(%d,%d,%.f,%.f,[%.f,%.f,%.f,%.f,%.*f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d);\n",BOXPLOT_CANVAS+boxplot_cnt,int_data[0],decimals,double_data[0],decimals,double_data[1],decimals,double_data[2],decimals,double_data[3],decimals,double_data[4],decimals,double_data[5],decimals,double_data[6],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1]));
18552	bpr	757	add_to_buffer(tmp_buffer);
		758	boxplot_cnt++;
		759	reset();
		760	break;
		761	case BOXPLOTDATA:
		762	/*
		763	@ boxplotdata some_data
		764	@ 'some_data' are a list of numbers separated by a comma "," (items)
		765	@ only be used before command <code>boxplot</code>: the command <a href="#boxplot">boxplot</a> will provide the boxplot drawing of the data.
		766	@ xrange 0,100<br>yrange 0,10<br>boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23<br>boxplot x,4,5
		767	@ note: wims will not check your data input \| format. use js-error console to debug any problems.
		768	@ a javascript function <code>statistics()</code> will parse the data and calculate the values [min,Q1,median,Q3,max] and hand them to the boxplot draw function.
		769	@ only a single call to <code>boxplotdata</code> can be made. If multiple boxplots should be present in a single canvas, then use multiple calls to command <a href='#boxplot'>boxplot</a>
		770	@%boxplotdata%size 400,400%xrange 0,100%yrange 0,10%strokecolor orange%fillpattern hatch%linewidth 3%strokecolor green%boxplotdata 11,22,13,15,23,43,12,12,14,2,45,32,44,13,21,24,13,19,35,21,24,23%boxplot x,2,2%mouse red,16
		771	*/
		772	js_function[DRAW_JSBOXPLOT] = 1;
		773	js_function[DRAW_BOXPLOT] = 1;
		774	fprintf(js_include_file,"var boxplot_source = 1;var jsboxplot_data = [%s];\n",get_string(infile,1));
		775	break;
		776	case CANVASTYPE:
		777	canvas_type = (int) (get_real(infile,1));
		778	/*
		779	@ canvastype TYPE
		780	@ for now only useful before commands filltoborder / floodfill / clickfill etc operations<br>Only the images of this TYPE will be scanned and filled
		781	@ default value of TYPE is DRAG_CANVAS e.g. 5 (all clickable / draggable object are in this canvas)
		782	@ use another TYPE, if you know what you are doing...
18627	bpr	783	@ other possible canvasses (e.g. transparent PNG pictures, xsize × ysize on top of each other)<ul><li>EXTERNAL_IMAGE_CANVAS 0</li><li>BG_CANVAS 1</li><li> STATIC_CANVAS 2</li><li> MOUSE_CANVAS 3</li><li> GRID_CANVAS 4</li><li> DRAG_CANVAS 5</li><li> DRAW_CANVAS 6</li><li> TEXT_CANVAS 7</li><li> CLOCK_CANVAS 8</li><li> ANIMATE_CANVAS 9</li><li> TRACE_CANVAS 10</li><li>BOXPLOT_CANVAS 11</li><li> JSPLOT_CANVAS 100, will increase with every call</li><li> FILL_CANVAS 200, will increase with every call</li><li> USERDRAW_JSPLOT 300, will increase with every call</li><li>CLICKFILL_CANVAS 400, will increase with every call/click</li><li>BOXPLOT_CANVAS 500, will increase with every call</li></ul>
18552	bpr	784	*/
		785	break;
		786	case CENTERED:
		787	use_offset = 4;
		788	/*
18556	bpr	789	@ centered
		790	@ keyword ; to place the text centered (in width and height) on the text coordinates(x:y)
		791	@ may be used for text exactly centered on its (x;y)
		792	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		793	@ may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the ''drag/drop/onclick-library``)
		794	@%centered%size 400,400%xrange -10,10%yrange -10,10%fontfamily 12pt Arial%string blue,-9,-9,no offset%point -9,-9,red%centered%string blue,-6,-6,centered%point -6,-6,red%xoffset%string blue,-3,-3,xoffset%point -3,-3,red%yoffset%string blue,0,0,yoffset%point 0,0,red%xyoffset%string blue,3,3,xyoffset%point 3,3,red%resetoffset%string blue,6,6,resetoffset%point 6,6,red
18552	bpr	795	*/
18556	bpr	796	break;
18552	bpr	797	case CENTERSTRING:
		798	/*
18556	bpr	799	@ centerstring color,y-value,the text string
		800	@ title color,y-value,the text string
		801	@ draw a string centered on the canvas at y = y-value
		802	@ can not be set ''onclick`` or ''drag xy`` (...)
		803	@ unicode supported: <code>centerstring red,5,\\u2232</code>
		804	@ use a command like <code>fontfamily italic 24pt Arial</code> to set fonts on browser that support font change
		805	@%centerstring%size 400,400%xrange -10,10%yrange -10,10%bgcolor lightblue%fontfamily italic 22pt Courier%centerstring blue,7,the center
18552	bpr	806	*/
		807	js_function[DRAW_CENTERSTRING] = 1;
		808	for(i=0;i<3;i++){
		809	switch(i){
		810	case 0: stroke_color = get_color(infile,0);break;/* name or hex color */
		811	case 1: double_data[0] = get_real(infile,0);break; /* y in xrange*/
		812	case 2: temp = get_string_argument(infile,1);
		813	/* draw_text = function(canvas_type,y,font_family,stroke_color,stroke_opacity,text) */
		814	decimals = find_number_of_digits(precision);
18557	bpr	815	tmp_buffer=my_newmem(MAX_BUFFER);
		816	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_centerstring(%d,%.*f,\"%s\",\"%s\",%.2f,\"%s\");\n",canvas_root_id,decimals,double_data[0],font_family,stroke_color,stroke_opacity,temp));
18552	bpr	817	add_to_buffer(tmp_buffer);
		818	break;
		819	default:break;
		820	}
		821	}
		822	break;
		823	case CHEMTEX:
		824	/*
		825	chemtex
		826	keyword...needs to be the first command in the script (even before the ''size`` command)
		827	only for KaTeX enabled typesetting !
		828	will include 80kB large js-library for chemisty typesetting
		829	using <a href="http://85.148.206.56/wims/download/katex.for.wims.tar.gz">KaTeX</a> : <code>katex x,y,\\ce{ chemistry tex code} like : \\ce{ Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2- }</code>
		830	using MathJaX : <code>latex x,y,\\ce{ chemistry tex code} like : \\ce{ Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2- }</code>
		831	see https://mhchem.github.io/MathJax-mhchem/
		832	%chemtex_katex_mathjax%chemtex%size 400,400%xrange -10,10%yrange -10,10%snaptogrid%fontfamily 22px Arial%strokecolor red%drag xy%centered%latex 0,8,\\ce{Hg^2+}%drag xy%centered%latex 0,4,\\ce{\\xrightarrow{\\text{I}^{-}}}%drag xy%centered%latex 0,0,\\ce{HgI2}%centered%drag xy%latex 0,-4,\\ce{\\xrightarrow{\\text{I}^{-}}}%drag xy%centered%latex 0,-8,\\ce{[Hg^{II}I4]^2-}
		833	*/
		834	found_size_command = 1;
		835	fprintf(stdout,"\n<script src=\"scripts/js/KaTeX/mhchem.js\" defer></script>\n");
		836	break;
8386	schaersvoo	837
18552	bpr	838	case CIRCLE:
		839	/*
		840	@ circle xc,yc,width (2*r in pixels),color
		841	@ use command <code>fcircle xc,yc,d,color</code>
		842	@ alternative: disk
		843	@ use command <code>fillcolor color</code> to set the fillcolor
		844	@ may be set <a href='#drag'>draggable</a> / <a href='#onclick'>onclick</a>
		845	@ will shrink / expand on zoom out / zoom in
		846	@%circle%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 255,50%drag xy%circle 0,0,60,red%zoom red
		847	*/
		848	for(i=0;i<4;i++){
		849	switch(i){
		850	case 0: double_data[0] = get_real(infile,0);break; /* x */
		851	case 1: double_data[1] = get_real(infile,0);break; /* y */
		852	case 2: double_data[2] = px2x((get_real(infile,0))/2) - px2x(0);break; /* for zoom in/out: radius in 'dx' xrange*/
		853	case 3: stroke_color = get_color(infile,1);/* name or hex color */
18623	bpr	854	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	855	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		856	if(use_affine == TRUE ){ transform(2,2);}
		857	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		858	decimals = find_number_of_digits(precision);
18557	bpr	859	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	860	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,13,[%.f],[%.f],[%.3f],[%.3f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],double_data[2],double_data[2],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	861	add_to_buffer(tmp_buffer);
		862	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		863	dragstuff[13] = 1;
		864	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		865	reset();
		866	break;
		867	default : break;
		868	}
		869	}
		870	break;
		871	case CIRCLES:
		872	/*
		873	@ circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n
		874	@ <b>attention</b> r = radius in x-range (!)
		875	@ use keyword <code>filled</code> or command <code>fcircles</code> to produce solid circles
		876	@ alternative: disks
		877	@ use command <code>fillcolor color</code> to set the fillcolor
		878	@ may be set <a href='#drag'>draggable</a> / <a href='#onclick'>onclick</a> (individually)
		879	@ will shrink / expand on zoom out / zoom in
		880	@%circles_drag%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 255,50%drag xy%circles blue,0,0,2,2,2,3,-3,-3,3,3,3,4,3,-4,2%zoom red
		881	@%circles_onclick%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 255,50%onclick%circles blue,0,0,2,2,2,3,-3,-3,3,3,3,4,3,-4,2%zoom red
		882	@%circles_drag_slider%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag xy%# Click circles(s) to activate%opacity 200,50%fillcolor orange%rotationcenter 2,3%slider 0,2pi,300,30,angle degrees,Rotate%slider -5,5pi,300,30,x display,move in x-direction%slider -10,10*pi,300,30,y display,move in y-direction%fcircles blue,0,0,0.5,2,2,1,-3,-3,1.5,3,3,0.5,3,-4,0.5
		883	*/
		884	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	885	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	886	i=1;
		887	while( ! done ){ /* get next item until EOL*/
		888	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		889	switch (i%3){
		890	case 1:double_data[i-1] = get_real(infile,0);break; /* x */
		891	case 2:double_data[i-1] = get_real(infile,0);break; /* y */
		892	case 0:double_data[i-1] = get_real(infile,1);break; /* r */
		893	}
		894	i++;
		895	}
		896	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,3);}
		897	if(use_affine == TRUE ){ transform(i-1,3);}
		898	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
8386	schaersvoo	899
18552	bpr	900	decimals = find_number_of_digits(precision);
		901	for(c = 0 ; c < i-1 ; c = c+3){
18557	bpr	902	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	903	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,13,[%.f],[%.f],[%.3f],[%.3f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],double_data[c+2],double_data[c+2],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	904	add_to_buffer(tmp_buffer);
		905	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		906	}
		907	reset();
		908	dragstuff[13] = 1;
		909	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		910	break;
		911	case CLEARBUTTON:
		912	/*
18556	bpr	913	@ clearbutton value
		914	@ alternative: delete
		915	@ alternative: erase
		916	@ adds a button to clear the <a href="#userdraw">userdraw</a> canvas with text ''value``
18572	bpr	917	@ <b>attention</b> command <code>clearbutton</code> is incompatible with <a href="#multidraw">multidraw</a> based drawings<br>(in <code>multidraw</code> there is always a remove_object_button for every draw primitive)
18556	bpr	918	@ normally <a href="#userdraw">userdraw</a> primitives have the option to use middle/right mouse button on<br> a point of the object to remove this specific object...this clear button will remove all drawings
		919	@ uses the tooltip placeholder div element: may not be used with command <code>intooltip</code>
		920	@ use command <a href="#css">css</a> to style the button...
		921	@ the clearbutton will have id="canvas_scripts[%d]" ; starting with %d=0 for the first script<br>to change the style of all ''clearbutton`` of all included canvasdraw scripts, use something like<br><code>if(document.getElementById("clearbutton"+canvas_scripts[0])){<br> var p = 0;<br> while(document.getElementById("clearbutton"+canvas_scripts[p])){<br>  document.getElementById("clearbutton"+canvas_scripts[p]).className="some_class_name";<br>  <!−−</code> or <code>document.getElementById("clearbutton"+canvas_scripts[p]).setAttribute("style","some_style"); −−><br>  p++;<br> };<br>};</code>
		922	@%clearbutton%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 255,50%userdraw circles,red%clearbutton Remove All
18552	bpr	923	*/
		924	if(reply_format == 29){/* eg multidraw is selected */
		925	// canvas_error("command clearbutton incompatible with multidraw...only suitable for userdraw");
		926	}
		927	add_clear_button(css_class,get_string(infile,1));
		928	break;
		929	case CLOCK:
		930	/*
		931	@ clock x,y,r(px),H,M,S,type hourglass,interactive [ ,H_color,M_color,S_color,background_color,foreground_color ]
		932	@ use command <code>opacity stroke-opacity,fill-opacity</code> to adjust foreground (stroke) and background (fill) transparency
		933	@ type hourglass:<br>type = 0: only segments<br>type = 1: only numbers<br>type = 2: numbers and segments
18627	bpr	934	@ colors are optional: if not defined, default values will be used<br>default colors: clock 0,0,60,4,35,45,1,2<br>custom colors: clock 0,0,60,4,35,45,1,2,,,,yellow,red<br>custom colors: clock 0,0,60,4,35,45,1,2,white,green,blue,black,yellow
18552	bpr	935	@ if you don't want a seconds hand (or minutes...), just make it invisible by using the background color of the hourglass...
		936	@ interactive <ul><li>0: not interactive, just clock(s)</li><li>1: function read_canvas() will read all active clocks in H:M:S format<br>The active clock(s) can be adjusted by pupils</li><li>2: function read_canvas() will return the clicked clock <br>(like multiplechoice; first clock in script in nr. 0 )</li><li>3: no prefab buttons...create your own buttons (or other means) to make the clock(s) adjustable by javascript function set_clock(num,type,diff)<br>wherein: num = clock id (starts with 0) ; type = 1 (hours) ; type = 2 (minutes) ; type = 3 (seconds) <br>and diff = the increment of 'type' (positive or negative)</li></ul>
		937	@ canvasdraw will not check validity of colornames...the javascript console is your best friend
		938	@ no combinations with other reply_types allowed, for now
		939	@ if interactive is set to ''1``, 6 buttons per clock will be displayed for adjusting a clock (H+ M+ S+ H- M- S-)<br> set_clock(clock_id,type,incr) <br>first clock has clock_id=0 ; type: H=1,M=2,S=3 ; incr: increment integer
18627	bpr	940	@ note: if you need multiple -interactive- clocks on a webpage, use multiple ''clock`` commands in a single script<br>and <i>not multiple canvas scripts</i> in a single page
18552	bpr	941	@ note: clocks will not zoom or pan, when using command <a href='#zoom'>zoom</a>
		942	@%clock_1%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,0,0,red,green,blue,lightgrey,black
		943	@%clock_2%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,1,1,red,green,blue,lightgrey,black
		944	@%clock_3%size 400,400%xrange -10,10%yrange -10,10%clock -5,0,80,4,35,45,2,2,red,green,blue,lightgrey,black%clock 5,0,80,3,15,65,2,2,red,green,blue,lightgrey,black
		945	@%clock_4%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,0,0,red,green,blue,lightgrey,black
		946	@%clock_5%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,1,1,red,green,blue,lightgrey,black
		947	@%clock_6%size 400,400%xrange -10,10%yrange -10,10%clock -5,0,80,4,35,45,2,2,red,green,blue,lightgrey,black%clock 5,0,80,8,55,15,2,2,red,green,blue,lightgrey,black
		948	@%clock_7%size 400,400%xrange -10,10%yrange -10,10%clock 0,0,120,4,35,45,2,0,red,green,blue,lightgrey,black
		949	*/
		950	js_function[DRAW_CLOCK] = 1;
		951	js_function[INTERACTIVE] = 1;
8386	schaersvoo	952
18552	bpr	953	/* var clock = function(xc,yc,radius,H,M,S,h_color,m_color,s_color,bg_color,fg_color) */
		954	for(i=0;i<9;i++){
		955	switch(i){
		956	case 0: int_data[0] = x2px(get_real(infile,0)); break; /* xc */
		957	case 1: int_data[1] = y2px(get_real(infile,0)); break; /* yc */
		958	case 2: int_data[2] = get_real(infile,0);break;/* radius in px */
		959	case 3: int_data[3] = get_real(infile,0);break;/* hours */
		960	case 4: int_data[4] = get_real(infile,0);break;/* minutes */
		961	case 5: int_data[5] = get_real(infile,0);break;/* seconds */
		962	case 6: int_data[6] = get_real(infile,0);if(int_data[6] < 0 \|\| int_data[6] > 2){canvas_error("hourglass can be 0,1 or 2");}break;/* type hourglass */
		963	case 7: int_data[7] = (int)(get_real(infile,1));/* interactive 0,1,2*/
		964	switch(int_data[7]){
		965	case 0:break;
		966	case 1:
		967	if(clock_cnt == 0){
		968	if( reply_format == 0 ){
		969	reply_format = 18; /* user sets clock */
18557	bpr	970	/*
		971	tmp_buffer=my_newmem(MAX_BUFFER);
		972	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "set_clock = function(num,type,diff){var name = eval(\"clocks\"+num);switch(type){case 1:name.H = parseInt(name.H+diff);break;case 2:name.M = parseInt(name.M+diff);break;case 3:name.S = parseInt(name.S+diff);break;default: break;};name = clock(name.xc,name.yc,name.radius,name.H,name.M,name.S,name.type,name.interaction,name.H_color,name.M_color,name.S_color,name.bg_color,name.fg_color);};\n"));
18552	bpr	973	add_to_buffer(tmp_buffer);
		974	*/
		975	fprintf(js_include_file,"set_clock = function(num,type,diff){if(wims_status == \"done\"){return;};var name = eval(\"clocks\"+num);switch(type){case 1:name.H = parseInt(name.H+diff);break;case 2:name.M = parseInt(name.M+diff);break;case 3:name.S = parseInt(name.S+diff);break;default: break;};name = new clock(name.xc,name.yc,name.radius,name.H,name.M,name.S,name.type,name.interaction,name.H_color,name.M_color,name.S_color,name.bg_color,name.fg_color);};\n");
		976	}
		977	else {
		978	canvas_error("interactive clock may not be used together with other reply_types...");
		979	}
		980	}
		981	fprintf(stdout,"<p style=\"text-align:center\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,1)\" value=\"H+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,1)\" value=\"M+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,1)\" value=\"S+\"><br><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,-1)\" value=\"H−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,-1)\" value=\"M−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,-1)\" value=\"S−\"></p>",css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt);
		982	break;
		983	case 3:
		984	if(clock_cnt == 0){
		985	if( reply_format == 0 ){
		986	reply_format = 18; /* user sets clock */
		987	fprintf(js_include_file,"set_clock = function(num,type,diff){if(wims_status == \"done\"){return;};var name = eval(\"clocks\"+num);switch(type){case 1:name.H = parseInt(name.H+diff);break;case 2:name.M = parseInt(name.M+diff);break;case 3:name.S = parseInt(name.S+diff);break;default: break;};name = new clock(name.xc,name.yc,name.radius,name.H,name.M,name.S,name.type,1,name.H_color,name.M_color,name.S_color,name.bg_color,name.fg_color);};\n");
		988	}
		989	else {
		990	canvas_error("interactive clock may not be used together with other reply_types...");
		991	}
		992	}
		993	/*
		994	fprintf(stdout,"<p style=\"text-align:center\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,1)\" value=\"H+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,1)\" value=\"M+\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,1)\" value=\"S+\"><br><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,1,-1)\" value=\"H−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,2,-1)\" value=\"M−\"><input class=\"%s\" type=\"button\" onclick=\"javascript:set_clock(%d,3,-1)\" value=\"S−\"></p>",css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt,css_class,clock_cnt);
		995	*/
		996	break;
		997	case 2:
		998	if( reply_format == 0 ){
		999	reply_format = 19; /* "onclick */
		1000	js_function[INTERACTIVE] = 1;
		1001	fprintf(js_include_file,"\n/* begin onclick handler for clocks */\nvar reply = new Array();canvas_div.addEventListener( 'mousedown', user_click,false);\n\nfunction user_click(evt){if(evt.button == 1){var canvas_rect = clock_canvas.getBoundingClientRect();var x = evt.clientX - canvas_rect.left;var y = evt.clientY - canvas_rect.top;var p = 0;var name;var t = true;while(t){try{name = eval('clocks'+p);if( x < name.xc + name.radius && x > name.xc - name.radius ){if( y < name.yc + name.radius && y > name.yc - name.radius ){reply[0] = p;name = new clock(name.xc,name.yc,name.radius,name.H,name.M,name.S,name.type,name.interaction,name.H_color,name.M_color,name.S_color,\"lightblue\",name.fg_color);};}else{clock_ctx.clearRect(name.xc-name.radius,name.yc-name.radius,name.xc+name.radius,name.yc+name.radius);name = new clock(name.xc,name.yc,name.radius,name.H,name.M,name.S,name.type,name.interaction,name.H_color,name.M_color,name.S_color,name.bg_color,name.fg_color);};p++;}catch(e){t=false;};};};};\n");
		1002	}
		1003	else {
		1004	if( reply_format != 19){
		1005	canvas_error("clickable clock(s) may not be used together with other reply_types...");
		1006	}
		1007	}
		1008	break;
		1009	default: canvas_error("interactive must be set 0,1 or 2");break;
		1010	}
		1011	break;
		1012	case 8:
		1013	if(clock_cnt == 0 ){ /* set opacity's just once .... it should be a argument to clock(), for now it's OK */
		1014	fprintf(js_include_file,"var clock_bg_opacity = %.2f;var clock_fg_opacity = %.2f;",fill_opacity,stroke_opacity);
		1015	}
		1016	temp = get_string(infile,3);/* optional colors, like: ,,red,,blue*/
		1017	if( strstr( temp,",") != 0 ){ temp = str_replace(temp,",","\",\""); }
		1018	else{
		1019	/* h_color,m_color,s_color,bg_color,fg_color */
		1020	temp = ",black\",\"black\",\"black\",\"white\",\"black";}
18557	bpr	1021	tmp_buffer=my_newmem(MAX_BUFFER);
		1022	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "clocks%d = new clock(%d,%d,%d,%d,%d,%d,%d,%d,\"%s\");\n",clock_cnt,int_data[0],int_data[1],int_data[2],int_data[3],int_data[4],int_data[5],int_data[6],int_data[7],temp));
18552	bpr	1023	add_to_buffer(tmp_buffer);
		1024	fprintf(js_include_file,"var clocks%d;",clock_cnt);
		1025	clock_cnt++;
		1026	break;
		1027	default:break;
		1028	}
		1029	}
		1030	break;
		1031	case COLORPALETTE:
		1032	/*
18556	bpr	1033	@ colorpalette color_name_1,color_name_2,...,color_name_8
		1034	@ opacity will be the same for all colors and is set by command <a href="#opacity">opacity [0-255],[0-255]</a>
		1035	@ can be used with command <a href='#userdraw'>userdraw clickfill,color</a> when more than one fillcolor is wanted.<br>in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br>the pupil can choose from the given colors by clicking small coloured buttons.<br> the click coordinates and corresponding fillcolor will be stored in read_canvas()...when using the appropriate replyformat.<br>the first color of the palette is color=0
		1036	@ make sure to include the ''remove button`` by using command <a href='#clearbutton'>clearbutton some_text</a>
18552	bpr	1037	*/
		1038	if( use_tooltip == 1 ){canvas_error("command 'colorpalette' is incompatible with command 'intooltip tip_text'");}
		1039	fprintf(js_include_file,"var multifillcolors = [];var palettecolors = [");
		1040	while( ! done ){
		1041	temp = get_color(infile,1);
		1042	fprintf(js_include_file,"\"%s\",",temp);
		1043	}
		1044	fprintf(js_include_file,"];");/* add black to avoid trouble with dangling comma... */
		1045	add_color_palette(css_class);
		1046	break;
15111	schaersvoo	1047
18552	bpr	1048	case COMMENT:
		1049	sync_input(infile);
		1050	break;
11806	schaersvoo	1051
18552	bpr	1052	case COPY:
		1053	/*
		1054	@ copy x,y,x1,y1,x2,y2,[filename URL]
		1055	@ The image may be "bitmap" or "SVG"
		1056	@ Insert the region from (x1,y1) to (x2,y2) (in pixels) of [filename] to (x,y) in x/y-range
		1057	@ If x1=y1=x2=y2=-1, the whole [filename URL] is copied.
		1058	@ [filename] is the URL of the image
		1059	@ <em>TODO:move special image functions to generic 'dragstuff' library</em>
		1060	@ URL is normal URL of network reachable image file location
		1061	@ if command <a href="#drag">drag x/y/xy</a> is set before command ''copy``, the images will be draggable<br>javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br>the command drag is only valid for the next image<br>draggable / non-draggable images may be mixed<br>may be used together with preceding keywords ''snaptogrid``, ''xsnaptogrid``, ''ysnaptogrid`` or <code>snaptopoints x1,y1,x2,y2...</code>.
		1062	@ if keyword <a href="#onclick">onclick</a> is set before command ''copy`` the image(s) is clickable (marked with a green rectangle around the image)<br>use 'read_dragdrop' to get the number of the clicked image(s)<br>use command 'clearbutton some_text' to reset the reply/click array.<br>example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0<br>after clicking the clear button: reply = 0,0,0,0<br>May be mixed with commands ''drag x\|y\|xy`` (use javascript read_canvas to get the new coordinates
		1063	@ ''onclick`` for external images may be mixed with canvas generated stuff (like lines,curves, embeded XML etc)
		1064	@ you may draw / userdraw / drag other stuff on top of an "imported" image
		1065	@ the use of a slider is not possible: if needed, use command <a href='#html'>html x,y,<img src=my_image.svg /> </a>
		1066	@ use keyword <a href='#centered'>centered</a> before command ''copy`` to place image center at given coordinates.
		1067	@%copy_onclick%size 400,400%xrange -10,10%yrange -10,10%onclick%copy -5,5,-1,-1,-1,-1,gifs/fr.gif%onclick%copy 5,5,-1,-1,-1,-1,gifs/en.gif%onclick%copy 5,-5,-1,-1,-1,-1,gifs/it.gif%onclick%copy -5,-5,-1,-1,-1,-1,gifs/cn.gif
		1068	@%copy_drag_xy%size 400,400%xrange -10,10%yrange -10,10%# attention: left mouse click on the image will activate dragging...%# keep left mouse button pressed while moving the image !%drag xy%copy -5,5,-1,-1,-1,-1,gifs/fr.gif%drag xy%copy 5,5,-1,-1,-1,-1,gifs/en.gif%drag xy%copy 5,-5,-1,-1,-1,-1,gifs/it.gif%drag xy%copy -5,-5,-1,-1,-1,-1,gifs/cn.gif
		1069	@%copy_drag_xy_snaptogrid%size 400,400%xrange -10,10%yrange -10,10%grid 2,2,grey%# attention: left mouse click on the image will activate dragging...%# keep left mouse button pressed while moving the image !%drag xy%# a function read_canvas_images() %copy -6,6,-1,-1,-1,-1,gifs/fr.gif%snaptogrid%drag xy%copy 6,6,-1,-1,-1,-1,gifs/en.gif%snaptogrid%drag xy%copy 6,-6,-1,-1,-1,-1,gifs/it.gif%snaptogrid%drag xy%copy -6,-6,-1,-1,-1,-1,gifs/cn.gif
		1070	*/
		1071	for(i = 0 ; i<7;i++){
		1072	switch(i){
		1073	case 0: double_data[0]=get_real(infile,0);break; /* x left top corner in x/y range */
		1074	case 1: double_data[1]=get_real(infile,0);break; /* y left top corner in x/y range */
		1075	case 2: int_data[2]=(int)(get_real(infile,0));break;/* x1 in px of external image */
		1076	case 3: int_data[3]=(int)(get_real(infile,0));break;/* y1 in px of external image */
		1077	case 4: int_data[4]=(int)(get_real(infile,0));break;/* x2 --> width */
		1078	case 5: int_data[5]=(int)(get_real(infile,0)) ;break;/* y2 --> height */
		1079	case 6: URL = get_string(infile,1);
		1080	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1081	if(use_affine == TRUE ){transform(2,2);}
		1082	int_data[0] = x2px(double_data[0]);
		1083	int_data[1] = y2px(double_data[1]);
		1084	int_data[6] = int_data[4] - int_data[2];/* swidth & width (if not scaling )*/
		1085	int_data[7] = int_data[5] - int_data[3];/* sheight & height (if not scaling )*/
		1086	if( onclick == 0 ){ /* no mouse needed static image copy */
		1087	if(js_function[DRAW_EXTERNAL_IMAGE] == 0){/* create canvas just once */
		1088	fprintf(js_include_file,"var image_copy_canvas = create_canvas%d(%d,xsize,ysize);",canvas_root_id,STATIC_IMAGE_CANVAS);
		1089	js_function[DRAW_EXTERNAL_IMAGE] = 1;
		1090	}
18557	bpr	1091	tmp_buffer=my_newmem(MAX_BUFFER);
		1092	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_external_image(\"%s\",%d,%d,%d,%d,%d,%d,%d,%d,%d,%d);\n",URL,int_data[2],int_data[3],int_data[6],int_data[7],int_data[0],int_data[1],int_data[6],int_data[7],use_offset,int_data[10]));
18552	bpr	1093	}
		1094	else /* onclick or drag & drop external copy images */
		1095	{
		1096	js_function[DRAG_EXTERNAL_IMAGE] = 1;
18557	bpr	1097	tmp_buffer=my_newmem(MAX_BUFFER);
		1098	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "drag_external_image(\"%s\",%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d);\n",URL,int_data[2],int_data[3],int_data[6],int_data[7],int_data[0],int_data[1],int_data[6],int_data[7],onclick,object_cnt,use_offset,use_snap,int_data[10]));
18552	bpr	1099	}
		1100	add_to_buffer(tmp_buffer);
		1101	object_cnt++;
		1102	break;
		1103	default: break;
		1104	}
		1105	}
		1106	reset();
		1107	break;
11806	schaersvoo	1108	/*
		1109	HTML5 specs:
		1110	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
18552	bpr	1111	img Specifies the image, canvas, or video element to use
		1112	sx The x coordinate where to start clipping: x1 = int_data[0]
		1113	sy The y coordinate where to start clipping: x2 = int_data[1]
		1114	swidth The width of the clipped image: int_data[2] - int_data[0]
14066	bpr	1115	sheight The height of the clipped image: int_data[3] - int_data[1]
18552	bpr	1116	x The x coordinate where to place the image on the canvas: dx1 = int_data[4]
		1117	y The y coordinate where to place the image on the canvas: dy1 = int_data[5]
		1118	width The width of the image to use (stretch or reduce the image): dx2 - dx1 = int_data[6]
		1119	height The height of the image to use (stretch or reduce the image): dy2 - dy1 = int_data[7]
11806	schaersvoo	1120	*/
18552	bpr	1121	case COPYRESIZED:
		1122	/*
		1123	@ copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url
		1124	@ The image may be any "bitmap" or "SVG"
		1125	@ Insert the region from (x1,y1) to (x2,y2) (in pixels) of [ filename], <br>possibly resized,<br>to the region of (dx1,dy1) to (dx2,dy2) in x/y-range
		1126	@ (dx1:dy1) must be left top corner; (dx2:dy2) must be right bottom corner of inserted image
		1127	@ If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized.
		1128	@ URL is normal URL of network reachable image file location<br>(as seen from public_html-root or network reachable 'http://some_server/my_images/test.gif'<br>(eg no special wims paths are searched !!)
		1129	@ if command <a href="#drag">drag x/y/xy</a> is set before command ''copy``, the images will be draggable<br>javascript function read_canvas(); will return the x/y coordinate data in xrange/yrange of all -including non draggable- images<br>the command drag is only valid for the next image<br>draggable / non-draggable images may be mixed<br>may be used together with preceding keywords ''snaptogrid``,''xsnaptogrid``,''ysnaptogrid`` or <code>snaptopoints x1,y1,x2,y2...</code>
		1130	@ if keyword <a href="#onclick">onclick</a> is set before command ''copy`` the image(s) is clickable (marked with a green rectangle around the image)<br>use ''read_dragdrop`` to get the number of the clicked image(s)<br>use command 'clearbutton some_text' to reset the reply/click array.<br>example: 4 images; student clicked on image 2 and 3: reply = 0,1,1,0<br>after clicking the clear button: reply = 0,0,0,0<br>May be mixed with commands ''drag x\|y\|xy`` (use javascript read_canvas to get the new coordinates
		1131	@ ''onclick`` for external images may be mixed with canvas generated stuff (like lines,curves etc)
		1132	@ you may draw / userdraw / drag stuff on top of an "imported" image
		1133	@ when set draggable, there will be special function 'read_canvas_images()'<br>now dragging external images may be combined with 'read_canvas()' from <a href='#userdraw'>userdraw</a> or <a href='#multidraw'>multidraw</a><br>set command <a href='#precision'>precision</a> before command ''copy``
		1134	@ use keyword <a href='#centered'>centered</a> before command 'copyresized' to place image center at given coordinates.
		1135	@ <em>TODO:move special image functions to generic 'dragstuff' library</em>
		1136	*/
		1137	for(i = 0 ; i<9;i++){
		1138	switch(i){
		1139	case 0: int_data[0] = (int)(get_real(infile,0));break; /* x1 */
		1140	case 1: int_data[1] = (int)(get_real(infile,0));break; /* y1 */
		1141	case 2: int_data[2] = (int)(get_real(infile,0));break;/* x2 */
		1142	case 3: int_data[3] = (int)(get_real(infile,0));break;/* y2 */
		1143	case 4: int_data[4] = x2px(get_real(infile,0));break;/* dx1 */
		1144	case 5: int_data[5] = y2px(get_real(infile,0));break;/* dy1 */
		1145	case 6: int_data[6] = x2px(get_real(infile,0));break;/* dx2 */
		1146	case 7: int_data[7] = y2px(get_real(infile,0));break;/* dy2 */
		1147	case 8: URL = get_string(infile,1);
		1148	if( int_data[1] == -1 ){ int_data[10] = 1; }else{int_data[10] = 0; }/* resized / not resized */
		1149	/* flag error when wrong diagonal: copyresized -1,-1,-1,-1,0,0,7,7,testfig.gif */
		1150	if( int_data[7] < int_data[5] \|\| int_data[6] < int_data[4]){
		1151	canvas_error("in copyresized, use:<br>left top corner (dx1:dy1) and right bottom corner (dx2:dy2) ! ");
		1152	}
		1153	int_data[2] = abs(int_data[2] - int_data[0]);/* swidth */
		1154	int_data[3] = abs(int_data[3] - int_data[1]);/* sheight */
		1155	int_data[6] = abs(int_data[6] - int_data[4]);/* width */
		1156	int_data[7] = abs(int_data[7] - int_data[5]);/* height */
		1157	if( onclick == 0 ){ /* no mouse needed static image copy */
		1158	if(js_function[DRAW_EXTERNAL_IMAGE] == 0){
		1159	fprintf(js_include_file,"var image_copy_canvas = create_canvas%d(%d,xsize,ysize);",canvas_root_id,STATIC_IMAGE_CANVAS);
		1160	js_function[DRAW_EXTERNAL_IMAGE] = 1;
		1161	}
18557	bpr	1162	tmp_buffer=my_newmem(MAX_BUFFER);
		1163	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_external_image(\"%s\",%d,%d,%d,%d,%d,%d,%d,%d,%d,%d);\n",URL,int_data[0],int_data[1],int_data[2],int_data[3],int_data[4],int_data[5],int_data[6],int_data[7],use_offset,int_data[10]));
18552	bpr	1164	}
		1165	else /* onclick or drag & drop external copy images */
		1166	{
		1167	js_function[DRAG_EXTERNAL_IMAGE] = 1;
18557	bpr	1168	tmp_buffer=my_newmem(MAX_BUFFER);
		1169	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "drag_external_image(\"%s\",%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d);\n",URL,int_data[0],int_data[1],int_data[2],int_data[3],int_data[4],int_data[5],int_data[6],int_data[7],onclick,object_cnt,use_offset,use_snap,int_data[10]));
18552	bpr	1170	object_cnt++;
		1171	}
		1172	add_to_buffer(tmp_buffer);
		1173	break;
		1174	default: break;
		1175	}
		1176	}
		1177	reset();
		1178	break;
8386	schaersvoo	1179
18552	bpr	1180	case CROSSHAIR:
		1181	/*
		1182	@ crosshair x,y,color
		1183	@ draw a single crosshair point at (x;y) in color ''color``
		1184	@ use command <code>crosshairsize int</code> and / or <code>linewidth int</code> to adjust
		1185	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1186	@%crosshair%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%linewidth 2%onclick%crosshair 0,0,red%linewidth 1%onclick%crosshair 1,1,blue%linewidth 3%onclick%crosshair 3,3,green%linewidth 4%xrosshair 4,4,orange
		1187	*/
		1188	for(i=0;i<3;i++){
		1189	switch(i){
		1190	case 0: double_data[0] = get_real(infile,0);break; /* x */
		1191	case 1: double_data[1] = get_real(infile,0);break; /* y */
		1192	case 2: stroke_color = get_color(infile,1);/* name or hex color */
		1193	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1194	if(use_affine == TRUE ){ transform(2,2);}
		1195	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1196	decimals = find_number_of_digits(precision);
18557	bpr	1197	tmp_buffer=my_newmem(MAX_BUFFER);
		1198	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,7,[%.f],[%.f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],crosshair_size,crosshair_size,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,0,0,0,use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1199	add_to_buffer(tmp_buffer);
		1200	if(onclick != 0){object_cnt++;}
		1201	/* object_cnt++ */
		1202	reset();
		1203	dragstuff[7] = 1;
		1204	break;
		1205	default:break;
		1206	}
		1207	}
		1208	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1209	break;
11806	schaersvoo	1210
18552	bpr	1211	case CROSSHAIRS:
		1212	/*
		1213	@ crosshairs color,x1,y1,x2,y2,...,x_n,y_n
		1214	@ draw multiple crosshair points at given coordinates in color ''color``
		1215	@ use command <code>crosshairsize int</code> and / or <code>linewidth int</code> to adjust
		1216	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		1217	@%crosshairs_1%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%snaptogrid%linewidth 2%drag xy%crosshairs red,0,0,1,1,2,2,3,3%drag x%crosshairs blue,0,1,1,2,2,3,3,4
		1218	@%crosshairs_2%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%linewidth 2%onclick%crosshairs red,0,0,1,1,2,2,3,3%onclick%crosshairs blue,0,1,1,2,2,3,3,4
12107	schaersvoo	1219	*/
18552	bpr	1220	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		1221	fill_color = stroke_color;
		1222	i=0;
		1223	while( ! done ){ /* get next item until EOL*/
		1224	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1225	if(i%2 == 0 ){
		1226	double_data[i] = get_real(infile,0); /* x */
		1227	}
		1228	else {
		1229	double_data[i] = get_real(infile,1); /* y */
		1230	}
		1231	i++;
		1232	}
		1233	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		1234	if(use_affine == TRUE ){ transform(i-1,2);}
		1235	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1236	decimals = find_number_of_digits(precision);
		1237	for(c=0 ; c < i-1 ; c = c+2){
18557	bpr	1238	tmp_buffer=my_newmem(MAX_BUFFER);
		1239	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,7,[%.f],[%.f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],crosshair_size,crosshair_size,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1240	add_to_buffer(tmp_buffer);
		1241	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		1242	}
		1243	dragstuff[7] = 1;
		1244	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1245	reset();
		1246	break;
		1247	case CROSSHAIRSIZE:
		1248	/*
		1249	@ crosshairsize int
		1250	@ default 8 (px)
		1251	*/
		1252	crosshair_size = (int) (get_real(infile,1));
		1253	break;
		1254	case CSS:
		1255	/*
		1256	@ css css_class
		1257	@ may be used before any ''style-able`` html object (like inputfields or buttons) or some html objects that are generated by some canvasdraw commands
		1258	@ in case of <a href="#multidraw">multidraw</a> this command must be a table css class, for example "wimstable"
		1259	@%css%size 400,400%xrange -10,10%yrange -10,10%css wims_button_help%input 0,0,10,1,Hello
		1260	*/
		1261	css_class = get_string(infile,1);
		1262	break;
		1263	case CURSOR:
		1264	/*
		1265	@ cursor some CSS cursor_style
		1266	@ alternative: pointer
		1267	@ style can be any valid CSS property value
		1268	@ choose from these types:<br>alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,<br>ew-resize,grab,grabbing,help,move,n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,<br>nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,s-resize,se-resize,<br>sw-resize,text,url(myBall.cur),auto,vertical-text,w-resize,wait,zoom-in,zoom-out,initial
		1269	@ note: wims will not check the validity of your cursor declaration
		1270	@%cursor_css%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 3%drag xy%opacity 200,75%fcircles blue,-5,5,3,-4,-2,6,0,0,5,3,4,2,4,-5,4
		1271	*/
		1272	fprintf(js_include_file,"canvas_div%d.style.cursor = \"%s\";",canvas_root_id,get_string(infile,1));
		1273	break;
		1274	case CURVE:
		1275	/*
18556	bpr	1276	@ curve color,formula(x)
		1277	@ alternative: plot
18572	bpr	1278	@ use command <a href="#trange">trange</a> in parametric functions before <b>every</b> command curve / plot <code>trange -pi,pi<br>curve color,formula1(t),formula2(t)</code><br>A next parametric curve will only be correctly plot when trange is set again !<br>this is a design flaw and not a feature...
18556	bpr	1279	@ use command <a href="#precision">precision</a> to increase the number of digits of the plotted points
		1280	@ use command <a href="#plotsteps">plotsteps</a> to increase / decrease the amount of plotted points (default 150)
		1281	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1282	@ if you need a plot beyond xrange / yrange, use <a href="#jsplot">jsplot</a> (command ''curve`` will only calculate points within the xrange)
18569	bpr	1283	@%curve%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%xlabel x-axis%ylabel y-axis%precision 1%grid 2,2,grey,2,2,6,grey%precision 1000%curve red,4sqrt(x)%curve green,2sqrt(abs(x))%curve blue,31/sqrt(x)%curve orange,4sin(4/x)%dashed%curve red,4*cos(x)
18552	bpr	1284	*/
		1285	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	1286
18552	bpr	1287	if( use_parametric == TRUE ){ /* parametric color,fun1(t),fun2(t)*/
		1288	use_parametric = FALSE;
		1289	stroke_color = get_color(infile,0);
		1290	char *fun1 = get_string_argument(infile,0);
		1291	char *fun2 = get_string_argument(infile,1);
		1292	if( strlen(fun1) == 0 \|\| strlen(fun2) == 0 ){canvas_error("parametric functions are NOT OK !");}
18557	bpr	1293	tmp_buffer=my_newmem(MAX_BUFFER);
18634	schaersvoo	1294	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,9,%s,[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,eval_parametric(xsize,ysize,fun1,fun2,xmin-10,xmax+10,ymin-10,ymax+10,tmin,tmax,plot_steps,precision,rotationcenter),2line_width,2line_width,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1295	add_to_buffer(tmp_buffer);
		1296	}
		1297	else{
		1298	stroke_color = get_color(infile,0);
		1299	char *fun1 = get_string_argument(infile,1);
		1300	if( strlen(fun1) == 0 ){canvas_error("function is NOT OK !");}
18557	bpr	1301	tmp_buffer=my_newmem(MAX_BUFFER);
18634	schaersvoo	1302	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,9,%s,[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,eval(xsize,ysize,fun1,xmin-10,xmax+10,ymin-10,ymax+10,plot_steps,precision,rotationcenter),line_width,line_width,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1303	add_to_buffer(tmp_buffer);
		1304	}
		1305	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		1306	dragstuff[9] = 1;
		1307	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1308	reset();
		1309	break;
		1310	case CURVEDARROW:
14038	schaersvoo	1311	/*
18556	bpr	1312	@ curvedarrow x1,y1,xc,yc,x2,y2,color
		1313	@ draw a single headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br> note: the curve will <b>not go through</b> point (xc:yc)
		1314	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1315	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1316	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1317	@%curvedarrow_drag%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 2%drag xy%curvedarrow -5,0,0,10,5,0,blue
		1318	@%curvedarrow_click%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%%onclick%curvedarrow -5,0,0,-10,5,0,blue%onclick%curvedarrow -8,0,0,5,8,3,green
11806	schaersvoo	1319
14029	schaersvoo	1320	h[0] = arrowhead
14066	bpr	1321	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1322	function Shape(object_cnt,onclick,direction,type,x,y,w,h,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1,use_rotate,angle,text,font_size,font_family,use_slider,rotation_center,use_offset)
14038	schaersvoo	1323	*/
18552	bpr	1324	for(i=0;i<7;i++){
		1325	switch(i){
		1326	case 0: double_data[0] = get_real(infile,0);break; /* x1 */
		1327	case 1: double_data[1] = get_real(infile,0);break; /* y1 */
		1328	case 2: double_data[2] = get_real(infile,0);break; /* xc */
		1329	case 3: double_data[3] = get_real(infile,0);break; /* yc */
		1330	case 4: double_data[4] = get_real(infile,0);break; /* y3 */
		1331	case 5: double_data[5] = get_real(infile,0);break; /* y3 */
		1332	case 6: stroke_color = get_color(infile,1);/* name or hex color */
		1333	if(use_rotate == TRUE ){rotate(6,angle,rotationcenter,2);}
		1334	if(use_affine == TRUE ){ transform(6,2);}
		1335	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1336	decimals = find_number_of_digits(precision);
18557	bpr	1337	tmp_buffer=my_newmem(MAX_BUFFER);
		1338	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,21,[%.f,%.f,%.f],[%.f,%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[4],decimals,double_data[1],decimals,double_data[3],decimals,double_data[5],arrow_head,arrow_head,arrow_head,1,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1339	add_to_buffer(tmp_buffer);
		1340	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		1341	reset();
		1342	break;
		1343	}
		1344	}
		1345	dragstuff[21] = 1;
		1346	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1347	break;
		1348	case CURVEDARROW2:
14038	schaersvoo	1349	/*
18556	bpr	1350	@ curvedarrow2 x1,y1,xc,yc,x2,y2,color
		1351	@ draw a double headed curved arrow from (x1:y1) in direction of (xc:yc) to point (x2:y2)<br> note: the curve will <b>not go through</b> point (xc:yc)
		1352	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1353	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1354	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1355	@%curvedarrow_drag%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 2%drag xy%curvedarrow2 -5,0,0,10,5,0,blue
18569	bpr	1356	@%curvedarrow_click%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%%onclick%curvedarrow2 -5,0,0,-10,5,0,blue%onclick%curvedarrow -8,0,0,5,8,3,green
14029	schaersvoo	1357
		1358	h[0] = arrowhead
14066	bpr	1359	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1360	function Shape(object_cnt,onclick,direction,type,x,y,w,h,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1,use_rotate,angle,text,font_size,font_family,use_slider,rotation_center,use_offset)
14038	schaersvoo	1361	*/
18552	bpr	1362	for(i=0;i<7;i++){
		1363	switch(i){
		1364	case 0: double_data[0] = get_real(infile,0);break; /* x1 */
		1365	case 1: double_data[1] = get_real(infile,0);break; /* y1 */
		1366	case 2: double_data[2] = get_real(infile,0);break; /* xc */
		1367	case 3: double_data[3] = get_real(infile,0);break; /* yc */
		1368	case 4: double_data[4] = get_real(infile,0);break; /* y3 */
		1369	case 5: double_data[5] = get_real(infile,0);break; /* y3 */
		1370	case 6: stroke_color = get_color(infile,1);/* name or hex color */
		1371	if(use_rotate == TRUE ){rotate(6,angle,rotationcenter,2);}
		1372	if(use_affine == TRUE ){ transform(6,2);}
		1373	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1374	decimals = find_number_of_digits(precision);
18557	bpr	1375	tmp_buffer=my_newmem(MAX_BUFFER);
		1376	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,21,[%.f,%.f,%.f],[%.f,%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[4],decimals,double_data[1],decimals,double_data[3],decimals,double_data[5],arrow_head,arrow_head,arrow_head,2,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1377	add_to_buffer(tmp_buffer);
		1378	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		1379	dragstuff[21] = 1;
		1380	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1381	reset();
		1382	break;
		1383	}
		1384	}
		1385	break;
		1386	case CURVEDARROWS:
14038	schaersvoo	1387	/*
18556	bpr	1388	@ curvedarrows color,x1,y1,xc,yc,x2,y2,...,x_(n-1),y_(n-1),xc,yc,x_n,y_n
		1389	@ draw curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc<br> note: the curve will <b>not go through</b> point (xc:yc)
		1390	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1391	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1392	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1393	@%curvedarrows_drag%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 2%drag xy%curvedarrows red,-8,0,0,8,8,0,-5,5,0,-10,6,3
		1394	@%curvedarrows_click%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%%onclick%curvedarrows red,-8,0,0,8,8,0,-5,5,0,-10,6,3
14029	schaersvoo	1395
14030	schaersvoo	1396	h[0] = arrowhead
14066	bpr	1397	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1398	function Shape(object_cnt,onclick,direction,type,x,y,w,h,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1,use_rotate,angle,text,font_size,font_family,use_slider,rotation_center,use_offset)
14038	schaersvoo	1399	*/
18552	bpr	1400	stroke_color = get_color(infile,0);/* name or hex color */
		1401	i = 0;
		1402	decimals = find_number_of_digits(precision);
		1403	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1404	while( ! done ){
		1405	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1406	double_data[0] = get_real(infile,0); /* x1 */
		1407	double_data[1] = get_real(infile,0); /* y1 */
		1408	double_data[2] = get_real(infile,0); /* xc */
		1409	double_data[3] = get_real(infile,0); /* yc */
		1410	double_data[4] = get_real(infile,0); /* x3 */
		1411	double_data[5] = get_real(infile,1); /* y3 */
18557	bpr	1412	tmp_buffer=my_newmem(MAX_BUFFER);
		1413	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,21,[%.f,%.f,%.f],[%.f,%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[4],decimals,double_data[1],decimals,double_data[3],decimals,double_data[5],arrow_head,arrow_head,arrow_head,1,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1414	add_to_buffer(tmp_buffer);
		1415	if(onclick != 0){object_cnt++;}
		1416	i = i + 6;
		1417	}
		1418	if(use_rotate == TRUE ){rotate(i-6,angle,rotationcenter,2);}
		1419	if(use_affine == TRUE ){ transform(i-6,2);}
		1420	dragstuff[21] = 1;
		1421	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1422	reset();
		1423	break;
		1424	case CURVEDARROWS2:
14038	schaersvoo	1425	/*
18556	bpr	1426	@ curvedarrows2 color,x1,y1,xc,yc,x2,y2,...x_(n-1),y_(n-1),xc,yc,x_n,y_n
		1427	@ draw double headed curved arrows from (x1:y1) in direction of (xc:yc) to point (x2:y2), etc. <br> note: the curve will <b>not go through</b> point (xc:yc)
		1428	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1429	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1430	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1431	@%curvedarrows2_drag%size 400,400%xrange -10,10%yrange -10,10%cursor move%linewidth 2%drag xy%curvedarrows2 red,-8,0,0,8,8,0,-5,5,0,-10,6,3
		1432	@%curvedarrows2_click%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%%onclick%curvedarrow -5,0,0,-10,5,0,blue%onclick%curvedarrows2 red,-8,0,0,8,8,0,-5,5,0,-10,6,3
14030	schaersvoo	1433
		1434	h[0] = arrowhead
14066	bpr	1435	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1436	function Shape(object_cnt,onclick,direction,type,x,y,w,h,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1,use_rotate,angle,text,font_size,font_family,use_slider,rotation_center,use_offset)
14038	schaersvoo	1437	*/
18552	bpr	1438	stroke_color = get_color(infile,0);/* name or hex color */
		1439	i = 0;
		1440	decimals = find_number_of_digits(precision);
		1441	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1442	while( ! done ){
		1443	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1444	double_data[0] = get_real(infile,0); /* x1 */
		1445	double_data[1] = get_real(infile,0); /* y1 */
		1446	double_data[2] = get_real(infile,0); /* xc */
		1447	double_data[3] = get_real(infile,0); /* yc */
		1448	double_data[4] = get_real(infile,0); /* x3 */
		1449	double_data[5] = get_real(infile,1); /* y3 */
18557	bpr	1450	tmp_buffer=my_newmem(MAX_BUFFER);
		1451	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,21,[%.f,%.f,%.f],[%.f,%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[4],decimals,double_data[1],decimals,double_data[3],decimals,double_data[5],arrow_head,arrow_head,arrow_head,2,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1452	add_to_buffer(tmp_buffer);
		1453	if(onclick != 0){object_cnt++;}
		1454	i = i + 6;
		1455	}
		1456	if(use_rotate == TRUE ){rotate(i-6,angle,rotationcenter,2);}
		1457	if(use_affine == TRUE ){ transform(i-6,2);}
		1458	dragstuff[21] = 1;
		1459	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1460	reset();
		1461	break;
		1462	case DASHED:
		1463	/*
		1464	@ dashed
		1465	@ keyword (no arguments required)
		1466	@ next object will be drawn with a dashed line
		1467	@ change dashing scheme by using command <a href="#dashtype">dashtype</a>
		1468	@%dashed%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%line -5,-5,-5,5,red%dashtype 1,1%dline -4,-5,-4,5,green%dashtype 2,2%dline -3,-5,-3,5,blue%dashtype 3,3%dline 0,-5,0,5,orange%dashtype 4,4%dline 3,-5,3,5,brown
		1469	*/
		1470	use_dashed = TRUE;
		1471	break;
		1472	case DASHTYPE:
		1473	/*
		1474	@ dashtype line_width_px,space_width_px
		1475	@ every indiviual object may have its own dashtype, if needed...
		1476	@ When keyword <a href='#dashed'>dashed</a> is set, the objects will be drawn with this dashtype
		1477	@ default value <code>dashtype 2,2</code> e.g. 2px line and 2px space
		1478	@ HTML5 canvas specification supports more arguments (dashing schemes) ... but not all modern browsers are yet capable
		1479	@%dashtype%size 400,400%xrange -10,10%yrange -10,10%dashtype 1,1%dhline 0,9,red%dashtype 2,2%dhline 0,8,red%dashtype 4,4%dhline 0,7,red%dashtype 6,6%dhline 0,6,red%dashtype 8,8%dhline 0,5,red%dashtype 10,10%dhline 0,4,red%dashtype 1,2%dhline 0,3,red%dashtype 2,4%dhline 0,2,red%dashtype 3,6%dhline 0,1,red%dashtype 4,8%dhline 0,0,red%linewidth 2%dashtype 1,1%dhline 0,-9,red%dashtype 2,2%dhline 0,-8,red%dashtype 4,4%dhline 0,-7,red%dashtype 6,6%dhline 0,-6,red%dashtype 8,8%dhline 0,-5,red%dashtype 10,10%dhline 0,-4,red%dashtype 1,2%dhline 0,-3,red%dashtype 2,4%dhline 0,-2,red%dashtype 4,8%dhline 0,-1,red
		1480	*/
		1481	for(i=0;i<2;i++){
		1482	switch(i){
		1483	case 0 : dashtype[0] = (int) line_width*( get_real(infile,0)) ; break;
		1484	case 1 : dashtype[1] = (int) line_width*( get_real(infile,1)) ; break;
		1485	}
		1486	}
		1487	break;
		1488	case DIAMONDFILL:
		1489	/*
		1490	@ diamondfill x0,y0,dx,dy,color
		1491	@ x0,y0 in xrange / yrange
		1492	@ distances dx,dy in pixels
		1493	@ there is also a command <a href="#userdraw">userdraw diamondfill,color</a>
		1494	@%diamondfill%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%circles red,-4,0,6,4,0,6%linewidth 1%diamondfill 0,0,5,8,blue%diamondfill 0,7,8,8,lightgreen
		1495	*/
		1496	js_function[DRAW_DIAMONDFILL] = 1;
		1497	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1498	js_function[DRAW_FILLTOBORDER] = 1;
		1499	add_js_filltoborder(canvas_type);
		1500	}
		1501	decimals = find_number_of_digits(precision);
		1502	for(i=0;i<5;i++){
		1503	switch(i){
		1504	case 0: double_data[0] = get_real(infile,0); break; /* x */
		1505	case 1: double_data[1] = get_real(infile,0); break; /* y */
		1506	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		1507	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		1508	case 4: stroke_color = get_color(infile,1);
		1509	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1510	if(use_affine == TRUE ){ transform(2,2);}
18573	bpr	1511	/* draw_diamondfill(ctx,x0,y0,dx,dy,linewidth,color,opacity,xsize,ysize) */
18557	bpr	1512	tmp_buffer=my_newmem(MAX_BUFFER);
		1513	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_diamondfill(%d,%.f,%.f,%d,%d,%d,\"%s\",%.2f,%d,%d);\n",STATIC_CANVAS+fill_cnt,decimals,double_data[0],decimals,double_data[1],int_data[0],int_data[1],line_width,stroke_color,stroke_opacity,xsize,ysize));
18552	bpr	1514	add_to_buffer(tmp_buffer);
		1515	fill_cnt++;
		1516	reset();
		1517	break;
		1518	default:break;
		1519	}
		1520	}
		1521	break;
		1522	case DOTFILL:
		1523	/*
		1524	@ dotfill x0,y0,dx,dy,color
		1525	@ x0,y0 in xrange / yrange
		1526	@ distances dx,dy in pixels
		1527	@ radius of dots is linewidth
		1528	@ there is also a command <a href="#userdraw">userdraw dotfill,color</a>
		1529	@%dotfill%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%circles red,-4,0,6,4,0,6%dotfill 0,0,5,8,blue%dotfill 0,7,8,8,lightgreen
		1530	*/
		1531	js_function[DRAW_DOTFILL] = 1;
		1532	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1533	js_function[DRAW_FILLTOBORDER] = 1;
		1534	add_js_filltoborder(canvas_type);
		1535	}
		1536	decimals = find_number_of_digits(precision);
		1537	for(i=0;i<5;i++){
		1538	switch(i){
		1539	case 0: double_data[0] = get_real(infile,0); break; /* x in px */
		1540	case 1: double_data[1] = get_real(infile,0); break; /* y in py */
		1541	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		1542	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		1543	case 4: stroke_color = get_color(infile,1);
		1544	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1545	if(use_affine == TRUE ){ transform(2,2);}
		1546	/* draw_dotfill(ctx,x0,y0,dx,dy,radius,color,opacity,xsize,ysize) */
18557	bpr	1547	tmp_buffer=my_newmem(MAX_BUFFER);
		1548	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_dotfill(%d,%.f,%.f,%d,%d,%d,\"%s\",%.2f,%d,%d);\n",FILL_CANVAS+fill_cnt,decimals,double_data[0],decimals,double_data[1],int_data[0],int_data[1],line_width,stroke_color,stroke_opacity,xsize,ysize));
18552	bpr	1549	add_to_buffer(tmp_buffer);
		1550	fill_cnt++;
		1551	reset();
		1552	break;
		1553	default:break;
		1554	}
		1555	}
		1556	break;
		1557	case DRAG:
		1558	/*
18556	bpr	1559	@ drag [x][y][xy]
		1560	@ the next object will be draggable in x / y / xy direction
		1561	@ the displacement can be read by <code>javascript:read_dragdrop();</code>
		1562	@ the precision (default 2 decimals) in the student reply may be set with command <a href="#precision">precision</a>.<br>Use this 'precision' command before this command 'drag x\|y\|xy' !
		1563	@ <a href='#onclick'>onclick</a> and ''drag x\|y\|xy`` may be combined (for different objects: a single object can either be onclick or drag, not both )
		1564	@ ''multi_objects`` will be numbered in the given x/y-sequence (example: points red,0,0,1,1,2,2,3,3: point (0:0) is object_number 1)
		1565	@ <b>attention</b>: static objects and ''onclick/drag`` objects of the same type (like point,circle,etc) with the same coordinates (e.g. objects that overlap) will give problems in the ''recognition algorithm``) in this example<br> <code>linewidth 4<br>point 0,0,red<br>drag xy<br>point 0,0,blue</code><br>the red point will not be recognised as draggable ! in the example<br><code>linewidth 4<br>drag xy<br>point 0,0,red<br>drag xy<br>point 0,0,blue</code><br>both points will be recognised
		1566	@ the answer is: drag_or_onclick_object_number : Xorg : Yorg : Xnew : Ynew<br>wherein object_number is the sequence number of the draggable & onclick objects in your script.<br>Only draggable & onclick objects will have an object_number (e.g things like point,crosshair,line,segment,circle,rect,triangle...etc)
		1567	@ use keyword <a href='#snaptogrid'>snaptogrid</a>, <a href='#xsnaptogrid'>xsnaptogrid</a>, <a href='#ysnaptogrid'>ysnaptogrid</a> or command <a href='#snaptopoints'>snaptopoints x1,y1,x2,y2,...</a> to switch from free to discrete movement
		1568	@ in case of external images (commands copy / copyresized) the external image can be set draggable ; always xy. <br>The function javascript;read_canvas() will return the xy-coordinates of all images.
		1569	@%drag_x%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 200,40%drag x%linewidth 2%circles blue,-5,0,3,0,0,2,5,0,4,0,4,3,0,-3,4
		1570	@%drag_y%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 200,40%drag y%linewidth 2%circles blue,-5,0,3,0,0,2,5,0,4,0,4,3,0,-3,4
		1571	@%drag_xy%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor lightblue%opacity 200,40%drag xy%linewidth 2%circles blue,-5,0,3,0,0,2,5,0,4,0,4,3,0,-3,4
18552	bpr	1572	*/
		1573	temp = get_string(infile,1);
		1574	if(strstr(temp,"xy") != NULL ){
		1575	drag_type = 0;
		1576	} else {
		1577	if(strstr(temp,"x") != NULL ){
		1578	drag_type = 1;
		1579	}
		1580	else { drag_type = 2;}
		1581	}
		1582	/* assuming all drag&drop coordinates the same precision: so set only once */
		1583	if( print_drag_params_only_once == FALSE ){
		1584	fprintf(js_include_file,"dragdrop_precision = %d;use_dragdrop_reply = true;",precision);
		1585	print_drag_params_only_once = TRUE;
		1586	}
		1587	onclick = 2;
		1588	/* if(use_userdraw == TRUE ){canvas_error("\"drag & drop\" may not be combined with \"userdraw\" or \"pan and zoom\" \n");} */
		1589	use_dragstuff = 2;
		1590	js_function[INTERACTIVE] = 1;
		1591	break;
		1592	case ELLIPSE:
		1593	/*
		1594	@ ellipse xc,yc,width_x,height_y,color
		1595	@ ellipses with center xc/yc and width/height in x/y-range etc (this differs from flydraw syntax!)
		1596	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1597	@ will shrink / expand on zoom out / zoom in
		1598	@%ellipse%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor orange%opacity 200,40%linewidth 3%drag xy%ellipse 0,0,6,4,green%zoom blue
		1599	*/
		1600	for(i=0;i<5;i++){
		1601	switch(i){
		1602	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		1603	case 1:double_data[1] = get_real(infile,0);break; /* y-values */
		1604	case 2:double_data[2] = get_real(infile,0);break; /* rx -> px */
		1605	case 3:double_data[3] = get_real(infile,0);break; /* ry -> px */
		1606	case 4:stroke_color = get_color(infile,1);/* name or hex color */
		1607	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,4);}
		1608	if(use_affine == TRUE ){ transform(2,4);}
		1609	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1610	decimals = find_number_of_digits(precision);
18557	bpr	1611	tmp_buffer=my_newmem(MAX_BUFFER);
		1612	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,3,[%.f],[%.f],[%.f],[%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],decimals,double_data[2],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1613	add_to_buffer(tmp_buffer);
		1614	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		1615	dragstuff[3] = 1;
		1616	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1617	reset();
		1618	break;
		1619	}
		1620	}
		1621	break;
		1622	case ELLIPSES:
		1623	/*
		1624	@ ellipses color,xc1,yc1,width_x1,height_y1,xc2,yc2,width_x2,height_y2,xc3,yc3,width_x3,height_y3,...
		1625	@ ellipses with center and height in x/y-range etc (this differs from flydraw syntax!)
		1626	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1627	@ will shrink / expand on zoom out / zoom in
		1628	@%ellipses%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor orange%opacity 200,40%linewidth 3%onclick%ellipses red,-3,0,2,4,0,0,4,2,3,0,6,2
		1629	*/
8224	bpr	1630
18552	bpr	1631	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1632	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	1633	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	1634	i=1;
		1635	while( ! done ){ /* get next item until EOL*/
		1636	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1637	switch (i%4){
		1638	case 1:double_data[i-1] = get_real(infile,0);break; /* x */
		1639	case 2:double_data[i-1] = get_real(infile,0);break; /* y */
		1640	case 3:double_data[i-1] = get_real(infile,0);break; /* rx */
		1641	case 0:double_data[i-1] = get_real(infile,1);break; /* ry */
		1642	default: break;
		1643	}
		1644	i++;
		1645	}
		1646	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,4);}
		1647	if(use_affine == TRUE ){ transform(i-1,4);}
		1648	decimals = find_number_of_digits(precision);
		1649	for(c = 0 ; c < i-1 ; c = c+4){
18623	bpr	1650	check_string_length(string_length);
		1651	tmp_buffer=my_newmem(MAX_BUFFER);
		1652	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,3,[%.f],[%.f],[%.f],[%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],decimals,double_data[c+2],decimals,double_data[c+3],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	1653	add_to_buffer(tmp_buffer);
		1654	if(onclick != 0){object_cnt++;} /* object_cnt++; */
		1655	}
		1656	reset();
		1657	dragstuff[3] = 1;
		1658	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1659	break;
		1660	case FILLALL:
		1661	/*
		1662	@ fillall color,x1,y1,x2,y2...x_n,y_n
18615	bpr	1663	@ fill all the region containing points (x1:y1),(x2:y2)...(x_n:y_n) with color 'color'
		1664	@ any color (object) in the <a href="#canvastype">canvastype</a> will act as border to the bucket fill
18552	bpr	1665	@ use this command after all boundary objects are declared.
		1666	@ Use command 'userdraw clickfill,color' for user click driven flood fill.
		1667	@ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
		1668	@ note: the fill-family of commands are very (client) cpu intensive operations!<br>filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels: each pixel contains 4 data (R,G,B,Opacity) = 640000 data.<br>on every data a few operations / comparisons are done...<br>So have pity on your students CPU..
		1669	@%fillall%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%vlines black,-5,0,-5,0,-4,0,-4,0,3,0,3,0%hlines black,-5,0,-5,0,-5,4,-5,4,-5,-2,-5,-2%circles green,0,0,2,3,3,5,-5,-5,3%opacity 240,50%fillall blue,1,1,8,8,-8,-8
		1670	*/
		1671	decimals = find_number_of_digits(precision);
		1672	fill_color=get_color(infile,0); /* how nice: now the color comes first...*/
		1673	i=0;
		1674	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1675	js_function[DRAW_FILLTOBORDER] = 1;
		1676	add_js_filltoborder(canvas_type);
		1677	}
		1678	while( ! done ){ /* get next item until EOL*/
		1679	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1680	if(i%2 == 0 ){
		1681	double_data[i] = get_real(infile,0); /* x */
		1682	}
		1683	else {
		1684	double_data[i] = get_real(infile,1); /* y */
18557	bpr	1685	tmp_buffer=my_newmem(MAX_BUFFER);
18609	bpr	1686	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "setTimeout(function(){filltoborder(%.f,%.f,false,[%s,%d],%d,false,null);},1000);\n",decimals,double_data[i-1],decimals,double_data[i],fill_color,(int) (fill_opacity/0.0039215),FILL_CANVAS+fill_cnt));
18552	bpr	1687	add_to_buffer(tmp_buffer);
		1688	fill_cnt++;
		1689	}
		1690	i++;
		1691	}
		1692	break;
		1693	case FILLED:
		1694	/*
		1695	@ filled
		1696	@ keyword (no arguments required)
		1697	@ the next ''fillable`` object (only the next !) will be filled
		1698	@ use command <a href="#fillcolor">fillcolor color</a> to set fillcolor
		1699	@ use <a href="#fillpattern">fillpattern</a> for non-solid color filling.
		1700	@ use command <code>opacity 0-255,0-255</code> to set stroke and fill-opacity
		1701	@ use command <a href='#fill'>fill x,y,color</a> or <a href="#floodfill">floodfill x,y,color</a> to fill the space around (x;y) with color <br>pixel operation implemented in javascript: use with care !
		1702	*/
		1703	use_filled = 1;
		1704	break;
		1705	case FILLCOLOR:
		1706	/*
		1707	@ fillcolor colorname or #hex
		1708	@ set the color: mainly used for command 'userdraw obj,stroke_color'
18635	bpr	1709	@ or in forms as polygon, rects and so on (add filled it the form is not already filled, so if you use rect, need to put filled, if you use frect, no need).
18552	bpr	1710	@ see <a href="#fillpattern">fillpattern</a> for non-solid color filling.
		1711	*/
18623	bpr	1712	fillcolor = get_color(infile,1);
18635	bpr	1713	fill_color = fillcolor;
18552	bpr	1714	break;
		1715	case FILLPATTERN:
		1716	/*
		1717	@ fillpattern grid \| hatch \| diamond \| dot \| image_url
		1718	@ alternative: settile image_url
		1719	@ use a pattern as fillstyle
		1720	@ suitable for all fillable object including the <a href="#userdraw">userdraw objects' family</a>
18627	bpr	1721	@ note: do not use the ''f`` for a fillable object : this is used exclusively for solid color filling.
18569	bpr	1722	@ the fillcolor is set by the object command, for example:<br><code>size 370,370<br>xrange -5,5<br>yrange -5,5<br>opacity 165,150<br>fillpattern grid<br>circle -6,3,160,blue<br>fillpattern dot<br>circle -3,-3,160,red<br>fillpattern hatch<br>circle 0,3,160,green<br>fillpattern diamond<br>circle 3,-3,160,cyan<br>userdraw dotfill,blue<br>zoom red</code>
18552	bpr	1723	@ the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed)
		1724	@ the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
		1725	@ see <a href="#fillcolor">fillcolor</a> for solid color filling.
18569	bpr	1726	@ when using an image-url, make sure it contains an ''/`` in the filename...''fillpattern $module_dir/gifs/test.jpg`` will fill the next fillable object with this image.\|<br>the argument to html5 canvas routine 'createPattern(img,argument)' is set to ''repeat`` e.g. if the image is smaller then the canvas, multiple copies will be used to fill the area ( e.g. ctx.fillStyle() = pattern)<br>for example:<br><code>size 150,150<br>xrange -5,5<br>yrange -5,5<br>drag xy<br>fillpattern gifs/en.gif<br>circle 0,0,100,red<br>fillpattern gifs/nl.gif<br>drag xy<br>circle -3,2,100,green<br>fillpattern gifs/cn.gif<br>drag xy<br>circle 3,2,100,green</code>
18552	bpr	1727	@ fillpattern is also active for <a href="#userdraw">userdraw object,color</a>...<br>the userdraw family a has also ''clickfill type`` (e.g. an object gets filled between boundaries, when clicked) commands like:<br>'userdraw dotfill,color'<br>'userdraw hatchfill,color' etc
18569	bpr	1728	@%fillpattern_1%size 400,400%xrange -5,5%yrange -5,5%opacity 165,150%fillpattern grid%circle -6,3,160,blue%fillpattern dot%circle -3,-3,160,red%fillpattern hatch%circle 0,3,160,green%fillpattern diamond%circle 3,-3,160,cyan%zoom red
18552	bpr	1729	@%fillpattern_2%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%fillcolor green%fillpattern hatch%#fillpattern dot,diamond,grid,imageurl%userdraw circle,red
		1730	*/
		1731	temp = get_string(infile,1);
		1732	use_filled = 0;
		1733	js_function[DRAW_FILL_PATTERN] = 1;
		1734	if( strstr(temp,"grid") != 0 ){ use_filled = 2;}
		1735	else{
		1736	if( strstr(temp,"hatch") != 0 ){ use_filled = 3;}
		1737	else{
		1738	if( strstr(temp,"diamond") != 0 ){ use_filled = 4;}
		1739	else{
		1740	if( strstr(temp,"dot") != 0 ){ use_filled = 5;}
		1741	else{
		1742	if( strstr(temp,"/") != 0 ){ /* get_image_from_url() needs to be called after function definition...*/
		1743	use_filled = 6;js_function[JS_LOAD_IMAGE] = 1;
18557	bpr	1744	tmp_buffer=my_newmem(MAX_BUFFER);
		1745	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "get_image_from_url(\"%s\");",temp));
18552	bpr	1746	add_to_buffer(tmp_buffer);
		1747	}
		1748	}
		1749	}
		1750	}
		1751	}
		1752	if( use_filled == 0 ){canvas_error("fillpattern unknown or typo...choose grid,hatch,diamond of dot...");}
		1753	break;
		1754	case FILLTOBORDER:
		1755	/*
		1756	@ filltoborder x,y,bordercolor,color
		1757	@ fill the region of point (x:y) with color 'color'
18615	bpr	1758	@ any other color than bordercolor will not act as border to the bucket fill
		1759	@ the filling is done in the connex component whih contains (x,y) of the set of points which are in a color different of bordercolor
18552	bpr	1760	@ use this command after all boundary objects are declared.
18615	bpr	1761	@ it can be useful to increase strokeopacity or linewidth
18552	bpr	1762	@ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
		1763	@ note: filltoborder is a very (client) cpu intensive operation!<br>filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels: each pixel contains 4 data (R,G,B,Opacity) = 640000 data.<br>on every data a few operations / comparisons are done...<br>So have pity on your students CPU..
		1764	@ maybe used together with command <a href="#userdraw">userdraw clickfill,color</a>
18615	bpr	1765	@%filltoborder%size 400,400%xrange -10,10%yrange -10,10%canvastype 100%linewidth 2%precision 1000%jsplot blue,5*sin(x)%opacity 200,50%filltoborder 6,6,blue,green%filltoborder 6,-6,blue,red
18552	bpr	1766	*/
		1767	for(i=0 ;i < 4 ; i++){
		1768	switch(i){
		1769	case 0:double_data[0] = get_real(infile,0);break;
		1770	case 1:double_data[1] = get_real(infile,0);break;
		1771	case 2:bgcolor = get_color(infile,0);break;
		1772	case 3:fill_color = get_color(infile,1);
18569	bpr	1773	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1774	js_function[DRAW_FILLTOBORDER] = 1;
		1775	add_js_filltoborder(canvas_type);
		1776	}
		1777	decimals = find_number_of_digits(precision);
18552	bpr	1778	/* we need to set a timeout: the canvas is not yet draw in memory? when floodfill is called directly... */
18569	bpr	1779	tmp_buffer=my_newmem(MAX_BUFFER);
18629	bpr	1780	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "setTimeout(function(){filltoborder(%.f,%.f,[%s,%d],[%s,%d],%d,false,null)},1000);\n",decimals,double_data[0],decimals,double_data[1],bgcolor,(int) (fill_opacity/0.0039215),fill_color,(int) (fill_opacity/0.0039215),FILL_CANVAS+fill_cnt));
18569	bpr	1781	add_to_buffer(tmp_buffer);
		1782	fill_cnt++;
		1783	reset();
		1784	break;
18552	bpr	1785	default:break;
		1786	}
		1787	}
		1788	break;
		1789	case FLOODFILL:
		1790	/*
		1791	@ floodfill x,y,color
		1792	@ alternative: fill
		1793	@ fill the region of point (x:y) with color 'color'
		1794	@ any other color or size of picture (borders of picture) will act as border to the bucket fill
		1795	@ use this command after all boundary objects are declared.
		1796	@ Use command <code>userdraw clickfill,color</code> for user click driven flood fill.
		1797	@ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
		1798	@ note: floodfill is a very (client) cpu intensive operation!<br>filling is done pixel by pixel e.g. image size of 400x400 uses 160000 pixels: each pixel contains 4 data (R,G,B,Opacity) = 640000 data.<br>on every data a few operations / comparisons are done...<br>So have pity on your students CPU..
		1799	@%floodfill%size 400,400%xrange -10,10%yrange -10,10%canvastype 100%linewidth 2%precision 1000%jsplot blue,5*sin(x)%opacity 200,50%floodfill 6,6,blue%floodfill 6,-6,red
		1800	*/
		1801	for(i=0 ;i < 4 ; i++){
		1802	switch(i){
		1803	case 0:double_data[0] = get_real(infile,0);break;
		1804	case 1:double_data[1] = get_real(infile,0);break;
		1805	case 2:fill_color = get_color(infile,1);
		1806	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1807	js_function[DRAW_FILLTOBORDER] = 1;
		1808	add_js_filltoborder(canvas_type);
		1809	}
		1810	decimals = find_number_of_digits(precision);
		1811	/* we need to set a timeout: the canvas is not yet draw in memory? when floodfill is called directly... */
18557	bpr	1812	tmp_buffer=my_newmem(MAX_BUFFER);
18609	bpr	1813	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "setTimeout(function(){filltoborder(%.f,%.f,false,[%s,%d],%d,false,null);},1000);\n",decimals,double_data[0],decimals,double_data[1],fill_color,(int) (fill_opacity/0.0039215),FILL_CANVAS+fill_cnt));
18552	bpr	1814	add_to_buffer(tmp_buffer);
		1815	fill_cnt++;
		1816	break;
		1817	default:break;
		1818	}
		1819	}
		1820	reset();
		1821	break;
		1822	case FONTCOLOR:
		1823	/*
18556	bpr	1824	@ fontcolor color
		1825	@ color: hexcolor or colorname
		1826	@ default: black
		1827	@ use command <a href="#fontfamily">fontfamily</a> to deviate from default font type
		1828	@%fontcolor%size 400,400%xrange -10,10%yrange -10,10%fontcolor red%#note: use command fontfamily to change size and shape%axis%axisnumbering%grid 2,2,grey,2,2,4,grey
18552	bpr	1829	*/
		1830	font_color = get_color(infile,1);
		1831	break;
		1832	case FONTFAMILY:
		1833	/*
18556	bpr	1834	@ fontfamily font_description
		1835	@ set the font family; for browsers that support it
		1836	@ font_description: Arial, Courier, Helvetica etc
		1837	@ in case commands <code>string color,x,y,the string</code>, <code>stringup color,x,y,rotation,the string</code>, ''fontfamily`` can be something like:<code>fontfamily italic 34pt Arial</code>. Use correct syntax: ''font style``, ''font size pt``, ''fontfamily``
		1838	@%fontfamily%size 400,400%xrange -10,10%yrange -10,10 %fontfamily Bold 10pt Arial%string blue,-9,9,10 pt Arial%fontfamily Italic 20pt Arial%string blue,0,9,20 pt Arial%fontfamily Bold 10pt Helvetica%string blue,-9,5,10 pt Helvetica%fontfamily Italic 20pt Helvetica%string blue,0,5,20 pt Helvetica %fontfamily Bold 10pt Courier%string blue,-9,0,10 pt Courier%fontfamily Italic 20pt Courier%string blue,0,0,20 pt Courier%fontfamily Bold 10pt Fixed%string blue,-9,-5,10 pt Fixed%fontfamily Italic 20pt Fixed%string blue,0,-5,20 pt Fixed %fontfamily Bold 10pt Times%string blue,-9,-9,10 pt Times%fontfamily Italic 20pt Times%string blue,0,-9,20 pt Times
12110	schaersvoo	1839
18552	bpr	1840	*/
		1841	font_family = get_string(infile,1);
		1842	break;
		1843	case FONTSIZE:
		1844	/*
18556	bpr	1845	@ fontsize font_size
		1846	@ default value 12
		1847	@ note: for some macros (like ''grid \| legend \| xaxistext \| xlabel`` etc) sometimes command <a href="#fontfamily">fontfamily</a> can be used for some specific font-setting<br>this is however not always very straight forward... so just try and see what happens
18552	bpr	1848	*/
		1849	font_size = (int) (get_real(infile,1));
		1850	break;
		1851	case FUNCTION_LABEL:
		1852	/*
18556	bpr	1853	@ functionlabel label_1:label_2:label_3...
		1854	@ alternative: functionlabels
		1855	@ default value ''f(x)=:g(x)=:h(x)=:i(x)=:j(x)=:k(x)=:m(x)=:n(x)=``
		1856	@ no mathml allowed (just ascii string)
		1857	@ use command <a href='#fontsize'>fontsize int</a> to adjust the size
		1858	@ use command <a href='#strokecolor'>strokecolor colorname</a> to adjust the labels (individually, if needed)
		1859	@ if needed, use before every command <a href='#userinput'>userinput function \| inputfield \| textarea</a>
		1860	@ no limit in amount of inputfields for userbased function plotting
		1861	@%function_label%size 400,400%xrange -5,5%yrange -5,5%precision 0%axis%axisnumbering%opacity 100,190%grid 1,1,grey,2,2,5,black%linewidth 3%linewidth 1%precision 1000%functionlabels F(x)=:H(x)=:Yield(x)=%strokecolor green%userinput function%strokecolor red%userinput function%strokecolor blue%userinput function
18552	bpr	1862	*/
		1863	temp = get_string_argument(infile,1);
		1864	function_label = list2js_array(temp,":");
		1865	break;
		1866	case GRID:/* xmajor,ymajor,gridcolor [,xminor,yminor,tick length (px), axis/tickscolor]*/
		1867	/*
18556	bpr	1868	@ grid step_x,step_y,gridcolor
		1869	@ if keywords <a href="#axis">axis</a> or <a href="#axisnumbering">axisnumbering</a> are set, use: <code>grid step_x,step_y,major_color,minor_x,minor_y,tics height in px,axis_color</code> minor x step = step_x / minor_x
		1870	@ in that case, use command <a href="#fontcolor">fontcolor</a>, <a href="#fontsize">fontsize</a> and / or <a href="#fontfamily">fontfamily</a> to adjust font; defaults: black,12,Arial
		1871	@ if xmin > 0 and/or ymin > 0 and zooming / panning is not active: be aware that the x/y-axis numbering and x/y major/minor tic marks will not be visual as they are placed under the x-axis and left to the y-axis (in Quadrant II and IV)
		1872	@ can <b>not</b> be set <a href="#onclick">onclick</a> or <a href="#drag">drag xy</a>
		1873	@ use commands <a href="#xlabel">xlabel some_string</a> and/or <a href="#ylabel">ylabel some_string</a> to label axis; use command ''fontsize`` to adjust size: the font family is non-configurable 'italic your_fontsize px Arial' !
		1874	@ see commands <a href="#xaxis">xaxis or xaxistext</a>, <a href="#yaxis">yaxis or yaxistext</a> to set tailormade values on axis (the used font is set by command <a href="#fontfamily">fontfamily</a>; default '12px Arial')
		1875	@ see command <a href="#legend">legend</a> to set a legend for the graph; use command <a href="#fontsize">fontsize</a> to adjust size (the font family is non-configurable 'bold your_fontsize px Arial')
		1876	@%grid%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%zoom red
		1877	@%grid_axis%size 400,400%xrange -10,10%yrange -10,10%axis%grid 1,1,grey,2,2,6,black%zoom red
		1878	@%grid_axis_axisnumbering%size 400,400%xrange -10,10%yrange -10,10%fontfamily Italic 14px Courier%axis%axisnumbering%precision 0%grid 1,1,grey,2,2,6,black%zoom red
18552	bpr	1879	*/
		1880	if( js_function[DRAW_YLOGSCALE] == 1 ){canvas_error("only one grid type is allowed...");}
		1881	js_function[DRAW_GRID] = 1;
		1882	for(i=0;i<4;i++){
		1883	switch(i){
		1884	case 0:double_data[0] = get_real(infile,0);break;/* xmajor */
		1885	case 1:double_data[1] = get_real(infile,0);break;/* ymajor */
		1886	case 2:
		1887	if( use_axis == TRUE ){
		1888	stroke_color = get_color(infile,0);
		1889	done = FALSE;
		1890	int_data[0] = (int) (get_real(infile,0));/* xminor */
		1891	int_data[1] = (int) (get_real(infile,0));/* yminor */
		1892	int_data[2] = (int) (get_real(infile,0));/* tic_length */
		1893	fill_color = get_color(infile,1); /* used as axis_color*/
		1894	}
		1895	else {
		1896	int_data[0] = 1;
		1897	int_data[1] = 1;
		1898	stroke_color = get_color(infile,1);
		1899	fill_color = stroke_color;
		1900	}
		1901	if( double_data[0] <= 0 \|\| double_data[1] <= 0 \|\| int_data[0] <= 0 \|\| int_data[1] <= 0 ){canvas_error("major or minor ticks must be positive !");}
		1902	/* set snap_x snap_y values in pixels */
		1903	fprintf(js_include_file,"snap_x = %f;snap_y = %f;",double_data[0] / int_data[0],double_data[1] / int_data[1]);
		1904	fprintf(js_include_file,"\n/* add grid /function redraw_grid(){draw_grid%d(%d,%d,%.2f,%.f,%.*f,%d,%d,%d,%d,\"%s\",\"%s\",%d,\"%s\",%d,%d,%d,%d,%d,\"%s\",%.2f);return;};",canvas_root_id,GRID_CANVAS,precision,stroke_opacity,decimals,double_data[0],decimals,double_data[1],int_data[0],int_data[1],int_data[2],line_width,stroke_color,fill_color,font_size,font_family,use_axis,use_axis_numbering,use_dashed,dashtype[0],dashtype[1],font_color,fill_opacity);
18557	bpr	1905	tmp_buffer=my_newmem(MAX_BUFFER);
		1906	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "redraw_grid();\n"));
18552	bpr	1907	add_to_buffer(tmp_buffer);
		1908	break;
		1909	}
		1910	}
		1911	reset();
		1912	break;
		1913	case GRIDFILL:
		1914	/*
		1915	@ gridfill x0,y0,dx,dy,color
		1916	@ x0,y0 in xrange / yrange
		1917	@ distances dx,dy in pixels
		1918	@ there is also a command <a href="#userdraw">userdraw gridfill,color</a>
		1919	@%gridfill%size 400,400%xrange -10,10%yrange -10,10%canvastype 100%linewidth 2%precision 1000%jsplot blue,5*sin(x)%opacity 200,50%gridfill 6,6,10,10,blue%gridfill 6,-6,6,6,red
11806	schaersvoo	1920
18552	bpr	1921	*/
		1922	js_function[DRAW_GRIDFILL] = 1;
		1923	decimals = find_number_of_digits(precision);
		1924	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1925	js_function[DRAW_FILLTOBORDER] = 1;
		1926	add_js_filltoborder(canvas_type);
		1927	}
		1928	for(i=0;i<5;i++){
		1929	switch(i){
		1930	case 0: double_data[0] = get_real(infile,0); break; /* x */
		1931	case 1: double_data[1] = get_real(infile,0); break; /* y */
		1932	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		1933	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		1934	case 4: stroke_color = get_color(infile,1);
18557	bpr	1935
		1936	tmp_buffer=my_newmem(MAX_BUFFER);
		1937	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_gridfill(%d,%.f,%.f,%d,%d,%d,\"%s\",%.2f,%d,%d);\n",STATIC_CANVAS+fill_cnt,decimals,double_data[0],decimals,double_data[1],int_data[0],int_data[1],line_width,stroke_color,stroke_opacity,xsize,ysize));
18552	bpr	1938	add_to_buffer(tmp_buffer);
		1939	fill_cnt++;
		1940	reset();
		1941	break;
		1942	default:break;
		1943	}
		1944	}
		1945	break;
		1946	case GROUP:
		1947	/*
18556	bpr	1948	@ group
		1949	@ keyword
		1950	@ work in 'progress'
		1951	@ all objects() after the command and until <a href="#kill">kill group</a> or <a href="#killslider">killslider</a> may be moved together with mouse moverments<br> () for now all real canvas objects and latex / xml ; but no images (work in progress)
		1952	@ may be combined with slider driven movements or drag & drop
		1953	@%group%%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%linewidth 4%rotationcenter 0,0%slider -2pi,2pi,300,40,angle active,rotate%snaptogrid%ftriangle 0,-4,-2,-2,4,--5,blue%fillcolor red%fcircle -4.4,4.4,40,blue%kill slider%slider -20,20,300,40,x active,x-slide%ftriangle -2,0,0,4,2,0,green%fcircle 4.4,4.5,40,red%kill slider%slider -20,20,300,40,y active,y-slide%fcircle 4,-4,40,green%linewidth 4%fcircle -4,-4,40,orange%kill slider%group%fcircle -4.4,4.5,10,blue%fcircle -5.4,4.5,10,blue%fcircle -6.4,4.5,10,blue%fcircle -4.4,8,16,green%fcircle -5.4,8,16,green%fcircle -6.4,8,16,green%mouse red,22%zoom red
18552	bpr	1954	*/
		1955	use_slider++;
		1956	add_slider(2);
		1957	no_reset = TRUE;
		1958	int c = 0;
		1959	for(i=last_slider;i<=use_slider;i++){ int_data[c] = i; c++; }
		1960	my_sliders = data2js_array(int_data,use_slider - last_slider+1);
		1961	if( precision == 0 ){precision = 100;}
		1962	onclick = 5;
		1963	use_dragstuff = 2;
		1964	drag_type = 0;
		1965	js_function[INTERACTIVE] = 1;
		1966	fprintf(js_include_file,"var slider%d;dragdrop_precision = %d;use_dragdrop_reply = true;",use_slider,precision);
18557	bpr	1967	tmp_buffer=my_newmem(MAX_BUFFER);
		1968	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "slider%d = new move_group(%d);\n",use_slider,use_slider));
18552	bpr	1969	add_to_buffer(tmp_buffer);
		1970	break;
		1971	case HALFLINE:
		1972	/*
		1973	@ demiline x1,y1,x2,y2,color
		1974	@ alternative: halfline
		1975	@ draws a halfline starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex)
		1976	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1977	@%halfline%size 400,400%xrange -10,10%yrange -10,10%halfline -5,5,0,0,red%halfline -5,-5,0,0,blue
		1978	*/
		1979	for(i=0; i<13;i++){double_data[i]=0;}
		1980	for(i=0;i<5;i++){
		1981	switch(i){
		1982	case 0: double_data[0]= get_real(infile,0);break; /* x-values */
		1983	case 1: double_data[1]= get_real(infile,0);break; /* y-values */
		1984	case 2: double_data[10]= get_real(infile,0);break; /* x-values */
		1985	case 3: double_data[11]= get_real(infile,0);break; /* y-values */
		1986	case 4: stroke_color=get_color(infile,1);/* name or hex color */
		1987	if(double_data[0] == double_data[10]){ /* vertical halfline */
		1988	if(double_data[1] < double_data[11]){
		1989	double_data[3] = ymax + 1000;
		1990	}
		1991	else {
		1992	double_data[3] = ymin - 1000;
		1993	}
		1994	double_data[2] = double_data[0];
		1995	} else { /* horizontal halfline*/
		1996	if( double_data[1] == double_data[11] ){
		1997	if( double_data[0] < double_data[10] ){
		1998	double_data[2] = xmax + 1000; /* halfline to the right */
		1999	}
		2000	else {
		2001	double_data[2] = xmin - 1000; /* halfline to the left */
		2002	}
		2003	double_data[3] = double_data[1];
		2004	}
		2005	else {
		2006	/* any other halfline */
		2007	/* slope */
		2008	double_data[12] = (double_data[11] - double_data[1])/(double_data[10] - double_data[0]);
		2009	/* const */
		2010	double_data[13] = double_data[1] - double_data[12]*double_data[0];
		2011	if( double_data[0] < double_data[10] ){
		2012	double_data[2] = double_data[2] + 1000;
		2013	}
		2014	else {
		2015	double_data[2] = double_data[2] - 1000;
		2016	}
		2017	double_data[3] = double_data[12]*double_data[2] + double_data[13];
		2018	}
		2019	}
		2020	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2021	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		2022	if(use_affine == TRUE ){ transform(4,2);}
18557	bpr	2023	tmp_buffer=my_newmem(MAX_BUFFER);
		2024	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,18,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2025	add_to_buffer(tmp_buffer);
		2026	if(onclick != 0){object_cnt++;}
		2027	/* object_cnt++; */
		2028	reset();
		2029	break;
		2030	}
		2031	}
		2032	dragstuff[18] = 1;
		2033	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2034	break;
		2035	case HALFLINES:
		2036	/*
		2037	@ demilines color,x1,y1,x2,y2,....
		2038	@ alternative: halflines
		2039	@ draws halflines starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex) etc
		2040	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> indiviually
		2041	@%halflines%size 400,400%xrange -10,10%yrange -10,10%halflines red,-5,5,0,0,-5,-5,0,0
		2042	*/
		2043	stroke_color=get_color(infile,0);
		2044	fill_color = stroke_color;
		2045	i=0;
		2046	while( ! done ){ /* get next item until EOL*/
		2047	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		2048	if(i%2 == 0 ){
		2049	double_data[i] = get_real(infile,0); /* x */
		2050	} else {
		2051	double_data[i] = get_real(infile,1); /* y */
		2052	}
		2053	i++;
		2054	}
		2055	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2056	decimals = find_number_of_digits(precision);
		2057	for(c = 0 ; c < i-1 ; c = c+4){
		2058	if( double_data[c] == double_data[c+2] ){ /* vertical line*/
		2059	if(double_data[c+1] < double_data[c+3]){ /* upright halfline */
		2060	double_data[c+3] = ymax + 1000;
		2061	}
		2062	else {
		2063	double_data[c+3] = ymin - 1000;/* descending halfline */
		2064	}
		2065	}
		2066	else {
		2067	if( double_data[c+1] == double_data[c+3] ){ /* horizontal line */
		2068	if(double_data[c] < double_data[c+2] ){ /* halfline to the right */
		2069	double_data[c+2] = xmax+100;
		2070	}
		2071	else {
		2072	double_data[c+2] = xmin-1000; /* halfline to the right */
		2073	}
		2074	}
		2075	else {
		2076	/* m */
		2077	double m = (double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]);
		2078	/* q */
		2079	double q = double_data[c+1] - ((double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]))*double_data[c];
		2080	if(double_data[c] < double_data[c+2]){ /* to the right */
		2081	double_data[c+2] = xmax+1000; /* 1000 is needed for dragging...otherwise it is just segment */
		2082	double_data[c+3] = (m)*(double_data[c+2])+(q);
		2083	}
		2084	else { /* to the left */
		2085	double_data[c+2] = xmin - 1000;
		2086	double_data[c+3] = (m)*(double_data[c+2])+(q);
		2087	}
		2088	}
		2089	}
		2090	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		2091	if(use_affine == TRUE ){ transform(i-1,2);}
18557	bpr	2092	tmp_buffer=my_newmem(MAX_BUFFER);
		2093	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,18,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2094	add_to_buffer(tmp_buffer);
		2095	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		2096	}
		2097	reset();
		2098	dragstuff[18] = 1;
		2099	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2100	break;
		2101	case HATCHFILL:
		2102	/*
		2103	@ hatchfill x0,y0,dx,dy,color
		2104	@ x0,y0 in xrange / yrange
		2105	@ distances dx,dy in pixels
		2106	@ there is also a command <a href="#userdraw">userdraw hatchfill,color</a>
		2107	@%hatchfill%size 400,400%xrange -10,10%yrange -10,10%canvastype 100%linewidth 2%precision 1000%jsplot blue,5*sin(x)%opacity 200,50%hatchfill 6,6,10,10,blue%hatchfill 6,-6,6,6,red
		2108	*/
		2109	js_function[DRAW_HATCHFILL] = 1;
		2110	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		2111	js_function[DRAW_FILLTOBORDER] = 1;
		2112	add_js_filltoborder(canvas_type);
		2113	}
		2114	decimals = find_number_of_digits(precision);
		2115	for(i=0;i<5;i++){
		2116	switch(i){
		2117	case 0: double_data[0] = get_real(infile,0); break; /* x */
		2118	case 1: double_data[1] = get_real(infile,0); break; /* y */
		2119	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		2120	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		2121	case 4: stroke_color = get_color(infile,1);
		2122	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		2123	if(use_affine == TRUE ){ transform(2,2);}
		2124	/* draw_hatchfill(ctx,x0,y0,dx,dy,linewidth,color,opacity,xsize,ysize) */
18557	bpr	2125	tmp_buffer=my_newmem(MAX_BUFFER);
		2126	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_hatchfill(%d,%.f,%.f,%d,%d,%d,\"%s\",%.2f,%d,%d);\n",STATIC_CANVAS+fill_cnt,decimals,double_data[0],decimals,double_data[1],int_data[0],int_data[1],line_width,stroke_color,stroke_opacity,xsize,ysize));
18552	bpr	2127	add_to_buffer(tmp_buffer);
		2128	fill_cnt++;
		2129	reset();
		2130	break;
		2131	default:break;
		2132	}
		2133	}
		2134	break;
		2135	case HLINE:
		2136	/*
		2137	@ hline x,y,color
		2138	@ alternative: horizontalline
		2139	@ draw a horizontal line through point (x:y) in color 'color'
		2140	@ or use command <a href='#curve'>curve color,formula</a> to draw the line (uses more points to draw the line; is however better draggable)
		2141	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		2142	@%hline%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%hline 0,0,red%dhline 0,5,blue
		2143	*/
		2144	for(i=0;i<3;i++) {
		2145	switch(i){
		2146	case 0: double_data[0] = get_real(infile,0);break; /* x-values */
		2147	case 1: double_data[1] = get_real(infile,0);break; /* y-values */
		2148	case 2: stroke_color = get_color(infile,1);/* name or hex color */
		2149	double_data[3] = double_data[1];
		2150	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		2151	if(use_affine == TRUE ){ transform(2,2);}
		2152	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2153	decimals = find_number_of_digits(precision);
18557	bpr	2154	tmp_buffer=my_newmem(MAX_BUFFER);
		2155	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,100xmin,decimals,100xmax,decimals,double_data[1],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2156	add_to_buffer(tmp_buffer);
		2157	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		2158	dragstuff[4] = 1;
		2159	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2160	reset();
		2161	break;
		2162	}
		2163	}
		2164	break;
		2165	case HLINES:
		2166	/*
		2167	@ hlines color,x1,y1,x2,y2,...
		2168	@ alternative: horizontallines
		2169	@ draw horizontal lines through points (x1:y1)...(xn:yn) in color 'color'
		2170	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		2171	@%hlines%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%hlines red,0,0,0,5,0,-5
		2172	*/
		2173	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		2174	fill_color = stroke_color;
		2175	i=0;
		2176	while( ! done ){ /* get next item until EOL*/
		2177	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		2178	if(i%2 == 0 ){
		2179	double_data[i] = get_real(infile,0); /* x */
		2180	}
		2181	else {
		2182	double_data[i] = get_real(infile,1); /* y */
		2183	}
		2184	i++;
		2185	}
		2186	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		2187	if(use_affine == TRUE ){ transform(i-1,2);}
		2188	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	2189
18552	bpr	2190	decimals = find_number_of_digits(precision);
		2191	for(c = 0 ; c < i-1 ; c = c+2){
18557	bpr	2192	tmp_buffer=my_newmem(MAX_BUFFER);
18607	bpr	2193	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,100xmin,decimals,100xmax,decimals,double_data[c+1],decimals,double_data[c+1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2194	add_to_buffer(tmp_buffer);
		2195	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		2196	}
		2197	reset();
		2198	dragstuff[4] = 1;
		2199	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2200	break;
		2201	case HTTP:
		2202	/*
18556	bpr	2203	@ http x1,y1,x2,y2,http://some_adress.com
		2204	@ an active html-page will be displayed in an "iframe" rectangle left top (x1:y1), right bottom (x2:y2)
		2205	@ do not use interactivity (or mouse) if the mouse needs to be active in the iframe
		2206	@ can <b>not</b> be ''set onclick`` or ''drag xy``
		2207	@%http%size 400,400%xrange -10,10%yrange -10,10%http 0,10,10,0,http://wims.unice.fr%opacity 200,50%drag xy%fcircle 0,0,100,green
18552	bpr	2208	*/
		2209	js_function[DRAW_HTTP] = 1;
		2210	for(i=0;i<5;i++){
		2211	switch(i){
		2212	case 0: int_data[0]=x2px(get_real(infile,0));break; /* x in x/y-range coord system -> pixel width */
		2213	case 1: int_data[1]=y2px(get_real(infile,0));break; /* y in x/y-range coord system -> pixel height */
		2214	case 2: int_data[2]=x2px(get_real(infile,0)) - int_data[0];break; /* width in x/y-range coord system -> pixel width */
		2215	case 3: int_data[3]=y2px(get_real(infile,0)) - int_data[1];break; /* height in x/y-range coord system -> pixel height */
		2216	case 4: decimals = find_number_of_digits(precision);
		2217	temp = get_string(infile,1);
		2218	if(strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'");}
18557	bpr	2219	tmp_buffer = my_newmem(string_length+2);
		2220	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_http(%d,%d,%d,%d,%d,\"%s\");\n",canvas_root_id,int_data[0],int_data[1],int_data[2],int_data[3],temp));
18552	bpr	2221	add_to_buffer(tmp_buffer);
		2222	break;
		2223	}
		2224	}
		2225	reset();
		2226	break;
		2227	case HTML:
		2228	/*
18556	bpr	2229	@ html x1,y1,html_string
		2230	@ all tags are allowed, html code using inputfields could be read using your own javascript code. Do not use ids like 'canvas_input0' etc.
		2231	@ can be set <a href='#onclick'>onclick</a> and <a href='#drag'>drag&drop</a>
		2232	@ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
		2233	@ command <a href='#rotate'>rotate</a> will rotate the object
		2234	@ use keyword <a href='#centered'>centered</a> to center the html object on (x1:y1)
		2235	@ note: using drag&drop for all external P,SPAN,DIV,IMG,SVG-images onto a canvasdraw element, use ''onclick=javascript:place_image_on_canvas(this.id)``
		2236	@ note: sub & sup are supported in command family <a href='#string'>string</a>, e.g. real internal canvas objects !
		2237	@%html-text%size 500,500%xrange -10,10%yrange -10,10%drag xy%centered%fillcolor lightblue%html 2,2,<h1 style='color:red'>DRAG ME</h1> %opacity 200,50%drag xy%fcircle 0,0,100,green
		2238	@%html-image-slider%size 500,500%xrange -10,10%yrange -10,10%fontsize 42%rotationcenter 0,0%centered%html 0,0,<img src="http://85.148.206.56/gifs/can1.gif">%slider 0,pi,400,40,angle active degree, %centered%html 0,0,<img src="http://85.148.206.56/gifs/can2.gif">
18552	bpr	2239	*/
		2240	js_function[DRAW_XML] = 1;
		2241	for(i=0;i<5;i++){
		2242	switch(i){
		2243	case 0: double_data[0] = get_real(infile,0);break;
		2244	case 1: double_data[1] = get_real(infile,0);break;
		2245	case 4: decimals = find_number_of_digits(precision);
		2246	if(use_affine == TRUE ){ transform(2,2);}/* needs double_data[] */
		2247	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		2248	int_data[0] = x2px(double_data[0]);/* needs px */
		2249	int_data[1] = y2px(double_data[1]);
		2250	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2251	if( use_slider != -1 && drag_type != -1){ onclick = 5; }
		2252	temp = get_string(infile,1);
		2253	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","\\\""); }
		2254	if( strstr(temp,"<img ")!= 0){URL="image";}else{URL="html";}
18557	bpr	2255	tmp_buffer=my_newmem(MAX_BUFFER);
		2256	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "var draw_xml%d = {id:%d,type:'%s',x:[%d],y:[%d],mathml:\"%s\",drag_type:%d,onclick:%d,object_cnt:%d,stroke_color:\"%s\",stroke_opacity:%.2f,fill_color:\"%s\",fill_opacity:%.2f,use_center:%d,use_snap:%d,angle:%f,fontfamily:\"%s\",transform:%s,use_affine:%d,offset:[0,0],use_slider:%s,rotation_center:%s,once:true};slidergroup[%d] = null;draw_xml(draw_xml%d);\n",drawxml_cnt,drawxml_cnt,URL,int_data[0],int_data[1],temp,drag_type,onclick,object_cnt,stroke_color,stroke_opacity,fill_color,fill_opacity,int_data[2],use_snap,angle,font_family,doubledata2js_array(affine_matrix,6,decimals),use_affine,my_sliders,rotation_center,object_cnt,drawxml_cnt));
18552	bpr	2257	add_to_buffer(tmp_buffer);
		2258	if(onclick != 0 ){object_cnt++;}
		2259	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		2260	break;
		2261	default:break;
		2262	}
		2263	}
		2264	reset();
		2265	break;
		2266	case IMAGEFILL:
		2267	/*
		2268	@ imagefill x,y,scaling to xsize × ysize?,image_url
		2269	@ The next suitable <b>filled object</b> will be filled with "image_url" tiled
		2270	@ scaling to xsize × ysize ? ... 1 = yes 0 = no
		2271	@ After pattern filling, the fill-color should be reset !
		2272	@ wims getins / image from class directory: imagefill 80,80,my_image.gif
		2273	@ normal url: imagefill 80,80,0,$module_dir/gifs/my_image.gif
		2274	@ normal url: imagefill 80,80,1,http://adres/a/b/c/my_image.jpg
		2275	@ if dx,dy is larger than the image, the whole image will be background to the next object.
		2276	@%imagefill_tile%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%circles blue,0,0,5,3,2,5%imagefill 1.5,1.5,0,gifs/en.gif%imagefill -5,5,0,gifs/logo/wimsedu.png
		2277	@%imagefill_scale%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%circles blue,0,0,5,3,2,5%imagefill 1.5,1.5,1,gifs/en.gif%imagefill -5,5,1,gifs/logo/wimsedu.png
		2278	*/
		2279	js_function[DRAW_IMAGEFILL] = 1;
		2280	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		2281	js_function[DRAW_FILLTOBORDER] = 1;
		2282	add_js_filltoborder(canvas_type);
		2283	}
		2284	for(i=0 ;i < 4 ; i++){
		2285	switch(i){
		2286	case 0:int_data[0] = (int) (get_real(infile,0));break;
		2287	case 1:int_data[1] = (int) (get_real(infile,0));break;
		2288	case 2:int_data[2] = (int) (get_real(infile,0));break; /* 0 \| 1 */
		2289	case 3: URL = get_string_argument(infile,1);
18557	bpr	2290	tmp_buffer=my_newmem(MAX_BUFFER);
		2291	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_imagefill(%d,%d,%d,\"%s\",%d,%d,%d,%d);\n",STATIC_CANVAS+fill_cnt,int_data[0],int_data[1],URL,xsize,ysize,use_userdraw,int_data[2]));
18552	bpr	2292	add_to_buffer(tmp_buffer);
		2293	fill_cnt++;
		2294	break;
		2295	}
		2296	}
		2297	reset();
		2298	break;
		2299	case IMAGEPALETTE:
		2300	/*
18556	bpr	2301	@ imagepalette image1,image2,image3,...
		2302	@ if used before and together with command <a href='#multidraw'>multidraw images,..,..., etc</a> the image will be presented in a small table in the ''control panel``.
		2303	@%imagepalette%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%copy 0,0,-1,-1,-1,-1,gifs/images/skull_and_crossbones50.png%fontcolor green%fontfamily Bold 42pt Arial%imagepalette gifs/ca.gif,gifs/en.gif,gifs/nl.gif,gifs/fr.gif,gifs/cn.gif,gifs/de.gif,gifs/kh.gif,gifs/it.gif%multiuserinput 0,0,1%css color:blue;%multisnaptogrid 1,1,1%multilinewidth 0,4,0%# attention: use unicode text input without the slash %# \u222D ---> u222D at least will sometimes work%# otherwise cut&past unicode symbols into inputfield...%multilabel TEXT,REACTION ARROW,FLAGS,STOP DRAWING%multidraw text,arrow,images
18552	bpr	2304	*/
		2305	temp = get_string(infile,1);
		2306	temp = str_replace(temp,",","\",\"");
		2307	if( use_tooltip == 1 ){canvas_error("command 'imagepalette' is incompatible with command 'intooltip tip_text',as they use the same div-element ");}
		2308	fprintf(js_include_file,"\nvar current_id;var imagepalette = [\" %s \"];\n",temp);
		2309	break;
		2310	case INPUT:
		2311	/*
18556	bpr	2312	@ input x,y,size,editable,value
		2313	@ to set inputfield "readonly", use editable = 0
		2314	@ if no preset 'value' is needed...use a 'space' as last item argument
		2315	@ only active inputfields (editable = 1) will be read with read_canvas();
		2316	@ if ''$status=done`` (e.g. in answer.phtml) the inputfield will be cleared and set readonly<br>override this by keyword <a href="#status">status</a>
		2317	@ may be further controlled by <a href="#css">css</a>
		2318	@ if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (javascript:read_canvas();)
		2319	@ use keyword <a href='#xoffset'>xoffset \| centered</a> if the inputfield should be centered on (x:y)<br> default is the left top corner is (x:y)
		2320	@ if the student must place an inputfield(s) somewhere on the canvas, use command <a href="#userdraw">userdraw input,color</a> or make use of a command like <a href="#userdraw">userdraw text,color</a>
		2321	@%input%size 400,400%xrange -10,10%yrange -10,10%linewidth 6%point 1,2,red%input 1,2,5,1, ?%point -5,5,red%input -5,5,5,1, ?%point 6,-5,red%input 6,-5,5,1, ?%point -5,-8,red%input -5,-8,5,1, ?
18552	bpr	2322	*/
		2323	js_function[DRAW_INPUTS] = 1;
		2324	for(i = 0 ; i<5;i++){
		2325	switch(i){
		2326	case 0: int_data[0]=x2px(get_real(infile,0));break;/* x in px */
		2327	case 1: int_data[1]=y2px(get_real(infile,0));break;/* y in px */
		2328	case 2: int_data[2]=abs( (int)(get_real(infile,0)));break; /* size */
		2329	case 3: if( get_real(infile,1) >0){int_data[3] = 1;}else{int_data[3] = 0;};break; /* readonly */
		2330	case 4: temp = get_string(infile,3);
18557	bpr	2331	tmp_buffer=my_newmem(MAX_BUFFER);
		2332	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_static_inputs(%d,%d,%d,%d,%d,%d,\"%s\",\"%s\",%d);\n",canvas_root_id,input_cnt,int_data[0],int_data[1],int_data[2],int_data[3],css_class,temp,use_offset));
18552	bpr	2333	add_to_buffer(tmp_buffer);
		2334	input_cnt++;break;
		2335	default: break;
		2336	}
		2337	}
		2338	if(reply_format == 0 ){reply_format = 15;}
		2339	reset();
		2340	break;
		2341	case INTOOLTIP:
18556	bpr	2342	/*
		2343	@ intooltip link_text
		2344	@ link_text is a single line (span-element)
		2345	@ link_text may also be an image URL ''http://some_server/images/my_image.png`` or ''$module_dir/gifs/my_image.jpg``
		2346	@ link_text may contain HTML markup
		2347	@ the canvas will be displayed in a tooltip on ''link_text``
		2348	@ the canvas is default transparent: use command <a href="#bgcolor">bgcolor color</a> to adjust background-color, the link text will also be shown with this 'bgcolor'.
		2349	@ many ''userinput stuff`` will use the tooltip_placeholder_div element...only one is defined in the wims-page<br>and are therefore these commands are mutually exclusive.<br>keep this in mind...
		2350	@%intooltip%size 400,400%xrange -10,10%yrange -10,10%fontfamily Bold 42pt Courier%string black,0,0,Hello World%intooltip <span style="background-color:black;color:white;font-style:bold;font-size:48pt;">CLICK <br>HERE</span>
		2351	*/
18552	bpr	2352	if(use_input_xy != FALSE ){canvas_error("intooltip can not be combined with userinput_xy or other commands using the tooltip-div...see documentation");}
		2353	if( use_tooltip == 1 ){ canvas_error("command 'intooltip' cannot be combined with command 'popup'...");}
		2354	tooltip_text = get_string(infile,1);
		2355	if(strstr(tooltip_text,"\"") != 0 ){ tooltip_text = str_replace(tooltip_text,"\"","'"); }
		2356	use_tooltip = 1;
		2357	break;
		2358	case JSCURVE:
		2359	/*
18556	bpr	2360	@ jscurve color,formula1(x),formula2(x),formula3(x),...
		2361	@ alternative: jsplot
		2362	@ your function will be plotted by the javascript engine of the client browser
		2363	@ if <a href='trange'>trange</a> is defined, the two functions will be plotted parametric<br><b>note</b>: use <i>x</i> as variable...and not <i>t</i>. Use keyword <a href='#animate'>animate</a> to animate a point on the curve
		2364	@ use only basic math in your curve: <code>sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e</code>
		2365	@ use parenthesis and rawmath: use 2*x instead of 2x ; use 2^(sin(x))...etc etc (use error console to debug any errors...)
		2366	@ <b>attention</b>: last ''precision`` command in the canvasdraw script determines the calculation precision of the javascript curve plot !
		2367	@ no validity check is done by wims.
		2368	@ zooming & panning are implemented:<br>use command ''zoom color`` for mouse driven zooming<br>or use keyword 'setlimits' for inputfields setting xmin/xmax, ymin/ymax
		2369	@ zooming & panning is better than for curves produced by command <a href="#curve">curve color,formula</a> because for avery change in x/y-range the curve is recalculated in javascript
		2370	@ zooming & panning in case of userbased functionplot: reclick the OK button to re-plot curve onto the resized grid
		2371	@ use keyword <a href='animate'>animate</a> for animating a point on the curve
		2372	@ use command ''trace_jscurve formula(x)`` for tracing
		2373	@ use command ''jsmath formula(x)`` for calculating and displaying indiviual points on the curve
		2374	@ can <b>not</b> be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> (yet)
		2375	@ commands plotjump / plotstep are not active for ''jscurve``
		2376	@ every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
18572	bpr	2377	@ plotting multiple js-curves on the same canvas (for example if you want to use 'userdraw clickfill,color' on <a href="#canvastype">canvastype</a> number 111, use:<br> <code>jscurve red,fun1(x),fun2(x)...fun_n(x)</code>, you must specify individual multistrokecolors & multistrokeopacity & multilinewidth for these multiple js-curves to use different colors. Otherwise all curves will be the same color... Use commands like: <a href="#multistrokecolors">multistrokecolors</a>, <a href="#multilinewidth">multilinewidth</a>, <a href="#multidash">multidash</a>, <a href="#multistrokeopacity">multistroke</a>, <b>color</b> given for the command <code>jscurve color,formulas(x)</code> will not be used in that case... but the color argument must still be given in any case (otherwise syntax error...)
18556	bpr	2378	@%jscurve%size 400,400%xrange -10,10%yrange -10,10%multistrokecolors red,green,blue,orange%multilinewidth 1,2,3%multistrokeopacity 0.5,0.8,1.0%jscurve red,sin(x),1/sin(x),sin(x^2)
18552	bpr	2379	*/
		2380	jsplot_cnt++;/* -1 --> 0 */
		2381	stroke_color = get_color(infile,0);
		2382	js_function[JS_MATH] = 1;
		2383	js_function[JS_PLOT] = 1;
		2384	if( tmin != 0 && tmax !=0){use_parametric = TRUE;}
		2385	temp = get_string(infile,1);
		2386	temp = str_replace(temp,",","\",\"");
18557	bpr	2387	tmp_buffer=my_newmem(MAX_BUFFER);
		2388	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "var js_plot%d = function(){jsplot(%d,[\"%s\"],[%d],[\"%s\"],[%.2f],[%d],%d,%d,[%f,%f],%d,%d,%d,0);};js_plot%d();",jsplot_cnt,JSPLOT_CANVAS+jsplot_cnt,temp,line_width,stroke_color,stroke_opacity,use_dashed,dashtype[0],dashtype[1],tmin,tmax,plot_steps,use_parametric,use_animate,jsplot_cnt));
18552	bpr	2389	add_to_buffer(tmp_buffer);
		2390	fprintf(js_include_file,"if(typeof(all_jsplots) !== 'number'){var all_jsplots;};all_jsplots = %d;",jsplot_cnt);
11806	schaersvoo	2391
18552	bpr	2392	/* we need to create multiple canvasses, so we may zoom and pan ?? */
		2393	break;
		2394	case JSMATH:
		2395	/*
18556	bpr	2396	@ jsmath some_math_function
		2397	@ will calculate an y-value from a userinput x-value and draws a crosshair on these coordinates.
		2398	@ default labels ''x`` and ''y``; the commands ''xlabel some_x_axis_name`` and ''ylabel some_y_axis_name`` will set the label for the input fields
		2399	@ use command 'css some_css' for styling the display fields. Use command 'fontsize int' to size the labels ''x`` and ''y``
		2400	@ the client browser will convert your math function to javascript math.<br>use parenthesis and rawmath: use 2*x instead of 2x etc etc<br>no check is done on the validity of your function and/or syntax<br>use error console to debug any errors...
		2401	@ be aware that the formula's of the plotted function(s) can be found in the page javascript source
		2402	@%jsmath%size 400,400%xrange -10,10%yrange -10,10%jsplot blue,sin(x^2)%jsmath sin(x^2)
18552	bpr	2403	*/
		2404	js_function[DRAW_CROSSHAIRS] = 1;
		2405	js_function[JS_MATH] = 1;
		2406	add_calc_y(get_string(infile,1),font_size,css_class);
		2407	break;
		2408	case KILL:
		2409	/*
		2410	@ kill arguments
		2411	@ arguments may be: affine linear translation rotation slider offset reset
		2412	@ for documentation see: killaffine,killlinear,killtranslation...
		2413	@ multiple arguments are allowed (although not checked for validity...)
		2414	*/
		2415	temp = get_string(infile,1);
		2416	if(strstr(temp,"affine") != 0 ){use_affine = FALSE;affine_matrix[0] = 1.0;affine_matrix[1] = 0.0;affine_matrix[2] = 0.0;affine_matrix[3] = 1.0;affine_matrix[4] = 0.0;affine_matrix[5] = 0.0;}
		2417	if(strstr(temp,"linear") != 0 ){affine_matrix[0] = 1.0;affine_matrix[1] = 0.0;affine_matrix[2] = 0.0;affine_matrix[3] = 1.0;}
		2418	if(strstr(temp,"translation") != 0 \|\| strstr(temp,"translate") != 0 ){affine_matrix[4] = 0.0;affine_matrix[5] = 0.0;}
		2419	if(strstr(temp,"rotation") != 0 \|\| strstr(temp,"rotate") != 0 ){use_rotate = FALSE;angle = 0.0;rotation_center="null";}
		2420	if(strstr(temp,"slider") != 0 ){slider_type = "0";my_sliders = "[-1]";last_slider = use_slider+1;}
		2421	if(strstr(temp,"group") != 0 ){onclick = 0;drag_type = -1;slider_type = "0";my_sliders = "[-1]";last_slider = use_slider+1;use_slider = -1;reset();}
		2422	if(strstr(temp,"reset") != 0 ){if(no_reset == FALSE){no_reset = TRUE;}else{no_reset = FALSE;reset();}}
		2423	if(strstr(temp,"offset") != 0 ){use_offset = 0;}
		2424	break;
		2425	case KILLAFFINE:
		2426	/*
		2427	@ killaffine
		2428	@ keyword: resets the transformation matrix to 1,0,0,1,0,0
		2429	@ note: any active linear transformation will also be reset: tx=0, ty=0
		2430	*/
		2431	use_affine = FALSE;
		2432	affine_matrix[0] = 1.0;
		2433	affine_matrix[1] = 0.0;
		2434	affine_matrix[2] = 0.0;
		2435	affine_matrix[3] = 1.0;
		2436	affine_matrix[4] = 0.0;
		2437	affine_matrix[5] = 0.0;
		2438	break;
		2439	case KILLLINEAR:
		2440	/*
		2441	@ killlinear
		2442	@ keyword: resets the transformation matrix to 1,0,0,1,tx,ty
		2443	@ note:any active transformation or rotation will not be killed (tx,ty remain active)
		2444	*/
		2445	affine_matrix[0] = 1.0;
		2446	affine_matrix[1] = 0.0;
		2447	affine_matrix[2] = 0.0;
		2448	affine_matrix[3] = 1.0;
		2449	break;
		2450	case KILLROTATE:
		2451	/*
18556	bpr	2452	@ killrotate
		2453	@ will set the rotation angle to 0.
18572	bpr	2454	@ will also reset the command <a href="#rotationcenter">rotationcenter</a> to the first (x;y) of the next rotatable/slidable object(s) <br>eg a following rotate command will have the first object point as rotation center
18556	bpr	2455	@ if not set, the rotation center will remain unchanged
		2456	@ note:any active transformation or linear will not be killed (e.g an active transformation matrix remains active)
		2457	@%killrotate%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%rotationcenter 0,0%# slider is active for all following objects until 'killslider'%slider -10,10,300,40,angle degree,Rotate%drag xy%# after dragging the object must be clicked to re-activate the slider%linewidth 4%arrow 0,0,6,0,9,blue%%# reset rotation center to the first (x,y) of the next object/arrow...%killrotate%drag xy%# after dragging the object must be clicked to re-activate the slider%arrow 0,0,6,1,9,red
18552	bpr	2458	*/
		2459	use_rotate = FALSE;
		2460	angle = 0.0;
		2461	rotation_center="null";
		2462	break;
		2463	case KILLSLIDER:
		2464	/*
18556	bpr	2465	@ killslider
		2466	@ keyword (no arguments required)
		2467	@ ends grouping of object under a previously defined slider
18552	bpr	2468	*/
		2469	slider_type = "0";
		2470	my_sliders = "[-1]";
		2471	last_slider = use_slider+1;
		2472	break;
		2473	case KILLTRANSLATION:
		2474	/*
18556	bpr	2475	@ killtranslation
		2476	@ alternative: killtranslate
		2477	@ note: a active linear or affine transformation will not be 100% reset...only tx=0,ty=0
		2478	@ resets the translation matrix a,b,c,d,tx,ty to a,b,c,d,0,0
18552	bpr	2479	*/
		2480	affine_matrix[4] = 0.0;
		2481	affine_matrix[5] = 0.0;
		2482	break;
		2483	case LATEX:
		2484	/*
18556	bpr	2485	@ latex x,y,tex string
		2486	@ alternative: math
18572	bpr	2487	@ note: <b>for a single greek letter</b> ,please be smart and use a command like <a href='#string'>string</a> along with <b>unicode</b> !! <br>possibly together with command <a href="#xyoffset">xoffset, yoffset or xyoffset</a><br> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a>
18556	bpr	2488	@ you may also use command <a href="#mathml">mathml</a> for xml strings generated with wims commmand ''mathmlmath`` (will not work on KaTeX enabled WIMS)
		2489	@ transformation commands <a href='#affine'>affine</a>, <a href='#translation'>translation</a> and <a href='#rotate'>rotate</a> are supported.(onclick and drag will work)
		2490	@ can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br>if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
		2491	@ can be set draggable:<code>javascript:read_dragdrop();</code> will return all coordinates in the same order as the canvas script: unmoved object will have their original coordinates...
		2492	@ can be moved/rotated with command <a href='#slider'>slider</a>
		2493	@ snaptogrid is supported
18627	bpr	2494	@ when clicked, the color of the 'div background' of the 'mathobject' will be determined by the <a href="#fillcolor">fillcolor</a> and <a href="#opacity">opacity</a> settings
18556	bpr	2495	@ userdraw may be combined with 'latex' ; the js-function 'read_canvas()' will contain the coordinates of the drawing.
		2496	@ userdraw may be combined; the read_canvas() will contain the drawing.
		2497	@ draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> and all objects from commands <a href='#html'>html</a> or <a href='#obabel'>obabel</a> can be combined with drag and/or onclick mathml
		2498	@ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
		2499	@ if inputfields are incorporated in mathml (with id's: id='mathml0',id='mathml1',...id='mathml_n')<br>the user_input values will be read by <code>javascript:read_mathml();</code>. <b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
		2500	@ If other inputfields (command input / command textarea) or userdraw are performed, the function read_canvas() will not read mathml. Use some generic function to read it....
		2501	@ use keyword <a href='#centered'>centered</a> to center the katex div object on (x1:y1) <br>this may not work as expected for MathJaX [TO BE TESTED]
		2502	@ note: if you want to include external TeX via drag&drop onto a canvasdraw element, use \\mmlid{integer} in the tex-command:''!insmath \\mmlid{1}\\frac{1}{\pi}``<br> (if your wims_mathml does not support it...use <a href="http://85.148.206.56/wims/download/Mathml.tar.gz">this version...</a>)
		2503	@ note: the same is true for all external P,SPAN,DIV,IMG,SVG-images via drag&drop onto a canvasdraw element, use ''onclick=javascript:place_image_on_canvas(this.id)``
		2504	@%latex_drag%size 400,400%xrange -10,10%yrange -10,10%grid 2,2,grey%strokecolor red%drag xy%centered%latex -6,5,\\frac{1}{2}+ \\frac{\\pi}{2}%strokecolor blue%drag xy%centered%latex -3,5,\\frac{1}{3}+ \\frac{\\pi}{3}%strokecolor green%drag xy%centered%latex 0,5,\\frac{1}{4}+ \\frac{\\pi}{4}%strokecolor orange%drag xy%fontfamily 26px Times%centered%latex 3,5,\\frac{1}{5}+ \\frac{\\pi}{6}
		2505	@%latex%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%vline 0,0,green%hline 0,0,green%fontfamily 16px Arial%fillcolor orange%strokecolor blue%linewidth 2%slider 0,4*pi,400,40,angle degree active, %centered%latex 0,0,\\frac{12345}{23456} \\times \\frac{12345}{23456}%translate 4,4%centered%rotate 180%drag xy%html 0,0,<table><tr><th>HTML TABLE</th></tr><tr><th><a href="https://wimsedu.info/">WIMS EDU </a> </th></tr><tr><td><img src="gifs/en.gif"></tr><tr><td><img src="gifs/nl.gif"></tr><tr><td><img src="gifs/fr.gif"></tr><tr><td><img src="gifs/cn.gif"></tr><tr><td><img src="gifs/it.gif"></tr></table>%userdraw arrow2,red
18552	bpr	2506	*/
		2507	js_function[DRAW_XML] = 1;
		2508	for(i=0;i<3;i++){
		2509	switch(i){
		2510	case 0: double_data[0]=get_real(infile,0);break; /* x in x/y-range coord system -> pixel width */
		2511	case 1: double_data[1]=get_real(infile,0);break; /* y in x/y-range coord system -> pixel height */
		2512	case 2: decimals = find_number_of_digits(precision);
		2513	temp = get_string(infile,1);
		2514	if(use_affine == TRUE ){ transform(2,2);}/* slider will use css-rotate transformation */
		2515	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		2516	int_data[0] = x2px(double_data[0]);
		2517	int_data[1] = y2px(double_data[1]);
		2518	if( use_slider != -1 && onclick == 0 ){ onclick = 5;}
		2519	if( use_slider != -1 && drag_type != -1){ onclick = 5; }
15757	schaersvoo	2520	#ifdef KATEX_INSTALLED
18552	bpr	2521	if( strstr(temp,"\\") != 0 ){ temp = str_replace(temp,"\\","\\\\"); }
		2522	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	2523	tmp_buffer=my_newmem(MAX_BUFFER);
		2524	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "var draw_xml%d = {id:%d,type:'katex',x:[%d],y:[%d],mathml:\"%s\",drag_type:%d,onclick:%d,object_cnt:%d,stroke_color:\"%s\",stroke_opacity:%.2f,fill_color:\"%s\",fill_opacity:%.2f,use_center:%d,use_snap:%d,angle:%f,fontfamily:\"%s\",transform:%s,use_affine:%d,offset:[0,0],use_slider:%s,rotation_center:%s,once:true};draw_xml(draw_xml%d);\n",drawxml_cnt,drawxml_cnt,int_data[0],int_data[1],temp,drag_type,onclick,object_cnt,stroke_color,stroke_opacity,fill_color,fill_opacity,int_data[2],use_snap,angle,font_family,doubledata2js_array(affine_matrix,6,decimals),use_affine,my_sliders,rotation_center,drawxml_cnt));
15757	schaersvoo	2525	#else
18552	bpr	2526	temp = getMML(temp);/* generate MathML for Firefox or MathJaX */
		2527	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	2528	tmp_buffer=my_newmem(MAX_BUFFER);
		2529	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "var draw_xml%d = {id:%d,type:'mathml',x:[%d],y:[%d],mathml:\"%s\",drag_type:%d,onclick:%d,object_cnt:%d,stroke_color:\"%s\",stroke_opacity:%.2f,fill_color:\"%s\",fill_opacity:%.2f,use_center:%d,use_snap:%d,angle:%f,fontfamily:\"%s\",transform:%s,use_affine:%d,offset:[0,0],use_slider:%s,rotation_center:%s,once:true};draw_xml(draw_xml%d);\n",drawxml_cnt,drawxml_cnt,int_data[0],int_data[1],temp,drag_type,onclick,object_cnt,stroke_color,stroke_opacity,fill_color,fill_opacity,int_data[2],use_snap,angle,font_family,doubledata2js_array(affine_matrix,6,decimals),use_affine,my_sliders,rotation_center,drawxml_cnt));
15757	schaersvoo	2530	#endif
18552	bpr	2531	add_to_buffer(tmp_buffer);
		2532	if(onclick != 0 ){object_cnt++;}
		2533	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		2534	break;
		2535	default:break;
		2536	}
		2537	}
		2538	reset();
		2539	break;
		2540	case LATTICE:
		2541	/*
18556	bpr	2542	@ lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color
		2543	@ can <b>not</b> be set ''onclick`` or ''drag xy``
		2544	@%lattice%size 400,400%xrange -10,10%yrange -10,10%fillcolor red%linewidth 2%lattice -10,-10,0,1,1,1,10,10,red%fillcolor blue%lattice 10,-10,0,1,-1,1,10,10,blue
18552	bpr	2545	*/
		2546	js_function[DRAW_LATTICE] = 1;
		2547	for( i = 0; i<9; i++){
		2548	switch(i){
		2549	case 0: int_data[0] = x2px(get_real(infile,0));break; /* x0-values -> x-pixels*/
		2550	case 1: int_data[1] = y2px(get_real(infile,0));break; /* y0-values -> y-pixels*/
		2551	case 2: int_data[2] = (int) (get_real(infile,0));break; /* x1-values -> x-pixels*/
		2552	case 3: int_data[3] = (int) -1(get_real(infile,0));break; / y1-values -> y-pixels*/
		2553	case 4: int_data[4] = (int) (get_real(infile,0));break; /* x2-values -> x-pixels*/
		2554	case 5: int_data[5] = (int) -1(get_real(infile,0));break; / y2-values -> y-pixels*/
		2555	case 6: int_data[6] = (int) (get_real(infile,0));break; /* n1-values */
		2556	case 7: int_data[7] = (int) (get_real(infile,0));break; /* n2-values */
		2557	case 8: stroke_color=get_color(infile,1);
		2558	decimals = find_number_of_digits(precision);
18557	bpr	2559	tmp_buffer=my_newmem(MAX_BUFFER);
		2560	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_lattice(%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,\"%s\",%.2f,\"%s\",%.2f,%d,%.2f,%d); ",STATIC_CANVAS,line_width,int_data[0],int_data[1],int_data[2],int_data[3],int_data[4],int_data[5],int_data[6],int_data[7],fill_color,fill_opacity,stroke_color,stroke_opacity,use_rotate,angle,use_filled));
18552	bpr	2561	add_to_buffer(tmp_buffer);break;
		2562	default:break;
		2563	}
		2564	}
		2565	reset();
		2566	break;
		2567	case LINEAR:
		2568	/*
18556	bpr	2569	@ linear a,b,c,d
		2570	@ defines a transformation matrix for subsequent objects
		2571	@ use keyword <a href='#killlinear'>killlinear</a> to end the transformation...the next objects will be drawn in the original x/y-range
		2572	@ a: Scales the drawings horizontally
		2573	@ b: Skews the drawings horizontally
		2574	@ c: Skews the drawings vertically
		2575	@ d: Scales the drawings vertically
		2576	@ the data precision may be set by preceding command ''precision int``
		2577	@ note: any active translation (tx,ty) is not changed
		2578	@%linear%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%fcircle 5,5,40,blue%linear 0.2,0,0,0.2%fcircle 5,5,40,green
18552	bpr	2579	*/
		2580	for(i = 0 ; i<4;i++){
		2581	switch(i){
		2582	case 0: affine_matrix[0] = get_real(infile,0);break;
		2583	case 1: affine_matrix[1] = get_real(infile,0);break;
		2584	case 2: affine_matrix[2] = get_real(infile,0);break;
		2585	case 3: affine_matrix[3] = get_real(infile,1);
		2586	affine_matrix[4] = 0;affine_matrix[5] = 0;
		2587	use_affine = TRUE;
		2588	break;
		2589	default: break;
		2590	}
		2591	}
		2592	reset();
		2593	break;
		2594	case LINE:
		2595	/*
		2596	@ line x1,y1,x2,y2,color
		2597	@ draw a line through points (x1:y1)--(x2:y2) in color ''color``
		2598	@ or use command ''curve color,formula`` to draw the line (uses more points to draw the line; is however better draggable)
		2599	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		2600	@%line%size 400,400%xrange -10,10%yrange -10,10%line 0,1,2,-1,green
		2601	*/
		2602	for(i=0;i<5;i++){
		2603	switch(i){
		2604	case 0: double_data[10]= get_real(infile,0);break; /* x-values */
		2605	case 1: double_data[11]= get_real(infile,0);break; /* y-values */
		2606	case 2: double_data[12]= get_real(infile,0);break; /* x-values */
		2607	case 3: double_data[13]= get_real(infile,0);break; /* y-values */
		2608	case 4: stroke_color=get_color(infile,1);/* name or hex color */
		2609	if( double_data[10] == double_data[12] ){ /* vertical line*/
		2610	double_data[1] = xmin;
		2611	double_data[3] = ymax;
		2612	double_data[0] = double_data[10];
		2613	double_data[2] = double_data[10];
		2614	}
		2615	else{
		2616	if( double_data[11] == double_data[13] ){ /* horizontal line */
		2617	double_data[1] = double_data[11];
		2618	double_data[3] = double_data[11];
		2619	double_data[0] = ymin;
		2620	double_data[2] = xmax;
		2621	}
		2622	else {
		2623	/* m */
		2624	double_data[5] = (double_data[13] - double_data[11]) /(double_data[12] - double_data[10]);
		2625	/* q */
		2626	double_data[6] = double_data[11] - ((double_data[13] - double_data[11]) /(double_data[12] - double_data[10]))*double_data[10];
		2627	/xmin,mxmin+q,xmax,mxmax+q/
		2628	double_data[1] = (double_data[5])*(xmin)+(double_data[6]);
		2629	double_data[3] = (double_data[5])*(xmax)+(double_data[6]);
		2630	double_data[0] = xmin;
		2631	double_data[2] = xmax;
		2632	}
		2633	}
		2634	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		2635	if(use_affine == TRUE ){ transform(4,2);}
		2636	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2637	decimals = find_number_of_digits(precision);
18557	bpr	2638	tmp_buffer=my_newmem(MAX_BUFFER);
		2639	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2640	add_to_buffer(tmp_buffer);
		2641	if(onclick != 0){object_cnt++;}
		2642	/* object_cnt++;*/
		2643	reset();
		2644	break;
		2645	}
		2646	}
		2647	dragstuff[4] = 1;
		2648	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2649	break;
		2650	case LINES:
		2651	/*
		2652	@ lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n
		2653	@ draw multiple lines through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color'
		2654	@ or use multiple commands ''curve color,formula`` or ''jscurve color,formule`` to draw the line <br>(uses more points to draw the line; is however better draggable)
		2655	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		2656	@%lines%size 400,400%xrange -10,10%yrange -10,10%lines green,0,1,1,3,0,0,1,3,0,0,-2,1
		2657	*/
		2658	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		2659	fill_color = stroke_color;
		2660	i=0;
		2661	while( ! done ){ /* get next item until EOL*/
		2662	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		2663	if(i%2 == 0 ){
		2664	double_data[i] = get_real(infile,0); /* x */
		2665	}
		2666	else {
		2667	double_data[i] = get_real(infile,1); /* y */
		2668	}
		2669	i++;
		2670	}
		2671	decimals = find_number_of_digits(precision);
		2672	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2673	for(c = 0 ; c < i-1 ; c = c+4){
		2674	if(double_data[c] == double_data[c+2] ){ /* vertical line*/
		2675	double_data[c+1] = xmin;
		2676	double_data[c+3] = ymax;
		2677	double_data[c+2] = double_data[c];
		2678	}
		2679	else {
		2680	if( double_data[c+1] == double_data[c+3] ){ /* horizontal line */
		2681	double_data[c+3] = double_data[c+1];
		2682	double_data[c] = ymin;
		2683	double_data[c+2] = xmax;
		2684	}
		2685	else {
		2686	/* m */
		2687	double m = (double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]);
		2688	/* q */
		2689	double q = double_data[c+1] - ((double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]))*double_data[c];
		2690	/xmin,mxmin+q,xmax,mxmax+q/
		2691	double_data[c+1] = (m)*(xmin)+(q);
		2692	double_data[c+3] = (m)*(xmax)+(q);
		2693	double_data[c] = xmin;
		2694	double_data[c+2] = xmax;
		2695	}
		2696	}
		2697	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		2698	if(use_affine == TRUE ){ transform(i-1,2);}
18557	bpr	2699	tmp_buffer=my_newmem(MAX_BUFFER);
		2700	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2701	add_to_buffer(tmp_buffer);
		2702	if(onclick != 0){object_cnt++;}
		2703	/* object_cnt++; */
		2704	}
		2705	dragstuff[4] = 1;
		2706	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2707	reset();
		2708	break;
		2709	case LINEWIDTH:
		2710	/*
		2711	@ linewidth int
		2712	@ default 1
		2713	@%linewidth%size 400,400%xrange -10,10%yrange -10,10%linewidth 1%line -5,-5,-5,5,red%linewidth 2%line -4,-5,-4,5,green%linewidth 3%line -3,-5,-3,5,blue%linewidth 4%line -2,-5,-2,5,orange%linewidth 1%line -1,-5,-1,5,brown%linewidth 5%line 1,-5,1,5,cyan%linewidth 6%line 3,-5,3,5,purple%linewidth 7%line 5,-5,5,5,black
		2714	*/
		2715	line_width = (int) (get_real(infile,1));
		2716	break;
		2717	case LEVELCURVE:
		2718	/*
		2719	@ levelcurve color,expression in x/y,l1,l2,...
		2720	@ draws very primitive level curves for expression, with levels l1,l2,l3,...,l_n
		2721	@ the quality is <b>not to be compared</b> with the Flydraw levelcurve. <br>(choose flydraw if you want quality...)
		2722	@ every individual level curve may be set 'onclick / drag xy' <br>e.g. every single level curve (l1,l2,l3...l_n) has a unique identifier
		2723	@ note: the arrays for holding the javascript data are limited in size
		2724	@ note: reduce image size if javascript data arrays get overloaded<br>(command 'plotsteps int' will not control the data size of the plot...)
		2725	@%levelcurve%size 400,400%xrange -10,10%yrange -10,10%levelcurve red,x*y,1,2,3,4
		2726	*/
		2727	fill_color = get_color(infile,0);
		2728	char *fun1 = get_string_argument(infile,0);
		2729	if( strlen(fun1) == 0 ){canvas_error("function is NOT OK !");}
		2730	i = 0;
		2731	done = FALSE;
		2732	while( !done ){
		2733	double_data[i] = get_real(infile,1);
		2734	i++;
		2735	}
		2736	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2737	for(c = 0 ; c < i; c++){
18557	bpr	2738	tmp_buffer=my_newmem(MAX_BUFFER);
		2739	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,16,%s,[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,eval_levelcurve(xsize,ysize,fun1,xmin,xmax,ymin,ymax,plot_steps,precision,double_data[c]),line_width,line_width,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	2740	add_to_buffer(tmp_buffer);
		2741	if(onclick != 0){object_cnt++;}
		2742	/* object_cnt++; */
		2743	}
		2744	dragstuff[16] = 1;
		2745	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2746	reset();
		2747	break;
		2748	case LEGEND:
		2749	/*
		2750	@ legend string1:string2:string3....string_n
		2751	@ will be used to create a legend for a graph
		2752	@ also see command <a href='#piechart'>piechart</a>
		2753	@ will use the same colors per default as used in the graphs; use command <a href='#legendcolors'>legendcolors</a> to override the default
		2754	@ use command <a href="#fontsize">fontsize</a> to adjust. (command ''fontfamily`` is not active for command ''legend``)
		2755	@%legend%size 400,400%xrange -10,10%yrange -10,10%bgcolor white%fontsize 16%legend legend 1:legend 2:legend 3:legend 4:this is legend 5:legend 6:another legend abc%legendcolors red:green:blue%grid 1,1,white%# note: command "grid" is mandatory%# just set grid invisible if not wanted
		2756	*/
		2757	temp = get_string(infile,1);
		2758	if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
		2759	legend_cnt++; /* attention: starts with -1: it will be used in piechart etc */
		2760	fprintf(js_include_file,"var legend%d = [\"%s\"];",legend_cnt,temp);
		2761	break;
		2762	case LEGENDCOLORS:
		2763	/*
		2764	@ legendcolors color1:color2:color3:...:color_n
		2765	@ will be used to color a legend: use this command after the legend command ! e.g. <code>legend test1:test2:test3<br>legendcolors blue:red:orange</code>.
		2766	@ make sure the number of colors match the number of legend items
18627	bpr	2767	@ command ''legend`` in case of ''piechart`` and ''barchart`` will use these colors per default (no need to specify ''legendcolors``)
18552	bpr	2768	@%legendcolors%size 400,400%xrange -10,10%yrange -10,10%fontsize 18%legend legend 1:legend 2:legend 3%legendcolors red:green:blue%grid 1,1,grey
		2769	*/
		2770	if(legend_cnt == -1){canvas_error("use command \"legend\" before command \"legendcolors\" ! ");}
		2771	temp = get_string(infile,1);
		2772	if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
		2773	fprintf(js_include_file,"var legendcolors%d = [\"%s\"];",legend_cnt,temp);
		2774	break;
		2775	case LINEGRAPH: /* scheme: var linegraph_0 = [ 'stroke_color','line_width','use_dashed', 'dashtype0','dashtype1','x1','y1',...,'x_n','y_n'];*/
		2776	/*
		2777	@ linegraph x1:y1:x2:y2...x_n:y_n
		2778	@ will plot your data in a graph
		2779	@ may <b>only</b> to be used together with command <a href='#grid'>grid</a>
		2780	@ can be used together with freestyle x-axis/y-axis texts: see commands <a href='#xaxis'>xaxis</a>,<a href='#xaxisup'>xaxisup</a> and <a href='#yaxis'>yaxis</a>
		2781	@ use command <a href='#legend'>legend</a> to provide an optional legend in right-top-corner
		2782	@ also see command <a href='#piechart'>piechart</a>
		2783	@ multiple linegraphs may be used in a single plot
		2784	@ note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
		2785	@ <ul><li>use command <a href='#strokecolor'>strokecolor</a> before a command ''linegraph`` to set the color of this graph</li><li>use command <a href='#linewidth'>linewidth</a> before command ''linegraph`` to set linewidth of this graph</li><li>use keyword <a href='#dashed'>dashed</a> before command ''linegraph`` to set dashing of the graph</li><li>if dashing is set, use command <a href='#dashtype'>dashtype</a> before command ''linegraph`` to set the type of dashing of the (individual) graph</li></ul>
		2786	@%linegraph%size 400,400%xrange -10,10%yrange -10,10%strokecolor red%linegraph -10:1:-5:-1:3:3:10:-5%strokecolor blue%linegraph -10:-1:-5:1:3:-3:10:5%dashed%strokecolor green%linegraph -10:2:-5:-2:3:4:10:2%grid 1,1,grey
		2787	*/
		2788	temp = get_string(infile,1);
		2789	if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
		2790	fprintf(js_include_file,"var linegraph_%d = [\"%s\",\"%d\",\"%d\",\"%d\",\"%d\",\"%s\"];",linegraph_cnt,stroke_color,line_width,use_dashed,dashtype[0],dashtype[1],temp);
		2791	linegraph_cnt++;
		2792	reset();
		2793	break;
		2794	case MATHML:
		2795	/*
		2796	@ mathml x1,y1,mathml_string
		2797	@ this command is special for GECKO browsers, and it makes use of Native Mathml
		2798	@ For general use with all browsers, use command <a href='#latex'>latex</a>
		2799	@ can be set <a href='onclick'>onclick</a> and <a href='drag'>drag&drop</a> <br>Note: dragging is fairly primitive dragging of the div-element, and is not done using the <em>dragstuff library</em>
		2800	@ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
		2801	@ command <a href='#rotate'>rotate</a> will rotate the object
		2802	@ the mathml object is centered at (x1:y1)
		2803	@ the ''mathml_string`` can be produced using WIMS commands like ''texmath`` followed by ''mathmlmath``... or write correct TeX and use only ''mathmlmath``
		2804	@ mathml will be displayed in a rectangle left top (x1:y1)
		2805	@ can be set onclick <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects; if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
		2806	@ can be set draggable: <code>javascript:read_dragdrop()</code> will return all coordinates in same order as the canvas script: unmoved objects will have their original coordinates...
		2807	@ snaptogrid is supported...snaptopoints will work, but use with care... due to the primitive dragging. Technically: the dragstuff library is not used... the mathml is embedded in a new div element and not in the html5-canvas.
		2808	@ when clicked, the mathml object will be drawn in red color; the div background color will be determined by the <a href="#fillcolor">fillcolor</a> and <a href="#opacity">opacity</a> settings.
		2809	@ userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing.
		2810	@ draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> can be combined with drag and/or onclick mathml
		2811	@ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
		2812	@ if inputfields are incorporated in mathml (with id's: id='mathml0',id='mathml1',...id='mathml_n')<br>the user_input values will be read by javascript:read_mathml();<br><b>attention</b>: if after this mathml-input object other user-interactions are included, these will read mathml too using "read_canvas();"
		2813	@ If other inputfields (command input / command textarea) or userdraw is performed, the function read_canvas() will not read mathml. Use some generic function to read it....
		2814	@ use keyword <a href='#centered'>centered</a> to center the mathml/xml object on (x1:y1)
		2815	@%mathml_onclick%size 400,400%xrange -10,10%yrange -10,10%onclick%strokecolor red%mathml -5,5,<span style="font-size:1em;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle id="wims_mathml366290"><mrow><mo stretchy="true">[</mo><mtable rowspacing="0.5ex" columnalign=" left " columnlines=" none " rowlines=" none " ><mtr><mtd><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mstyle displaystyle="true"><mfrac><mn>1</mn><mn>2</mn></mfrac></mstyle><mo>⋅</mo><msup><mi>x</mi> <mn>2</mn></msup></mtd></mtr> <mtr><mtd><mi>g</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mstyle displaystyle="true"><mfrac><mn>1</mn><mrow><msup><mi>x</mi> <mn>2</mn></msup></mrow></mfrac></mstyle></msqrt></mtd></mtr></mtable><mo stretchy="true">]</mo></mrow></mstyle></math></span>%onclick%strokecolor blue%mathml 5,5,<span style="font-size:1em;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle id="wims_mathml580175" ><mrow><mo stretchy="true">[</mo><mtable rowspacing="0.5ex" columnalign=" left " columnlines=" none " rowlines="none"><mtr><mtd><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mstyle displaystyle="true"><mfrac><mn>1</mn><mrow><mi>sin</mi><mrow><mo stretchy="true">(</mo><msup><mi>x</mi> <mn>2</mn></msup><mo stretchy="true">)</mo></mrow></mrow></mfrac></mstyle></mtd></mtr> <mtr><mtd><mi>g</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mrow><mi>sin</mi><mrow><mo stretchy="true">(</mo><msup><mi>x</mi> <mn>2</mn></msup><mo stretchy="true">)</mo></mrow></mrow></msqrt></mtd></mtr></mtable><mo stretchy="true">]</mo></mrow></mstyle></math></span>
		2816	@%mathml_drag%size 400,400%xrange -10,10%yrange -10,10%drag xy%strokecolor red%mathml -5,5,<span style="font-size:1em;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle id="wims_mathml366290"><mrow><mo stretchy="true">[</mo><mtable rowspacing="0.5ex" columnalign=" left " columnlines=" none " rowlines=" none "><mtr><mtd><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mstyle displaystyle="true"><mfrac><mn>1</mn><mn>2</mn></mfrac></mstyle><mo>⋅</mo><msup><mi>x</mi> <mn>2</mn></msup></mtd></mtr> <mtr><mtd><mi>g</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mstyle displaystyle="true"><mfrac><mn>1</mn><mrow><msup><mi>x</mi> <mn>2</mn></msup></mrow></mfrac></mstyle></msqrt></mtd></mtr></mtable><mo stretchy="true">]</mo></mrow></mstyle></math></span>%drag xy%strokecolor blue%mathml 5,5,<span style="font-size:1em;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle id="wims_mathml580175" ><mrow><mo stretchy="true">[</mo><mtable rowspacing="0.5ex" columnalign=" left " columnlines=" none " rowlines=" none "><mtr><mtd><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mstyle displaystyle="true"><mfrac><mn>1</mn><mrow><mi>sin</mi><mrow><mo stretchy="true">(</mo><msup><mi>x</mi> <mn>2</mn></msup><mo stretchy="true">)</mo></mrow></mrow></mfrac></mstyle></mtd></mtr> <mtr><mtd><mi>g</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mrow><mi>sin</mi><mrow><mo stretchy="true">(</mo><msup><mi>x</mi> <mn>2</mn></msup><mo stretchy="true">)</mo></mrow></mrow></msqrt></mtd></mtr></mtable><mo stretchy="true">]</mo></mrow></mstyle></math></span>%#click left top corner...then drag...
		2817	*/
		2818	js_function[DRAW_XML] = 1;
		2819	for(i=0;i<3;i++){
		2820	switch(i){
		2821	case 0: double_data[0]=get_real(infile,0);break; /* x in x/y-range coord system -> pixel width */
		2822	case 1: double_data[1]=get_real(infile,0);break; /* y in x/y-range coord system -> pixel height */
		2823	case 2: decimals = find_number_of_digits(precision);
		2824	if(use_affine == TRUE ){ transform(2,2);}/* needs double_data[] */
		2825	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		2826	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2827	int_data[0] = x2px(double_data[0]);/* needs px */
		2828	int_data[1] = y2px(double_data[1]);
		2829	if( use_slider != -1 && onclick == 0 ){ onclick = 3;}/* no drag&onclick but slideable */
		2830	if( use_slider != -1 && drag_type != -1){ onclick = 5; }
		2831	temp = get_string(infile,1);
		2832	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	2833	tmp_buffer=my_newmem(MAX_BUFFER);
		2834	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "var draw_xml%d = {id:%d,type:'mathml',x:[%d],y:[%d],mathml:\"%s\",drag_type:%d,onclick:%d,object_cnt:%d,stroke_color:\"%s\",stroke_opacity:%.2f,fill_color:\"%s\",fill_opacity:%.2f,use_center:%d,use_snap:%d,angle:%f,fontfamily:\"%s\",transform:%s,use_affine:%d,offset:[0,0],use_slider:%d,rotation_center:%s,once:true};draw_xml(draw_xml%d);slidergroup[%d] = null;\n",drawxml_cnt,drawxml_cnt,int_data[0],int_data[1],temp,drag_type,onclick,object_cnt,stroke_color,stroke_opacity,fill_color,fill_opacity,int_data[2],use_snap,angle,font_family,doubledata2js_array(affine_matrix,6,decimals),use_affine,use_slider,rotation_center,drawxml_cnt,object_cnt));
18552	bpr	2835	add_to_buffer(tmp_buffer);
		2836	if(onclick != 0 ){object_cnt++;}
		2837	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		2838	/*
		2839	in case inputs are present, trigger adding the read_mathml()
		2840	if no other reply_format is defined
		2841	note: all other reply types will include a reading of elements with id='mathml'+p)
		2842	*/
		2843	if(strstr(temp,"mathml0") != NULL){ if(reply_format == 0 ){reply_format = 16;}} /* no other reply type is defined */
		2844	break;
		2845	default:break;
		2846	}
		2847	}
		2848	reset();
		2849	break;
		2850	case MOUSE:
		2851	/*
18556	bpr	2852	@ mouse color,fontsize
		2853	@ will display the cursor (x:y) coordinates in ''color`` and ''fontsize`` using default fontfamily Arial
		2854	@ note: use command ''mouse`` at the end of your script code (the same is true for command ''zoom``)
		2855	@%mouse%size 400,400%xrange -10,10%yrange -10,10%mouse red,22
18552	bpr	2856	*/
		2857	stroke_color = get_color(infile,0);
		2858	font_size = (int) (get_real(infile,1));
		2859	tmp_buffer = my_newmem(26);
		2860	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2861	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,2);
		2862	js_function[INTERACTIVE] = 1;
		2863	break;
		2864	case MOUSE_DEGREE:
		2865	/*
18556	bpr	2866	@ mouse_degree color,fontsize
		2867	@ will display the angle in degrees between x-axis, (0:0) and the cursor (x:y) in 'color' and 'font size'<br> using a fontfamily Arial
		2868	@ The angle is positive in QI and QIII and the angle value is negative in QII and QIV
		2869	@ note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
		2870	@%mouse_degree%size 400,400%xrange -10,10%yrange -10,10%userdraw arc,blue%precision 100000%mouse_degree red,22
18552	bpr	2871	*/
		2872	stroke_color = get_color(infile,0);
		2873	font_size = (int) (get_real(infile,1));
		2874	tmp_buffer = my_newmem(26);
		2875	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2876	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,3);
		2877	js_function[JS_FIND_ANGLE] = 1;
		2878	js_function[INTERACTIVE] = 1;
		2879	break;
		2880	case MOUSE_DISPLAY:
		2881	/*
18556	bpr	2882	@ display TYPE,color,fontsize
		2883	@ TYPE may be x \| y \| xy \| degree \| radian \| radius
		2884	@ will display the mouse cursor coordinates as x-only,y-only,(x:y), the radius of a circle (this only in case 'userdraw circle(s),color') or the angle in degrees or radians for commands <code>userdraw arc,color</code> or protractor, ruler (if set dynamic).
		2885	@ use commands ''xunit`` and / or ''yunit`` to add the units to the mouse values. The ''degree \| radian`` will always have the appropriate symbol).
		2886	@ just like commands ''mouse``, ''mousex``, ''mousey``, ''mouse_degree``... only other name
		2887	@%display_x%size 400,400%xrange -10,10%yrange -10,10%xunit \\u212B%display x,red,22
		2888	@%display_y%size 400,400%xrange -10,10%yrange -10,10%yunit seconds%display y,red,22
		2889	@%display_xy%size 400,400%xrange -10,10%yrange -10,10%xunit centimetre%yunit seconds%display xy,red,22%userdraw segments,blue
		2890	@%display_deg%size 400,400%xrange -10,10%yrange -10,10%display degree,red,22%fillcolor orange%opacity 200,50%userdraw arc,blue
		2891	@%display_rad%size 400,400%xrange -10,10%yrange -10,10%display radian,red,22%fillcolor orange%opacity 200,50%userdraw arc,blue
		2892	@%display_radius%size 400,400%xrange -10,10%yrange -10,10%xunit cm%xunit \\u212b%display radius,red,22%userdraw circle,blue
18552	bpr	2893	*/
		2894	temp = get_string_argument(infile,0);
		2895	if( strstr(temp,"xy") != NULL ){
		2896	int_data[0] = 2;
		2897	} else {
		2898	if( strstr(temp,"y") != NULL ){
		2899	int_data[0] = 1;
		2900	}else{
		2901	if( strstr(temp,"x") != NULL ){
		2902	int_data[0] = 0;
		2903	}else{
		2904	if(strstr(temp,"degree") != NULL){
		2905	int_data[0] = 3;
		2906	js_function[JS_FIND_ANGLE] = 1;
		2907	}else{
		2908	if(strstr(temp,"radian") != NULL){
		2909	int_data[0] = 4;
		2910	js_function[JS_FIND_ANGLE] = 1;
		2911	}else{
		2912	if(strstr(temp,"radius") != NULL){
		2913	int_data[0] = 5;
		2914	}else{
		2915	int_data[0] = 2;
		2916	}
		2917	}
		2918	}
		2919	}
		2920	}
		2921	}
		2922	stroke_color = get_color(infile,0);
		2923	font_size = (int) (get_real(infile,1));
		2924	tmp_buffer = my_newmem(26);
		2925	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2926	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,int_data[0]);
		2927	js_function[INTERACTIVE] = 1;
		2928	break;
		2929	case MOUSE_PRECISION:
		2930	/*
18556	bpr	2931	@ precision int
		2932	@ 1 = no decimals ; 10 = 1 decimal ; 100 = 2 decimals etc
		2933	@ may be used / changed before every object
		2934	@ In case of user interaction (like ''userdraw`` or ''multidraw``), this value will be used to determine the amount of decimals in the reply / answer
		2935	@%precision%size 400,400%xrange -10,10%yrange -10,10%precision 1%userdraw segment,red
18552	bpr	2936	*/
		2937	precision = (int) (get_real(infile,1));
		2938	if(precision < 1 ){precision = 1;};
		2939	break;
		2940	case MOUSEX:
		2941	/*
18556	bpr	2942	@ mousex color,fontsize
		2943	@ will display the cursor x-coordinate in ''color`` and ''font size`` using the fontfamily Arial.
		2944	@ note: use command ''mouse`` at the end of your script code (the same is true for command ''zoom``).
18552	bpr	2945	*/
		2946	stroke_color = get_color(infile,0);
		2947	font_size = (int) (get_real(infile,1));
		2948	tmp_buffer = my_newmem(26);
		2949	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2950	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,0);
		2951	js_function[INTERACTIVE] = 1;
		2952	break;
		2953	case MOUSEY:
		2954	/*
18556	bpr	2955	@ mousey color,fontsize
		2956	@ will display the cursor y-coordinate in ''color`` and ''font size`` using default fontfamily Arial.
		2957	@ note: use command ''mouse`` at the end of your script code (the same is true for command ''zoom``).
8386	schaersvoo	2958
18552	bpr	2959	*/
		2960	stroke_color = get_color(infile,0);
		2961	font_size = (int) (get_real(infile,1));
		2962	tmp_buffer = my_newmem(26);
		2963	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2964	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,1);
		2965	js_function[INTERACTIVE] = 1;
		2966	break;
		2967	case MULTIDASH:
		2968	/*
18556	bpr	2969	@ multidash 0,1,1
		2970	@ meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <code>multifill points,circle,segments</code>, are dashed
		2971	@ use before command <a href='#multidraw'>multidraw</a>
		2972	@ if not set all objects will be set ''not dashed``... unless a generic keyword ''dashed`` was given before command ''multidraw``
		2973	@ the dash-type is not -yet- adjustable <br>(e.g. command <code>dashtype line_px,space_px</code> will give no control over multidraw objects)
		2974	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
		2975	@ always use the same sequence as is used for ''multidraw``
18552	bpr	2976	*/
		2977	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		2978	temp = get_string(infile,1);
		2979	temp = str_replace(temp,",","\",\"");
		2980	fprintf(js_include_file,"var multidash = [\"%s\"];",temp);
		2981	reset();/* if command 'dashed' was given...reset to not-dashed */
		2982	break;
		2983	case MULTIDRAW:
		2984	/*
18556	bpr	2985	@ multidraw obj_type_1,obj_type_2...obj_type_11
		2986	@ for simple single object user drawings you could also use command <a href="#userdraw">userdraw</a>
18572	bpr	2987	@ implemented obj_types:<ul><li>point \| points</li><li>circle \| circles</li><li>line \| lines</li><li>segment \| segments</li><li>arrow \| arrows (use command 'arrowhead int' for size (default value 8 pixels))</li><li>curvedarrow \| curvedarrows</li><li>rect \| rects</li><li>closedpoly<br><b>only one</b> closedpolygon may be drawn.The number of ''corner points`` is not preset (e.g. not limited, freestyle), the polygon is closed when clicking on the first point again..(+/- 10px)</li><li>triangle \| triangles</li><li>parallelogram \| parallelograms</li><li>poly[3-9] \| polys[3-9] draw 3...9 point polygone(s): polys3 is of course triangles</li><li>images</li><li>crosshair \| crosshairs</li><li>function <br>for more function user input fields, use it multiple times<br>for 4 inputfields use : multidraw function,function,function,function</li></ul>
18556	bpr	2988	@ additionally objects may be user labelled, using obj_type ''text``...<br>in this case allways a text input field and if <a href='#multiuserinput'> multiuserinput=1 </a> also (x:y) inputfields will be added to the page.<br>use commands ''fontfamily`` and ''fontcolor`` to adjust (command ''multistrokeopacity`` may be set to adjust text opacity)<br>note: text is always centered on the mouse-click or user-input coordinates !<br>note: no keyboard listeners are used
		2989	@ it makes no sense using something like ''multidraw point,points`` ... <br>something like "multidraw polys4,polys7" will only result in drawing a ''4 point polygone`` and not a ''7 point polygone``: this is a design flaw and not a feature...
		2990	@ note: mouselisteners are only active if "$status != done " (eg only drawing in an active/non-finished exercise) <br> to overrule use command/keyword "status" (no arguments required)
		2991	@ buttons for changing the obj_type (and in case of ''multiuserinput``, some inputfields and buttons) <br>will be present in the reserved div ''tooltip_div`` and can be styled using command 'css some_css'
		2992	@ the button label will be default the ''object primitive name`` (like ''point``, ''circles``).<br>If you want a different label (e.g. an other language), use command ''multilabel``<br>for example in dutch: <br><code>multilabel cirkel,lijnstuk,punten,STOP<br>multidraw circle,segment,points</code><br>(see command <a href='#multilabel'>multilabel</a> for more details)
		2993	@ a right mouse button click will remove the last drawn object of the selected drawing type. All other type of objects are not removed
		2994	@ multidraw is incompatible with command ''tooltip`` (the reserved div_area is used for the multidraw control buttons)
		2995	@ all ''multidraw`` drawings will scale on zooming.<br>this in contrast to the command <a href="#userdraw">userdraw</a>.
		2996	@ wims will <b>not</b> check the amount or validity of your command arguments ! <br>( use javascript console to debug any typo's )
18572	bpr	2997	@ a local function <code>read_canvas%d</code> will read all userbased drawings.<br>The output is always a 16 lines string with fixed sequence.<br>line 1 = points_x+";"+points_y+"\\n"<br>line 2 = circles_x+";"+circles_y+";"+multi_radius+"\\n"<br>line 3 = segments_x+";"+segments_y+"\\n"<br>line 4 = arrows_x+";"+arrows_y+"\\n"<br>line 5 = lines_x+";"+lines_y+"\\n"<br>line 6 = triangles_x+";"+triangles_y+"\\n"<br>line 7 = polys[3-9]_x+";"+polys[3-9]_y+"\\n"<br>line 8 = rects_x +";"+rects_y+"\\n"<br>line 9 = closedpoly_x+";"+closedpoly_y+"\\n"<br>line 10 = parallelogram_x+";"+parallelogram_y"\\n"<br>line 11 = text_x+";"+text_y+";"+text"\\n"<br>line 12 = image_x+";"+image_y+";"+image_id<br>line 13 = curvedarrows_x +";"+ curvedarrows_y +"\\n"<br>line 14 = curvedarrows2_x +";"+ curvedarrows2_y +"\\n"<br>line 15 = crosshairs_x +";"+ crosshairs_y +"\\n"<br>line 16 = userdraw_x +";"+userdraw_y + "\\n" note: this is for single ''userdraw object,color`` and ''replyformat 29``<br>line 17 = userdraw_x +";"+userdraw_y +";"+userdraw_radius + "\\n" note: this is for single ''userdraw object,color`` and ''replyformat 29``<br>The x/y-data are in x/y-coordinate system and display precision may be set by a previous command ''precision 0 \| 10 \| 100 \| 1000...``<br>In case of circles the radius is -for the time being- rounded to pixels<br><b>use the wims "direct exec" tool to see the format of the reply</b>
18556	bpr	2998	@ It is best to prepare / format the student reply in clientside javascript.<br>However in ''wims`` language you could use something like this<br>for example you are interested in the polys5 drawings of a pupil (the pupil may draw multiple poly5 objects...)<br>note: the reply for 2 poly5's is: x11,x12,x13,x14,x15,x21,x22,x23,x24,x25 ; y11,y12,y13,y14,y15,y21,y22,y23,y24,y25<br>rep = !line 7 of reply <br>rep = !translate ';' to '\\n' in $rep <br>pts = 5 # 5 points for polygon <br>x_rep = !line 1 of $rep <br>y_rep = !line 2 of $rep <br>tot = !itemcnt $x_rep <br>num_poly = $[$tot/$pts] <br>idx = 0 <br>!for p=1 to $num_poly <br> !for s=1 to $pts <br>  !increase idx <br>  X = !item $idx of $x_rep <br>  Y = !item $idx of $y_rep <br>  # do some checking <br> !next s <br>!next p <br>
		2999	@ <b>attention</b>: for command argument ''closedpoly``, only one polygone can be drawn. The last point (e.g. the point clicked near the first point) of the array is removed.
		3000	@ technical: all 10 ''draw primitives`` + ''text`` will have their own -transparent- PNG bitmap canvas. <br>So for example there can be a points_canvas entirely separated from a line_canvas.<br>This to avoid the need for a complete redraw when something is drawn to the canvas...(eg only the object_type_canvas is redrawn), this in contrast too many very slow do-it-all HTML5 canvas javascript libraries.<br>The mouselisteners are attached to the canvas-div element.
		3001	@ a special object type is ''images``.<br>if used together with <a href='#imagepalette'>imagepalette</a> a image table will be integrated in the 'control section' of multidraw (set <code>multiuserinput 1</code> for ''images``) if not used with <a href='#imagepalette'>imagepalette</a>, provide the images or div's (<img> tag with bitmap or SVG or anything in a div element) somewhere on the html exercise page, with an onclick handler like:<br><code><img src='gifs/images/dog.svg' onclick='javascript:place_image_on_canvas(this.id);' id="ext_image_1" /><br><img src='gifs/fish.png' onclick='javascript:place_image_on_canvas(this.id);' id="another" /></code><br>etc ... when activating the multidraw ''image`` button, the images can be selected<br> (left mouse button/onclick) and placed on the canvas...left mouse click.<br>using div's will enable you -amongst other content- to add math typesetting from the exercise page onto the canvas.
18572	bpr	3002	@ When you are not content with the default ''multidraw control panel``, you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and ''stop drawing`` in case you also want to drag&drop stuff...</br>To activate this feature, use <a href='#multilabel'>multilabel NOCONTROLS</a><br>The object types are internally represented by the following numbers (making typos will render your exercise null and void)<br>point = 0<br>points =1<br>circle = 2<br>circles = 3<br>line = 4<br>lines = 5<br>segment = 6<br>segments = 7<br>arrow = 8<br>arrows = 9<br>triangle = 10<br>triangles = 11<br>closedspoly = 12<br>text = 13<br>rect = 14<br>rects = 15<br>poly[3-9] = 16<br>polys[3-9] = 17<br>parallelogram = 18<br>parallelograms = 19<br>images = 20<br>curvedarrow = 21<br>curvedarrows = 22<br>curvedarrow2 = 23<br>curvedarrows2 = 24<br>crosshair = 25<br>crosshairs = 26 <br>controls for example:<br><code><input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' /><br><input type='button' onclick='javascript:userdraw_primitive=24;multidraw_object_cnt = 0;' value='start drawing curvedarrows2' /> <br><input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW ' /> </code><br> If using multiple canvas scripts in a single page, loop through the canvas_scripts[n] <br>note: if using NOCONTROLS and just a single draw primitive (for example, just: 'multidraw circles'), the object may be drawn directly. (analogue to 'userdraw circles,color')<br>And since a right mouse button click will always remove the last drawn object of the current object type, there is no need for a special "remove button"
18556	bpr	3003	@%multidraw_function%size 400,400%xrange -10,10%yrange -10,10%fontfamily Italic 22px Helvetica%axis%axisnumbering%precision 0%grid 2,2,grey,1,1,5,black%multicolors red,green,blue%fontcolor orange%multilinewidth 1,2,3%multidraw text,function,function,function,line
		3004	@%multidraw%size 400,400%xrange -10,10%yrange -10,10%multidash 1,0%multilinewidth 1,2%multistrokecolors red,blue%multisnaptogrid 1,1%multilabel LINES,CIRCLES,STOP DRAWING%multidraw lines,circles
		3005	@%multidraw_images%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%drag xy%# use special function to read the drag coordinates%copy 0,0,-1,-1,-1,-1,gifs/images/skull_and_crossbones50.png%fontcolor green%fontfamily Bold 42pt Arial%imagepalette gifs/ca.gif,gifs/en.gif,gifs/nl.gif,gifs/fr.gif,gifs/cn.gif,gifs/de.gif,gifs/kh.gif,gifs/it.gif%multiuserinput 0,0,1%css color:blue;%multisnaptogrid 1,1,1%multilinewidth 0,4,0%# attention: use unicode text input without the slash %# \u222D ---> u222D at least will sometimes work%# otherwise cut&past unicode symbols into inputfield...%multilabel TEXT,REACTION ARROW,FLAGS,STOP DRAWING%multidraw text,arrow,images
		3006	@%multidraw_demo%size 800,800%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%css color:blue;%fontfamily Italic 42pt Arial%precision 1%opacity 200,50%snaptogrid%linewidth 3%filled%multistrokecolors red,green,blue,orange,yellow,purple,black,cyan,red,green,blue,orange,green,purple,black,cyan%multifillcolors red,green,blue,orange,yellow,purple,black,cyan,red,green,blue,orange,brown,purple%imagepalette gifs/ca.gif,gifs/en.gif,gifs/nl.gif,gifs/fr.gif,gifs/cn.gif,gifs/de.gif,gifs/kh.gif,gifs/it.gif%multidraw closedpoly,segments,rect,parallelogram,triangles,poly5,points,lines,arrows,circles,text,curvedarrows,curvedarrows2,images
		3007	@%multidraw_NOCONTROLS%size 400,400%xrange -10,10%yrange -10,10%grid 2,2,grey%linewidth 3%strokecolor green%fillcolor blue%filled%opacity 255,60%multilabel NOCONTROLS%multidraw circles%# RIGHT MOUSE CLICK REMOVES LAST OBJECT
18552	bpr	3008	*/
		3009	js_function[INTERACTIVE] = 1;
		3010	if(js_function[JS_ZOOM] == 1){use_zoom = 1;} /* use noisy zoom_code, when command zoom is given before command 'multidraw' */
		3011	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3012	if( use_userdraw == 1 ){canvas_error("Only one userdraw primitive may be used in command 'userdraw' use command 'multidraw' for this...");}
		3013	use_userdraw = 2;
		3014	temp = get_string(infile,1);
		3015	fprintf(js_include_file,"\
		3016	var MMP = %d;\
		3017	if( typeof(multisnaptogrid) == 'undefined' && multisnaptogrid == null){var multisnaptogrid = new Array(MMP);for(var i=0;i<MMP;i++){multisnaptogrid[i] = %d;};};\
		3018	if( typeof(multistrokecolors) === 'undefined' && multistrokecolors == null){ var multistrokecolors = new Array(MMP);for(var i=0;i<MMP;i++){multistrokecolors[i] = '%s';};};\
		3019	if( typeof(multifillcolors) === 'undefined' && multifillcolors == null ){var multifillcolors = new Array(MMP);for(var i=0;i<MMP;i++){multifillcolors[i] = '%s';};};\
		3020	if( typeof(multistrokeopacity) === 'undefined' && multistrokeopacity == null){var multistrokeopacity = new Array(MMP);for(var i=0;i<MMP;i++){multistrokeopacity[i] = %.2f;};};\
		3021	if( typeof(multifillopacity) === 'undefined' && multifillopacity == null){var multifillopacity = new Array(MMP);for(var i=0;i<MMP;i++){multifillopacity[i] = %.2f;};};\
		3022	if( typeof(multilinewidth) === 'undefined' && multilinewidth == null){var multilinewidth = new Array(MMP);for(var i=0;i<MMP;i++){multilinewidth[i] = %d;};};\
		3023	if( typeof(multifill) === 'undefined' && multifill == null){var multifill = new Array(MMP);for(var i=0;i<MMP;i++){multifill[i] = %d;};};\
		3024	if( typeof(multidash) === 'undefined' && multidash == null){var multidash = new Array(MMP);for(var i=0;i<MMP;i++){multidash[i] = %d;};};\
		3025	if( typeof(multilabel) === 'undefined' && multilabel == null){var multilabel = [\"%s\",\"stop drawing\"];};\
		3026	if( typeof(multiuserinput) === 'undefined' && multiuserinput == null){var multiuserinput = new Array(MMP);for(var i=0;i<MMP;i++){multiuserinput[i] = '0';};};\
		3027	var arrow_head = %d;var multifont_color = '%s';var multifont_family = '%s';var forbidden_zone = [xsize+2,ysize+2];",
		3028	MAX_MULTI_PRIMITIVES,
		3029	use_snap,
		3030	stroke_color,
		3031	fill_color,
		3032	stroke_opacity,
		3033	fill_opacity,
		3034	line_width,
		3035	use_filled,
		3036	use_dashed,
		3037	str_replace(temp,",","\",\""),
		3038	arrow_head,font_color,font_family);
		3039	add_js_multidraw(temp,css_class,use_offset,int_data[MAX_MULTI_PRIMITIVES+1],crosshair_size,use_zoom);
		3040	/* no_controls == int_data[MAX_MULTI_PRIMITIVES+1] */
		3041	reply_precision = precision;
		3042	if(strstr(temp,"text") != NULL){
		3043	js_function[JS_SAFE_EVAL] = 1;
		3044	js_function[DRAW_SUBSUP] = 1;
		3045	}
		3046	if(strstr(temp,"function") != NULL){
		3047	int pp, funs = count_substring(temp, "function");
		3048	js_function[JS_SAFE_EVAL] = 1;
		3049	js_function[JS_RAWMATH] = 1;
		3050	js_function[DRAW_JSFUNCTION] = 1;
		3051	js_function[JS_MATH] = 1;
		3052	js_function[JS_PLOT] = 1;
		3053	for(pp = 0 ; pp< funs ;pp++){
		3054	add_input_jsfunction(css_class,function_label,input_cnt,stroke_color,stroke_opacity,line_width,use_dashed,dashtype[0],dashtype[1],font_size);
		3055	input_cnt++;
		3056	jsplot_cnt++;
		3057	}
		3058	fprintf(js_include_file,"if(typeof(all_jsplots) !== 'number'){var all_jsplots;};all_jsplots = %d;function redraw_userdraw(){redraw_jsplot();return;};",jsplot_cnt);
		3059	}
		3060	/* the canvasses range from 1000 ... 1008 */
		3061	if( reply_format == 0){reply_format = 29;}
		3062	reset();/* if command 'filled' / 'dashed' was given...reset all */
		3063	break;
		3064	case MULTILABEL:
		3065	/*
18556	bpr	3066	@ multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'
		3067	@ use before command <a href='#multidraw'>multidraw</a>
		3068	@ if not set all labels (e.g. the value of input type 'button') will be set by the english names for the draw_primitives (like 'point','circle'...)
		3069	@ the ''stop drawing`` button text <b>must</b> be the last item on the ''multilabel`` -list <br>for example:<br><code>multilabel punten,lijnen,Stop met Tekenen<br>multidraw points,lines</code>
		3070	@ all buttons can be ''styled`` by using command <code>css</code><br><b>note:</b>If you want to add some CSS style to the buttons...<br>the id's of the ''draw buttons`` are their english command argument<br>(e.g. id="canvasdraw_points" for the draw points button).<br>the id of the ''stop drawing`` button is "canvasdraw_stop_drawing".<br>the id of the "OK" button is ''canvasdraw_ok_button``
		3071	@ wims will not check the amount or validity of your input
		3072	@ always use the same sequence as is used for ''multidraw``
		3073	@ if you don't want the controls, and want to write your own interface, set <code>multilabel NOCONTROLS</code>
18552	bpr	3074	*/
		3075	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3076	temp = get_string(infile,1);
		3077	if( strcasestr(temp,"NOCONTROLS") ){
		3078	int_data[MAX_MULTI_PRIMITIVES+1] = 1; /int_data[25] = 1 --> 'no_controls = 1' in canvasmacro.c /
		3079	fprintf(js_include_file,"var multilabel = null;");
		3080	}
		3081	else {
		3082	int_data[MAX_MULTI_PRIMITIVES+1] = 0; /* so DO use control buttons etc */
		3083	temp = str_replace(temp,",","\",\"");
		3084	fprintf(js_include_file,"var multilabel = [\"%s\"];",temp);
		3085	}
		3086	break;
		3087	case MULTILINEWIDTH:
		3088	/*
18556	bpr	3089	@ multilinewidth linewidth_1,linewidth_2,...,linewidth_8
		3090	@ use before command <a href='#multidraw'>multidraw</a>
		3091	@ if not set all line widths will be set by a previous command ''linewidth int``
		3092	@ use these up to 7 different line widths for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
		3093	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
		3094	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3095	*/
		3096	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3097	temp = get_string(infile,1);
		3098	temp = str_replace(temp,",","\",\"");
		3099	fprintf(js_include_file,"var multilinewidth = [\"%s\"];",temp);
		3100	break;
		3101	case MULTIFILL:
		3102	/*
18556	bpr	3103	@ multifill 0,0,1,0,1,0,0
		3104	@ meaning draw objects no. 3 and 5, in the list of command ''multifill``, are filled (if the object is fillable...and not a line,segment,arrow or point...)
		3105	@ using a fillpattern: multifill 0,1,2,5,3,4<br>meaning: first object is not filled...second object is solid color filled...2=grid \| 3=hatch \| 4=diamond \| 5=dot
		3106	@ use before command <a href='#multidraw'>multidraw</a>
		3107	@ if not set all objects -except point\|points- will be set ''not filled``... unless a command <code>filled</code> was given before command <code>multifill</code>
		3108	@ only suitable for draw_primitives like ''circle \| circles``, ''triangle \| triangles``, ''rect \| rects``, ''poly[3-9] \| polys[3-9]`` and ''polygon``
		3109	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
		3110	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3111	*/
		3112	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3113	i=0;
		3114	while( ! done ){ /* get next item until EOL*/
		3115	if(i > MAX_MULTI_PRIMITIVES){canvas_error("too many multidraw primitives...read the documentation...");}
		3116	int_data[i] = (int)(get_real(infile,1)); /* 0,1,2,3,4,5 */
		3117	if(int_data[i] < 0 \|\| int_data[i] > 5 ){canvas_error("the only possible multifill arguments are: 0,1,2,3,4,5 ");}
		3118	if(int_data[i] > 1 ){use_filled = 2;js_function[DRAW_FILL_PATTERN] = 1;}/* switch to trigger pattern filling */
		3119	i++;
		3120	}
		3121	fprintf(js_include_file,"var multifill = %s ;",data2js_array(int_data,i-1));
		3122	break;
		3123	case MULTIFILLCOLORS:
		3124	/*
18556	bpr	3125	@ multifillcolors color_name_1,color_name_2,...,color_name_8
		3126	@ use before command <a href='#multidraw'>multidraw</a>
		3127	@ if not set all fillcolors (for circle \| triangle \| poly[3-9] \| closedpoly ) will be ''stroke_color``, ''fill_opacity``
		3128	@ use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_n</code>
18627	bpr	3129	@ wims will <b>not</b> check if the number of colors matches the amount of draw primitives...
18556	bpr	3130	@ always use the same sequence as is used for ''multidraw``
18627	bpr	3131	@ can also be used with command <a href='#userdraw'>userdraw clickfill,color</a> when more than one fillcolor is wanted.<br>in that case use for example <a href='#replyformat'>replyformat 10</a> ... reply=x1:y1:color1,x2:y2:color2...<br>the colors will restart at the first color, when there are more fill-clicks than multi-fill-colors<br>if more control over the used colors is wanted, see command <a href='#colorpalette'>colorpalette color1,color2...</a>
18552	bpr	3132	*/
		3133	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3134	fprintf(js_include_file,"var multifillcolors = [");
		3135	while( ! done ){
		3136	temp = get_color(infile,1);
		3137	fprintf(js_include_file,"\"%s\",",temp);
		3138	}
		3139	fprintf(js_include_file,"\"0,0,0\"];");/* add black to avoid trouble with dangling comma... */
		3140	break;
		3141	case MULTIFILLOPACITY:
		3142	/*
18556	bpr	3143	@ multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8
		3144	@ float values 0 - 1 or integer values 0 - 255
		3145	@ use before command <a href='#multidraw'>multidraw</a>
		3146	@ if not set all fill opacity_ will be set by previous command <code>opacity int,int</code> and keyword ''filled``
		3147	@ use these up to 7 different stroke opacities for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_y</code>
		3148	@ wims will not check the amount or validity of your input
		3149	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3150	*/
		3151	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3152	temp = get_string(infile,1);
		3153	temp = str_replace(temp,",","\",\"");
		3154	fprintf(js_include_file,"var multifillopacity = [\"%s\"];",temp);
		3155	break;
		3156	case MULTISNAPTOGRID:
		3157	/*
18556	bpr	3158	@ multisnaptogrid 0,1,1
		3159	@ alternative: multisnap
		3160	@ meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <code>multifill points,circle,segments</code>, will snap to the xy-grid (default 1 in x/y-coordinate system: see command <a href='#snaptogrid'>snaptogrid</a>)
		3161	@ freehand drawing...specify precision for reply: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code>
		3162	@ only the xy-values snap_to_grid: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code>
		3163	@ only the x-values snap_to_grid: all objects snap to x-grid <code>multisnaptogrid 2,2,2,...</code>
		3164	@ only the y-values snap_to_grid: all objects snap to y-grid <code>multisnaptogrid 3,3,3,...</code>
		3165	@ if <a href='#snaptopoints'>snaptopoints</a> is defined: all objects snap to points <code>multisnaptogrid 4,4,4,...</code> <br><b>make sure to define the points to snap on...</b> use command <a href='#snaptopoints'>snaptopoints</a>
		3166	@ <code>multisnaptogrid 0,1,2,3,4<br>multidraw text,arrow,line,circle,image</code><br>''text`` is free hand, ''arrow`` is snap to grid, ''line`` is snap to x-grid, ''circle`` is snap to y-grid, ''image`` is snap to points defined by command <a href='#snaptopoints'>snaptopoints</a>
		3167	@ use before command <a href='#multidraw'>multidraw</a>
		3168	@ attention: if not set all objects will be set ''no snap``... unless a generic command ''snaptogrid`` was given before command ''multidraw``
		3169	@ commands <a href='#xsnaptogrid'>xsnaptogrid</a>, <a href='#ysnaptogrid'>ysnaptogrid</a>, <a href='#snaptofunction'>snaptofunction</a> are <b>not</b> supported amd only functional for command <a href='#userdraw'>userdraw</a>
		3170	@ always use the same sequence as is used for ''multidraw``
		3171	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
18552	bpr	3172	*/
		3173	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3174	temp = get_string(infile,1);
		3175	fprintf(js_include_file,"var multisnaptogrid = [%s];",temp);
		3176	reset();/* if command 'dashed' was given...reset to not-dashed */
		3177	break;
		3178	case MULTISTROKECOLORS:
		3179	/*
18556	bpr	3180	@ multistrokecolors color_name_1,color_name_2,...,color_name_8
		3181	@ use before command <a href='#multidraw'>multidraw</a>
		3182	@ if not set all colors will be ''stroke_color``, ''stroke_opacity``
		3183	@ use these up to 6 colors for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
18627	bpr	3184	@ wims will <b>not</b> check if the number of colors matches the amount of draw primitives...
18556	bpr	3185	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3186	*/
		3187	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3188	fprintf(js_include_file,"var multistrokecolors = [");
		3189	while( ! done ){
		3190	temp = get_color(infile,1);
		3191	fprintf(js_include_file,"\"%s\",",temp);
		3192	}
		3193	fprintf(js_include_file,"\"0,0,0\"];");/* add black to avoid trouble with dangling comma... */
		3194	break;
		3195	case MULTISTROKEOPACITY:
		3196	/*
18556	bpr	3197	@ multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7
		3198	@ float values 0 - 1 or integer values 0 - 255
		3199	@ use before command <a href='#multidraw'>multidraw</a>
		3200	@ if not set all stroke opacity_ will be set by previous command <code>opacity int,int</code>
		3201	@ use these up to 7 different stroke opacities for the draw primitives used by command <code>multidraw obj_type_1,obj_type_2...obj_type_7</code>
		3202	@ wims will not check the amount or validity of your input
		3203	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3204	*/
		3205	if( use_tooltip == 1){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3206	temp = get_string(infile,1);
		3207	temp = str_replace(temp,",","\",\"");
		3208	fprintf(js_include_file,"var multistrokeopacity = [\"%s\"];",temp);
		3209	break;
		3210	case MULTIUSERINPUT:
		3211	/*
		3212	@ multiuserinput 0,1,1,0
		3213	@ alternative: multiinput
18572	bpr	3214	@ meaning, when the command ''multidraw`` is used <code>multidraw circles,points,lines,triangles</code><br>objects ''points`` and ''lines`` may additionally be ''drawn`` by direct input (inputfields)<br>all other objects must be drawn with a mouse
18552	bpr	3215	@ in case of circle \| circles a third inputfield for Radius (R) is added. The radius must be in the x/y coordinate system (x-range) and <b>not</b> in pixels...students don't think in pixels.<br>note: R-values will not snap-to-grid
		3216	@ in case of line(s) \| segment(s) \| arrow(s) the user should write <b>x1:y1</b> in the first inputfield and <b>x2:y2</b> in the second.<br>These ''hints`` are pre-filled into the input field.<br>Other coordinate delimiters are '';`` and '',`` e.g. <b>x1;y1</b> or <b>x1,y1</b>.<br>An error message (alert box) will popup when things are not correctly...
		3217	@ in case of a triangle \| poly3, three inputfields are provided.
		3218	@ in case of ''text`` and ''multiuserinput=1, 3`` inputfields will be shown: ''x,y,text``
		3219	@ in case of ''text`` and ''multiuserinput=0, 1`` inputfield will be shown: text ... a mouse click will place the text on the canvas.
		3220	@ may be styled using command <a href="#css">css</a>
		3221	@ an additional button ''stop drawing`` may be used to combine userbased drawings with ''drag&and;drop`` or ''onclick`` elements
		3222	@ when exercise if finished (status=done) the buttons will not be shown.<br>To override this default behaviour use command / keyword ''status``
		3223	@ use before command <a href='#multidraw'>multidraw</a>
		3224	@ always use the same sequence as is used for ''multidraw``
		3225	*/
		3226	/* simple rawmath and input check */
		3227	js_function[JS_SAFE_EVAL] = 1;
		3228	temp = get_string(infile,1);
		3229	temp = str_replace(temp,",","\",\"");
		3230	fprintf(js_include_file,"var multiuserinput = [\"%s\"];",temp);
		3231	break;
		3232	case NORESET:
		3233	/*
		3234	@ noreset
		3235	@ alternative: killreset
		3236	@ keyword
		3237	@ may come in handy if canvas script code is generated using loops
		3238	@ if used the following properties will remain to be valid<br><ul><li>filled</li><li>dash settings</li><li>onclick or drag settings</li><li>centering or offset</li></ul>
		3239	@ if used again, these properies will be reset to the default values and normal behaviour is continued (e.g. the above properties will be reset after 'use' on a canvas object)
		3240	@ etc etc
		3241	@ commands <a href='#slider'>slider</a>, <a href='#linear'>linear</a>, <a href='#rotate'>rotate</a>, <a href='#translate'>translate</a>, <a href='#affine'>affine</a> are always active until the 'kill' commands are given: <br><a href='#killlinear'>killlinear</a>, <a href='#killrotate'>killrotate</a>, <a href='#killtranslate'>killtranslate</a> and <a href='#killaffine'>killaffine</a>
		3242	@ commands like 'opacity', 'linewidth', 'fontsize', 'fontfamily' are only changed when redefined again
		3243	@%noreset%size 400,400%xrange -10,10%yrange -10,10%noreset%drag xy%linewidth 4%filled%rect -4,4,-2,2,blue%triangle -3,-3,0,0,1,-5,green%circle 0,0,50,orange%noreset%rect 2,4,4,2,blue
		3244	@%noreset_oefgraduation%size 800,100%xrange 0,11%yrange -1,1%hline 0,0,black%parallel 0,0,0,0.5,1,0,11,blue%noreset%onclick%centered%text black,1,0.6,large,20%text black,2,0.6,large,30%text black,3,0.6,large,40%text black,4,0.6,large,50%text black,5,0.6,large,60%text black,6,0.6,large,70%text black,7,0.6,large,80%text black,8,0.6,large,90%text black,9,0.6,large,100%text black,10,0.6,large,110
		3245	*/
		3246	if(no_reset == FALSE){no_reset = TRUE;}else{no_reset = FALSE;reset();}
		3247	break;
		3248	case NOXAXIS:
		3249	/*
		3250	@ noxaxis
		3251	@ keyword
		3252	@ if set, the automatic x-axis numbering will be ignored
		3253	@ use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="#grid">grid</a>)
		3254	@ to be used before command grid (see <a href="#grid">command grid</a>)
		3255	*/
		3256	fprintf(js_include_file,"x_strings = {};x_strings_up = [];\n");
		3257	use_axis_numbering = -1;
		3258	break;
		3259	case NOYAXIS:
		3260	/*
		3261	@ noyaxis
		3262	@ keyword
		3263	@ if set, the automatic y-axis numbering will be ignored
		3264	@ use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="#grid">grid</a>)
		3265	@ to be used before command grid (see <a href="#grid">command grid</a>)
		3266	*/
		3267	fprintf(js_include_file,"y_strings = {};\n");
		3268	break;
		3269	case NUMBERLINE:
		3270	/*
		3271	@ numberline x0,x1,xmajor,xminor,y0,y1
		3272	@ numberline is using xrange/yrange system for all dimensions
		3273	@ multiple numberlines are allowed ; combinations with command <a href='#grid'>grid</a> is allowed; multiple commands <a href='#xaxis'>xaxis numbering</a> are allowed
		3274	@ x0 is start x-value in xrange
		3275	@ x1 is end x-value in xrange
		3276	@ xmajor is step for major division
		3277	@ xminor is divisor of xmajor; using small (30% of major tick) tick marks: this behaviour is ''hardcoded``
		3278	@ is xminor is an even divisor, an extra tickmark (60% of major tick) is added to the numberline: this behaviour is ''hardcoded``
		3279	@ y0 is bottom of numberline; y1 endpoint of major tics
		3280	@ use command <a href="#linewidth">linewidth</a> to control appearance
		3281	@ use <a href="#strokecolor">strokecolor</a> and <a href="#opacity">opacity</a> to controle measure line
		3282	@ for all ticks linewidth and color / opacity are identical.
		3283	@ if command <a href="#xaxis">xaxis</a> or <a href="#xaxisup">xaxisup</a> is not defined, the labeling will be on major ticks: x0...x1
		3284	@ use <a href="#fontfamily">fontfamily</a> and <a href="#fontcolor">fontcolor</a> to control fonts settings
		3285	@ may be used together with <a href="#userdraw">userdraw</a>, <a href="#multidraw">multidraw</a> and <a href="#drag">user drag</a> command family for the extra object drawn onto the numberline
		3286	@ <a href="#snaptogrid">snaptogrid, snaptopoints etc</a> and <a href="#zoom">zooming and panning</a> is supported
		3287	@ onclick and dragging of the numberline are not -yet- supported
		3288	@ note: in case of multiple numberlines, make sure the numberline without special x-axis numbering (e.g. ranging from xmin to xmax) comes first !
		3289	@%numberline%size 400,400%xrange -10,10%yrange -10,10%precision 1%strokecolor black%numberline -8,8,1,6,-4,-3.5%strokecolor red%xaxis -4:AA:-2:BB:2:CC:4:DD%numberline -8,8,1,2,4,4.5%strokecolor green%xaxisup -4:AAA:-2:BBB:2:CCC:4:DDD%numberline -8,8,1,3,2,2.5%strokecolor blue%xaxis -4:AAAA:-2:BBBB:2:CCCC:4:DDDD%numberline -8,8,1,4,0,0.5%strokecolor brown%xaxis -4:AAAAA:-2:BBBBB:2:CCCCC:4:DDDDD%numberline -8,8,1,5,-2,-1.5%zoom red
		3290	*/
		3291	js_function[DRAW_NUMBERLINE] = 1;
		3292	for(i=0;i<6;i++){
		3293	switch(i){
		3294	case 0: double_data[0] = get_real(infile,0);break;/* xmin */
		3295	case 1: double_data[1] = get_real(infile,0);break;/* xmax */
		3296	case 2: double_data[2] = get_real(infile,0);break;/* xmajor */
		3297	case 3: double_data[3] = get_real(infile,0);break;/* xminor */
		3298	case 4: double_data[4] = get_real(infile,0);break;/* ymin */
		3299	case 5: double_data[5] = get_real(infile,1);/* ymax */
		3300	/*
		3301	var draw_numberline%d = function(canvas_type,xmin,xmax,xmajor,xminor,ymin,ymax,linewidth,strokecolor,strokeopacity,fontfamily,fontcolor);
		3302	*/
		3303	fprintf(js_include_file,"snap_x = %f;snap_y = %f;",double_data[2] / double_data[3],double_data[5] - double_data[4] );
18557	bpr	3304	tmp_buffer=my_newmem(MAX_BUFFER);
		3305	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "\ndraw_numberline(%d,%d,%f,%f,%f,%f,%f,%f,%d,\"%s\",%f,\"%s\",\"%s\",%d); ",NUMBERLINE_CANVAS+numberline_cnt,use_axis_numbering,double_data[0],double_data[1],double_data[2],double_data[3],double_data[4],double_data[5],line_width,stroke_color,stroke_opacity,font_family,font_color,precision));
18552	bpr	3306	add_to_buffer(tmp_buffer);
		3307	numberline_cnt++;
		3308	break;
		3309	default:break;
		3310	}
		3311	}
		3312	reset();
		3313	break;
		3314	case OBABEL:
		3315	/*
		3316	@ obabel x,y,type input,molecule smiles-code or file location, extra arguments,extra arguments,...
		3317	@ will call the ''obabel`` program, if installed.
		3318	@ output will be an svg file
		3319	@ see documentation of obabel for special keys
		3320	@ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
		3321	@ command <a href='#rotate'>rotate</a> will rotate the object
		3322	@ can be set onclick: <code>javascript:read_dragdrop();</code> will return click numbers of mathml-objects<br>if 4 clickable object are drawn, the reply could be 1,0,1,0 ... meaning clicked on the first and third object
		3323	@ can be set draggable: <code>javascript:read_dragdrop();</code> will return all coordinates in the same order as the canvas script: unmoved object will have their original coordinates...
		3324	@ snaptogrid is supported...snaptopoints will work, but use with care...due to the primitive dragging<br>technically: the dragstuff library is not used...the mathml is embedded in a new div element and not in the html5-canvas
		3325	@ external files may be loaded if they are present on the server or in the modules <br>for example:<br> obabel 0,0,mol,$module_dir/caffeine.mol,-P100,-xb none
		3326	@%obabel_smi%size 400,400%xrange -10,10%yrange -10,10%fillcolor green%drag xy%centered%obabel 0,0,smi,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h
		3327	*/
		3328	js_function[DRAW_XML] = 1;
		3329	for(i=0;i<4;i++){
		3330	switch(i){
		3331	case 0: double_data[0]=get_real(infile,0);break; /* x in x/y-range coord system -> pixel width */
		3332	case 1: double_data[1]=get_real(infile,0);break; /* y in x/y-range coord system -> pixel height */
		3333	case 2: URL = get_string_argument(infile,0);break;
		3334	case 3:
		3335	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3336	temp = getSVGMOL(URL,get_string(infile,1));
		3337	decimals = find_number_of_digits(precision);
		3338	if(use_affine == TRUE ){ transform(2,2);}
		3339	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		3340	int_data[0] = x2px(double_data[0]);
		3341	int_data[1] = y2px(double_data[1]);
		3342	if( use_slider != -1 && onclick == 0 ){ onclick = 3;}/* no drag&onclick but slideable */
		3343	if( use_slider != -1 && drag_type > 0 ){ onclick = 5;}/* slider+drag*/
		3344	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	3345	tmp_buffer=my_newmem(MAX_BUFFER);
		3346	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "var draw_xml%d = {id:%d,type:'svg',x:[%d],y:[%d],mathml:\"%s\",drag_type:%d,onclick:%d,object_cnt:%d,stroke_color:\"%s\",stroke_opacity:%.2f,fill_color:\"%s\",fill_opacity:%.2f,use_center:%d,use_snap:%d,angle:%f,fontfamily:\"%s\",transform:%s,use_affine:%d,offset:[0,0],use_slider:%s,rotation_center:%s,once:true};slidergroup[%d] = null;draw_xml(draw_xml%d);\n",drawxml_cnt,drawxml_cnt,int_data[0],int_data[1],temp,drag_type,onclick,object_cnt,stroke_color,stroke_opacity,fill_color,fill_opacity,int_data[2],use_snap,angle,font_family,doubledata2js_array(affine_matrix,6,decimals),use_affine,my_sliders,rotation_center,object_cnt,drawxml_cnt));
18552	bpr	3347	add_to_buffer(tmp_buffer);
		3348	if(onclick != 0 ){object_cnt++;}
		3349	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		3350	break;
		3351	default:break;
		3352	}
		3353	}
		3354	reset();
		3355	break;
		3356	case OPACITY:
		3357	/*
		3358	@ opacity [0-255],[0-255]
		3359	@ opacity [0.0 - 1.0],[0.0 - 1.0]
		3360	@ alternative: transparent
		3361	@ first item is stroke opacity, second is fill opacity
		3362	@%opacity%size 400,400%xrange -10,10%yrange -10,10%opacity 255,0%fcircle -10,0,100,blue%opacity 250,50%fcircle -5,0,100,blue%opacity 200,100%fcircle 0,0,100,blue%opacity 150,150%fcircle 5,0,100,blue%opacity 100,200%fcircle 10,0,100,blue
		3363	*/
		3364	for(i = 0 ; i<2;i++){
		3365	switch(i){
		3366	case 0: double_data[0]= get_real(infile,0);break;
		3367	case 1: double_data[1]= get_real(infile,1);break;
		3368	default: break;
		3369	}
		3370	}
		3371	if( double_data[0] > 255 \|\| double_data[1] > 255 \|\| double_data[0] < 0 \|\| double_data[1] < 0 ){ canvas_error("opacity [0 - 255], [0 - 255] ");}/* typo or non-RGB ? */
18608	bpr	3372	if( double_data[0] > 1 ){ stroke_opacity = (double) (0.0039215double_data[0]); }else{ stroke_opacity = double_data[0];} / 0.0 - 1.0 */
		3373	if( double_data[1] > 1 ){ fill_opacity = (double) (0.0039215double_data[1]); }else{ fill_opacity = double_data[1];} / 0.0 - 1.0 */
18552	bpr	3374	break;
18608	bpr	3375	case STROKEOPACITY:
		3376	/*
		3377	@ strokeopacity [0-255]
		3378	@ strokeopacity [0.0 - 1.0]
		3379	@%strokeopacity%size 400,400%xrange -10,10%yrange -10,10%fillopacity 120%strokeopacity 255%circle -10,0,100,blue%strokeopacity 100%circle -5,0,100,blue%strokeopacity 50%circle 0,0,100,blue
		3380	*/
		3381	double_data[0]= get_real(infile,1);
		3382	if( double_data[0] > 255 \|\| double_data[0] < 0 ){ canvas_error("opacity [0 - 255] ");}/* typo or non-RGB ? */
		3383	if( double_data[0] > 1 ){ stroke_opacity = (double) (0.0039215double_data[0]); }else{ stroke_opacity = double_data[0];} / 0.0 - 1.0 */
		3384	break;
		3385	case FILLOPACITY:
		3386	/*
		3387	@ fillopacity [0-255]
		3388	@ fillopacity [0.0 - 1.0]
		3389	@%fillopacity%size 400,400%xrange -10,10%yrange -10,10%strokeopacity 100%%fillopacity 0%fcircle -10,0,100,blue%fillopacity 50%fcircle -5,0,100,blue%fillopacity 100%fcircle 0,0,100,blue%fillopacity 150%fcircle 5,0,100,blue%fillopacity 200%fcircle 10,0,100,blue
		3390	*/
		3391	double_data[0]= get_real(infile,1);
		3392	if( double_data[0] > 255 \|\| double_data[0] < 0 ){ canvas_error("fillopacity [0 - 255] ");}/* typo or non-RGB ? */
		3393	if( double_data[0] > 1 ){ fill_opacity = (double) (0.0039215double_data[0]); }else{ fill_opacity = double_data[0];} / 0.0 - 1.0 */
		3394	break;
18552	bpr	3395	case ONCLICK:
		3396	/*
18556	bpr	3397	@ onclick
		3398	@ keyword (no arguments required)
		3399	@ if the next object is clicked, its ''object onclick_or_drag sequence number`` in fly script is returned by <code>javascript:read_canvas();</code>
		3400	@ onclick seqeuence numbering starts at ''0``, e.g. if there are 6 objects set onclick, the first onclick object will have id-number ''0``, the last id-number ''5``
		3401	@ line based objects will show an increase in line width<br>font based objects will show the text in ''bold`` when clicked.
		3402	@ the click zone (accuracy) is determined by 2× the line width of the object
		3403	@ onclick and <a href="#drag">drag x\|y\|xy</a> may be combined in a single flyscript (although a single object can <b>not</b> be onclick and draggable at the same time...)
		3404	@ note: not all objects may be set onclick
		3405	@%onclick%size 400,400%xrange -10,10%yrange -10,10%opacity 255,60%linewidth 3%onclick%fcircles blue,-3,3,1,1,2,2,3,1,1%onclick%ftriangles red,-4,-4,-4,0,-3,-2,0,0,4,0,2,-4%onclick%frects green,-4,4,-2,2,1,-1,3,-4
18552	bpr	3406	*/
		3407	fprintf(js_include_file,"use_dragdrop_reply = true;");
		3408	onclick = 1;
		3409	use_dragstuff=2;
		3410	js_function[INTERACTIVE] = 1;
		3411	break;
		3412	case PARALLEL:
		3413	/*
18556	bpr	3414	@ parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]
		3415	@ affine transformations should be identical to flydraw
		3416	@ in case of <a href='#rotate'>rotation</a> or <a href='#affine'>affine transformation </a>, command parallel will produce <em>n</em> individual segments, and these may be set ''onclick`` or ''drag xy`` individually.
		3417	@ in case of <em>no rotation or transformations</em> the lines can not be set ''onclick`` or ''drag xy``.
		3418	@ note: a large number of parallel lines (large <em>n</em>) may result in a canvasdraw error (...simplify your script...it produces too many lines...)
		3419	@%parallel_click%size 400,400%xrange -10,10%yrange -10,10%parallel -5,5,-4,-5,0.25,0,40,red%rotate 45%onclick%parallel -5,5,-4,-5,0.25,0,40,blue
		3420	@%parallel%size 400,400%xrange -10,10%yrange -10,10%parallel -5,5,-4,-5,0.25,0,40,red
18552	bpr	3421	*/
		3422	decimals = find_number_of_digits(precision);
		3423	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3424	if( use_rotate == TRUE \|\| use_affine == TRUE ){
		3425	for( i = 0;i < 8; i++ ){
		3426	switch(i){
		3427	case 0: double_data[0] = get_real(infile,0);break; /* x1-values */
		3428	case 1: double_data[1] = get_real(infile,0);break; /* y1-values */
		3429	case 2: double_data[2] = get_real(infile,0);break; /* x2-values */
		3430	case 3: double_data[3] = get_real(infile,0);break; /* y2-values */
		3431	case 4: double_data[4] = get_real(infile,0);break; /* xv */
		3432	case 5: double_data[5] = get_real(infile,0);break; /* yv */
		3433	case 6: int_data[0] = (int) (get_real(infile,0));break; /* n */
		3434	case 7: stroke_color=get_color(infile,1);break;/* name or hex color */
		3435	default: break;
		3436	}
		3437	}
		3438	double_data[6] = double_data[0]; /* x1 */
		3439	double_data[7] = double_data[1]; /* y1 */
		3440	double_data[8] = double_data[2]; /* x2 */
		3441	double_data[9] = double_data[3]; /* y2 */
		3442	for(i = 0 ; i < int_data[0] ; i++){
		3443	double_data[0] = double_data[6] + i*double_data[4];
		3444	double_data[1] = double_data[7] + i*double_data[5];
		3445	double_data[2] = double_data[8] + i*double_data[4];
		3446	double_data[3] = double_data[9] + i*double_data[5];
		3447	if(use_rotate == TRUE ){ rotate(4,angle,rotationcenter,2);}
		3448	if(use_affine == TRUE ){ transform(4,2);}
18557	bpr	3449	tmp_buffer=my_newmem(MAX_BUFFER);
		3450	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3451	add_to_buffer(tmp_buffer);
		3452	if(onclick != 0){object_cnt++;}
		3453	}
		3454	dragstuff[4] = 1;
		3455	}
		3456	else /* use the old parallel version: calculations in javascript */
		3457	{
		3458	for( i = 0;i < 8; i++ ){
		3459	switch(i){
		3460	case 0: double_data[0] = get_real(infile,0);break; /* x1-values */
		3461	case 1: double_data[1] = get_real(infile,0);break; /* y1-values */
		3462	case 2: double_data[2] = get_real(infile,0);break; /* x2-values */
		3463	case 3: double_data[3] = get_real(infile,0);break; /* y2-values */
		3464	case 4: double_data[4] = xmin + get_real(infile,0);break; /* xv */
		3465	case 5: double_data[5] = ymax + get_real(infile,0);break; /* yv */
		3466	case 6: int_data[0] = (int) (get_real(infile,0));break; /* n */
		3467	case 7: stroke_color=get_color(infile,1);/* name or hex color */
18557	bpr	3468	tmp_buffer=my_newmem(MAX_BUFFER);
		3469	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,11,[%.f,%.f,%.f],[%.f,%.f,%.f],[%d,%d,%d],[%d,%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[4],decimals,double_data[1],decimals,double_data[3],decimals,double_data[5],int_data[0],int_data[0],int_data[0],int_data[0],int_data[0],int_data[0],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3470	add_to_buffer(tmp_buffer);
		3471	if(onclick != 0){object_cnt++;}
		3472	break;
		3473	default: break;
		3474	}
		3475	dragstuff[11] = 1;
		3476	}
		3477	}
		3478	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3479	reset();
		3480	break;
		3481	case PLOTSTEPS:
		3482	/*
18556	bpr	3483	@ plotsteps a_number
		3484	@ default 150
		3485	@ only used for commands <a href="#curve">curve / plot</a> and <a href="#levelcurve">levelcurve</a>
		3486	@ use with care !
18552	bpr	3487	*/
		3488	plot_steps = (int) (get_real(infile,1));
		3489	break;
		3490	case POINT:
		3491	/*
		3492	@ point x,y,color
		3493	@ draw a single point at (x;y) in color 'color'
		3494	@ use command <code>linewidth int</code> to adjust size
		3495	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3496	@ will not resize on zooming (command <code>circle x,y,r,color</code> will resize on zooming)
		3497	@ attention: in case of command <a href="#rotate">rotate angle</a> a point has rotation center (0:0) in x/y-range
		3498	@%point%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%linewidth 1%onclick%point 0,0,red%linewidth 2%onclick%point 1,1,blue%linewidth 3%onclick%point 3,3,green%linewidth 4%point 4,4,orange
		3499	*/
		3500	for(i=0;i<3;i++){
		3501	switch(i){
		3502	case 0: double_data[0] = get_real(infile,0);break; /* x */
		3503	case 1: double_data[1] = get_real(infile,0);break; /* y */
		3504	case 2: stroke_color = get_color(infile,1);/* name or hex color */
		3505	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		3506	if(use_affine == TRUE ){ transform(2,2);}
		3507	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3508	decimals = find_number_of_digits(precision);
18557	bpr	3509	tmp_buffer=my_newmem(MAX_BUFFER);
		3510	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,2,[%.f],[%.f],[%.2f],[%d],%.2f,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],1.5line_width,line_width,1.5line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3511	add_to_buffer(tmp_buffer);
		3512	/* object_cnt++; */
		3513	if(onclick != 0){object_cnt++;}
		3514	break;
		3515	default: break;
		3516	}
		3517	}
		3518	dragstuff[2] = 1;
		3519	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3520	reset();
		3521	break;
		3522	case POINTS:
		3523	/*
		3524	@ points color,x1,y1,x2,y2,...,x_n,y_n
		3525	@ draw multiple points at given coordinates in color 'color'
		3526	@ use command <code>linewidth int</code> to adjust size
		3527	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		3528	@ attention: in case of command <a href="#rotate">rotate angle</a> the points have rotation center (0:0) in x/y-range
		3529	@%points_1%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%snaptogrid%linewidth 1%drag xy%points red,0,0,1,1,2,2,3,3%drag x%points blue,0,1,1,2,2,3,3,4
		3530	@%points_2%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%linewidth 1%onclick%points red,0,0,1,1,2,2,3,3%onclick%points blue,0,1,1,2,2,3,3,4
		3531	*/
		3532	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3533	fill_color = stroke_color;
		3534	i=0;
		3535	while( ! done ){ /* get next item until EOL*/
		3536	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3537	if(i%2 == 0 ){
		3538	double_data[i] = get_real(infile,0); /* x */
		3539	}
		3540	else {
		3541	double_data[i] = get_real(infile,1); /* y */
		3542	}
		3543	i++;
		3544	}
		3545	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3546	if(use_affine == TRUE ){ transform(i-1,2);}
		3547	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3548	decimals = find_number_of_digits(precision);
		3549	for(c = 0 ; c < i-1 ; c = c+2){
18557	bpr	3550	tmp_buffer=my_newmem(MAX_BUFFER);
		3551	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,2,[%.f],[%.f],[%.2f],[%d],%.2f,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],1.5line_width,line_width,1.5line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3552	add_to_buffer(tmp_buffer);
		3553	/* object_cnt++; */
		3554	if(onclick != 0){object_cnt++;}
		3555	}
		3556	dragstuff[2] = 1;
		3557	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3558	reset();
		3559	break;
		3560	case POLY:
		3561	/*
		3562	@ poly color,x1,y1,x2,y2...x_n,y_n
		3563	@ polygon color,x1,y1,x2,y2...x_n,y_n
		3564	@ draw closed polygon
		3565	@ use command ''fpoly`` to fill it or use keyword <a href='#filled'>filled</a>
		3566	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3567	@%polygon_1%size 400,400%xrange -10,10%yrange -10,10%opacity 255,25%fillcolor orange%filled%linewidth 2%drag xy%snaptogrid%poly blue,0,0,1,3,3,1,2,4,-1,3
		3568	@%polygon_2%size 400,400%xrange -10,10%yrange -10,10%opacity 255,25%fillcolor orange%filled%linewidth 1%onclick%poly green,0,0,1,3,3,1,2,4,-1,3
		3569	*/
		3570	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3571	i=0;
		3572	c=0;
		3573	while( ! done ){ /* get next item until EOL*/
		3574	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3575	for( c = 0 ; c < 2; c++){
		3576	if(c == 0 ){
		3577	double_data[i] = get_real(infile,0);
		3578	i++;
		3579	}
		3580	else {
		3581	double_data[i] = get_real(infile,1);
		3582	i++;
		3583	}
		3584	}
		3585	}
		3586	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3587	if(use_affine == TRUE ){ transform(i-1,2);}
		3588	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
8386	schaersvoo	3589
18552	bpr	3590	/* draw path: closed & optional filled */
		3591	decimals = find_number_of_digits(precision);
18557	bpr	3592	tmp_buffer=my_newmem(MAX_BUFFER);
		3593	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,5,%s,[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,double_xy2js_array(double_data,i,decimals),line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3594	add_to_buffer(tmp_buffer);
		3595	if(onclick != 0){object_cnt++;}
		3596	reset();
		3597	dragstuff[5] = 1;
		3598	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3599	break;
		3600	case POLYLINE:
		3601	/*
		3602	@ polyline color,x1,y1,x2,y2...x_n,y_n
		3603	@ brokenline color,x1,y1,x2,y2...x_n,y_n
		3604	@ path color,x1,y1,x2,y2...x_n,y_n
		3605	@ remark: there is <b>no</b> command polylines \| brokenlines \| paths ... just use multiple commands <code>polyline, x1,y1,x2,y2...x_n,y_n</code>
		3606	@ remark: there are commands <code>userdraw path(s),color</code> and <code>userdraw polyline,color</code>... these are two entirely different things ! the path(s) userdraw commands may be used for freehand drawing(s)<br>the polyline userdraw command is analogue to this polyline\|brokenline command
		3607	@ the command interconnects the points in the given order with a line (canvasdraw will not close the drawing: use command <a href="#poly">polygon</a> for this)
		3608	@ use command <a href='#segments'>segments</a> for a series of segments. These may be clicked/dragged individually
		3609	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3610	@%polyline_1%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag xy%snaptogrid%polyline blue,0,0,1,3,3,1,2,4,-1,3
		3611	@%polyline_2%size 400,400%xrange -10,10%yrange -10,10%linewidth 1%onclick%polyline green,0,0,1,3,3,1,2,4,-1,3
		3612	*/
11806	schaersvoo	3613
18552	bpr	3614	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3615	i=0;
		3616	c=0;
		3617	while( ! done ){ /* get next item until EOL*/
		3618	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3619	for( c = 0 ; c < 2; c++){
		3620	if(c == 0 ){
		3621	double_data[i] = get_real(infile,0);
		3622	i++;
		3623	}
		3624	else {
		3625	double_data[i] = get_real(infile,1);
		3626	i++;
		3627	}
		3628	}
		3629	}
11806	schaersvoo	3630
18552	bpr	3631	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3632	if(use_affine == TRUE ){ transform(i-1,2);}
		3633	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	3634
18552	bpr	3635	/* draw path: not closed & not filled */
		3636	decimals = find_number_of_digits(precision);
18557	bpr	3637	tmp_buffer=my_newmem(MAX_BUFFER);
		3638	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,%s,[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,double_xy2js_array(double_data,i,decimals),line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3639	add_to_buffer(tmp_buffer);
		3640	if(onclick != 0){object_cnt++;}
		3641	/* object_cnt++;*/
		3642	reset();
		3643	dragstuff[4] = 1;
		3644	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3645	break;
		3646	case POPUP:
		3647	/*
18556	bpr	3648	@ popup
		3649	@ keyword (no arguments)
		3650	@ if fly-script starts with keyword ''popup``, the canvas image will be exclusively in a popup window (xsize px × ysize px)
		3651	@ if keyword ''popup`` is used after command <code>size xsize,ysize</code> the canvas will also be displayed in a popup window with size ''xsize × ysize``
		3652	@ the popup window will be embedded into the page as a normal image, when ''status=done``; override with keyword <a href="#status">nostatus</a>
		3653	@ to access the read_canvas and read_dragdrop functions in a popup window, use:<br> <code> function read_all(){<br> if( typeof popup !== 'undefined' ){<br> var fun1 = popup['read_dragdrop'+canvas_scripts[0]];<br>var fun2 = popup['read_canvas'+canvas_scripts[0]];<br> popup.close();<br> return "dragdrop="+fun1()+"\\ncanvas="+fun2();<br> };</code>
		3654	@ to set a canvasdraw produced <a href="#clock">clock</a> or multiple clocks...use something like: <code>popup.set_clock(clock_id,type,diff);</code> as js-function for a button (or something else) in your document page.<br>where in <b>clock_id</b> starts with 0 for the first clock<br><b>type</b> is 1 for Hours,2 for Minutes and 3 for Seconds<br><b>diff</b> is the increment (positive or negative) per click
		3655	@%popup%popup%size 400,400%xrange -2pi,2pi%yrange -5,5%precision 0%axis%axisnumbering%opacity 100,190%grid 1,1,grey,2,2,5,black%linewidth 4%fillcolor blue%trange -pi,pi%animate%linewidth 1%precision 1000%jsplot red,4cos(2x),2sin(3x-pi/6)%strokecolor green%functionlabel H(x)=%userinput function
18552	bpr	3656	*/
		3657	use_tooltip = 2;
		3658	break;
		3659	case PROTRACTOR:
		3660	/*
18556	bpr	3661	@ protractor x,y,x_width,type,mode,use_a_scale
		3662	@ x,y are the initial location
		3663	@ x_width: give the width in x-coordinate system (e.g. not in pixels !)
		3664	@ type = 1: a triangle range 0 - 180<br>type = 2: a circle shape 0 - 360
		3665	@ mode: use -1 to set the protractor interactive (mouse movement of protractor)<br>use mode = '0° - 360°' to set the protractor with a static angle of some value
		3666	@ if the value of the user_rotation angle is to be shown...use command <a href='#display'>display degree,color,fontsize</a><a href='#display'>display radian,color,fontsize</a>
		3667	@ use_scale = 1: the protractor will have some scale values printed; use_scale=0 to disable
		3668	@ the rotating direction of the mouse around the protractor determines the clockwise/ counter clockwise rotation of the protractor...
		3669	@ commands ''stroke_color \| fill_color \| linewidth \| opacity \| font_family`` will determine the looks of the protractor.
		3670	@ default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians<br>use command ''precision`` to set the reply precision.
		3671	@ if combined with a ruler, use replyformat = 32
		3672	@ command <code>snap_to_grid</code> may be used to assist the pupil at placing the protractor
		3673	@ when using command ''zoom``, pay <b>attention</b> to the size and symmetry of your canvas<br>...to avoid a partial image, locate the start position near the center of the visual canvas<br>technical: the actual ''protractor`` is just a static generated image in a new canvas-memory<br>This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas.<br>That is the reason for the ''high-speed dragging and rotating``.<br>I've limited its size to xsize × ysize e.g. the same size as the visual canvas...
		3674	@ only one protractor allowed (for the time being)
		3675	@ usage: first left click on the protractor will activate dragging;<br>a second left click will activate rotating (just move mouse around)<br>a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3)<br>a next click will restart this sequence...
		3676	@%protractor%size 400,400%xrange -5,10%yrange -5,10%hline 0,0,black%vline 0,0,black%fillcolor orange%opacity 255,40%protractor 2,-2,6,0,-1,1,1%mouse red,22
18552	bpr	3677	*/
		3678	for( i = 0;i < 6; i++ ){
		3679	switch(i){
		3680	case 0: double_data[0] = get_real(infile,0);break; /* x-center */
		3681	case 1: double_data[1] = get_real(infile,0);break; /* y-center */
		3682	case 2: double_data[2] = get_real(infile,0);break; /* x-width */
		3683	case 3: int_data[0] = (int)(get_real(infile,0));break; /* type: 1==triangle 2 == circle */
		3684	case 4: int_data[1] = (int)(get_real(infile,0));break; /* passive mode == 0; active mode == -1 */
		3685	case 5: int_data[2] = (int)(get_real(infile,1)); /* use scale */
		3686	decimals = find_number_of_digits(precision);
		3687	if( int_data[1] < 0 ){ js_function[JS_FIND_ANGLE] = 1;}
18557	bpr	3688	add_js_protractor(int_data[0],double_data[0], double_data[1], double_data[2],font_family,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width,int_data[2],int_data[1],use_snap);
		3689	tmp_buffer=my_newmem(MAX_BUFFER);
		3690	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, ";protractor%d(); ",canvas_root_id));
18552	bpr	3691	add_to_buffer(tmp_buffer);
		3692	reply_precision = precision;
		3693	/* no reply from protractor if non-interactive */
		3694	if( reply_format == 0 && int_data[1] == -1 ){reply_format = 30;}
		3695	js_function[INTERACTIVE] = 1;
		3696	break;
		3697	default: break;
		3698	}
		3699	}
		3700	break;
		3701	case PIXELS:
		3702	/*
		3703	@ pixels color,x1,y1,x2,y2,x3,y3...
		3704	@ draw rectangular "points" with diameter 1 pixel
		3705	@ pixels can <b>not</b> be dragged or clicked
		3706	@ "pixelsize = 1" may be changed by command <code>pixelsize int</code>
		3707	@%pixels%size 400,400%opacity 255,255%pixelsize 5%pixels red,1,1,2,2,3,3,4,4,5,5,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80,90,90,100,100,120,120,140,140,160,160,180,180,200,200,240,240,280,280,320,320,360,360,400,400%#NOTE pixelsize=5...otherwise you will not see them clearly...
		3708	*/
		3709	js_function[DRAW_PIXELS] = 1;
		3710	stroke_color=get_color(infile,0);
		3711	i=0;
		3712	c=0;
		3713	while( ! done ){ /* get next item until EOL*/
		3714	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3715	for( c = 0 ; c < 2; c++){
		3716	if(c == 0 ){
		3717	double_data[i] = get_real(infile,0);
		3718	i++;
		3719	}
		3720	else {
		3721	double_data[i] = get_real(infile,1);
		3722	}
		3723	}
		3724	}
		3725	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3726	if(use_affine == TRUE ){ transform(i-1,2);}
		3727	decimals = find_number_of_digits(precision);
		3728	/* double_xy2js_array(double xy[],int len,int decimals) /
18557	bpr	3729	tmp_buffer=my_newmem(MAX_BUFFER);
		3730	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_setpixel(%s,\"%s\",%.2f,%d);\n",double_xy2js_array(double_data,i,decimals),stroke_color,stroke_opacity,pixelsize));
18552	bpr	3731	add_to_buffer(tmp_buffer);
		3732	reset();
		3733	break;
		3734	case PIXELSIZE:
		3735	/*
		3736	@ pixelsize int
		3737	@ in case you want to deviate from default pixelsize = 1(...)
		3738	@ pixelsize 100 is of course a filled rectangle 100px × 100px
		3739	*/
		3740	pixelsize = (int) get_real(infile,1);
		3741	break;
15111	schaersvoo	3742
18552	bpr	3743	case PIECHART:
		3744	/*
		3745	@ piechart xc,yc,radius,'data+colorlist'
		3746	@ (xc: yc) center of circle diagram in xrange/yrange
		3747	@ radius in pixels
18627	bpr	3748	@ data+color list: a colon separated list of raw data and corresponding colors<br>canvasdraw will not check validity of colornames...<br>in case of trouble look into javascript debugging of your browser
18552	bpr	3749	@ example data+colorlist: 32:red:65:green:23:black:43:orange:43:yellow:14:white
		3750	@ the number of colors must match the number of data.
		3751	@ if defined <a href='#fillpattern'>fillpattern some_pattern</a> then the pie pieces will be filled with the respective color and a fill pattern...<br>the pattern is cycled from the 4 pattern primitives: grid,hatch,diamond,dot,grid,hatch,diamond,dot,...
18627	bpr	3752	@ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of colors
		3753	@ use command <a href='#legend'>legend</a> to automatically create a legend using the same colors as pie segments; unicode allowed in legend; expect javascript trouble if the amount of ''pie-slices``, ''pie-colors``, ''pie-legend-titles`` do not match, a javascript console is your best friend...<br>use command ''fontfamily`` to set the font of the legend.
18552	bpr	3754	@ use command <a href='centered'>centered</a> to place <a href='#legend'>legend</a> text inside the piechart. The text is using the same color as the pie segment: use (fill) opacity to enhance visibility.
		3755	@%piechart_1%size 300,200%xrange -10,10%yrange -10,10%legend cars:motorcycles:bicycles:trikes%opacity 255,120%piechart -5,0,75,22:red:8:blue:63:green:7:purple%
		3756	@%piechart_2%size 200,200%xrange -10,10%yrange -10,10%fontfamily 16px Arial%centered%legend cars:motorcycles:bicycles:trikes%opacity 255,60%piechart 0,0,100,22:red:8:blue:63:green:7:purple
		3757	*/
		3758	js_function[DRAW_PIECHART] = 1;
		3759	for(i=0;i<5;i++){
		3760	switch(i){
		3761	case 0: int_data[0] = x2px(get_real(infile,0)); break; /* x */
		3762	case 1: int_data[1] = y2px(get_real(infile,0)); break; /* y */
		3763	case 2: int_data[2] = (int)(get_real(infile,1));break;/* radius*/
		3764	case 3: temp = get_string(infile,1);
		3765	if( strstr( temp, ":" ) != 0 ){ temp = str_replace(temp,":","\",\"");}
18557	bpr	3766	tmp_buffer=my_newmem(MAX_BUFFER);
		3767	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_piechart(%d,%d,%d,%d,[\"%s\"],%.2f,%d,\"%s\",%d,%d);\n",PIECHART,int_data[0],int_data[1],int_data[2],temp,fill_opacity,legend_cnt,font_family,use_filled,use_offset));
18552	bpr	3768	add_to_buffer(tmp_buffer);
		3769	break;
		3770	default:break;
		3771	}
		3772	}
		3773	reset();
		3774	break;
		3775	case RANGE:
		3776	/*
		3777	@ range xmin,xmax,ymin,ymax
		3778	@ if not given: 0,xsize,0,ysize (eg in pixels)
		3779	*/
		3780	for(i = 0 ; i<4; i++){
		3781	switch(i){
		3782	case 0: xmin = get_real(infile,0);break;
		3783	case 1: xmax = get_real(infile,1);break;
		3784	case 2: ymin = get_real(infile,0);break;
		3785	case 3: ymax = get_real(infile,1);break;
		3786	default: break;
		3787	}
		3788	}
		3789	if(xmin >= xmax){canvas_error(" xrange is not OK: xmin < xmax !");}
		3790	if(ymin >= ymax){canvas_error(" yrange is not OK: ymin < ymax !");}
		3791	fprintf(js_include_file,"var xmin = %f;var xmax = %f;var ymin = %f;var ymax = %f;",xmin,xmax,ymin,ymax);
		3792	found_size_command = found_size_command+2;
		3793	break;
		3794	case RAYS:
		3795	/*
18556	bpr	3796	@ rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n
		3797	@ draw rays in color 'color' and center (xc:yc)
		3798	@ may be set draggable or onclick (every individual ray)
		3799	@%rays_onclick%size 400,400%xrange -10,10%yrange -10,10%onclick%rays blue,0,0,3,9,-3,5,-4,0,4,-9,7,9,-8,1,-1,-9
		3800	@%rays_drag_xy%size 400,400%xrange -10,10%yrange -10,10%drag xy%rays blue,0,0,3,9,-3,5,-4,0,4,-9,7,9,-8,1,-1,-9
18552	bpr	3801	*/
		3802	stroke_color=get_color(infile,0);
		3803	fill_color = stroke_color;
		3804	double_data[0] = get_real(infile,0);/* xc */
		3805	double_data[1] = get_real(infile,0);/* yc */
		3806	i=2;
		3807	while( ! done ){ /* get next item until EOL*/
		3808	if(i > MAX_INT - 1){canvas_error("in command rays too many points / rays in argument: repeat command multiple times to fit");}
		3809	if(i%2 == 0 ){
		3810	double_data[i] = get_real(infile,0); /* x */
		3811	}
		3812	else {
		3813	double_data[i] = get_real(infile,1); /* y */
		3814	}
		3815	fprintf(js_include_file,"/* double_data[%d] = %f */\n",i,double_data[i]);
		3816	i++;
		3817	}
		3818	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3819	if(use_affine == TRUE ){ transform(i-1,2);}
		3820	if( i%2 != 0 ){canvas_error("in command rays: unpaired x or y value");}
		3821	decimals = find_number_of_digits(precision);
		3822	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3823	for(c=2; c<i;c = c+2){
18557	bpr	3824	tmp_buffer=my_newmem(MAX_BUFFER);
		3825	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[c],decimals,double_data[1],decimals,double_data[c+1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3826	add_to_buffer(tmp_buffer);
		3827	/* object_cnt++; */
		3828	if(onclick != 0){object_cnt++;}
		3829	}
		3830	reset();
		3831	dragstuff[4] = 1;
		3832	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3833	break;
		3834	case RECT:
		3835	/*
		3836	@ rect x1,y1,x2,y2,color
		3837	@ use command <code>frect x1,y1,x2,y2,color</code> for a filled rectangle
		3838	@ use command/keyword <a href='#filled'>filled</a> before command <code>rect x1,y1,x2,y2,color</code>
		3839	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
18572	bpr	3840	@ note: internally a rect is defined with 4 points. So when performing some affine transformation, other than translation, it will result in some morphing of the rectangle !<br>this is a deviation of flydraw's rect&affine
18552	bpr	3841	@%rect%size 400,400%xrange -10,10%yrange -10,10%rect 0,0,4,-4,green%rect 0,5,4,1,red
		3842	*/
		3843	for(i=0;i<5;i++){
		3844	switch(i){
		3845	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		3846	case 1:double_data[1] = get_real(infile,0);break; /* y-values */
		3847	case 2:double_data[4] = get_real(infile,0);break; /* x-values */
		3848	case 3:double_data[5] = get_real(infile,0);break; /* y-values */
		3849	case 4:stroke_color = get_color(infile,1);/* name or hex color */
		3850	decimals = find_number_of_digits(precision);
		3851	double_data[2] = double_data[4];
		3852	double_data[3] = double_data[1];
		3853	double_data[6] = double_data[0];
		3854	double_data[7] = double_data[5];
		3855	/* using closed PATH (type=5) instead of ctx.rect (type=1)!!!
		3856	0,1 2,3
		3857	6,7 4,5
		3858	x = [0,2,4,6]
		3859	y = [1,3,5,7]
		3860	*/
18623	bpr	3861	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	3862	if(use_rotate == TRUE ){rotate(8,angle,rotationcenter,2);}
		3863	if(use_affine == TRUE ){ transform(8,2);}
		3864	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	3865	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	3866	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,5,[%.f,%.f,%.f,%.f],[%.f,%.f,%.f,%.f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[4],decimals,double_data[6],decimals,double_data[1],decimals,double_data[3],decimals,double_data[5],decimals,double_data[7],line_width,line_width,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3867	add_to_buffer(tmp_buffer);
		3868	if(onclick != 0){object_cnt++;}
18555	bpr	3869	/* object_cnt++; */
18552	bpr	3870	reset();
		3871	break;
		3872	}
		3873	}
		3874	dragstuff[5] = 1;
		3875	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3876	break;
		3877	case RECTS:
		3878	/*
		3879	@ rects color,x1,y1,x2,y2,.....
		3880	@ use command <code>frect color,x1,y1,x2,y2,.....</code> for a filled rectangle
		3881	@ use command/keyword <a href='#filled'>filled</a> before command <code>rects color,x1,y1,x2,y2,....</code>
18623	bpr	3882	@ use command <code>fillcolor color</code> before ''frects`` to set the fill color.
18552	bpr	3883	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		3884	@%rects%size 400,400%xrange -10,10%yrange -10,10%rects red,0,0,4,-4,0,5,4,1
		3885	*/
		3886	/* using closed PATH (type=5) in stead of ctx.rect (type=1)!!!
		3887	0,1 2,3 .....8,9 10,11.....
		3888	6,7 4,5 .....14,15 12,13.....
		3889	x = [0,2,4,6,8,10,12,14...]
		3890	y = [1,3,5,7,9,11,13,15...]
		3891	*/
		3892	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	3893	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	3894	i=0;
		3895	while( ! done ){ /* get next item until EOL*/
		3896	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3897	if(i%2 == 0 ){
		3898	double_data[i] = get_real(infile,0); /* x */
		3899	}
		3900	else {
		3901	double_data[i] = get_real(infile,1); /* y */
		3902	}
		3903	i++;
		3904	}
		3905	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3906	if(use_affine == TRUE ){ transform(i-1,2);}
		3907	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	3908
18552	bpr	3909	decimals = find_number_of_digits(precision);
		3910	for(c = 0 ; c < i-1 ; c = c+4){
18557	bpr	3911	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	3912	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,5,[%.f,%.f,%.f,%.f],[%.f,%.f,%.f,%.f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+2],decimals,double_data[c],decimals,double_data[c+1],decimals,double_data[c+1],decimals,double_data[c+3],decimals,double_data[c+3],line_width,line_width,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3913	add_to_buffer(tmp_buffer);
		3914	if(onclick != 0){object_cnt++;}
		3915	/* object_cnt++; */
		3916	}
		3917	dragstuff[5] = 1;
		3918	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3919	if(use_rotate == TRUE ){
		3920	rotate(i-1,angle,rotationcenter,2);
		3921	}
		3922	reset();
		3923	break;
		3924	case REPLYFORMAT:
		3925	/*
		3926	@ replyformat number
		3927	@ use number=-1 to deactivate the js-functions read_canvas() and read_dragdrop()
		3928	@ default values should be fine !
		3929	@ use command <code>precision [0,1,10,100,1000,10000...]</code> before command ''replyformat`` to set the desired number of decimals in the student reply / drawing
		3930	@ the last value for ''precision int`` will be used to calculate the reply coordinates, if needed (read_canvas();)
		3931	@ choose<ul><li>replyformat 1: <code>x1,x2,x3,x4....x_n<br>y1,y2,y3,y4....y_n</code> x/y in pixels</li><li>replyformat 2: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 3: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n<br> r1,r2,r3,r4....r_n</code> x/y in pixels, r in pixels</li><li>replyformat 4: <code> x1,x2,x3,x4....x_n<br> y1,y2,y3,y4....y_n<br> r1,r2,r3,r4....r_n</code> x/y in xrange / yrange coordinate system, r in pixels</li><li>replyformat 5: <code> Ax1,Ax2,Ax3,Ax4....Ax_n<br> Ay1,Ay2,Ay3,Ay4....Ay_n<br> Bx1,Bx2,Bx3,Bx4....Bx_n<br> By1,By2,By3,By4....By_n<br> Cx1,Cx2,Cx3,Cx4....Cx_n<br> Cy1,Cy2,Cy3,Cy4....Cy_n<br> ....<br> Zx1,Zx2,Zx3,Zx4....Zx_n<br> Zy1,Zy2,Zy3,Zy4....Zy_n</code> x/y in pixels</li><li>replyformat 6: <code> Ax1,Ax2,Ax3,Ax4....Ax_n<br> Ay1,Ay2,Ay3,Ay4....Ay_n<br> Bx1,Bx2,Bx3,Bx4....Bx_n<br> By1,By2,By3,By4....By_n<br> Cx1,Cx2,Cx3,Cx4....Cx_n<br> Cy1,Cy2,Cy3,Cy4....Cy_n<br> ....<br> Zx1,Zx2,Zx3,Zx4....Zx_n<br> Zy1,Zy2,Zy3,Zy4....Zy_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 7: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in pixels</li><li>replyformat 8: <code> x1:y1,x2:y2,x3:y3,x4:y4...x_n:y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 9: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in pixels</li><li>replyformat 10: <code> x1:y1:r1,x2:y2:r2,x3:y3:r3,x4:y4:r3...x_n:y_n:r_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 11: <code> Ax1,Ay1,Ax2,Ay2<br>Bx1,By1,Bx2,By2<br> Cx1,Cy1,Cx2,Cy2<br> Dx1,Dy1,Dx2,Dy2<br> ......<br> Zx1,Zy1,Zx2,Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 12: <code> Ax1,Ay1,Ax2,Ay2<br> Bx1,By1,Bx2,By2<br>Cx1,Cy1,Cx2,Cy2<br> Dx1,Dy1,Dx2,Dy2<br> ......<br> Zx1,Zy1,Zx2,Zy2</code> x/y in pixels</li><li>replyformat 13: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2,Cx1:Cy1:Cx2:Cy2,Dx1:Dy1:Dx2:Dy2, ... ,Zx1:Zy1:Zx2:Zy2</code> x/y in xrange / yrange coordinate system</li><li>replyformat 14: <code> Ax1:Ay1:Ax2:Ay2,Bx1:By1:Bx2:By2....Zx1:Zy1:Zx2:Zy2</code> x/y in pixels</li><li>replyformat 15: reply from inputfields,textareas <code>reply1,reply2,reply3,...,reply_n</code></li><li>replyformat 16: mathml input fields</li><li>replyformat 17: read ''userdraw text,color`` only <code>x1,y1,text1 \\n x2,y2,text2...\\n...x_n,y_n,text_n </code> x/y-values are in xrange/yrange</li><li>replyformat 18: read_canvas() will read all interactive clocks in <code>H1:M1:S1,H2:M2:S2...Hn:Mn:Sn</code></li><li>replyformat 19: read_canvas() will return the object number of marked / clicked object (clock), analogue to (shape library) onclick command</li><li>replyformat 20: read_canvas() will reply "object_number:x:y" of external images: object_number of the first draggable external image in the fly-script starts with 0, e.g. expect something like 0:-5:4,1:6:2,2:-2:-5, the first image position is (-5:4), the second image position is (6:2) and the third image position is (-2:-5) <li>replyformat 21: <code> (x1:y1) (x2:y2) ... (x_n:y_n)</code> verbatim coordinate return</li><li>replyformat 22: returns an array .... <code>reply[0]=x1 reply[1]=y1 reply[2]=x2 reply[3]=y2 ... reply[n-1]=x_n reply[n]=y_n</code> x/y in xrange / yrange coordinate system</li><li>replyformat 23: can only be used for drawtype ''polyline``. A typical click sequence in drawtype polyline is x1,y1,x2,y2,x2,y2,x3,y3,x3,y3.....,x(n-1),y(n-1),x(n-1),y(n-1),xn,yn --replyformat 23 gives <code>x1,y1,x2,y2,x3,y3,.....x(n-1),y(n-1),xn,yn</code>; multiple occurences will be filtered out. The reply will be in x-y-range (xreply \\n yreply)</li><li>replyformat 24: read all inputfield values: even those set ''readonly``</li><li>replyformat 25: <code> angle1,angle2;...;angle_n</code> will return the radius (one or many) of the user drawn circle segment in degrees</li><li>replyformat 26: <code> rad1,rad2,...rad_n</code> will return the radius (one or many) of the user drawn circle segment in radians</li><li>replyformat 27: return (only) userdraw inputfields <code>x1,y1,text1<br> x2,y2,text2...<br>...x_n,y_n,textn</code></li><li>replyformat 28: <code> x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> x / y / r in xrange / yrange coordinate system: may be used to reinput into command <code>circles color,x1,y1,r1,x2,y2,r2...x_n,y_n,r_n</code> will not return anything else (e.g. no inputfields, text etc)</li><li>replyformat 34: a special for OEF and dragging external images -included via commands <a href='#copy'>copy</a> or <a href='#copyresized'>copyresized</a> there will be an extra function <code>read_canvas_images()</code> for reading the coordinates of the images.<br>for now this is a unique function, e.g. there is no ''canvas id`` linked to it. (TO DO !!! 18/5/2019)</li></ul>
		3932	@ special replyformat = 100 ; will access to the raw javascript object data...use: read_dragdrop([property,property,...])<br>for example properies like 'clicked','text', 'angle' , 'x'
		3933	*/
		3934	reply_format = (int) get_real(infile,1);
		3935	reply_precision = precision;
		3936	break;
		3937	case ROUNDRECT:
		3938	/*
		3939	@ roundrect x1,y1,x2,y2,radius in px,color
		3940	@ use command <code>froundrect x1,y1,x2,y2,radius,color</code> for a filled rectangle
		3941	@ use command/keyword <a href='#filled'>filled</a> before command <code>roundrect x1,y1,x2,y2,radius,color</code>
		3942	@ fillcolor will be identical to ''color``
		3943	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3944	@%roundrect%size 400,400%xrange -10,10%yrange -10,10%roundrect 0,0,4,-4,20,green%roundrect 0,5,4,1,10,red
		3945	*/
		3946	for(i=0;i<6;i++){
		3947	switch(i){
		3948	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		3949	case 1:double_data[1] = get_real(infile,0);break; /* y-values */
		3950	case 2:double_data[2] = get_real(infile,0);break; /* x-values */
		3951	case 3:double_data[3] = get_real(infile,0);break; /* y-values */
		3952	case 4:int_data[0] = (int) (get_real(infile,0));break; /* radius value in pixels */
		3953	case 5:stroke_color = get_color(infile,1);/* name or hex color */
		3954	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		3955	if(use_affine == TRUE ){ transform(2,4);}
		3956	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3957	/* ensure no inverted roundrect is produced... */
		3958	if( double_data[0] > double_data[2] ){double_data[4] = double_data[0];double_data[0] = double_data[2];double_data[2] = double_data[4];}
		3959	if( double_data[3] > double_data[1] ){double_data[4] = double_data[1];double_data[1] = double_data[3];double_data[3] = double_data[4];}
		3960	decimals = find_number_of_digits(precision);
18557	bpr	3961	tmp_buffer=my_newmem(MAX_BUFFER);
		3962	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,6,[%.f,%.f],[%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],int_data[0],int_data[0],int_data[0],int_data[0],line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	3963	add_to_buffer(tmp_buffer);
		3964	if(onclick != 0){object_cnt++;}
		3965	/* object_cnt++;*/
		3966	reset();
		3967	break;
		3968	}
		3969	}
		3970	dragstuff[6] = 1;
		3971	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3972	break;
		3973	case ROUNDRECTS:
		3974	/*
		3975	@ roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....
		3976	@ for filled roundrects use command/keyword <a href='#filled'>filled</a> before command
		3977	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		3978	@%roundrects%size 400,400%xrange -10,10%yrange -10,10%roundrects blue,5,0,0,4,-4,5,4,1,2
		3979	*/
11806	schaersvoo	3980
18552	bpr	3981	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3982	int_data[0] = (int) (get_real(infile,0)); /* radius value in pixels */
18623	bpr	3983	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	3984	i=0;
		3985	while( ! done ){ /* get next item until EOL*/
		3986	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3987	if(i%2 == 0 ){
		3988	double_data[i] = get_real(infile,0); /* x */
		3989	}
		3990	else {
		3991	double_data[i] = get_real(infile,1); /* y */
		3992	}
		3993	i++;
		3994	}
		3995	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3996	if(use_affine == TRUE ){ transform(i-1,2);}
		3997	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3998	decimals = find_number_of_digits(precision);
		3999	for(c = 0 ; c < i-1 ; c = c+4){
		4000	/* ensure no inverted roundrect is produced... */
		4001	if( double_data[c] > double_data[c+2] ){double_data[c+4] = double_data[c];double_data[c] = double_data[c+2];double_data[c+2] = double_data[c+4];}
		4002	if( double_data[c+3] > double_data[c+1] ){double_data[c+4] = double_data[c+1];double_data[c+1] = double_data[c+3];double_data[c+3] = double_data[c+4];}
18557	bpr	4003	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	4004	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,6,[%.f,%.f],[%.f,%.f],[%d,%d],[%d,%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],int_data[0],int_data[0],int_data[0],int_data[0],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4005	add_to_buffer(tmp_buffer);
		4006	if(onclick != 0){object_cnt++;}
		4007	/* object_cnt++; */
		4008	}
		4009	dragstuff[6] = 1;
		4010	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4011	reset();
		4012	break;
		4013	case RULER:
		4014	/*
		4015	@ ruler x,y,x-width,y-height,mode
		4016	@ x,y are the initial location
		4017	@ x-width, y-height are the ruler dimensions width & height in xy-coordinate system
		4018	@ the ruler scale is by definition the x-scale, set by command ''xrange``. For example: a ruler x-width of 6 will have a scale ranging from 0 to 6
		4019	@ mode: use -1 to set the ruler interactive (eg mouse movement of ruler; drag & rotate)<br>use mode = '0° - 360°' to set the ruler with a static angle of some value
		4020	@ if combined with a protractor, use replyformat = 32
		4021	@ only one ruler allowed (for the time being)
		4022	@ when using command ''zoom``, pay <b>attention</b> to the size and symmetry of your canvas to avoid a partial image, locate the start position near the center of the visual canvas; technical: the actual ''ruler`` is just a static generated image in a new canvas-memory. This image is only generated once, and a copy of its bitmap is translated & rotated onto the visible canvas. That is the reason for the ''high-speed dragging and rotating``. I have limited its size to xsize × ysize e.g. the same size as the visual canvas...
		4023	@ usage: first left click on the ruler will activate dragging; a second left click will activate rotating (just move mouse around), a third click will freeze this position and the x/y-coordinate and angle in radians will be stored in reply(3), a next click will restart this sequence...
		4024	@%ruler_interactive%size 800,400%xrange -10,10%yrange -10,10%strokecolor blue%opacity 200,50%filled%fillcolor lightgrey%ruler -9,0,10,2,-1%display degree,blue,22
		4025	@%ruler_set_degree_45%size 800,400%xrange -10,10%yrange -10,10%strokecolor blue%opacity 200,50%filled%fillcolor lightgrey%ruler 0,0,10,2,45
		4026	@%ruler_set_degree_125%size 800,400%xrange -10,10%yrange -10,10%strokecolor blue%opacity 200,50%filled%fillcolor lightgrey%ruler 0,0,10,2,125
		4027	*/
		4028	for( i = 0;i < 5; i++ ){
		4029	switch(i){
		4030	case 0: double_data[0] = get_real(infile,0);break; /* x-center */
		4031	case 1: double_data[1] = get_real(infile,0);break; /* y-center */
		4032	case 2: double_data[2] = get_real(infile,0);break; /* x-width */
		4033	case 3: double_data[3] = get_real(infile,0);break; /* y-width */
		4034	case 4: int_data[0] = (int)(get_real(infile,1)); /* passive mode */
		4035	decimals = find_number_of_digits(precision);
		4036	if( int_data[0] < 0 ){
		4037	js_function[JS_FIND_ANGLE] = 1;
		4038	}
18557	bpr	4039	add_js_ruler(double_data[0],double_data[1],double_data[2],double_data[3], font_family,stroke_color,stroke_opacity,fill_color,fill_opacity,line_width,int_data[0],use_snap);
		4040	tmp_buffer=my_newmem(MAX_BUFFER);
		4041	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, ";ruler%d(); ",canvas_root_id));
18552	bpr	4042	add_to_buffer(tmp_buffer);
		4043	reply_precision = precision;
		4044	/* no reply from ruler if non-interactive */
		4045	if( reply_format == 0 && int_data[0] == -1 ){reply_format = 31;}
		4046	break;
		4047	default: break;
		4048	}
		4049	}
		4050	break;
		4051	case RESET:
		4052	/*
		4053	@ reset
		4054	@ keyword
		4055	@ disables the effects of the <a href="noreset">noreset</a> command
		4056	@ so the next objects will not be <a href="#filled">filled</a> and <a href="#dashed">dashed</a>
		4057	*/
		4058	no_reset = FALSE; reset();
		4059	break;
		4060	case RESETOFFSET:
		4061	/*
18556	bpr	4062	@ resetoffset
		4063	@ keyword ; use to restore text placement on the canvas to the real (x;y) coordinates of the left bottom corner of the text
		4064	@ may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
18552	bpr	4065	*/
		4066	use_offset = 0;
		4067	break;
		4068	case ROTATE:
		4069	/*
18556	bpr	4070	@ rotate rotation_angle
		4071	@ angle in degrees
		4072	@ (only) the next object will be rotated is given angle
		4073	@ positive values rotate counter clockwise
		4074	@ attention: all objects will be rotated around their first point...<br><code>rotate 45<br>triangle 1,1,5,1,3,4,red</code><br>will rotate 45 degrees around point (1:1)
		4075	@ if another rotation center is needed, use command <a href="#rotationcenter">rotationcenter xc,yc</a>.<br>to reset this rotationcenter, use keyword <a href="#killrotate">killrotate</a>
		4076	@ attention: rotate will mess up the interactivity of the rotated object <br>e.g. if combined with command <a href="#drag">drag xy</a> or keyword <a href="#onclick">onclick</a>: the mouse recognises the original -unrotated- coordinates of the object
		4077	@%rotate_1%size 400,400%xrange -10,10%yrange -10,10%fpoly yellow,0,0,4,3,2,5%rotate 45%fpoly violet,0,0,4,3,2,5%killrotate%rotate 90%fpoly violet,0,0,4,3,2,5%
18552	bpr	4078	*/
		4079	use_rotate = TRUE;
		4080	angle = -1(get_real(infile,1));/ -1: to be compatible with Flydraw... */
		4081	break;
		4082	case ROTATION_CENTER:
		4083	/*
		4084	@ rotationcenter x_center,y_center
		4085	@ define an rotation center in your x/y-coordinate system
		4086	@ wims will not check the validity of your input; use javascript console to debug any erors
		4087	@ if not defined a rotation will be around the first point of an object
		4088	@ to be used before command <a href="#rotate">rotate</a>
18572	bpr	4089	@ use <a href="#killrotate">killrotate</a> to reset to 'null' <br>(eg. the rotationcenter of the next object(s) will be the first (x;y) coordinate of the object(s))
18552	bpr	4090	@ all other commands will use this rotation center, unless a <a href="#killrotation">killrotation</a> is given
		4091	@%rotationcenter%size 400,400%xrange -5,10%yrange -5,10%circles green,3,3,4.25%rotationcenter 3,3%opacity 255,80%fpoly yellow,0,0,4,3,2,5%rotate 45%fpoly violet,0,0,4,3,2,5%rotate 90%fpoly lightblue,0,0,4,3,2,5%rotate 135%fpoly blue,0,0,4,3,2,5%rotate 180%fpoly orange,0,0,4,3,2,5%rotate 225%fpoly green,0,0,4,3,2,5%rotate 270%fpoly cyan,0,0,4,3,2,5%rotate 315%fpoly purple,0,0,4,3,2,5%linewidth 3%point 3,3,red%mouse red,22
		4092	@%rotationcenter_slider%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%fillcolor black%strokecolor yellow%rotationcenter 0,0%fontsize 28%slider 0,2pi,400,30,angle degrees active, rotate...%plot red,5sin(x)%filled%linewidth 1%opacity 150,50%fillcolor orange%angle 0,0,pi,0,0,blue
		4093	*/
		4094	for( i = 0;i < 2; i++ ){
		4095	switch(i){
		4096	case 0: rotationcenter[0] = get_real(infile,0);break; /* x-center */
		4097	case 1: rotationcenter[1] = get_real(infile,1);break; /* y-center */
		4098	}
		4099	string_length = 1 + snprintf(NULL,0,"[%f,%f ]",rotationcenter[0],rotationcenter[1]);
18557	bpr	4100
18552	bpr	4101	rotation_center = my_newmem(string_length);
		4102	snprintf(rotation_center,string_length,"[%f,%f]",rotationcenter[0],rotationcenter[1]);
		4103	}
		4104	break;
		4105	case SIZE:
		4106	/*
18556	bpr	4107	@ size width,height
		4108	@ set canvas size in pixels
		4109	@ mandatory first command (can only be preceded by keyword <a href="#popup">popup</a>)
		4110	@ if xrange and/or yrange is not given the range will be set to pixels:<br>xrange 0,xsize yrange 0,ysize<br>note: lower left corner is origin (0:0) !!! this in contrast to flydraw
18552	bpr	4111	*/
		4112	found_size_command = 1;
		4113	/* using fabs: however "xsize == int": so "xsize = abs( (int) get_real(infile,0))" would be the idea... */
		4114	xsize = (int)(fabs(round(get_real(infile,0)))); /* just to be sure that sizes > 0 */
		4115	ysize = (int)(fabs(round(get_real(infile,1))));
		4116	/* sometimes we want xrange / yrange to be in pixels...without telling x/y-range */
		4117	xmin = 0;xmax = xsize;
		4118	ymin = 0;ymax = ysize;
11806	schaersvoo	4119
		4120	/*
		4121	The sequence in which stuff is finally printed is important !!
		4122	*/
18552	bpr	4123	fprintf(stdout,"\n\
		4124	<script>\n\
		4125	/<![CDATA[/\n\
		4126	if( typeof(wims_status) === 'undefined' ){ var wims_status = \"$status\";};\
		4127	if( typeof(use_dragdrop_reply) === 'undefined' ){ var use_dragdrop_reply = false;};\
		4128	if( typeof(canvas_scripts) === 'undefined' ){ var canvas_scripts = new Array();};\
		4129	canvas_scripts.push(\"%d\");\n/]]>/\n</script>\n\
		4130	",canvas_root_id);
11806	schaersvoo	4131
18552	bpr	4132	/* style=\"display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\" */
		4133	if( use_tooltip != 2){
		4134	fprintf(stdout,"<!-- canvasdraw div -->\n\
		4135	<div tabindex=\"0\" id=\"canvas_div%d\" style=\"max-width:%dpx;width:%dpx;height:%dpx\" class=\"canvas_wrapper\" oncontextmenu=\"return false;\">\
		4136	<canvas class=\"canvas_placeholder\" width=\"%d\" height=\"%d\"></canvas>\
		4137	</div>\n\
		4138	<!-- tooltip and input placeholder -->\n\
		4139	<div id=\"tooltip_placeholder_div%d\" style=\"text-align:center\">\
		4140	<span id=\"tooltip_placeholder%d\" class=\"tooltip_placeholder\"></span></div>\
		4141	<!-- include actual object code via include file -->\n\
		4142	<script id=\"canvas_script%d\" src=\"%s\" defer></script>\n",canvas_root_id,xsize,xsize,ysize,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);
		4143	} else {
11806	schaersvoo	4144	/*
14066	bpr	4145	set canvas_div invisible and do not include placeholder in main html page:
15111	schaersvoo	4146	the js-include will also be in a popup window...to be shown when wims $status = done
11806	schaersvoo	4147	*/
18552	bpr	4148	fprintf(stdout,"<!-- canvasdraw div invisible -->\n\
		4149	<div tabindex=\"0\" id=\"canvas_div%d\" class=\"canvas_wrapper\" style=\"display:none;max-width:%dpx;width:%dpx;height:%dpx;\">\
		4150	<canvas class=\"canvas_placeholder\" width=\"%d\" height=\"%d\"></canvas>\
		4151	</div>\n\
		4152	<div id=\"tooltip_placeholder_div%d\" style=\"display:none;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\">\
		4153	<span id=\"tooltip_placeholder%d\" class=\"tooltip_placeholder\"></span></div>\
		4154	<!-- include actual object code via include file -->\n\
		4155	<script id=\"canvas_script%d\" src=\"%s\"></script>\n",canvas_root_id,xsize,xsize,ysize,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);
		4156	}
11806	schaersvoo	4157
14071	bpr	4158	/* these must be global...it is all really very poor javascript:( */
15734	schaersvoo	4159	fprintf(js_include_file,"\n/* begin generated javascript include for canvasdraw version %s */\n\
11806	schaersvoo	4160	\"use strict\";\n\
15111	schaersvoo	4161	/* these variables and functions must be global */\
11806	schaersvoo	4162	var read_dragdrop%d;\
14038	schaersvoo	4163	var read_canvas_images;\
11806	schaersvoo	4164	var read_canvas%d;\
		4165	var set_clock;\
		4166	var clear_draw_area%d;\
		4167	var update_draw_area%d;\
14038	schaersvoo	4168	var place_image_on_canvas;\
11806	schaersvoo	4169	var draw_boxplot;\
		4170	var redraw_all%d;\
15111	schaersvoo	4171	var userdraw_primitive;\
		4172	var wims_canvas_function%d = function(){\n/* common used stuff */\
		4173	var userdraw_x = [];var userdraw_y = [];var userdraw_radius = [];\
11806	schaersvoo	4174	var xsize = %d;\
		4175	var ysize = %d;\
		4176	var precision = 100;\
		4177	var canvas_div = document.getElementById(\"canvas_div%d\");\
		4178	var create_canvas%d = function(canvas_type,size_x,size_y){var cnv;if(document.getElementById(\"wims_canvas%d\"+canvas_type)){ cnv = document.getElementById(\"wims_canvas%d\"+canvas_type);}else{try{ cnv = document.createElement(\"canvas\"); }catch(e){alert(\"Your browser does not support HTML5 CANVAS:GET FIREFOX !\");return;};canvas_div.appendChild(cnv);};cnv.width = size_x;cnv.height = size_y;cnv.style.top = 0;cnv.style.left = 0;cnv.style.position = \"absolute\";cnv.id = \"wims_canvas%d\"+canvas_type;return cnv;};\
		4179	function findPosX(i){ var obj = i;var curleft = 0;if(obj.offsetParent){while(1){curleft += obj.offsetLeft;if(!obj.offsetParent){break;};obj = obj.offsetParent;};}else{if(obj.x){curleft += obj.x;};};return curleft;};function findPosY(i){var obj = i;var curtop = 0;if(obj.offsetParent){while(1){curtop += obj.offsetTop;if(!obj.offsetParent){break;};obj = obj.offsetParent;};}else{if(obj.y){curtop += obj.y;};};return curtop;};\
18638	bpr	4180	function x2px(x){if(use_xlogscale == 0 ){let res=parseFloat((x-xmin)/(xmax - xmin)xsize);return (res==xsize)?xsize-1:res;}else{let x_max = Math.log(xmax)/Math.log(xlogbase);let x_min = Math.log(xmin)/Math.log(xlogbase);let x_in = Math.log(x)/Math.log(xlogbase);let res=(x_in-x_min)/(x_max - x_min)xsize; return (res==xsize)?xsize-1:res;};};\
18606	bpr	4181	function px2x(px){if(use_xlogscale == 0 ){return px(xmax - xmin)/xsize + xmin;}else{let x_max = Math.log(xmax)/Math.log(xlogbase);let x_min = Math.log(xmin)/Math.log(xlogbase);let x_out = x_min +px(x_max - x_min)/xsize;return Math.pow(xlogbase,x_out);};};\
		4182	function px2y(py){if(use_ylogscale == 0 ){return ymax - py(ymax - ymin)/ysize;}else{let y_max = Math.log(ymax)/Math.log(ylogbase);let y_min = Math.log(ymin)/Math.log(ylogbase);let y_out = y_max +py(y_min - y_max)/ysize;return Math.pow(ylogbase,y_out);};};\
18638	bpr	4183	function y2px(y){if(use_ylogscale == 0){let res= parseFloat((ymax-y)/(ymax - ymin)ysize);return (res==ysize)?ysize-1:res;}else{var y_max = Math.log(ymax)/Math.log(ylogbase);var y_min = Math.log(ymin)/Math.log(ylogbase);var y_in = Math.log(y)/Math.log(ylogbase);return (y_max - y_in)ysize/(y_max - y_min);};};\
11806	schaersvoo	4184	function scale_x_radius(rx){return rx*xsize/(xmax - xmin);};\
		4185	function scale_y_radius(ry){return ry*ysize/(ymax - ymin);};\
		4186	function distance(x1,y1,x2,y2){return Math.sqrt( (x1-x2)(x1-x2) + (y1-y2)(y1-y2) );};\
		4187	function distance_to_line (r,q,x,y){var c = (y) - (-1/r)(x);var xs = r(c - q)/(rr+1);var ys = (r)(xs)+(q);return parseInt(Math.sqrt( (xs-x)(xs-x) + (ys-y)(ys-y) ));};\
		4188	function move(obj,dx,dy){for(var p = 0 ; p < obj.x.length; p++){obj.x[p] = obj.x[p] + dx;obj.y[p] = obj.y[p] + dy;};return obj;};\
15111	schaersvoo	4189	var snap_x = 1;var snap_y = 1;\
11806	schaersvoo	4190	function snap_to_x(x){return x2px(snap_x*(Math.round((px2x(x))/snap_x)));};\
11890	schaersvoo	4191	function snap_to_y(y){return y2px(snap_y*(Math.round((px2y(y))/snap_y)));};\
15111	schaersvoo	4192	function multisnap_check(x,y,snap){switch(snap){case 1:return [snap_to_x(x),snap_to_y(y)];break;case 2:return [snap_to_x(x),y];break;case 3:return [x,snap_to_y(y)];break;case 4:return snap_to_points(x,y);break;case 5: return snap_to_fun(x,y);break;default: return [x,y];break;};};\
11806	schaersvoo	4193	var xlogbase = 10;\
		4194	var ylogbase = 10;\
		4195	var use_xlogscale = 0;\
		4196	var use_ylogscale = 0;\
11891	schaersvoo	4197	var x_strings = {};var x_strings_up = [];\
11806	schaersvoo	4198	var y_strings = null;\
		4199	var use_jsmath = 0;\
		4200	var xstart = 0;\
		4201	var ystart = 0;\
		4202	var unit_x=\" \";\
		4203	var unit_y=\" \";\
15111	schaersvoo	4204	var dragdrop_reply = [];\
15734	schaersvoo	4205	var external_canvas = create_canvas%d(%d,xsize,ysize);",VERSION,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,EXTERNAL_IMAGE_CANVAS);
15111	schaersvoo	4206	/* var xstart,ystart are normally 0 : in case of sgraph they have the 'jump' in the graph */
18552	bpr	4207	break;
		4208	case SEGMENT:
		4209	/*
		4210	@ segment x1,y1,x2,y2,color
		4211	@ alternative: seg
		4212	@ draw a line segment between points (x1:y1)--(x2:y2) in color ''color``
		4213	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		4214	@%segment_onclick%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%segment 1,1,-9,3,green
		4215	@%segment_drag_y%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag y%segment 1,1,-9,3,green
		4216	*/
		4217	for(i=0;i<5;i++) {
		4218	switch(i){
		4219	case 0: double_data[0]= get_real(infile,0);break; /* x1-values */
		4220	case 1: double_data[1]= get_real(infile,0);break; /* y1-values */
		4221	case 2: double_data[2]= get_real(infile,0);break; /* x2-values */
		4222	case 3: double_data[3]= get_real(infile,0);break; /* y2-values */
		4223	case 4: stroke_color=get_color(infile,1);/* name or hex color */
		4224	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		4225	if(use_affine == TRUE ){ transform(4,2);}
		4226	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4227	decimals = find_number_of_digits(precision);
18557	bpr	4228	tmp_buffer=my_newmem(MAX_BUFFER);
		4229	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4230	add_to_buffer(tmp_buffer);
		4231	if(onclick != 0){object_cnt++;}
		4232	/* object_cnt++; */
		4233	reset();
		4234	break;
		4235	default: break;
		4236	}
		4237	}
		4238	dragstuff[4] = 1;
		4239	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4240	break;
		4241	case SEGMENTS:
		4242	/*
		4243	@ segments color,x1,y1,x2,y2,...,x_n,y_n
		4244	@ alternative: segs
		4245	@ draw multiple segments between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color ''color``
		4246	@ use command ''linewidth int`` to adjust size
		4247	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		4248	@%segments_onclick%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%segments green,1,1,3,3,0,0,-3,3,1,1,4,-1,-5,5,-3,-1
		4249	@%segments_drag_y%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag y%segments green,1,1,3,3,0,0,-3,3,1,1,4,-1,-5,5,-3,-1
		4250	*/
		4251	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		4252	fill_color = stroke_color;
		4253	i=0;
		4254	while( ! done ){ /* get next item until EOL*/
		4255	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		4256	if(i%2 == 0 ){
		4257	double_data[i] = get_real(infile,0); /* x */
		4258	}
		4259	else {
		4260	double_data[i] = get_real(infile,1); /* y */
		4261	}
		4262	i++;
		4263	}
		4264	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		4265	if(use_affine == TRUE ){ transform(i-1,2);}
		4266	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4267	decimals = find_number_of_digits(precision);
		4268	for(c = 0 ; c < i-1 ; c = c+4){
18557	bpr	4269	tmp_buffer=my_newmem(MAX_BUFFER);
		4270	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4271	add_to_buffer(tmp_buffer);
		4272	if(onclick != 0){object_cnt++;}
		4273	/* object_cnt++;*/
		4274	}
		4275	reset();
		4276	dragstuff[4] = 1;
		4277	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4278	break;
		4279	case SETLIMITS:
		4280	/*
18556	bpr	4281	@ setlimits
		4282	@ keyword: if set, it will produce 4 inputfields for ''xmin,xmax,ymin,ymax`` and an ''ok`` button
		4283	@ may be used for inputfield based zooming / panning
		4284	@ may be styled using command <a href="#css">css</a>
		4285	@ use commands <a href="#xlabel">xlabel / ylabel</a> to change text from xmin to ''xlabel`` etc
		4286	@ note: the input value will not be checked on validity
		4287	@%setlimits%size 400,400%xrange -10,10%yrange -10,10%precision 1%xlabel T%ylabel H%axis%axisnumbering%grid 2,2,grey,2,2,5,grey%precision 100%multistrokecolors red,green,blue,orange%multilinewidth 1,1,2,2%multistrokeopacity 0.6,0.7,0.8,0.9%jsplot red,1/x,-1,x,1/(x-3),1/(x+3)%setlimits
18552	bpr	4288	*/
		4289	js_function[JS_SAFE_EVAL] = 1;
		4290	js_function[JSPLOT_AND_ZOOM] = 1;
		4291	add_setlimits(font_size,css_class);
		4292	done = TRUE;
		4293	break;
		4294	case SETPIXEL:
		4295	/*
		4296	@ setpixel x,y,color
		4297	@ A rectangular "point" with diameter 1 pixel centered at (x:y) in xrange / yrange
		4298	@ pixels can <b>not</b> be dragged or clicked
		4299	@ "pixelsize = 1" may be changed by command <code>pixelsize int</code>
		4300	@%setpixel%size 400,400%xrange -10,10%yrange -10,10%setpixel 1,1,red%pixelsize 2%setpixel 2,2,green%pixelsize 3%setpixel 3,3,blue%
		4301	*/
		4302	js_function[DRAW_PIXELS] = 1;
		4303	for(i=0;i<3;i++){
		4304	switch(i){
		4305	case 0: double_data[0] = get_real(infile,0); break; /* x */
		4306	case 1: double_data[1] = get_real(infile,0); break; /* y */
		4307	case 2: stroke_color = get_color(infile,1);
18557	bpr	4308	tmp_buffer=my_newmem(MAX_BUFFER);
		4309	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_setpixel([%f],[%f],\"%s\",%.2f,%d);\n",double_data[0],double_data[1],stroke_color,stroke_opacity,pixelsize));
18552	bpr	4310	add_to_buffer(tmp_buffer);
		4311	break;
		4312	default:break;
		4313	}
		4314	}
		4315	reset();
		4316	break;
		4317	case SLIDER:
		4318	/*
		4319	@ slider start_value,end_value,width px,height px,type,label
		4320	@ type may be: ''x,y,angle``
		4321	@ if a slider value display is desired, use for argument ''type``: ''x display``, ''y display``, ''angle radian``, ''angle degree``
		4322	@ is the slider is used for animation, add keyword ''anim`` or ''animate`` to ''type``; for now only one animated slider may be used...
18572	bpr	4323	@ default behaviour is: click on an object to use its slider(s)<br>to use sliders without clicking on an object, use for ''type`` keyword ''active``<br>eg: <code>slider -2pi,2pi,300,30,angle degree active,Rotate</code>
18552	bpr	4324	@ if a unit (or something like that...) for x/y-value display is needed, use commands ''xunit`` and / or ''yunit``
		4325	@ if the translation should be performed using a function, use for type: ''x function``, ''y function``<br>use commands ''sliderfunction_x`` and/or ''sliderfunction_y`` before the slider command to define the functions. Example:<code>sliderfunction_x x^2<br>sliderfunction_y y^2<br>slider -5,5,100,100,xy function,Some_Text<br>...some stuff to slide<br>killslider<br>sliderfunction_x x^2-2<br>slider -15,15,100,10,x function,Some_Other_Text<br>...more stuff to slide<br>killslider... etc</code>
		4326	@ use command ''slider`` before draggable/clickable objects.
		4327	@ drag and drop may be combined with rotation slider<br>for example an arrow rotated by a slider may be placed anywhere (drag&drop)<br><code>size 300,300<br>xrange -5,5<br>yrange -5,5<br>grid 1,1,grey<br>linewidth 3<br>drag xy<br>fillcolor orange<br>strokecolor blue<br>slider 0,2*pi,250,30,angle degrees,Rotate arrow<br>arrow 2,2,5,5,8,red</code><br>note: except a combination 'drag' and 'slider' for command 'latex, katex, mathml, html, obabel'
		4328	@ no slider for a math function, these can be traced using command ''trace_jscurve some_function_in_x``
		4329	@ a slider will affect all draggable objects after the ''slider`` command...<br>and can be used to group translate / rotate several objects...<br>until a next ''slider`` or keyword ''killslider``
		4330	@ amount of sliders is not limited.
		4331	@ a slider can not be set ''snaptogrid`` or other ''snapto*`` : you may always use 'drag xy' in combination with the slider objects
		4332	@ <code>javascript:read_dragdrop();</code> will return an array with ''object_number:slider_value``
		4333	@ every draggable object may have its own slider (no limit in amount of sliders)
		4334	@ label: some slider text. <br>Note: on <a target='new' href='https://katex.org'>KaTeX</a> enabled wims, TeX produced by wims command ''mathmlmath``, is allowed.
		4335	@ use fillcolor for slider controlkey
		4336	@ use strokecolor for slider bar
		4337	@ use fontfamily / fontcolor to set used fonts
		4338	@ use opacity (only fill opacity will be used) to set transparency
		4339	@ the slider canvas will be added to the ''tooltip div``: so incompatible with command tooltip ; setlimits etc
		4340	@%slider_x_y_angle%%size 300,300%xrange -5,5%yrange -5,5%grid 1,1,grey%linewidth 3%fillcolor orange%strokecolor blue%slider 0,2*pi,300,30,angle active degrees,Rotate arrow%arrow 0,0,4.5,0,8,red%killslider%opacity 200,100%slider -2,2,300,30,x active,move blue rectangle%frect -4,4,1,-1,blue%killslider%linewidth 2%slider -2,2,300,30,y,move green rectangle%frect -4,4,1,-1,green
		4341	@%slider_click%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 2%slider 0,2*pi,300,28,angle degree, name%fillcolor lightgreen%#CLICK ON THE OBJECTS TO ACTIVATE%opacity 255,30%ftriangle 2,2,-2,2,0,0,red%ftriangle -2,2,-2,-2,0,0,blue%ftriangle -2,-2,2,-2,0,0,green%ftriangle 2,-2,2,2,0,0,orange%rotationcenter 0,0%frect -2,2,2,-2,black
		4342	@%slider_active%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle degree active, name%fillcolor lightgreen%opacity 255,30%ftriangle 2,2,-2,2,0,0,red%ftriangle -2,2,-2,-2,0,0,blue%ftriangle -2,-2,2,-2,0,0,green%ftriangle 2,-2,2,2,0,0,orange%rotationcenter 0,0%frect -2,2,2,-2,black
		4343	@%slider_animate%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle anim active, name%fillcolor lightgreen%opacity 255,30%ftriangle 2,2,-2,2,0,0,red%ftriangle -2,2,-2,-2,0,0,blue%ftriangle -2,-2,2,-2,0,0,green%ftriangle 2,-2,2,2,0,0,orange%rotationcenter 0,0%frect -2,2,2,-2,black
		4344	@%slider_html_image%%size 400,400%xrange -6,6%yrange -6,6%bgcolor white%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle active degree,%centered%html 0,0,<img src="gifs/domains/sciences/flasks.svg" width="100px" height="100px">
		4345	*/
		4346	js_function[INTERACTIVE] = 1;
		4347	int_data[2] = 0; /* --> show_display = 0; */
		4348	for(i=0; i<6 ; i++){
		4349	switch(i){
		4350	case 0: double_data[0] = get_real(infile,0);break; /* start value */
		4351	case 1: double_data[1] = get_real(infile,0);break; /* end value */
		4352	case 2: int_data[0] = (int)(get_real(infile,0));break; /* width */
		4353	case 3: int_data[1] = (int)(get_real(infile,0));break; /* height */
		4354	case 4: temp = get_string_argument(infile,0); /* type: x,y,angle */
		4355	if( strstr(temp,"displ")!=0 \|\| strstr(temp,"deg")!=0 \|\| strstr(temp,"rad")!=0 ){int_data[5] = 1; }else{int_data[5] = 0;}
		4356	if(strstr(temp,"anim")!= 0){int_data[3] = 1;}else{int_data[3] = 0;}
		4357	if(strstr(temp,"active")!= 0){onclick = 4;}else{onclick=0;}
		4358	if(strstr(temp,"angle")!= 0){slider_type="R";if( strstr(temp,"rad")!= 0){int_data[2] = 3;}if( strstr(temp,"deg")!= 0){int_data[2] = 4;}}
		4359	else
		4360	if(strstr(temp,"xy") != 0){slider_type = "XY";if( strstr(temp,"disp")!= 0){int_data[2] = 5;}}
		4361	else
		4362	if(strstr(temp,"x") != 0){slider_type = "X";if( strstr(temp,"disp")!= 0){int_data[2] = 1;}}
		4363	else
		4364	if(strstr(temp,"y") != 0){slider_type = "Y";if( strstr(temp,"disp")!= 0){int_data[2] = 2;}}
		4365	else
		4366	canvas_error("slider can be of type: x,y,angle,fun_x:fun_y");
		4367	break;
		4368	case 5: temp = get_string_argument(infile,1); if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\""," ");}
		4369	/* slider label : in case of latex/mathmlmath we need to remove the extra " */
		4370	break;
		4371	}
		4372	}
		4373	if(use_slider == -1 ){ /* add once */
		4374	add_slider(int_data[3]);
		4375	if(int_data[5] == 1 ){add_slider_display(precision,font_size,font_color,stroke_opacity);}
		4376	}
		4377	use_slider++;
		4378	if(int_data[3] == 0){\
18557	bpr	4379
		4380	tmp_buffer=my_newmem(MAX_BUFFER);
18570	bpr	4381	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"slider%d = new slider(\"%s\",\"%s\",%d,%d,%d,%d,\"%s\",\"%s\",[%f,%f],%f,%f,'%s',%d);\n",use_slider,slider_type,temp,use_slider,int_data[0],int_data[1],line_width,fill_color,stroke_color,fill_opacity,stroke_opacity,double_data[0],double_data[1],font_family,int_data[2]));
18552	bpr	4382	}else{
18557	bpr	4383
18552	bpr	4384	add_slider(int_data[3]);/* use only once !! */
18557	bpr	4385	tmp_buffer=my_newmem(MAX_BUFFER);
18570	bpr	4386	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"slider%d = new animslider(\"%s\",\"%s\",%d,%d,%d,%d,\"%s\",\"%s\",[%f,%f],%f,%f,'%s',%d);\n",use_slider,slider_type,temp,use_slider,int_data[0],int_data[1],line_width,fill_color,stroke_color,fill_opacity,stroke_opacity,double_data[0],double_data[1],font_family,int_data[2]));
18552	bpr	4387	}
		4388	add_to_buffer(tmp_buffer);
		4389	fprintf(js_include_file,"var slider%d;",use_slider);
		4390	use_dragstuff = 2;
		4391	// dragstuff[22] = 1; /* dragstuff switch no 22 is a slider...*/
		4392	if(onclick != 4 ){ js_function[INTERACTIVE] = 1; }/* no need to click on object to use slider... */
		4393	//js_function[JS_ROTATE_MOUSE] = 1;
		4394	c = 0;
		4395	for(i=last_slider;i<=use_slider;i++){
		4396	int_data[c] = i; c++;
		4397	}
		4398	my_sliders = data2js_array(int_data,use_slider - last_slider+1);
		4399	break;
		4400	case SGRAPH:
		4401	/*
18556	bpr	4402	@ sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color
		4403	@ primitive implementation of a ''broken scale`` graph...
		4404	@ not very versatile: only usable in combination with userdraw <br>eg no other objects will obey this "coordinate system"<br>if you want to place an object into this coordinate system, be aware that 10% or 20% of xsize and/or ysize is ''lost``.<br>Use these "formulas" to recalculate the virtual coordinates:<br>factor=0.8 in case xstart != xmin (or ystart != ymin)<br>factor=0.9 in case xstart = xmin (or ystart = ymin)<br>px_x_point = ((factorxsize)/(xmax - xstart))(x_point - xmax)+xsize<br>x_recalculated = px(xmax - xmin)/xsize + $xmin<br>px_y_point = -1factory_pointysize/(ymax - ystart) + ymaxfactorysize/(ymax - ystart)<br>y_recalculated = ymax - py*(ymax - ymin)/ysize<br>
		4405	@%sgraph%size 400,400%xrange 0,10000%yrange 0,100%sgraph 9000,50,100,10,4,4,grey,blue%userinput_xy%linewidth 2%userdraw segments,red%precision 0%mouse blue,22
18552	bpr	4406	*/
		4407	js_function[DRAW_SGRAPH] = 1;
		4408	for(i = 0 ; i < 8 ;i++){
		4409	switch(i){
		4410	case 0:double_data[0] = get_real(infile,0);break;
		4411	case 1:double_data[1] = get_real(infile,0);break;
		4412	case 2:double_data[2] = get_real(infile,0);break;
		4413	case 3:double_data[3] = get_real(infile,0);break;
		4414	case 4:int_data[0] = (int)(get_real(infile,0));break;
		4415	case 5:int_data[1] = (int)(get_real(infile,0));break;
		4416	case 6:stroke_color = get_color(infile,0);break;
		4417	case 7:font_color = get_color(infile,1);
18557	bpr	4418	tmp_buffer=my_newmem(MAX_BUFFER);
		4419	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "xstart = %f;\n ystart = %f;\ndraw_sgraph(%d,%d,%f,%f,%d,%d,\"%s\",\"%s\",\"%s\",%f,%d);\n", double_data[0],double_data[1],GRID_CANVAS,precision,double_data[2],double_data[3],int_data[0],int_data[1],stroke_color,font_color,font_family,stroke_opacity,font_size));
18552	bpr	4420	add_to_buffer(tmp_buffer);
		4421	break;
		4422	default:break;
		4423	}
		4424	}
		4425	/* sgraph(canvas_type,precision,xmajor,ymajor,xminor,yminor,majorcolor,minorcolor,fontfamily,opacity)*/
		4426	break;
		4427	case SNAPTOFUNCTION:
		4428	/*
		4429	@ snaptofunction some_function_in_x,some_funtion_in_y
		4430	@ alternative: snaptofun
		4431	@ the next object will snap to the calculated values
		4432	@ note: snaptofun is probably not really useful feature...
		4433	@ if you want only modification of y-values,just use: <code>snaptofunction x,5*sin(1/y)</code>
		4434	@ if you want only modification of x-values,just use: <code>snaptofunction 5*sin(1/x),y</code>
		4435	@ for now only one instance of ''snaptofunction`` is allowed
		4436	@ use rawmath on your functions: no validity checking is done by wims !
		4437	@ note: switching x and y coordinates? <code>snaptofunction y,x</code>
		4438	@%snaptofunction_1%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%snaptofunction x,5sin(x)%linewidth 3%crosshairsize 6%userdraw crosshairs,red%linewidth 2%curve blue,5sin(x)%xunit = x-value%display x,blue,22
		4439	@%snaptofunction_2%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 100%snaptofunction y^2-9,y%#snaptofunction y^2-9,abs(y)%linewidth 3%crosshairsize 6%userdraw crosshairs,red%linewidth 2%curve blue,sqrt(x+9)%curve blue,-1*sqrt(x+9)%yunit = y-value%display y,blue,22
		4440	*/
		4441	temp = get_string_argument(infile,0);
		4442	use_snap = 2;
		4443	use_snap = 5;
		4444	js_function[JS_MATH] = 1;
		4445	fprintf(js_include_file,"var snap_fun = {x:to_js_math('%s'),y:to_js_math('%s')};function snap_to_fun(px,py){ var x = px2x(px); var y = px2y(py); return [ x2px(eval(snap_fun.x)) , y2px(eval(snap_fun.y)) ];};",temp,get_string(infile,1));
		4446	break;
		4447	case SNAPTOPOINTS:
		4448	/*
		4449	@ snaptopoints x1,y1,x2,y2,x3,y3....
		4450	@ a userdraw object will snap to these points.
18572	bpr	4451	@ the array size (e.g. the number of points) of command ''snaptopoints`` is limited by constant MAX_INT (canvasdraw.h)<br>this command may be repeated multiple times (no limit) to add points
18552	bpr	4452	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the closed of these points when dragged (mouseup)
		4453	@ other options: use keyword ''snaptogrid``, ''xsnaptogrid`` or ''ysnaptogrid``
18616	bpr	4454	@%snaptopoints_1%size 400,400%xrange -5,5%yrange -5,5%snaptopoints -1,-3,-1,-2,-1,0,-1,1,-1,2,-1,3,1,-3,1,-2,1,-1,1,0,1,1,1,2,1,3%linewidth 2%points red,-1,-3,-1,-2,-1,0,-1,1,-1,2,-1,3,1,-3,1,-2,1,-1,1,0,1,1,1,2,1,3%userdraw arrows,red
		4455	@%snaptopoints_2%size 400,400%xrange -5,5%yrange -5,5%snaptopoints -1,-3,-1,-2,-1,0,-1,1,-1,2,-1,3,1,-3,1,-2,1,-1,1,0,1,1,1,2,1,3%linewidth 3%%points blue,-1,-3,-1,-2,-1,0,-1,1,-1,2,-1,3,1,-3,1,-2,1,-1,1,0,1,1,1,2,1,3%drag xy%ftriangle -4,0,-2,3,0,0,red
18552	bpr	4456	*/
		4457	i = 0;
		4458	while( ! done ){ /* get next item until EOL*/
		4459	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		4460	if(i%2 == 0 ){
		4461	double_data[i] = get_real(infile,0); /* x */
		4462	}
		4463	else {
		4464	double_data[i] = get_real(infile,1); /* y */
		4465	}
		4466	i++;
		4467	}
		4468	decimals = find_number_of_digits(precision);
		4469	/* NEED AN EXTRA COUNTER VARIABLE FOR MORE THAN 2 CALLS */
		4470	fprintf(js_include_file,"if( temp_push_array === 'undefined' ){var temp_push_array;};if( points_to_snap_on === 'undefined' ){var points_to_snap_on;};var temp_push_array = [%s];\n",double_xy2js_array(double_data,i,decimals));
		4471	if( snap_to_points_cnt == 0 ){
		4472	fprintf(js_include_file,"points_to_snap_on = temp_push_array;function find_min_diff(x,y,X,Y){var diff = 100000000;var chk;var idx = 0;var p = 0;while(X[p] != null){chk = distance(x,y,X[p],Y[p]);if( chk < diff ){ diff = chk; idx = p;};p++;};return idx;};function snap_to_points(x,y){x = px2x(x); y = px2y(y);var xpoints = points_to_snap_on[0];var ypoints = points_to_snap_on[1];var idx = find_min_diff(x,y,xpoints,ypoints);x = xpoints[idx];y = ypoints[idx];return [x2px(x),y2px(y)];};");
		4473	}else{
		4474	fprintf(js_include_file,"points_to_snap_on[0].push.apply(points_to_snap_on[0],temp_push_array[0]);points_to_snap_on[1].push.apply(points_to_snap_on[1],temp_push_array[1]);");
		4475	}
		4476	snap_to_points_cnt = 1; /* do not repeat including the js-functions...just once*/
		4477	use_snap = 4;
		4478	break;
		4479	case SNAPTOGRID:
		4480	/*
18556	bpr	4481	@ snaptogrid
		4482	@ keyword (no arguments required)
		4483	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the given grid when dragged (mouseup)
		4484	@ in case of userdraw the drawn points will snap to xmajor / ymajor grid
		4485	@ if no grid is defined, points will snap to every integer xrange/yrange value. (eg snap_x=1,snap_y=1)
		4486	@ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0.
		4487	@ if xminor / yminor is defined,(use keyword ''axis`` to activate the minor steps) the drawing will snap to xminor and yminor<br>use only even dividers in x/y-minor...for example <code>snaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code> will snap on x=0, x=0.5, x=1, x=1.5 .... will snap on y=0, y=0.25 y=0.5 y=0.75 ...
		4488	@%snaptogrid_1%size 400,400%xrange -5,5%yrange -5,5%axis%axisnumbering%precision 1%grid 1,1,grey,2,2,6,grey%linewidth 2%snaptogrid%userdraw crosshairs,blue%mouse red,22
		4489	@%snaptogrid_2%size 400,400%xrange -5,5%yrange -5,5%axis%axisnumbering%precision 1%grid 1,1,grey,4,1,6,grey%linewidth 1%snaptogrid%userdraw crosshairs,blue%mouse red,22
18552	bpr	4490	*/
		4491	use_snap = 1;
		4492	break;
		4493	case SQUARE:
		4494	/*
		4495	@ square x,y,side (px),color
		4496	@ draw a square with left top corner (x:y) with side ''side`` in color 'color'
		4497	@ use command <code>fsquare x,y,side,color</code> for a filled square
		4498	@ use command/keyword <a href='#filled'>filled</a> before command <code>square x,y,side,color</code>
		4499	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		4500	@%square%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%filled%fillcolor blue%square 0,0,120,green
		4501	*/
		4502	for(i=0;i<4;i++){
		4503	switch(i){
		4504	case 0:double_data[0] = get_real(infile,0);break; /* x1-values */
		4505	case 1:double_data[1] = get_real(infile,0);break; /* y1-values */
		4506	case 2:double_data[2] = get_real(infile,0);break; /* width in px */
		4507	case 3:stroke_color = get_color(infile,1);/* name or hex color */
		4508	decimals = find_number_of_digits(precision);
		4509	double_data[3] = double_data[0] + (xmax - xmin)*double_data[2]/xsize;
		4510	double_data[4] = double_data[1] + -1(ymax - ymin)double_data[2]/ysize;
		4511	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4512	tmp_buffer=my_newmem(MAX_BUFFER);
		4513	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,1,[%.f,%.f,%.f,%.f],[%.f,%.f,%.f,%.f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[3],decimals,double_data[3],decimals,double_data[0],decimals,double_data[1],decimals,double_data[1],decimals,double_data[4],decimals,double_data[4],line_width,line_width,line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4514	add_to_buffer(tmp_buffer);
		4515	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		4516	reset();break;
		4517	default: break;
		4518	}
		4519	}
		4520	dragstuff[1] = 1;
		4521	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4522	break;
		4523	case STATUS:
		4524	/*
		4525	@ status
		4526	@ keyword
		4527	@ alernative: nostatus
		4528	@ used to override the effects of ''status=done`` in wims (answer.phtml)
		4529	@ affects ''readonly`` in inputfields / textareas in canvasimage and all userdraw based commands
		4530	@ e.g.: if keyword ''status`` is set, the pupil will be able to modify the canvas when the ''wims $status variable`` is set to ''done``
		4531	*/
11806	schaersvoo	4532
18552	bpr	4533	fprintf(js_include_file,"\nwims_status=\"waiting\";\n");
		4534	break;
		4535	case STRING:
		4536	/*
18556	bpr	4537	@ string color,x,y,the text string
		4538	@ may be set ''onclick`` or ''drag xy``
		4539	@ note: when set ''onclick``, use an extra command ''fontsize`` (default: fontsize=12) to adjust the size of the clicked text-string<br>note: a clicked text string will be hardcoded : fontsize+10 in the font family courier
18572	bpr	4540	@ unicode supported: <code>string red,0,0,\\u2232</code><br> See <a target='new' href='https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode'>https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode</a><br> See <a target='new' href='https://en.wikipedia.org/wiki/Greek_script_in_Unicode'>https://en.wikipedia.org/wiki/Greek_script_in_Unicode</a>
18556	bpr	4541	@ use a command like <code>fontfamily italic 24px Arial</code> to set fonts on browser that support font change
		4542	@ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>The font family for the sub/sup string will be Helvetica e.g. your font family settings will be ignored <br>to force end the subscript/supscript, use an extra space...see example:
		4543	@%string_sup_sub%size 400,400%xrange -6,6%yrange -6,6%fontfamily 22px Arial%# you can use a single space for separation in formula...%# use double space to create new word%string blue,-5,3,H_3O^+ + OH^- \\u2192 2H_2O%# you can use a single space for separation in formula...%string red,-5,-3,H_3 O^+ + OH^\\u2212 \\u2192 2H_2 O%
		4544	@%string%size 400,400%xrange -10,10%yrange -10,10%fontfamily 14px Arial%crosshair -3,-3,red%crosshair 3,3,blue%string red,-3,-3,Hello World%fontfamily Italic 18px Arial%string red,3,3,Hello World%fontfamily 22pt STIX%string black,-10,8,\\u03B1 \\u03B2 \\u03B3 \\u03B4 \\u03B5 \\u03B6 \\u03B7 \\u03B8 \\u03B9 \\u03BA \\u03BB \\u03BC \\u03BD \\u03BE \\u03BF
18552	bpr	4545	*/
		4546	if( use_rotate == TRUE ){js_function[JS_ROTATE_MOUSE] = 1; }
		4547	dragstuff[14] = 1;
		4548	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4549	for(i=0;i<5;i++){
		4550	switch(i){
		4551	case 0: stroke_color = get_color(infile,0);break;/* name or hex color */
		4552	case 1: double_data[0] = get_real(infile,0);break; /* x in xrange*/
		4553	case 2: double_data[1] = get_real(infile,0);break; /* y in yrange*/
		4554	case 3: decimals = find_number_of_digits(precision);
		4555	if(use_affine == TRUE ){ transform(2,2);}
		4556	/* rotate is done by HTML5/CANVAS context rotation */
		4557	temp = get_string_argument(infile,1);
		4558	if(strstr(temp,"_") != NULL \|\| strstr(temp,"^") != NULL){js_function[DRAW_SUBSUP] = 1;}
		4559	decimals = find_number_of_digits(precision);
		4560	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4561	tmp_buffer=my_newmem(MAX_BUFFER);
		4562	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,14,[%.f],[%.f],[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,0,0,0,use_rotate,angle,temp,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4563	add_to_buffer(tmp_buffer);
		4564	if(onclick != 0){object_cnt++;}
		4565	//onclick = 0;
		4566	//use_offset = 0;
		4567	reset();
		4568	break;
		4569	default:break;
		4570	}
		4571	}
		4572	break;
		4573	case STRINGUP:
		4574	/*
18556	bpr	4575	@ stringup color,x,y,rotation_degrees,the text string
		4576	@ may be set ''onclick`` or ''drag xy``
		4577	@ note: when set ''onclick``, use an extra command ''fontsize`` (default: fontsize=12) to adjust the size of the clicked text-string<br>note: a clicked text string will be hardcoded : fontsize+10 in the font family courier
		4578	@ unicode supported: <code>stringup red,0,0,45,\\u2232</code>
		4579	@ use a command like <code>fontfamily bold 34px Courier</code> to set fonts on browser that support font change
		4580	@ you could use keyword <a href='#yoffset'>yoffset</a> to -sometimes- do a small correction of text placement under/above a point (e.g. text & point have thesame coordinates)
18572	bpr	4581	@ note: no need to ''killrotate`` after ''stringup``<br><code>onclick<br>rotate 45<br>string red,0,0,AAAAAA<br>killrotate<br>string red,4,4,BBBBBB</code><br>is identical with:<br><code>onclick<br>stringup red,0,0,45,AAAAAA<br>string red,4,4,BBBBBB</code>
18556	bpr	4582	@ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see example:
		4583	@%stringup_sub_sup%size 400,400%xrange -6,6%yrange -6,6%fontfamily 22px Arial%# use single space for separation in formula...%# use double space to create new word%stringup red,-5,0,45,H_3 O^+ + OH^\\u2212 \\u2192 2H_2 O%
		4584	@%stringup%size 400,400%xrange -10,10%yrange -10,10%fontsize 24%fontfamily 14px Arial%crosshair -3,0,red%crosshair 3,0,blue%onclick%stringup red,-3,0,-90,Hello World%drag xy%stringup red,-3,0,-45,Hello World%stringup red,-3,0,45,Hello World%stringup red,-3,0,90,Hello World%stringup blue,3,0,-90,Hello World%stringup blue,3,0,-45,Hello World%stringup blue,3,0,45,Hello World%stringup blue,3,0,90,Hello World
11806	schaersvoo	4585
18552	bpr	4586	*/
		4587	/* html5 canvas rotation is only used for text objects */
		4588	use_rotate = TRUE ;
		4589	dragstuff[14] = 1;
		4590	js_function[JS_ROTATE_MOUSE] = 1;
		4591	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
10953	bpr	4592
18552	bpr	4593	for(i=0;i<6;i++){
		4594	switch(i){
		4595	case 0: stroke_color = get_color(infile,0);break;/* name or hex color */
		4596	case 1: double_data[0] = get_real(infile,0);break; /* x */
		4597	case 2: double_data[1] = get_real(infile,0);break; /* y */
		4598	case 3: angle = get_real(infile,0);break;/* rotation */
		4599	case 4: decimals = find_number_of_digits(precision);
		4600	temp = get_string_argument(infile,1);
		4601	if(strstr(temp,"_") != NULL \|\| strstr(temp,"^") != NULL){js_function[DRAW_SUBSUP] = 1;}
		4602	decimals = find_number_of_digits(precision);
		4603	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4604	tmp_buffer=my_newmem(MAX_BUFFER);
		4605	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,14,[%.f],[%.f],[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,0,0,0,use_rotate,angle,temp,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4606	add_to_buffer(tmp_buffer);
		4607	if(onclick != 0){object_cnt++;}
		4608	//onclick = 0;
		4609	//use_offset = 0;
		4610	reset();
		4611	break;
		4612	default:break;
		4613	}
		4614	}
		4615	use_rotate = FALSE;
		4616	break;
		4617	case STYLE:
		4618	/*
18556	bpr	4619	@ highlight color,opacity,linewidth
		4620	@ NOT IMPLEMENTED
		4621	@ use command ''onclick``: when the object receives a userclick it will increase its linewidth
18552	bpr	4622	*/
		4623	break;
		4624	case STROKECOLOR:
		4625	/*
		4626	@ strokecolor colorname or #hex
		4627	@ to be used for commands that do not supply a color argument (like command ''linegraph``)
		4628	*/
		4629	stroke_color = get_color(infile,1);
		4630	break;
		4631	case FLY_TEXT:
		4632	/*
		4633	@ text fontcolor,x,y,font,text_string
		4634	@ font may be described by keywords: giant,huge,normal,small,tiny
		4635	@ use command ''fontsize`` to increase base fontsize for these keywords
		4636	@ may be set ''onclick`` or ''drag xy``
		4637	@ backwards compatible with flydraw
		4638	@ unicode supported: text red,0,0,huge,\\u2232
		4639	@ special: use '_' and '^' to imitate html sup/sub, like H_3O^+ + OH^\\u22i2 \\u2192 2H_2 O
		4640	@ much better to use command <a href='#string'>string</a> combined with <a href='#fontfamily'>fontfamily</a> for a more fine grained control over html5 canvas text element
		4641	@ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see <a href='#string'>string </a> command
		4642	@ Avoid mixing old flydraw commands ''text``, ''textup`` with new canvasdraw commands ''string``, ''stringup``. If the fontfamily was set completely like <code>fontfamily italic 24px Arial</code>. In that case reset ''fontfamily`` to something lke ''fontfamily Arial`` before the old flydraw commands.
		4643	@%text%size 400,400%xrange -10,10%yrange -10,10%fontsize 14%onclick%drag xy%text green,-4,-4,small,Hello World%drag xy%text red,-4,-2,large,Hello World%drag xy%text blue,-4,0,huge,Hello World%drag xy%text green,-4,3,giant,Hello World%drag xy
		4644	*/
		4645	for(i = 0; i < 5 ;i++){
		4646	switch(i){
		4647	case 0: stroke_color = get_color(infile,0);break;/* font_color == stroke_color name or hex color */
		4648	case 1: double_data[0] = get_real(infile,0);break; /* x */
		4649	case 2: double_data[1] = get_real(infile,0);break; /* y */
		4650	case 3: fly_font = get_string_argument(infile,0);
		4651	if(strcmp(fly_font,"giant") == 0){
		4652	fly_font_size = (int)(font_size + 24);
		4653	}
		4654	else {
		4655	if(strcmp(fly_font,"huge") == 0){
		4656	fly_font_size = (int)(font_size + 14);
		4657	}
		4658	else {
		4659	if(strcmp(fly_font,"large") == 0){
		4660	fly_font_size = (int)(font_size + 6);
		4661	}
		4662	else {
		4663	if(strcmp(fly_font,"small") == 0){
		4664	fly_font_size = (int)(font_size - 4);
		4665	if(fly_font_size<0){fly_font_size = 8;}
		4666	}
		4667	}
		4668	}
		4669	}
		4670	break;
		4671	case 4:
		4672	temp = get_string_argument(infile,1);
		4673	if(strstr(temp,"_") != NULL \|\| strstr(temp,"^") != NULL){js_function[DRAW_SUBSUP] = 1;}
		4674	decimals = find_number_of_digits(precision);
		4675	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4676	if(use_affine == TRUE ){ transform(2,2);}
18557	bpr	4677	tmp_buffer=my_newmem(MAX_BUFFER);
		4678	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,14,[%.f],[%.f],[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%f,\"%s\",%d,%s,%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,0,0,0,use_rotate,angle,temp,fly_font_size,"null",my_sliders,rotation_center,use_offset));
18552	bpr	4679	add_to_buffer(tmp_buffer);
		4680	if(onclick != 0){object_cnt++;}
		4681	reset();
		4682	break;
		4683	default:break;
		4684	}
		4685	}
		4686	dragstuff[14] = 1;
		4687	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4688	break;
		4689	case TEXTAREA:
		4690	/*
18556	bpr	4691	@ textarea x,y,cols,rows,readonly,value
		4692	@ may be further controlled by <a href="#css">css</a>
		4693	@ if ''$status=done`` (e.g. in answer.phtml) the inputfield will be cleared and set readonly. Override this by keyword <a href="#status">status</a>.
		4694	@ if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (<code>javascript:read_canvas();</code>)
		4695	@ keyword ''xoffset \| centered`` is not active for command ''textarea``
		4696	@%textarea%size 400,400%xrange -10,10%yrange -10,10%css color:red;background-color:lightblue;font-size:14px;text-align:center%textarea -3,-2,6,3,1,?%css color:blue;background-color:yellow;font-size:14px;text-align:center%textarea 0,-2,8,2,1,?
18552	bpr	4697	*/
		4698	js_function[DRAW_TEXTAREAS] = 1;
		4699	for(i = 0 ; i<6;i++){
		4700	switch(i){
		4701	case 0: int_data[0]=x2px(get_real(infile,0));break; /* x in px */
		4702	case 1: int_data[1]=y2px(get_real(infile,0));break; /* y in px */
		4703	case 2: int_data[2]=abs( (int)(get_real(infile,0)));break;/* cols */
		4704	case 3: int_data[3]=abs( (int)(get_real(infile,0)));break;/* rows */
		4705	case 4: if( get_real(infile,1) >0){int_data[4] = 1;}else{int_data[3] = 0;};break; /* readonly */
		4706	case 5: temp = get_string_argument(infile,1);
18557	bpr	4707	tmp_buffer=my_newmem(MAX_BUFFER);
		4708	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_textareas(%d,%d,%d,%d,%d,%d,%d,\"%s\",\"%s\");\n",canvas_root_id,input_cnt,int_data[0],int_data[1],int_data[2],int_data[3],int_data[4],css_class,temp));
18552	bpr	4709	add_to_buffer(tmp_buffer);
		4710	input_cnt++;break;
		4711	default: break;
		4712	}
		4713	}
		4714	if(reply_format == 0 ){reply_format = 15;}
		4715	reset();
		4716	break;
		4717	case TEXTFILL:
		4718	/*
		4719	@ textfill x0,y0,color,some_text
		4720	@ x0,y0 in xrange / yrange
		4721	@ color will be used for the font color
		4722	@ use command <a href="#fontfamily">fontfamily</a> to set font type and size
		4723	@ there is also a command <a href="#userdraw">userdraw textfill,color,some_text</a>
		4724	@%textfill%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%fontfamily 24pt Arial%circles red,0,0,3,3,3,6%textfill 4,4,blue,HELLO WORLD
		4725	*/
11806	schaersvoo	4726
18552	bpr	4727	js_function[DRAW_TEXTFILL] = 1;
		4728	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		4729	js_function[DRAW_FILLTOBORDER] = 1;
		4730	add_js_filltoborder(canvas_type);
		4731	}
		4732	decimals = find_number_of_digits(precision);
		4733	for(i=0;i<4;i++){
		4734	switch(i){
		4735	case 0: double_data[0] = get_real(infile,0); break; /* x in px */
		4736	case 1: double_data[1] = get_real(infile,0); break; /* y in py */
		4737	case 2: font_color = get_color(infile,0); break;
		4738	case 3: temp = get_string(infile,1);
18557	bpr	4739	tmp_buffer=my_newmem(MAX_BUFFER);
		4740	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_textfill(%d,%.f,%.f,'%s','%s',%d,%d,'%s',false); ",FILL_CANVAS+fill_cnt,decimals,double_data[0],decimals,double_data[1],font_color,font_family,xsize,ysize,temp));
18552	bpr	4741	add_to_buffer(tmp_buffer);
		4742	fill_cnt++;
		4743	break;
		4744	default:break;
		4745	}
		4746	}
		4747	reset();
		4748	break;
		4749	case FLY_TEXTUP:
		4750	/*
18556	bpr	4751	@ textup fontcolor,x,y,font,text_string
		4752	@ can <b>not</b> be set ''onclick`` or ''drag xy`` (because of translaton matrix...mouse incompatible)
		4753	@ font may be described by keywords: giant,huge,normal,small,tiny
		4754	@ use command ''fontsize`` to increase base fontsize for the keywords
		4755	@ backwards compatible with flydraw
		4756	@ unicode supported: textup red,0,0,huge,\\u2232
		4757	@ use command ''stringup`` and ''fontfamily`` for a more fine grained control over html5 canvas text element
		4758	@ Avoid mixing old flydraw commands ''text``, ''textup`` with new canvasdraw commands ''string``; ''stringup``. If the fontfamily was set completely like <code>fontfamily italic 24px Arial</code>. In that case reset ''fontfamily`` to something like ''fontfamily Arial`` before the old flydraw commands.
18552	bpr	4759	*/
		4760	js_function[DRAW_TEXTS] = 1;
		4761	for(i = 0; i<5 ;i++){
		4762	switch(i){
		4763	case 0: font_color = get_color(infile,0);break;/* name or hex color */
		4764	case 1: int_data[0] = x2px(get_real(infile,0));break; /* x */
		4765	case 2: int_data[1] = y2px(get_real(infile,0));break; /* y */
		4766	case 3: fly_font = get_string_argument(infile,0);
		4767	if(strcmp(fly_font,"giant") == 0){
		4768	fly_font_size = (int)(font_size + 24);
		4769	}
		4770	else {
		4771	if(strcmp(fly_font,"huge") == 0){
		4772	fly_font_size = (int)(font_size + 14);
		4773	}
		4774	else {
		4775	if(strcmp(fly_font,"large") == 0){
		4776	fly_font_size = (int)(font_size + 6);
		4777	}
		4778	else {
		4779	if(strcmp(fly_font,"small") == 0){
		4780	fly_font_size = (int)(font_size - 4);
		4781	if(fly_font_size<0){fly_font_size = 8;}
		4782	}
		4783	}
		4784	}
		4785	}
		4786	break;
		4787	case 4:
		4788	decimals = find_number_of_digits(precision);
		4789	temp = get_string_argument(infile,1);
		4790	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4791	tmp_buffer=my_newmem(MAX_BUFFER);
		4792	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_text(%d,%d,%d,%d,\"%s\",\"%s\",%.2f,90,\"%s\",%d,%.2f,%d);\n",STATIC_CANVAS,int_data[0],int_data[1],fly_font_size,"null",font_color,stroke_opacity,temp,use_rotate,angle,use_offset));
18552	bpr	4793	add_to_buffer(tmp_buffer);
		4794	reset();
		4795	//use_offset = 0;
		4796	break;
		4797	default:break;
		4798	}
		4799	}
		4800	break;
		4801	case TRACE_JSCURVE:
		4802	/*
18556	bpr	4803	@ trace_jscurve some_math_function
		4804	@ will use a crosshair to trace the jsmath curve
		4805	@ two inputfields will display the current x/y-values (numerical evaluation by javascript)
		4806	@ default labels ''x`` and ''y``; use commands ''xlabel some_x_axis_name`` and ''ylabel some_y_axis_name`` to customize the labels for the input fields
		4807	@ use commands fontsize and css to format the fonts for labels and inputfields.
		4808	@ use commands ''linewidth, strokecolor, crosshairsize`` to adjust the corsshair.
		4809	@ the client browser will convert your math function to javascript math.<br>use parenthesis and rawmath: use 2*x instead of 2x etc etc no check is done on the validity of your function and/or syntax (use error console to debug any errors...)
		4810	@ be aware that the formulas of the plotted function(s) can be found in the page javascript source
		4811	@%trace_jscurve%size 400,400%xrange -10,10%yrange -10,10%precision 0%axis%axisnumbering%grid 2,2,grey,2,2,5,gray%recision 100%css color:blue;%linewidth 4%crosshairsize 8%trace_jscurve 5sin(0.1x^2)%linewidth 1%jsplot red,5sin(0.1x^2)%#only one curve can be traced
18552	bpr	4812	*/
		4813	js_function[INTERACTIVE] = 1;
		4814	js_function[DRAW_CROSSHAIRS] = 1;
		4815	js_function[DRAW_LINES] = 1;
		4816	js_function[JS_MATH] = 1;
		4817	add_trace_js_mouse(TRACE_CANVAS,stroke_color,get_string(infile,1),font_size,stroke_opacity,line_width,crosshair_size,css_class);
		4818	break;
		4819	case TRANGE:
		4820	/*
		4821	@ trange tmin,tmax
		4822	@ alternative: ranget
		4823	@ default -2,2
		4824	*/
		4825	use_parametric = TRUE;
		4826	for(i = 0 ; i<2; i++){
		4827	switch(i){
		4828	case 0: tmin = get_real(infile,0);break;
		4829	case 1: tmax = get_real(infile,1);break;
		4830	default: break;
		4831	}
		4832	}
		4833	if(tmin >= tmax ){canvas_error(" trange is not OK: tmin < tmax!\n");}
		4834	break;
		4835	case TRANSLATION:
		4836	/*
18556	bpr	4837	@ translation tx,ty
		4838	@ alternative: translate
		4839	@ will translate the next objects tx in xrange and ty in yrange
		4840	@ use command ''killtranstation`` to end the command
18569	bpr	4841	@%translation%size 400,400%xrange -10,10%yrange -10,10%linewidth 1%fillpattern grid%triangle -6,6,8,6,5,1,blue%translation 2,2%ftriangle -6,6,8,6,5,1,red
18552	bpr	4842	*/
		4843	for(i = 0 ; i<2;i++){
		4844	switch(i){
		4845	case 0: affine_matrix[4] = get_real(infile,0);break;
		4846	case 1: affine_matrix[5] = get_real(infile,1);
		4847	use_affine = TRUE;
		4848	/* the other values affine_matrix[0..3] remain untouched*/
		4849	break;
		4850	default: break;
		4851	}
		4852	}
		4853	break;
		4854	case TRIANGLE:
		4855	/*
18556	bpr	4856	@ triangle x1,y1,x2,y2,x3,y3,color
		4857	@ use ftriangle or keyword <a href='#filled'>filled</a> for a solid triangle
		4858	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		4859	@%triangle%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%opacity 250,150%drag xy%triangle 0,0,-4,4,6,8,red%drag xy%ftriangle 0,0,-4,-4,6,-8,red%fillpattern grid%drag xy%ftriangle -6,6,8,6,5,1,blue
18552	bpr	4860	*/
		4861	for(i=0;i<7;i++){
		4862	switch(i){
		4863	case 0: double_data[0] = get_real(infile,0);break; /* x */
		4864	case 1: double_data[1] = get_real(infile,0);break; /* y */
		4865	case 2: double_data[2] = get_real(infile,0);break; /* x */
		4866	case 3: double_data[3] = get_real(infile,0);break; /* y */
		4867	case 4: double_data[4] = get_real(infile,0);break; /* x */
		4868	case 5: double_data[5] = get_real(infile,0);break; /* y */
		4869	case 6: stroke_color = get_color(infile,1);/* name or hex color */
		4870	decimals = find_number_of_digits(precision);
18623	bpr	4871	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	4872	if( use_rotate == TRUE ){ rotate(6,angle,rotationcenter,2);}
		4873	if( use_affine == TRUE ){ transform(6,2);}
		4874	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4875	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	4876	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,5,%s,[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,double_xy2js_array(double_data,6,decimals),line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4877	add_to_buffer(tmp_buffer);
		4878	if(onclick != 0){object_cnt++;}
		4879	/* object_cnt++;*/
		4880	reset();
		4881	break;
		4882	default: break;
		4883	}
		4884	}
		4885	dragstuff[5] = 1;
		4886	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4887	break;
		4888	case TRIANGLES:
		4889	/*
18556	bpr	4890	@ triangles color,x1,y1,x2,y2,x3,y3,...
		4891	@ use ftriangles or keyword <a href='#filled'>filled</a> for solid triangles
		4892	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		4893	@%triangles%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%onclick%triangles red,0,0,-4,4,6,8,0,0,-4,-4,6,-8,-6,6,8,6,5,1%# the same as 3 calls to command triangle
18552	bpr	4894	*/
		4895	stroke_color = get_color(infile,0);/* name or hex color */
18623	bpr	4896	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	4897	i = 0;
		4898	decimals = find_number_of_digits(precision);
		4899	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4900	while( ! done ){
		4901	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		4902	double_data[0] = get_real(infile,0); /* x1 */
		4903	double_data[1] = get_real(infile,0); /* y1 */
		4904	double_data[2] = get_real(infile,0); /* x2 */
		4905	double_data[3] = get_real(infile,0); /* y2 */
		4906	double_data[4] = get_real(infile,0); /* x3 */
		4907	double_data[5] = get_real(infile,1); /* y3 */
18557	bpr	4908	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	4909	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,5,%s,[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,double_xy2js_array(double_data,6,decimals),line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	4910	add_to_buffer(tmp_buffer);
		4911	if(onclick != 0){object_cnt++;}
		4912	i = i + 6;
		4913	}
		4914	reset();
		4915	dragstuff[5] = 1;
		4916	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4917	break;
		4918	case USERBOXPLOT:
		4919	/*
18556	bpr	4920	@ userboxplot
		4921	@ keyword, no arguments
		4922	@ use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a>
		4923	@ if set, the student will have to calculate "min,Q1,median,Q3,max" and feed these data into the ''draw_boxplot`` function
		4924	@ for example: put the canvas-script into a html element with id='boxplot' and set style='display:none'<br>define a variable called ''student_boxplot`` and fill it with the 5 student-data (from inputfields or something)<br><code>var student_boxplot = new Array(5)<br>function show_boxplot(){<br>student_boxplot[0] = min;<br>student_boxplot[1] = Q1;<br>student_boxplot[2] = median;<br>student_boxplot[3] = Q3;<br>student_boxplot[4] = max;<br>document.getElementById('boxplot').style.display = "block";<br>draw_boxplot(12345,1,2.00,5.00,[0,0,0,0,0],4,"0,0,255",0.78,"255,165,0",0.60,1,0,1,1);<br>};</code><br>In the canvas-script the function draw_boxplot has the following arguments:<br>draw_boxplot=function(canvas_type,xy,hw,cxy,data,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype0,dashtype1)
18552	bpr	4925	*/
		4926	js_function[DRAW_BOXPLOT] = 1;
		4927	fprintf(js_include_file,"var boxplot_source = 3;\n");
		4928	js_function[DRAW_JSBOXPLOT] = 2;
		4929	break;
		4930	case USERBOXPLOTDATA:
		4931	/*
18556	bpr	4932	@ userboxplotdata
		4933	@ keyword, no arguments
		4934	@ use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a>
		4935	@ if set, the student will have to generate some statistical data. These data should be put in a named array ''student_boxplot_data``
		4936	@ ''min,Q1,median,Q3,max`` are calculated by a js-function and the 'draw_boxplot' function will draw a boxplot.
		4937	@ see command <a href="#userboxplot">userboxplot</a> for calling 'draw_boxplot()'
18552	bpr	4938	*/
		4939	js_function[DRAW_BOXPLOT] = 1;
		4940	fprintf(js_include_file,"var boxplot_source = 2;\n");
		4941	js_function[DRAW_JSBOXPLOT] = 1;
		4942	break;
		4943	case USERDRAW:
		4944	/*
		4945	@ userdraw object_type,color
		4946	@ only a single object_type is allowed.
		4947	@ right mouse click will remove last drawn object.
		4948	@ for multiple different 'userdraw' objects in an exercise, use command <a href="#multidraw">multidraw</a>
18572	bpr	4949	@ implemented object_type: <ul><li>point</li><li>points</li><li>crosshair</li><li>crosshairs</li><li>line</li><li>lines</li><li>vline</li><li>vlines</li><li>hline</li><li>hlines</li><li>demiline</li><li>demilines</li><li>segment</li><li>segments</li><li>polyline \| brokenline</li><li>circle</li><li>circles</li><li>arrow</li><li>arrow2 (double arrow)</li><li>arrows</li><li>arrows2 (double arrows)</li><li>curvedarrow</li><li>curvedarrows</li><li>curvedarrow2</li><li>curvedarrows2</li><li>triangle</li><li>polygon</li><li>poly[3-9] (e.g poly3 ... poly7...poly9</li><li>rect</li><li>roundrect</li><li>rects</li><li>roundrects</li><li>freehandline \| path</li><li>freehandlines \| paths</li><li>clickfill: fill the clicked area with color<br>multiple areas may be selected <br>multiple colors may be provided using commands <a href='#colorpalette'>colorpalette color1,color2,color3,...</a> use <a href='#replyformat'>replyformat 10</a> for checking the user click color ... reply=x1:y1:color1,x2:y2:color2...<br>attention: this will <b>not</b> work for pattern filling, because the pattern image is only generated once and after creation can not be changed !<br>the opacity of this image on a separate canvas is set to 0.01 and not 0 (!!)...in the ''fill algorithm`` the opacity of the matching pixels is set to 1</li><li>dotfill: fill the clicked area with a dot pattern; use command linewidth to change dot size</li><li>diamondfill: fill the clicked area with a diamond pattern</li><li>hatchfill: fill the clicked area with a hatch pattern</li><li>gridfill: fill the clicked area with a grid pattern</li><li>textfill: fill the clicked area with a repeating string<br>userdraw textfill,blue,some_text<br>use command <a href="#fontfamily">fontfamily</a> to adjust text style and size</li><li>''clickfill \| pattern filling`` in general:<br>the clicks may be set <a href="#snaptogrid">snaptogrid</a><br>can be used together with command <a href="#floodfill">floodfill or fill</a><br><b>always</b> use together with command <a href="#clearbutton">clearbutton some_text</a> for removal of all click_colored areas<br>the function read_canvas() will return the click coordinates in the sequence of the user clicks<br>use command <a href="#canvastype">canvastype</a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)</li><li>text <br>an inputfield is provided, unicode allowed. The text is drawn a the mouse click, or if used with command ''userinput inputfield`` also at the given x/y-coordonates</li><li>arc</li><li>arcs</li><li>image<br>only a single "image" of every supported type() may be added to canvas window from the surrounding html page.<br>the image should have an 'id' and an onclick handler.<br>() supported types are ''svg``,''bitmap``,''p-element``,''div-element`` and ''mathml/tex-code`` with ''\\mmlid{int}``.</li><li>images</li><li>input<br>place a single inputfield on ''canvas`` <br>use commands 'css' for css styling: use command ''linewidth`` for adjusting the input field size (default 1)</li><li>inputs<br>place multiple inputfield: placing inputfields on top of each other is not possible</li><li>function : identical to <a href="#userinput">userinput function</a></li></ul>
18552	bpr	4950	@ note: mouselisteners are only active if ''$status != done`` (eg only drawing in an active/non-finished exercise) <br> to overrule use command/keyword ''status`` (no arguments required)
		4951	@ note: object_type text: Any string or multiple strings may be placed anywhere on the canvas.<br>Use command ''fontfamily`` to set font
		4952	@ note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again.
		4953	@ note: all objects will be removed -after a javascript confirm box- when clicked on an object point with middle or right mouse button (e.g. event.button != 1: all buttons but left)
18572	bpr	4954	@ use a prefix <a href='#filled'>filled</a> or ''f`` to set fillable objects filled. (fcircles,filledcircles etc)<br> in case of ''fillpattern`` do not use the ''f`` prefix !
18552	bpr	4955	@ for non solid filling, use command <a href="#fillpattern">fillpattern grid,hatch,diamond,dot</a>
		4956	@ use <a href='#opacity'>opacity int,int</a> and <a href='#fillcolor'>fillcolor color</a> to trigger coloured filling of fillable objects
		4957	@ use command ''dashed`` and/or ''dashtype int,int`` to trigger dashing
		4958	@ use command ''replyformat int`` to control / adjust output formatting of javascript function read_canvas(); (the defaults should be fine...)
		4959	@ may be combined with onclick or drag xy of other components of flyscript objects (although not very useful...)
		4960	@ may be combined with keyword <a href='#userinput_xy'>userinput_xy</a>
		4961	@ may be combined width the <a href='#snaptogrid'>snaptogrid snaptopoints </a> etc, to simplify the checking of the student reply
		4962	@ the cursor may be appropriately styled using command <a href='cursor'>cursor</a>
		4963	@ note: when zooming / panning after a drawing, the drawing will NOT be zoomed / panned...this is a "design" flaw and not a feature <br>To avoid trouble do not use zooming / panning together width userdraw.!<br>use command <a href="#multidraw">multidraw</a> is this is a problem for you...
		4964	@ note: the default replyformat for ''userdraw input(s),color`` used format x1;y1;text1 \n x2;y2;test2 \n x_n;y_n;text_n (e.g. it is not a comma separated array...use ''direct exec`` to test)
		4965	@ note: a special case is ''userdraw image,boguscolor``. Images (bitmap or svg or div) present in the exercise page and the img/svg/div-tag with an unique 'id' and <code>onclick='javascript:place_image_on_canvas(this.id)'</code> can be placed onto the canvas.<br>The ''id`` and (x;y) coordinates will be returned using read_canvas();<br> native MathML, MathJax or KaTeX typesetting may be included in div's.(experiments; wims_modules svn version only!)
		4966	@ note: command <br><code>userdraw function,color</code> is identical to acombination of <code>strokecolor color</code> and <code>userinput function</code><br>
18572	bpr	4967	@ note: commands :<br><code>multicolors red,green,blue<br>multilabel f(x)=:g(x)=:h(x)=<br>userdraw functions3,color</code><br>is identical to commands :<br><code>functionlabel f(x)=:p(x)=:w(x)=<br>strokecolor red<br>userinput function <br>strokecolor green<br>userinput function <br>strokecolor blue<br>userinput function</code>
18552	bpr	4968	@%userdraw_canvastype_a%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%grid 2,2,grey%replyformat 10%colorpalette orange,yellow,red,green,lightgreen,blue,lightblue,cyan%canvastype 4%userdraw clickfill,blue%clearbutton REMOVE LAST RECTANGLE
		4969	@%userdraw_canvastype_b%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%canvastype 4%snaptogrid%replyformat 10%userdraw dotfill,blue%clearbutton REMOVE LAST RECTANGLE
		4970	@%userdraw_rect%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw rect,green
		4971	@%userdraw_rects%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw rects,green
		4972	@%userdraw_frect%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw frect,green
18635	bpr	4973	@%userdraw_frects%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw rects,green
		4974	@%userdraw_roundrect%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw roundrect,green
		4975	@%userdraw_roundrects%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw roundrects,green
		4976	@%userdraw_froundrect%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw roundrect,green
		4977	@%userdraw_froundrects%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw roundrects,green
18552	bpr	4978	@%userdraw_line%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw line,green
		4979	@%userdraw_lines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw lines,green
		4980	@%userdraw_vline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw vline,green
		4981	@%userdraw_vlines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw vlines,green
		4982	@%userdraw_hline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw hline,green
		4983	@%userdraw_hlines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw hlines,green
		4984	@%userdraw_demiline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw demiline,green
		4985	@%userdraw_demilines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw demilines,green
		4986	@%userdraw_arc%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw arc,green
		4987	@%userdraw_arcs%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw arcs,green
		4988	@%userdraw_point%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw point,green
		4989	@%userdraw_points%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw points,green
		4990	@%userdraw_arrow%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrow,green
		4991	@%userdraw_arrows%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrows,green
		4992	@%userdraw_arrow2%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrow2,green
		4993	@%userdraw_arrows2%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrows2,green
		4994	@%userdraw_curvedarrow%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 1%linewidth 3%userdraw curvedarrow,red%clearbutton REMOVE ALL ARROWS
		4995	@%userdraw_curvedarrows%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 1%linewidth 3%userdraw curvedarrows,red%clearbutton REMOVE ALL ARROWS
		4996	@%userdraw_curvedarrow2%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 1%linewidth 3%userdraw curvedarrow2,red%clearbutton REMOVE ALL ARROWS
		4997	@%userdraw_curvedarrows2%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%precision 1%linewidth 3%userdraw curvedarrows2,red%clearbutton REMOVE ALL ARROWS
		4998	@%userdraw_crosshair%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw crosshair,green
		4999	@%userdraw_crosshairs%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw crosshairs,green
18635	bpr	5000	@%userdraw_circle%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw circle,green
		5001	@%userdraw_circles%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw circles,green
18552	bpr	5002	@%userdraw_segment%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw segment,green
		5003	@%userdraw_segments%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw segments,green
		5004	@%userdraw_line%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw line,green
		5005	@%userdraw_lines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw lines,green
18635	bpr	5006	@%userdraw_triangle%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%filled%opacity 200,50%userdraw triangle,green
		5007	@%userdraw_poly5%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw poly5,green
18552	bpr	5008	@%userdraw_filled_poly5%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%filled%userdraw poly5,green
		5009	@%userdraw_poly7%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%userdraw poly7,green
		5010	@%userdraw_filled_poly7%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%filled%userdraw poly7,green
18635	bpr	5011	@%userdraw_polyline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw polyline,green
18552	bpr	5012	@%userdraw_freehandline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw freehandline,green
		5013	@%userdraw_filled_freehandline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%fillcolor orange%opacity 200,50%filled%userdraw freehandline,green
		5014	@%userdraw_freehandlines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw freehandlines,green
		5015	@%userdraw_input%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%userdraw input,green
		5016	@%userdraw_inputs%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%userdraw inputs,green
		5017	@%userdraw_text%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%fontfamily 42px Courier%userdraw text,green
		5018	@%userdraw_function%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 1%grid 2,2,grey,2,2,5,grey%multicolors orange,red,green,blue,cyan%precision 1000%userdraw functions3,red%jscurve blue,x^2,-x^2,5*cos(x)%precision 1%mouse red,22
		5019	@%userdraw_clickfill_colorpalette%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%circles blue,0,0,4,1,1,6,3,3,3,-3,-3,5%opacity 255,120%colorpalette red,green,yellow,blue%userdraw clickfill,green
		5020	@%userdraw_clickfill_1%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%circles blue,0,0,4,1,1,6,3,3,3,-3,-3,5%opacity 255,120%userdraw clickfill,green
18609	bpr	5021	@%userdraw_clickfill_2%size 400,400%xrange -10,10%yrange -10,10%circles blue,0,0,2,1,1,5,5,5,4,-5,5,6,5,-5,6%userdraw hatchfill,red%#userdraw dotfill,red%#userdraw diamondfill,red%#userdraw gridfill,red
18552	bpr	5022	@%userdraw_clickfill_2%size 400,400%xrange -10,10%yrange -10,10%bgcolor white%# to get nice click coordinates take invisible ''grid`` and use ''snaptogrid`` %grid 1,1,white%snaptogrid%circles blue,0,0,2,1,1,5,5,5,4,-5,5,6,5,-5,6%userdraw gridfill,red
		5023	*/
		5024	if( use_userdraw != 0 ){ /* only one object type may be drawn*/
		5025	canvas_error("Only one userdraw primitive may be used in command 'userdraw' use command 'multidraw' for this...");
		5026	}
		5027	js_function[INTERACTIVE] = 1;
		5028	draw_type = get_string_argument(infile,0);
		5029	if( strcmp(draw_type,"textfill") == 0){
		5030	fprintf(js_include_file,"var userdraw_text_string = \"%s\";", get_string(infile,1));
		5031	}
		5032	else {
		5033	if( strcmp(draw_type,"imagefill") == 0){
		5034	fprintf(js_include_file,"var userdraw_image_url = \"%s\";", get_string(infile,1));
		5035	}
		5036	else {
		5037	stroke_color = get_color(infile,1);
		5038	}
		5039	}
		5040	if( strcmp(draw_type,"clickfill") == 0){use_filled = 1;fill_color = stroke_color;}
		5041	reply_precision = precision;
		5042	use_userdraw = 1;
		5043	fprintf(js_include_file,"\n\
15111	schaersvoo	5044	/* begin userdraw */\
		5045	userdraw_x = new Array();userdraw_y = new Array();userdraw_radius = new Array();\
		5046	var forbidden_zone=[xsize+1,ysize+1];var xy_cnt = 0;\
		5047	var canvas_userdraw = create_canvas%d(%d,xsize,ysize);\
		5048	var context_userdraw = canvas_userdraw.getContext(\"2d\");\
		5049	var use_dashed = %d;\
		5050	var use_snap = %d;if(use_dashed == 1){if( context_userdraw.setLineDash ){context_userdraw.setLineDash([%d,%d]);}else{if(context_userdraw.mozDash){context_userdraw.mozDash = [%d,%d];};};};\
		5051	context_userdraw.lineWidth = %d;var use_filled = %d;\
		5052	context_userdraw.strokeStyle = \"rgba(%s,%.2f)\";\
		5053	context_userdraw.font = \"%s\";\
15128	schaersvoo	5054	var user_is_dragging = false;\
15111	schaersvoo	5055	if(wims_status != \"done\"){\
		5056	canvas_div.addEventListener(\"mousedown\" ,user_draw,false);\
		5057	canvas_div.addEventListener(\"mousemove\" ,user_drag,false);\
		5058	canvas_div.addEventListener(\"touchstart\",function(e){ e.preventDefault();user_draw(e.changedTouches[0]);},false);\
		5059	canvas_div.addEventListener(\"touchmove\" ,function(e){ e.preventDefault();user_drag(e.changedTouches[0]);},false);\
15128	schaersvoo	5060	canvas_div.addEventListener(\"touchend\" ,function(e){ e.preventDefault();user_drawstop(e.changedTouches[0]);},false);\
15111	schaersvoo	5061	};",canvas_root_id,DRAW_CANVAS,use_dashed,use_snap,dashtype[0],dashtype[1],dashtype[0],dashtype[1],line_width,use_filled,stroke_color,stroke_opacity,font_family);
		5062
18552	bpr	5063	if( use_filled == 0 ){
		5064	fprintf(js_include_file,"context_userdraw.fillStyle = \"rgba(255,255,255.0)\";");
		5065	}
		5066	else {
		5067	if( use_filled == 1 ){
		5068	fprintf(js_include_file,"context_userdraw.fillStyle = \"rgba(%s,%.2f)\";",fill_color,fill_opacity);
		5069	}
		5070	else {
		5071	js_function[DRAW_FILL_PATTERN] = 1;
		5072	fprintf(js_include_file,"context_userdraw.fillStyle = create_Pattern(0,0,%d,[%s]);\n",use_filled,fill_color);
		5073	}
		5074	}
		5075	add_js_userdraw(draw_type,stroke_color,stroke_opacity,crosshair_size,arrow_head,use_offset,css_class,use_snap,canvas_type,use_filled,fill_color,fill_opacity,line_width,font_family);
		5076	reset();
		5077	break;
		5078	case USERINPUT:
		5079	/*
18556	bpr	5080	@ userinput function inputfield
		5081	@ alternative: userinput_function
		5082	@ alternative: userinput_xy
		5083	@ ''inputfield`` is only usable in combination with some ''userdraw draw_type``
		5084	@ note: the input fields are not cleared after the object is drawn...be aware of multiple idential drawings (many clicks on the ''ok`` button)
		5085	@ ''userinput function`` may be used any time (e.g. without userdraw)
		5086	@ multiple ''userinput function`` commands may be used.
		5087	@ use command <code>functionlabel some_string</code> to define the inputfield text: default value "f(x)="
		5088	@ use command <code>strokecolor some_color</code> to adjust the plot / functionlabel color
		5089	@ use command <code>css some_css</code> to adjust the inputfields
		5090	@ use command <code>fontsize int</code> to adjust the label fonts. (default 12px)
		5091	@ the user input for the function will be corrected by a simple ''rawmath`` implementation...<br>an error message will be shown if javascript can not interpret the user input
		5092	@%userinput_function%size 400,400%xrange -10,10%yrange -10,10%functionlabel your function g(x)=%axis%axisnumbering%xlabel x-axis%ylabel y-axis%grid 2,2,grey,3,3,5,grey%css color:blue;text-align:center%userinput function%# note: number of function inputs not limited
		5093	@%userinput_points%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%# adding 2 inputfields for x and y%userinput inputfield%userdraw points,blue
		5094	@%userinput_arrows%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%#adding 4 inputfields for (x1;y1)---(x2;y2)%userinput inputfieldd%userdraw arrows,blue
		5095	@%userinput_combined%size 400,400%xrange -10,10%yrange -10,10%functionlabel your function g(x)=%axis%axisnumbering%xlabel x-axis%ylabel y-axis%precision 0%grid 2,2,grey,3,3,5,grey%css color:blue;text-align:center%precision 1000%strokecolor red%opacity 255,255%userinput function%# note: number of function inputs not limited%userdraw line,blue
18552	bpr	5096	*/
		5097	temp = get_string_argument(infile,1);
		5098	if(strstr(temp,"function") != 0 \|\| strstr(temp,"curve") != 0 \|\| strstr(temp,"plot") != 0 ){
		5099	if( js_function[DRAW_JSFUNCTION] != 1 ){
		5100	js_function[JS_RAWMATH] = 1;
		5101	js_function[DRAW_JSFUNCTION] = 1;
		5102	if(reply_format == 0){reply_format = 24;}/* read canvas_input values */
		5103	add_input_jsfunction(css_class,function_label,input_cnt,stroke_color,stroke_opacity,line_width,use_dashed,dashtype[0],dashtype[1],font_size);
		5104	input_cnt++;
		5105	}
		5106	else {
		5107	/* no need to add DRAW_JSFUNCTION, just call it with the parameters */
		5108	fprintf(js_include_file,"add_input_jsfunction(%d,\"%s\",%s,%d,\"%s\",\"%.2f\",%d,%d,%d,%d);\n",input_cnt,css_class,function_label,line_width,stroke_color,stroke_opacity,use_dashed,dashtype[0],dashtype[1],font_size);
		5109	input_cnt++;
		5110	}
		5111	js_function[JS_MATH] = 1;
		5112	js_function[JS_PLOT] = 1;
		5113	}
		5114	else {
		5115	if(strstr(temp,"inputfield") != 0 ){
		5116	js_function[JS_SAFE_EVAL] = 1;
		5117	js_function[ADD_USER_INPUTS] = 1;
		5118	}
		5119	else {
		5120	canvas_error("userinput argument may be \"function\" or \"inputfield\"");
		5121	}
		5122	}
		5123	break;
		5124	case USERINPUT_XY:
		5125	/*
		5126	@ userinput_xy
		5127	@ keyword (no arguments required)
		5128	@ to be used in combination with command "userdraw object_type,color"
		5129	@ if set two (or three) input fields are added to the document<br>(one for x-values, one for y-values and in case of drawing circle one for radius-values)
		5130	@ the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
		5131	@ math input is allowed (e.g something like: 1+3,2*6,1/3,sqrt(3), sin(pi/4),10^-2,log(2)...)<br>eval function is ''protected`` against code injection.
		5132	@ can <b>not</b> be combined with command ''intooltip tiptext`` <br>note: the ''tooltip div element`` is used for placing inputfields
		5133	@ user drawings will not zoom on zooming (or pan on panning)
		5134	@ use command ''css some_css`` to adjust the inputarea.
		5135	@ use command ''fontsize int`` to adjust the text labels (if needed)
		5136	@%userinput_xy%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%precision 0%grid 2,2,grey,3,3,6,black%# provides inputfields for (x1:y1)---(x2:y2)%userinput_xy%linewidth 2%precision 1000%userdraw lines,blue
		5137	*/
		5138	/* add simple eval check to avoid code injection with unprotected eval(string) */
		5139	js_function[JS_SAFE_EVAL] = 1;
		5140	js_function[ADD_USER_INPUTS] = 1;
		5141	break;
		5142	case USERINPUT_FUNCTION:
		5143	/*
		5144	@ userinput_function
		5145	@ alternative: userinput
		5146	@ keyword (no arguments required)
		5147	@ if set, a inputfield will be added to the page
		5148	@ repeat keyword for more function input fields
		5149	@ the userinput value will be plotted in the canvas
		5150	@ this value may be read with <code>read_canvas()</code>. <br>for do it yourself js-scripters: If this is the first inputfield in the script, its id is canvas_input0
		5151	@ use before this command ''userinput_function``,<br>commands like ''css some_css``, ''xlabel some_description``, ''opacity int,int``, ''linewidth int``, ''dashed`` and ''dashtype int,int`` to modify
		5152	@ fontsize can be set using command ''fontsize int``
		5153	@ incompatible with command ''intooltip link_text_or_image``: it uses the tooltip div for adding the inputfield
		5154	@%userinput_function%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%xlabel x-axis%ylabel y-axis%precision 0%grid 2,2,grey,2,2,5,grey%precision 1000%linewidth 2%# first inputfield%css color:blue;text-align:center;font-family:Italic;%strokecolor blue%functionlabel g(x)=:p(x)=:k(x)=%userinput function%# second inputfield%css color:green;text-align:center;font-family:Italic;%strokecolor green%userinput function%# third inputfield%css color:purple;text-align:center;font-family:Italic;%strokecolor purple%userinput function%# no limit in number of function inputfields
		5155	*/
		5156	if( js_function[DRAW_JSFUNCTION] != 1 ){
		5157	js_function[DRAW_JSFUNCTION] = 1;
		5158	js_function[JS_RAWMATH] = 1;
		5159	if(reply_format == 0){reply_format = 24;}/* read canvas_input values */
		5160	add_input_jsfunction(css_class,function_label,input_cnt,stroke_color,stroke_opacity,line_width,use_dashed,dashtype[0],dashtype[1],font_size);
		5161	input_cnt++;
		5162	}
		5163	else {
		5164	/* no need to add DRAW_JSFUNCTION, just call it with the parameters */
		5165	fprintf(js_include_file,"add_input_jsfunction(%d,\"%s\",%s,%d,\"%s\",\"%.2f\",%d,%d,%d,%d);\n",input_cnt,css_class,function_label,line_width,stroke_color,stroke_opacity,use_dashed,dashtype[0],dashtype[1],font_size);
		5166	input_cnt++;
		5167	}
		5168	js_function[JS_MATH] = 1;
		5169	js_function[JS_PLOT] = 1;
		5170	break;
		5171	case VLINE:
		5172	/*
		5173	@ vline x,y,color
		5174	@ alternative: verticalline
		5175	@ draw a vertical line through point (x:y) in color 'color'
		5176	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		5177	@%vline%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%vline 0,0,red%onclick%vline 1,0,orange%onclick%vline 2,0,blue%onclick%vline 3,0,green
		5178	*/
		5179	for(i=0;i<3;i++) {
		5180	switch(i){
		5181	case 0: double_data[0] = get_real(infile,0);break; /* x-values */
		5182	case 1: double_data[1] = get_real(infile,0);break; /* y-values */
		5183	case 2: stroke_color=get_color(infile,1);/* name or hex color */
		5184	double_data[2] = double_data[0];
		5185	decimals = find_number_of_digits(precision);
		5186	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	5187	tmp_buffer=my_newmem(MAX_BUFFER);
		5188	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[2],decimals,100ymin,decimals,100ymax,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	5189	add_to_buffer(tmp_buffer);
		5190	if(onclick != 0){object_cnt++;}
		5191	/* object_cnt++; */
		5192	reset();
		5193	break;
		5194	}
		5195	}
		5196	dragstuff[4] = 1;
		5197	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5198	break;
		5199	case VLINES:
		5200	/*
		5201	@ vlines color,x1,y1,x2,y2....
		5202	@ alternative: verticallines
		5203	@ draw vertical lines through points (x1:y1),(x2:y2)... in color 'color'
		5204	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		5205	@%vlines%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%vlines red,1,0,2,0,3,0,4,0
		5206	*/
		5207	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5208	fill_color = stroke_color;
		5209	i=0;
		5210	while( ! done ){ /* get next item until EOL*/
		5211	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5212	if(i%2 == 0 ){
		5213	double_data[i] = get_real(infile,0); /* x */
		5214	}
		5215	else {
		5216	double_data[i] = get_real(infile,1); /* y */
		5217	}
		5218	i++;
		5219	}
		5220	decimals = find_number_of_digits(precision);
		5221	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5222	for(c = 0 ; c < i-1 ; c = c+2){
18557	bpr	5223	tmp_buffer=my_newmem(MAX_BUFFER);
18607	bpr	5224	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[0],[0],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c],decimals,100ymin,decimals,100ymax,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	5225	add_to_buffer(tmp_buffer);
		5226	if(onclick != 0){object_cnt++;}
		5227	/* object_cnt++; */
		5228	}
		5229	reset();
		5230	dragstuff[4] = 1;
		5231	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5232	break;
		5233	case VIDEO:
		5234	/*
		5235	@ video x,y,w,h,videofile location
		5236	@ x,y: left top corner of audio element (in xrange / yrange)
		5237	@ w,y: width and height in pixels
		5238	@ video format may be in *.mp4 (todo: other formats)
		5239	@%video%size 400,400%xrange -10,10%yrange -10,10%opacity 200,100%frect -9,9,6,-6,green%video -5,5,200,200,http://techslides.com/demos/sample-videos/small.mp4
		5240	*/
		5241	js_function[DRAW_VIDEO] = 1;
		5242	for(i=0;i<5;i++){
		5243	switch(i){
		5244	case 0: int_data[0] = x2px(get_real(infile,0)); break; /* x in x/y-range coord system -> pixel */
		5245	case 1: int_data[1] = y2px(get_real(infile,0)); break; /* y in x/y-range coord system -> pixel */
		5246	case 2: int_data[2] = (int) (get_real(infile,0)); break; /* pixel width */
		5247	case 3: int_data[3] = (int) (get_real(infile,0)); break; /* height pixel height */
		5248	case 4: temp = get_string(infile,1);
18557	bpr	5249	tmp_buffer=my_newmem(MAX_BUFFER);
		5250	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_video(%d,%d,%d,%d,%d,\"%s\");\n",canvas_root_id,int_data[0],int_data[1],int_data[2],int_data[3],temp));
18552	bpr	5251	add_to_buffer(tmp_buffer);
		5252	break;
		5253	default:break;
		5254	}
		5255	}
		5256	reset();
		5257	break;
		5258	case X_AXIS_STRINGS:
		5259	/*
18556	bpr	5260	@ xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
		5261	@ alternative: xaxistext
		5262	@ usable for commands <a href="#numberline">numberline</a> and <a href="#grid">grid</a> or combinations thereof
		5263	@ use these x-axis num1...num_n values instead of default xmin...xmax
		5264	@ in case of command ''grid``. there is no need to use keyword <a href="#axisnumbering">axisnumbering</a>
		5265	@ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
		5266	@ use command ''fontcolor``, ''fontfamily`` to adjust font <br>defaults: black,12,Arial<br>note: command ''fontsize`` is not active for this command.(''fontsize`` can be used for the <a href="#legend">legend</a> in a <a href="#grid">grid</a>)
		5267	@ a javascript error message will flag non-matching value:name pairs
		5268	@ if the ''x-axis words`` are too big and will overlap, a simple alternating offset will be applied
		5269	@ to be used before command grid (see <a href="#grid">command grid</a>)
		5270	@ ''xmajor`` steps should be synchronised with numbers eg. ''1`` in the next example <code>grid 1,100,grey,1,4,6,grey</code>
		5271	@%xaxistext%size 800,200%xrange -1,13%yrange -5,10%axis%xaxistext 1:january:2:february:3:march:4:april:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december%grid 1,4,grey,1,2,10,red
18552	bpr	5272	*/
		5273	use_axis_numbering++;
		5274	temp = get_string(infile,1);
		5275	if( strstr(temp,":") != 0 ){ temp = str_replace(temp,":","\",\"");}
		5276	if( strstr(temp,"pi") != 0 ){ temp = str_replace(temp,"pi","(3.1415927)");}/* we need to replace pi for javascript y-value*/
		5277	fprintf(js_include_file,"x_strings[%d] = [\"%s\"];x_strings_up[%d] = null;",use_axis_numbering,temp,use_axis_numbering);
		5278	break;
		5279	case X_AXIS_STRINGS_UP:
		5280	/*
18556	bpr	5281	@ xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
		5282	@ alternative: xaxistextup
		5283	@ the text will be rotated 90° up
		5284	@ no need to use keyword <a href="#axisnumbering">axisnumbering</a>
		5285	@ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
		5286	@ use these x-axis num1...num_n values instead of default xmin...xmax
		5287	@ use command ''fontcolor``, <a href="#fontfamily">fontfamily</a> to adjust font <br>defaults: black,12,Arial<br>note: command ''fontsize`` is not active for this command.(''fontsize`` can be used for the <a href="#legend">legend</a> in a <a href="#grid">grid</a>)
		5288	@ a javascript error message will flag non-matching value:name pairs
		5289	@ if the ''x-axis words`` are too big, they will overlap the graph<br> (in this case the text will start from ysize upwards)
		5290	@ to be used before command grid (see <a href="#grid">command grid</a>)
		5291	@''xmajor`` steps should be synchronised with numbers eg. "1" in the next example <code>grid 1,100,grey,1,4,6,grey</code>
		5292	@%xaxistextup%size 800,300%xrange -1,13%yrange -10,10%fontfamily Italic 18pt Courier%axis%xaxistextup 1:january:2:february:3:march:4:april:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december%grid 1,4,grey,1,2,10,red
18552	bpr	5293	*/
		5294	use_axis_numbering++;
		5295	temp = get_string(infile,1);
		5296	if( strstr(temp,":") != 0 ){ temp = str_replace(temp,":","\",\"");}
		5297	if( strstr(temp,"pi") != 0 ){ temp = str_replace(temp,"pi","(3.1415927)");}/* we need to replace pi for javascript y-value*/
		5298	fprintf(js_include_file,"x_strings_up[%d] = 1;x_strings[%d] = [\"%s\"];",use_axis_numbering,use_axis_numbering,temp);
		5299	break;
		5300	case XERRORBARS:
		5301	/*
		5302	@ xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n
		5303	@ draw multiple points with x-errorbars E1 (error value left from point) and E2 (error value right from point) at given coordinates in color 'color'
		5304	@ the errors E1 and E2 values are in xrange.
		5305	@ use command ''linewidth int`` to adust size
		5306	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		5307	@%xerrorbars%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag xy%xerrorbars red,0.8,1.3,0,0,1,1,2,3,3,2,4,5,5,2,6,1,-1,-2,-2,0,-3,2,-4,4,-5,-1
8386	schaersvoo	5308
18552	bpr	5309	*/
		5310	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5311	fill_color = stroke_color;
		5312	i=0;
		5313	while( ! done ){ /* get next item until EOL*/
		5314	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5315	if(i%2 == 0 ){
		5316	double_data[i] = get_real(infile,0); /* x */
		5317	}
		5318	else {
		5319	double_data[i] = get_real(infile,1); /* y */
		5320	}
		5321	i++;
		5322	}
		5323	decimals = find_number_of_digits(precision);
		5324	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5325	for(c = 2 ; c < i-1 ; c = c+2){
18557	bpr	5326	tmp_buffer=my_newmem(MAX_BUFFER);
		5327	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,20,[%.f],[%.f],[%.2f],[%.2f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],double_data[0],double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18552	bpr	5328	add_to_buffer(tmp_buffer);
		5329	/* object_cnt++; */
		5330	if(onclick != 0){object_cnt++;}
		5331	}
		5332	reset();
		5333	dragstuff[20] = 1;
		5334	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5335	break;
		5336	case NEWRANGE:
		5337	/*
		5338	@ newrange xmin,xmax,ymin,ymax
		5339	@ objects defined after command will make use of this new range
		5340	@ https://wimsedu.info/?topic=dessiner-des-portions-de-fonctions-sur-un-meme-graphe
		5341	*/
		5342	for(i = 0 ; i<4; i++){
		5343	switch(i){
		5344	case 0: xmin = get_real(infile,0);break;
		5345	case 1: xmax = get_real(infile,0);break;
		5346	case 2: ymin = get_real(infile,0);break;
		5347	case 3: ymax = get_real(infile,1);break;
		5348	default: break;
		5349	}
		5350	}
18557	bpr	5351	tmp_buffer=my_newmem(MAX_BUFFER);
		5352	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "\n\nxmin = %f;xmax = %f;ymin = %f;ymax = %f;\n\n",xmin,xmax,ymin,ymax));
18552	bpr	5353	add_to_buffer(tmp_buffer);
		5354	break;
		5355	case XRANGE:
		5356	/*
		5357	@ xrange xmin,xmax
		5358	@ alternative: rangex
		5359	@ if not given: 0,xsize (eg in pixels)
		5360	*/
18556	bpr	5361	for(i = 0 ; i<2; i++){
		5362	switch(i){
		5363	case 0: xmin = get_real(infile,0);break;
		5364	case 1: xmax = get_real(infile,1);break;
		5365	default: break;
		5366	}
		5367	}
		5368	if(xmin >= xmax){canvas_error(" xrange is not OK: xmin < xmax !");}
		5369	fprintf(js_include_file,"var xmin = %f;var xmax = %f;",xmin,xmax);
		5370	found_size_command++;
		5371	break;
18552	bpr	5372	case XSNAPTOGRID:
		5373	/*
18556	bpr	5374	@ xsnaptogrid
		5375	@ keyword (no arguments required)
		5376	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the given x-grid values when dragged (mouseup)
		5377	@ in case of userdraw the drawn points will snap to xmajor grid
		5378	@ if no grid is defined, points will snap to every integer xrange value. (eg snap_x=1)
		5379	@ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0.
		5380	@ if xminor is defined (use keyword ''axis`` to activate xminor), the drawing will snap to xminor <br>use only even dividers in x-minor...for example<br><code>xsnaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code><br> will snap on x=0, x=0.5, x=1, x=1.5 ....<br> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br>
		5381	@%xsnaptogrid_1%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%xsnaptogrid%userdraw segments,red%precision 1%display x,red,12
		5382	@%xsnaptogrid_2%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%drag x%points red,0,0,0,0,0,0,0,0,0,0
		5383	*/
		5384	use_snap = 2;
		5385	break;
18552	bpr	5386	case XOFFSET:
		5387	/*
18556	bpr	5388	@ xoffset
		5389	@ keyword ; to place the text centered above the text coordinates(x:y) ...
		5390	@ may be used for points or other things requiring centered labels
		5391	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		5392	@ may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-library)
18552	bpr	5393	@%xoffset%size 400,400%xrange -10,10%yrange -10,10%fontfamily 12pt Arial%string blue,-9,-9,no offset%point -9,-9,red%centered%string blue,-6,-6,centered%point -6,-6,red%xoffset%string blue,-3,-3,xoffset%point -3,-3,red%yoffset%string blue,0,0,yoffset%point 0,0,red%xyoffset%string blue,3,3,xyoffset%point 3,3,red%resetoffset%string blue,6,6,resetoffset%point 6,6,red
		5394	*/
18556	bpr	5395	use_offset = 2;
		5396	break;
18552	bpr	5397	case XYOFFSET:
		5398	/*
18556	bpr	5399	@ xyoffset
		5400	@ keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
		5401	@ may be used for points or other things requiring labels
		5402	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		5403	@ only active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
		5404	@ in case of inputfields the inputfield will be centered x and y on its coordinates.<br>for example:<br>inputs 1,1,10,? <br>point 1,1,red <br> the point will be completely invisible<br>note: keyword ''xyoffset`` will also provide centering if used with <a href='#userdraw'>input(s),color</a>
		5405	@%xyoffset%size 400,400%xrange -10,10%yrange -10,10%fontfamily 12pt Arial%string blue,-9,-9,no offset%point -9,-9,red%centered%string blue,-6,-6,centered%point -6,-6,red%xoffset%string blue,-3,-3,xoffset%point -3,-3,red%yoffset%string blue,0,0,yoffset%point 0,0,red%xyoffset%string blue,3,3,xyoffset%point 3,3,red%resetoffset%string blue,6,6,resetoffset%point 6,6,red
18552	bpr	5406	*/
18556	bpr	5407	use_offset = 3;
		5408	break;
18552	bpr	5409	case XUNIT:
		5410	/*
18556	bpr	5411	@ xunit some_unit_for_x-values
		5412	@ unicode allowed (no html code)
		5413	@ use together with command <a href="#display">display or mouse</a>
		5414	@ will display the cursor x-coordinate in ''unit``
		5415	@%xunit%size 400,400%xrange -10,10%yrange -10,10%xunit cm \\u00B2%grid 2,2,grey%linewidth 2%userdraw segments,blue%display x,blue,18
18552	bpr	5416	*/
18556	bpr	5417	fprintf(js_include_file,"unit_x = \"%s\";",get_string(infile,1));
		5418	break;
18552	bpr	5419	case XLABEL:
		5420	/*
		5421	@ xlabel some_string
		5422	@ will be used to create a label for the x-axis (label is in quadrant I)
		5423	@ can only be used together with command ''grid``<br>not depending on keywords ''axis`` and ''axisnumbering``
		5424	@ font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br>use command ''fontsize`` to adjust.<br>(command ''fontfamily`` is not active for this command)
		5425	@ use <a href="#ylabel">ylabel</a>
		5426	@%xlabel%size 400,400%xrange -10,10%yrange -10,10%axis%axisnumbering%xlabel cm\\u00B2 %ylabel v\\u00B2 %precision 1%grid 2,2,grey,2,2,5,grey
		5427	*/
18556	bpr	5428	temp = get_string(infile,1);
		5429	fprintf(js_include_file,"var xaxislabel = \"%s\";",temp);
		5430	break;
18552	bpr	5431	case XLOGBASE:
		5432	/*
		5433	@ xlogbase number
		5434	@ sets the logbase number for the x-axis
		5435	@ default value 10
		5436	@ use together with commands xlogscale / xylogscale
		5437	*/
18556	bpr	5438	fprintf(js_include_file,"xlogbase=%d;",(int)(get_real(infile,1)));
		5439	break;
18552	bpr	5440	case XLOGSCALE:
		5441	/*
18556	bpr	5442	@ xlogscale ymajor,yminor,majorcolor,minorcolor
		5443	@ the x/y-range are set using commands <code>xrange xmin,xmax</code> and <code>yrange ymin,ymax</code>
		5444	@ ymajor is the major step on the y-axis; yminor is the divisor for the y-step
		5445	@ the linewidth is set using command ''linewidth int``
		5446	@ the opacity of major / minor grid lines is set by command <a href='#opacity'>opacity</a>
		5447	@ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number``
18627	bpr	5448	@ the x/y- axis numbering is triggered by keyword ''axisnumbering``<ul><li>use command ''precision`` before ''xlogscale`` command to set the precision (decimals) of the axis numbering</li><li>use commands ''xlabel some_text`` and/or ''ylabel some_text`` for text on axis: use command ''fontsize int`` to set the fontsize (default 12px)</li><li>use command ''fontfamily fnt_family_string`` to set the fonts for axis-numbering</li><li>use command ''fontcolor`` to set the color</li></ul>
18556	bpr	5449	@ note: the complete canvas will be used for the ''log paper``
		5450	@ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
		5451	@ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
		5452	@ note: when using something like ''xrange 0.0001,0.01``...combined with commands <a href='#mouse'>mouse</a> and/or <a href='#userdraw'>userdraw</a>...<br> make sure the <a href='#precision'>precision</a> is set accordingly
		5453	@ note: in case of userdraw, the use of keyword <a href='#userinput_xy'>userinput_xy</a> may be handy !
		5454	@ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result...
		5455	@ <b>attention</b>: do not use command ''zoom``
		5456	@%xlogscale%size 400,400%xrange 10,50000%yrange -5,5%xlabel x-axis%ylabel y-axis%xlogscale 10,1,black,grey%display x,red,22
18552	bpr	5457	*/
18556	bpr	5458	use_axis_numbering++;if(use_axis_numbering > 1){use_axis_numbering = 1;}
		5459	if( js_function[DRAW_GRID] == 1 ){canvas_error("only one type of grid is allowed...");}
		5460	js_function[DRAW_XLOGSCALE] = 1;
		5461	for(i=0;i<4;i++){
		5462	switch(i){
		5463	case 0: double_data[0] = get_real(infile,0);break; /* xmajor */
		5464	case 1: int_data[0] = (int) (get_real(infile,0));break; /* xminor */
		5465	case 2: stroke_color = get_color(infile,0); break;
		5466	case 3: fill_color = get_color(infile,1);
18557	bpr	5467	tmp_buffer=my_newmem(MAX_BUFFER);
		5468	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_grid%d(%d,%d,\"%s\",\"%s\",%.2f,%.2f,%d,\"%s\",\"%s\",%d,%f,%d,%d); ",canvas_root_id,GRID_CANVAS,line_width,stroke_color,fill_color,stroke_opacity,fill_opacity,font_size,font_family,font_color,use_axis_numbering,double_data[0],int_data[0],precision));
18556	bpr	5469	fprintf(js_include_file,"use_xlogscale=1;snap_y = %f;snap_x = xlogbase;",double_data[0]/int_data[0]);
		5470	add_to_buffer(tmp_buffer);
		5471	break;
		5472	default:break;
		5473	}
		5474	}
		5475	break;
18552	bpr	5476	case XYLOGSCALE:
		5477	/*
18556	bpr	5478	@ xylogscale majorcolor,minorcolor
		5479	@ the x/y-range are set using commands ''xrange xmin,xmax`` and ''yrange ymin,ymax``
		5480	@ the linewidth is set using command ''linewidth int``
		5481	@ the opacity of major / minor grid lines is set by command ''opacity [0-255],[0-255]``
		5482	@ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number`` and/or ''ylogbase number``
18627	bpr	5483	@ the x/y- axis numbering is triggered by keyword ''axisnumbering``<ul><li>use commands ''xlabel some_text`` and/or ''ylabel some_text`` for text on axis: use command ''fontsize int`` to set the fontsize (default 12px)</li><li>use command ''fontfamily fnt_family_string`` to set the fonts for axis-numbering</li><li>use command ''fontcolor`` to set the color</li></ul>
18556	bpr	5484	@ note: the complete canvas will be used for the ''log paper``
		5485	@ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
		5486	@ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
		5487	@ note: when using something like ''yrange 0.0001,0.01``...combined with commands ''mouse color,fontsize`` and/or ''userdraw type,color``...<br> make sure the precision is set accordingly (eg command ''precision 10000``)
		5488	@ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy !
		5489	@ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result...
		5490	@ <b>attention</b>: do not use command ''zoom``
		5491	@%xylogscale%size 400,400%xrange 10,50000%yrange 10,50000%xlabel x-axis%ylabel y-axis%xylogscale black,grey%display xy,red,22
18552	bpr	5492	*/
18556	bpr	5493	use_axis_numbering++;if(use_axis_numbering > 1){use_axis_numbering = 1;}
		5494	if( js_function[DRAW_GRID] == 1 ){canvas_error("only one type of grid is allowed...");}
		5495	js_function[DRAW_XYLOGSCALE] = 1;
		5496	for(i=0;i<2;i++){
		5497	switch(i){
		5498	case 0: stroke_color = get_color(infile,0); break;
		5499	case 1: fill_color = get_color(infile,1);
18557	bpr	5500	tmp_buffer=my_newmem(MAX_BUFFER);
		5501	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_grid%d(%d,%d,\"%s\",\"%s\",%.2f,%.2f,%d,\"%s\",\"%s\",%d,%d); ",canvas_root_id,GRID_CANVAS,line_width,stroke_color,fill_color,stroke_opacity,fill_opacity,font_size,font_family,font_color,use_axis_numbering,precision));
18556	bpr	5502	fprintf(js_include_file,"use_xlogscale=1;use_ylogscale=1;snap_x = xlogbase;snap_y = ylogbase;");
		5503	add_to_buffer(tmp_buffer);
		5504	break;
		5505	default:break;
		5506	}
		5507	}
		5508	break;
18552	bpr	5509	case Y_AXIS_STRINGS:
		5510	/*
18556	bpr	5511	@ yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
		5512	@ alternative: yaxistext
		5513	@ use command ''fontcolor``, ''fontfamily`` to adjust font <br>defaults: black,12,Arial<br> note: command ''fontsize`` is not active for this command.(''fontsize`` can be used for the <a href="#legend">legend</a> in a <a href="#grid">grid</a>)
		5514	@ no need to use keyword <a href="#axisnumbering">axisnumbering</a>
		5515	@ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
		5516	@ use these y-axis num1...num_n values instead of default ymin...ymax
		5517	@ a javascript error message will flag non-matching value:name pairs
		5518	@ to be used before command grid (see <a href="#grid">command grid</a>)
		5519	@%yaxistext%size 400,400%yrange 0,13%xrange -100,500%axis%yaxis 1:january:2:february:3:march:5:may:6:june:7:july:8:august:9:september:10:october:11:november:12:december%#'ymajor' steps should be synchronised with numbers eg. "1" in this example%grid 100,1,grey,4,1,6,grey
18552	bpr	5520	*/
18556	bpr	5521	temp = get_string(infile,1);
		5522	if( strstr(temp,":") != 0 ){ temp = str_replace(temp,":","\",\"");}
		5523	if( strstr(temp,"pi") != 0 ){ temp = str_replace(temp,"pi","(3.1415927)");}/* we need to replace pi for javascript y-value*/
		5524	fprintf(js_include_file,"y_strings = [\"%s\"];\n ",temp);
		5525	use_axis_numbering++;
		5526	break;
18552	bpr	5527	case YERRORBARS:
		5528	/*
		5529	@ yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n
		5530	@ draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'
		5531	@ the errors E1 and E2 values are in yrange.
		5532	@ use command ''linewidth int`` to adust size
		5533	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		5534	@%yerrorbars%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%yerrorbars red,0.8,1.3,0,0,1,1,2,3,3,2,4,5,5,2,6,1,-1,-2,-2,0,-3,2,-4,4,-5,-1
		5535	*/
		5536	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5537	fill_color = stroke_color;
		5538	i=0;
		5539	while( ! done ){ /* get next item until EOL*/
18556	bpr	5540	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5541	if(i%2 == 0 ){
		5542	double_data[i] = get_real(infile,0); /* x */
		5543	}
		5544	else
		5545	{
		5546	double_data[i] = get_real(infile,1); /* y */
		5547	}
		5548	i++;
18552	bpr	5549	}
		5550	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5551	for(c = 2 ; c < i-1 ; c = c+2){
18557	bpr	5552	tmp_buffer=my_newmem(MAX_BUFFER);
		5553	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "dragstuff.addShape(new Shape(%d,%d,%d,%d,19,[%.f],[%.f],[%.2f],[%.2f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],double_data[0],double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18556	bpr	5554	add_to_buffer(tmp_buffer);
18552	bpr	5555	/* object_cnt++; */
18556	bpr	5556	if(onclick != 0){object_cnt++;}
18552	bpr	5557	}
		5558	decimals = find_number_of_digits(precision);
		5559	reset();
		5560	dragstuff[19] = 1;
		5561	if(use_dragstuff == 0 ){ use_dragstuff = 1;}
		5562	break;
		5563	case YOFFSET:
		5564	/*
18556	bpr	5565	@ yoffset
		5566	@ keyword; to place the text centered above the text coordinates(x:y) ...
		5567	@ may be used for points or other things requiring centered labels
		5568	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		5569	@ may be active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-library)
		5570	@%yoffset%size 400,400%xrange -10,10%yrange -10,10%fontfamily 12pt Arial%string blue,-9,-9,no offset%point -9,-9,red%centered%string blue,-6,-6,centered%point -6,-6,red%xoffset%string blue,-3,-3,xoffset%point -3,-3,red%yoffset%string blue,0,0,yoffset%point 0,0,red%xyoffset%string blue,3,3,xyoffset%point 3,3,red%resetoffset%string blue,6,6,resetoffset%point 6,6,red
18552	bpr	5571	*/
18556	bpr	5572	use_offset = 1;
		5573	break;
18552	bpr	5574	case YRANGE:
		5575	/*
		5576	@ yrange ymin,ymax
		5577	@ alternative: rangey
		5578	@ if not given 0,ysize (eg in pixels)
		5579	*/
18556	bpr	5580	for(i = 0 ; i<2; i++){
		5581	switch(i){
		5582	case 0: ymin = get_real(infile,0);break;
		5583	case 1: ymax = get_real(infile,1);break;
		5584	default: break;
		5585	}
		5586	}
		5587	if(ymin >= ymax){canvas_error(" yrange is not OK: ymin < ymax !<br>");}
		5588	fprintf(js_include_file,"var ymin = %f;var ymax = %f;",ymin,ymax);
		5589	found_size_command++;
		5590	break;
18552	bpr	5591	case YSNAPTOGRID:
		5592	/*
18556	bpr	5593	@ ysnaptogrid
		5594	@ keyword (no arguments required)
		5595	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the given y-grid values when dragged (mouseup)
		5596	@ in case of userdraw the drawn points will snap to ymajor grid
		5597	@ if no grid is defined, points will snap to every integer yrange value. (eg snap_y=1)
		5598	@ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0.
		5599	@ if yminor is defined (use keyword ''axis`` to activate yminor), the drawing will snap to yminor <br>use only even dividers in y-minor...for example<br><code>ysnaptogrid<br>axis<br>grid 2,1,grey,4,4,7,red</code><br> will snap on x=0, x=0.5, x=1, x=1.5 ....<br> will snap on y=0, y=0.25 y=0.5 y=0.75 ...<br>
		5600	@%ysnaptogrid_1%size 400,400%xrange -10,10%yrange -10,10%ysnaptogrid%grid 1,1,grey%linewidth 2%userdraw crosshairs,blue%css font-size:8px;color:blue%clearbutton delete all crosshairs
		5601	@%ysnaptogrid_2%size 400,400%xrange -10,10%yrange -10,10%ysnaptogrid%grid 1,1,grey%linewidth 3%drag y%points red,0,0,0,0,0,0,0,0,0,0
18552	bpr	5602	*/
18556	bpr	5603	use_snap = 3;
		5604	break;
18552	bpr	5605	case YLABEL:
		5606	/*
		5607	@ ylabel some_string
		5608	@ will be used to create a (vertical) label for the y-axis (label is in quadrant I)
		5609	@ can only be used together with command <a href="#grid">grid</a><br>not depending on keywords ''axis`` and ''axisnumbering``
		5610	@ font setting: italic Courier, fontsize will be slightly larger (fontsize + 4)<br>use command ''fontsize`` to adjust (command ''fontsize`` is not active for this command)
		5611	@ use <a href="#xlabel">xlabel</a>
		5612	@%ylabel%size 400,400%xrange -10,10%yrange -10,10%fontsize 8%axis%axisnumbering%precision 1%xlabel x-axis%ylabel y-axis%grid 1,1,grey,2,2,2,red
		5613	*/
18556	bpr	5614	temp = get_string(infile,1);
		5615	fprintf(js_include_file,"var yaxislabel = \"%s\";",temp);
		5616	break;
18552	bpr	5617	case YLOGBASE:
		5618	/*
		5619	@ ylogbase number
		5620	@ sets the logbase number for the y-axis
		5621	@ default value 10
		5622	@ use together with commands ylogscale / xylogscale
		5623	*/
		5624	fprintf(js_include_file,"ylogbase=%d;",(int)(get_real(infile,1)));
		5625	break;
		5626	case YLOGSCALE:
		5627	/*
18556	bpr	5628	@ ylogscale xmajor,xminor,majorcolor,minorcolor
		5629	@ the x/y-range are set using commands ''xrange xmin,xmax`` and ''yrange ymin,ymax``
		5630	@ xmajor is the major step on the x-axis; xminor is the divisor for the x-step
		5631	@ the linewidth is set using command ''linewidth int``
		5632	@ the opacity of major / minor grid lines is set by command ''opacity [0-255],[0-255]``
		5633	@ default logbase number = 10 ... when needed, set the logbase number with command ''ylogbase number``
		5634	@ the x/y- axis numbering is triggered by keyword ''axisnumbering``<ul><li>use command ''precision`` before ''ylogscale`` command to set the precision (decimals) of the axis numbering</li><li>use commands ''xlabel some_text`` and/or ''ylabel some_text`` for text on axis: use command ''fontsize int`` to set the fontsize (default 12px)</li><li>use command ''fontfamily fnt_family_string`` to set the fonts for axis-numbering</li><li>use command ''fontcolor`` to set the color</li></ul>
		5635	@ note: the complete canvas will be used for the ''log paper``
		5636	@ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
		5637	@ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
		5638	@ note: when using something like ''yrange 0.0001,0.01``...combined with commands ''mouse color,fontsize`` and/or ''userdraw type,color``...<br> make sure the precision is set accordingly (eg command ''precision 10000``)
		5639	@ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy !
		5640	@ <b>attention</b>: do not use command ''zoom``
		5641	@ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result...
18552	bpr	5642	*/
18555	bpr	5643	use_axis_numbering++;if(use_axis_numbering > 1){use_axis_numbering = 1;}
		5644	if( js_function[DRAW_GRID] == 1 ){canvas_error("only one type of grid is allowed...");}
		5645	js_function[DRAW_YLOGSCALE] = 1;
		5646	for(i=0;i<4;i++){
		5647	switch(i){
		5648	case 0: double_data[0] = get_real(infile,0);break; /* xmajor */
		5649	case 1: int_data[0] = (int) (get_real(infile,0));break; /* xminor */
		5650	case 2: stroke_color = get_color(infile,0); break;
		5651	case 3: fill_color = get_color(infile,1);
18557	bpr	5652	tmp_buffer=my_newmem(MAX_BUFFER);
		5653	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "draw_grid%d(%d,%d,\"%s\",\"%s\",%.2f,%.2f,%d,\"%s\",\"%s\",%d,%f,%d,%d); ",canvas_root_id,GRID_CANVAS,line_width,stroke_color,fill_color,stroke_opacity,fill_opacity,font_size,font_family,font_color,use_axis_numbering,double_data[0],int_data[0],precision));
18555	bpr	5654	fprintf(js_include_file,"use_ylogscale=1;snap_x = %f;snap_y = ylogbase;",double_data[0]/int_data[0]);
		5655	add_to_buffer(tmp_buffer);
		5656	break;
		5657	default:break;
		5658	}
		5659	}
		5660	break;
18552	bpr	5661	case YUNIT:
		5662	/*
18556	bpr	5663	@ yunit some_unit_for_y-values
		5664	@ unicode allowed (no html code)
		5665	@ use together with command mousey
		5666	@ will display the cursor y-coordinate in ''unit``
18552	bpr	5667	*/
		5668	fprintf(js_include_file,"unit_y = \"%s\";",get_string(infile,1));
		5669	break;
18555	bpr	5670	case HYPSEGMENTS:
18556	bpr	5671	/*
		5672	@ hypsegments color,x1,y1,x2,y2,...,x_n,y_n
		5673	@ draw multiple hyperbolic segments in the Poincar� disk between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color ''color``
18639	schaersvoo	5674	@ use command ''linewidth int`` to adjust size may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
18556	bpr	5675	@%hypsegments%size 400,400%xrange -1,1%yrange -1,1%circles black,0,0,1%linewidth 2%hypsegments green,0.1,-0.3,0.6,0.7,0.3,0,-0.8,0.6,0.6,0.5,-0.5,0.6
18639	schaersvoo	5676	*/
18555	bpr	5677	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5678	fill_color = stroke_color;
		5679	i=0;
		5680	while( ! done ){ /* get next item until EOL*/
		5681	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5682	if(i%2 == 0 ){
		5683	double_data[i] = get_real(infile,0); /* x */
		5684	}
		5685	else {
		5686	double_data[i] = get_real(infile,1); /* y */
		5687	}
		5688	i++;
		5689	}
		5690	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5691	if(use_affine == TRUE ){ transform(i-1,2);}
		5692	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5693	decimals = find_number_of_digits(precision);
		5694	for(c = 0 ; c < i-1 ; c = c+4){
18569	bpr	5695	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5696	if (hypgeodaux(double_data+c,res,0)){
		5697	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,12,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,res[0],decimals,res[0],decimals,res[1],decimals,res[1],decimals,res[2],decimals,res[3],decimals,res[4],decimals,res[5],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
		5698	}
		5699	else {
		5700	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
		5701	}
		5702	add_to_buffer(tmp_buffer);
		5703	if(onclick != 0){object_cnt++;}
		5704	}
		5705	reset();
		5706	dragstuff[4] = 1;dragstuff[12] = 1;
		5707	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5708	break;
		5709	case HYPLINES:
18639	schaersvoo	5710	/*
18555	bpr	5711	@ hyplines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n
18639	schaersvoo	5712	@ draw multiple hyperbolic lines in the Poincar� disk through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color' may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
18555	bpr	5713	@%hyplines%size 400,400%xrange -1,1%yrange -1,1%circles black,0,0,1%hyplines green,0,0.1,0.1,0.3,0.2,0.3,0.1,0.3,0,0.5,-0.5,0.4
		5714	*/
		5715	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5716	fill_color = stroke_color;
		5717	i=0;
		5718	while( ! done ){ /* get next item until EOL*/
		5719	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
18562	bpr	5720	if(i%2 == 0 ){
		5721	double_data[i] = get_real(infile,0); /* x */
		5722	}
18555	bpr	5723	else {
		5724	double_data[i] = get_real(infile,1); /* y */
		5725	}
		5726	i++;
		5727	}
		5728	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5729	if(use_affine == TRUE ){ transform(i-1,2);}
		5730	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18623	bpr	5731	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18555	bpr	5732	decimals = find_number_of_digits(precision);
		5733	for(c = 0 ; c < i-1 ; c = c+4){
18569	bpr	5734	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5735	if (hypgeodaux(double_data+c,res,1)){
		5736	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,12,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,res[0],decimals,res[0],decimals,res[1],decimals,res[1],decimals,res[2],decimals,res[3],decimals,res[4],decimals,res[5],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));}
		5737	else {
18623	bpr	5738	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,res[0],decimals,res[2],decimals,res[1],decimals,res[3],line_width,stroke_color,stroke_opacity,fill_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18555	bpr	5739	}
		5740	add_to_buffer(tmp_buffer);
		5741	if(onclick != 0){object_cnt++;}
		5742	}
		5743	reset();
		5744	dragstuff[4] = 1;dragstuff[12] = 1;
		5745	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5746	break;
		5747	case HYPPOLY:
18639	schaersvoo	5748	/*
		5749	@ hyppolygon color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n
		5750	@ draw hyperbolicpolygon in the Poincar� disk through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) -- (x1:y1) in color 'color' may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
18615	bpr	5751	@ option fhyppolygon only for convex polygon for the moment
		5752	@%hyppolygon%size 400,400%xrange -1,1%yrange -1,1%circles black,0,0,1%hyppolygon green,0,0,0.5,0.3,0.8,-0.1,0.4,-0.5
18639	schaersvoo	5753	*/
18615	bpr	5754	stroke_color=get_color(infile,0);
18555	bpr	5755	fill_color = stroke_color;
		5756	i=0;
		5757	while( ! done ){ /* get next item until EOL*/
		5758	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5759	if(i%2 == 0 ){
		5760	double_data[i] = get_real(infile,0); /* x */
		5761	}
		5762	else {
		5763	double_data[i] = get_real(infile,1); /* y */
		5764	}
		5765	i++;
		5766	}
		5767	/* il faut rajouter le premier point � la fin*/
		5768	double_data[i]=double_data[0]; double_data[i+1]=double_data[1];
		5769	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5770	if(use_affine == TRUE ){ transform(i-1,2);}
		5771	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5772	decimals = find_number_of_digits(precision);
		5773	for(c = 0 ; c < i-1 ; c = c+2){
18615	bpr	5774	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5775	if (hypgeodaux(double_data+c,res,0)){
18615	bpr	5776	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,12,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,res[0],decimals,res[0],decimals,res[1],decimals,res[1],decimals,res[2],decimals,res[3],decimals,res[4],decimals,res[5],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18555	bpr	5777	}
		5778	else {
18623	bpr	5779	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+2],decimals,double_data[c+1],decimals,double_data[c+3],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18555	bpr	5780	}
		5781	add_to_buffer(tmp_buffer);
		5782	if(onclick != 0){object_cnt++;}
18615	bpr	5783	}
		5784	if(use_filled){
		5785	hypgeodaux(double_data+2,res,0);
		5786	res[4]=double_data[0]; res[5]=double_data[1];
		5787	hypgeodaux(res+4,res,0);
		5788	add_js_filltoborder(canvas_type);
		5789	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"setTimeout(function(){filltoborder (%.f,%.f,[%s,%d],[%s,%d],%d,false,null);},1000);\n",decimals,res[6],decimals,res[7],fill_color,(int) (fill_opacity/0.0039215),fill_color,(int) (fill_opacity/0.0039215),FILL_CANVAS+fill_cnt));
		5790	add_to_buffer(tmp_buffer);
		5791	fill_cnt++;
18606	bpr	5792	}
18569	bpr	5793	dragstuff[4] = 1; dragstuff[12] = 1;
18555	bpr	5794	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5795	reset();
		5796	break;
		5797	case HYPRAYS:
		5798	/*
18556	bpr	5799	@ hyprays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n
18639	schaersvoo	5800	@ draw hyperbolic rays in the Poincar� disk in color 'color' and center (xc:yc) may be set draggable or onclick (every individual ray)
18556	bpr	5801	@%hyprays%size 400,400%xrange -1,1%yrange -1,1%circles black,0,0,1%onclick%hyprays blue,0.5,0.5,0.3,0.9,-0.3,0.5,-0.4,0,0.4,-0.9,-0.8,0.1,-0.1,-0.9
18639	schaersvoo	5802	*/
		5803	/*
18555	bpr	5804	hyprays_onclick%size 400,400%xrange -1,1%yrange -1,1%circles black,0,0,1%onclick%hyprays blue,0.5,0.5,0.3,0.9,-0.3,0.5,-0.4,0,0.4,-0.9,-0.8,0.1,-0.1,-0.9
		5805	hyprays_drag_xy%size 400,400%xrange -1,1%yrange -1,1%circles black,0,0,1%drag xy%hyprays blue,0,0,0.3,0.9,-0.3,0.5,-0.4,0,0.4,-0.9,-0.8,0.1,-0.1,-0.9
		5806	*/
		5807	stroke_color=get_color(infile,0);
18623	bpr	5808	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18555	bpr	5809	double_data[0] = get_real(infile,0);/* xc */
		5810	double_data[1] = get_real(infile,0);/* yc */
		5811	i=2;
18562	bpr	5812	while( ! done ){ /* get next item until EOL*/
18555	bpr	5813	if(i > MAX_INT - 1){canvas_error("in command rays too many points / rays in argument: repeat command multiple times to fit");}
		5814	if(i%2 == 0 ){
		5815	double_data[i] = get_real(infile,0); /* x */
		5816	}
		5817	else {
		5818	double_data[i] = get_real(infile,1); /* y */
		5819	}
		5820	fprintf(js_include_file,"/* double_data[%d] = %f */\n",i,double_data[i]);
		5821	i++;
		5822	}
		5823	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5824	if(use_affine == TRUE ){ transform(i-1,2);}
		5825	if( i%2 != 0 ){canvas_error("in command rays: unpaired x or y value");}
		5826	decimals = find_number_of_digits(precision);
		5827	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5828	for(c=2; c<i;c = c+2){
18557	bpr	5829	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5830	double_data[2]=double_data[c];double_data[3]=double_data[c+1];
		5831	if (hypgeodaux(double_data,res,0)){
		5832	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,12,[%.f,%.f],[%.f,%.f],[%.f,%.f],[%.f,%.f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,res[0],decimals,res[0],decimals,res[1],decimals,res[1],decimals,res[2],decimals,res[3],decimals,res[4],decimals,res[5],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
		5833	}
		5834	else {
18623	bpr	5835	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,4,[%.f,%.f],[%.f,%.f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[0],decimals,double_data[c],decimals,double_data[1],decimals,double_data[c+1],line_width,stroke_color,stroke_opacity,fill_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18555	bpr	5836	}
		5837	add_to_buffer(tmp_buffer);
		5838	/* object_cnt++; */
		5839	if(onclick != 0){object_cnt++;}
		5840	}
		5841	reset();
		5842	dragstuff[4] = 1; dragstuff[12] = 1;
		5843	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5844	break;
		5845	case HYPCIRCLES:
		5846	/*
		5847	@ hypcircles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n
		5848	@ draw hyperbolic circles in Poincar� disk
		5849	@ <b>attention</b> r = radius in x-range (!)
		5850	@ use keyword <code>filled</code> or command <code>fhypcircles</code> to produce solid circles
		5851	@ use command <code>fillcolor color</code> to set the fillcolor
		5852	@%hypcircles%size 400,400%xrange -1,1%yrange -1,1%filled%fillcolor lightblue%opacity 255,50%hypcircles blue,0,0,1,0.4,0.4,3,0.2,0.6,6
18639	schaersvoo	5853	*/
		5854	/*
18555	bpr	5855	hypcircles_drag%size 400,400%xrange -1,1%yrange -1,1%filled%fillcolor lightblue%opacity 255,50%drag xy%hypcircles blue,0,0,2,0.2,0.2,3,0.2,0.2,5%zoom red
		5856	hypcircles_onclick%size 400,400%xrange -1,1%yrange -1,1%filled%fillcolor lightblue%opacity 255,50%onclick%hypcircles blue,0,0,2,0.2,0.2,3,0.2,0.2,5%zoom red
		5857	hypcircles_drag_slider%size 400,400%xrange -1,1%yrange -1,1%linewidth 2%drag xy%# Click circles(s) to activate%opacity 200,50%fillcolor orange%rotationcenter 2,3%slider 0,2pi,300,30,angle degrees,Rotate%slider -5,5pi,300,30,x display,move in x-direction%slider -10,10*pi,300,30,y display,move in y-direction%hypcircles blue,0,0,2,0.2,0.2,3,0.2,0.2,5
		5858	*/
		5859	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	5860	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18555	bpr	5861	i=1;
18562	bpr	5862	while( ! done ){ /* get next item until EOL*/
18555	bpr	5863	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5864	switch (i%3){
		5865	case 1:double_data[i-1] = get_real(infile,0);break; /* x */
		5866	case 2:double_data[i-1] = get_real(infile,0);break; /* y */
		5867	case 0:double_data[i-1] = get_real(infile,1);break; /* r */
		5868	}
		5869	i++;
		5870	}
		5871	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,3);}
		5872	if(use_affine == TRUE ){ transform(i-1,3);}
		5873	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5874	decimals = find_number_of_digits(precision);
		5875	for(c = 0 ; c < i-1 ; c = c+3){
18556	bpr	5876	double Z2=double_data[c]double_data[c]+double_data[c+1]double_data[c+1];//[Z]^2
18555	bpr	5877	double R=tanh(double_data[c+2]/2);double R2=R*R;
		5878	double den=1-R2*Z2; double XY=(1-R2)/den;
		5879	double_data[c]=XY*double_data[c];
		5880	double_data[c+1]=XY*double_data[c+1];
		5881	double_data[c+2]=(1-Z2)/den*R;
18557	bpr	5882	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	5883	check_string_length(snprintf(tmp_buffer,MAX_BUFFER,"dragstuff.addShape(new Shape(%d,%d,%d,%d,13,[%.f],[%.f],[%.3f],[%.3f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%s,%s,%d));\n",drag_type,object_cnt,onclick,use_snap,decimals,double_data[c],decimals,double_data[c+1],double_data[c+2],double_data[c+2],line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,my_sliders,rotation_center,use_offset));
18555	bpr	5884	add_to_buffer(tmp_buffer);
		5885	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		5886	}
		5887	reset();
		5888	dragstuff[13] = 1;
		5889	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5890	break;
18552	bpr	5891	case ZOOM:
		5892	/*
18556	bpr	5893	@ zoom button_color
		5894	@ introduce a very small ''controlpanel`` at the lower right corner (font size of the panel is fixed to: 22px Arial)
		5895	@ giving six 15×15px ''active`` rectangle areas<br>(''×,↓,↑,←,→,−,+``) for zooming and/or panning of the image
		5896	@ a mouse wheel is active for in/out zooming. Drag panning is not supported (this will conflict with many ''userdraw`` or ''multidraw`` primitives)
		5897	@ the ''controlpanel`` is not active for a ''userdraw`` mousedown (but it can interfere with some ''userdraw`` types)
		5898	@ the ''×`` symbol will reset to your original xmax/xmin ymax/ymin values.
		5899	@ choose an appropriate color, so the small ''×,↓,↑,←,→,−,+`` are clearly visible
		5900	@ command ''opacity`` may be used to set stroke_opacity of buttons
		5901	@ note: on zooming, text will not increase / decrease the font size (todo??)
		5902	@ note: adding ''zooming`` will increase the size of the javascript include with approx. 11 kb
18552	bpr	5903	*/
18556	bpr	5904	js_function[INTERACTIVE] = 1;
18552	bpr	5905	js_function[JS_ZOOM] = 1;
		5906	if( use_userdraw == 1 ){
		5907	js_function[USERDRAW_AND_ZOOM] = 1;
		5908	fprintf(js_include_file,"forbidden_zone = [%d,%d];",xsize-115,ysize - 20);
		5909	}
		5910	if(jsplot_cnt != -1){ js_function[JSPLOT_AND_ZOOM] = 1;}
		5911	stroke_color = get_color(infile,1);
		5912	/* we use BG_CANVAS (0) */
		5913	add_js_zoom_buttons(stroke_color,stroke_opacity);
		5914	done = TRUE;
		5915	break;
11806	schaersvoo	5916
		5917	/* ready */
18552	bpr	5918	default:sync_input(infile);
		5919	break;
		5920	}
7614	schaersvoo	5921	}
		5922	/* we are done parsing script file */
18556	bpr	5923	if(use_dragstuff != 0){
18562	bpr	5924	/* add the 20kb drag code: nearly always used ... use_dragstuff==1: no-mouse ! */
18556	bpr	5925	add_drag_code(DRAG_CANVAS,use_dragstuff,dragstuff,reply_format);
		5926	if(js_function[JS_ZOOM] == 1){
15111	schaersvoo	5927	js_function[DRAG_AND_ZOOM] = 1;
18556	bpr	5928	}
15111	schaersvoo	5929	}
15116	bpr	5930
14066	bpr	5931	/* check if xrange / yrange was set explicit ... or use xmin=0 xmax=xsize ymin=0 ymax=ysize: Quadrant I */
18556	bpr	5932	if( found_size_command == 1 ){
		5933	fprintf(js_include_file,"var xmin = 0;var xmax = %d;var ymin = 0;var ymax = %d",xsize,ysize);
7983	schaersvoo	5934	}
18556	bpr	5935	else
		5936	{
		5937	if( found_size_command != 3 ){
		5938	canvas_error("Please specify size first and then both xrange and yrange ...");
		5939	}
		5940	}
8257	schaersvoo	5941
18562	bpr	5942	/* if needed, add generic draw functions (grid / xml etc) to buffer: these are no draggable/clickable shapes / objects ! */
18556	bpr	5943	add_javascript_function();
7614	schaersvoo	5944	/* add read_canvas() etc functions if needed */
18556	bpr	5945	if( reply_format > 0 ){ add_read_canvas(reply_format,reply_precision);}
7797	schaersvoo	5946	/* no zoom, just add buffer */
18556	bpr	5947	fprintf(js_include_file,"\n/* add buffer /\n%s};\n/ end wims_canvas_function */\nwims_canvas_function%d();\n",buffer,canvas_root_id);
7614	schaersvoo	5948	/* done writing the javascript include file */
18556	bpr	5949	fclose(js_include_file);
		5950	}
7614	schaersvoo	5951
		5952	/* if using a tooltip, this should always be printed to the .phtml file, so stdout /
18556	bpr	5953	if( use_tooltip > 0 ){
		5954	if( use_tooltip == 1 ){
		5955	add_js_tooltip(tooltip_text,bgcolor);
		5956	}
		5957	else
		5958	{
		5959	if( use_tooltip == 2 ){
		5960	add_js_popup(getfile_cmd);
		5961	}
		5962	}
9329	schaersvoo	5963	}
18556	bpr	5964	exit(EXIT_SUCCESS);
7614	schaersvoo	5965	}
		5966	/* end main() */
		5967
		5968	/******************************************************************************
		5969	**
		5970	** sync_input
		5971	**
		5972	** synchronises input line - reads to end of line, leaving file pointer
		5973	** at first character of next line.
		5974	**
		5975	** Used by:
		5976	** main program - error handling.
		5977	**
		5978	******************************************************************************/
		5979	void sync_input(FILE *infile)
		5980	{
18552	bpr	5981	int c = 0;
7614	schaersvoo	5982
18552	bpr	5983	if( c == '\n' \|\| c == ';' ) return;
		5984	while( ( (c=getc(infile)) != EOF ) && (c != '\n') && (c != '\r') && (c != ';')) ;
		5985	if( c == EOF ) finished = 1;
		5986	if( c == '\n' \|\| c == '\r' \|\| c == ';') line_number++;
		5987	return;
7614	schaersvoo	5988	}
		5989
		5990	/******************************************************************************/
15111	schaersvoo	5991	void transform(int num,int incr){
		5992	/*.
		5993	only "double_data[]" is used for transformations !!
		5994	*/
		5995	int i;int ii;double x,y;
		5996	for(i=0;i<num;i = i+incr){
		5997	ii = i+1;
		5998	x = double_data[i]affine_matrix[0] + double_data[ii]affine_matrix[1]+affine_matrix[4];
		5999	y = double_data[i]affine_matrix[2] + double_data[ii]affine_matrix[3]+affine_matrix[5];
15601	schaersvoo	6000	/*
17351	bpr	6001	printf("(%f:%f) → (%f:%f)<br>",double_data[i],double_data[ii],x,y);
15601	schaersvoo	6002	*/
15111	schaersvoo	6003	double_data[i] = x;
		6004	double_data[ii] = y;
		6005	}
		6006	}
		6007
		6008	void rotate(int num,double angle,double center[],int incr){
		6009	int i;int ii;double rad = angle * 0.0174532925199;
		6010	double c = cos(rad);
		6011	double s = sin(rad);
		6012	double x,y;
		6013	for(i=0;i<num;i = i+incr){
		6014	ii = i+1;
		6015	x = c(double_data[i]-center[0]) + s(double_data[ii] - center[1] ) + center[0];
		6016	y = c(double_data[ii]-center[1]) - s(double_data[i] - center[0] ) + center[1];
		6017	double_data[i] = x;
		6018	double_data[ii] = y;
17351	bpr	6019	// printf("(x:y) - (%f:%f)<br>",x,y);
15111	schaersvoo	6020	}
		6021	}
		6022	/* not used: see transform()
		6023	void translate(int num){
		6024	int i;int ii;
		6025	double x,y;
		6026	for(i=0;i<num;i = i+2){
		6027	ii = i+1;
		6028	x = double_data[i] + affine_matrix[4];
		6029	y = double_data[ii] + affine_matrix[5];
		6030	double_data[i] = x;
		6031	double_data[ii] = y;
		6032	}
		6033	}
		6034	*/
7614	schaersvoo	6035	char str_replace(const char str, const char old, const char new){
18562	bpr	6036	if(strlen(str) > MAX_BUFFER){canvas_error("string argument too big");}
		6037	char ret, r;
		6038	const char p, q;
		6039	size_t oldlen = strlen(old);
		6040	size_t count = 0;
		6041	size_t retlen = 0;
		6042	size_t newlen = strlen(new);
		6043	if (oldlen != newlen){
		6044	for (count = 0, p = str; (q = strstr(p, old)) != NULL; p = q + oldlen){
18552	bpr	6045	count++;
		6046	retlen = p - str + strlen(p) + count * (newlen - oldlen);
18562	bpr	6047	}
18552	bpr	6048	}
18562	bpr	6049	else {
		6050	retlen = strlen(str);
		6051	}
		6052	if ((ret = malloc(retlen + 1)) == NULL){
		6053	ret = NULL;
		6054	canvas_error("string argument is NULL");
		6055	}
		6056	else
		6057	{
		6058	for (r = ret, p = str; (q = strstr(p, old)) != NULL; p = q + oldlen) {
18552	bpr	6059	size_t l = q - p;
		6060	memcpy(r, p, l);
		6061	r += l;
		6062	memcpy(r, new, newlen);
		6063	r += newlen;
18562	bpr	6064	}
		6065	strcpy(r, p);
18552	bpr	6066	}
18562	bpr	6067	return ret;
7614	schaersvoo	6068	}
		6069
		6070	/******************************************************************************/
7848	bpr	6071
7614	schaersvoo	6072	char get_color(FILE infile , int last){
18562	bpr	6073	int c,i = 0,is_hex = 0;
		6074	char temp[MAX_COLOR_STRING], *string;
		6075	const char *not_allowed = "0123456789";
		6076	while(( (c=getc(infile)) != EOF ) && ( c != '\n') && ( c != ',' ) && ( c != ';' ) && ( c != '\t' ) ){
		6077	if( i > MAX_COLOR_STRING ){ canvas_error("colour string is too big ... ? ");}
		6078	if( c == '#' ){
18552	bpr	6079	is_hex = 1;
18562	bpr	6080	}
		6081	if( c != ' '){
18552	bpr	6082	if( is_hex == 0 ){if(strchr(not_allowed,c) != 0){canvas_error("found something like a number...but is should have been a colour or #hex color number...<br>Do not use R,G,B !!! ");}}
		6083	temp[i]=tolower(c);
		6084	i++;
18562	bpr	6085	}
18552	bpr	6086	}
18562	bpr	6087	if( ( c == '\n' \|\| c == EOF \|\| c == ';' \|\| c == '\t' ) && last == 0){canvas_error("expecting more arguments in command");}
		6088	if( c == '\n' \|\| c == ';' \|\| c == '\t' ){ done = TRUE; line_number++; }
		6089	if( c == EOF ){finished = 1;}
		6090	if( finished == 1 && last != 1 ){ canvas_error("expected more arguments");}
		6091	temp[i]='\0';
		6092	if( strlen(temp) == 0 ){ canvas_error("expected a colorname or hexnumber, but found nothing !!");}
		6093	if( is_hex == 1 ){
		6094	char red[3], green[3], blue[3];
		6095	red[0] = toupper(temp[1]); red[1] = toupper(temp[2]); red[2] = '\0';
		6096	green[0] = toupper(temp[3]); green[1] = toupper(temp[4]); green[2] = '\0';
		6097	blue[0] = toupper(temp[5]); blue[1] = toupper(temp[6]); blue[2] = '\0';
		6098	int r = (int) strtol(red, NULL, 16);
		6099	int g = (int) strtol(green, NULL, 16);
		6100	int b = (int) strtol(blue, NULL, 16);
		6101	int L0 = 1+snprintf(NULL,0,"%d,%d,%d",r,g,b);
		6102	string = my_newmem(L0);
		6103	snprintf(string,L0,"%d,%d,%d",r,g,b);
		6104	return string;
		6105	}
		6106	else
		6107	{
		6108	string = (char *)my_newmem(sizeof(temp));
		6109	snprintf(string,sizeof(temp),"%s",temp);
		6110	for( i = 0; i < NUMBER_OF_COLORNAMES ; i++ ){
18552	bpr	6111	if( strcmp( colors[i].name , string ) == 0 ){
18562	bpr	6112	return colors[i].rgb;
18552	bpr	6113	}
18562	bpr	6114	}
		6115	canvas_error("I was expecting a color name or hexnumber...but found nothing.");
18552	bpr	6116	}
18562	bpr	6117	return "0,0,255";
7614	schaersvoo	6118	}
		6119
14066	bpr	6120	char get_string(FILE infile,int last){ /* last = 0: more arguments ; last=1 final argument */
18562	bpr	6121	int c,i=0;
		6122	char temp[MAX_BUFFER], *string;
		6123	while(( (c=getc(infile)) != EOF ) && ( c != '\n') && ( c != '\t') ){
		6124	temp[i]=c;
		6125	i++;
		6126	if(i > MAX_BUFFER){ canvas_error("string size too big...repeat command to fit string");break;}
		6127	}
		6128	if( ( c == '\n' \|\| c == '\t' \|\| c == EOF ) && last == 0){
		6129	canvas_error("expecting more arguments in command");}
		6130	if( c == '\n' \|\| c == '\t') { done = TRUE; line_number++; }
		6131	if( c == EOF ) {finished = 1;}
		6132	temp[i]='\0';
		6133	if( strlen(temp) == 0 && last != 3 ){
		6134	canvas_error("expected a word or string, but found nothing!");}
		6135	string=(char *)my_newmem(strlen(temp));
		6136	snprintf(string,sizeof(temp),"%s",temp);
		6137	return string;
7614	schaersvoo	6138	}
		6139
14066	bpr	6140	char get_string_argument(FILE infile,int last){ /* last = 0: more arguments ; last=1 final argument */
18562	bpr	6141	int c,i=0;
		6142	char temp[MAX_BUFFER], *string;
		6143	while(( (c=getc(infile)) != EOF ) && ( c != '\n') && ( c != '\t') && ( c != ',')){
		6144	temp[i]=c;
		6145	i++;
		6146	if(i > MAX_BUFFER){ canvas_error("string size too big...will cut it off");break;}
		6147	}
		6148	if( ( c == '\n' \|\| c == EOF) && last == 0){canvas_error("expecting more arguments in command");}
		6149	if( c == '\n' \|\| c == '\t' ) { line_number++; }
		6150	if( c == EOF ) {finished = 1;}
		6151	if( finished == 1 && last == 0 ){ canvas_error("expected more arguments");}
		6152	temp[i]='\0';
10953	bpr	6153	/*
18562	bpr	6154	17.10.2014 removed (question Perrin)
		6155	may cause some unwanted effects...
		6156	if( strlen(temp) == 0 ){ canvas_error("expected a word or string (without comma), but found nothing !!");}
8322	schaersvoo	6157	*/
18562	bpr	6158	string=(char *)my_newmem(sizeof(temp));
		6159	snprintf(string,sizeof(temp),"%s",temp);
		6160	done = TRUE;
		6161	return string;
7614	schaersvoo	6162	}
		6163
14066	bpr	6164	double get_real(FILE infile, int last){ / accept anything that looks like an number ? last = 0: more arguments ; last=1 final argument */
18562	bpr	6165	int c,i=0,found_calc = 0;
		6166	double y;
		6167	char tmp[MAX_INT];
		6168	/*
		6169	these things are 'allowed functions': *,^,+,-,/,(,),e,arc,cos,tan,pi,log,ln,sqrt,abs
		6170	but there should be a better way to avoid segfaults !
		6171	*/
		6172	const char allowed = "earcostanpilogqb+-/^()";/* assuming these are allowed stuff in a 'number'*/
		6173	const char not_allowed = "#dfhjkmuvwxyz{}[]%&~!$";/ avoid segmentation faults in a "atof()" and "wims eval" */
		6174	while(( (c=getc(infile)) != EOF ) && ( c != ',') && (c != '\n') && (c != '\t') && ( c != ';')){
		6175	if( c != ' ' ){
8224	bpr	6176	if( i == 0 && c == '+' ){
18562	bpr	6177	continue;
8224	bpr	6178	}
7614	schaersvoo	6179	else
		6180	{
18562	bpr	6181	c = tolower(c);
		6182	if( strchr(not_allowed,c) != 0 ){canvas_error("found a character not associated with a number...");}
		6183	if( strchr(allowed,c) != 0 ){found_calc = 1;}/* hand the string over to wims eval() */
		6184	tmp[i] = c;
		6185	i++;
7614	schaersvoo	6186	}
		6187	}
18562	bpr	6188	if( i > MAX_INT - 1){canvas_error("number too large");}
		6189	}
		6190	if( ( c == '\n' \|\| c == EOF \|\| c == ';' \|\| c == '\t' ) && last == 0){canvas_error("expecting more arguments in command");}
		6191	if( c == '\n' \|\| c == ';' \|\| c == '\t' ){ done = TRUE; line_number++; }
		6192	if( c == EOF ){done = TRUE ; finished = 1;}
		6193	tmp[i]='\0';
		6194	if( strlen(tmp) == 0 ){canvas_error("expected a number, but found nothing !!");}
		6195	if( found_calc == 1 ){ /* use wims eval to calculate 2pi/3 /
		6196	void *f = eval_create(tmp);
		6197	assert(f);if( f == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
		6198	y = eval_x(f, 1);
		6199	/* if function is bogus; y = 1: so no core dumps */
		6200	eval_destroy(f);
		6201	}
		6202	else
		6203	{
		6204	y = atof(tmp);
		6205	}
		6206	return y;
7614	schaersvoo	6207	}
		6208	void canvas_error(char *msg){
18562	bpr	6209	fprintf(stdout,"\n</script><hr><span style=\"color:red\">FATAL syntax error: line %d: %s</span><hr>",line_number,msg);
		6210	finished = 1;
		6211	exit(EXIT_SUCCESS);
7614	schaersvoo	6212	}
		6213	/* convert x/y coordinates to pixel */
		6214	int x2px(double x){
18606	bpr	6215	int res=(x-xmin)/(xmax-xmin)*xsize;
		6216	return (res==xsize)?xsize-1:res;
7614	schaersvoo	6217	}
		6218	int y2px(double y){
18606	bpr	6219	int res=(ymax-y)/(ymax-ymin)*ysize;
		6220	return (res==ysize)?ysize-1:res;
7614	schaersvoo	6221	}
		6222	double px2x(int x){
18562	bpr	6223	return (x*(xmax - xmin)/xsize + xmin);
7614	schaersvoo	6224	}
		6225	double px2y(int y){
18562	bpr	6226	return (y*(ymax - ymin)/ysize + ymin);
7614	schaersvoo	6227	}
		6228	void add_to_buffer(char *tmp){
17351	bpr	6229	//fprintf(stdout,"tmp = %s<br>buffer = %s<br>",tmp,buffer);
18562	bpr	6230	if( tmp == NULL \|\| tmp == 0 ){ canvas_error("nothing to add_to_buffer()...");}
		6231	/* do we have enough space left in buffer[MAX_BUFFER] ? */
		6232	int space_left = (int) (sizeof(buffer) - strlen(buffer));
		6233	if( space_left > strlen(tmp)){
		6234	strncat(buffer,tmp,space_left - 1);/* add safely "tmp" to the string buffer */
		6235	}
		6236	else
		6237	{
		6238	canvas_error("your memory buffer is too big<br>simplify your script...it produces too many lines ");
		6239	}
		6240	tmp = NULL;free(tmp);
		6241	return;
7614	schaersvoo	6242	}
		6243	void reset(){
18562	bpr	6244	if(no_reset == FALSE){ /* 8/5/2020 */
		6245	use_filled = FALSE;
		6246	use_dashed = FALSE;
		6247	if(onclick != 4 ){onclick = 0;} /* slider param 'active'... onclick=4 */
		6248	drag_type = -1;
		6249	use_offset = 0;
18623	bpr	6250	fillcolor = FALSE;
18562	bpr	6251	}
7614	schaersvoo	6252	}
15111	schaersvoo	6253	char getMML(char tex){
18562	bpr	6254	int my_pipe[2];pid_t pid;
		6255	if(pipe(my_pipe)){canvas_error("mathml(): pipe() failure.\n");}
15111	schaersvoo	6256	pid = fork();
		6257	if (pid == (pid_t) 0){
18562	bpr	6258	char *argv[]={"wims_mathml","--use-zoom","0","--tex-size 100%","--max-mml-size","1024","--tex-string",tex,NULL};
		6259	close(my_pipe[0]);dup2(my_pipe[1], 1);dup2(my_pipe[1], 2);close(my_pipe[1]);
		6260	execv("../bin/wims_mathml",argv);canvas_error("could not execute wims_mathml\n");
15111	schaersvoo	6261	}
		6262	else
15116	bpr	6263	{
18562	bpr	6264	if (pid < (pid_t) 0){
		6265	close(my_pipe[0]);close(my_pipe[1]);canvas_error("mathml(): fork() failure.\n");
		6266	}
		6267	int status;FILE *stream;close(my_pipe[1]);stream = fdopen (my_pipe[0], "r");
		6268	char buffer[MAX_BUFFER+1];memset(buffer,'\0',MAX_BUFFER);
		6269	fgets(buffer, MAX_BUFFER, stream);
		6270	int L0 = 1 + snprintf(NULL,0,"%s", buffer);
		6271	tex = my_newmem(L0);memset(tex,'\0',L0);
		6272	snprintf(tex,L0,"%s",buffer);
		6273	fclose (stream);close(my_pipe[0]);waitpid(pid, &status, 0);
15111	schaersvoo	6274	}
18562	bpr	6275	return tex;
15111	schaersvoo	6276	}
7614	schaersvoo	6277
15111	schaersvoo	6278	char getSVGMOL(char inputtype,char *keys){
		6279	int idx;
		6280	char *forbidden[] = {"-O","-H","-z","-L","-o","-m"};
		6281	char *argv[1+strlen(keys)];
		6282	argv[0] = "obabel"; argv[1] = "-i"; argv[2] = inputtype;
		6283	idx = 3;int i;
		6284	char *ptr = strtok(keys,",");
		6285	while(ptr != NULL ){
		6286	for(i = 0 ; i < 6; i++ ){if( strncmp(ptr,forbidden[i],2) == 0 ){return "NOT ALLOWED ARGUMENT";}}
		6287	argv[idx] = ptr; idx++;
17351	bpr	6288	if(idx > 18){canvas_error("too many arguments for obabel....see docs<br>");}
15111	schaersvoo	6289	ptr = strtok(NULL,",");
		6290	}
		6291	/* last arguments; no 'javascript', only 'svg to STDOUT' and 'NULL' */
		6292	argv[idx] = "-xj";argv[idx+1] = "-o"; argv[idx+2] = "svg";argv[idx+3] = NULL;
		6293	int link[2];
		6294	pid_t pid;
		6295	char buffer[MAX_BUFFER+1];
		6296	memset(buffer,'\0',MAX_BUFFER);
		6297	if (pipe(link)==-1){canvas_error("pipe");}
		6298	if ((pid = fork()) == -1){canvas_error("fork");}
15116	bpr	6299
15111	schaersvoo	6300	char *svgmol = "error";
		6301	int string_length = 0;
15116	bpr	6302
15111	schaersvoo	6303	if(pid == 0) {
		6304	dup2 (link[1], STDOUT_FILENO);
		6305	dup2(link[0], STDERR_FILENO);/* remove annoying messages '1 molecule converted' */
		6306	close(link[0]);
		6307	close(link[1]);
		6308	execvp("obabel",argv);
		6309	} else {
		6310	close(link[1]);
18109	schaersvoo	6311	read(link[0],buffer, sizeof(buffer));
15111	schaersvoo	6312	close(link[0]);
		6313	/* need to remover newline from svg-string on freebsd */
		6314	char *pch = strstr(buffer, "\n");
		6315	while(pch != NULL){
18555	bpr	6316	strncpy(pch, " ", 1);
		6317	pch = strstr(buffer, "\n");
15111	schaersvoo	6318	}
		6319	string_length = 1 + snprintf(NULL,0,"%s",buffer);
		6320	svgmol= my_newmem(string_length);
		6321	snprintf(svgmol,string_length,"%s",buffer);
		6322	wait(NULL);
		6323	}
18562	bpr	6324	return svgmol;
15111	schaersvoo	6325	}
		6326	/* GNU libmatheval library for evaluating mathematical functions. */
15601	schaersvoo	6327	char eval(int xsize,int ysize,char fun,double xmin,double xmax,double ymin,double ymax,int plotsteps,int precision,double rotationcenter[]){
18555	bpr	6328	void *f;
		6329	double x;
		6330	double y;
		6331	double xorg;
		6332	int xv;
		6333	int i = 0;
		6334	int xstep =(int)(xsize/plotsteps);
		6335	if( xstep == 0 ){xstep = 1;}
		6336	double a = (xmax - xmin)/xsize;
		6337	f = eval_create(fun);
		6338	assert (f);
		6339	if( f == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
		6340	/* we supply the true x/y values...draw_curve() will convert these (x:y) to pixels : used for pan/scale */
		6341	double xydata[MAX_BUFFER+1];/* hmmm */
		6342	int lim_ymin =(int)( ymin - 4fabs(ymin));/ 19-4-2015 replacing "abs" by "fabs"*/
		6343	int lim_ymax =(int)( ymax + 4fabs(ymax));/ 19-4-2015 replacing "abs" by "fabs"*/
		6344	double c = 1.0;double s = 1.0;
		6345	if( use_rotate == TRUE ){s = sin(angle0.0174533);c = cos(angle0.0174533);}
		6346	for ( xv = 0 ;xv < xsize ; xv = xv+xstep ){
18562	bpr	6347	x = (double) (xv*a + xmin);
		6348	xorg = x;
		6349	if( i < MAX_BUFFER - 2){
18552	bpr	6350	y = eval_x(f, x);
		6351	if(y < lim_ymax && y > lim_ymin ){
18562	bpr	6352	if( use_affine == TRUE ){
		6353	x = xaffine_matrix[0] + yaffine_matrix[1]+affine_matrix[4];
		6354	y = xorgaffine_matrix[2] + yaffine_matrix[3]+affine_matrix[5];
		6355	}
		6356	if( use_rotate == TRUE){
		6357	x = (c * (x - rotationcenter[0])) + (s * (y - rotationcenter[1])) + rotationcenter[0];
		6358	y = (c * (y - rotationcenter[1])) - (s * (xorg - rotationcenter[0])) + rotationcenter[1];
		6359	}
		6360	xydata[i++] = x;
18552	bpr	6361	xydata[i++] = y;
		6362	}
18562	bpr	6363	}
		6364	else
		6365	{
18552	bpr	6366	canvas_error("\nYour curve plotting produces too many data \n Use less plotsteps or some other means to reduce the amount of data... ");
18562	bpr	6367	}
18552	bpr	6368	}
18562	bpr	6369	eval_destroy(f);
		6370	return double_xy2js_array(xydata,i,find_number_of_digits(precision));
15111	schaersvoo	6371	}
		6372	/* plot a very primitive (!) levelcurve : not to be compared with "flydraw levelcurve" */
		6373	char eval_levelcurve(int xsize,int ysize,char fun,double xmin,double xmax,double ymin,double ymax,int plotsteps,int precision,double level){
18562	bpr	6374	void *f = eval_create(fun);
		6375	assert (f);
		6376	if( f == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
		6377	double a = (double)((xmax - xmin)/plotsteps);
		6378	double b = (double)((ymax - ymin)/plotsteps);
		6379	double x;double y;double diff;
		6380	double xydata[MAX_BUFFER+1];
		6381	int i = 0;
		6382	ymin = ymin - 1;
		6383	xmin = xmin - 1;
		6384	ymax = ymax + 1;
		6385	xmax = xmax + 1;
		6386	for( x = xmin ;x < xmax ; x = x + a ){
		6387	for ( y = ymin ;y < ymax ; y = y + b ){
18552	bpr	6388	if( i < MAX_BUFFER - 2){
18562	bpr	6389	diff = level - eval_x_y(f, x,y);
		6390	if(diff < 0.1 && diff > -0.1){
		6391	xydata[i++] = x;
		6392	xydata[i++] = y;
		6393	}
18552	bpr	6394	}
		6395	else
		6396	{
18562	bpr	6397	canvas_error("\nYour curve plotting produces too many data \n Use less plotsteps, decrease image size...\nor some other means to reduce the amount of data... ");
18552	bpr	6398	}
18562	bpr	6399	}
18552	bpr	6400	}
18562	bpr	6401	eval_destroy(f);
		6402	return double_xy2js_array(xydata,i,find_number_of_digits(precision));
15111	schaersvoo	6403	}
7614	schaersvoo	6404
15111	schaersvoo	6405	/* plot parametric function */
18562	bpr	6406	char eval_parametric(int xsize,int ysize,char fun1,char* fun2,double xmin,
		6407	double xmax,double ymin,double ymax,
		6408	double tmin,double tmax,int plotsteps,int precision,double rotationcenter[]){
		6409	void *fx;
		6410	void *fy;
		6411	double t;
		6412	int i = 0;
		6413	double tstep = (tmax-tmin)/plotsteps;
		6414	if( tstep == 0 ){canvas_error("zero step for t variable : reduce plotsteps or inrease trange");}
		6415	fx = eval_create(fun1);
		6416	fy = eval_create(fun2);
		6417	assert(fx);
		6418	assert(fy);
		6419	if( fx == NULL \|\| fy == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
15111	schaersvoo	6420	/* we supply the true x/y values...draw_curve() will convert these (x:y) to pixels : used for pan/scale */
18562	bpr	6421	double xydata[MAX_BUFFER+1];/* hmmm */
		6422	double x; /* real x-values */
		6423	double y; /* real y-values */
		6424	double xorg;
		6425	/*
		6426	29/12/2020
		6427	disabled to try and synchronise curve+affine behaviour in complex scripts produced by "elec, tool circuit" (BPR)
15623	schaersvoo	6428	int lim_ymin =(int)( ymin - 4*fabs(ymin));
		6429	int lim_ymax =(int)( ymax + 4*fabs(ymax));
		6430	*/
18562	bpr	6431	double c = 1.0;double s = 1.0;
		6432	if( use_rotate == TRUE ){s = sin(angle0.0174533);c = cos(angle0.0174533);}
		6433	for( t = tmin ;t <= tmax ; t = t + tstep ){
		6434	if( i < MAX_BUFFER - 2 ){
18552	bpr	6435	y = eval_t(fy, t);
		6436	/* if(y > lim_ymin && y < lim_ymax){*/
18562	bpr	6437	x = eval_t(fx, t);
		6438	if( x == x){ /* no NaN */
		6439	xorg = x;
		6440	if( use_affine == TRUE ){
		6441	x = xaffine_matrix[0] + yaffine_matrix[1]+affine_matrix[4];
		6442	y = xorgaffine_matrix[2] + yaffine_matrix[3]+affine_matrix[5];
		6443	}
		6444	if( use_rotate == TRUE){
		6445	x = (c * (x - rotationcenter[0])) + (s * (y - rotationcenter[1])) + rotationcenter[0];
		6446	y = (c * (y - rotationcenter[1])) - (s * (xorg - rotationcenter[0])) + rotationcenter[1];
		6447	}
		6448	xydata[i++] = x;
		6449	xydata[i++] = y;
		6450	}
		6451	/* } */
18552	bpr	6452	}
18562	bpr	6453	else
		6454	{
18552	bpr	6455	canvas_error("\nYour curve plotting produces too many data \n Use less plotsteps or some other means to reduce the amount of data... ");
18562	bpr	6456	}
18552	bpr	6457	}
18562	bpr	6458	eval_destroy(fx);
		6459	eval_destroy(fy);
		6460	return double_xy2js_array(xydata,i,find_number_of_digits(precision));
15111	schaersvoo	6461	}
7614	schaersvoo	6462
15111	schaersvoo	6463	char *double_xy2js_array(double xy[],int len,int decimals){
		6464	/*
		6465	1,2,3,4,5,6,7,8 --> [1,3,5,7],[2,4,6,8]
		6466	int xy[] is already checked for errors or overflow in "get_real()"
		6467	just to be sure we double check the size of "temp"
7614	schaersvoo	6468	*/
18562	bpr	6469	char temp[2MAX_BUFFER], string;
		6470	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6471	memset(temp,'\0',2MAX_BUFFER);/ clear memory */
		6472	int i;int space_left;
		6473	temp[0] = '[';/* start js-array */
		6474	for(i = 0; i < len;i = i + 2){ /* x_points[] */
		6475	if(i == len - 2){sprintf(tmp, "%.*f",decimals, xy[i]);}
		6476	else {sprintf(tmp, "%.*f,",decimals,xy[i]);}
		6477	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6478	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6479	else{
		6480	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce your image size or plotsteps ");}
15111	schaersvoo	6481	}
		6482	strncat(temp,"],[",4); /* close js x_values array and start new */
		6483	for(i = 1; i < len;i = i + 2){ /* y_points */
18557	bpr	6484	if(i == len - 1){ sprintf(tmp, "%.f",decimals,xy[i]);}else{sprintf(tmp, "%.f,",decimals,xy[i]);}
		6485	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6486	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}else{canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce your image size or plotsteps");}
15111	schaersvoo	6487	}
		6488	strncat(temp,"]",2);
		6489	string=(char *)my_newmem(sizeof(temp));
		6490	snprintf(string,sizeof(temp),"%s",temp);
		6491	return string;
		6492	}
7614	schaersvoo	6493
15111	schaersvoo	6494	char list2js_array(char list, char s){/ abc:defg:hjiuy:qwer --> ["abc","defg","hjiuy","qwer"] */
		6495	#define MAX_ARG 128
18562	bpr	6496	if( strlen(list)> MAX_ARG - 1){canvas_error("argument is too large (> 128)");}
		6497	char tmp[MAX_ARG];
		6498	size_t p = 0;
		6499	tmp[0] = '[';
		6500	tmp[1] = '\"';
		6501	size_t t = 2;
		6502	while(list[p] != '\0'){
		6503	if( list[p] == s[0] ){
		6504	tmp[t++]='\"';tmp[t++]=',';tmp[t++]='\"';
		6505	}
		6506	else
		6507	{
		6508	tmp[t++] = list[p];
		6509	}
		6510	p++;
15111	schaersvoo	6511	}
18562	bpr	6512	tmp[t++]='\"';tmp[t++]=']';tmp[t++]= '\0';
		6513	char js_array = (char )my_newmem(sizeof(tmp));
		6514	snprintf(js_array,sizeof(tmp),"%s",tmp);
		6515	return js_array;
15111	schaersvoo	6516	}
7963	schaersvoo	6517
15111	schaersvoo	6518	char *xy2js_array(int xy[],int len){
		6519	/*
		6520	1,2,3,4,5,6,7,8 --> [1,3,5,7],[2,4,6,8]
		6521	int xy[] is already checked for errors or overflow in "get_real()"
		6522	just to be sure we double check the size of "temp"
7614	schaersvoo	6523	*/
18562	bpr	6524	char temp[MAX_BUFFER], *string;
		6525	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6526	memset(temp,'\0',MAX_BUFFER);/* clear memory */
		6527	int i;int space_left;
		6528	temp[0] = '[';/* start js-array */
		6529	for(i = 0; i < len;i = i + 2){ /* x_points[] */
		6530	if(i == len - 2){sprintf(tmp, "%d", xy[i]);}else{sprintf(tmp, "%d,", xy[i]);}
		6531	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6532	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6533	else {
		6534	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce image size or plotsteps ");}
		6535	}
		6536	strncat(temp,"],[",4); /* close js x_values array and start new */
		6537	for(i = 1; i < len;i = i + 2){ /* y_points */
		6538	if(i == len - 1){ sprintf(tmp, "%d", xy[i]);}else{sprintf(tmp, "%d,", xy[i]);}
		6539	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6540	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6541	else{canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data\nreduce image size or plotsteps \n");}
		6542	}
		6543	strncat(temp,"]",2);
		6544	string=(char *)my_newmem(sizeof(temp));
		6545	snprintf(string,sizeof(temp),"%s",temp);
		6546	return string;
7614	schaersvoo	6547	}
		6548
15111	schaersvoo	6549	char *data2js_array(int data[],int len){
		6550	/*
		6551	1,2,3,4,5,6,7,8 --> [1,2,3,4,5,6,7,8]
		6552	int data[] is already checked for errors or overflow in "get_real()"
		6553	just to be sure we double check the size of "temp"
7614	schaersvoo	6554	*/
18562	bpr	6555	char temp[MAX_BUFFER], *string;
		6556	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6557	memset(temp,'\0',MAX_BUFFER);/* clear memory */
		6558	int i;int space_left;
		6559	temp[0] = '[';/* start js-array */
		6560	for(i = 0; i < len; i++){
		6561	if(i == len - 1){sprintf(tmp, "%d", data[i]);}else{sprintf(tmp, "%d,", data[i]);}
		6562	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6563	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6564	else{
		6565	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce image size or plotsteps ");
15111	schaersvoo	6566	}
18562	bpr	6567	}
		6568	strncat(temp,"]",2);
		6569	string=(char *)my_newmem(sizeof(temp));
		6570	snprintf(string,sizeof(temp),"%s",temp);
		6571	return string;
15111	schaersvoo	6572	}
7614	schaersvoo	6573
15111	schaersvoo	6574	char *doubledata2js_array(double data[],int len, int decimals){
		6575	/*
15116	bpr	6576	1.4355,2.345353,3.3455 --> [1.44,2.35,3.35]
15111	schaersvoo	6577	double data[] is already checked for errors or overflow in "get_real()"
		6578	just to be sure we double check the size of "temp"
8448	schaersvoo	6579	*/
18562	bpr	6580	char temp[MAX_BUFFER], *string;
		6581	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6582	memset(temp,'\0',MAX_BUFFER);/* clear memory */
		6583	int i;int space_left;
		6584	temp[0] = '[';/* start js-array */
		6585	for(i = 0; i < len; i++){
		6586	if(i == len - 1){sprintf(tmp, "%.*f",decimals,data[i]);}
		6587	else{sprintf(tmp, "%.*f,",decimals,data[i]);}
		6588	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6589	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6590	else{
		6591	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce image size or plotsteps ");}
		6592	}
		6593	strncat(temp,"]",2);
		6594	string=(char *)my_newmem(sizeof(temp));
		6595	snprintf(string,sizeof(temp),"%s",temp);
		6596	return string;
15111	schaersvoo	6597	}
13829	bpr	6598
15111	schaersvoo	6599	void *my_newmem(size_t size){
18562	bpr	6600	void *p;
		6601	if((p = malloc(size +1)) == NULL){canvas_error("canvasdraw: ran out of memory\n");}
		6602	return p;
15111	schaersvoo	6603	}
8224	bpr	6604
15111	schaersvoo	6605	int find_number_of_digits(int i){
18562	bpr	6606	if(i < 0 ){ i = -1*i;}
		6607	int digits = 0;
		6608	while ( i > 0){
		6609	digits++;
		6610	i = i/10;
		6611	}
		6612	return digits;
15111	schaersvoo	6613	}
7645	schaersvoo	6614
16828	schaersvoo	6615	int count_substring(char* string, char* substring) {
18164	schaersvoo	6616	int i, j, l1, l2;
16828	schaersvoo	6617	int count = 0;
		6618	l1 = strlen(string);
		6619	l2 = strlen(substring);
		6620	for(i = 0; i < l1 - l2 + 1; i++) {
		6621	if(strstr(string + i, substring) == string + i) {
		6622	count++;
		6623	i = i + l2 -1;
		6624	}
		6625	}
		6626	return count;
		6627	}
11830	schaersvoo	6628
7614	schaersvoo	6629	void check_string_length(int L){
18555	bpr	6630	if( L > MAX_BUFFER-1){
		6631	canvas_error("problem with your arguments to command...");
		6632	}
		6633	return;
7614	schaersvoo	6634	}
18555	bpr	6635	/* useful in hyp commands: determine if the hypsegment is an arc or a line */
18615	bpr	6636	/* give a point on the arc */
18555	bpr	6637	int hypgeodaux(double q, double ress, int full){
		6638	double alpha,beta,gamma,r,cx,cy,a1,a2,a3,tmp,
		6639	nx = -q[0]q[2]q[2]+(q[0]q[0]+q[1]q[1]+1)q[2]-q[0]q[3]*q[3]-q[0],
		6640	ny = -q[1]q[2]q[2]-q[1]q[3]q[3]+(q[0]q[0]+q[1]q[1]+1)*q[3]-q[1],
		6641	dy = -2q[1]q[2]+2q[0]q[3];
		6642	if (dydy1e4 <= nxnx+nyny){
		6643	if(full){
		6644	if (q[1]q[1]+q[0]q[0] > q[2]q[2]+q[3]q[3])
		6645	gamma = atan2(q[1],q[0]);
		6646	else
		6647	gamma = atan2(q[3],q[2]);
		6648	ress[0]=cos(gamma); ress[1]=sin(gamma); ress[2]=-cos(gamma); ress[3]=-sin(gamma);
		6649	}
		6650	else
		6651	{int i;for(i=0;i<4;++i) ress[i]=q[i];}
18615	bpr	6652	ress[6]=(q[0]+q[2])/2;
		6653	ress[7]=(q[1]+q[3])/2;
18555	bpr	6654	return 0;}
		6655	cx = ny/dy; cy=-nx/dy;
		6656	r = sqrt(cxcx+cycy-1);
		6657	if(full)
		6658	{alpha=atan(1/r); beta = atan2(cy,cx);a1=M_PI+beta-alpha;a2=M_PI+beta+alpha;}
		6659	else
		6660	{a1 = atan2(q[1]-cy, q[0]-cx);a2 = atan2(q[3]-cy, q[2]-cx);}
		6661	if (fabs(a2-a1)>M_PI){if(a1<a2) a1+=2M_PI; else a2+=2M_PI;};
		6662	a3 = (a1+a2)/2;
		6663	if(a1>a2) {tmp=a1; a1=a2; a2=tmp;}
		6664	ress[0]=cx;
		6665	ress[1]=cy;
		6666	ress[2]=2*r;
		6667	ress[3]=2*r;
		6668	ress[4]=360+180/M_PI*a1;
		6669	ress[5]=360+180/M_PI*a2;
		6670	ress[6]=cx+r*cos(a3);
		6671	ress[7]=cy+r*sin(a3);
		6672	return 1;
		6673	}
7614	schaersvoo	6674
		6675	int get_token(FILE *infile){
18589	bpr	6676	int left,milieu,delta,right,c,i=0;
18562	bpr	6677	char temp[MAX_INT], *input_type;
18589	bpr	6678	enum{rien,usefilled,usedashed};
		6679	static struct commande {char *nom; int res; int special;} table[]=
		6680	{
		6681	{"#",COMMENT,0},
		6682	{"affine",AFFINE,0},
		6683	{"allowdups",ALLOW_DUPLICATES,0},
		6684	{"angle",ANGLE,0},
		6685	{"animate",ANIMATE,0},
		6686	{"arc",ARC,0},
		6687	{"arcarrow",ARCARROW,0},
		6688	{"arrow",ARROW,0},
		6689	{"arrow2",ARROW2,0},
		6690	{"arrowarc",ARCARROW,0},
		6691	{"arrowhead",ARROWHEAD,0},
		6692	{"arrows",ARROWS,0},
		6693	{"arrows2",ARROWS2,0},
		6694	{"audio",AUDIO,0},
		6695	{"audioobject",AUDIOOBJECT,0},
		6696	{"axis",AXIS,0},
		6697	{"axisnumbering",AXIS_NUMBERING,0},
		6698	{"axisnumbers",AXIS_NUMBERING,0},
		6699	{"backgroundimage",BGIMAGE,0},
		6700	{"barchart",BARCHART,0},
		6701	{"bezier",BEZIER,0},
		6702	{"bgcolor",BGCOLOR,0},
		6703	{"bgimage",BGIMAGE,0},
		6704	{"blink",BLINK,0},
		6705	{"boxplot",BOXPLOT,0},
		6706	{"boxplotdata",BOXPLOTDATA,0},
		6707	{"brokenline",POLYLINE,0},
		6708	{"canvastype",CANVASTYPE,0},
		6709	{"centered",CENTERED,0},
		6710	{"centerstring",CENTERSTRING,0},
		6711	{"chemtex",CHEMTEX,0},
		6712	{"circle",CIRCLE,0},
		6713	{"circles",CIRCLES,0},
		6714	{"clearbutton",CLEARBUTTON,0},
		6715	{"clicktile",CLICKTILE,0},
		6716	{"clicktile_colors",CLICKTILE_COLORS,0},
		6717	{"clock",CLOCK,0},
		6718	{"colorpalette",COLORPALETTE,0},
		6719	{"colors",MULTISTROKECOLORS,0},
		6720	{"copy",COPY,0},
		6721	{"copyresized",COPYRESIZED,0},
		6722	{"crosshair",CROSSHAIR,0},
		6723	{"crosshairs",CROSSHAIRS,0},
		6724	{"crosshairsize",CROSSHAIRSIZE,0},
		6725	{"css",CSS,0},
		6726	{"cursor",CURSOR,0},
		6727	{"curve",CURVE,0},
		6728	{"curvedarrow",CURVEDARROW,0},
		6729	{"curvedarrow2",CURVEDARROW2,0},
		6730	{"curvedarrows",CURVEDARROWS,0},
		6731	{"curvedarrows2",CURVEDARROWS2,0},
		6732	{"darrow",ARROW,usedashed},
		6733	{"darrow2",ARROW2,usedashed},
		6734	{"dashed",DASHED,0},
		6735	{"dashtype",DASHTYPE,0},
		6736	{"dcurve",CURVE,usedashed},
		6737	{"delete",CLEARBUTTON,0},
		6738	{"demiline",HALFLINE,0},
		6739	{"demilines",HALFLINES,0},
		6740	{"dhline",HLINE,usedashed},
		6741	{"diafill",DIAMONDFILL,0},
		6742	{"diamondfill",DIAMONDFILL,0},
		6743	{"disk",CIRCLE,usefilled},
		6744	{"disks",CIRCLES,usefilled},
		6745	{"display",MOUSE_DISPLAY,0},
		6746	{"dline",LINE,usedashed},
		6747	{"dotfill",DOTFILL,0},
		6748	{"dplot",CURVE,usedashed},
		6749	{"dpolyline",POLYLINE,usedashed},
		6750	{"drag",DRAG,0},
		6751	{"dsegment",SEGMENT,usedashed},
		6752	{"dsegments",SEGMENTS,usedashed},
		6753	{"duplicates",ALLOW_DUPLICATES,0},
		6754	{"dvline",VLINE,usedashed},
		6755	{"ellipse",ELLIPSE,0},
		6756	{"ellipses",ELLIPSES,0},
		6757	{"end",END,0},
		6758	{"erase",CLEARBUTTON,0},
		6759	{"farc",ARC,usefilled},
		6760	{"fcircle",CIRCLE,usefilled},
		6761	{"fcircles",CIRCLES,usefilled},
		6762	{"fellipse",ELLIPSE,usefilled},
		6763	{"fhypcircles",HYPCIRCLES,usefilled},
18615	bpr	6764	{"fhyppolygon",HYPPOLY,usefilled},
18589	bpr	6765	{"fill",FLOODFILL,0},
		6766	{"fillall",FILLALL,0},
		6767	{"fillcolor",FILLCOLOR,0},
		6768	{"fillcolors",MULTIFILLCOLORS,0},
		6769	{"filled",FILLED,0},
		6770	{"filledarc",ARC,usefilled},
		6771	{"filledpoly",POLY,usefilled},
		6772	{"filledpolygon",POLY,usefilled},
18608	bpr	6773	{"fillopacity",FILLOPACITY,0},
18589	bpr	6774	{"fillpattern",FILLPATTERN,0},
		6775	{"filltoborder",FILLTOBORDER,0},
		6776	{"floodfill",FLOODFILL,0},
		6777	{"fontcolor",FONTCOLOR,0},
		6778	{"fontfamily",FONTFAMILY,0},
		6779	{"fontsize",FONTSIZE,0},
		6780	{"fpoly",POLY,usefilled},
		6781	{"fpolygon",POLY,usefilled},
		6782	{"frect",RECT,usefilled},
		6783	{"frectangle",RECT,usefilled},
		6784	{"frects",RECTS,usefilled},
		6785	{"froundrect",ROUNDRECT,usefilled},
		6786	{"froundrects",ROUNDRECTS,usefilled},
		6787	{"fsquare",SQUARE,usefilled},
		6788	{"fsquares",RECTS,usefilled},
		6789	{"ftriangle",TRIANGLE,usefilled},
		6790	{"ftriangles",TRIANGLES,usefilled},
		6791	{"functionlabel",FUNCTION_LABEL,0},
		6792	{"functionlabels",FUNCTION_LABEL,0},
		6793	{"grid",GRID,0},
		6794	{"gridfill",GRIDFILL,0},
		6795	{"group",GROUP,0},
		6796	{"halfline",HALFLINE,0},
		6797	{"halflines",HALFLINES,0},
		6798	{"hatchfill",HATCHFILL,0},
		6799	{"highlight",STYLE,0},
		6800	{"hline",HLINE,0},
		6801	{"hlines",HLINES,0},
		6802	{"horizontalline",HLINE,0},
		6803	{"horizontallines",HLINES,0},
		6804	{"html",HTML,0},
		6805	{"http",HTTP,0},
		6806	{"hypcircles",HYPCIRCLES,0},
		6807	{"hyplines",HYPLINES,0},
		6808	{"hyppolygon",HYPPOLY,0},
		6809	{"hyprays",HYPRAYS,0},
		6810	{"hypsegments",HYPSEGMENTS,0},
		6811	{"imagefill",IMAGEFILL,0},
		6812	{"imagepalette",IMAGEPALETTE,0},
		6813	{"input",INPUT,0},
		6814	{"intooltip",INTOOLTIP,0},
		6815	{"jscurve",JSCURVE,0},
		6816	{"jsmath",JSMATH,0},
		6817	{"jsplot",JSCURVE,0},
		6818	{"katex",LATEX,0},
		6819	{"kill",KILL,0},
		6820	{"killaffine",KILLAFFINE,0},
		6821	{"killgroup",KILLSLIDER,0},
		6822	{"killinear",KILLLINEAR,0},
		6823	{"killlinear",KILLLINEAR,0},
		6824	{"killreset",NORESET,0},
		6825	{"killrotate",KILLROTATE,0},
		6826	{"killslider",KILLSLIDER,0},
		6827	{"killtranslate",KILLTRANSLATION,0},
		6828	{"killtranslation",KILLTRANSLATION,0},
		6829	{"latex",LATEX,0},
		6830	{"lattice",LATTICE,0},
		6831	{"legend",LEGEND,0},
		6832	{"legendcolors",LEGENDCOLORS,0},
		6833	{"levelcurve",LEVELCURVE,0},
		6834	{"line",LINE,0},
		6835	{"linear",LINEAR,0},
		6836	{"linegraph",LINEGRAPH,0},
		6837	{"lines",LINES,0},
		6838	{"linewidth",LINEWIDTH,0},
		6839	{"linewidths",MULTILINEWIDTH,0},
		6840	{"math",LATEX,0},
		6841	{"mathml",MATHML,0},
		6842	{"mouse",MOUSE,0},
		6843	{"mousedegree",MOUSE_DEGREE,0},
		6844	{"mouseprecision",MOUSE_PRECISION,0},
		6845	{"mousex",MOUSEX,0},
		6846	{"mousey",MOUSEY,0},
		6847	{"multicolors",MULTISTROKECOLORS,0},
		6848	{"multidash",MULTIDASH,0},
		6849	{"multidraw",MULTIDRAW,0},
		6850	{"multifill",MULTIFILL,0},
		6851	{"multifillcolors",MULTIFILLCOLORS,0},
		6852	{"multifillopacity",MULTIFILLOPACITY,0},
		6853	{"multiinput",MULTIUSERINPUT,0},
		6854	{"multilabel",MULTILABEL,0},
		6855	{"multilinewidth",MULTILINEWIDTH,0},
		6856	{"multisnap",MULTISNAPTOGRID,0},
		6857	{"multisnaptogrid",MULTISNAPTOGRID,0},
		6858	{"multistrokecolors",MULTISTROKECOLORS,0},
		6859	{"multistrokeopacity",MULTISTROKEOPACITY,0},
		6860	{"multiuserinput",MULTIUSERINPUT,0},
		6861	{"newrange",NEWRANGE,0},
		6862	{"noreset",NORESET,0},
		6863	{"nostatus",STATUS,0},
		6864	{"noxaxis",NOXAXIS,0},
		6865	{"noyaxis",NOYAXIS,0},
		6866	{"numberline",NUMBERLINE,0},
		6867	{"obabel",OBABEL,0},
		6868	{"onclick",ONCLICK,0},
		6869	{"opacity",OPACITY,0},
		6870	{"parallel",PARALLEL,0},
		6871	{"path",POLYLINE,0},
		6872	{"patternfill",PATTERNFILL,0},
		6873	{"piechart",PIECHART,0},
		6874	{"pixels",PIXELS,0},
		6875	{"pixelsize",PIXELSIZE,0},
		6876	{"plot",CURVE,0},
		6877	{"plotstep",PLOTSTEPS,0},
		6878	{"plotsteps",PLOTSTEPS,0},
		6879	{"point",POINT,0},
		6880	{"pointer",CURSOR,0},
		6881	{"points",POINTS,0},
		6882	{"poly",POLY,0},
		6883	{"polygon",POLY,0},
		6884	{"polyline",POLYLINE,0},
		6885	{"popup",POPUP,0},
		6886	{"precision",MOUSE_PRECISION,0},
		6887	{"protractor",PROTRACTOR,0},
		6888	{"range",RANGE,0},
		6889	{"ranget",TRANGE,0},
		6890	{"rangex",XRANGE,0},
		6891	{"rangey",YRANGE,0},
		6892	{"rays",RAYS,0},
		6893	{"rect",RECT,0},
		6894	{"rectangle",RECT,0},
		6895	{"rects",RECTS,0},
		6896	{"replyformat",REPLYFORMAT,0},
		6897	{"reset",RESET,0},
		6898	{"resetoffset",RESETOFFSET,0},
		6899	{"rotate",ROTATE,0},
		6900	{"rotationcenter",ROTATION_CENTER,0},
		6901	{"roundrect",ROUNDRECT,0},
		6902	{"roundrectangle",ROUNDRECT,0},
		6903	{"roundrects",ROUNDRECTS,0},
		6904	{"ruler",RULER,0},
		6905	{"seg",SEGMENT,0},
		6906	{"segment",SEGMENT,0},
		6907	{"segments",SEGMENTS,0},
		6908	{"segs",SEGMENTS,0},
		6909	{"setlimits",SETLIMITS,0},
		6910	{"setpixel",SETPIXEL,0},
		6911	{"settile",FILLPATTERN,0},
		6912	{"sgraph",SGRAPH,0},
		6913	{"size",SIZE,0},
		6914	{"slider",SLIDER,0},
		6915	{"snaptofun",SNAPTOFUNCTION,0},
		6916	{"snaptofunction",SNAPTOFUNCTION,0},
		6917	{"snaptogrid",SNAPTOGRID,0},
		6918	{"snaptopoints",SNAPTOPOINTS,0},
		6919	{"square",SQUARE,0},
		6920	{"status",STATUS,0},
		6921	{"string",STRING,0},
		6922	{"stringup",STRINGUP,0},
		6923	{"strokecolor",STROKECOLOR,0},
		6924	{"strokecolors",MULTISTROKECOLORS,0},
18608	bpr	6925	{"strokeopacity",STROKEOPACITY,0},
18589	bpr	6926	{"style",STYLE,0},
		6927	{"text",FLY_TEXT,0},
		6928	{"textarea",TEXTAREA,0},
		6929	{"textfill",TEXTFILL,0},
		6930	{"textup",FLY_TEXTUP,0},
		6931	{"title",CENTERSTRING,0},
		6932	{"trace_jscurve",TRACE_JSCURVE,0},
		6933	{"trange",TRANGE,0},
		6934	{"translate",TRANSLATION,0},
		6935	{"translation",TRANSLATION,0},
		6936	{"transparent",OPACITY,0},
		6937	{"triangle",TRIANGLE,0},
		6938	{"triangles",TRIANGLES,0},
		6939	{"tsteps",PLOTSTEPS,0},
		6940	{"userboxplot",USERBOXPLOT,0},
		6941	{"userboxplotdata",USERBOXPLOT,0},
		6942	{"userdraw",USERDRAW,0},
		6943	{"userinput",USERINPUT,0},
		6944	{"userinput_function",USERINPUT_FUNCTION,0},
		6945	{"userinput_xy",USERINPUT_XY,0},
		6946	{"vector",ARROW,0},
		6947	{"vectors",ARROWS,0},
		6948	{"verticalline",VLINE,0},
		6949	{"verticallines",VLINES,0},
		6950	{"video",VIDEO,0},
		6951	{"vline",VLINE,0},
		6952	{"vlines",VLINES,0},
		6953	{"xaxis",X_AXIS_STRINGS,0},
		6954	{"xaxistext",X_AXIS_STRINGS,0},
		6955	{"xaxistextup",X_AXIS_STRINGS_UP,0},
		6956	{"xaxisup",X_AXIS_STRINGS_UP,0},
		6957	{"xerrorbars",XERRORBARS,0},
		6958	{"xlabel",XLABEL,0},
		6959	{"xlogbase",XLOGBASE,0},
		6960	{"xlogscale",XLOGSCALE,0},
		6961	{"xoffset",XOFFSET,0},
		6962	{"xrange",XRANGE,0},
		6963	{"xsnaptogrid",XSNAPTOGRID,0},
		6964	{"xunit",XUNIT,0},
		6965	{"xylogscale",XYLOGSCALE,0},
		6966	{"xyoffset",XYOFFSET,0},
		6967	{"yaxis",Y_AXIS_STRINGS,0},
		6968	{"yaxistext",Y_AXIS_STRINGS,0},
		6969	{"yerrorbars",YERRORBARS,0},
		6970	{"ylabel",YLABEL,0},
		6971	{"ylogbase",YLOGBASE,0},
		6972	{"ylogscale",YLOGSCALE,0},
		6973	{"yoffset",YOFFSET,0},
		6974	{"yrange",YRANGE,0},
		6975	{"ysnaptogrid",YSNAPTOGRID,0},
		6976	{"yunit",YUNIT,0},
		6977	{"zoom",ZOOM,0}
		6978	};
7614	schaersvoo	6979
18552	bpr	6980	while(((c = getc(infile)) != EOF)&&(c!='\n')&&(c!=',')&&(c!='=')&&(c!='\r')&&(c!='\t')){
		6981	if( i == 0 && (c == ' ') ){ continue; /* white spaces or tabs allowed before first command identifier */
		6982	}else{
		6983	if( c == ' ' ){
		6984	break;
		6985	}else{
		6986	temp[i] = c;
		6987	if(i > MAX_INT - 2){canvas_error("command string too long !");}
		6988	i++;
		6989	}
		6990	}
		6991	if(temp[0] == '#'){ break; }
		6992	}
		6993	if (c == '\n' \|\| c == '\r' \|\| c == '\t' ){ line_number++; }
		6994	if (c == EOF) {finished=1;return 0;}
7614	schaersvoo	6995
18552	bpr	6996	temp[i]='\0';
		6997	if(strstr(temp,"dash") !=0 && strlen(temp) > 4 && strstr(temp,"dashtype") == 0 ){
		6998	/* 4/2024 adapt to Flydraw's dashing syntax for all objects with prefix "dash" */
		6999	use_dashed = TRUE;int idx=0;int p;
		7000	for( p = 4; p < strlen(temp); p++){temp[idx] = temp[p];idx++;}
		7001	input_type = (char*)my_newmem(idx); snprintf(input_type,idx+1,"%s",temp);
		7002	}else{
		7003	input_type=(char*)my_newmem(strlen(temp));
		7004	snprintf(input_type,sizeof(temp),"%s",temp);
		7005	}
18572	bpr	7006	/* fprintf(stdout,"input_type = %s no_reset = %d <br>",input_type,no_reset);*/
18589	bpr	7007
		7008	left=0; right=sizeof(table)/sizeof(struct commande);
		7009	while (left<right){
		7010	milieu = (left+right)/2;
		7011	delta = strcmp(input_type, table[milieu].nom);
		7012	if (delta == 0){
		7013	free(input_type);
		7014	if (table[milieu].special==usefilled) use_filled=TRUE;
		7015	if (table[milieu].special==usedashed) use_dashed=TRUE;
		7016	return table[milieu].res;
		7017	}
		7018	if (delta<0) right=milieu; else left=milieu+1;
18552	bpr	7019	}
		7020	free(input_type);
18562	bpr	7021	ungetc(c,infile);
		7022	return 0;
7614	schaersvoo	7023	}

Subversion Repositories wimsdev

(root)/trunk/wims/src/Misc/canvasdraw/canvasdraw.c – Rev 18641