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
18642	schaersvoo	1036	@ make sure to include the ''remove button`` by using command <a href='#clearbutton'>clearbutton some_text</a><br/>please note: right mouse click will alse remove last added item...
		1037	@%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,100%colorpalette red,green,yellow,blue%userdraw clickfill,green%clearbutton REMOVE
18552	bpr	1038	*/
		1039	if( use_tooltip == 1 ){canvas_error("command 'colorpalette' is incompatible with command 'intooltip tip_text'");}
		1040	fprintf(js_include_file,"var multifillcolors = [];var palettecolors = [");
		1041	while( ! done ){
		1042	temp = get_color(infile,1);
18642	schaersvoo	1043	fprintf(js_include_file,"\"%s,%d\",",temp,(int) (255*fill_opacity));
18552	bpr	1044	}
		1045	fprintf(js_include_file,"];");/* add black to avoid trouble with dangling comma... */
		1046	add_color_palette(css_class);
		1047	break;
15111	schaersvoo	1048
18552	bpr	1049	case COMMENT:
		1050	sync_input(infile);
		1051	break;
11806	schaersvoo	1052
18552	bpr	1053	case COPY:
		1054	/*
		1055	@ copy x,y,x1,y1,x2,y2,[filename URL]
		1056	@ The image may be "bitmap" or "SVG"
		1057	@ Insert the region from (x1,y1) to (x2,y2) (in pixels) of [filename] to (x,y) in x/y-range
		1058	@ If x1=y1=x2=y2=-1, the whole [filename URL] is copied.
		1059	@ [filename] is the URL of the image
		1060	@ <em>TODO:move special image functions to generic 'dragstuff' library</em>
		1061	@ URL is normal URL of network reachable image file location
		1062	@ 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>.
		1063	@ 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
		1064	@ ''onclick`` for external images may be mixed with canvas generated stuff (like lines,curves, embeded XML etc)
		1065	@ you may draw / userdraw / drag other stuff on top of an "imported" image
		1066	@ the use of a slider is not possible: if needed, use command <a href='#html'>html x,y,<img src=my_image.svg /> </a>
		1067	@ use keyword <a href='#centered'>centered</a> before command ''copy`` to place image center at given coordinates.
		1068	@%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
		1069	@%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
		1070	@%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
		1071	*/
		1072	for(i = 0 ; i<7;i++){
		1073	switch(i){
		1074	case 0: double_data[0]=get_real(infile,0);break; /* x left top corner in x/y range */
		1075	case 1: double_data[1]=get_real(infile,0);break; /* y left top corner in x/y range */
		1076	case 2: int_data[2]=(int)(get_real(infile,0));break;/* x1 in px of external image */
		1077	case 3: int_data[3]=(int)(get_real(infile,0));break;/* y1 in px of external image */
		1078	case 4: int_data[4]=(int)(get_real(infile,0));break;/* x2 --> width */
		1079	case 5: int_data[5]=(int)(get_real(infile,0)) ;break;/* y2 --> height */
		1080	case 6: URL = get_string(infile,1);
		1081	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1082	if(use_affine == TRUE ){transform(2,2);}
		1083	int_data[0] = x2px(double_data[0]);
		1084	int_data[1] = y2px(double_data[1]);
		1085	int_data[6] = int_data[4] - int_data[2];/* swidth & width (if not scaling )*/
		1086	int_data[7] = int_data[5] - int_data[3];/* sheight & height (if not scaling )*/
		1087	if( onclick == 0 ){ /* no mouse needed static image copy */
		1088	if(js_function[DRAW_EXTERNAL_IMAGE] == 0){/* create canvas just once */
		1089	fprintf(js_include_file,"var image_copy_canvas = create_canvas%d(%d,xsize,ysize);",canvas_root_id,STATIC_IMAGE_CANVAS);
		1090	js_function[DRAW_EXTERNAL_IMAGE] = 1;
		1091	}
18557	bpr	1092	tmp_buffer=my_newmem(MAX_BUFFER);
		1093	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	1094	}
		1095	else /* onclick or drag & drop external copy images */
		1096	{
		1097	js_function[DRAG_EXTERNAL_IMAGE] = 1;
18557	bpr	1098	tmp_buffer=my_newmem(MAX_BUFFER);
		1099	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	1100	}
		1101	add_to_buffer(tmp_buffer);
		1102	object_cnt++;
		1103	break;
		1104	default: break;
		1105	}
		1106	}
		1107	reset();
		1108	break;
11806	schaersvoo	1109	/*
		1110	HTML5 specs:
		1111	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
18552	bpr	1112	img Specifies the image, canvas, or video element to use
		1113	sx The x coordinate where to start clipping: x1 = int_data[0]
		1114	sy The y coordinate where to start clipping: x2 = int_data[1]
		1115	swidth The width of the clipped image: int_data[2] - int_data[0]
14066	bpr	1116	sheight The height of the clipped image: int_data[3] - int_data[1]
18552	bpr	1117	x The x coordinate where to place the image on the canvas: dx1 = int_data[4]
		1118	y The y coordinate where to place the image on the canvas: dy1 = int_data[5]
		1119	width The width of the image to use (stretch or reduce the image): dx2 - dx1 = int_data[6]
		1120	height The height of the image to use (stretch or reduce the image): dy2 - dy1 = int_data[7]
11806	schaersvoo	1121	*/
18552	bpr	1122	case COPYRESIZED:
		1123	/*
		1124	@ copyresized x1,y2,x2,y2,dx1,dy1,dx2,dy2,image_file_url
		1125	@ The image may be any "bitmap" or "SVG"
		1126	@ 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
		1127	@ (dx1:dy1) must be left top corner; (dx2:dy2) must be right bottom corner of inserted image
		1128	@ If x1=y1=x2=y2=-1, the whole [filename / URL ] is copied and resized.
		1129	@ 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 !!)
		1130	@ 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>
		1131	@ 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
		1132	@ ''onclick`` for external images may be mixed with canvas generated stuff (like lines,curves etc)
		1133	@ you may draw / userdraw / drag stuff on top of an "imported" image
		1134	@ 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``
		1135	@ use keyword <a href='#centered'>centered</a> before command 'copyresized' to place image center at given coordinates.
		1136	@ <em>TODO:move special image functions to generic 'dragstuff' library</em>
		1137	*/
		1138	for(i = 0 ; i<9;i++){
		1139	switch(i){
		1140	case 0: int_data[0] = (int)(get_real(infile,0));break; /* x1 */
		1141	case 1: int_data[1] = (int)(get_real(infile,0));break; /* y1 */
		1142	case 2: int_data[2] = (int)(get_real(infile,0));break;/* x2 */
		1143	case 3: int_data[3] = (int)(get_real(infile,0));break;/* y2 */
		1144	case 4: int_data[4] = x2px(get_real(infile,0));break;/* dx1 */
		1145	case 5: int_data[5] = y2px(get_real(infile,0));break;/* dy1 */
		1146	case 6: int_data[6] = x2px(get_real(infile,0));break;/* dx2 */
		1147	case 7: int_data[7] = y2px(get_real(infile,0));break;/* dy2 */
		1148	case 8: URL = get_string(infile,1);
		1149	if( int_data[1] == -1 ){ int_data[10] = 1; }else{int_data[10] = 0; }/* resized / not resized */
		1150	/* flag error when wrong diagonal: copyresized -1,-1,-1,-1,0,0,7,7,testfig.gif */
		1151	if( int_data[7] < int_data[5] \|\| int_data[6] < int_data[4]){
		1152	canvas_error("in copyresized, use:<br>left top corner (dx1:dy1) and right bottom corner (dx2:dy2) ! ");
		1153	}
		1154	int_data[2] = abs(int_data[2] - int_data[0]);/* swidth */
		1155	int_data[3] = abs(int_data[3] - int_data[1]);/* sheight */
		1156	int_data[6] = abs(int_data[6] - int_data[4]);/* width */
		1157	int_data[7] = abs(int_data[7] - int_data[5]);/* height */
		1158	if( onclick == 0 ){ /* no mouse needed static image copy */
		1159	if(js_function[DRAW_EXTERNAL_IMAGE] == 0){
		1160	fprintf(js_include_file,"var image_copy_canvas = create_canvas%d(%d,xsize,ysize);",canvas_root_id,STATIC_IMAGE_CANVAS);
		1161	js_function[DRAW_EXTERNAL_IMAGE] = 1;
		1162	}
18557	bpr	1163	tmp_buffer=my_newmem(MAX_BUFFER);
		1164	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	1165	}
		1166	else /* onclick or drag & drop external copy images */
		1167	{
		1168	js_function[DRAG_EXTERNAL_IMAGE] = 1;
18557	bpr	1169	tmp_buffer=my_newmem(MAX_BUFFER);
		1170	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	1171	object_cnt++;
		1172	}
		1173	add_to_buffer(tmp_buffer);
		1174	break;
		1175	default: break;
		1176	}
		1177	}
		1178	reset();
		1179	break;
8386	schaersvoo	1180
18552	bpr	1181	case CROSSHAIR:
		1182	/*
		1183	@ crosshair x,y,color
		1184	@ draw a single crosshair point at (x;y) in color ''color``
		1185	@ use command <code>crosshairsize int</code> and / or <code>linewidth int</code> to adjust
		1186	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1187	@%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
		1188	*/
		1189	for(i=0;i<3;i++){
		1190	switch(i){
		1191	case 0: double_data[0] = get_real(infile,0);break; /* x */
		1192	case 1: double_data[1] = get_real(infile,0);break; /* y */
		1193	case 2: stroke_color = get_color(infile,1);/* name or hex color */
		1194	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1195	if(use_affine == TRUE ){ transform(2,2);}
		1196	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1197	decimals = find_number_of_digits(precision);
18557	bpr	1198	tmp_buffer=my_newmem(MAX_BUFFER);
		1199	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	1200	add_to_buffer(tmp_buffer);
		1201	if(onclick != 0){object_cnt++;}
		1202	/* object_cnt++ */
		1203	reset();
		1204	dragstuff[7] = 1;
		1205	break;
		1206	default:break;
		1207	}
		1208	}
		1209	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1210	break;
11806	schaersvoo	1211
18552	bpr	1212	case CROSSHAIRS:
		1213	/*
		1214	@ crosshairs color,x1,y1,x2,y2,...,x_n,y_n
		1215	@ draw multiple crosshair points at given coordinates in color ''color``
		1216	@ use command <code>crosshairsize int</code> and / or <code>linewidth int</code> to adjust
		1217	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		1218	@%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
		1219	@%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	1220	*/
18552	bpr	1221	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		1222	fill_color = stroke_color;
		1223	i=0;
		1224	while( ! done ){ /* get next item until EOL*/
		1225	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1226	if(i%2 == 0 ){
		1227	double_data[i] = get_real(infile,0); /* x */
		1228	}
		1229	else {
		1230	double_data[i] = get_real(infile,1); /* y */
		1231	}
		1232	i++;
		1233	}
		1234	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		1235	if(use_affine == TRUE ){ transform(i-1,2);}
		1236	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1237	decimals = find_number_of_digits(precision);
		1238	for(c=0 ; c < i-1 ; c = c+2){
18557	bpr	1239	tmp_buffer=my_newmem(MAX_BUFFER);
		1240	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	1241	add_to_buffer(tmp_buffer);
		1242	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		1243	}
		1244	dragstuff[7] = 1;
		1245	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1246	reset();
		1247	break;
		1248	case CROSSHAIRSIZE:
		1249	/*
		1250	@ crosshairsize int
		1251	@ default 8 (px)
		1252	*/
		1253	crosshair_size = (int) (get_real(infile,1));
		1254	break;
		1255	case CSS:
		1256	/*
		1257	@ css css_class
		1258	@ may be used before any ''style-able`` html object (like inputfields or buttons) or some html objects that are generated by some canvasdraw commands
		1259	@ in case of <a href="#multidraw">multidraw</a> this command must be a table css class, for example "wimstable"
		1260	@%css%size 400,400%xrange -10,10%yrange -10,10%css wims_button_help%input 0,0,10,1,Hello
		1261	*/
		1262	css_class = get_string(infile,1);
		1263	break;
		1264	case CURSOR:
		1265	/*
		1266	@ cursor some CSS cursor_style
		1267	@ alternative: pointer
		1268	@ style can be any valid CSS property value
		1269	@ 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
		1270	@ note: wims will not check the validity of your cursor declaration
		1271	@%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
		1272	*/
		1273	fprintf(js_include_file,"canvas_div%d.style.cursor = \"%s\";",canvas_root_id,get_string(infile,1));
		1274	break;
		1275	case CURVE:
		1276	/*
18556	bpr	1277	@ curve color,formula(x)
		1278	@ alternative: plot
18572	bpr	1279	@ 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	1280	@ use command <a href="#precision">precision</a> to increase the number of digits of the plotted points
		1281	@ use command <a href="#plotsteps">plotsteps</a> to increase / decrease the amount of plotted points (default 150)
		1282	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1283	@ 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	1284	@%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	1285	*/
		1286	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	1287
18552	bpr	1288	if( use_parametric == TRUE ){ /* parametric color,fun1(t),fun2(t)*/
		1289	use_parametric = FALSE;
		1290	stroke_color = get_color(infile,0);
		1291	char *fun1 = get_string_argument(infile,0);
		1292	char *fun2 = get_string_argument(infile,1);
		1293	if( strlen(fun1) == 0 \|\| strlen(fun2) == 0 ){canvas_error("parametric functions are NOT OK !");}
18557	bpr	1294	tmp_buffer=my_newmem(MAX_BUFFER);
18634	schaersvoo	1295	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	1296	add_to_buffer(tmp_buffer);
		1297	}
		1298	else{
		1299	stroke_color = get_color(infile,0);
		1300	char *fun1 = get_string_argument(infile,1);
		1301	if( strlen(fun1) == 0 ){canvas_error("function is NOT OK !");}
18557	bpr	1302	tmp_buffer=my_newmem(MAX_BUFFER);
18634	schaersvoo	1303	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	1304	add_to_buffer(tmp_buffer);
		1305	}
		1306	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		1307	dragstuff[9] = 1;
		1308	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1309	reset();
		1310	break;
		1311	case CURVEDARROW:
14038	schaersvoo	1312	/*
18556	bpr	1313	@ curvedarrow x1,y1,xc,yc,x2,y2,color
		1314	@ 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)
		1315	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1316	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1317	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1318	@%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
		1319	@%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	1320
14029	schaersvoo	1321	h[0] = arrowhead
14066	bpr	1322	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1323	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	1324	*/
18552	bpr	1325	for(i=0;i<7;i++){
		1326	switch(i){
		1327	case 0: double_data[0] = get_real(infile,0);break; /* x1 */
		1328	case 1: double_data[1] = get_real(infile,0);break; /* y1 */
		1329	case 2: double_data[2] = get_real(infile,0);break; /* xc */
		1330	case 3: double_data[3] = get_real(infile,0);break; /* yc */
		1331	case 4: double_data[4] = get_real(infile,0);break; /* y3 */
		1332	case 5: double_data[5] = get_real(infile,0);break; /* y3 */
		1333	case 6: stroke_color = get_color(infile,1);/* name or hex color */
		1334	if(use_rotate == TRUE ){rotate(6,angle,rotationcenter,2);}
		1335	if(use_affine == TRUE ){ transform(6,2);}
		1336	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1337	decimals = find_number_of_digits(precision);
18557	bpr	1338	tmp_buffer=my_newmem(MAX_BUFFER);
		1339	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	1340	add_to_buffer(tmp_buffer);
		1341	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		1342	reset();
		1343	break;
		1344	}
		1345	}
		1346	dragstuff[21] = 1;
		1347	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1348	break;
		1349	case CURVEDARROW2:
14038	schaersvoo	1350	/*
18556	bpr	1351	@ curvedarrow2 x1,y1,xc,yc,x2,y2,color
		1352	@ 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)
		1353	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1354	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1355	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1356	@%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	1357	@%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	1358
		1359	h[0] = arrowhead
14066	bpr	1360	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1361	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	1362	*/
18552	bpr	1363	for(i=0;i<7;i++){
		1364	switch(i){
		1365	case 0: double_data[0] = get_real(infile,0);break; /* x1 */
		1366	case 1: double_data[1] = get_real(infile,0);break; /* y1 */
		1367	case 2: double_data[2] = get_real(infile,0);break; /* xc */
		1368	case 3: double_data[3] = get_real(infile,0);break; /* yc */
		1369	case 4: double_data[4] = get_real(infile,0);break; /* y3 */
		1370	case 5: double_data[5] = get_real(infile,0);break; /* y3 */
		1371	case 6: stroke_color = get_color(infile,1);/* name or hex color */
		1372	if(use_rotate == TRUE ){rotate(6,angle,rotationcenter,2);}
		1373	if(use_affine == TRUE ){ transform(6,2);}
		1374	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1375	decimals = find_number_of_digits(precision);
18557	bpr	1376	tmp_buffer=my_newmem(MAX_BUFFER);
		1377	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	1378	add_to_buffer(tmp_buffer);
		1379	if(onclick != 0){object_cnt++;}/* object_cnt++;*/
		1380	dragstuff[21] = 1;
		1381	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1382	reset();
		1383	break;
		1384	}
		1385	}
		1386	break;
		1387	case CURVEDARROWS:
14038	schaersvoo	1388	/*
18556	bpr	1389	@ curvedarrows color,x1,y1,xc,yc,x2,y2,...,x_(n-1),y_(n-1),xc,yc,x_n,y_n
		1390	@ 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)
		1391	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1392	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1393	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1394	@%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
		1395	@%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	1396
14030	schaersvoo	1397	h[0] = arrowhead
14066	bpr	1398	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1399	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	1400	*/
18552	bpr	1401	stroke_color = get_color(infile,0);/* name or hex color */
		1402	i = 0;
		1403	decimals = find_number_of_digits(precision);
		1404	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1405	while( ! done ){
		1406	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1407	double_data[0] = get_real(infile,0); /* x1 */
		1408	double_data[1] = get_real(infile,0); /* y1 */
		1409	double_data[2] = get_real(infile,0); /* xc */
		1410	double_data[3] = get_real(infile,0); /* yc */
		1411	double_data[4] = get_real(infile,0); /* x3 */
		1412	double_data[5] = get_real(infile,1); /* y3 */
18557	bpr	1413	tmp_buffer=my_newmem(MAX_BUFFER);
		1414	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	1415	add_to_buffer(tmp_buffer);
		1416	if(onclick != 0){object_cnt++;}
		1417	i = i + 6;
		1418	}
		1419	if(use_rotate == TRUE ){rotate(i-6,angle,rotationcenter,2);}
		1420	if(use_affine == TRUE ){ transform(i-6,2);}
		1421	dragstuff[21] = 1;
		1422	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1423	reset();
		1424	break;
		1425	case CURVEDARROWS2:
14038	schaersvoo	1426	/*
18556	bpr	1427	@ curvedarrows2 color,x1,y1,xc,yc,x2,y2,...x_(n-1),y_(n-1),xc,yc,x_n,y_n
		1428	@ 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)
		1429	@ use command <a href='#arrowhead'>arrowhead</a> to set the size of the arrow head.
		1430	@ use command <code>linewidth int</code> to adjust thickness of the arrow
		1431	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1432	@%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
		1433	@%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	1434
		1435	h[0] = arrowhead
14066	bpr	1436	h[1] = type: 1 = single 2=double arrow
15111	schaersvoo	1437	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	1438	*/
18552	bpr	1439	stroke_color = get_color(infile,0);/* name or hex color */
		1440	i = 0;
		1441	decimals = find_number_of_digits(precision);
		1442	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1443	while( ! done ){
		1444	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1445	double_data[0] = get_real(infile,0); /* x1 */
		1446	double_data[1] = get_real(infile,0); /* y1 */
		1447	double_data[2] = get_real(infile,0); /* xc */
		1448	double_data[3] = get_real(infile,0); /* yc */
		1449	double_data[4] = get_real(infile,0); /* x3 */
		1450	double_data[5] = get_real(infile,1); /* y3 */
18557	bpr	1451	tmp_buffer=my_newmem(MAX_BUFFER);
		1452	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	1453	add_to_buffer(tmp_buffer);
		1454	if(onclick != 0){object_cnt++;}
		1455	i = i + 6;
		1456	}
		1457	if(use_rotate == TRUE ){rotate(i-6,angle,rotationcenter,2);}
		1458	if(use_affine == TRUE ){ transform(i-6,2);}
		1459	dragstuff[21] = 1;
		1460	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1461	reset();
		1462	break;
		1463	case DASHED:
		1464	/*
		1465	@ dashed
		1466	@ keyword (no arguments required)
		1467	@ next object will be drawn with a dashed line
		1468	@ change dashing scheme by using command <a href="#dashtype">dashtype</a>
		1469	@%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
		1470	*/
		1471	use_dashed = TRUE;
		1472	break;
		1473	case DASHTYPE:
		1474	/*
		1475	@ dashtype line_width_px,space_width_px
		1476	@ every indiviual object may have its own dashtype, if needed...
		1477	@ When keyword <a href='#dashed'>dashed</a> is set, the objects will be drawn with this dashtype
		1478	@ default value <code>dashtype 2,2</code> e.g. 2px line and 2px space
		1479	@ HTML5 canvas specification supports more arguments (dashing schemes) ... but not all modern browsers are yet capable
		1480	@%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
		1481	*/
		1482	for(i=0;i<2;i++){
		1483	switch(i){
		1484	case 0 : dashtype[0] = (int) line_width*( get_real(infile,0)) ; break;
		1485	case 1 : dashtype[1] = (int) line_width*( get_real(infile,1)) ; break;
		1486	}
		1487	}
		1488	break;
		1489	case DIAMONDFILL:
		1490	/*
		1491	@ diamondfill x0,y0,dx,dy,color
		1492	@ x0,y0 in xrange / yrange
		1493	@ distances dx,dy in pixels
		1494	@ there is also a command <a href="#userdraw">userdraw diamondfill,color</a>
		1495	@%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
		1496	*/
		1497	js_function[DRAW_DIAMONDFILL] = 1;
		1498	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1499	js_function[DRAW_FILLTOBORDER] = 1;
		1500	add_js_filltoborder(canvas_type);
		1501	}
		1502	decimals = find_number_of_digits(precision);
		1503	for(i=0;i<5;i++){
		1504	switch(i){
		1505	case 0: double_data[0] = get_real(infile,0); break; /* x */
		1506	case 1: double_data[1] = get_real(infile,0); break; /* y */
		1507	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		1508	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		1509	case 4: stroke_color = get_color(infile,1);
		1510	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1511	if(use_affine == TRUE ){ transform(2,2);}
18573	bpr	1512	/* draw_diamondfill(ctx,x0,y0,dx,dy,linewidth,color,opacity,xsize,ysize) */
18557	bpr	1513	tmp_buffer=my_newmem(MAX_BUFFER);
		1514	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	1515	add_to_buffer(tmp_buffer);
		1516	fill_cnt++;
		1517	reset();
		1518	break;
		1519	default:break;
		1520	}
		1521	}
		1522	break;
		1523	case DOTFILL:
		1524	/*
		1525	@ dotfill x0,y0,dx,dy,color
		1526	@ x0,y0 in xrange / yrange
		1527	@ distances dx,dy in pixels
		1528	@ radius of dots is linewidth
		1529	@ there is also a command <a href="#userdraw">userdraw dotfill,color</a>
		1530	@%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
		1531	*/
		1532	js_function[DRAW_DOTFILL] = 1;
		1533	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1534	js_function[DRAW_FILLTOBORDER] = 1;
		1535	add_js_filltoborder(canvas_type);
		1536	}
		1537	decimals = find_number_of_digits(precision);
		1538	for(i=0;i<5;i++){
		1539	switch(i){
		1540	case 0: double_data[0] = get_real(infile,0); break; /* x in px */
		1541	case 1: double_data[1] = get_real(infile,0); break; /* y in py */
		1542	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		1543	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		1544	case 4: stroke_color = get_color(infile,1);
		1545	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		1546	if(use_affine == TRUE ){ transform(2,2);}
		1547	/* draw_dotfill(ctx,x0,y0,dx,dy,radius,color,opacity,xsize,ysize) */
18557	bpr	1548	tmp_buffer=my_newmem(MAX_BUFFER);
		1549	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	1550	add_to_buffer(tmp_buffer);
		1551	fill_cnt++;
		1552	reset();
		1553	break;
		1554	default:break;
		1555	}
		1556	}
		1557	break;
		1558	case DRAG:
		1559	/*
18556	bpr	1560	@ drag [x][y][xy]
		1561	@ the next object will be draggable in x / y / xy direction
		1562	@ the displacement can be read by <code>javascript:read_dragdrop();</code>
		1563	@ 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' !
		1564	@ <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 )
		1565	@ ''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)
		1566	@ <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
		1567	@ 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)
		1568	@ 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
		1569	@ 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.
		1570	@%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
		1571	@%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
		1572	@%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	1573	*/
		1574	temp = get_string(infile,1);
		1575	if(strstr(temp,"xy") != NULL ){
		1576	drag_type = 0;
		1577	} else {
		1578	if(strstr(temp,"x") != NULL ){
		1579	drag_type = 1;
		1580	}
		1581	else { drag_type = 2;}
		1582	}
		1583	/* assuming all drag&drop coordinates the same precision: so set only once */
		1584	if( print_drag_params_only_once == FALSE ){
		1585	fprintf(js_include_file,"dragdrop_precision = %d;use_dragdrop_reply = true;",precision);
		1586	print_drag_params_only_once = TRUE;
		1587	}
		1588	onclick = 2;
		1589	/* if(use_userdraw == TRUE ){canvas_error("\"drag & drop\" may not be combined with \"userdraw\" or \"pan and zoom\" \n");} */
		1590	use_dragstuff = 2;
		1591	js_function[INTERACTIVE] = 1;
		1592	break;
		1593	case ELLIPSE:
		1594	/*
		1595	@ ellipse xc,yc,width_x,height_y,color
		1596	@ ellipses with center xc/yc and width/height in x/y-range etc (this differs from flydraw syntax!)
		1597	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1598	@ will shrink / expand on zoom out / zoom in
		1599	@%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
		1600	*/
		1601	for(i=0;i<5;i++){
		1602	switch(i){
		1603	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		1604	case 1:double_data[1] = get_real(infile,0);break; /* y-values */
		1605	case 2:double_data[2] = get_real(infile,0);break; /* rx -> px */
		1606	case 3:double_data[3] = get_real(infile,0);break; /* ry -> px */
		1607	case 4:stroke_color = get_color(infile,1);/* name or hex color */
		1608	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,4);}
		1609	if(use_affine == TRUE ){ transform(2,4);}
		1610	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1611	decimals = find_number_of_digits(precision);
18557	bpr	1612	tmp_buffer=my_newmem(MAX_BUFFER);
		1613	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	1614	add_to_buffer(tmp_buffer);
		1615	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		1616	dragstuff[3] = 1;
		1617	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1618	reset();
		1619	break;
		1620	}
		1621	}
		1622	break;
		1623	case ELLIPSES:
		1624	/*
		1625	@ ellipses color,xc1,yc1,width_x1,height_y1,xc2,yc2,width_x2,height_y2,xc3,yc3,width_x3,height_y3,...
		1626	@ ellipses with center and height in x/y-range etc (this differs from flydraw syntax!)
		1627	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1628	@ will shrink / expand on zoom out / zoom in
		1629	@%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
		1630	*/
8224	bpr	1631
18552	bpr	1632	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		1633	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	1634	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	1635	i=1;
		1636	while( ! done ){ /* get next item until EOL*/
		1637	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1638	switch (i%4){
		1639	case 1:double_data[i-1] = get_real(infile,0);break; /* x */
		1640	case 2:double_data[i-1] = get_real(infile,0);break; /* y */
		1641	case 3:double_data[i-1] = get_real(infile,0);break; /* rx */
		1642	case 0:double_data[i-1] = get_real(infile,1);break; /* ry */
		1643	default: break;
		1644	}
		1645	i++;
		1646	}
		1647	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,4);}
		1648	if(use_affine == TRUE ){ transform(i-1,4);}
		1649	decimals = find_number_of_digits(precision);
		1650	for(c = 0 ; c < i-1 ; c = c+4){
18623	bpr	1651	check_string_length(string_length);
		1652	tmp_buffer=my_newmem(MAX_BUFFER);
		1653	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	1654	add_to_buffer(tmp_buffer);
		1655	if(onclick != 0){object_cnt++;} /* object_cnt++; */
		1656	}
		1657	reset();
		1658	dragstuff[3] = 1;
		1659	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		1660	break;
		1661	case FILLALL:
		1662	/*
		1663	@ fillall color,x1,y1,x2,y2...x_n,y_n
18615	bpr	1664	@ fill all the region containing points (x1:y1),(x2:y2)...(x_n:y_n) with color 'color'
		1665	@ any color (object) in the <a href="#canvastype">canvastype</a> will act as border to the bucket fill
18552	bpr	1666	@ use this command after all boundary objects are declared.
		1667	@ Use command 'userdraw clickfill,color' for user click driven flood fill.
		1668	@ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
		1669	@ 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..
		1670	@%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
		1671	*/
		1672	decimals = find_number_of_digits(precision);
		1673	fill_color=get_color(infile,0); /* how nice: now the color comes first...*/
		1674	i=0;
		1675	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1676	js_function[DRAW_FILLTOBORDER] = 1;
		1677	add_js_filltoborder(canvas_type);
		1678	}
		1679	while( ! done ){ /* get next item until EOL*/
		1680	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		1681	if(i%2 == 0 ){
		1682	double_data[i] = get_real(infile,0); /* x */
		1683	}
		1684	else {
		1685	double_data[i] = get_real(infile,1); /* y */
18557	bpr	1686	tmp_buffer=my_newmem(MAX_BUFFER);
18609	bpr	1687	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	1688	add_to_buffer(tmp_buffer);
		1689	fill_cnt++;
		1690	}
		1691	i++;
		1692	}
		1693	break;
		1694	case FILLED:
		1695	/*
		1696	@ filled
		1697	@ keyword (no arguments required)
		1698	@ the next ''fillable`` object (only the next !) will be filled
		1699	@ use command <a href="#fillcolor">fillcolor color</a> to set fillcolor
		1700	@ use <a href="#fillpattern">fillpattern</a> for non-solid color filling.
		1701	@ use command <code>opacity 0-255,0-255</code> to set stroke and fill-opacity
		1702	@ 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 !
		1703	*/
		1704	use_filled = 1;
		1705	break;
		1706	case FILLCOLOR:
		1707	/*
		1708	@ fillcolor colorname or #hex
		1709	@ set the color: mainly used for command 'userdraw obj,stroke_color'
18635	bpr	1710	@ 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	1711	@ see <a href="#fillpattern">fillpattern</a> for non-solid color filling.
		1712	*/
18623	bpr	1713	fillcolor = get_color(infile,1);
18635	bpr	1714	fill_color = fillcolor;
18552	bpr	1715	break;
		1716	case FILLPATTERN:
		1717	/*
		1718	@ fillpattern grid \| hatch \| diamond \| dot \| image_url
		1719	@ alternative: settile image_url
		1720	@ use a pattern as fillstyle
		1721	@ suitable for all fillable object including the <a href="#userdraw">userdraw objects' family</a>
18627	bpr	1722	@ note: do not use the ''f`` for a fillable object : this is used exclusively for solid color filling.
18569	bpr	1723	@ 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	1724	@ the pattern dimensions are hardcoded (linewidth, radius,dx,dy are fixed)
		1725	@ the pattern color is set by command <a href='#fillcolor'>fillcolor</a> and <a href='#opacity'>opacity</a>
		1726	@ see <a href="#fillcolor">fillcolor</a> for solid color filling.
18569	bpr	1727	@ 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	1728	@ 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	1729	@%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	1730	@%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
		1731	*/
		1732	temp = get_string(infile,1);
		1733	use_filled = 0;
		1734	js_function[DRAW_FILL_PATTERN] = 1;
		1735	if( strstr(temp,"grid") != 0 ){ use_filled = 2;}
		1736	else{
		1737	if( strstr(temp,"hatch") != 0 ){ use_filled = 3;}
		1738	else{
		1739	if( strstr(temp,"diamond") != 0 ){ use_filled = 4;}
		1740	else{
		1741	if( strstr(temp,"dot") != 0 ){ use_filled = 5;}
		1742	else{
		1743	if( strstr(temp,"/") != 0 ){ /* get_image_from_url() needs to be called after function definition...*/
		1744	use_filled = 6;js_function[JS_LOAD_IMAGE] = 1;
18557	bpr	1745	tmp_buffer=my_newmem(MAX_BUFFER);
		1746	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "get_image_from_url(\"%s\");",temp));
18552	bpr	1747	add_to_buffer(tmp_buffer);
		1748	}
		1749	}
		1750	}
		1751	}
		1752	}
		1753	if( use_filled == 0 ){canvas_error("fillpattern unknown or typo...choose grid,hatch,diamond of dot...");}
		1754	break;
		1755	case FILLTOBORDER:
		1756	/*
		1757	@ filltoborder x,y,bordercolor,color
		1758	@ fill the region of point (x:y) with color 'color'
18615	bpr	1759	@ any other color than bordercolor will not act as border to the bucket fill
		1760	@ 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	1761	@ use this command after all boundary objects are declared.
18615	bpr	1762	@ it can be useful to increase strokeopacity or linewidth
18552	bpr	1763	@ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
		1764	@ 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..
		1765	@ maybe used together with command <a href="#userdraw">userdraw clickfill,color</a>
18615	bpr	1766	@%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	1767	*/
		1768	for(i=0 ;i < 4 ; i++){
		1769	switch(i){
		1770	case 0:double_data[0] = get_real(infile,0);break;
		1771	case 1:double_data[1] = get_real(infile,0);break;
		1772	case 2:bgcolor = get_color(infile,0);break;
		1773	case 3:fill_color = get_color(infile,1);
18569	bpr	1774	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1775	js_function[DRAW_FILLTOBORDER] = 1;
		1776	add_js_filltoborder(canvas_type);
		1777	}
		1778	decimals = find_number_of_digits(precision);
18552	bpr	1779	/* we need to set a timeout: the canvas is not yet draw in memory? when floodfill is called directly... */
18569	bpr	1780	tmp_buffer=my_newmem(MAX_BUFFER);
18629	bpr	1781	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	1782	add_to_buffer(tmp_buffer);
		1783	fill_cnt++;
		1784	reset();
		1785	break;
18552	bpr	1786	default:break;
		1787	}
		1788	}
		1789	break;
		1790	case FLOODFILL:
		1791	/*
		1792	@ floodfill x,y,color
		1793	@ alternative: fill
		1794	@ fill the region of point (x:y) with color 'color'
		1795	@ any other color or size of picture (borders of picture) will act as border to the bucket fill
		1796	@ use this command after all boundary objects are declared.
		1797	@ Use command <code>userdraw clickfill,color</code> for user click driven flood fill.
		1798	@ use command <a href="#canvastype">canvastype </a> to fill another canvas (default should be fine: DRAG_CANVAS = 5)
		1799	@ 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..
		1800	@%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
		1801	*/
		1802	for(i=0 ;i < 4 ; i++){
		1803	switch(i){
		1804	case 0:double_data[0] = get_real(infile,0);break;
		1805	case 1:double_data[1] = get_real(infile,0);break;
		1806	case 2:fill_color = get_color(infile,1);
		1807	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1808	js_function[DRAW_FILLTOBORDER] = 1;
		1809	add_js_filltoborder(canvas_type);
		1810	}
		1811	decimals = find_number_of_digits(precision);
		1812	/* we need to set a timeout: the canvas is not yet draw in memory? when floodfill is called directly... */
18557	bpr	1813	tmp_buffer=my_newmem(MAX_BUFFER);
18609	bpr	1814	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	1815	add_to_buffer(tmp_buffer);
		1816	fill_cnt++;
		1817	break;
		1818	default:break;
		1819	}
		1820	}
		1821	reset();
		1822	break;
		1823	case FONTCOLOR:
		1824	/*
18556	bpr	1825	@ fontcolor color
		1826	@ color: hexcolor or colorname
		1827	@ default: black
		1828	@ use command <a href="#fontfamily">fontfamily</a> to deviate from default font type
		1829	@%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	1830	*/
		1831	font_color = get_color(infile,1);
		1832	break;
		1833	case FONTFAMILY:
		1834	/*
18556	bpr	1835	@ fontfamily font_description
		1836	@ set the font family; for browsers that support it
		1837	@ font_description: Arial, Courier, Helvetica etc
		1838	@ 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``
		1839	@%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	1840
18552	bpr	1841	*/
		1842	font_family = get_string(infile,1);
		1843	break;
		1844	case FONTSIZE:
		1845	/*
18556	bpr	1846	@ fontsize font_size
		1847	@ default value 12
		1848	@ 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	1849	*/
		1850	font_size = (int) (get_real(infile,1));
		1851	break;
		1852	case FUNCTION_LABEL:
		1853	/*
18556	bpr	1854	@ functionlabel label_1:label_2:label_3...
		1855	@ alternative: functionlabels
		1856	@ default value ''f(x)=:g(x)=:h(x)=:i(x)=:j(x)=:k(x)=:m(x)=:n(x)=``
		1857	@ no mathml allowed (just ascii string)
		1858	@ use command <a href='#fontsize'>fontsize int</a> to adjust the size
		1859	@ use command <a href='#strokecolor'>strokecolor colorname</a> to adjust the labels (individually, if needed)
		1860	@ if needed, use before every command <a href='#userinput'>userinput function \| inputfield \| textarea</a>
		1861	@ no limit in amount of inputfields for userbased function plotting
		1862	@%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	1863	*/
		1864	temp = get_string_argument(infile,1);
		1865	function_label = list2js_array(temp,":");
		1866	break;
		1867	case GRID:/* xmajor,ymajor,gridcolor [,xminor,yminor,tick length (px), axis/tickscolor]*/
		1868	/*
18556	bpr	1869	@ grid step_x,step_y,gridcolor
		1870	@ 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
		1871	@ 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
		1872	@ 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)
		1873	@ can <b>not</b> be set <a href="#onclick">onclick</a> or <a href="#drag">drag xy</a>
		1874	@ 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' !
		1875	@ 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')
		1876	@ 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')
		1877	@%grid%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%zoom red
		1878	@%grid_axis%size 400,400%xrange -10,10%yrange -10,10%axis%grid 1,1,grey,2,2,6,black%zoom red
		1879	@%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	1880	*/
		1881	if( js_function[DRAW_YLOGSCALE] == 1 ){canvas_error("only one grid type is allowed...");}
		1882	js_function[DRAW_GRID] = 1;
		1883	for(i=0;i<4;i++){
		1884	switch(i){
		1885	case 0:double_data[0] = get_real(infile,0);break;/* xmajor */
		1886	case 1:double_data[1] = get_real(infile,0);break;/* ymajor */
		1887	case 2:
		1888	if( use_axis == TRUE ){
		1889	stroke_color = get_color(infile,0);
		1890	done = FALSE;
		1891	int_data[0] = (int) (get_real(infile,0));/* xminor */
		1892	int_data[1] = (int) (get_real(infile,0));/* yminor */
		1893	int_data[2] = (int) (get_real(infile,0));/* tic_length */
		1894	fill_color = get_color(infile,1); /* used as axis_color*/
		1895	}
		1896	else {
		1897	int_data[0] = 1;
		1898	int_data[1] = 1;
		1899	stroke_color = get_color(infile,1);
		1900	fill_color = stroke_color;
		1901	}
		1902	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 !");}
		1903	/* set snap_x snap_y values in pixels */
		1904	fprintf(js_include_file,"snap_x = %f;snap_y = %f;",double_data[0] / int_data[0],double_data[1] / int_data[1]);
		1905	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	1906	tmp_buffer=my_newmem(MAX_BUFFER);
		1907	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "redraw_grid();\n"));
18552	bpr	1908	add_to_buffer(tmp_buffer);
		1909	break;
		1910	}
		1911	}
		1912	reset();
		1913	break;
		1914	case GRIDFILL:
		1915	/*
		1916	@ gridfill x0,y0,dx,dy,color
		1917	@ x0,y0 in xrange / yrange
		1918	@ distances dx,dy in pixels
		1919	@ there is also a command <a href="#userdraw">userdraw gridfill,color</a>
		1920	@%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	1921
18552	bpr	1922	*/
		1923	js_function[DRAW_GRIDFILL] = 1;
		1924	decimals = find_number_of_digits(precision);
		1925	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		1926	js_function[DRAW_FILLTOBORDER] = 1;
		1927	add_js_filltoborder(canvas_type);
		1928	}
		1929	for(i=0;i<5;i++){
		1930	switch(i){
		1931	case 0: double_data[0] = get_real(infile,0); break; /* x */
		1932	case 1: double_data[1] = get_real(infile,0); break; /* y */
		1933	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		1934	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		1935	case 4: stroke_color = get_color(infile,1);
18557	bpr	1936
		1937	tmp_buffer=my_newmem(MAX_BUFFER);
		1938	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	1939	add_to_buffer(tmp_buffer);
		1940	fill_cnt++;
		1941	reset();
		1942	break;
		1943	default:break;
		1944	}
		1945	}
		1946	break;
		1947	case GROUP:
		1948	/*
18556	bpr	1949	@ group
		1950	@ keyword
		1951	@ work in 'progress'
		1952	@ 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)
		1953	@ may be combined with slider driven movements or drag & drop
		1954	@%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	1955	*/
		1956	use_slider++;
		1957	add_slider(2);
		1958	no_reset = TRUE;
		1959	int c = 0;
		1960	for(i=last_slider;i<=use_slider;i++){ int_data[c] = i; c++; }
		1961	my_sliders = data2js_array(int_data,use_slider - last_slider+1);
		1962	if( precision == 0 ){precision = 100;}
		1963	onclick = 5;
		1964	use_dragstuff = 2;
		1965	drag_type = 0;
		1966	js_function[INTERACTIVE] = 1;
		1967	fprintf(js_include_file,"var slider%d;dragdrop_precision = %d;use_dragdrop_reply = true;",use_slider,precision);
18557	bpr	1968	tmp_buffer=my_newmem(MAX_BUFFER);
		1969	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, "slider%d = new move_group(%d);\n",use_slider,use_slider));
18552	bpr	1970	add_to_buffer(tmp_buffer);
		1971	break;
		1972	case HALFLINE:
		1973	/*
		1974	@ demiline x1,y1,x2,y2,color
		1975	@ alternative: halfline
		1976	@ draws a halfline starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex)
		1977	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		1978	@%halfline%size 400,400%xrange -10,10%yrange -10,10%halfline -5,5,0,0,red%halfline -5,-5,0,0,blue
		1979	*/
		1980	for(i=0; i<13;i++){double_data[i]=0;}
		1981	for(i=0;i<5;i++){
		1982	switch(i){
		1983	case 0: double_data[0]= get_real(infile,0);break; /* x-values */
		1984	case 1: double_data[1]= get_real(infile,0);break; /* y-values */
		1985	case 2: double_data[10]= get_real(infile,0);break; /* x-values */
		1986	case 3: double_data[11]= get_real(infile,0);break; /* y-values */
		1987	case 4: stroke_color=get_color(infile,1);/* name or hex color */
		1988	if(double_data[0] == double_data[10]){ /* vertical halfline */
		1989	if(double_data[1] < double_data[11]){
		1990	double_data[3] = ymax + 1000;
		1991	}
		1992	else {
		1993	double_data[3] = ymin - 1000;
		1994	}
		1995	double_data[2] = double_data[0];
		1996	} else { /* horizontal halfline*/
		1997	if( double_data[1] == double_data[11] ){
		1998	if( double_data[0] < double_data[10] ){
		1999	double_data[2] = xmax + 1000; /* halfline to the right */
		2000	}
		2001	else {
		2002	double_data[2] = xmin - 1000; /* halfline to the left */
		2003	}
		2004	double_data[3] = double_data[1];
		2005	}
		2006	else {
		2007	/* any other halfline */
		2008	/* slope */
		2009	double_data[12] = (double_data[11] - double_data[1])/(double_data[10] - double_data[0]);
		2010	/* const */
		2011	double_data[13] = double_data[1] - double_data[12]*double_data[0];
		2012	if( double_data[0] < double_data[10] ){
		2013	double_data[2] = double_data[2] + 1000;
		2014	}
		2015	else {
		2016	double_data[2] = double_data[2] - 1000;
		2017	}
		2018	double_data[3] = double_data[12]*double_data[2] + double_data[13];
		2019	}
		2020	}
		2021	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2022	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		2023	if(use_affine == TRUE ){ transform(4,2);}
18557	bpr	2024	tmp_buffer=my_newmem(MAX_BUFFER);
		2025	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	2026	add_to_buffer(tmp_buffer);
		2027	if(onclick != 0){object_cnt++;}
		2028	/* object_cnt++; */
		2029	reset();
		2030	break;
		2031	}
		2032	}
		2033	dragstuff[18] = 1;
		2034	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2035	break;
		2036	case HALFLINES:
		2037	/*
		2038	@ demilines color,x1,y1,x2,y2,....
		2039	@ alternative: halflines
		2040	@ draws halflines starting in (x1:y1) and through (x2:y2) in color 'color' (colorname or hex) etc
		2041	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> indiviually
		2042	@%halflines%size 400,400%xrange -10,10%yrange -10,10%halflines red,-5,5,0,0,-5,-5,0,0
		2043	*/
		2044	stroke_color=get_color(infile,0);
		2045	fill_color = stroke_color;
		2046	i=0;
		2047	while( ! done ){ /* get next item until EOL*/
		2048	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		2049	if(i%2 == 0 ){
		2050	double_data[i] = get_real(infile,0); /* x */
		2051	} else {
		2052	double_data[i] = get_real(infile,1); /* y */
		2053	}
		2054	i++;
		2055	}
		2056	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2057	decimals = find_number_of_digits(precision);
		2058	for(c = 0 ; c < i-1 ; c = c+4){
		2059	if( double_data[c] == double_data[c+2] ){ /* vertical line*/
		2060	if(double_data[c+1] < double_data[c+3]){ /* upright halfline */
		2061	double_data[c+3] = ymax + 1000;
		2062	}
		2063	else {
		2064	double_data[c+3] = ymin - 1000;/* descending halfline */
		2065	}
		2066	}
		2067	else {
		2068	if( double_data[c+1] == double_data[c+3] ){ /* horizontal line */
		2069	if(double_data[c] < double_data[c+2] ){ /* halfline to the right */
		2070	double_data[c+2] = xmax+100;
		2071	}
		2072	else {
		2073	double_data[c+2] = xmin-1000; /* halfline to the right */
		2074	}
		2075	}
		2076	else {
		2077	/* m */
		2078	double m = (double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]);
		2079	/* q */
		2080	double q = double_data[c+1] - ((double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]))*double_data[c];
		2081	if(double_data[c] < double_data[c+2]){ /* to the right */
		2082	double_data[c+2] = xmax+1000; /* 1000 is needed for dragging...otherwise it is just segment */
		2083	double_data[c+3] = (m)*(double_data[c+2])+(q);
		2084	}
		2085	else { /* to the left */
		2086	double_data[c+2] = xmin - 1000;
		2087	double_data[c+3] = (m)*(double_data[c+2])+(q);
		2088	}
		2089	}
		2090	}
		2091	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		2092	if(use_affine == TRUE ){ transform(i-1,2);}
18557	bpr	2093	tmp_buffer=my_newmem(MAX_BUFFER);
		2094	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	2095	add_to_buffer(tmp_buffer);
		2096	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		2097	}
		2098	reset();
		2099	dragstuff[18] = 1;
		2100	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2101	break;
		2102	case HATCHFILL:
		2103	/*
		2104	@ hatchfill x0,y0,dx,dy,color
		2105	@ x0,y0 in xrange / yrange
		2106	@ distances dx,dy in pixels
		2107	@ there is also a command <a href="#userdraw">userdraw hatchfill,color</a>
		2108	@%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
		2109	*/
		2110	js_function[DRAW_HATCHFILL] = 1;
		2111	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		2112	js_function[DRAW_FILLTOBORDER] = 1;
		2113	add_js_filltoborder(canvas_type);
		2114	}
		2115	decimals = find_number_of_digits(precision);
		2116	for(i=0;i<5;i++){
		2117	switch(i){
		2118	case 0: double_data[0] = get_real(infile,0); break; /* x */
		2119	case 1: double_data[1] = get_real(infile,0); break; /* y */
		2120	case 2: int_data[0] = (int) (get_real(infile,0)); break; /* dx pixel */
		2121	case 3: int_data[1] = (int) (get_real(infile,0)); break; /* dy pixel*/
		2122	case 4: stroke_color = get_color(infile,1);
		2123	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		2124	if(use_affine == TRUE ){ transform(2,2);}
		2125	/* draw_hatchfill(ctx,x0,y0,dx,dy,linewidth,color,opacity,xsize,ysize) */
18557	bpr	2126	tmp_buffer=my_newmem(MAX_BUFFER);
		2127	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	2128	add_to_buffer(tmp_buffer);
		2129	fill_cnt++;
		2130	reset();
		2131	break;
		2132	default:break;
		2133	}
		2134	}
		2135	break;
		2136	case HLINE:
		2137	/*
		2138	@ hline x,y,color
		2139	@ alternative: horizontalline
		2140	@ draw a horizontal line through point (x:y) in color 'color'
		2141	@ 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)
		2142	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		2143	@%hline%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%hline 0,0,red%dhline 0,5,blue
		2144	*/
		2145	for(i=0;i<3;i++) {
		2146	switch(i){
		2147	case 0: double_data[0] = get_real(infile,0);break; /* x-values */
		2148	case 1: double_data[1] = get_real(infile,0);break; /* y-values */
		2149	case 2: stroke_color = get_color(infile,1);/* name or hex color */
		2150	double_data[3] = double_data[1];
		2151	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		2152	if(use_affine == TRUE ){ transform(2,2);}
		2153	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2154	decimals = find_number_of_digits(precision);
18557	bpr	2155	tmp_buffer=my_newmem(MAX_BUFFER);
		2156	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	2157	add_to_buffer(tmp_buffer);
		2158	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		2159	dragstuff[4] = 1;
		2160	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2161	reset();
		2162	break;
		2163	}
		2164	}
		2165	break;
		2166	case HLINES:
		2167	/*
		2168	@ hlines color,x1,y1,x2,y2,...
		2169	@ alternative: horizontallines
		2170	@ draw horizontal lines through points (x1:y1)...(xn:yn) in color 'color'
		2171	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		2172	@%hlines%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%hlines red,0,0,0,5,0,-5
		2173	*/
		2174	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		2175	fill_color = stroke_color;
		2176	i=0;
		2177	while( ! done ){ /* get next item until EOL*/
		2178	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		2179	if(i%2 == 0 ){
		2180	double_data[i] = get_real(infile,0); /* x */
		2181	}
		2182	else {
		2183	double_data[i] = get_real(infile,1); /* y */
		2184	}
		2185	i++;
		2186	}
		2187	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		2188	if(use_affine == TRUE ){ transform(i-1,2);}
		2189	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	2190
18552	bpr	2191	decimals = find_number_of_digits(precision);
		2192	for(c = 0 ; c < i-1 ; c = c+2){
18557	bpr	2193	tmp_buffer=my_newmem(MAX_BUFFER);
18607	bpr	2194	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	2195	add_to_buffer(tmp_buffer);
		2196	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		2197	}
		2198	reset();
		2199	dragstuff[4] = 1;
		2200	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2201	break;
		2202	case HTTP:
		2203	/*
18556	bpr	2204	@ http x1,y1,x2,y2,http://some_adress.com
		2205	@ an active html-page will be displayed in an "iframe" rectangle left top (x1:y1), right bottom (x2:y2)
		2206	@ do not use interactivity (or mouse) if the mouse needs to be active in the iframe
		2207	@ can <b>not</b> be ''set onclick`` or ''drag xy``
		2208	@%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	2209	*/
		2210	js_function[DRAW_HTTP] = 1;
		2211	for(i=0;i<5;i++){
		2212	switch(i){
		2213	case 0: int_data[0]=x2px(get_real(infile,0));break; /* x in x/y-range coord system -> pixel width */
		2214	case 1: int_data[1]=y2px(get_real(infile,0));break; /* y in x/y-range coord system -> pixel height */
		2215	case 2: int_data[2]=x2px(get_real(infile,0)) - int_data[0];break; /* width in x/y-range coord system -> pixel width */
		2216	case 3: int_data[3]=y2px(get_real(infile,0)) - int_data[1];break; /* height in x/y-range coord system -> pixel height */
		2217	case 4: decimals = find_number_of_digits(precision);
		2218	temp = get_string(infile,1);
		2219	if(strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'");}
18557	bpr	2220	tmp_buffer = my_newmem(string_length+2);
		2221	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	2222	add_to_buffer(tmp_buffer);
		2223	break;
		2224	}
		2225	}
		2226	reset();
		2227	break;
		2228	case HTML:
		2229	/*
18556	bpr	2230	@ html x1,y1,html_string
		2231	@ all tags are allowed, html code using inputfields could be read using your own javascript code. Do not use ids like 'canvas_input0' etc.
		2232	@ can be set <a href='#onclick'>onclick</a> and <a href='#drag'>drag&drop</a>
		2233	@ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
		2234	@ command <a href='#rotate'>rotate</a> will rotate the object
		2235	@ use keyword <a href='#centered'>centered</a> to center the html object on (x1:y1)
		2236	@ 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)``
		2237	@ note: sub & sup are supported in command family <a href='#string'>string</a>, e.g. real internal canvas objects !
		2238	@%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
		2239	@%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	2240	*/
		2241	js_function[DRAW_XML] = 1;
		2242	for(i=0;i<5;i++){
		2243	switch(i){
		2244	case 0: double_data[0] = get_real(infile,0);break;
		2245	case 1: double_data[1] = get_real(infile,0);break;
		2246	case 4: decimals = find_number_of_digits(precision);
		2247	if(use_affine == TRUE ){ transform(2,2);}/* needs double_data[] */
		2248	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		2249	int_data[0] = x2px(double_data[0]);/* needs px */
		2250	int_data[1] = y2px(double_data[1]);
		2251	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2252	if( use_slider != -1 && drag_type != -1){ onclick = 5; }
		2253	temp = get_string(infile,1);
		2254	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","\\\""); }
		2255	if( strstr(temp,"<img ")!= 0){URL="image";}else{URL="html";}
18557	bpr	2256	tmp_buffer=my_newmem(MAX_BUFFER);
		2257	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	2258	add_to_buffer(tmp_buffer);
		2259	if(onclick != 0 ){object_cnt++;}
		2260	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		2261	break;
		2262	default:break;
		2263	}
		2264	}
		2265	reset();
		2266	break;
		2267	case IMAGEFILL:
		2268	/*
		2269	@ imagefill x,y,scaling to xsize × ysize?,image_url
		2270	@ The next suitable <b>filled object</b> will be filled with "image_url" tiled
		2271	@ scaling to xsize × ysize ? ... 1 = yes 0 = no
		2272	@ After pattern filling, the fill-color should be reset !
		2273	@ wims getins / image from class directory: imagefill 80,80,my_image.gif
		2274	@ normal url: imagefill 80,80,0,$module_dir/gifs/my_image.gif
		2275	@ normal url: imagefill 80,80,1,http://adres/a/b/c/my_image.jpg
		2276	@ if dx,dy is larger than the image, the whole image will be background to the next object.
		2277	@%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
		2278	@%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
		2279	*/
		2280	js_function[DRAW_IMAGEFILL] = 1;
		2281	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		2282	js_function[DRAW_FILLTOBORDER] = 1;
		2283	add_js_filltoborder(canvas_type);
		2284	}
		2285	for(i=0 ;i < 4 ; i++){
		2286	switch(i){
		2287	case 0:int_data[0] = (int) (get_real(infile,0));break;
		2288	case 1:int_data[1] = (int) (get_real(infile,0));break;
		2289	case 2:int_data[2] = (int) (get_real(infile,0));break; /* 0 \| 1 */
		2290	case 3: URL = get_string_argument(infile,1);
18557	bpr	2291	tmp_buffer=my_newmem(MAX_BUFFER);
		2292	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	2293	add_to_buffer(tmp_buffer);
		2294	fill_cnt++;
		2295	break;
		2296	}
		2297	}
		2298	reset();
		2299	break;
		2300	case IMAGEPALETTE:
		2301	/*
18556	bpr	2302	@ imagepalette image1,image2,image3,...
		2303	@ 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``.
		2304	@%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	2305	*/
		2306	temp = get_string(infile,1);
		2307	temp = str_replace(temp,",","\",\"");
		2308	if( use_tooltip == 1 ){canvas_error("command 'imagepalette' is incompatible with command 'intooltip tip_text',as they use the same div-element ");}
		2309	fprintf(js_include_file,"\nvar current_id;var imagepalette = [\" %s \"];\n",temp);
		2310	break;
		2311	case INPUT:
		2312	/*
18556	bpr	2313	@ input x,y,size,editable,value
		2314	@ to set inputfield "readonly", use editable = 0
		2315	@ if no preset 'value' is needed...use a 'space' as last item argument
		2316	@ only active inputfields (editable = 1) will be read with read_canvas();
		2317	@ 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>
		2318	@ may be further controlled by <a href="#css">css</a>
		2319	@ if mathml inputfields are present and / or some userdraw is performed, these data will <b>not</b> be send as well (javascript:read_canvas();)
		2320	@ 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)
		2321	@ 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>
		2322	@%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	2323	*/
		2324	js_function[DRAW_INPUTS] = 1;
		2325	for(i = 0 ; i<5;i++){
		2326	switch(i){
		2327	case 0: int_data[0]=x2px(get_real(infile,0));break;/* x in px */
		2328	case 1: int_data[1]=y2px(get_real(infile,0));break;/* y in px */
		2329	case 2: int_data[2]=abs( (int)(get_real(infile,0)));break; /* size */
		2330	case 3: if( get_real(infile,1) >0){int_data[3] = 1;}else{int_data[3] = 0;};break; /* readonly */
		2331	case 4: temp = get_string(infile,3);
18557	bpr	2332	tmp_buffer=my_newmem(MAX_BUFFER);
		2333	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	2334	add_to_buffer(tmp_buffer);
		2335	input_cnt++;break;
		2336	default: break;
		2337	}
		2338	}
		2339	if(reply_format == 0 ){reply_format = 15;}
		2340	reset();
		2341	break;
		2342	case INTOOLTIP:
18556	bpr	2343	/*
		2344	@ intooltip link_text
		2345	@ link_text is a single line (span-element)
		2346	@ link_text may also be an image URL ''http://some_server/images/my_image.png`` or ''$module_dir/gifs/my_image.jpg``
		2347	@ link_text may contain HTML markup
		2348	@ the canvas will be displayed in a tooltip on ''link_text``
		2349	@ 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'.
		2350	@ 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...
		2351	@%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>
		2352	*/
18552	bpr	2353	if(use_input_xy != FALSE ){canvas_error("intooltip can not be combined with userinput_xy or other commands using the tooltip-div...see documentation");}
		2354	if( use_tooltip == 1 ){ canvas_error("command 'intooltip' cannot be combined with command 'popup'...");}
		2355	tooltip_text = get_string(infile,1);
		2356	if(strstr(tooltip_text,"\"") != 0 ){ tooltip_text = str_replace(tooltip_text,"\"","'"); }
		2357	use_tooltip = 1;
		2358	break;
		2359	case JSCURVE:
		2360	/*
18556	bpr	2361	@ jscurve color,formula1(x),formula2(x),formula3(x),...
		2362	@ alternative: jsplot
		2363	@ your function will be plotted by the javascript engine of the client browser
		2364	@ 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
		2365	@ use only basic math in your curve: <code>sqrt,^,asin,acos,atan,log,pi,abs,sin,cos,tan,e</code>
		2366	@ use parenthesis and rawmath: use 2*x instead of 2x ; use 2^(sin(x))...etc etc (use error console to debug any errors...)
		2367	@ <b>attention</b>: last ''precision`` command in the canvasdraw script determines the calculation precision of the javascript curve plot !
		2368	@ no validity check is done by wims.
		2369	@ 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
		2370	@ 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
		2371	@ zooming & panning in case of userbased functionplot: reclick the OK button to re-plot curve onto the resized grid
		2372	@ use keyword <a href='animate'>animate</a> for animating a point on the curve
		2373	@ use command ''trace_jscurve formula(x)`` for tracing
		2374	@ use command ''jsmath formula(x)`` for calculating and displaying indiviual points on the curve
		2375	@ can <b>not</b> be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> (yet)
		2376	@ commands plotjump / plotstep are not active for ''jscurve``
		2377	@ every command jscurve will produce a new canvas (canvastype 111,112,113...) for this one curve.
18572	bpr	2378	@ 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	2379	@%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	2380	*/
		2381	jsplot_cnt++;/* -1 --> 0 */
		2382	stroke_color = get_color(infile,0);
		2383	js_function[JS_MATH] = 1;
		2384	js_function[JS_PLOT] = 1;
		2385	if( tmin != 0 && tmax !=0){use_parametric = TRUE;}
		2386	temp = get_string(infile,1);
		2387	temp = str_replace(temp,",","\",\"");
18557	bpr	2388	tmp_buffer=my_newmem(MAX_BUFFER);
		2389	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	2390	add_to_buffer(tmp_buffer);
		2391	fprintf(js_include_file,"if(typeof(all_jsplots) !== 'number'){var all_jsplots;};all_jsplots = %d;",jsplot_cnt);
11806	schaersvoo	2392
18552	bpr	2393	/* we need to create multiple canvasses, so we may zoom and pan ?? */
		2394	break;
		2395	case JSMATH:
		2396	/*
18556	bpr	2397	@ jsmath some_math_function
		2398	@ will calculate an y-value from a userinput x-value and draws a crosshair on these coordinates.
		2399	@ 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
		2400	@ use command 'css some_css' for styling the display fields. Use command 'fontsize int' to size the labels ''x`` and ''y``
		2401	@ 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...
		2402	@ be aware that the formula's of the plotted function(s) can be found in the page javascript source
		2403	@%jsmath%size 400,400%xrange -10,10%yrange -10,10%jsplot blue,sin(x^2)%jsmath sin(x^2)
18552	bpr	2404	*/
		2405	js_function[DRAW_CROSSHAIRS] = 1;
		2406	js_function[JS_MATH] = 1;
		2407	add_calc_y(get_string(infile,1),font_size,css_class);
		2408	break;
		2409	case KILL:
		2410	/*
		2411	@ kill arguments
		2412	@ arguments may be: affine linear translation rotation slider offset reset
		2413	@ for documentation see: killaffine,killlinear,killtranslation...
		2414	@ multiple arguments are allowed (although not checked for validity...)
		2415	*/
		2416	temp = get_string(infile,1);
		2417	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;}
		2418	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;}
		2419	if(strstr(temp,"translation") != 0 \|\| strstr(temp,"translate") != 0 ){affine_matrix[4] = 0.0;affine_matrix[5] = 0.0;}
		2420	if(strstr(temp,"rotation") != 0 \|\| strstr(temp,"rotate") != 0 ){use_rotate = FALSE;angle = 0.0;rotation_center="null";}
		2421	if(strstr(temp,"slider") != 0 ){slider_type = "0";my_sliders = "[-1]";last_slider = use_slider+1;}
		2422	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();}
		2423	if(strstr(temp,"reset") != 0 ){if(no_reset == FALSE){no_reset = TRUE;}else{no_reset = FALSE;reset();}}
		2424	if(strstr(temp,"offset") != 0 ){use_offset = 0;}
		2425	break;
		2426	case KILLAFFINE:
		2427	/*
		2428	@ killaffine
		2429	@ keyword: resets the transformation matrix to 1,0,0,1,0,0
		2430	@ note: any active linear transformation will also be reset: tx=0, ty=0
		2431	*/
		2432	use_affine = FALSE;
		2433	affine_matrix[0] = 1.0;
		2434	affine_matrix[1] = 0.0;
		2435	affine_matrix[2] = 0.0;
		2436	affine_matrix[3] = 1.0;
		2437	affine_matrix[4] = 0.0;
		2438	affine_matrix[5] = 0.0;
		2439	break;
		2440	case KILLLINEAR:
		2441	/*
		2442	@ killlinear
		2443	@ keyword: resets the transformation matrix to 1,0,0,1,tx,ty
		2444	@ note:any active transformation or rotation will not be killed (tx,ty remain active)
		2445	*/
		2446	affine_matrix[0] = 1.0;
		2447	affine_matrix[1] = 0.0;
		2448	affine_matrix[2] = 0.0;
		2449	affine_matrix[3] = 1.0;
		2450	break;
		2451	case KILLROTATE:
		2452	/*
18556	bpr	2453	@ killrotate
		2454	@ will set the rotation angle to 0.
18572	bpr	2455	@ 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	2456	@ if not set, the rotation center will remain unchanged
		2457	@ note:any active transformation or linear will not be killed (e.g an active transformation matrix remains active)
		2458	@%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	2459	*/
		2460	use_rotate = FALSE;
		2461	angle = 0.0;
		2462	rotation_center="null";
		2463	break;
		2464	case KILLSLIDER:
		2465	/*
18556	bpr	2466	@ killslider
		2467	@ keyword (no arguments required)
		2468	@ ends grouping of object under a previously defined slider
18552	bpr	2469	*/
		2470	slider_type = "0";
		2471	my_sliders = "[-1]";
		2472	last_slider = use_slider+1;
		2473	break;
		2474	case KILLTRANSLATION:
		2475	/*
18556	bpr	2476	@ killtranslation
		2477	@ alternative: killtranslate
		2478	@ note: a active linear or affine transformation will not be 100% reset...only tx=0,ty=0
		2479	@ resets the translation matrix a,b,c,d,tx,ty to a,b,c,d,0,0
18552	bpr	2480	*/
		2481	affine_matrix[4] = 0.0;
		2482	affine_matrix[5] = 0.0;
		2483	break;
		2484	case LATEX:
		2485	/*
18556	bpr	2486	@ latex x,y,tex string
		2487	@ alternative: math
18572	bpr	2488	@ 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	2489	@ 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)
		2490	@ 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)
		2491	@ 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
		2492	@ 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...
		2493	@ can be moved/rotated with command <a href='#slider'>slider</a>
		2494	@ snaptogrid is supported
18627	bpr	2495	@ 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	2496	@ userdraw may be combined with 'latex' ; the js-function 'read_canvas()' will contain the coordinates of the drawing.
		2497	@ userdraw may be combined; the read_canvas() will contain the drawing.
		2498	@ 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
		2499	@ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
		2500	@ 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();"
		2501	@ 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....
		2502	@ 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]
		2503	@ 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>)
		2504	@ 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)``
		2505	@%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}
		2506	@%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	2507	*/
		2508	js_function[DRAW_XML] = 1;
		2509	for(i=0;i<3;i++){
		2510	switch(i){
		2511	case 0: double_data[0]=get_real(infile,0);break; /* x in x/y-range coord system -> pixel width */
		2512	case 1: double_data[1]=get_real(infile,0);break; /* y in x/y-range coord system -> pixel height */
		2513	case 2: decimals = find_number_of_digits(precision);
		2514	temp = get_string(infile,1);
		2515	if(use_affine == TRUE ){ transform(2,2);}/* slider will use css-rotate transformation */
		2516	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		2517	int_data[0] = x2px(double_data[0]);
		2518	int_data[1] = y2px(double_data[1]);
		2519	if( use_slider != -1 && onclick == 0 ){ onclick = 5;}
		2520	if( use_slider != -1 && drag_type != -1){ onclick = 5; }
15757	schaersvoo	2521	#ifdef KATEX_INSTALLED
18552	bpr	2522	if( strstr(temp,"\\") != 0 ){ temp = str_replace(temp,"\\","\\\\"); }
		2523	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	2524	tmp_buffer=my_newmem(MAX_BUFFER);
		2525	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	2526	#else
18552	bpr	2527	temp = getMML(temp);/* generate MathML for Firefox or MathJaX */
		2528	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	2529	tmp_buffer=my_newmem(MAX_BUFFER);
		2530	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	2531	#endif
18552	bpr	2532	add_to_buffer(tmp_buffer);
		2533	if(onclick != 0 ){object_cnt++;}
		2534	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		2535	break;
		2536	default:break;
		2537	}
		2538	}
		2539	reset();
		2540	break;
		2541	case LATTICE:
		2542	/*
18556	bpr	2543	@ lattice x0,y0,xv1,yv1,xv2,yv2,n1,n2,color
		2544	@ can <b>not</b> be set ''onclick`` or ''drag xy``
		2545	@%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	2546	*/
		2547	js_function[DRAW_LATTICE] = 1;
		2548	for( i = 0; i<9; i++){
		2549	switch(i){
		2550	case 0: int_data[0] = x2px(get_real(infile,0));break; /* x0-values -> x-pixels*/
		2551	case 1: int_data[1] = y2px(get_real(infile,0));break; /* y0-values -> y-pixels*/
		2552	case 2: int_data[2] = (int) (get_real(infile,0));break; /* x1-values -> x-pixels*/
		2553	case 3: int_data[3] = (int) -1(get_real(infile,0));break; / y1-values -> y-pixels*/
		2554	case 4: int_data[4] = (int) (get_real(infile,0));break; /* x2-values -> x-pixels*/
		2555	case 5: int_data[5] = (int) -1(get_real(infile,0));break; / y2-values -> y-pixels*/
		2556	case 6: int_data[6] = (int) (get_real(infile,0));break; /* n1-values */
		2557	case 7: int_data[7] = (int) (get_real(infile,0));break; /* n2-values */
		2558	case 8: stroke_color=get_color(infile,1);
		2559	decimals = find_number_of_digits(precision);
18557	bpr	2560	tmp_buffer=my_newmem(MAX_BUFFER);
		2561	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	2562	add_to_buffer(tmp_buffer);break;
		2563	default:break;
		2564	}
		2565	}
		2566	reset();
		2567	break;
		2568	case LINEAR:
		2569	/*
18556	bpr	2570	@ linear a,b,c,d
		2571	@ defines a transformation matrix for subsequent objects
		2572	@ use keyword <a href='#killlinear'>killlinear</a> to end the transformation...the next objects will be drawn in the original x/y-range
		2573	@ a: Scales the drawings horizontally
		2574	@ b: Skews the drawings horizontally
		2575	@ c: Skews the drawings vertically
		2576	@ d: Scales the drawings vertically
		2577	@ the data precision may be set by preceding command ''precision int``
		2578	@ note: any active translation (tx,ty) is not changed
		2579	@%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	2580	*/
		2581	for(i = 0 ; i<4;i++){
		2582	switch(i){
		2583	case 0: affine_matrix[0] = get_real(infile,0);break;
		2584	case 1: affine_matrix[1] = get_real(infile,0);break;
		2585	case 2: affine_matrix[2] = get_real(infile,0);break;
		2586	case 3: affine_matrix[3] = get_real(infile,1);
		2587	affine_matrix[4] = 0;affine_matrix[5] = 0;
		2588	use_affine = TRUE;
		2589	break;
		2590	default: break;
		2591	}
		2592	}
		2593	reset();
		2594	break;
		2595	case LINE:
		2596	/*
		2597	@ line x1,y1,x2,y2,color
		2598	@ draw a line through points (x1:y1)--(x2:y2) in color ''color``
		2599	@ or use command ''curve color,formula`` to draw the line (uses more points to draw the line; is however better draggable)
		2600	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		2601	@%line%size 400,400%xrange -10,10%yrange -10,10%line 0,1,2,-1,green
		2602	*/
		2603	for(i=0;i<5;i++){
		2604	switch(i){
		2605	case 0: double_data[10]= get_real(infile,0);break; /* x-values */
		2606	case 1: double_data[11]= get_real(infile,0);break; /* y-values */
		2607	case 2: double_data[12]= get_real(infile,0);break; /* x-values */
		2608	case 3: double_data[13]= get_real(infile,0);break; /* y-values */
		2609	case 4: stroke_color=get_color(infile,1);/* name or hex color */
		2610	if( double_data[10] == double_data[12] ){ /* vertical line*/
		2611	double_data[1] = xmin;
		2612	double_data[3] = ymax;
		2613	double_data[0] = double_data[10];
		2614	double_data[2] = double_data[10];
		2615	}
		2616	else{
		2617	if( double_data[11] == double_data[13] ){ /* horizontal line */
		2618	double_data[1] = double_data[11];
		2619	double_data[3] = double_data[11];
		2620	double_data[0] = ymin;
		2621	double_data[2] = xmax;
		2622	}
		2623	else {
		2624	/* m */
		2625	double_data[5] = (double_data[13] - double_data[11]) /(double_data[12] - double_data[10]);
		2626	/* q */
		2627	double_data[6] = double_data[11] - ((double_data[13] - double_data[11]) /(double_data[12] - double_data[10]))*double_data[10];
		2628	/xmin,mxmin+q,xmax,mxmax+q/
		2629	double_data[1] = (double_data[5])*(xmin)+(double_data[6]);
		2630	double_data[3] = (double_data[5])*(xmax)+(double_data[6]);
		2631	double_data[0] = xmin;
		2632	double_data[2] = xmax;
		2633	}
		2634	}
		2635	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		2636	if(use_affine == TRUE ){ transform(4,2);}
		2637	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2638	decimals = find_number_of_digits(precision);
18557	bpr	2639	tmp_buffer=my_newmem(MAX_BUFFER);
		2640	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	2641	add_to_buffer(tmp_buffer);
		2642	if(onclick != 0){object_cnt++;}
		2643	/* object_cnt++;*/
		2644	reset();
		2645	break;
		2646	}
		2647	}
		2648	dragstuff[4] = 1;
		2649	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2650	break;
		2651	case LINES:
		2652	/*
		2653	@ lines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n
		2654	@ draw multiple lines through points (x1:y1)--(x2:y2) ...(x_n-1:y_n-1)--(x_n:y_n) in color 'color'
		2655	@ 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)
		2656	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		2657	@%lines%size 400,400%xrange -10,10%yrange -10,10%lines green,0,1,1,3,0,0,1,3,0,0,-2,1
		2658	*/
		2659	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		2660	fill_color = stroke_color;
		2661	i=0;
		2662	while( ! done ){ /* get next item until EOL*/
		2663	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		2664	if(i%2 == 0 ){
		2665	double_data[i] = get_real(infile,0); /* x */
		2666	}
		2667	else {
		2668	double_data[i] = get_real(infile,1); /* y */
		2669	}
		2670	i++;
		2671	}
		2672	decimals = find_number_of_digits(precision);
		2673	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2674	for(c = 0 ; c < i-1 ; c = c+4){
		2675	if(double_data[c] == double_data[c+2] ){ /* vertical line*/
		2676	double_data[c+1] = xmin;
		2677	double_data[c+3] = ymax;
		2678	double_data[c+2] = double_data[c];
		2679	}
		2680	else {
		2681	if( double_data[c+1] == double_data[c+3] ){ /* horizontal line */
		2682	double_data[c+3] = double_data[c+1];
		2683	double_data[c] = ymin;
		2684	double_data[c+2] = xmax;
		2685	}
		2686	else {
		2687	/* m */
		2688	double m = (double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]);
		2689	/* q */
		2690	double q = double_data[c+1] - ((double_data[c+3] - double_data[c+1]) /(double_data[c+2] - double_data[c]))*double_data[c];
		2691	/xmin,mxmin+q,xmax,mxmax+q/
		2692	double_data[c+1] = (m)*(xmin)+(q);
		2693	double_data[c+3] = (m)*(xmax)+(q);
		2694	double_data[c] = xmin;
		2695	double_data[c+2] = xmax;
		2696	}
		2697	}
		2698	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		2699	if(use_affine == TRUE ){ transform(i-1,2);}
18557	bpr	2700	tmp_buffer=my_newmem(MAX_BUFFER);
		2701	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	2702	add_to_buffer(tmp_buffer);
		2703	if(onclick != 0){object_cnt++;}
		2704	/* object_cnt++; */
		2705	}
		2706	dragstuff[4] = 1;
		2707	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2708	reset();
		2709	break;
		2710	case LINEWIDTH:
		2711	/*
		2712	@ linewidth int
		2713	@ default 1
		2714	@%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
		2715	*/
		2716	line_width = (int) (get_real(infile,1));
		2717	break;
		2718	case LEVELCURVE:
		2719	/*
		2720	@ levelcurve color,expression in x/y,l1,l2,...
		2721	@ draws very primitive level curves for expression, with levels l1,l2,l3,...,l_n
		2722	@ the quality is <b>not to be compared</b> with the Flydraw levelcurve. <br>(choose flydraw if you want quality...)
		2723	@ 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
		2724	@ note: the arrays for holding the javascript data are limited in size
		2725	@ note: reduce image size if javascript data arrays get overloaded<br>(command 'plotsteps int' will not control the data size of the plot...)
		2726	@%levelcurve%size 400,400%xrange -10,10%yrange -10,10%levelcurve red,x*y,1,2,3,4
		2727	*/
		2728	fill_color = get_color(infile,0);
		2729	char *fun1 = get_string_argument(infile,0);
		2730	if( strlen(fun1) == 0 ){canvas_error("function is NOT OK !");}
		2731	i = 0;
		2732	done = FALSE;
		2733	while( !done ){
		2734	double_data[i] = get_real(infile,1);
		2735	i++;
		2736	}
		2737	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2738	for(c = 0 ; c < i; c++){
18557	bpr	2739	tmp_buffer=my_newmem(MAX_BUFFER);
		2740	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	2741	add_to_buffer(tmp_buffer);
		2742	if(onclick != 0){object_cnt++;}
		2743	/* object_cnt++; */
		2744	}
		2745	dragstuff[16] = 1;
		2746	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		2747	reset();
		2748	break;
		2749	case LEGEND:
		2750	/*
		2751	@ legend string1:string2:string3....string_n
		2752	@ will be used to create a legend for a graph
		2753	@ also see command <a href='#piechart'>piechart</a>
		2754	@ will use the same colors per default as used in the graphs; use command <a href='#legendcolors'>legendcolors</a> to override the default
		2755	@ use command <a href="#fontsize">fontsize</a> to adjust. (command ''fontfamily`` is not active for command ''legend``)
		2756	@%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
		2757	*/
		2758	temp = get_string(infile,1);
		2759	if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
		2760	legend_cnt++; /* attention: starts with -1: it will be used in piechart etc */
		2761	fprintf(js_include_file,"var legend%d = [\"%s\"];",legend_cnt,temp);
		2762	break;
		2763	case LEGENDCOLORS:
		2764	/*
		2765	@ legendcolors color1:color2:color3:...:color_n
		2766	@ 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>.
		2767	@ make sure the number of colors match the number of legend items
18627	bpr	2768	@ command ''legend`` in case of ''piechart`` and ''barchart`` will use these colors per default (no need to specify ''legendcolors``)
18552	bpr	2769	@%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
		2770	*/
		2771	if(legend_cnt == -1){canvas_error("use command \"legend\" before command \"legendcolors\" ! ");}
		2772	temp = get_string(infile,1);
		2773	if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
		2774	fprintf(js_include_file,"var legendcolors%d = [\"%s\"];",legend_cnt,temp);
		2775	break;
		2776	case LINEGRAPH: /* scheme: var linegraph_0 = [ 'stroke_color','line_width','use_dashed', 'dashtype0','dashtype1','x1','y1',...,'x_n','y_n'];*/
		2777	/*
		2778	@ linegraph x1:y1:x2:y2...x_n:y_n
		2779	@ will plot your data in a graph
		2780	@ may <b>only</b> to be used together with command <a href='#grid'>grid</a>
		2781	@ 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>
		2782	@ use command <a href='#legend'>legend</a> to provide an optional legend in right-top-corner
		2783	@ also see command <a href='#piechart'>piechart</a>
		2784	@ multiple linegraphs may be used in a single plot
		2785	@ note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...
		2786	@ <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>
		2787	@%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
		2788	*/
		2789	temp = get_string(infile,1);
		2790	if( strstr( temp,":") != 0 ){ temp = str_replace(temp,":","\",\""); }
		2791	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);
		2792	linegraph_cnt++;
		2793	reset();
		2794	break;
		2795	case MATHML:
		2796	/*
		2797	@ mathml x1,y1,mathml_string
		2798	@ this command is special for GECKO browsers, and it makes use of Native Mathml
		2799	@ For general use with all browsers, use command <a href='#latex'>latex</a>
		2800	@ 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>
		2801	@ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
		2802	@ command <a href='#rotate'>rotate</a> will rotate the object
		2803	@ the mathml object is centered at (x1:y1)
		2804	@ the ''mathml_string`` can be produced using WIMS commands like ''texmath`` followed by ''mathmlmath``... or write correct TeX and use only ''mathmlmath``
		2805	@ mathml will be displayed in a rectangle left top (x1:y1)
		2806	@ 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
		2807	@ 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...
		2808	@ 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.
		2809	@ 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.
		2810	@ userdraw may be combined with 'mathml' ; the read_canvas() will contain the drawing.
		2811	@ draggable or onclick 'external images' from command <a href='#copyresized'>copy or copyresized</a> can be combined with drag and/or onclick mathml
		2812	@ other drag objects (circles/rects etc) are supported, but read_dragdrop() will probably be difficult to interpret...
		2813	@ 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();"
		2814	@ 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....
		2815	@ use keyword <a href='#centered'>centered</a> to center the mathml/xml object on (x1:y1)
18654	schaersvoo	2816	@%mathml_onclick%size 400,400%xrange -10,10%yrange -10,10%opacity 255,70%onclick%strokecolor red%fillcolor green%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>
18552	bpr	2817	@%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...
		2818	*/
		2819	js_function[DRAW_XML] = 1;
		2820	for(i=0;i<3;i++){
		2821	switch(i){
		2822	case 0: double_data[0]=get_real(infile,0);break; /* x in x/y-range coord system -> pixel width */
		2823	case 1: double_data[1]=get_real(infile,0);break; /* y in x/y-range coord system -> pixel height */
		2824	case 2: decimals = find_number_of_digits(precision);
		2825	if(use_affine == TRUE ){ transform(2,2);}/* needs double_data[] */
		2826	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		2827	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		2828	int_data[0] = x2px(double_data[0]);/* needs px */
		2829	int_data[1] = y2px(double_data[1]);
		2830	if( use_slider != -1 && onclick == 0 ){ onclick = 3;}/* no drag&onclick but slideable */
		2831	if( use_slider != -1 && drag_type != -1){ onclick = 5; }
		2832	temp = get_string(infile,1);
		2833	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	2834	tmp_buffer=my_newmem(MAX_BUFFER);
		2835	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	2836	add_to_buffer(tmp_buffer);
		2837	if(onclick != 0 ){object_cnt++;}
		2838	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		2839	/*
		2840	in case inputs are present, trigger adding the read_mathml()
		2841	if no other reply_format is defined
		2842	note: all other reply types will include a reading of elements with id='mathml'+p)
		2843	*/
		2844	if(strstr(temp,"mathml0") != NULL){ if(reply_format == 0 ){reply_format = 16;}} /* no other reply type is defined */
		2845	break;
		2846	default:break;
		2847	}
		2848	}
		2849	reset();
		2850	break;
		2851	case MOUSE:
		2852	/*
18556	bpr	2853	@ mouse color,fontsize
		2854	@ will display the cursor (x:y) coordinates in ''color`` and ''fontsize`` using default fontfamily Arial
		2855	@ note: use command ''mouse`` at the end of your script code (the same is true for command ''zoom``)
		2856	@%mouse%size 400,400%xrange -10,10%yrange -10,10%mouse red,22
18552	bpr	2857	*/
		2858	stroke_color = get_color(infile,0);
		2859	font_size = (int) (get_real(infile,1));
		2860	tmp_buffer = my_newmem(26);
		2861	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2862	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,2);
		2863	js_function[INTERACTIVE] = 1;
		2864	break;
		2865	case MOUSE_DEGREE:
		2866	/*
18556	bpr	2867	@ mouse_degree color,fontsize
		2868	@ 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
		2869	@ The angle is positive in QI and QIII and the angle value is negative in QII and QIV
		2870	@ note: use command 'mouse' at the end of your script code (the same is true for command 'zoom')
		2871	@%mouse_degree%size 400,400%xrange -10,10%yrange -10,10%userdraw arc,blue%precision 100000%mouse_degree red,22
18552	bpr	2872	*/
		2873	stroke_color = get_color(infile,0);
		2874	font_size = (int) (get_real(infile,1));
		2875	tmp_buffer = my_newmem(26);
		2876	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2877	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,3);
		2878	js_function[JS_FIND_ANGLE] = 1;
		2879	js_function[INTERACTIVE] = 1;
		2880	break;
		2881	case MOUSE_DISPLAY:
		2882	/*
18556	bpr	2883	@ display TYPE,color,fontsize
		2884	@ TYPE may be x \| y \| xy \| degree \| radian \| radius
		2885	@ 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).
		2886	@ use commands ''xunit`` and / or ''yunit`` to add the units to the mouse values. The ''degree \| radian`` will always have the appropriate symbol).
		2887	@ just like commands ''mouse``, ''mousex``, ''mousey``, ''mouse_degree``... only other name
		2888	@%display_x%size 400,400%xrange -10,10%yrange -10,10%xunit \\u212B%display x,red,22
		2889	@%display_y%size 400,400%xrange -10,10%yrange -10,10%yunit seconds%display y,red,22
		2890	@%display_xy%size 400,400%xrange -10,10%yrange -10,10%xunit centimetre%yunit seconds%display xy,red,22%userdraw segments,blue
		2891	@%display_deg%size 400,400%xrange -10,10%yrange -10,10%display degree,red,22%fillcolor orange%opacity 200,50%userdraw arc,blue
		2892	@%display_rad%size 400,400%xrange -10,10%yrange -10,10%display radian,red,22%fillcolor orange%opacity 200,50%userdraw arc,blue
		2893	@%display_radius%size 400,400%xrange -10,10%yrange -10,10%xunit cm%xunit \\u212b%display radius,red,22%userdraw circle,blue
18552	bpr	2894	*/
		2895	temp = get_string_argument(infile,0);
		2896	if( strstr(temp,"xy") != NULL ){
		2897	int_data[0] = 2;
		2898	} else {
		2899	if( strstr(temp,"y") != NULL ){
		2900	int_data[0] = 1;
		2901	}else{
		2902	if( strstr(temp,"x") != NULL ){
		2903	int_data[0] = 0;
		2904	}else{
		2905	if(strstr(temp,"degree") != NULL){
		2906	int_data[0] = 3;
		2907	js_function[JS_FIND_ANGLE] = 1;
		2908	}else{
		2909	if(strstr(temp,"radian") != NULL){
		2910	int_data[0] = 4;
		2911	js_function[JS_FIND_ANGLE] = 1;
		2912	}else{
		2913	if(strstr(temp,"radius") != NULL){
		2914	int_data[0] = 5;
		2915	}else{
		2916	int_data[0] = 2;
		2917	}
		2918	}
		2919	}
		2920	}
		2921	}
		2922	}
		2923	stroke_color = get_color(infile,0);
		2924	font_size = (int) (get_real(infile,1));
		2925	tmp_buffer = my_newmem(26);
		2926	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2927	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,int_data[0]);
		2928	js_function[INTERACTIVE] = 1;
		2929	break;
		2930	case MOUSE_PRECISION:
		2931	/*
18556	bpr	2932	@ precision int
		2933	@ 1 = no decimals ; 10 = 1 decimal ; 100 = 2 decimals etc
		2934	@ may be used / changed before every object
		2935	@ In case of user interaction (like ''userdraw`` or ''multidraw``), this value will be used to determine the amount of decimals in the reply / answer
		2936	@%precision%size 400,400%xrange -10,10%yrange -10,10%precision 1%userdraw segment,red
18552	bpr	2937	*/
		2938	precision = (int) (get_real(infile,1));
		2939	if(precision < 1 ){precision = 1;};
		2940	break;
		2941	case MOUSEX:
		2942	/*
18556	bpr	2943	@ mousex color,fontsize
		2944	@ will display the cursor x-coordinate in ''color`` and ''font size`` using the fontfamily Arial.
		2945	@ note: use command ''mouse`` at the end of your script code (the same is true for command ''zoom``).
18552	bpr	2946	*/
		2947	stroke_color = get_color(infile,0);
		2948	font_size = (int) (get_real(infile,1));
		2949	tmp_buffer = my_newmem(26);
		2950	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2951	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,0);
		2952	js_function[INTERACTIVE] = 1;
		2953	break;
		2954	case MOUSEY:
		2955	/*
18556	bpr	2956	@ mousey color,fontsize
		2957	@ will display the cursor y-coordinate in ''color`` and ''font size`` using default fontfamily Arial.
		2958	@ note: use command ''mouse`` at the end of your script code (the same is true for command ''zoom``).
8386	schaersvoo	2959
18552	bpr	2960	*/
		2961	stroke_color = get_color(infile,0);
		2962	font_size = (int) (get_real(infile,1));
		2963	tmp_buffer = my_newmem(26);
		2964	snprintf(tmp_buffer,26,"use_mouse_coordinates();\n");add_to_buffer(tmp_buffer);
		2965	add_js_mouse(MOUSE_CANVAS,precision,stroke_color,font_size,stroke_opacity,1);
		2966	js_function[INTERACTIVE] = 1;
		2967	break;
		2968	case MULTIDASH:
		2969	/*
18556	bpr	2970	@ multidash 0,1,1
		2971	@ meaning draw objects no. 2 (circle) and 3 (segments), in the list of command like <code>multifill points,circle,segments</code>, are dashed
		2972	@ use before command <a href='#multidraw'>multidraw</a>
		2973	@ if not set all objects will be set ''not dashed``... unless a generic keyword ''dashed`` was given before command ''multidraw``
		2974	@ 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)
		2975	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
		2976	@ always use the same sequence as is used for ''multidraw``
18552	bpr	2977	*/
		2978	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		2979	temp = get_string(infile,1);
		2980	temp = str_replace(temp,",","\",\"");
		2981	fprintf(js_include_file,"var multidash = [\"%s\"];",temp);
		2982	reset();/* if command 'dashed' was given...reset to not-dashed */
		2983	break;
		2984	case MULTIDRAW:
		2985	/*
18556	bpr	2986	@ multidraw obj_type_1,obj_type_2...obj_type_11
		2987	@ for simple single object user drawings you could also use command <a href="#userdraw">userdraw</a>
18572	bpr	2988	@ 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	2989	@ 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
		2990	@ 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...
		2991	@ 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)
		2992	@ 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'
		2993	@ 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)
		2994	@ a right mouse button click will remove the last drawn object of the selected drawing type. All other type of objects are not removed
		2995	@ multidraw is incompatible with command ''tooltip`` (the reserved div_area is used for the multidraw control buttons)
		2996	@ all ''multidraw`` drawings will scale on zooming.<br>this in contrast to the command <a href="#userdraw">userdraw</a>.
		2997	@ 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	2998	@ 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	2999	@ 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>
		3000	@ <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.
		3001	@ 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.
		3002	@ 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	3003	@ 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	3004	@%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
		3005	@%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
		3006	@%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
		3007	@%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
		3008	@%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	3009	*/
		3010	js_function[INTERACTIVE] = 1;
		3011	if(js_function[JS_ZOOM] == 1){use_zoom = 1;} /* use noisy zoom_code, when command zoom is given before command 'multidraw' */
		3012	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3013	if( use_userdraw == 1 ){canvas_error("Only one userdraw primitive may be used in command 'userdraw' use command 'multidraw' for this...");}
		3014	use_userdraw = 2;
		3015	temp = get_string(infile,1);
		3016	fprintf(js_include_file,"\
		3017	var MMP = %d;\
		3018	if( typeof(multisnaptogrid) == 'undefined' && multisnaptogrid == null){var multisnaptogrid = new Array(MMP);for(var i=0;i<MMP;i++){multisnaptogrid[i] = %d;};};\
		3019	if( typeof(multistrokecolors) === 'undefined' && multistrokecolors == null){ var multistrokecolors = new Array(MMP);for(var i=0;i<MMP;i++){multistrokecolors[i] = '%s';};};\
		3020	if( typeof(multifillcolors) === 'undefined' && multifillcolors == null ){var multifillcolors = new Array(MMP);for(var i=0;i<MMP;i++){multifillcolors[i] = '%s';};};\
		3021	if( typeof(multistrokeopacity) === 'undefined' && multistrokeopacity == null){var multistrokeopacity = new Array(MMP);for(var i=0;i<MMP;i++){multistrokeopacity[i] = %.2f;};};\
		3022	if( typeof(multifillopacity) === 'undefined' && multifillopacity == null){var multifillopacity = new Array(MMP);for(var i=0;i<MMP;i++){multifillopacity[i] = %.2f;};};\
		3023	if( typeof(multilinewidth) === 'undefined' && multilinewidth == null){var multilinewidth = new Array(MMP);for(var i=0;i<MMP;i++){multilinewidth[i] = %d;};};\
		3024	if( typeof(multifill) === 'undefined' && multifill == null){var multifill = new Array(MMP);for(var i=0;i<MMP;i++){multifill[i] = %d;};};\
		3025	if( typeof(multidash) === 'undefined' && multidash == null){var multidash = new Array(MMP);for(var i=0;i<MMP;i++){multidash[i] = %d;};};\
		3026	if( typeof(multilabel) === 'undefined' && multilabel == null){var multilabel = [\"%s\",\"stop drawing\"];};\
		3027	if( typeof(multiuserinput) === 'undefined' && multiuserinput == null){var multiuserinput = new Array(MMP);for(var i=0;i<MMP;i++){multiuserinput[i] = '0';};};\
		3028	var arrow_head = %d;var multifont_color = '%s';var multifont_family = '%s';var forbidden_zone = [xsize+2,ysize+2];",
		3029	MAX_MULTI_PRIMITIVES,
		3030	use_snap,
		3031	stroke_color,
		3032	fill_color,
		3033	stroke_opacity,
		3034	fill_opacity,
		3035	line_width,
		3036	use_filled,
		3037	use_dashed,
		3038	str_replace(temp,",","\",\""),
		3039	arrow_head,font_color,font_family);
		3040	add_js_multidraw(temp,css_class,use_offset,int_data[MAX_MULTI_PRIMITIVES+1],crosshair_size,use_zoom);
		3041	/* no_controls == int_data[MAX_MULTI_PRIMITIVES+1] */
		3042	reply_precision = precision;
		3043	if(strstr(temp,"text") != NULL){
		3044	js_function[JS_SAFE_EVAL] = 1;
		3045	js_function[DRAW_SUBSUP] = 1;
		3046	}
		3047	if(strstr(temp,"function") != NULL){
		3048	int pp, funs = count_substring(temp, "function");
		3049	js_function[JS_SAFE_EVAL] = 1;
		3050	js_function[JS_RAWMATH] = 1;
		3051	js_function[DRAW_JSFUNCTION] = 1;
		3052	js_function[JS_MATH] = 1;
		3053	js_function[JS_PLOT] = 1;
		3054	for(pp = 0 ; pp< funs ;pp++){
		3055	add_input_jsfunction(css_class,function_label,input_cnt,stroke_color,stroke_opacity,line_width,use_dashed,dashtype[0],dashtype[1],font_size);
		3056	input_cnt++;
		3057	jsplot_cnt++;
		3058	}
		3059	fprintf(js_include_file,"if(typeof(all_jsplots) !== 'number'){var all_jsplots;};all_jsplots = %d;function redraw_userdraw(){redraw_jsplot();return;};",jsplot_cnt);
		3060	}
		3061	/* the canvasses range from 1000 ... 1008 */
		3062	if( reply_format == 0){reply_format = 29;}
		3063	reset();/* if command 'filled' / 'dashed' was given...reset all */
		3064	break;
		3065	case MULTILABEL:
		3066	/*
18556	bpr	3067	@ multilabel button_label_1,button_label_2,...,button_label_8,'stop drawing text'
		3068	@ use before command <a href='#multidraw'>multidraw</a>
		3069	@ 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'...)
		3070	@ 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>
		3071	@ 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``
		3072	@ wims will not check the amount or validity of your input
		3073	@ always use the same sequence as is used for ''multidraw``
		3074	@ if you don't want the controls, and want to write your own interface, set <code>multilabel NOCONTROLS</code>
18552	bpr	3075	*/
		3076	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3077	temp = get_string(infile,1);
		3078	if( strcasestr(temp,"NOCONTROLS") ){
		3079	int_data[MAX_MULTI_PRIMITIVES+1] = 1; /int_data[25] = 1 --> 'no_controls = 1' in canvasmacro.c /
		3080	fprintf(js_include_file,"var multilabel = null;");
		3081	}
		3082	else {
		3083	int_data[MAX_MULTI_PRIMITIVES+1] = 0; /* so DO use control buttons etc */
		3084	temp = str_replace(temp,",","\",\"");
		3085	fprintf(js_include_file,"var multilabel = [\"%s\"];",temp);
		3086	}
		3087	break;
		3088	case MULTILINEWIDTH:
		3089	/*
18556	bpr	3090	@ multilinewidth linewidth_1,linewidth_2,...,linewidth_8
		3091	@ use before command <a href='#multidraw'>multidraw</a>
		3092	@ if not set all line widths will be set by a previous command ''linewidth int``
		3093	@ 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>
		3094	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
		3095	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3096	*/
		3097	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3098	temp = get_string(infile,1);
		3099	temp = str_replace(temp,",","\",\"");
		3100	fprintf(js_include_file,"var multilinewidth = [\"%s\"];",temp);
		3101	break;
		3102	case MULTIFILL:
		3103	/*
18556	bpr	3104	@ multifill 0,0,1,0,1,0,0
		3105	@ 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...)
		3106	@ 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
		3107	@ use before command <a href='#multidraw'>multidraw</a>
		3108	@ 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>
		3109	@ only suitable for draw_primitives like ''circle \| circles``, ''triangle \| triangles``, ''rect \| rects``, ''poly[3-9] \| polys[3-9]`` and ''polygon``
		3110	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
		3111	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3112	*/
		3113	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3114	i=0;
		3115	while( ! done ){ /* get next item until EOL*/
		3116	if(i > MAX_MULTI_PRIMITIVES){canvas_error("too many multidraw primitives...read the documentation...");}
		3117	int_data[i] = (int)(get_real(infile,1)); /* 0,1,2,3,4,5 */
		3118	if(int_data[i] < 0 \|\| int_data[i] > 5 ){canvas_error("the only possible multifill arguments are: 0,1,2,3,4,5 ");}
		3119	if(int_data[i] > 1 ){use_filled = 2;js_function[DRAW_FILL_PATTERN] = 1;}/* switch to trigger pattern filling */
		3120	i++;
		3121	}
		3122	fprintf(js_include_file,"var multifill = %s ;",data2js_array(int_data,i-1));
		3123	break;
		3124	case MULTIFILLCOLORS:
		3125	/*
18556	bpr	3126	@ multifillcolors color_name_1,color_name_2,...,color_name_8
		3127	@ use before command <a href='#multidraw'>multidraw</a>
		3128	@ if not set all fillcolors (for circle \| triangle \| poly[3-9] \| closedpoly ) will be ''stroke_color``, ''fill_opacity``
		3129	@ 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	3130	@ wims will <b>not</b> check if the number of colors matches the amount of draw primitives...
18556	bpr	3131	@ always use the same sequence as is used for ''multidraw``
18627	bpr	3132	@ 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	3133	*/
		3134	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3135	fprintf(js_include_file,"var multifillcolors = [");
		3136	while( ! done ){
		3137	temp = get_color(infile,1);
		3138	fprintf(js_include_file,"\"%s\",",temp);
		3139	}
		3140	fprintf(js_include_file,"\"0,0,0\"];");/* add black to avoid trouble with dangling comma... */
		3141	break;
		3142	case MULTIFILLOPACITY:
		3143	/*
18556	bpr	3144	@ multifillopacity fill_opacity_1,fill_opacity_2,...,fill_opacity_8
		3145	@ float values 0 - 1 or integer values 0 - 255
		3146	@ use before command <a href='#multidraw'>multidraw</a>
		3147	@ if not set all fill opacity_ will be set by previous command <code>opacity int,int</code> and keyword ''filled``
		3148	@ 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>
		3149	@ wims will not check the amount or validity of your input
		3150	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3151	*/
		3152	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3153	temp = get_string(infile,1);
		3154	temp = str_replace(temp,",","\",\"");
		3155	fprintf(js_include_file,"var multifillopacity = [\"%s\"];",temp);
		3156	break;
		3157	case MULTISNAPTOGRID:
		3158	/*
18556	bpr	3159	@ multisnaptogrid 0,1,1
		3160	@ alternative: multisnap
		3161	@ 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>)
		3162	@ freehand drawing...specify precision for reply: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code>
		3163	@ only the xy-values snap_to_grid: all objects snap to grid <code>multisnaptogrid 1,1,1,...</code>
		3164	@ only the x-values snap_to_grid: all objects snap to x-grid <code>multisnaptogrid 2,2,2,...</code>
		3165	@ only the y-values snap_to_grid: all objects snap to y-grid <code>multisnaptogrid 3,3,3,...</code>
		3166	@ 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>
		3167	@ <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>
		3168	@ use before command <a href='#multidraw'>multidraw</a>
		3169	@ attention: if not set all objects will be set ''no snap``... unless a generic command ''snaptogrid`` was given before command ''multidraw``
		3170	@ 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>
		3171	@ always use the same sequence as is used for ''multidraw``
		3172	@ wims will <b>not</b> check if the number of 0 or 1's matches the amount of draw primitives...
18552	bpr	3173	*/
		3174	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3175	temp = get_string(infile,1);
		3176	fprintf(js_include_file,"var multisnaptogrid = [%s];",temp);
		3177	reset();/* if command 'dashed' was given...reset to not-dashed */
		3178	break;
		3179	case MULTISTROKECOLORS:
		3180	/*
18556	bpr	3181	@ multistrokecolors color_name_1,color_name_2,...,color_name_8
		3182	@ use before command <a href='#multidraw'>multidraw</a>
		3183	@ if not set all colors will be ''stroke_color``, ''stroke_opacity``
		3184	@ 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	3185	@ wims will <b>not</b> check if the number of colors matches the amount of draw primitives...
18556	bpr	3186	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3187	*/
		3188	if( use_tooltip == 1 ){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3189	fprintf(js_include_file,"var multistrokecolors = [");
		3190	while( ! done ){
		3191	temp = get_color(infile,1);
		3192	fprintf(js_include_file,"\"%s\",",temp);
		3193	}
		3194	fprintf(js_include_file,"\"0,0,0\"];");/* add black to avoid trouble with dangling comma... */
		3195	break;
		3196	case MULTISTROKEOPACITY:
		3197	/*
18556	bpr	3198	@ multistrokeopacity stroke_opacity_1,stroke_opacity_2,...,stroke_opacity_7
		3199	@ float values 0 - 1 or integer values 0 - 255
		3200	@ use before command <a href='#multidraw'>multidraw</a>
		3201	@ if not set all stroke opacity_ will be set by previous command <code>opacity int,int</code>
		3202	@ 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>
		3203	@ wims will not check the amount or validity of your input
		3204	@ always use the same sequence as is used for ''multidraw``
18552	bpr	3205	*/
		3206	if( use_tooltip == 1){canvas_error("command 'multidraw' is incompatible with command 'intooltip tip_text'");}
		3207	temp = get_string(infile,1);
		3208	temp = str_replace(temp,",","\",\"");
		3209	fprintf(js_include_file,"var multistrokeopacity = [\"%s\"];",temp);
		3210	break;
		3211	case MULTIUSERINPUT:
		3212	/*
		3213	@ multiuserinput 0,1,1,0
		3214	@ alternative: multiinput
18572	bpr	3215	@ 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	3216	@ 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
		3217	@ 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...
		3218	@ in case of a triangle \| poly3, three inputfields are provided.
		3219	@ in case of ''text`` and ''multiuserinput=1, 3`` inputfields will be shown: ''x,y,text``
		3220	@ in case of ''text`` and ''multiuserinput=0, 1`` inputfield will be shown: text ... a mouse click will place the text on the canvas.
		3221	@ may be styled using command <a href="#css">css</a>
		3222	@ an additional button ''stop drawing`` may be used to combine userbased drawings with ''drag&and;drop`` or ''onclick`` elements
		3223	@ when exercise if finished (status=done) the buttons will not be shown.<br>To override this default behaviour use command / keyword ''status``
		3224	@ use before command <a href='#multidraw'>multidraw</a>
		3225	@ always use the same sequence as is used for ''multidraw``
		3226	*/
		3227	/* simple rawmath and input check */
		3228	js_function[JS_SAFE_EVAL] = 1;
		3229	temp = get_string(infile,1);
		3230	temp = str_replace(temp,",","\",\"");
		3231	fprintf(js_include_file,"var multiuserinput = [\"%s\"];",temp);
		3232	break;
		3233	case NORESET:
		3234	/*
		3235	@ noreset
		3236	@ alternative: killreset
		3237	@ keyword
		3238	@ may come in handy if canvas script code is generated using loops
		3239	@ 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>
		3240	@ 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)
		3241	@ etc etc
		3242	@ 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>
		3243	@ commands like 'opacity', 'linewidth', 'fontsize', 'fontfamily' are only changed when redefined again
		3244	@%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
		3245	@%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
		3246	*/
		3247	if(no_reset == FALSE){no_reset = TRUE;}else{no_reset = FALSE;reset();}
		3248	break;
		3249	case NOXAXIS:
		3250	/*
		3251	@ noxaxis
		3252	@ keyword
		3253	@ if set, the automatic x-axis numbering will be ignored
		3254	@ use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="#grid">grid</a>)
		3255	@ to be used before command grid (see <a href="#grid">command grid</a>)
		3256	*/
		3257	fprintf(js_include_file,"x_strings = {};x_strings_up = [];\n");
		3258	use_axis_numbering = -1;
		3259	break;
		3260	case NOYAXIS:
		3261	/*
		3262	@ noyaxis
		3263	@ keyword
		3264	@ if set, the automatic y-axis numbering will be ignored
		3265	@ use command <a href="#axis">axis</a> to have a visual x/y-axis lines (see command <a href="#grid">grid</a>)
		3266	@ to be used before command grid (see <a href="#grid">command grid</a>)
		3267	*/
		3268	fprintf(js_include_file,"y_strings = {};\n");
		3269	break;
		3270	case NUMBERLINE:
		3271	/*
		3272	@ numberline x0,x1,xmajor,xminor,y0,y1
		3273	@ numberline is using xrange/yrange system for all dimensions
		3274	@ multiple numberlines are allowed ; combinations with command <a href='#grid'>grid</a> is allowed; multiple commands <a href='#xaxis'>xaxis numbering</a> are allowed
		3275	@ x0 is start x-value in xrange
		3276	@ x1 is end x-value in xrange
		3277	@ xmajor is step for major division
		3278	@ xminor is divisor of xmajor; using small (30% of major tick) tick marks: this behaviour is ''hardcoded``
		3279	@ is xminor is an even divisor, an extra tickmark (60% of major tick) is added to the numberline: this behaviour is ''hardcoded``
		3280	@ y0 is bottom of numberline; y1 endpoint of major tics
		3281	@ use command <a href="#linewidth">linewidth</a> to control appearance
		3282	@ use <a href="#strokecolor">strokecolor</a> and <a href="#opacity">opacity</a> to controle measure line
		3283	@ for all ticks linewidth and color / opacity are identical.
		3284	@ 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
		3285	@ use <a href="#fontfamily">fontfamily</a> and <a href="#fontcolor">fontcolor</a> to control fonts settings
		3286	@ 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
		3287	@ <a href="#snaptogrid">snaptogrid, snaptopoints etc</a> and <a href="#zoom">zooming and panning</a> is supported
		3288	@ onclick and dragging of the numberline are not -yet- supported
		3289	@ note: in case of multiple numberlines, make sure the numberline without special x-axis numbering (e.g. ranging from xmin to xmax) comes first !
		3290	@%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
		3291	*/
		3292	js_function[DRAW_NUMBERLINE] = 1;
		3293	for(i=0;i<6;i++){
		3294	switch(i){
		3295	case 0: double_data[0] = get_real(infile,0);break;/* xmin */
		3296	case 1: double_data[1] = get_real(infile,0);break;/* xmax */
		3297	case 2: double_data[2] = get_real(infile,0);break;/* xmajor */
		3298	case 3: double_data[3] = get_real(infile,0);break;/* xminor */
		3299	case 4: double_data[4] = get_real(infile,0);break;/* ymin */
		3300	case 5: double_data[5] = get_real(infile,1);/* ymax */
		3301	/*
		3302	var draw_numberline%d = function(canvas_type,xmin,xmax,xmajor,xminor,ymin,ymax,linewidth,strokecolor,strokeopacity,fontfamily,fontcolor);
		3303	*/
		3304	fprintf(js_include_file,"snap_x = %f;snap_y = %f;",double_data[2] / double_data[3],double_data[5] - double_data[4] );
18557	bpr	3305	tmp_buffer=my_newmem(MAX_BUFFER);
		3306	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	3307	add_to_buffer(tmp_buffer);
		3308	numberline_cnt++;
		3309	break;
		3310	default:break;
		3311	}
		3312	}
		3313	reset();
		3314	break;
		3315	case OBABEL:
		3316	/*
		3317	@ obabel x,y,type input,molecule smiles-code or file location, extra arguments,extra arguments,...
		3318	@ will call the ''obabel`` program, if installed.
		3319	@ output will be an svg file
		3320	@ see documentation of obabel for special keys
		3321	@ command <a href='#affine'>affine</a> will produce CSS3 matrix transformations
		3322	@ command <a href='#rotate'>rotate</a> will rotate the object
		3323	@ 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
		3324	@ 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...
		3325	@ 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
		3326	@ 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
		3327	@%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
		3328	*/
		3329	js_function[DRAW_XML] = 1;
		3330	for(i=0;i<4;i++){
		3331	switch(i){
		3332	case 0: double_data[0]=get_real(infile,0);break; /* x in x/y-range coord system -> pixel width */
		3333	case 1: double_data[1]=get_real(infile,0);break; /* y in x/y-range coord system -> pixel height */
		3334	case 2: URL = get_string_argument(infile,0);break;
		3335	case 3:
		3336	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3337	temp = getSVGMOL(URL,get_string(infile,1));
		3338	decimals = find_number_of_digits(precision);
		3339	if(use_affine == TRUE ){ transform(2,2);}
		3340	if( use_offset != 0 \|\| drag_type != -1 ){int_data[2] = 1;}else{int_data[2] = 0;} /* only centered or not-centered */
		3341	int_data[0] = x2px(double_data[0]);
		3342	int_data[1] = y2px(double_data[1]);
		3343	if( use_slider != -1 && onclick == 0 ){ onclick = 3;}/* no drag&onclick but slideable */
		3344	if( use_slider != -1 && drag_type > 0 ){ onclick = 5;}/* slider+drag*/
		3345	if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\"","'"); }
18557	bpr	3346	tmp_buffer=my_newmem(MAX_BUFFER);
		3347	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	3348	add_to_buffer(tmp_buffer);
		3349	if(onclick != 0 ){object_cnt++;}
		3350	drawxml_cnt++;/* keeps track on imported img,div,p,span,mathml,svg */
		3351	break;
		3352	default:break;
		3353	}
		3354	}
		3355	reset();
		3356	break;
		3357	case OPACITY:
		3358	/*
		3359	@ opacity [0-255],[0-255]
		3360	@ opacity [0.0 - 1.0],[0.0 - 1.0]
		3361	@ alternative: transparent
		3362	@ first item is stroke opacity, second is fill opacity
		3363	@%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
		3364	*/
		3365	for(i = 0 ; i<2;i++){
		3366	switch(i){
		3367	case 0: double_data[0]= get_real(infile,0);break;
		3368	case 1: double_data[1]= get_real(infile,1);break;
		3369	default: break;
		3370	}
		3371	}
		3372	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	3373	if( double_data[0] > 1 ){ stroke_opacity = (double) (0.0039215double_data[0]); }else{ stroke_opacity = double_data[0];} / 0.0 - 1.0 */
		3374	if( double_data[1] > 1 ){ fill_opacity = (double) (0.0039215double_data[1]); }else{ fill_opacity = double_data[1];} / 0.0 - 1.0 */
18552	bpr	3375	break;
18608	bpr	3376	case STROKEOPACITY:
		3377	/*
		3378	@ strokeopacity [0-255]
		3379	@ strokeopacity [0.0 - 1.0]
		3380	@%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
		3381	*/
		3382	double_data[0]= get_real(infile,1);
		3383	if( double_data[0] > 255 \|\| double_data[0] < 0 ){ canvas_error("opacity [0 - 255] ");}/* typo or non-RGB ? */
		3384	if( double_data[0] > 1 ){ stroke_opacity = (double) (0.0039215double_data[0]); }else{ stroke_opacity = double_data[0];} / 0.0 - 1.0 */
		3385	break;
		3386	case FILLOPACITY:
		3387	/*
		3388	@ fillopacity [0-255]
		3389	@ fillopacity [0.0 - 1.0]
		3390	@%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
		3391	*/
		3392	double_data[0]= get_real(infile,1);
		3393	if( double_data[0] > 255 \|\| double_data[0] < 0 ){ canvas_error("fillopacity [0 - 255] ");}/* typo or non-RGB ? */
		3394	if( double_data[0] > 1 ){ fill_opacity = (double) (0.0039215double_data[0]); }else{ fill_opacity = double_data[0];} / 0.0 - 1.0 */
		3395	break;
18552	bpr	3396	case ONCLICK:
		3397	/*
18556	bpr	3398	@ onclick
		3399	@ keyword (no arguments required)
		3400	@ if the next object is clicked, its ''object onclick_or_drag sequence number`` in fly script is returned by <code>javascript:read_canvas();</code>
		3401	@ 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``
		3402	@ line based objects will show an increase in line width<br>font based objects will show the text in ''bold`` when clicked.
		3403	@ the click zone (accuracy) is determined by 2× the line width of the object
		3404	@ 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...)
		3405	@ note: not all objects may be set onclick
		3406	@%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	3407	*/
		3408	fprintf(js_include_file,"use_dragdrop_reply = true;");
		3409	onclick = 1;
		3410	use_dragstuff=2;
		3411	js_function[INTERACTIVE] = 1;
		3412	break;
		3413	case PARALLEL:
		3414	/*
18556	bpr	3415	@ parallel x1,y1,x2,y2,dx,dy,n,[colorname or #hexcolor]
		3416	@ affine transformations should be identical to flydraw
		3417	@ 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.
		3418	@ in case of <em>no rotation or transformations</em> the lines can not be set ''onclick`` or ''drag xy``.
		3419	@ 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...)
		3420	@%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
		3421	@%parallel%size 400,400%xrange -10,10%yrange -10,10%parallel -5,5,-4,-5,0.25,0,40,red
18552	bpr	3422	*/
		3423	decimals = find_number_of_digits(precision);
		3424	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3425	if( use_rotate == TRUE \|\| use_affine == TRUE ){
		3426	for( i = 0;i < 8; i++ ){
		3427	switch(i){
		3428	case 0: double_data[0] = get_real(infile,0);break; /* x1-values */
		3429	case 1: double_data[1] = get_real(infile,0);break; /* y1-values */
		3430	case 2: double_data[2] = get_real(infile,0);break; /* x2-values */
		3431	case 3: double_data[3] = get_real(infile,0);break; /* y2-values */
		3432	case 4: double_data[4] = get_real(infile,0);break; /* xv */
		3433	case 5: double_data[5] = get_real(infile,0);break; /* yv */
		3434	case 6: int_data[0] = (int) (get_real(infile,0));break; /* n */
		3435	case 7: stroke_color=get_color(infile,1);break;/* name or hex color */
		3436	default: break;
		3437	}
		3438	}
		3439	double_data[6] = double_data[0]; /* x1 */
		3440	double_data[7] = double_data[1]; /* y1 */
		3441	double_data[8] = double_data[2]; /* x2 */
		3442	double_data[9] = double_data[3]; /* y2 */
		3443	for(i = 0 ; i < int_data[0] ; i++){
		3444	double_data[0] = double_data[6] + i*double_data[4];
		3445	double_data[1] = double_data[7] + i*double_data[5];
		3446	double_data[2] = double_data[8] + i*double_data[4];
		3447	double_data[3] = double_data[9] + i*double_data[5];
		3448	if(use_rotate == TRUE ){ rotate(4,angle,rotationcenter,2);}
		3449	if(use_affine == TRUE ){ transform(4,2);}
18557	bpr	3450	tmp_buffer=my_newmem(MAX_BUFFER);
		3451	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	3452	add_to_buffer(tmp_buffer);
		3453	if(onclick != 0){object_cnt++;}
		3454	}
		3455	dragstuff[4] = 1;
		3456	}
		3457	else /* use the old parallel version: calculations in javascript */
		3458	{
		3459	for( i = 0;i < 8; i++ ){
		3460	switch(i){
		3461	case 0: double_data[0] = get_real(infile,0);break; /* x1-values */
		3462	case 1: double_data[1] = get_real(infile,0);break; /* y1-values */
		3463	case 2: double_data[2] = get_real(infile,0);break; /* x2-values */
		3464	case 3: double_data[3] = get_real(infile,0);break; /* y2-values */
		3465	case 4: double_data[4] = xmin + get_real(infile,0);break; /* xv */
		3466	case 5: double_data[5] = ymax + get_real(infile,0);break; /* yv */
		3467	case 6: int_data[0] = (int) (get_real(infile,0));break; /* n */
		3468	case 7: stroke_color=get_color(infile,1);/* name or hex color */
18557	bpr	3469	tmp_buffer=my_newmem(MAX_BUFFER);
		3470	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	3471	add_to_buffer(tmp_buffer);
		3472	if(onclick != 0){object_cnt++;}
		3473	break;
		3474	default: break;
		3475	}
		3476	dragstuff[11] = 1;
		3477	}
		3478	}
		3479	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3480	reset();
		3481	break;
		3482	case PLOTSTEPS:
		3483	/*
18556	bpr	3484	@ plotsteps a_number
		3485	@ default 150
		3486	@ only used for commands <a href="#curve">curve / plot</a> and <a href="#levelcurve">levelcurve</a>
		3487	@ use with care !
18552	bpr	3488	*/
		3489	plot_steps = (int) (get_real(infile,1));
		3490	break;
		3491	case POINT:
		3492	/*
		3493	@ point x,y,color
		3494	@ draw a single point at (x;y) in color 'color'
		3495	@ use command <code>linewidth int</code> to adjust size
		3496	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3497	@ will not resize on zooming (command <code>circle x,y,r,color</code> will resize on zooming)
		3498	@ attention: in case of command <a href="#rotate">rotate angle</a> a point has rotation center (0:0) in x/y-range
		3499	@%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
		3500	*/
		3501	for(i=0;i<3;i++){
		3502	switch(i){
		3503	case 0: double_data[0] = get_real(infile,0);break; /* x */
		3504	case 1: double_data[1] = get_real(infile,0);break; /* y */
		3505	case 2: stroke_color = get_color(infile,1);/* name or hex color */
		3506	if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}
		3507	if(use_affine == TRUE ){ transform(2,2);}
		3508	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3509	decimals = find_number_of_digits(precision);
18557	bpr	3510	tmp_buffer=my_newmem(MAX_BUFFER);
		3511	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	3512	add_to_buffer(tmp_buffer);
		3513	/* object_cnt++; */
		3514	if(onclick != 0){object_cnt++;}
		3515	break;
		3516	default: break;
		3517	}
		3518	}
		3519	dragstuff[2] = 1;
		3520	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3521	reset();
		3522	break;
		3523	case POINTS:
		3524	/*
		3525	@ points color,x1,y1,x2,y2,...,x_n,y_n
		3526	@ draw multiple points at given coordinates in color 'color'
		3527	@ use command <code>linewidth int</code> to adjust size
		3528	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		3529	@ attention: in case of command <a href="#rotate">rotate angle</a> the points have rotation center (0:0) in x/y-range
		3530	@%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
		3531	@%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
		3532	*/
		3533	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3534	fill_color = stroke_color;
		3535	i=0;
		3536	while( ! done ){ /* get next item until EOL*/
		3537	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3538	if(i%2 == 0 ){
		3539	double_data[i] = get_real(infile,0); /* x */
		3540	}
		3541	else {
		3542	double_data[i] = get_real(infile,1); /* y */
		3543	}
		3544	i++;
		3545	}
		3546	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3547	if(use_affine == TRUE ){ transform(i-1,2);}
		3548	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3549	decimals = find_number_of_digits(precision);
		3550	for(c = 0 ; c < i-1 ; c = c+2){
18557	bpr	3551	tmp_buffer=my_newmem(MAX_BUFFER);
		3552	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	3553	add_to_buffer(tmp_buffer);
		3554	/* object_cnt++; */
		3555	if(onclick != 0){object_cnt++;}
		3556	}
		3557	dragstuff[2] = 1;
		3558	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3559	reset();
		3560	break;
		3561	case POLY:
		3562	/*
		3563	@ poly color,x1,y1,x2,y2...x_n,y_n
		3564	@ polygon color,x1,y1,x2,y2...x_n,y_n
		3565	@ draw closed polygon
		3566	@ use command ''fpoly`` to fill it or use keyword <a href='#filled'>filled</a>
		3567	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3568	@%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
		3569	@%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
		3570	*/
		3571	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3572	i=0;
		3573	c=0;
		3574	while( ! done ){ /* get next item until EOL*/
		3575	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3576	for( c = 0 ; c < 2; c++){
		3577	if(c == 0 ){
		3578	double_data[i] = get_real(infile,0);
		3579	i++;
		3580	}
		3581	else {
		3582	double_data[i] = get_real(infile,1);
		3583	i++;
		3584	}
		3585	}
		3586	}
		3587	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3588	if(use_affine == TRUE ){ transform(i-1,2);}
		3589	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
8386	schaersvoo	3590
18552	bpr	3591	/* draw path: closed & optional filled */
		3592	decimals = find_number_of_digits(precision);
18557	bpr	3593	tmp_buffer=my_newmem(MAX_BUFFER);
		3594	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	3595	add_to_buffer(tmp_buffer);
		3596	if(onclick != 0){object_cnt++;}
		3597	reset();
		3598	dragstuff[5] = 1;
		3599	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3600	break;
		3601	case POLYLINE:
		3602	/*
		3603	@ polyline color,x1,y1,x2,y2...x_n,y_n
		3604	@ brokenline color,x1,y1,x2,y2...x_n,y_n
		3605	@ path color,x1,y1,x2,y2...x_n,y_n
		3606	@ 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>
		3607	@ 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
		3608	@ 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)
		3609	@ use command <a href='#segments'>segments</a> for a series of segments. These may be clicked/dragged individually
		3610	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3611	@%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
		3612	@%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
		3613	*/
11806	schaersvoo	3614
18552	bpr	3615	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3616	i=0;
		3617	c=0;
		3618	while( ! done ){ /* get next item until EOL*/
		3619	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3620	for( c = 0 ; c < 2; c++){
		3621	if(c == 0 ){
		3622	double_data[i] = get_real(infile,0);
		3623	i++;
		3624	}
		3625	else {
		3626	double_data[i] = get_real(infile,1);
		3627	i++;
		3628	}
		3629	}
		3630	}
11806	schaersvoo	3631
18552	bpr	3632	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3633	if(use_affine == TRUE ){ transform(i-1,2);}
		3634	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	3635
18552	bpr	3636	/* draw path: not closed & not filled */
		3637	decimals = find_number_of_digits(precision);
18557	bpr	3638	tmp_buffer=my_newmem(MAX_BUFFER);
		3639	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	3640	add_to_buffer(tmp_buffer);
		3641	if(onclick != 0){object_cnt++;}
		3642	/* object_cnt++;*/
		3643	reset();
		3644	dragstuff[4] = 1;
		3645	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3646	break;
		3647	case POPUP:
		3648	/*
18556	bpr	3649	@ popup
		3650	@ keyword (no arguments)
		3651	@ if fly-script starts with keyword ''popup``, the canvas image will be exclusively in a popup window (xsize px × ysize px)
		3652	@ 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``
		3653	@ the popup window will be embedded into the page as a normal image, when ''status=done``; override with keyword <a href="#status">nostatus</a>
		3654	@ 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>
		3655	@ 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
		3656	@%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	3657	*/
		3658	use_tooltip = 2;
		3659	break;
		3660	case PROTRACTOR:
		3661	/*
18556	bpr	3662	@ protractor x,y,x_width,type,mode,use_a_scale
		3663	@ x,y are the initial location
		3664	@ x_width: give the width in x-coordinate system (e.g. not in pixels !)
		3665	@ type = 1: a triangle range 0 - 180<br>type = 2: a circle shape 0 - 360
		3666	@ 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
		3667	@ 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>
		3668	@ use_scale = 1: the protractor will have some scale values printed; use_scale=0 to disable
		3669	@ the rotating direction of the mouse around the protractor determines the clockwise/ counter clockwise rotation of the protractor...
		3670	@ commands ''stroke_color \| fill_color \| linewidth \| opacity \| font_family`` will determine the looks of the protractor.
		3671	@ default replyformat: reply[0] = x;reply[1] = y;reply[2] = angle_in_radians<br>use command ''precision`` to set the reply precision.
		3672	@ if combined with a ruler, use replyformat = 32
		3673	@ command <code>snap_to_grid</code> may be used to assist the pupil at placing the protractor
		3674	@ 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...
		3675	@ only one protractor allowed (for the time being)
		3676	@ 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...
		3677	@%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	3678	*/
		3679	for( i = 0;i < 6; i++ ){
		3680	switch(i){
		3681	case 0: double_data[0] = get_real(infile,0);break; /* x-center */
		3682	case 1: double_data[1] = get_real(infile,0);break; /* y-center */
		3683	case 2: double_data[2] = get_real(infile,0);break; /* x-width */
		3684	case 3: int_data[0] = (int)(get_real(infile,0));break; /* type: 1==triangle 2 == circle */
		3685	case 4: int_data[1] = (int)(get_real(infile,0));break; /* passive mode == 0; active mode == -1 */
		3686	case 5: int_data[2] = (int)(get_real(infile,1)); /* use scale */
		3687	decimals = find_number_of_digits(precision);
		3688	if( int_data[1] < 0 ){ js_function[JS_FIND_ANGLE] = 1;}
18557	bpr	3689	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);
		3690	tmp_buffer=my_newmem(MAX_BUFFER);
		3691	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, ";protractor%d(); ",canvas_root_id));
18552	bpr	3692	add_to_buffer(tmp_buffer);
		3693	reply_precision = precision;
		3694	/* no reply from protractor if non-interactive */
		3695	if( reply_format == 0 && int_data[1] == -1 ){reply_format = 30;}
		3696	js_function[INTERACTIVE] = 1;
		3697	break;
		3698	default: break;
		3699	}
		3700	}
		3701	break;
		3702	case PIXELS:
		3703	/*
		3704	@ pixels color,x1,y1,x2,y2,x3,y3...
		3705	@ draw rectangular "points" with diameter 1 pixel
		3706	@ pixels can <b>not</b> be dragged or clicked
		3707	@ "pixelsize = 1" may be changed by command <code>pixelsize int</code>
		3708	@%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...
		3709	*/
		3710	js_function[DRAW_PIXELS] = 1;
		3711	stroke_color=get_color(infile,0);
		3712	i=0;
		3713	c=0;
		3714	while( ! done ){ /* get next item until EOL*/
		3715	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3716	for( c = 0 ; c < 2; c++){
		3717	if(c == 0 ){
		3718	double_data[i] = get_real(infile,0);
		3719	i++;
		3720	}
		3721	else {
		3722	double_data[i] = get_real(infile,1);
		3723	}
		3724	}
		3725	}
		3726	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3727	if(use_affine == TRUE ){ transform(i-1,2);}
		3728	decimals = find_number_of_digits(precision);
		3729	/* double_xy2js_array(double xy[],int len,int decimals) /
18557	bpr	3730	tmp_buffer=my_newmem(MAX_BUFFER);
		3731	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	3732	add_to_buffer(tmp_buffer);
		3733	reset();
		3734	break;
		3735	case PIXELSIZE:
		3736	/*
		3737	@ pixelsize int
		3738	@ in case you want to deviate from default pixelsize = 1(...)
		3739	@ pixelsize 100 is of course a filled rectangle 100px × 100px
		3740	*/
		3741	pixelsize = (int) get_real(infile,1);
		3742	break;
15111	schaersvoo	3743
18552	bpr	3744	case PIECHART:
		3745	/*
		3746	@ piechart xc,yc,radius,'data+colorlist'
		3747	@ (xc: yc) center of circle diagram in xrange/yrange
		3748	@ radius in pixels
18627	bpr	3749	@ 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	3750	@ example data+colorlist: 32:red:65:green:23:black:43:orange:43:yellow:14:white
		3751	@ the number of colors must match the number of data.
		3752	@ 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	3753	@ use command <a href='#opacity'>opacity</a> to adjust fill_opacity of colors
		3754	@ 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	3755	@ 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.
		3756	@%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%
		3757	@%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
		3758	*/
		3759	js_function[DRAW_PIECHART] = 1;
		3760	for(i=0;i<5;i++){
		3761	switch(i){
		3762	case 0: int_data[0] = x2px(get_real(infile,0)); break; /* x */
		3763	case 1: int_data[1] = y2px(get_real(infile,0)); break; /* y */
		3764	case 2: int_data[2] = (int)(get_real(infile,1));break;/* radius*/
		3765	case 3: temp = get_string(infile,1);
		3766	if( strstr( temp, ":" ) != 0 ){ temp = str_replace(temp,":","\",\"");}
18557	bpr	3767	tmp_buffer=my_newmem(MAX_BUFFER);
		3768	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	3769	add_to_buffer(tmp_buffer);
		3770	break;
		3771	default:break;
		3772	}
		3773	}
		3774	reset();
		3775	break;
		3776	case RANGE:
		3777	/*
		3778	@ range xmin,xmax,ymin,ymax
		3779	@ if not given: 0,xsize,0,ysize (eg in pixels)
		3780	*/
		3781	for(i = 0 ; i<4; i++){
		3782	switch(i){
		3783	case 0: xmin = get_real(infile,0);break;
		3784	case 1: xmax = get_real(infile,1);break;
		3785	case 2: ymin = get_real(infile,0);break;
		3786	case 3: ymax = get_real(infile,1);break;
		3787	default: break;
		3788	}
		3789	}
		3790	if(xmin >= xmax){canvas_error(" xrange is not OK: xmin < xmax !");}
		3791	if(ymin >= ymax){canvas_error(" yrange is not OK: ymin < ymax !");}
		3792	fprintf(js_include_file,"var xmin = %f;var xmax = %f;var ymin = %f;var ymax = %f;",xmin,xmax,ymin,ymax);
		3793	found_size_command = found_size_command+2;
		3794	break;
		3795	case RAYS:
		3796	/*
18556	bpr	3797	@ rays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n
		3798	@ draw rays in color 'color' and center (xc:yc)
		3799	@ may be set draggable or onclick (every individual ray)
		3800	@%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
		3801	@%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	3802	*/
		3803	stroke_color=get_color(infile,0);
		3804	fill_color = stroke_color;
		3805	double_data[0] = get_real(infile,0);/* xc */
		3806	double_data[1] = get_real(infile,0);/* yc */
		3807	i=2;
		3808	while( ! done ){ /* get next item until EOL*/
		3809	if(i > MAX_INT - 1){canvas_error("in command rays too many points / rays in argument: repeat command multiple times to fit");}
		3810	if(i%2 == 0 ){
		3811	double_data[i] = get_real(infile,0); /* x */
		3812	}
		3813	else {
		3814	double_data[i] = get_real(infile,1); /* y */
		3815	}
		3816	fprintf(js_include_file,"/* double_data[%d] = %f */\n",i,double_data[i]);
		3817	i++;
		3818	}
		3819	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3820	if(use_affine == TRUE ){ transform(i-1,2);}
		3821	if( i%2 != 0 ){canvas_error("in command rays: unpaired x or y value");}
		3822	decimals = find_number_of_digits(precision);
		3823	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3824	for(c=2; c<i;c = c+2){
18557	bpr	3825	tmp_buffer=my_newmem(MAX_BUFFER);
		3826	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	3827	add_to_buffer(tmp_buffer);
		3828	/* object_cnt++; */
		3829	if(onclick != 0){object_cnt++;}
		3830	}
		3831	reset();
		3832	dragstuff[4] = 1;
		3833	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3834	break;
		3835	case RECT:
		3836	/*
		3837	@ rect x1,y1,x2,y2,color
		3838	@ use command <code>frect x1,y1,x2,y2,color</code> for a filled rectangle
		3839	@ use command/keyword <a href='#filled'>filled</a> before command <code>rect x1,y1,x2,y2,color</code>
		3840	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
18572	bpr	3841	@ 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	3842	@%rect%size 400,400%xrange -10,10%yrange -10,10%rect 0,0,4,-4,green%rect 0,5,4,1,red
		3843	*/
		3844	for(i=0;i<5;i++){
		3845	switch(i){
		3846	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		3847	case 1:double_data[1] = get_real(infile,0);break; /* y-values */
		3848	case 2:double_data[4] = get_real(infile,0);break; /* x-values */
		3849	case 3:double_data[5] = get_real(infile,0);break; /* y-values */
		3850	case 4:stroke_color = get_color(infile,1);/* name or hex color */
		3851	decimals = find_number_of_digits(precision);
		3852	double_data[2] = double_data[4];
		3853	double_data[3] = double_data[1];
		3854	double_data[6] = double_data[0];
		3855	double_data[7] = double_data[5];
		3856	/* using closed PATH (type=5) instead of ctx.rect (type=1)!!!
		3857	0,1 2,3
		3858	6,7 4,5
		3859	x = [0,2,4,6]
		3860	y = [1,3,5,7]
		3861	*/
18623	bpr	3862	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	3863	if(use_rotate == TRUE ){rotate(8,angle,rotationcenter,2);}
		3864	if(use_affine == TRUE ){ transform(8,2);}
		3865	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	3866	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	3867	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	3868	add_to_buffer(tmp_buffer);
		3869	if(onclick != 0){object_cnt++;}
18555	bpr	3870	/* object_cnt++; */
18552	bpr	3871	reset();
		3872	break;
		3873	}
		3874	}
		3875	dragstuff[5] = 1;
		3876	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3877	break;
		3878	case RECTS:
		3879	/*
		3880	@ rects color,x1,y1,x2,y2,.....
		3881	@ use command <code>frect color,x1,y1,x2,y2,.....</code> for a filled rectangle
		3882	@ use command/keyword <a href='#filled'>filled</a> before command <code>rects color,x1,y1,x2,y2,....</code>
18623	bpr	3883	@ use command <code>fillcolor color</code> before ''frects`` to set the fill color.
18552	bpr	3884	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		3885	@%rects%size 400,400%xrange -10,10%yrange -10,10%rects red,0,0,4,-4,0,5,4,1
		3886	*/
		3887	/* using closed PATH (type=5) in stead of ctx.rect (type=1)!!!
		3888	0,1 2,3 .....8,9 10,11.....
		3889	6,7 4,5 .....14,15 12,13.....
		3890	x = [0,2,4,6,8,10,12,14...]
		3891	y = [1,3,5,7,9,11,13,15...]
		3892	*/
		3893	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	3894	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	3895	i=0;
		3896	while( ! done ){ /* get next item until EOL*/
		3897	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3898	if(i%2 == 0 ){
		3899	double_data[i] = get_real(infile,0); /* x */
		3900	}
		3901	else {
		3902	double_data[i] = get_real(infile,1); /* y */
		3903	}
		3904	i++;
		3905	}
		3906	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3907	if(use_affine == TRUE ){ transform(i-1,2);}
		3908	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
11806	schaersvoo	3909
18552	bpr	3910	decimals = find_number_of_digits(precision);
		3911	for(c = 0 ; c < i-1 ; c = c+4){
18557	bpr	3912	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	3913	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	3914	add_to_buffer(tmp_buffer);
		3915	if(onclick != 0){object_cnt++;}
		3916	/* object_cnt++; */
		3917	}
		3918	dragstuff[5] = 1;
		3919	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3920	if(use_rotate == TRUE ){
		3921	rotate(i-1,angle,rotationcenter,2);
		3922	}
		3923	reset();
		3924	break;
		3925	case REPLYFORMAT:
		3926	/*
		3927	@ replyformat number
		3928	@ use number=-1 to deactivate the js-functions read_canvas() and read_dragdrop()
		3929	@ default values should be fine !
		3930	@ 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
		3931	@ the last value for ''precision int`` will be used to calculate the reply coordinates, if needed (read_canvas();)
		3932	@ 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>
		3933	@ 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'
		3934	*/
		3935	reply_format = (int) get_real(infile,1);
		3936	reply_precision = precision;
		3937	break;
		3938	case ROUNDRECT:
		3939	/*
		3940	@ roundrect x1,y1,x2,y2,radius in px,color
		3941	@ use command <code>froundrect x1,y1,x2,y2,radius,color</code> for a filled rectangle
		3942	@ use command/keyword <a href='#filled'>filled</a> before command <code>roundrect x1,y1,x2,y2,radius,color</code>
		3943	@ fillcolor will be identical to ''color``
		3944	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		3945	@%roundrect%size 400,400%xrange -10,10%yrange -10,10%roundrect 0,0,4,-4,20,green%roundrect 0,5,4,1,10,red
		3946	*/
		3947	for(i=0;i<6;i++){
		3948	switch(i){
		3949	case 0:double_data[0] = get_real(infile,0);break; /* x-values */
		3950	case 1:double_data[1] = get_real(infile,0);break; /* y-values */
		3951	case 2:double_data[2] = get_real(infile,0);break; /* x-values */
		3952	case 3:double_data[3] = get_real(infile,0);break; /* y-values */
		3953	case 4:int_data[0] = (int) (get_real(infile,0));break; /* radius value in pixels */
		3954	case 5:stroke_color = get_color(infile,1);/* name or hex color */
		3955	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		3956	if(use_affine == TRUE ){ transform(2,4);}
		3957	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3958	/* ensure no inverted roundrect is produced... */
		3959	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];}
		3960	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];}
		3961	decimals = find_number_of_digits(precision);
18557	bpr	3962	tmp_buffer=my_newmem(MAX_BUFFER);
		3963	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	3964	add_to_buffer(tmp_buffer);
		3965	if(onclick != 0){object_cnt++;}
		3966	/* object_cnt++;*/
		3967	reset();
		3968	break;
		3969	}
		3970	}
		3971	dragstuff[6] = 1;
		3972	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		3973	break;
		3974	case ROUNDRECTS:
		3975	/*
		3976	@ roundrects color,radius in px,x1,y1,x2,y2,x3,y3,x4,y4,....
		3977	@ for filled roundrects use command/keyword <a href='#filled'>filled</a> before command
		3978	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		3979	@%roundrects%size 400,400%xrange -10,10%yrange -10,10%roundrects blue,5,0,0,4,-4,5,4,1,2
		3980	*/
11806	schaersvoo	3981
18552	bpr	3982	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		3983	int_data[0] = (int) (get_real(infile,0)); /* radius value in pixels */
18623	bpr	3984	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	3985	i=0;
		3986	while( ! done ){ /* get next item until EOL*/
		3987	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		3988	if(i%2 == 0 ){
		3989	double_data[i] = get_real(infile,0); /* x */
		3990	}
		3991	else {
		3992	double_data[i] = get_real(infile,1); /* y */
		3993	}
		3994	i++;
		3995	}
		3996	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		3997	if(use_affine == TRUE ){ transform(i-1,2);}
		3998	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		3999	decimals = find_number_of_digits(precision);
		4000	for(c = 0 ; c < i-1 ; c = c+4){
		4001	/* ensure no inverted roundrect is produced... */
		4002	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];}
		4003	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	4004	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	4005	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	4006	add_to_buffer(tmp_buffer);
		4007	if(onclick != 0){object_cnt++;}
		4008	/* object_cnt++; */
		4009	}
		4010	dragstuff[6] = 1;
		4011	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4012	reset();
		4013	break;
		4014	case RULER:
		4015	/*
		4016	@ ruler x,y,x-width,y-height,mode
		4017	@ x,y are the initial location
		4018	@ x-width, y-height are the ruler dimensions width & height in xy-coordinate system
		4019	@ 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
		4020	@ 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
		4021	@ if combined with a protractor, use replyformat = 32
		4022	@ only one ruler allowed (for the time being)
		4023	@ 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...
		4024	@ 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...
		4025	@%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
		4026	@%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
		4027	@%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
		4028	*/
		4029	for( i = 0;i < 5; i++ ){
		4030	switch(i){
		4031	case 0: double_data[0] = get_real(infile,0);break; /* x-center */
		4032	case 1: double_data[1] = get_real(infile,0);break; /* y-center */
		4033	case 2: double_data[2] = get_real(infile,0);break; /* x-width */
		4034	case 3: double_data[3] = get_real(infile,0);break; /* y-width */
		4035	case 4: int_data[0] = (int)(get_real(infile,1)); /* passive mode */
		4036	decimals = find_number_of_digits(precision);
		4037	if( int_data[0] < 0 ){
		4038	js_function[JS_FIND_ANGLE] = 1;
		4039	}
18557	bpr	4040	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);
		4041	tmp_buffer=my_newmem(MAX_BUFFER);
		4042	check_string_length(snprintf(tmp_buffer,MAX_BUFFER, ";ruler%d(); ",canvas_root_id));
18552	bpr	4043	add_to_buffer(tmp_buffer);
		4044	reply_precision = precision;
		4045	/* no reply from ruler if non-interactive */
		4046	if( reply_format == 0 && int_data[0] == -1 ){reply_format = 31;}
		4047	break;
		4048	default: break;
		4049	}
		4050	}
		4051	break;
		4052	case RESET:
		4053	/*
		4054	@ reset
		4055	@ keyword
		4056	@ disables the effects of the <a href="noreset">noreset</a> command
		4057	@ so the next objects will not be <a href="#filled">filled</a> and <a href="#dashed">dashed</a>
		4058	*/
		4059	no_reset = FALSE; reset();
		4060	break;
		4061	case RESETOFFSET:
		4062	/*
18556	bpr	4063	@ resetoffset
		4064	@ keyword ; use to restore text placement on the canvas to the real (x;y) coordinates of the left bottom corner of the text
		4065	@ 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	4066	*/
		4067	use_offset = 0;
		4068	break;
		4069	case ROTATE:
		4070	/*
18556	bpr	4071	@ rotate rotation_angle
		4072	@ angle in degrees
		4073	@ (only) the next object will be rotated is given angle
		4074	@ positive values rotate counter clockwise
		4075	@ 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)
		4076	@ 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>
		4077	@ 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
		4078	@%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	4079	*/
		4080	use_rotate = TRUE;
		4081	angle = -1(get_real(infile,1));/ -1: to be compatible with Flydraw... */
		4082	break;
		4083	case ROTATION_CENTER:
		4084	/*
		4085	@ rotationcenter x_center,y_center
		4086	@ define an rotation center in your x/y-coordinate system
		4087	@ wims will not check the validity of your input; use javascript console to debug any erors
		4088	@ if not defined a rotation will be around the first point of an object
		4089	@ to be used before command <a href="#rotate">rotate</a>
18572	bpr	4090	@ 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	4091	@ all other commands will use this rotation center, unless a <a href="#killrotation">killrotation</a> is given
		4092	@%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
		4093	@%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
		4094	*/
		4095	for( i = 0;i < 2; i++ ){
		4096	switch(i){
		4097	case 0: rotationcenter[0] = get_real(infile,0);break; /* x-center */
		4098	case 1: rotationcenter[1] = get_real(infile,1);break; /* y-center */
		4099	}
		4100	string_length = 1 + snprintf(NULL,0,"[%f,%f ]",rotationcenter[0],rotationcenter[1]);
18557	bpr	4101
18552	bpr	4102	rotation_center = my_newmem(string_length);
		4103	snprintf(rotation_center,string_length,"[%f,%f]",rotationcenter[0],rotationcenter[1]);
		4104	}
		4105	break;
		4106	case SIZE:
		4107	/*
18556	bpr	4108	@ size width,height
		4109	@ set canvas size in pixels
		4110	@ mandatory first command (can only be preceded by keyword <a href="#popup">popup</a>)
		4111	@ 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	4112	*/
		4113	found_size_command = 1;
		4114	/* using fabs: however "xsize == int": so "xsize = abs( (int) get_real(infile,0))" would be the idea... */
		4115	xsize = (int)(fabs(round(get_real(infile,0)))); /* just to be sure that sizes > 0 */
		4116	ysize = (int)(fabs(round(get_real(infile,1))));
		4117	/* sometimes we want xrange / yrange to be in pixels...without telling x/y-range */
		4118	xmin = 0;xmax = xsize;
		4119	ymin = 0;ymax = ysize;
11806	schaersvoo	4120
		4121	/*
		4122	The sequence in which stuff is finally printed is important !!
		4123	*/
18552	bpr	4124	fprintf(stdout,"\n\
		4125	<script>\n\
		4126	/<![CDATA[/\n\
		4127	if( typeof(wims_status) === 'undefined' ){ var wims_status = \"$status\";};\
		4128	if( typeof(use_dragdrop_reply) === 'undefined' ){ var use_dragdrop_reply = false;};\
		4129	if( typeof(canvas_scripts) === 'undefined' ){ var canvas_scripts = new Array();};\
		4130	canvas_scripts.push(\"%d\");\n/]]>/\n</script>\n\
		4131	",canvas_root_id);
11806	schaersvoo	4132
18552	bpr	4133	/* style=\"display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\" */
		4134	if( use_tooltip != 2){
		4135	fprintf(stdout,"<!-- canvasdraw div -->\n\
		4136	<div tabindex=\"0\" id=\"canvas_div%d\" style=\"max-width:%dpx;width:%dpx;height:%dpx\" class=\"canvas_wrapper\" oncontextmenu=\"return false;\">\
		4137	<canvas class=\"canvas_placeholder\" width=\"%d\" height=\"%d\"></canvas>\
		4138	</div>\n\
		4139	<!-- tooltip and input placeholder -->\n\
		4140	<div id=\"tooltip_placeholder_div%d\" style=\"text-align:center\">\
		4141	<span id=\"tooltip_placeholder%d\" class=\"tooltip_placeholder\"></span></div>\
		4142	<!-- include actual object code via include file -->\n\
		4143	<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);
		4144	} else {
11806	schaersvoo	4145	/*
14066	bpr	4146	set canvas_div invisible and do not include placeholder in main html page:
15111	schaersvoo	4147	the js-include will also be in a popup window...to be shown when wims $status = done
11806	schaersvoo	4148	*/
18552	bpr	4149	fprintf(stdout,"<!-- canvasdraw div invisible -->\n\
		4150	<div tabindex=\"0\" id=\"canvas_div%d\" class=\"canvas_wrapper\" style=\"display:none;max-width:%dpx;width:%dpx;height:%dpx;\">\
		4151	<canvas class=\"canvas_placeholder\" width=\"%d\" height=\"%d\"></canvas>\
		4152	</div>\n\
		4153	<div id=\"tooltip_placeholder_div%d\" style=\"display:none;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\">\
		4154	<span id=\"tooltip_placeholder%d\" class=\"tooltip_placeholder\"></span></div>\
		4155	<!-- include actual object code via include file -->\n\
		4156	<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);
		4157	}
11806	schaersvoo	4158
14071	bpr	4159	/* these must be global...it is all really very poor javascript:( */
15734	schaersvoo	4160	fprintf(js_include_file,"\n/* begin generated javascript include for canvasdraw version %s */\n\
11806	schaersvoo	4161	\"use strict\";\n\
15111	schaersvoo	4162	/* these variables and functions must be global */\
11806	schaersvoo	4163	var read_dragdrop%d;\
14038	schaersvoo	4164	var read_canvas_images;\
11806	schaersvoo	4165	var read_canvas%d;\
		4166	var set_clock;\
		4167	var clear_draw_area%d;\
		4168	var update_draw_area%d;\
14038	schaersvoo	4169	var place_image_on_canvas;\
11806	schaersvoo	4170	var draw_boxplot;\
		4171	var redraw_all%d;\
15111	schaersvoo	4172	var userdraw_primitive;\
		4173	var wims_canvas_function%d = function(){\n/* common used stuff */\
		4174	var userdraw_x = [];var userdraw_y = [];var userdraw_radius = [];\
11806	schaersvoo	4175	var xsize = %d;\
		4176	var ysize = %d;\
		4177	var precision = 100;\
		4178	var canvas_div = document.getElementById(\"canvas_div%d\");\
		4179	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;};\
		4180	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	4181	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	4182	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);};};\
		4183	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	4184	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	4185	function scale_x_radius(rx){return rx*xsize/(xmax - xmin);};\
		4186	function scale_y_radius(ry){return ry*ysize/(ymax - ymin);};\
		4187	function distance(x1,y1,x2,y2){return Math.sqrt( (x1-x2)(x1-x2) + (y1-y2)(y1-y2) );};\
		4188	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) ));};\
		4189	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	4190	var snap_x = 1;var snap_y = 1;\
11806	schaersvoo	4191	function snap_to_x(x){return x2px(snap_x*(Math.round((px2x(x))/snap_x)));};\
11890	schaersvoo	4192	function snap_to_y(y){return y2px(snap_y*(Math.round((px2y(y))/snap_y)));};\
15111	schaersvoo	4193	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	4194	var xlogbase = 10;\
		4195	var ylogbase = 10;\
		4196	var use_xlogscale = 0;\
		4197	var use_ylogscale = 0;\
11891	schaersvoo	4198	var x_strings = {};var x_strings_up = [];\
11806	schaersvoo	4199	var y_strings = null;\
		4200	var use_jsmath = 0;\
		4201	var xstart = 0;\
		4202	var ystart = 0;\
		4203	var unit_x=\" \";\
		4204	var unit_y=\" \";\
15111	schaersvoo	4205	var dragdrop_reply = [];\
15734	schaersvoo	4206	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	4207	/* var xstart,ystart are normally 0 : in case of sgraph they have the 'jump' in the graph */
18552	bpr	4208	break;
		4209	case SEGMENT:
		4210	/*
		4211	@ segment x1,y1,x2,y2,color
		4212	@ alternative: seg
		4213	@ draw a line segment between points (x1:y1)--(x2:y2) in color ''color``
		4214	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		4215	@%segment_onclick%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%segment 1,1,-9,3,green
		4216	@%segment_drag_y%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag y%segment 1,1,-9,3,green
		4217	*/
		4218	for(i=0;i<5;i++) {
		4219	switch(i){
		4220	case 0: double_data[0]= get_real(infile,0);break; /* x1-values */
		4221	case 1: double_data[1]= get_real(infile,0);break; /* y1-values */
		4222	case 2: double_data[2]= get_real(infile,0);break; /* x2-values */
		4223	case 3: double_data[3]= get_real(infile,0);break; /* y2-values */
		4224	case 4: stroke_color=get_color(infile,1);/* name or hex color */
		4225	if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}
		4226	if(use_affine == TRUE ){ transform(4,2);}
		4227	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4228	decimals = find_number_of_digits(precision);
18557	bpr	4229	tmp_buffer=my_newmem(MAX_BUFFER);
		4230	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	4231	add_to_buffer(tmp_buffer);
		4232	if(onclick != 0){object_cnt++;}
		4233	/* object_cnt++; */
		4234	reset();
		4235	break;
		4236	default: break;
		4237	}
		4238	}
		4239	dragstuff[4] = 1;
		4240	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4241	break;
		4242	case SEGMENTS:
		4243	/*
		4244	@ segments color,x1,y1,x2,y2,...,x_n,y_n
		4245	@ alternative: segs
		4246	@ draw multiple segments between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color ''color``
		4247	@ use command ''linewidth int`` to adjust size
		4248	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		4249	@%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
		4250	@%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
		4251	*/
		4252	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		4253	fill_color = stroke_color;
		4254	i=0;
		4255	while( ! done ){ /* get next item until EOL*/
		4256	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		4257	if(i%2 == 0 ){
		4258	double_data[i] = get_real(infile,0); /* x */
		4259	}
		4260	else {
		4261	double_data[i] = get_real(infile,1); /* y */
		4262	}
		4263	i++;
		4264	}
		4265	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		4266	if(use_affine == TRUE ){ transform(i-1,2);}
		4267	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4268	decimals = find_number_of_digits(precision);
		4269	for(c = 0 ; c < i-1 ; c = c+4){
18557	bpr	4270	tmp_buffer=my_newmem(MAX_BUFFER);
		4271	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	4272	add_to_buffer(tmp_buffer);
		4273	if(onclick != 0){object_cnt++;}
		4274	/* object_cnt++;*/
		4275	}
		4276	reset();
		4277	dragstuff[4] = 1;
		4278	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4279	break;
		4280	case SETLIMITS:
		4281	/*
18556	bpr	4282	@ setlimits
		4283	@ keyword: if set, it will produce 4 inputfields for ''xmin,xmax,ymin,ymax`` and an ''ok`` button
		4284	@ may be used for inputfield based zooming / panning
		4285	@ may be styled using command <a href="#css">css</a>
		4286	@ use commands <a href="#xlabel">xlabel / ylabel</a> to change text from xmin to ''xlabel`` etc
		4287	@ note: the input value will not be checked on validity
		4288	@%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	4289	*/
		4290	js_function[JS_SAFE_EVAL] = 1;
		4291	js_function[JSPLOT_AND_ZOOM] = 1;
		4292	add_setlimits(font_size,css_class);
		4293	done = TRUE;
		4294	break;
		4295	case SETPIXEL:
		4296	/*
		4297	@ setpixel x,y,color
		4298	@ A rectangular "point" with diameter 1 pixel centered at (x:y) in xrange / yrange
		4299	@ pixels can <b>not</b> be dragged or clicked
		4300	@ "pixelsize = 1" may be changed by command <code>pixelsize int</code>
		4301	@%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%
		4302	*/
		4303	js_function[DRAW_PIXELS] = 1;
		4304	for(i=0;i<3;i++){
		4305	switch(i){
		4306	case 0: double_data[0] = get_real(infile,0); break; /* x */
		4307	case 1: double_data[1] = get_real(infile,0); break; /* y */
		4308	case 2: stroke_color = get_color(infile,1);
18557	bpr	4309	tmp_buffer=my_newmem(MAX_BUFFER);
		4310	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	4311	add_to_buffer(tmp_buffer);
		4312	break;
		4313	default:break;
		4314	}
		4315	}
		4316	reset();
		4317	break;
		4318	case SLIDER:
		4319	/*
		4320	@ slider start_value,end_value,width px,height px,type,label
		4321	@ type may be: ''x,y,angle``
		4322	@ if a slider value display is desired, use for argument ''type``: ''x display``, ''y display``, ''angle radian``, ''angle degree``
		4323	@ is the slider is used for animation, add keyword ''anim`` or ''animate`` to ''type``; for now only one animated slider may be used...
		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
18655	schaersvoo	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 degrees,Rotate arrow%arrow 0,0,4.5,0,8,red%killslider%opacity 200,100%slider -2,2,300,30,x ,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%%size 300,300%xrange -6,6%yrange -6,6%grid 1,1,grey%linewidth 1%slider 0,2*pi,300,28,angle degree, 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
		4342	@%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 , 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_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 degree,%centered%html 0,0,<img src="gifs/domains/sciences/flasks.svg" width="100px" height="100px">
18552	bpr	4344	*/
		4345	js_function[INTERACTIVE] = 1;
		4346	int_data[2] = 0; /* --> show_display = 0; */
		4347	for(i=0; i<6 ; i++){
		4348	switch(i){
		4349	case 0: double_data[0] = get_real(infile,0);break; /* start value */
		4350	case 1: double_data[1] = get_real(infile,0);break; /* end value */
		4351	case 2: int_data[0] = (int)(get_real(infile,0));break; /* width */
		4352	case 3: int_data[1] = (int)(get_real(infile,0));break; /* height */
		4353	case 4: temp = get_string_argument(infile,0); /* type: x,y,angle */
		4354	if( strstr(temp,"displ")!=0 \|\| strstr(temp,"deg")!=0 \|\| strstr(temp,"rad")!=0 ){int_data[5] = 1; }else{int_data[5] = 0;}
		4355	if(strstr(temp,"anim")!= 0){int_data[3] = 1;}else{int_data[3] = 0;}
		4356	if(strstr(temp,"active")!= 0){onclick = 4;}else{onclick=0;}
		4357	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;}}
		4358	else
		4359	if(strstr(temp,"xy") != 0){slider_type = "XY";if( strstr(temp,"disp")!= 0){int_data[2] = 5;}}
		4360	else
		4361	if(strstr(temp,"x") != 0){slider_type = "X";if( strstr(temp,"disp")!= 0){int_data[2] = 1;}}
		4362	else
		4363	if(strstr(temp,"y") != 0){slider_type = "Y";if( strstr(temp,"disp")!= 0){int_data[2] = 2;}}
		4364	else
		4365	canvas_error("slider can be of type: x,y,angle,fun_x:fun_y");
		4366	break;
		4367	case 5: temp = get_string_argument(infile,1); if( strstr(temp,"\"") != 0 ){ temp = str_replace(temp,"\""," ");}
		4368	/* slider label : in case of latex/mathmlmath we need to remove the extra " */
		4369	break;
		4370	}
		4371	}
		4372	if(use_slider == -1 ){ /* add once */
		4373	add_slider(int_data[3]);
		4374	if(int_data[5] == 1 ){add_slider_display(precision,font_size,font_color,stroke_opacity);}
		4375	}
		4376	use_slider++;
		4377	if(int_data[3] == 0){\
18557	bpr	4378
		4379	tmp_buffer=my_newmem(MAX_BUFFER);
18570	bpr	4380	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	4381	}else{
18557	bpr	4382
18552	bpr	4383	add_slider(int_data[3]);/* use only once !! */
18557	bpr	4384	tmp_buffer=my_newmem(MAX_BUFFER);
18570	bpr	4385	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	4386	}
		4387	add_to_buffer(tmp_buffer);
		4388	fprintf(js_include_file,"var slider%d;",use_slider);
		4389	use_dragstuff = 2;
		4390	// dragstuff[22] = 1; /* dragstuff switch no 22 is a slider...*/
		4391	if(onclick != 4 ){ js_function[INTERACTIVE] = 1; }/* no need to click on object to use slider... */
		4392	//js_function[JS_ROTATE_MOUSE] = 1;
		4393	c = 0;
		4394	for(i=last_slider;i<=use_slider;i++){
		4395	int_data[c] = i; c++;
		4396	}
		4397	my_sliders = data2js_array(int_data,use_slider - last_slider+1);
		4398	break;
		4399	case SGRAPH:
		4400	/*
18556	bpr	4401	@ sgraph xstart,ystart,xmajor,ymajor,xminor,yminor,majorgrid_color,minorgrid_color
		4402	@ primitive implementation of a ''broken scale`` graph...
		4403	@ 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>
		4404	@%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	4405	*/
		4406	js_function[DRAW_SGRAPH] = 1;
		4407	for(i = 0 ; i < 8 ;i++){
		4408	switch(i){
		4409	case 0:double_data[0] = get_real(infile,0);break;
		4410	case 1:double_data[1] = get_real(infile,0);break;
		4411	case 2:double_data[2] = get_real(infile,0);break;
		4412	case 3:double_data[3] = get_real(infile,0);break;
		4413	case 4:int_data[0] = (int)(get_real(infile,0));break;
		4414	case 5:int_data[1] = (int)(get_real(infile,0));break;
		4415	case 6:stroke_color = get_color(infile,0);break;
		4416	case 7:font_color = get_color(infile,1);
18557	bpr	4417	tmp_buffer=my_newmem(MAX_BUFFER);
		4418	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	4419	add_to_buffer(tmp_buffer);
		4420	break;
		4421	default:break;
		4422	}
		4423	}
		4424	/* sgraph(canvas_type,precision,xmajor,ymajor,xminor,yminor,majorcolor,minorcolor,fontfamily,opacity)*/
		4425	break;
		4426	case SNAPTOFUNCTION:
		4427	/*
		4428	@ snaptofunction some_function_in_x,some_funtion_in_y
		4429	@ alternative: snaptofun
		4430	@ the next object will snap to the calculated values
		4431	@ note: snaptofun is probably not really useful feature...
		4432	@ if you want only modification of y-values,just use: <code>snaptofunction x,5*sin(1/y)</code>
		4433	@ if you want only modification of x-values,just use: <code>snaptofunction 5*sin(1/x),y</code>
		4434	@ for now only one instance of ''snaptofunction`` is allowed
		4435	@ use rawmath on your functions: no validity checking is done by wims !
		4436	@ note: switching x and y coordinates? <code>snaptofunction y,x</code>
		4437	@%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
		4438	@%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
		4439	*/
		4440	temp = get_string_argument(infile,0);
		4441	use_snap = 2;
		4442	use_snap = 5;
		4443	js_function[JS_MATH] = 1;
		4444	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));
		4445	break;
		4446	case SNAPTOPOINTS:
		4447	/*
		4448	@ snaptopoints x1,y1,x2,y2,x3,y3....
		4449	@ a userdraw object will snap to these points.
18572	bpr	4450	@ 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	4451	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the closed of these points when dragged (mouseup)
		4452	@ other options: use keyword ''snaptogrid``, ''xsnaptogrid`` or ''ysnaptogrid``
18616	bpr	4453	@%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
		4454	@%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	4455	*/
		4456	i = 0;
		4457	while( ! done ){ /* get next item until EOL*/
		4458	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		4459	if(i%2 == 0 ){
		4460	double_data[i] = get_real(infile,0); /* x */
		4461	}
		4462	else {
		4463	double_data[i] = get_real(infile,1); /* y */
		4464	}
		4465	i++;
		4466	}
		4467	decimals = find_number_of_digits(precision);
		4468	/* NEED AN EXTRA COUNTER VARIABLE FOR MORE THAN 2 CALLS */
		4469	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));
		4470	if( snap_to_points_cnt == 0 ){
		4471	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)];};");
		4472	}else{
		4473	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]);");
		4474	}
		4475	snap_to_points_cnt = 1; /* do not repeat including the js-functions...just once*/
		4476	use_snap = 4;
		4477	break;
		4478	case SNAPTOGRID:
		4479	/*
18556	bpr	4480	@ snaptogrid
		4481	@ keyword (no arguments required)
		4482	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the given grid when dragged (mouseup)
		4483	@ in case of userdraw the drawn points will snap to xmajor / ymajor grid
		4484	@ if no grid is defined, points will snap to every integer xrange/yrange value. (eg snap_x=1,snap_y=1)
		4485	@ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0.
		4486	@ 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 ...
		4487	@%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
		4488	@%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	4489	*/
		4490	use_snap = 1;
		4491	break;
		4492	case SQUARE:
		4493	/*
		4494	@ square x,y,side (px),color
		4495	@ draw a square with left top corner (x:y) with side ''side`` in color 'color'
		4496	@ use command <code>fsquare x,y,side,color</code> for a filled square
		4497	@ use command/keyword <a href='#filled'>filled</a> before command <code>square x,y,side,color</code>
		4498	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		4499	@%square%size 400,400%xrange -10,10%yrange -10,10%linewidth 3%filled%fillcolor blue%square 0,0,120,green
		4500	*/
		4501	for(i=0;i<4;i++){
		4502	switch(i){
		4503	case 0:double_data[0] = get_real(infile,0);break; /* x1-values */
		4504	case 1:double_data[1] = get_real(infile,0);break; /* y1-values */
		4505	case 2:double_data[2] = get_real(infile,0);break; /* width in px */
		4506	case 3:stroke_color = get_color(infile,1);/* name or hex color */
		4507	decimals = find_number_of_digits(precision);
		4508	double_data[3] = double_data[0] + (xmax - xmin)*double_data[2]/xsize;
		4509	double_data[4] = double_data[1] + -1(ymax - ymin)double_data[2]/ysize;
		4510	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4511	tmp_buffer=my_newmem(MAX_BUFFER);
		4512	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	4513	add_to_buffer(tmp_buffer);
		4514	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		4515	reset();break;
		4516	default: break;
		4517	}
		4518	}
		4519	dragstuff[1] = 1;
		4520	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4521	break;
		4522	case STATUS:
		4523	/*
		4524	@ status
		4525	@ keyword
		4526	@ alernative: nostatus
		4527	@ used to override the effects of ''status=done`` in wims (answer.phtml)
		4528	@ affects ''readonly`` in inputfields / textareas in canvasimage and all userdraw based commands
		4529	@ 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``
		4530	*/
11806	schaersvoo	4531
18552	bpr	4532	fprintf(js_include_file,"\nwims_status=\"waiting\";\n");
		4533	break;
		4534	case STRING:
		4535	/*
18556	bpr	4536	@ string color,x,y,the text string
		4537	@ may be set ''onclick`` or ''drag xy``
		4538	@ 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	4539	@ 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	4540	@ use a command like <code>fontfamily italic 24px Arial</code> to set fonts on browser that support font change
		4541	@ 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:
		4542	@%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%
		4543	@%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	4544	*/
		4545	if( use_rotate == TRUE ){js_function[JS_ROTATE_MOUSE] = 1; }
		4546	dragstuff[14] = 1;
		4547	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4548	for(i=0;i<5;i++){
		4549	switch(i){
		4550	case 0: stroke_color = get_color(infile,0);break;/* name or hex color */
		4551	case 1: double_data[0] = get_real(infile,0);break; /* x in xrange*/
		4552	case 2: double_data[1] = get_real(infile,0);break; /* y in yrange*/
		4553	case 3: decimals = find_number_of_digits(precision);
		4554	if(use_affine == TRUE ){ transform(2,2);}
		4555	/* rotate is done by HTML5/CANVAS context rotation */
		4556	temp = get_string_argument(infile,1);
		4557	if(strstr(temp,"_") != NULL \|\| strstr(temp,"^") != NULL){js_function[DRAW_SUBSUP] = 1;}
		4558	decimals = find_number_of_digits(precision);
		4559	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4560	tmp_buffer=my_newmem(MAX_BUFFER);
		4561	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	4562	add_to_buffer(tmp_buffer);
		4563	if(onclick != 0){object_cnt++;}
		4564	//onclick = 0;
		4565	//use_offset = 0;
		4566	reset();
		4567	break;
		4568	default:break;
		4569	}
		4570	}
		4571	break;
		4572	case STRINGUP:
		4573	/*
18556	bpr	4574	@ stringup color,x,y,rotation_degrees,the text string
		4575	@ may be set ''onclick`` or ''drag xy``
		4576	@ 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
		4577	@ unicode supported: <code>stringup red,0,0,45,\\u2232</code>
		4578	@ use a command like <code>fontfamily bold 34px Courier</code> to set fonts on browser that support font change
		4579	@ 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	4580	@ 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	4581	@ super / sub script is supported, using '<b>_</b>' and '<b>^</b>' <br>to end the subscript/supscript, use an extra space...see example:
		4582	@%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%
		4583	@%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	4584
18552	bpr	4585	*/
		4586	/* html5 canvas rotation is only used for text objects */
		4587	use_rotate = TRUE ;
		4588	dragstuff[14] = 1;
		4589	js_function[JS_ROTATE_MOUSE] = 1;
		4590	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
10953	bpr	4591
18552	bpr	4592	for(i=0;i<6;i++){
		4593	switch(i){
		4594	case 0: stroke_color = get_color(infile,0);break;/* name or hex color */
		4595	case 1: double_data[0] = get_real(infile,0);break; /* x */
		4596	case 2: double_data[1] = get_real(infile,0);break; /* y */
		4597	case 3: angle = get_real(infile,0);break;/* rotation */
		4598	case 4: decimals = find_number_of_digits(precision);
		4599	temp = get_string_argument(infile,1);
		4600	if(strstr(temp,"_") != NULL \|\| strstr(temp,"^") != NULL){js_function[DRAW_SUBSUP] = 1;}
		4601	decimals = find_number_of_digits(precision);
		4602	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4603	tmp_buffer=my_newmem(MAX_BUFFER);
		4604	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	4605	add_to_buffer(tmp_buffer);
		4606	if(onclick != 0){object_cnt++;}
		4607	//onclick = 0;
		4608	//use_offset = 0;
		4609	reset();
		4610	break;
		4611	default:break;
		4612	}
		4613	}
		4614	use_rotate = FALSE;
		4615	break;
		4616	case STYLE:
		4617	/*
18556	bpr	4618	@ highlight color,opacity,linewidth
		4619	@ NOT IMPLEMENTED
		4620	@ use command ''onclick``: when the object receives a userclick it will increase its linewidth
18552	bpr	4621	*/
		4622	break;
		4623	case STROKECOLOR:
		4624	/*
		4625	@ strokecolor colorname or #hex
		4626	@ to be used for commands that do not supply a color argument (like command ''linegraph``)
		4627	*/
		4628	stroke_color = get_color(infile,1);
		4629	break;
		4630	case FLY_TEXT:
		4631	/*
		4632	@ text fontcolor,x,y,font,text_string
		4633	@ font may be described by keywords: giant,huge,normal,small,tiny
		4634	@ use command ''fontsize`` to increase base fontsize for these keywords
		4635	@ may be set ''onclick`` or ''drag xy``
		4636	@ backwards compatible with flydraw
		4637	@ unicode supported: text red,0,0,huge,\\u2232
		4638	@ special: use '_' and '^' to imitate html sup/sub, like H_3O^+ + OH^\\u22i2 \\u2192 2H_2 O
		4639	@ 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
		4640	@ 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
		4641	@ 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.
		4642	@%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
		4643	*/
		4644	for(i = 0; i < 5 ;i++){
		4645	switch(i){
		4646	case 0: stroke_color = get_color(infile,0);break;/* font_color == stroke_color name or hex color */
		4647	case 1: double_data[0] = get_real(infile,0);break; /* x */
		4648	case 2: double_data[1] = get_real(infile,0);break; /* y */
		4649	case 3: fly_font = get_string_argument(infile,0);
		4650	if(strcmp(fly_font,"giant") == 0){
		4651	fly_font_size = (int)(font_size + 24);
		4652	}
		4653	else {
		4654	if(strcmp(fly_font,"huge") == 0){
		4655	fly_font_size = (int)(font_size + 14);
		4656	}
		4657	else {
		4658	if(strcmp(fly_font,"large") == 0){
		4659	fly_font_size = (int)(font_size + 6);
		4660	}
		4661	else {
		4662	if(strcmp(fly_font,"small") == 0){
		4663	fly_font_size = (int)(font_size - 4);
		4664	if(fly_font_size<0){fly_font_size = 8;}
		4665	}
		4666	}
		4667	}
		4668	}
		4669	break;
		4670	case 4:
		4671	temp = get_string_argument(infile,1);
		4672	if(strstr(temp,"_") != NULL \|\| strstr(temp,"^") != NULL){js_function[DRAW_SUBSUP] = 1;}
		4673	decimals = find_number_of_digits(precision);
		4674	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4675	if(use_affine == TRUE ){ transform(2,2);}
18557	bpr	4676	tmp_buffer=my_newmem(MAX_BUFFER);
		4677	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	4678	add_to_buffer(tmp_buffer);
		4679	if(onclick != 0){object_cnt++;}
		4680	reset();
		4681	break;
		4682	default:break;
		4683	}
		4684	}
		4685	dragstuff[14] = 1;
		4686	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4687	break;
		4688	case TEXTAREA:
		4689	/*
18556	bpr	4690	@ textarea x,y,cols,rows,readonly,value
		4691	@ may be further controlled by <a href="#css">css</a>
		4692	@ 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>.
		4693	@ 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>)
		4694	@ keyword ''xoffset \| centered`` is not active for command ''textarea``
		4695	@%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	4696	*/
		4697	js_function[DRAW_TEXTAREAS] = 1;
		4698	for(i = 0 ; i<6;i++){
		4699	switch(i){
		4700	case 0: int_data[0]=x2px(get_real(infile,0));break; /* x in px */
		4701	case 1: int_data[1]=y2px(get_real(infile,0));break; /* y in px */
		4702	case 2: int_data[2]=abs( (int)(get_real(infile,0)));break;/* cols */
		4703	case 3: int_data[3]=abs( (int)(get_real(infile,0)));break;/* rows */
		4704	case 4: if( get_real(infile,1) >0){int_data[4] = 1;}else{int_data[3] = 0;};break; /* readonly */
		4705	case 5: temp = get_string_argument(infile,1);
18557	bpr	4706	tmp_buffer=my_newmem(MAX_BUFFER);
		4707	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	4708	add_to_buffer(tmp_buffer);
		4709	input_cnt++;break;
		4710	default: break;
		4711	}
		4712	}
		4713	if(reply_format == 0 ){reply_format = 15;}
		4714	reset();
		4715	break;
		4716	case TEXTFILL:
		4717	/*
		4718	@ textfill x0,y0,color,some_text
		4719	@ x0,y0 in xrange / yrange
		4720	@ color will be used for the font color
		4721	@ use command <a href="#fontfamily">fontfamily</a> to set font type and size
		4722	@ there is also a command <a href="#userdraw">userdraw textfill,color,some_text</a>
		4723	@%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
		4724	*/
11806	schaersvoo	4725
18552	bpr	4726	js_function[DRAW_TEXTFILL] = 1;
		4727	if(js_function[DRAW_FILLTOBORDER] != 1 ){/* use only once */
		4728	js_function[DRAW_FILLTOBORDER] = 1;
		4729	add_js_filltoborder(canvas_type);
		4730	}
		4731	decimals = find_number_of_digits(precision);
		4732	for(i=0;i<4;i++){
		4733	switch(i){
		4734	case 0: double_data[0] = get_real(infile,0); break; /* x in px */
		4735	case 1: double_data[1] = get_real(infile,0); break; /* y in py */
		4736	case 2: font_color = get_color(infile,0); break;
		4737	case 3: temp = get_string(infile,1);
18557	bpr	4738	tmp_buffer=my_newmem(MAX_BUFFER);
		4739	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	4740	add_to_buffer(tmp_buffer);
		4741	fill_cnt++;
		4742	break;
		4743	default:break;
		4744	}
		4745	}
		4746	reset();
		4747	break;
		4748	case FLY_TEXTUP:
		4749	/*
18556	bpr	4750	@ textup fontcolor,x,y,font,text_string
		4751	@ can <b>not</b> be set ''onclick`` or ''drag xy`` (because of translaton matrix...mouse incompatible)
		4752	@ font may be described by keywords: giant,huge,normal,small,tiny
		4753	@ use command ''fontsize`` to increase base fontsize for the keywords
		4754	@ backwards compatible with flydraw
		4755	@ unicode supported: textup red,0,0,huge,\\u2232
		4756	@ use command ''stringup`` and ''fontfamily`` for a more fine grained control over html5 canvas text element
		4757	@ 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	4758	*/
		4759	js_function[DRAW_TEXTS] = 1;
		4760	for(i = 0; i<5 ;i++){
		4761	switch(i){
		4762	case 0: font_color = get_color(infile,0);break;/* name or hex color */
		4763	case 1: int_data[0] = x2px(get_real(infile,0));break; /* x */
		4764	case 2: int_data[1] = y2px(get_real(infile,0));break; /* y */
		4765	case 3: fly_font = get_string_argument(infile,0);
		4766	if(strcmp(fly_font,"giant") == 0){
		4767	fly_font_size = (int)(font_size + 24);
		4768	}
		4769	else {
		4770	if(strcmp(fly_font,"huge") == 0){
		4771	fly_font_size = (int)(font_size + 14);
		4772	}
		4773	else {
		4774	if(strcmp(fly_font,"large") == 0){
		4775	fly_font_size = (int)(font_size + 6);
		4776	}
		4777	else {
		4778	if(strcmp(fly_font,"small") == 0){
		4779	fly_font_size = (int)(font_size - 4);
		4780	if(fly_font_size<0){fly_font_size = 8;}
		4781	}
		4782	}
		4783	}
		4784	}
		4785	break;
		4786	case 4:
		4787	decimals = find_number_of_digits(precision);
		4788	temp = get_string_argument(infile,1);
		4789	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4790	tmp_buffer=my_newmem(MAX_BUFFER);
		4791	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	4792	add_to_buffer(tmp_buffer);
		4793	reset();
		4794	//use_offset = 0;
		4795	break;
		4796	default:break;
		4797	}
		4798	}
		4799	break;
		4800	case TRACE_JSCURVE:
		4801	/*
18556	bpr	4802	@ trace_jscurve some_math_function
		4803	@ will use a crosshair to trace the jsmath curve
		4804	@ two inputfields will display the current x/y-values (numerical evaluation by javascript)
		4805	@ 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
		4806	@ use commands fontsize and css to format the fonts for labels and inputfields.
		4807	@ use commands ''linewidth, strokecolor, crosshairsize`` to adjust the corsshair.
		4808	@ 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...)
		4809	@ be aware that the formulas of the plotted function(s) can be found in the page javascript source
		4810	@%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	4811	*/
		4812	js_function[INTERACTIVE] = 1;
		4813	js_function[DRAW_CROSSHAIRS] = 1;
		4814	js_function[DRAW_LINES] = 1;
		4815	js_function[JS_MATH] = 1;
		4816	add_trace_js_mouse(TRACE_CANVAS,stroke_color,get_string(infile,1),font_size,stroke_opacity,line_width,crosshair_size,css_class);
		4817	break;
		4818	case TRANGE:
		4819	/*
		4820	@ trange tmin,tmax
		4821	@ alternative: ranget
		4822	@ default -2,2
		4823	*/
		4824	use_parametric = TRUE;
		4825	for(i = 0 ; i<2; i++){
		4826	switch(i){
		4827	case 0: tmin = get_real(infile,0);break;
		4828	case 1: tmax = get_real(infile,1);break;
		4829	default: break;
		4830	}
		4831	}
		4832	if(tmin >= tmax ){canvas_error(" trange is not OK: tmin < tmax!\n");}
		4833	break;
		4834	case TRANSLATION:
		4835	/*
18556	bpr	4836	@ translation tx,ty
		4837	@ alternative: translate
		4838	@ will translate the next objects tx in xrange and ty in yrange
		4839	@ use command ''killtranstation`` to end the command
18569	bpr	4840	@%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	4841	*/
		4842	for(i = 0 ; i<2;i++){
		4843	switch(i){
		4844	case 0: affine_matrix[4] = get_real(infile,0);break;
		4845	case 1: affine_matrix[5] = get_real(infile,1);
		4846	use_affine = TRUE;
		4847	/* the other values affine_matrix[0..3] remain untouched*/
		4848	break;
		4849	default: break;
		4850	}
		4851	}
		4852	break;
		4853	case TRIANGLE:
		4854	/*
18556	bpr	4855	@ triangle x1,y1,x2,y2,x3,y3,color
		4856	@ use ftriangle or keyword <a href='#filled'>filled</a> for a solid triangle
		4857	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		4858	@%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	4859	*/
		4860	for(i=0;i<7;i++){
		4861	switch(i){
		4862	case 0: double_data[0] = get_real(infile,0);break; /* x */
		4863	case 1: double_data[1] = get_real(infile,0);break; /* y */
		4864	case 2: double_data[2] = get_real(infile,0);break; /* x */
		4865	case 3: double_data[3] = get_real(infile,0);break; /* y */
		4866	case 4: double_data[4] = get_real(infile,0);break; /* x */
		4867	case 5: double_data[5] = get_real(infile,0);break; /* y */
		4868	case 6: stroke_color = get_color(infile,1);/* name or hex color */
		4869	decimals = find_number_of_digits(precision);
18623	bpr	4870	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	4871	if( use_rotate == TRUE ){ rotate(6,angle,rotationcenter,2);}
		4872	if( use_affine == TRUE ){ transform(6,2);}
		4873	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	4874	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	4875	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	4876	add_to_buffer(tmp_buffer);
		4877	if(onclick != 0){object_cnt++;}
		4878	/* object_cnt++;*/
		4879	reset();
		4880	break;
		4881	default: break;
		4882	}
		4883	}
		4884	dragstuff[5] = 1;
		4885	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4886	break;
		4887	case TRIANGLES:
		4888	/*
18556	bpr	4889	@ triangles color,x1,y1,x2,y2,x3,y3,...
		4890	@ use ftriangles or keyword <a href='#filled'>filled</a> for solid triangles
		4891	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		4892	@%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	4893	*/
		4894	stroke_color = get_color(infile,0);/* name or hex color */
18623	bpr	4895	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18552	bpr	4896	i = 0;
		4897	decimals = find_number_of_digits(precision);
		4898	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		4899	while( ! done ){
		4900	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		4901	double_data[0] = get_real(infile,0); /* x1 */
		4902	double_data[1] = get_real(infile,0); /* y1 */
		4903	double_data[2] = get_real(infile,0); /* x2 */
		4904	double_data[3] = get_real(infile,0); /* y2 */
		4905	double_data[4] = get_real(infile,0); /* x3 */
		4906	double_data[5] = get_real(infile,1); /* y3 */
18557	bpr	4907	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	4908	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	4909	add_to_buffer(tmp_buffer);
		4910	if(onclick != 0){object_cnt++;}
		4911	i = i + 6;
		4912	}
		4913	reset();
		4914	dragstuff[5] = 1;
		4915	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		4916	break;
		4917	case USERBOXPLOT:
		4918	/*
18556	bpr	4919	@ userboxplot
		4920	@ keyword, no arguments
		4921	@ use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a>
		4922	@ if set, the student will have to calculate "min,Q1,median,Q3,max" and feed these data into the ''draw_boxplot`` function
		4923	@ 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	4924	*/
		4925	js_function[DRAW_BOXPLOT] = 1;
		4926	fprintf(js_include_file,"var boxplot_source = 3;\n");
		4927	js_function[DRAW_JSBOXPLOT] = 2;
		4928	break;
		4929	case USERBOXPLOTDATA:
		4930	/*
18556	bpr	4931	@ userboxplotdata
		4932	@ keyword, no arguments
		4933	@ use before command <a href="#boxplot">boxplot x_or_y,box-height_or_box-width,x_or_y-position</a>
		4934	@ if set, the student will have to generate some statistical data. These data should be put in a named array ''student_boxplot_data``
		4935	@ ''min,Q1,median,Q3,max`` are calculated by a js-function and the 'draw_boxplot' function will draw a boxplot.
		4936	@ see command <a href="#userboxplot">userboxplot</a> for calling 'draw_boxplot()'
18552	bpr	4937	*/
		4938	js_function[DRAW_BOXPLOT] = 1;
		4939	fprintf(js_include_file,"var boxplot_source = 2;\n");
		4940	js_function[DRAW_JSBOXPLOT] = 1;
		4941	break;
		4942	case USERDRAW:
		4943	/*
		4944	@ userdraw object_type,color
		4945	@ only a single object_type is allowed.
		4946	@ right mouse click will remove last drawn object.
		4947	@ for multiple different 'userdraw' objects in an exercise, use command <a href="#multidraw">multidraw</a>
18572	bpr	4948	@ 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	4949	@ 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)
		4950	@ note: object_type text: Any string or multiple strings may be placed anywhere on the canvas.<br>Use command ''fontfamily`` to set font
		4951	@ note: object_type polygone: Will be finished (the object is closed) when clicked on the first point of the polygone again.
		4952	@ 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	4953	@ 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	4954	@ for non solid filling, use command <a href="#fillpattern">fillpattern grid,hatch,diamond,dot</a>
		4955	@ use <a href='#opacity'>opacity int,int</a> and <a href='#fillcolor'>fillcolor color</a> to trigger coloured filling of fillable objects
		4956	@ use command ''dashed`` and/or ''dashtype int,int`` to trigger dashing
		4957	@ use command ''replyformat int`` to control / adjust output formatting of javascript function read_canvas(); (the defaults should be fine...)
		4958	@ may be combined with onclick or drag xy of other components of flyscript objects (although not very useful...)
		4959	@ may be combined with keyword <a href='#userinput_xy'>userinput_xy</a>
		4960	@ may be combined width the <a href='#snaptogrid'>snaptogrid snaptopoints </a> etc, to simplify the checking of the student reply
		4961	@ the cursor may be appropriately styled using command <a href='cursor'>cursor</a>
		4962	@ 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...
		4963	@ 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)
		4964	@ 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!)
		4965	@ 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	4966	@ 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	4967	@%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
		4968	@%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
		4969	@%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
		4970	@%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
		4971	@%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	4972	@%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
		4973	@%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
		4974	@%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
		4975	@%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
		4976	@%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	4977	@%userdraw_line%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw line,green
		4978	@%userdraw_lines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw lines,green
		4979	@%userdraw_vline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw vline,green
		4980	@%userdraw_vlines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw vlines,green
		4981	@%userdraw_hline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw hline,green
		4982	@%userdraw_hlines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw hlines,green
		4983	@%userdraw_demiline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw demiline,green
		4984	@%userdraw_demilines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw demilines,green
		4985	@%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
		4986	@%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
		4987	@%userdraw_point%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw point,green
		4988	@%userdraw_points%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw points,green
		4989	@%userdraw_arrow%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrow,green
		4990	@%userdraw_arrows%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrows,green
		4991	@%userdraw_arrow2%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrow2,green
		4992	@%userdraw_arrows2%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw arrows2,green
		4993	@%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
		4994	@%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
		4995	@%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
		4996	@%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
		4997	@%userdraw_crosshair%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw crosshair,green
		4998	@%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	4999	@%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
		5000	@%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	5001	@%userdraw_segment%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw segment,green
		5002	@%userdraw_segments%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw segments,green
		5003	@%userdraw_line%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw line,green
		5004	@%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	5005	@%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
		5006	@%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	5007	@%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
		5008	@%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
		5009	@%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	5010	@%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	5011	@%userdraw_freehandline%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw freehandline,green
		5012	@%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
		5013	@%userdraw_freehandlines%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 2%opacity 200,50%userdraw freehandlines,green
		5014	@%userdraw_input%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%userdraw input,green
		5015	@%userdraw_inputs%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%userdraw inputs,green
		5016	@%userdraw_text%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%fontfamily 42px Courier%userdraw text,green
		5017	@%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
		5018	@%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
		5019	@%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	5020	@%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	5021	@%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
		5022	*/
		5023	if( use_userdraw != 0 ){ /* only one object type may be drawn*/
		5024	canvas_error("Only one userdraw primitive may be used in command 'userdraw' use command 'multidraw' for this...");
		5025	}
		5026	js_function[INTERACTIVE] = 1;
		5027	draw_type = get_string_argument(infile,0);
		5028	if( strcmp(draw_type,"textfill") == 0){
		5029	fprintf(js_include_file,"var userdraw_text_string = \"%s\";", get_string(infile,1));
		5030	}
		5031	else {
		5032	if( strcmp(draw_type,"imagefill") == 0){
		5033	fprintf(js_include_file,"var userdraw_image_url = \"%s\";", get_string(infile,1));
		5034	}
		5035	else {
		5036	stroke_color = get_color(infile,1);
		5037	}
		5038	}
		5039	if( strcmp(draw_type,"clickfill") == 0){use_filled = 1;fill_color = stroke_color;}
		5040	reply_precision = precision;
		5041	use_userdraw = 1;
		5042	fprintf(js_include_file,"\n\
15111	schaersvoo	5043	/* begin userdraw */\
		5044	userdraw_x = new Array();userdraw_y = new Array();userdraw_radius = new Array();\
		5045	var forbidden_zone=[xsize+1,ysize+1];var xy_cnt = 0;\
		5046	var canvas_userdraw = create_canvas%d(%d,xsize,ysize);\
		5047	var context_userdraw = canvas_userdraw.getContext(\"2d\");\
		5048	var use_dashed = %d;\
		5049	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];};};};\
		5050	context_userdraw.lineWidth = %d;var use_filled = %d;\
		5051	context_userdraw.strokeStyle = \"rgba(%s,%.2f)\";\
		5052	context_userdraw.font = \"%s\";\
15128	schaersvoo	5053	var user_is_dragging = false;\
15111	schaersvoo	5054	if(wims_status != \"done\"){\
		5055	canvas_div.addEventListener(\"mousedown\" ,user_draw,false);\
		5056	canvas_div.addEventListener(\"mousemove\" ,user_drag,false);\
		5057	canvas_div.addEventListener(\"touchstart\",function(e){ e.preventDefault();user_draw(e.changedTouches[0]);},false);\
		5058	canvas_div.addEventListener(\"touchmove\" ,function(e){ e.preventDefault();user_drag(e.changedTouches[0]);},false);\
15128	schaersvoo	5059	canvas_div.addEventListener(\"touchend\" ,function(e){ e.preventDefault();user_drawstop(e.changedTouches[0]);},false);\
15111	schaersvoo	5060	};",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);
		5061
18552	bpr	5062	if( use_filled == 0 ){
		5063	fprintf(js_include_file,"context_userdraw.fillStyle = \"rgba(255,255,255.0)\";");
		5064	}
		5065	else {
		5066	if( use_filled == 1 ){
		5067	fprintf(js_include_file,"context_userdraw.fillStyle = \"rgba(%s,%.2f)\";",fill_color,fill_opacity);
		5068	}
		5069	else {
		5070	js_function[DRAW_FILL_PATTERN] = 1;
		5071	fprintf(js_include_file,"context_userdraw.fillStyle = create_Pattern(0,0,%d,[%s]);\n",use_filled,fill_color);
		5072	}
		5073	}
		5074	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);
		5075	reset();
		5076	break;
		5077	case USERINPUT:
		5078	/*
18556	bpr	5079	@ userinput function inputfield
		5080	@ alternative: userinput_function
		5081	@ alternative: userinput_xy
		5082	@ ''inputfield`` is only usable in combination with some ''userdraw draw_type``
		5083	@ note: the input fields are not cleared after the object is drawn...be aware of multiple idential drawings (many clicks on the ''ok`` button)
		5084	@ ''userinput function`` may be used any time (e.g. without userdraw)
		5085	@ multiple ''userinput function`` commands may be used.
		5086	@ use command <code>functionlabel some_string</code> to define the inputfield text: default value "f(x)="
		5087	@ use command <code>strokecolor some_color</code> to adjust the plot / functionlabel color
		5088	@ use command <code>css some_css</code> to adjust the inputfields
		5089	@ use command <code>fontsize int</code> to adjust the label fonts. (default 12px)
		5090	@ 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
		5091	@%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
		5092	@%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
		5093	@%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
		5094	@%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	5095	*/
		5096	temp = get_string_argument(infile,1);
		5097	if(strstr(temp,"function") != 0 \|\| strstr(temp,"curve") != 0 \|\| strstr(temp,"plot") != 0 ){
		5098	if( js_function[DRAW_JSFUNCTION] != 1 ){
		5099	js_function[JS_RAWMATH] = 1;
		5100	js_function[DRAW_JSFUNCTION] = 1;
		5101	if(reply_format == 0){reply_format = 24;}/* read canvas_input values */
		5102	add_input_jsfunction(css_class,function_label,input_cnt,stroke_color,stroke_opacity,line_width,use_dashed,dashtype[0],dashtype[1],font_size);
		5103	input_cnt++;
		5104	}
		5105	else {
		5106	/* no need to add DRAW_JSFUNCTION, just call it with the parameters */
		5107	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);
		5108	input_cnt++;
		5109	}
		5110	js_function[JS_MATH] = 1;
		5111	js_function[JS_PLOT] = 1;
		5112	}
		5113	else {
		5114	if(strstr(temp,"inputfield") != 0 ){
		5115	js_function[JS_SAFE_EVAL] = 1;
		5116	js_function[ADD_USER_INPUTS] = 1;
		5117	}
		5118	else {
		5119	canvas_error("userinput argument may be \"function\" or \"inputfield\"");
		5120	}
		5121	}
		5122	break;
		5123	case USERINPUT_XY:
		5124	/*
		5125	@ userinput_xy
		5126	@ keyword (no arguments required)
		5127	@ to be used in combination with command "userdraw object_type,color"
		5128	@ 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)
		5129	@ the student may use this as correction for (x:y) on a drawing (or to draw without mouse, using just the coordinates)
		5130	@ 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.
		5131	@ can <b>not</b> be combined with command ''intooltip tiptext`` <br>note: the ''tooltip div element`` is used for placing inputfields
		5132	@ user drawings will not zoom on zooming (or pan on panning)
		5133	@ use command ''css some_css`` to adjust the inputarea.
		5134	@ use command ''fontsize int`` to adjust the text labels (if needed)
		5135	@%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
		5136	*/
		5137	/* add simple eval check to avoid code injection with unprotected eval(string) */
		5138	js_function[JS_SAFE_EVAL] = 1;
		5139	js_function[ADD_USER_INPUTS] = 1;
		5140	break;
		5141	case USERINPUT_FUNCTION:
		5142	/*
		5143	@ userinput_function
		5144	@ alternative: userinput
		5145	@ keyword (no arguments required)
		5146	@ if set, a inputfield will be added to the page
		5147	@ repeat keyword for more function input fields
		5148	@ the userinput value will be plotted in the canvas
		5149	@ 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
		5150	@ 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
		5151	@ fontsize can be set using command ''fontsize int``
		5152	@ incompatible with command ''intooltip link_text_or_image``: it uses the tooltip div for adding the inputfield
		5153	@%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
		5154	*/
		5155	if( js_function[DRAW_JSFUNCTION] != 1 ){
		5156	js_function[DRAW_JSFUNCTION] = 1;
		5157	js_function[JS_RAWMATH] = 1;
		5158	if(reply_format == 0){reply_format = 24;}/* read canvas_input values */
		5159	add_input_jsfunction(css_class,function_label,input_cnt,stroke_color,stroke_opacity,line_width,use_dashed,dashtype[0],dashtype[1],font_size);
		5160	input_cnt++;
		5161	}
		5162	else {
		5163	/* no need to add DRAW_JSFUNCTION, just call it with the parameters */
		5164	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);
		5165	input_cnt++;
		5166	}
		5167	js_function[JS_MATH] = 1;
		5168	js_function[JS_PLOT] = 1;
		5169	break;
		5170	case VLINE:
		5171	/*
		5172	@ vline x,y,color
		5173	@ alternative: verticalline
		5174	@ draw a vertical line through point (x:y) in color 'color'
		5175	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>
		5176	@%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
		5177	*/
		5178	for(i=0;i<3;i++) {
		5179	switch(i){
		5180	case 0: double_data[0] = get_real(infile,0);break; /* x-values */
		5181	case 1: double_data[1] = get_real(infile,0);break; /* y-values */
		5182	case 2: stroke_color=get_color(infile,1);/* name or hex color */
		5183	double_data[2] = double_data[0];
		5184	decimals = find_number_of_digits(precision);
		5185	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18557	bpr	5186	tmp_buffer=my_newmem(MAX_BUFFER);
		5187	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	5188	add_to_buffer(tmp_buffer);
		5189	if(onclick != 0){object_cnt++;}
		5190	/* object_cnt++; */
		5191	reset();
		5192	break;
		5193	}
		5194	}
		5195	dragstuff[4] = 1;
		5196	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5197	break;
		5198	case VLINES:
		5199	/*
		5200	@ vlines color,x1,y1,x2,y2....
		5201	@ alternative: verticallines
		5202	@ draw vertical lines through points (x1:y1),(x2:y2)... in color 'color'
		5203	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually
		5204	@%vlines%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%onclick%vlines red,1,0,2,0,3,0,4,0
		5205	*/
		5206	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5207	fill_color = stroke_color;
		5208	i=0;
		5209	while( ! done ){ /* get next item until EOL*/
		5210	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5211	if(i%2 == 0 ){
		5212	double_data[i] = get_real(infile,0); /* x */
		5213	}
		5214	else {
		5215	double_data[i] = get_real(infile,1); /* y */
		5216	}
		5217	i++;
		5218	}
		5219	decimals = find_number_of_digits(precision);
		5220	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5221	for(c = 0 ; c < i-1 ; c = c+2){
18557	bpr	5222	tmp_buffer=my_newmem(MAX_BUFFER);
18607	bpr	5223	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	5224	add_to_buffer(tmp_buffer);
		5225	if(onclick != 0){object_cnt++;}
		5226	/* object_cnt++; */
		5227	}
		5228	reset();
		5229	dragstuff[4] = 1;
		5230	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5231	break;
		5232	case VIDEO:
		5233	/*
		5234	@ video x,y,w,h,videofile location
		5235	@ x,y: left top corner of audio element (in xrange / yrange)
		5236	@ w,y: width and height in pixels
		5237	@ video format may be in *.mp4 (todo: other formats)
		5238	@%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
		5239	*/
		5240	js_function[DRAW_VIDEO] = 1;
		5241	for(i=0;i<5;i++){
		5242	switch(i){
		5243	case 0: int_data[0] = x2px(get_real(infile,0)); break; /* x in x/y-range coord system -> pixel */
		5244	case 1: int_data[1] = y2px(get_real(infile,0)); break; /* y in x/y-range coord system -> pixel */
		5245	case 2: int_data[2] = (int) (get_real(infile,0)); break; /* pixel width */
		5246	case 3: int_data[3] = (int) (get_real(infile,0)); break; /* height pixel height */
		5247	case 4: temp = get_string(infile,1);
18557	bpr	5248	tmp_buffer=my_newmem(MAX_BUFFER);
		5249	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	5250	add_to_buffer(tmp_buffer);
		5251	break;
		5252	default:break;
		5253	}
		5254	}
		5255	reset();
		5256	break;
		5257	case X_AXIS_STRINGS:
		5258	/*
18556	bpr	5259	@ xaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
		5260	@ alternative: xaxistext
		5261	@ usable for commands <a href="#numberline">numberline</a> and <a href="#grid">grid</a> or combinations thereof
		5262	@ use these x-axis num1...num_n values instead of default xmin...xmax
		5263	@ in case of command ''grid``. there is no need to use keyword <a href="#axisnumbering">axisnumbering</a>
		5264	@ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
		5265	@ 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>)
		5266	@ a javascript error message will flag non-matching value:name pairs
		5267	@ if the ''x-axis words`` are too big and will overlap, a simple alternating offset will be applied
		5268	@ to be used before command grid (see <a href="#grid">command grid</a>)
		5269	@ ''xmajor`` steps should be synchronised with numbers eg. ''1`` in the next example <code>grid 1,100,grey,1,4,6,grey</code>
		5270	@%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	5271	*/
		5272	use_axis_numbering++;
		5273	temp = get_string(infile,1);
		5274	if( strstr(temp,":") != 0 ){ temp = str_replace(temp,":","\",\"");}
		5275	if( strstr(temp,"pi") != 0 ){ temp = str_replace(temp,"pi","(3.1415927)");}/* we need to replace pi for javascript y-value*/
		5276	fprintf(js_include_file,"x_strings[%d] = [\"%s\"];x_strings_up[%d] = null;",use_axis_numbering,temp,use_axis_numbering);
		5277	break;
		5278	case X_AXIS_STRINGS_UP:
		5279	/*
18556	bpr	5280	@ xaxisup num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
		5281	@ alternative: xaxistextup
		5282	@ the text will be rotated 90° up
		5283	@ no need to use keyword <a href="#axisnumbering">axisnumbering</a>
		5284	@ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
		5285	@ use these x-axis num1...num_n values instead of default xmin...xmax
		5286	@ 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>)
		5287	@ a javascript error message will flag non-matching value:name pairs
		5288	@ if the ''x-axis words`` are too big, they will overlap the graph<br> (in this case the text will start from ysize upwards)
		5289	@ to be used before command grid (see <a href="#grid">command grid</a>)
		5290	@''xmajor`` steps should be synchronised with numbers eg. "1" in the next example <code>grid 1,100,grey,1,4,6,grey</code>
		5291	@%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	5292	*/
		5293	use_axis_numbering++;
		5294	temp = get_string(infile,1);
		5295	if( strstr(temp,":") != 0 ){ temp = str_replace(temp,":","\",\"");}
		5296	if( strstr(temp,"pi") != 0 ){ temp = str_replace(temp,"pi","(3.1415927)");}/* we need to replace pi for javascript y-value*/
		5297	fprintf(js_include_file,"x_strings_up[%d] = 1;x_strings[%d] = [\"%s\"];",use_axis_numbering,use_axis_numbering,temp);
		5298	break;
		5299	case XERRORBARS:
		5300	/*
		5301	@ xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n
		5302	@ 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'
		5303	@ the errors E1 and E2 values are in xrange.
		5304	@ use command ''linewidth int`` to adust size
		5305	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		5306	@%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	5307
18552	bpr	5308	*/
		5309	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5310	fill_color = stroke_color;
		5311	i=0;
		5312	while( ! done ){ /* get next item until EOL*/
		5313	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5314	if(i%2 == 0 ){
		5315	double_data[i] = get_real(infile,0); /* x */
		5316	}
		5317	else {
		5318	double_data[i] = get_real(infile,1); /* y */
		5319	}
		5320	i++;
		5321	}
		5322	decimals = find_number_of_digits(precision);
		5323	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5324	for(c = 2 ; c < i-1 ; c = c+2){
18557	bpr	5325	tmp_buffer=my_newmem(MAX_BUFFER);
		5326	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	5327	add_to_buffer(tmp_buffer);
		5328	/* object_cnt++; */
		5329	if(onclick != 0){object_cnt++;}
		5330	}
		5331	reset();
		5332	dragstuff[20] = 1;
		5333	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5334	break;
		5335	case NEWRANGE:
		5336	/*
		5337	@ newrange xmin,xmax,ymin,ymax
		5338	@ objects defined after command will make use of this new range
		5339	@ https://wimsedu.info/?topic=dessiner-des-portions-de-fonctions-sur-un-meme-graphe
		5340	*/
		5341	for(i = 0 ; i<4; i++){
		5342	switch(i){
		5343	case 0: xmin = get_real(infile,0);break;
		5344	case 1: xmax = get_real(infile,0);break;
		5345	case 2: ymin = get_real(infile,0);break;
		5346	case 3: ymax = get_real(infile,1);break;
		5347	default: break;
		5348	}
		5349	}
18557	bpr	5350	tmp_buffer=my_newmem(MAX_BUFFER);
		5351	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	5352	add_to_buffer(tmp_buffer);
		5353	break;
		5354	case XRANGE:
		5355	/*
		5356	@ xrange xmin,xmax
		5357	@ alternative: rangex
		5358	@ if not given: 0,xsize (eg in pixels)
		5359	*/
18556	bpr	5360	for(i = 0 ; i<2; i++){
		5361	switch(i){
		5362	case 0: xmin = get_real(infile,0);break;
		5363	case 1: xmax = get_real(infile,1);break;
		5364	default: break;
		5365	}
		5366	}
		5367	if(xmin >= xmax){canvas_error(" xrange is not OK: xmin < xmax !");}
		5368	fprintf(js_include_file,"var xmin = %f;var xmax = %f;",xmin,xmax);
		5369	found_size_command++;
		5370	break;
18552	bpr	5371	case XSNAPTOGRID:
		5372	/*
18556	bpr	5373	@ xsnaptogrid
		5374	@ keyword (no arguments required)
		5375	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the given x-grid values when dragged (mouseup)
		5376	@ in case of userdraw the drawn points will snap to xmajor grid
		5377	@ if no grid is defined, points will snap to every integer xrange value. (eg snap_x=1)
		5378	@ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0.
		5379	@ 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>
		5380	@%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
		5381	@%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
		5382	*/
		5383	use_snap = 2;
		5384	break;
18552	bpr	5385	case XOFFSET:
		5386	/*
18556	bpr	5387	@ xoffset
		5388	@ keyword ; to place the text centered above the text coordinates(x:y) ...
		5389	@ may be used for points or other things requiring centered labels
		5390	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		5391	@ 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	5392	@%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
		5393	*/
18556	bpr	5394	use_offset = 2;
		5395	break;
18552	bpr	5396	case XYOFFSET:
		5397	/*
18556	bpr	5398	@ xyoffset
		5399	@ keyword ; to place the text (x:y) to (x+dx:y+dy)... dx/dy are dependent on fontsize/fontfamily
		5400	@ may be used for points or other things requiring labels
		5401	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		5402	@ only active for commands <a href="#text">text</a> and <a href="#string">string</a> (e.g. objects in the drag/drop/onclick-librariy
		5403	@ 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>
		5404	@%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	5405	*/
18556	bpr	5406	use_offset = 3;
		5407	break;
18552	bpr	5408	case XUNIT:
		5409	/*
18556	bpr	5410	@ xunit some_unit_for_x-values
		5411	@ unicode allowed (no html code)
		5412	@ use together with command <a href="#display">display or mouse</a>
		5413	@ will display the cursor x-coordinate in ''unit``
		5414	@%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	5415	*/
18556	bpr	5416	fprintf(js_include_file,"unit_x = \"%s\";",get_string(infile,1));
		5417	break;
18552	bpr	5418	case XLABEL:
		5419	/*
		5420	@ xlabel some_string
		5421	@ will be used to create a label for the x-axis (label is in quadrant I)
		5422	@ can only be used together with command ''grid``<br>not depending on keywords ''axis`` and ''axisnumbering``
		5423	@ 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)
		5424	@ use <a href="#ylabel">ylabel</a>
		5425	@%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
		5426	*/
18556	bpr	5427	temp = get_string(infile,1);
		5428	fprintf(js_include_file,"var xaxislabel = \"%s\";",temp);
		5429	break;
18552	bpr	5430	case XLOGBASE:
		5431	/*
		5432	@ xlogbase number
		5433	@ sets the logbase number for the x-axis
		5434	@ default value 10
		5435	@ use together with commands xlogscale / xylogscale
		5436	*/
18556	bpr	5437	fprintf(js_include_file,"xlogbase=%d;",(int)(get_real(infile,1)));
		5438	break;
18552	bpr	5439	case XLOGSCALE:
		5440	/*
18556	bpr	5441	@ xlogscale ymajor,yminor,majorcolor,minorcolor
		5442	@ the x/y-range are set using commands <code>xrange xmin,xmax</code> and <code>yrange ymin,ymax</code>
		5443	@ ymajor is the major step on the y-axis; yminor is the divisor for the y-step
		5444	@ the linewidth is set using command ''linewidth int``
		5445	@ the opacity of major / minor grid lines is set by command <a href='#opacity'>opacity</a>
		5446	@ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number``
18627	bpr	5447	@ 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	5448	@ note: the complete canvas will be used for the ''log paper``
		5449	@ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
		5450	@ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
		5451	@ 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
		5452	@ note: in case of userdraw, the use of keyword <a href='#userinput_xy'>userinput_xy</a> may be handy !
		5453	@ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result...
		5454	@ <b>attention</b>: do not use command ''zoom``
		5455	@%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	5456	*/
18556	bpr	5457	use_axis_numbering++;if(use_axis_numbering > 1){use_axis_numbering = 1;}
		5458	if( js_function[DRAW_GRID] == 1 ){canvas_error("only one type of grid is allowed...");}
		5459	js_function[DRAW_XLOGSCALE] = 1;
		5460	for(i=0;i<4;i++){
		5461	switch(i){
		5462	case 0: double_data[0] = get_real(infile,0);break; /* xmajor */
		5463	case 1: int_data[0] = (int) (get_real(infile,0));break; /* xminor */
		5464	case 2: stroke_color = get_color(infile,0); break;
		5465	case 3: fill_color = get_color(infile,1);
18557	bpr	5466	tmp_buffer=my_newmem(MAX_BUFFER);
		5467	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	5468	fprintf(js_include_file,"use_xlogscale=1;snap_y = %f;snap_x = xlogbase;",double_data[0]/int_data[0]);
		5469	add_to_buffer(tmp_buffer);
		5470	break;
		5471	default:break;
		5472	}
		5473	}
		5474	break;
18552	bpr	5475	case XYLOGSCALE:
		5476	/*
18556	bpr	5477	@ xylogscale majorcolor,minorcolor
		5478	@ the x/y-range are set using commands ''xrange xmin,xmax`` and ''yrange ymin,ymax``
		5479	@ the linewidth is set using command ''linewidth int``
		5480	@ the opacity of major / minor grid lines is set by command ''opacity [0-255],[0-255]``
		5481	@ default logbase number = 10 ... when needed, set the logbase number with command ''xlogbase number`` and/or ''ylogbase number``
18627	bpr	5482	@ 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	5483	@ note: the complete canvas will be used for the ''log paper``
		5484	@ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
		5485	@ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
		5486	@ 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``)
		5487	@ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy !
		5488	@ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result...
		5489	@ <b>attention</b>: do not use command ''zoom``
		5490	@%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	5491	*/
18556	bpr	5492	use_axis_numbering++;if(use_axis_numbering > 1){use_axis_numbering = 1;}
		5493	if( js_function[DRAW_GRID] == 1 ){canvas_error("only one type of grid is allowed...");}
		5494	js_function[DRAW_XYLOGSCALE] = 1;
		5495	for(i=0;i<2;i++){
		5496	switch(i){
		5497	case 0: stroke_color = get_color(infile,0); break;
		5498	case 1: fill_color = get_color(infile,1);
18557	bpr	5499	tmp_buffer=my_newmem(MAX_BUFFER);
		5500	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	5501	fprintf(js_include_file,"use_xlogscale=1;use_ylogscale=1;snap_x = xlogbase;snap_y = ylogbase;");
		5502	add_to_buffer(tmp_buffer);
		5503	break;
		5504	default:break;
		5505	}
		5506	}
		5507	break;
18552	bpr	5508	case Y_AXIS_STRINGS:
		5509	/*
18556	bpr	5510	@ yaxis num1:string1:num2:string2:num3:string3:num4:string4:....num_n:string_n
		5511	@ alternative: yaxistext
		5512	@ 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>)
		5513	@ no need to use keyword <a href="#axisnumbering">axisnumbering</a>
		5514	@ use command <a href="#axis">axis</a> to have visual x/y-axis lines (see command <a href="#grid">grid</a>
		5515	@ use these y-axis num1...num_n values instead of default ymin...ymax
		5516	@ a javascript error message will flag non-matching value:name pairs
		5517	@ to be used before command grid (see <a href="#grid">command grid</a>)
		5518	@%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	5519	*/
18556	bpr	5520	temp = get_string(infile,1);
		5521	if( strstr(temp,":") != 0 ){ temp = str_replace(temp,":","\",\"");}
		5522	if( strstr(temp,"pi") != 0 ){ temp = str_replace(temp,"pi","(3.1415927)");}/* we need to replace pi for javascript y-value*/
		5523	fprintf(js_include_file,"y_strings = [\"%s\"];\n ",temp);
		5524	use_axis_numbering++;
		5525	break;
18552	bpr	5526	case YERRORBARS:
		5527	/*
		5528	@ yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n
		5529	@ draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'
		5530	@ the errors E1 and E2 values are in yrange.
		5531	@ use command ''linewidth int`` to adust size
		5532	@ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
		5533	@%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
		5534	*/
		5535	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5536	fill_color = stroke_color;
		5537	i=0;
		5538	while( ! done ){ /* get next item until EOL*/
18556	bpr	5539	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5540	if(i%2 == 0 ){
		5541	double_data[i] = get_real(infile,0); /* x */
		5542	}
		5543	else
		5544	{
		5545	double_data[i] = get_real(infile,1); /* y */
		5546	}
		5547	i++;
18552	bpr	5548	}
		5549	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5550	for(c = 2 ; c < i-1 ; c = c+2){
18557	bpr	5551	tmp_buffer=my_newmem(MAX_BUFFER);
		5552	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	5553	add_to_buffer(tmp_buffer);
18552	bpr	5554	/* object_cnt++; */
18556	bpr	5555	if(onclick != 0){object_cnt++;}
18552	bpr	5556	}
		5557	decimals = find_number_of_digits(precision);
		5558	reset();
		5559	dragstuff[19] = 1;
		5560	if(use_dragstuff == 0 ){ use_dragstuff = 1;}
		5561	break;
		5562	case YOFFSET:
		5563	/*
18556	bpr	5564	@ yoffset
		5565	@ keyword; to place the text centered above the text coordinates(x:y) ...
		5566	@ may be used for points or other things requiring centered labels
		5567	@ use <a href="#fontfamily">fontfamily</a> for setting the font
		5568	@ 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)
		5569	@%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	5570	*/
18556	bpr	5571	use_offset = 1;
		5572	break;
18552	bpr	5573	case YRANGE:
		5574	/*
		5575	@ yrange ymin,ymax
		5576	@ alternative: rangey
		5577	@ if not given 0,ysize (eg in pixels)
		5578	*/
18556	bpr	5579	for(i = 0 ; i<2; i++){
		5580	switch(i){
		5581	case 0: ymin = get_real(infile,0);break;
		5582	case 1: ymax = get_real(infile,1);break;
		5583	default: break;
		5584	}
		5585	}
		5586	if(ymin >= ymax){canvas_error(" yrange is not OK: ymin < ymax !<br>");}
		5587	fprintf(js_include_file,"var ymin = %f;var ymax = %f;",ymin,ymax);
		5588	found_size_command++;
		5589	break;
18552	bpr	5590	case YSNAPTOGRID:
		5591	/*
18556	bpr	5592	@ ysnaptogrid
		5593	@ keyword (no arguments required)
		5594	@ a draggable object (use command ''drag x\|y\|xy``) will snap to the given y-grid values when dragged (mouseup)
		5595	@ in case of userdraw the drawn points will snap to ymajor grid
		5596	@ if no grid is defined, points will snap to every integer yrange value. (eg snap_y=1)
		5597	@ if you do not want a visible grid, but you only want a ''snaptogrid`` with some value...define this grid with opacity 0.
		5598	@ 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>
		5599	@%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
		5600	@%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	5601	*/
18556	bpr	5602	use_snap = 3;
		5603	break;
18552	bpr	5604	case YLABEL:
		5605	/*
		5606	@ ylabel some_string
		5607	@ will be used to create a (vertical) label for the y-axis (label is in quadrant I)
		5608	@ can only be used together with command <a href="#grid">grid</a><br>not depending on keywords ''axis`` and ''axisnumbering``
		5609	@ 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)
		5610	@ use <a href="#xlabel">xlabel</a>
		5611	@%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
		5612	*/
18556	bpr	5613	temp = get_string(infile,1);
		5614	fprintf(js_include_file,"var yaxislabel = \"%s\";",temp);
		5615	break;
18552	bpr	5616	case YLOGBASE:
		5617	/*
		5618	@ ylogbase number
		5619	@ sets the logbase number for the y-axis
		5620	@ default value 10
		5621	@ use together with commands ylogscale / xylogscale
		5622	*/
		5623	fprintf(js_include_file,"ylogbase=%d;",(int)(get_real(infile,1)));
		5624	break;
		5625	case YLOGSCALE:
		5626	/*
18556	bpr	5627	@ ylogscale xmajor,xminor,majorcolor,minorcolor
		5628	@ the x/y-range are set using commands ''xrange xmin,xmax`` and ''yrange ymin,ymax``
		5629	@ xmajor is the major step on the x-axis; xminor is the divisor for the x-step
		5630	@ the linewidth is set using command ''linewidth int``
		5631	@ the opacity of major / minor grid lines is set by command ''opacity [0-255],[0-255]``
		5632	@ default logbase number = 10 ... when needed, set the logbase number with command ''ylogbase number``
		5633	@ 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>
		5634	@ note: the complete canvas will be used for the ''log paper``
		5635	@ note: userdrawings are done in the log paper, e.g. javascript:read_canvas() will return the real values
		5636	@ note: command ''mouse color,fontsize`` will show the real values in the logpaper.<br>\
		5637	@ 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``)
		5638	@ note: in case of userdraw, the use of keyword ''userinput_xy`` may be handy !
		5639	@ <b>attention</b>: do not use command ''zoom``
		5640	@ <b>attention</b>: keyword ''snaptogrid`` may not lead to the desired result...
18552	bpr	5641	*/
18555	bpr	5642	use_axis_numbering++;if(use_axis_numbering > 1){use_axis_numbering = 1;}
		5643	if( js_function[DRAW_GRID] == 1 ){canvas_error("only one type of grid is allowed...");}
		5644	js_function[DRAW_YLOGSCALE] = 1;
		5645	for(i=0;i<4;i++){
		5646	switch(i){
		5647	case 0: double_data[0] = get_real(infile,0);break; /* xmajor */
		5648	case 1: int_data[0] = (int) (get_real(infile,0));break; /* xminor */
		5649	case 2: stroke_color = get_color(infile,0); break;
		5650	case 3: fill_color = get_color(infile,1);
18557	bpr	5651	tmp_buffer=my_newmem(MAX_BUFFER);
		5652	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	5653	fprintf(js_include_file,"use_ylogscale=1;snap_x = %f;snap_y = ylogbase;",double_data[0]/int_data[0]);
		5654	add_to_buffer(tmp_buffer);
		5655	break;
		5656	default:break;
		5657	}
		5658	}
		5659	break;
18552	bpr	5660	case YUNIT:
		5661	/*
18556	bpr	5662	@ yunit some_unit_for_y-values
		5663	@ unicode allowed (no html code)
		5664	@ use together with command mousey
		5665	@ will display the cursor y-coordinate in ''unit``
18552	bpr	5666	*/
		5667	fprintf(js_include_file,"unit_y = \"%s\";",get_string(infile,1));
		5668	break;
18555	bpr	5669	case HYPSEGMENTS:
18556	bpr	5670	/*
		5671	@ hypsegments color,x1,y1,x2,y2,...,x_n,y_n
		5672	@ 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	5673	@ use command ''linewidth int`` to adjust size may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually (!)
18556	bpr	5674	@%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	5675	*/
18555	bpr	5676	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5677	fill_color = stroke_color;
		5678	i=0;
		5679	while( ! done ){ /* get next item until EOL*/
		5680	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5681	if(i%2 == 0 ){
		5682	double_data[i] = get_real(infile,0); /* x */
		5683	}
		5684	else {
		5685	double_data[i] = get_real(infile,1); /* y */
		5686	}
		5687	i++;
		5688	}
		5689	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5690	if(use_affine == TRUE ){ transform(i-1,2);}
		5691	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5692	decimals = find_number_of_digits(precision);
		5693	for(c = 0 ; c < i-1 ; c = c+4){
18569	bpr	5694	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5695	if (hypgeodaux(double_data+c,res,0)){
		5696	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));
		5697	}
		5698	else {
		5699	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));
		5700	}
		5701	add_to_buffer(tmp_buffer);
		5702	if(onclick != 0){object_cnt++;}
		5703	}
		5704	reset();
		5705	dragstuff[4] = 1;dragstuff[12] = 1;
		5706	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5707	break;
		5708	case HYPLINES:
18639	schaersvoo	5709	/*
18555	bpr	5710	@ hyplines color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n
18639	schaersvoo	5711	@ 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	5712	@%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
		5713	*/
		5714	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
		5715	fill_color = stroke_color;
		5716	i=0;
		5717	while( ! done ){ /* get next item until EOL*/
		5718	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
18562	bpr	5719	if(i%2 == 0 ){
		5720	double_data[i] = get_real(infile,0); /* x */
		5721	}
18555	bpr	5722	else {
		5723	double_data[i] = get_real(infile,1); /* y */
		5724	}
		5725	i++;
		5726	}
		5727	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5728	if(use_affine == TRUE ){ transform(i-1,2);}
		5729	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
18623	bpr	5730	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18555	bpr	5731	decimals = find_number_of_digits(precision);
		5732	for(c = 0 ; c < i-1 ; c = c+4){
18569	bpr	5733	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5734	if (hypgeodaux(double_data+c,res,1)){
		5735	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));}
		5736	else {
18623	bpr	5737	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	5738	}
		5739	add_to_buffer(tmp_buffer);
		5740	if(onclick != 0){object_cnt++;}
		5741	}
		5742	reset();
		5743	dragstuff[4] = 1;dragstuff[12] = 1;
		5744	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5745	break;
		5746	case HYPPOLY:
18639	schaersvoo	5747	/*
		5748	@ hyppolygon color,x1,y1,x2,y2...x_n-1,y_n-1,x_n,y_n
		5749	@ 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	5750	@ option fhyppolygon only for convex polygon for the moment
		5751	@%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	5752	*/
18615	bpr	5753	stroke_color=get_color(infile,0);
18555	bpr	5754	fill_color = stroke_color;
		5755	i=0;
		5756	while( ! done ){ /* get next item until EOL*/
		5757	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5758	if(i%2 == 0 ){
		5759	double_data[i] = get_real(infile,0); /* x */
		5760	}
		5761	else {
		5762	double_data[i] = get_real(infile,1); /* y */
		5763	}
		5764	i++;
		5765	}
		5766	/* il faut rajouter le premier point � la fin*/
		5767	double_data[i]=double_data[0]; double_data[i+1]=double_data[1];
		5768	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5769	if(use_affine == TRUE ){ transform(i-1,2);}
		5770	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5771	decimals = find_number_of_digits(precision);
		5772	for(c = 0 ; c < i-1 ; c = c+2){
18615	bpr	5773	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5774	if (hypgeodaux(double_data+c,res,0)){
18615	bpr	5775	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	5776	}
		5777	else {
18623	bpr	5778	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	5779	}
		5780	add_to_buffer(tmp_buffer);
		5781	if(onclick != 0){object_cnt++;}
18615	bpr	5782	}
		5783	if(use_filled){
		5784	hypgeodaux(double_data+2,res,0);
		5785	res[4]=double_data[0]; res[5]=double_data[1];
		5786	hypgeodaux(res+4,res,0);
		5787	add_js_filltoborder(canvas_type);
		5788	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));
		5789	add_to_buffer(tmp_buffer);
		5790	fill_cnt++;
18606	bpr	5791	}
18569	bpr	5792	dragstuff[4] = 1; dragstuff[12] = 1;
18555	bpr	5793	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5794	reset();
		5795	break;
		5796	case HYPRAYS:
		5797	/*
18556	bpr	5798	@ hyprays color,xc,yc,x1,y1,x2,y2,x3,y3...x_n,y_n
18639	schaersvoo	5799	@ 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	5800	@%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	5801	*/
		5802	/*
18555	bpr	5803	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
		5804	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
		5805	*/
		5806	stroke_color=get_color(infile,0);
18623	bpr	5807	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18555	bpr	5808	double_data[0] = get_real(infile,0);/* xc */
		5809	double_data[1] = get_real(infile,0);/* yc */
		5810	i=2;
18562	bpr	5811	while( ! done ){ /* get next item until EOL*/
18555	bpr	5812	if(i > MAX_INT - 1){canvas_error("in command rays too many points / rays in argument: repeat command multiple times to fit");}
		5813	if(i%2 == 0 ){
		5814	double_data[i] = get_real(infile,0); /* x */
		5815	}
		5816	else {
		5817	double_data[i] = get_real(infile,1); /* y */
		5818	}
		5819	fprintf(js_include_file,"/* double_data[%d] = %f */\n",i,double_data[i]);
		5820	i++;
		5821	}
		5822	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}
		5823	if(use_affine == TRUE ){ transform(i-1,2);}
		5824	if( i%2 != 0 ){canvas_error("in command rays: unpaired x or y value");}
		5825	decimals = find_number_of_digits(precision);
		5826	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5827	for(c=2; c<i;c = c+2){
18557	bpr	5828	tmp_buffer=my_newmem(MAX_BUFFER);
18555	bpr	5829	double_data[2]=double_data[c];double_data[3]=double_data[c+1];
		5830	if (hypgeodaux(double_data,res,0)){
		5831	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));
		5832	}
		5833	else {
18623	bpr	5834	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	5835	}
		5836	add_to_buffer(tmp_buffer);
		5837	/* object_cnt++; */
		5838	if(onclick != 0){object_cnt++;}
		5839	}
		5840	reset();
		5841	dragstuff[4] = 1; dragstuff[12] = 1;
		5842	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5843	break;
		5844	case HYPCIRCLES:
		5845	/*
		5846	@ hypcircles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n
		5847	@ draw hyperbolic circles in Poincar� disk
		5848	@ <b>attention</b> r = radius in x-range (!)
		5849	@ use keyword <code>filled</code> or command <code>fhypcircles</code> to produce solid circles
		5850	@ use command <code>fillcolor color</code> to set the fillcolor
		5851	@%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	5852	*/
		5853	/*
18555	bpr	5854	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
		5855	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
		5856	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
		5857	*/
		5858	stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/
18623	bpr	5859	if(fillcolor) {fill_color=fillcolor;} else {fill_color=stroke_color;}
18555	bpr	5860	i=1;
18562	bpr	5861	while( ! done ){ /* get next item until EOL*/
18555	bpr	5862	if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}
		5863	switch (i%3){
		5864	case 1:double_data[i-1] = get_real(infile,0);break; /* x */
		5865	case 2:double_data[i-1] = get_real(infile,0);break; /* y */
		5866	case 0:double_data[i-1] = get_real(infile,1);break; /* r */
		5867	}
		5868	i++;
		5869	}
		5870	if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,3);}
		5871	if(use_affine == TRUE ){ transform(i-1,3);}
		5872	if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */
		5873	decimals = find_number_of_digits(precision);
		5874	for(c = 0 ; c < i-1 ; c = c+3){
18556	bpr	5875	double Z2=double_data[c]double_data[c]+double_data[c+1]double_data[c+1];//[Z]^2
18555	bpr	5876	double R=tanh(double_data[c+2]/2);double R2=R*R;
		5877	double den=1-R2*Z2; double XY=(1-R2)/den;
		5878	double_data[c]=XY*double_data[c];
		5879	double_data[c+1]=XY*double_data[c+1];
		5880	double_data[c+2]=(1-Z2)/den*R;
18557	bpr	5881	tmp_buffer=my_newmem(MAX_BUFFER);
18623	bpr	5882	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	5883	add_to_buffer(tmp_buffer);
		5884	if(onclick != 0){object_cnt++;}/* object_cnt++; */
		5885	}
		5886	reset();
		5887	dragstuff[13] = 1;
		5888	if(use_dragstuff == 0 ){ use_dragstuff = 1; }
		5889	break;
18552	bpr	5890	case ZOOM:
		5891	/*
18556	bpr	5892	@ zoom button_color
		5893	@ introduce a very small ''controlpanel`` at the lower right corner (font size of the panel is fixed to: 22px Arial)
		5894	@ giving six 15×15px ''active`` rectangle areas<br>(''×,↓,↑,←,→,−,+``) for zooming and/or panning of the image
		5895	@ a mouse wheel is active for in/out zooming. Drag panning is not supported (this will conflict with many ''userdraw`` or ''multidraw`` primitives)
		5896	@ the ''controlpanel`` is not active for a ''userdraw`` mousedown (but it can interfere with some ''userdraw`` types)
		5897	@ the ''×`` symbol will reset to your original xmax/xmin ymax/ymin values.
		5898	@ choose an appropriate color, so the small ''×,↓,↑,←,→,−,+`` are clearly visible
		5899	@ command ''opacity`` may be used to set stroke_opacity of buttons
		5900	@ note: on zooming, text will not increase / decrease the font size (todo??)
		5901	@ note: adding ''zooming`` will increase the size of the javascript include with approx. 11 kb
18552	bpr	5902	*/
18556	bpr	5903	js_function[INTERACTIVE] = 1;
18552	bpr	5904	js_function[JS_ZOOM] = 1;
		5905	if( use_userdraw == 1 ){
		5906	js_function[USERDRAW_AND_ZOOM] = 1;
		5907	fprintf(js_include_file,"forbidden_zone = [%d,%d];",xsize-115,ysize - 20);
		5908	}
		5909	if(jsplot_cnt != -1){ js_function[JSPLOT_AND_ZOOM] = 1;}
		5910	stroke_color = get_color(infile,1);
		5911	/* we use BG_CANVAS (0) */
		5912	add_js_zoom_buttons(stroke_color,stroke_opacity);
		5913	done = TRUE;
		5914	break;
11806	schaersvoo	5915
		5916	/* ready */
18552	bpr	5917	default:sync_input(infile);
		5918	break;
		5919	}
7614	schaersvoo	5920	}
		5921	/* we are done parsing script file */
18556	bpr	5922	if(use_dragstuff != 0){
18562	bpr	5923	/* add the 20kb drag code: nearly always used ... use_dragstuff==1: no-mouse ! */
18556	bpr	5924	add_drag_code(DRAG_CANVAS,use_dragstuff,dragstuff,reply_format);
		5925	if(js_function[JS_ZOOM] == 1){
15111	schaersvoo	5926	js_function[DRAG_AND_ZOOM] = 1;
18556	bpr	5927	}
15111	schaersvoo	5928	}
15116	bpr	5929
14066	bpr	5930	/* check if xrange / yrange was set explicit ... or use xmin=0 xmax=xsize ymin=0 ymax=ysize: Quadrant I */
18556	bpr	5931	if( found_size_command == 1 ){
		5932	fprintf(js_include_file,"var xmin = 0;var xmax = %d;var ymin = 0;var ymax = %d",xsize,ysize);
7983	schaersvoo	5933	}
18556	bpr	5934	else
		5935	{
		5936	if( found_size_command != 3 ){
		5937	canvas_error("Please specify size first and then both xrange and yrange ...");
		5938	}
		5939	}
8257	schaersvoo	5940
18562	bpr	5941	/* if needed, add generic draw functions (grid / xml etc) to buffer: these are no draggable/clickable shapes / objects ! */
18556	bpr	5942	add_javascript_function();
7614	schaersvoo	5943	/* add read_canvas() etc functions if needed */
18556	bpr	5944	if( reply_format > 0 ){ add_read_canvas(reply_format,reply_precision);}
7797	schaersvoo	5945	/* no zoom, just add buffer */
18556	bpr	5946	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	5947	/* done writing the javascript include file */
18556	bpr	5948	fclose(js_include_file);
		5949	}
7614	schaersvoo	5950
		5951	/* if using a tooltip, this should always be printed to the .phtml file, so stdout /
18556	bpr	5952	if( use_tooltip > 0 ){
		5953	if( use_tooltip == 1 ){
		5954	add_js_tooltip(tooltip_text,bgcolor);
		5955	}
		5956	else
		5957	{
		5958	if( use_tooltip == 2 ){
		5959	add_js_popup(getfile_cmd);
		5960	}
		5961	}
9329	schaersvoo	5962	}
18556	bpr	5963	exit(EXIT_SUCCESS);
7614	schaersvoo	5964	}
		5965	/* end main() */
		5966
		5967	/******************************************************************************
		5968	**
		5969	** sync_input
		5970	**
		5971	** synchronises input line - reads to end of line, leaving file pointer
		5972	** at first character of next line.
		5973	**
		5974	** Used by:
		5975	** main program - error handling.
		5976	**
		5977	******************************************************************************/
		5978	void sync_input(FILE *infile)
		5979	{
18552	bpr	5980	int c = 0;
7614	schaersvoo	5981
18552	bpr	5982	if( c == '\n' \|\| c == ';' ) return;
		5983	while( ( (c=getc(infile)) != EOF ) && (c != '\n') && (c != '\r') && (c != ';')) ;
		5984	if( c == EOF ) finished = 1;
		5985	if( c == '\n' \|\| c == '\r' \|\| c == ';') line_number++;
		5986	return;
7614	schaersvoo	5987	}
		5988
		5989	/******************************************************************************/
15111	schaersvoo	5990	void transform(int num,int incr){
		5991	/*.
		5992	only "double_data[]" is used for transformations !!
		5993	*/
		5994	int i;int ii;double x,y;
		5995	for(i=0;i<num;i = i+incr){
		5996	ii = i+1;
		5997	x = double_data[i]affine_matrix[0] + double_data[ii]affine_matrix[1]+affine_matrix[4];
		5998	y = double_data[i]affine_matrix[2] + double_data[ii]affine_matrix[3]+affine_matrix[5];
15601	schaersvoo	5999	/*
17351	bpr	6000	printf("(%f:%f) → (%f:%f)<br>",double_data[i],double_data[ii],x,y);
15601	schaersvoo	6001	*/
15111	schaersvoo	6002	double_data[i] = x;
		6003	double_data[ii] = y;
		6004	}
		6005	}
		6006
		6007	void rotate(int num,double angle,double center[],int incr){
		6008	int i;int ii;double rad = angle * 0.0174532925199;
		6009	double c = cos(rad);
		6010	double s = sin(rad);
		6011	double x,y;
		6012	for(i=0;i<num;i = i+incr){
		6013	ii = i+1;
		6014	x = c(double_data[i]-center[0]) + s(double_data[ii] - center[1] ) + center[0];
		6015	y = c(double_data[ii]-center[1]) - s(double_data[i] - center[0] ) + center[1];
		6016	double_data[i] = x;
		6017	double_data[ii] = y;
17351	bpr	6018	// printf("(x:y) - (%f:%f)<br>",x,y);
15111	schaersvoo	6019	}
		6020	}
		6021	/* not used: see transform()
		6022	void translate(int num){
		6023	int i;int ii;
		6024	double x,y;
		6025	for(i=0;i<num;i = i+2){
		6026	ii = i+1;
		6027	x = double_data[i] + affine_matrix[4];
		6028	y = double_data[ii] + affine_matrix[5];
		6029	double_data[i] = x;
		6030	double_data[ii] = y;
		6031	}
		6032	}
		6033	*/
7614	schaersvoo	6034	char str_replace(const char str, const char old, const char new){
18562	bpr	6035	if(strlen(str) > MAX_BUFFER){canvas_error("string argument too big");}
		6036	char ret, r;
		6037	const char p, q;
		6038	size_t oldlen = strlen(old);
		6039	size_t count = 0;
		6040	size_t retlen = 0;
		6041	size_t newlen = strlen(new);
		6042	if (oldlen != newlen){
		6043	for (count = 0, p = str; (q = strstr(p, old)) != NULL; p = q + oldlen){
18552	bpr	6044	count++;
		6045	retlen = p - str + strlen(p) + count * (newlen - oldlen);
18562	bpr	6046	}
18552	bpr	6047	}
18562	bpr	6048	else {
		6049	retlen = strlen(str);
		6050	}
		6051	if ((ret = malloc(retlen + 1)) == NULL){
		6052	ret = NULL;
		6053	canvas_error("string argument is NULL");
		6054	}
		6055	else
		6056	{
		6057	for (r = ret, p = str; (q = strstr(p, old)) != NULL; p = q + oldlen) {
18552	bpr	6058	size_t l = q - p;
		6059	memcpy(r, p, l);
		6060	r += l;
		6061	memcpy(r, new, newlen);
		6062	r += newlen;
18562	bpr	6063	}
		6064	strcpy(r, p);
18552	bpr	6065	}
18562	bpr	6066	return ret;
7614	schaersvoo	6067	}
		6068
		6069	/******************************************************************************/
7848	bpr	6070
7614	schaersvoo	6071	char get_color(FILE infile , int last){
18562	bpr	6072	int c,i = 0,is_hex = 0;
		6073	char temp[MAX_COLOR_STRING], *string;
		6074	const char *not_allowed = "0123456789";
		6075	while(( (c=getc(infile)) != EOF ) && ( c != '\n') && ( c != ',' ) && ( c != ';' ) && ( c != '\t' ) ){
		6076	if( i > MAX_COLOR_STRING ){ canvas_error("colour string is too big ... ? ");}
		6077	if( c == '#' ){
18552	bpr	6078	is_hex = 1;
18562	bpr	6079	}
		6080	if( c != ' '){
18552	bpr	6081	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 !!! ");}}
		6082	temp[i]=tolower(c);
		6083	i++;
18562	bpr	6084	}
18552	bpr	6085	}
18562	bpr	6086	if( ( c == '\n' \|\| c == EOF \|\| c == ';' \|\| c == '\t' ) && last == 0){canvas_error("expecting more arguments in command");}
		6087	if( c == '\n' \|\| c == ';' \|\| c == '\t' ){ done = TRUE; line_number++; }
		6088	if( c == EOF ){finished = 1;}
		6089	if( finished == 1 && last != 1 ){ canvas_error("expected more arguments");}
		6090	temp[i]='\0';
		6091	if( strlen(temp) == 0 ){ canvas_error("expected a colorname or hexnumber, but found nothing !!");}
		6092	if( is_hex == 1 ){
		6093	char red[3], green[3], blue[3];
		6094	red[0] = toupper(temp[1]); red[1] = toupper(temp[2]); red[2] = '\0';
		6095	green[0] = toupper(temp[3]); green[1] = toupper(temp[4]); green[2] = '\0';
		6096	blue[0] = toupper(temp[5]); blue[1] = toupper(temp[6]); blue[2] = '\0';
		6097	int r = (int) strtol(red, NULL, 16);
		6098	int g = (int) strtol(green, NULL, 16);
		6099	int b = (int) strtol(blue, NULL, 16);
		6100	int L0 = 1+snprintf(NULL,0,"%d,%d,%d",r,g,b);
		6101	string = my_newmem(L0);
		6102	snprintf(string,L0,"%d,%d,%d",r,g,b);
		6103	return string;
		6104	}
		6105	else
		6106	{
		6107	string = (char *)my_newmem(sizeof(temp));
		6108	snprintf(string,sizeof(temp),"%s",temp);
		6109	for( i = 0; i < NUMBER_OF_COLORNAMES ; i++ ){
18552	bpr	6110	if( strcmp( colors[i].name , string ) == 0 ){
18562	bpr	6111	return colors[i].rgb;
18552	bpr	6112	}
18562	bpr	6113	}
		6114	canvas_error("I was expecting a color name or hexnumber...but found nothing.");
18552	bpr	6115	}
18562	bpr	6116	return "0,0,255";
7614	schaersvoo	6117	}
		6118
14066	bpr	6119	char get_string(FILE infile,int last){ /* last = 0: more arguments ; last=1 final argument */
18562	bpr	6120	int c,i=0;
		6121	char temp[MAX_BUFFER], *string;
		6122	while(( (c=getc(infile)) != EOF ) && ( c != '\n') && ( c != '\t') ){
		6123	temp[i]=c;
		6124	i++;
		6125	if(i > MAX_BUFFER){ canvas_error("string size too big...repeat command to fit string");break;}
		6126	}
		6127	if( ( c == '\n' \|\| c == '\t' \|\| c == EOF ) && last == 0){
		6128	canvas_error("expecting more arguments in command");}
		6129	if( c == '\n' \|\| c == '\t') { done = TRUE; line_number++; }
		6130	if( c == EOF ) {finished = 1;}
		6131	temp[i]='\0';
		6132	if( strlen(temp) == 0 && last != 3 ){
		6133	canvas_error("expected a word or string, but found nothing!");}
		6134	string=(char *)my_newmem(strlen(temp));
		6135	snprintf(string,sizeof(temp),"%s",temp);
		6136	return string;
7614	schaersvoo	6137	}
		6138
14066	bpr	6139	char get_string_argument(FILE infile,int last){ /* last = 0: more arguments ; last=1 final argument */
18562	bpr	6140	int c,i=0;
		6141	char temp[MAX_BUFFER], *string;
		6142	while(( (c=getc(infile)) != EOF ) && ( c != '\n') && ( c != '\t') && ( c != ',')){
		6143	temp[i]=c;
		6144	i++;
		6145	if(i > MAX_BUFFER){ canvas_error("string size too big...will cut it off");break;}
		6146	}
		6147	if( ( c == '\n' \|\| c == EOF) && last == 0){canvas_error("expecting more arguments in command");}
		6148	if( c == '\n' \|\| c == '\t' ) { line_number++; }
		6149	if( c == EOF ) {finished = 1;}
		6150	if( finished == 1 && last == 0 ){ canvas_error("expected more arguments");}
		6151	temp[i]='\0';
10953	bpr	6152	/*
18562	bpr	6153	17.10.2014 removed (question Perrin)
		6154	may cause some unwanted effects...
		6155	if( strlen(temp) == 0 ){ canvas_error("expected a word or string (without comma), but found nothing !!");}
8322	schaersvoo	6156	*/
18562	bpr	6157	string=(char *)my_newmem(sizeof(temp));
		6158	snprintf(string,sizeof(temp),"%s",temp);
		6159	done = TRUE;
		6160	return string;
7614	schaersvoo	6161	}
		6162
14066	bpr	6163	double get_real(FILE infile, int last){ / accept anything that looks like an number ? last = 0: more arguments ; last=1 final argument */
18562	bpr	6164	int c,i=0,found_calc = 0;
		6165	double y;
		6166	char tmp[MAX_INT];
		6167	/*
		6168	these things are 'allowed functions': *,^,+,-,/,(,),e,arc,cos,tan,pi,log,ln,sqrt,abs
		6169	but there should be a better way to avoid segfaults !
		6170	*/
		6171	const char allowed = "earcostanpilogqb+-/^()";/* assuming these are allowed stuff in a 'number'*/
		6172	const char not_allowed = "#dfhjkmuvwxyz{}[]%&~!$";/ avoid segmentation faults in a "atof()" and "wims eval" */
		6173	while(( (c=getc(infile)) != EOF ) && ( c != ',') && (c != '\n') && (c != '\t') && ( c != ';')){
		6174	if( c != ' ' ){
8224	bpr	6175	if( i == 0 && c == '+' ){
18562	bpr	6176	continue;
8224	bpr	6177	}
7614	schaersvoo	6178	else
		6179	{
18562	bpr	6180	c = tolower(c);
		6181	if( strchr(not_allowed,c) != 0 ){canvas_error("found a character not associated with a number...");}
		6182	if( strchr(allowed,c) != 0 ){found_calc = 1;}/* hand the string over to wims eval() */
		6183	tmp[i] = c;
		6184	i++;
7614	schaersvoo	6185	}
		6186	}
18562	bpr	6187	if( i > MAX_INT - 1){canvas_error("number too large");}
		6188	}
		6189	if( ( c == '\n' \|\| c == EOF \|\| c == ';' \|\| c == '\t' ) && last == 0){canvas_error("expecting more arguments in command");}
		6190	if( c == '\n' \|\| c == ';' \|\| c == '\t' ){ done = TRUE; line_number++; }
		6191	if( c == EOF ){done = TRUE ; finished = 1;}
		6192	tmp[i]='\0';
		6193	if( strlen(tmp) == 0 ){canvas_error("expected a number, but found nothing !!");}
		6194	if( found_calc == 1 ){ /* use wims eval to calculate 2pi/3 /
		6195	void *f = eval_create(tmp);
		6196	assert(f);if( f == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
		6197	y = eval_x(f, 1);
		6198	/* if function is bogus; y = 1: so no core dumps */
		6199	eval_destroy(f);
		6200	}
		6201	else
		6202	{
		6203	y = atof(tmp);
		6204	}
		6205	return y;
7614	schaersvoo	6206	}
		6207	void canvas_error(char *msg){
18562	bpr	6208	fprintf(stdout,"\n</script><hr><span style=\"color:red\">FATAL syntax error: line %d: %s</span><hr>",line_number,msg);
		6209	finished = 1;
		6210	exit(EXIT_SUCCESS);
7614	schaersvoo	6211	}
		6212	/* convert x/y coordinates to pixel */
		6213	int x2px(double x){
18606	bpr	6214	int res=(x-xmin)/(xmax-xmin)*xsize;
		6215	return (res==xsize)?xsize-1:res;
7614	schaersvoo	6216	}
		6217	int y2px(double y){
18606	bpr	6218	int res=(ymax-y)/(ymax-ymin)*ysize;
		6219	return (res==ysize)?ysize-1:res;
7614	schaersvoo	6220	}
		6221	double px2x(int x){
18562	bpr	6222	return (x*(xmax - xmin)/xsize + xmin);
7614	schaersvoo	6223	}
		6224	double px2y(int y){
18562	bpr	6225	return (y*(ymax - ymin)/ysize + ymin);
7614	schaersvoo	6226	}
		6227	void add_to_buffer(char *tmp){
17351	bpr	6228	//fprintf(stdout,"tmp = %s<br>buffer = %s<br>",tmp,buffer);
18562	bpr	6229	if( tmp == NULL \|\| tmp == 0 ){ canvas_error("nothing to add_to_buffer()...");}
		6230	/* do we have enough space left in buffer[MAX_BUFFER] ? */
		6231	int space_left = (int) (sizeof(buffer) - strlen(buffer));
		6232	if( space_left > strlen(tmp)){
		6233	strncat(buffer,tmp,space_left - 1);/* add safely "tmp" to the string buffer */
		6234	}
		6235	else
		6236	{
		6237	canvas_error("your memory buffer is too big<br>simplify your script...it produces too many lines ");
		6238	}
		6239	tmp = NULL;free(tmp);
		6240	return;
7614	schaersvoo	6241	}
		6242	void reset(){
18562	bpr	6243	if(no_reset == FALSE){ /* 8/5/2020 */
		6244	use_filled = FALSE;
		6245	use_dashed = FALSE;
		6246	if(onclick != 4 ){onclick = 0;} /* slider param 'active'... onclick=4 */
		6247	drag_type = -1;
		6248	use_offset = 0;
18623	bpr	6249	fillcolor = FALSE;
18562	bpr	6250	}
7614	schaersvoo	6251	}
15111	schaersvoo	6252	char getMML(char tex){
18562	bpr	6253	int my_pipe[2];pid_t pid;
		6254	if(pipe(my_pipe)){canvas_error("mathml(): pipe() failure.\n");}
15111	schaersvoo	6255	pid = fork();
		6256	if (pid == (pid_t) 0){
18562	bpr	6257	char *argv[]={"wims_mathml","--use-zoom","0","--tex-size 100%","--max-mml-size","1024","--tex-string",tex,NULL};
		6258	close(my_pipe[0]);dup2(my_pipe[1], 1);dup2(my_pipe[1], 2);close(my_pipe[1]);
		6259	execv("../bin/wims_mathml",argv);canvas_error("could not execute wims_mathml\n");
15111	schaersvoo	6260	}
		6261	else
15116	bpr	6262	{
18562	bpr	6263	if (pid < (pid_t) 0){
		6264	close(my_pipe[0]);close(my_pipe[1]);canvas_error("mathml(): fork() failure.\n");
		6265	}
		6266	int status;FILE *stream;close(my_pipe[1]);stream = fdopen (my_pipe[0], "r");
		6267	char buffer[MAX_BUFFER+1];memset(buffer,'\0',MAX_BUFFER);
		6268	fgets(buffer, MAX_BUFFER, stream);
		6269	int L0 = 1 + snprintf(NULL,0,"%s", buffer);
		6270	tex = my_newmem(L0);memset(tex,'\0',L0);
		6271	snprintf(tex,L0,"%s",buffer);
		6272	fclose (stream);close(my_pipe[0]);waitpid(pid, &status, 0);
15111	schaersvoo	6273	}
18562	bpr	6274	return tex;
15111	schaersvoo	6275	}
7614	schaersvoo	6276
15111	schaersvoo	6277	char getSVGMOL(char inputtype,char *keys){
		6278	int idx;
		6279	char *forbidden[] = {"-O","-H","-z","-L","-o","-m"};
		6280	char *argv[1+strlen(keys)];
		6281	argv[0] = "obabel"; argv[1] = "-i"; argv[2] = inputtype;
		6282	idx = 3;int i;
		6283	char *ptr = strtok(keys,",");
		6284	while(ptr != NULL ){
		6285	for(i = 0 ; i < 6; i++ ){if( strncmp(ptr,forbidden[i],2) == 0 ){return "NOT ALLOWED ARGUMENT";}}
		6286	argv[idx] = ptr; idx++;
17351	bpr	6287	if(idx > 18){canvas_error("too many arguments for obabel....see docs<br>");}
15111	schaersvoo	6288	ptr = strtok(NULL,",");
		6289	}
		6290	/* last arguments; no 'javascript', only 'svg to STDOUT' and 'NULL' */
		6291	argv[idx] = "-xj";argv[idx+1] = "-o"; argv[idx+2] = "svg";argv[idx+3] = NULL;
		6292	int link[2];
		6293	pid_t pid;
		6294	char buffer[MAX_BUFFER+1];
		6295	memset(buffer,'\0',MAX_BUFFER);
		6296	if (pipe(link)==-1){canvas_error("pipe");}
		6297	if ((pid = fork()) == -1){canvas_error("fork");}
15116	bpr	6298
15111	schaersvoo	6299	char *svgmol = "error";
		6300	int string_length = 0;
15116	bpr	6301
15111	schaersvoo	6302	if(pid == 0) {
		6303	dup2 (link[1], STDOUT_FILENO);
		6304	dup2(link[0], STDERR_FILENO);/* remove annoying messages '1 molecule converted' */
		6305	close(link[0]);
		6306	close(link[1]);
		6307	execvp("obabel",argv);
		6308	} else {
		6309	close(link[1]);
18109	schaersvoo	6310	read(link[0],buffer, sizeof(buffer));
15111	schaersvoo	6311	close(link[0]);
		6312	/* need to remover newline from svg-string on freebsd */
		6313	char *pch = strstr(buffer, "\n");
		6314	while(pch != NULL){
18555	bpr	6315	strncpy(pch, " ", 1);
		6316	pch = strstr(buffer, "\n");
15111	schaersvoo	6317	}
		6318	string_length = 1 + snprintf(NULL,0,"%s",buffer);
		6319	svgmol= my_newmem(string_length);
		6320	snprintf(svgmol,string_length,"%s",buffer);
		6321	wait(NULL);
		6322	}
18562	bpr	6323	return svgmol;
15111	schaersvoo	6324	}
		6325	/* GNU libmatheval library for evaluating mathematical functions. */
15601	schaersvoo	6326	char eval(int xsize,int ysize,char fun,double xmin,double xmax,double ymin,double ymax,int plotsteps,int precision,double rotationcenter[]){
18555	bpr	6327	void *f;
		6328	double x;
		6329	double y;
		6330	double xorg;
		6331	int xv;
		6332	int i = 0;
		6333	int xstep =(int)(xsize/plotsteps);
		6334	if( xstep == 0 ){xstep = 1;}
		6335	double a = (xmax - xmin)/xsize;
		6336	f = eval_create(fun);
		6337	assert (f);
		6338	if( f == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
		6339	/* we supply the true x/y values...draw_curve() will convert these (x:y) to pixels : used for pan/scale */
		6340	double xydata[MAX_BUFFER+1];/* hmmm */
		6341	int lim_ymin =(int)( ymin - 4fabs(ymin));/ 19-4-2015 replacing "abs" by "fabs"*/
		6342	int lim_ymax =(int)( ymax + 4fabs(ymax));/ 19-4-2015 replacing "abs" by "fabs"*/
		6343	double c = 1.0;double s = 1.0;
		6344	if( use_rotate == TRUE ){s = sin(angle0.0174533);c = cos(angle0.0174533);}
		6345	for ( xv = 0 ;xv < xsize ; xv = xv+xstep ){
18562	bpr	6346	x = (double) (xv*a + xmin);
		6347	xorg = x;
		6348	if( i < MAX_BUFFER - 2){
18552	bpr	6349	y = eval_x(f, x);
		6350	if(y < lim_ymax && y > lim_ymin ){
18562	bpr	6351	if( use_affine == TRUE ){
		6352	x = xaffine_matrix[0] + yaffine_matrix[1]+affine_matrix[4];
		6353	y = xorgaffine_matrix[2] + yaffine_matrix[3]+affine_matrix[5];
		6354	}
		6355	if( use_rotate == TRUE){
		6356	x = (c * (x - rotationcenter[0])) + (s * (y - rotationcenter[1])) + rotationcenter[0];
		6357	y = (c * (y - rotationcenter[1])) - (s * (xorg - rotationcenter[0])) + rotationcenter[1];
		6358	}
		6359	xydata[i++] = x;
18552	bpr	6360	xydata[i++] = y;
		6361	}
18562	bpr	6362	}
		6363	else
		6364	{
18552	bpr	6365	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	6366	}
18552	bpr	6367	}
18562	bpr	6368	eval_destroy(f);
		6369	return double_xy2js_array(xydata,i,find_number_of_digits(precision));
15111	schaersvoo	6370	}
		6371	/* plot a very primitive (!) levelcurve : not to be compared with "flydraw levelcurve" */
		6372	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	6373	void *f = eval_create(fun);
		6374	assert (f);
		6375	if( f == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
		6376	double a = (double)((xmax - xmin)/plotsteps);
		6377	double b = (double)((ymax - ymin)/plotsteps);
		6378	double x;double y;double diff;
		6379	double xydata[MAX_BUFFER+1];
		6380	int i = 0;
		6381	ymin = ymin - 1;
		6382	xmin = xmin - 1;
		6383	ymax = ymax + 1;
		6384	xmax = xmax + 1;
		6385	for( x = xmin ;x < xmax ; x = x + a ){
		6386	for ( y = ymin ;y < ymax ; y = y + b ){
18552	bpr	6387	if( i < MAX_BUFFER - 2){
18562	bpr	6388	diff = level - eval_x_y(f, x,y);
		6389	if(diff < 0.1 && diff > -0.1){
		6390	xydata[i++] = x;
		6391	xydata[i++] = y;
		6392	}
18552	bpr	6393	}
		6394	else
		6395	{
18562	bpr	6396	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	6397	}
18562	bpr	6398	}
18552	bpr	6399	}
18562	bpr	6400	eval_destroy(f);
		6401	return double_xy2js_array(xydata,i,find_number_of_digits(precision));
15111	schaersvoo	6402	}
7614	schaersvoo	6403
15111	schaersvoo	6404	/* plot parametric function */
18562	bpr	6405	char eval_parametric(int xsize,int ysize,char fun1,char* fun2,double xmin,
		6406	double xmax,double ymin,double ymax,
		6407	double tmin,double tmax,int plotsteps,int precision,double rotationcenter[]){
		6408	void *fx;
		6409	void *fy;
		6410	double t;
		6411	int i = 0;
		6412	double tstep = (tmax-tmin)/plotsteps;
		6413	if( tstep == 0 ){canvas_error("zero step for t variable : reduce plotsteps or inrease trange");}
		6414	fx = eval_create(fun1);
		6415	fy = eval_create(fun2);
		6416	assert(fx);
		6417	assert(fy);
		6418	if( fx == NULL \|\| fy == NULL ){canvas_error("I'm having trouble parsing your \"expression\" ") ;}
15111	schaersvoo	6419	/* we supply the true x/y values...draw_curve() will convert these (x:y) to pixels : used for pan/scale */
18562	bpr	6420	double xydata[MAX_BUFFER+1];/* hmmm */
		6421	double x; /* real x-values */
		6422	double y; /* real y-values */
		6423	double xorg;
		6424	/*
		6425	29/12/2020
		6426	disabled to try and synchronise curve+affine behaviour in complex scripts produced by "elec, tool circuit" (BPR)
15623	schaersvoo	6427	int lim_ymin =(int)( ymin - 4*fabs(ymin));
		6428	int lim_ymax =(int)( ymax + 4*fabs(ymax));
		6429	*/
18562	bpr	6430	double c = 1.0;double s = 1.0;
		6431	if( use_rotate == TRUE ){s = sin(angle0.0174533);c = cos(angle0.0174533);}
		6432	for( t = tmin ;t <= tmax ; t = t + tstep ){
		6433	if( i < MAX_BUFFER - 2 ){
18552	bpr	6434	y = eval_t(fy, t);
		6435	/* if(y > lim_ymin && y < lim_ymax){*/
18562	bpr	6436	x = eval_t(fx, t);
		6437	if( x == x){ /* no NaN */
		6438	xorg = x;
		6439	if( use_affine == TRUE ){
		6440	x = xaffine_matrix[0] + yaffine_matrix[1]+affine_matrix[4];
		6441	y = xorgaffine_matrix[2] + yaffine_matrix[3]+affine_matrix[5];
		6442	}
		6443	if( use_rotate == TRUE){
		6444	x = (c * (x - rotationcenter[0])) + (s * (y - rotationcenter[1])) + rotationcenter[0];
		6445	y = (c * (y - rotationcenter[1])) - (s * (xorg - rotationcenter[0])) + rotationcenter[1];
		6446	}
		6447	xydata[i++] = x;
		6448	xydata[i++] = y;
		6449	}
		6450	/* } */
18552	bpr	6451	}
18562	bpr	6452	else
		6453	{
18552	bpr	6454	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	6455	}
18552	bpr	6456	}
18562	bpr	6457	eval_destroy(fx);
		6458	eval_destroy(fy);
		6459	return double_xy2js_array(xydata,i,find_number_of_digits(precision));
15111	schaersvoo	6460	}
7614	schaersvoo	6461
15111	schaersvoo	6462	char *double_xy2js_array(double xy[],int len,int decimals){
		6463	/*
		6464	1,2,3,4,5,6,7,8 --> [1,3,5,7],[2,4,6,8]
		6465	int xy[] is already checked for errors or overflow in "get_real()"
		6466	just to be sure we double check the size of "temp"
7614	schaersvoo	6467	*/
18562	bpr	6468	char temp[2MAX_BUFFER], string;
		6469	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6470	memset(temp,'\0',2MAX_BUFFER);/ clear memory */
		6471	int i;int space_left;
		6472	temp[0] = '[';/* start js-array */
		6473	for(i = 0; i < len;i = i + 2){ /* x_points[] */
		6474	if(i == len - 2){sprintf(tmp, "%.*f",decimals, xy[i]);}
		6475	else {sprintf(tmp, "%.*f,",decimals,xy[i]);}
		6476	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6477	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6478	else{
		6479	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce your image size or plotsteps ");}
15111	schaersvoo	6480	}
		6481	strncat(temp,"],[",4); /* close js x_values array and start new */
		6482	for(i = 1; i < len;i = i + 2){ /* y_points */
18557	bpr	6483	if(i == len - 1){ sprintf(tmp, "%.f",decimals,xy[i]);}else{sprintf(tmp, "%.f,",decimals,xy[i]);}
		6484	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6485	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	6486	}
		6487	strncat(temp,"]",2);
		6488	string=(char *)my_newmem(sizeof(temp));
		6489	snprintf(string,sizeof(temp),"%s",temp);
		6490	return string;
		6491	}
7614	schaersvoo	6492
15111	schaersvoo	6493	char list2js_array(char list, char s){/ abc:defg:hjiuy:qwer --> ["abc","defg","hjiuy","qwer"] */
		6494	#define MAX_ARG 128
18562	bpr	6495	if( strlen(list)> MAX_ARG - 1){canvas_error("argument is too large (> 128)");}
		6496	char tmp[MAX_ARG];
		6497	size_t p = 0;
		6498	tmp[0] = '[';
		6499	tmp[1] = '\"';
		6500	size_t t = 2;
		6501	while(list[p] != '\0'){
		6502	if( list[p] == s[0] ){
		6503	tmp[t++]='\"';tmp[t++]=',';tmp[t++]='\"';
		6504	}
		6505	else
		6506	{
		6507	tmp[t++] = list[p];
		6508	}
		6509	p++;
15111	schaersvoo	6510	}
18562	bpr	6511	tmp[t++]='\"';tmp[t++]=']';tmp[t++]= '\0';
		6512	char js_array = (char )my_newmem(sizeof(tmp));
		6513	snprintf(js_array,sizeof(tmp),"%s",tmp);
		6514	return js_array;
15111	schaersvoo	6515	}
7963	schaersvoo	6516
15111	schaersvoo	6517	char *xy2js_array(int xy[],int len){
		6518	/*
		6519	1,2,3,4,5,6,7,8 --> [1,3,5,7],[2,4,6,8]
		6520	int xy[] is already checked for errors or overflow in "get_real()"
		6521	just to be sure we double check the size of "temp"
7614	schaersvoo	6522	*/
18562	bpr	6523	char temp[MAX_BUFFER], *string;
		6524	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6525	memset(temp,'\0',MAX_BUFFER);/* clear memory */
		6526	int i;int space_left;
		6527	temp[0] = '[';/* start js-array */
		6528	for(i = 0; i < len;i = i + 2){ /* x_points[] */
		6529	if(i == len - 2){sprintf(tmp, "%d", xy[i]);}else{sprintf(tmp, "%d,", xy[i]);}
		6530	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6531	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6532	else {
		6533	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce image size or plotsteps ");}
		6534	}
		6535	strncat(temp,"],[",4); /* close js x_values array and start new */
		6536	for(i = 1; i < len;i = i + 2){ /* y_points */
		6537	if(i == len - 1){ sprintf(tmp, "%d", xy[i]);}else{sprintf(tmp, "%d,", xy[i]);}
		6538	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6539	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6540	else{canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data\nreduce image size or plotsteps \n");}
		6541	}
		6542	strncat(temp,"]",2);
		6543	string=(char *)my_newmem(sizeof(temp));
		6544	snprintf(string,sizeof(temp),"%s",temp);
		6545	return string;
7614	schaersvoo	6546	}
		6547
15111	schaersvoo	6548	char *data2js_array(int data[],int len){
		6549	/*
		6550	1,2,3,4,5,6,7,8 --> [1,2,3,4,5,6,7,8]
		6551	int data[] is already checked for errors or overflow in "get_real()"
		6552	just to be sure we double check the size of "temp"
7614	schaersvoo	6553	*/
18562	bpr	6554	char temp[MAX_BUFFER], *string;
		6555	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6556	memset(temp,'\0',MAX_BUFFER);/* clear memory */
		6557	int i;int space_left;
		6558	temp[0] = '[';/* start js-array */
		6559	for(i = 0; i < len; i++){
		6560	if(i == len - 1){sprintf(tmp, "%d", data[i]);}else{sprintf(tmp, "%d,", data[i]);}
		6561	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6562	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6563	else{
		6564	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce image size or plotsteps ");
15111	schaersvoo	6565	}
18562	bpr	6566	}
		6567	strncat(temp,"]",2);
		6568	string=(char *)my_newmem(sizeof(temp));
		6569	snprintf(string,sizeof(temp),"%s",temp);
		6570	return string;
15111	schaersvoo	6571	}
7614	schaersvoo	6572
15111	schaersvoo	6573	char *doubledata2js_array(double data[],int len, int decimals){
		6574	/*
15116	bpr	6575	1.4355,2.345353,3.3455 --> [1.44,2.35,3.35]
15111	schaersvoo	6576	double data[] is already checked for errors or overflow in "get_real()"
		6577	just to be sure we double check the size of "temp"
8448	schaersvoo	6578	*/
18562	bpr	6579	char temp[MAX_BUFFER], *string;
		6580	char tmp = my_newmem(16);/ <= 9999999999999999 */
		6581	memset(temp,'\0',MAX_BUFFER);/* clear memory */
		6582	int i;int space_left;
		6583	temp[0] = '[';/* start js-array */
		6584	for(i = 0; i < len; i++){
		6585	if(i == len - 1){sprintf(tmp, "%.*f",decimals,data[i]);}
		6586	else{sprintf(tmp, "%.*f,",decimals,data[i]);}
		6587	space_left = (int) (sizeof(temp) - strlen(temp) - strlen(tmp) - 1);
		6588	if( space_left > 0 ){ strncat(temp,tmp,space_left - 1);}
		6589	else{
		6590	canvas_error("can not parse integer to js-array:\nYour curve plotting produces too many data \nreduce image size or plotsteps ");}
		6591	}
		6592	strncat(temp,"]",2);
		6593	string=(char *)my_newmem(sizeof(temp));
		6594	snprintf(string,sizeof(temp),"%s",temp);
		6595	return string;
15111	schaersvoo	6596	}
13829	bpr	6597
15111	schaersvoo	6598	void *my_newmem(size_t size){
18562	bpr	6599	void *p;
		6600	if((p = malloc(size +1)) == NULL){canvas_error("canvasdraw: ran out of memory\n");}
		6601	return p;
15111	schaersvoo	6602	}
8224	bpr	6603
15111	schaersvoo	6604	int find_number_of_digits(int i){
18562	bpr	6605	if(i < 0 ){ i = -1*i;}
		6606	int digits = 0;
		6607	while ( i > 0){
		6608	digits++;
		6609	i = i/10;
		6610	}
		6611	return digits;
15111	schaersvoo	6612	}
7645	schaersvoo	6613
16828	schaersvoo	6614	int count_substring(char* string, char* substring) {
18164	schaersvoo	6615	int i, j, l1, l2;
16828	schaersvoo	6616	int count = 0;
		6617	l1 = strlen(string);
		6618	l2 = strlen(substring);
		6619	for(i = 0; i < l1 - l2 + 1; i++) {
		6620	if(strstr(string + i, substring) == string + i) {
		6621	count++;
		6622	i = i + l2 -1;
		6623	}
		6624	}
		6625	return count;
		6626	}
11830	schaersvoo	6627
7614	schaersvoo	6628	void check_string_length(int L){
18555	bpr	6629	if( L > MAX_BUFFER-1){
		6630	canvas_error("problem with your arguments to command...");
		6631	}
		6632	return;
7614	schaersvoo	6633	}
18555	bpr	6634	/* useful in hyp commands: determine if the hypsegment is an arc or a line */
18615	bpr	6635	/* give a point on the arc */
18555	bpr	6636	int hypgeodaux(double q, double ress, int full){
		6637	double alpha,beta,gamma,r,cx,cy,a1,a2,a3,tmp,
		6638	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],
		6639	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],
		6640	dy = -2q[1]q[2]+2q[0]q[3];
		6641	if (dydy1e4 <= nxnx+nyny){
		6642	if(full){
		6643	if (q[1]q[1]+q[0]q[0] > q[2]q[2]+q[3]q[3])
		6644	gamma = atan2(q[1],q[0]);
		6645	else
		6646	gamma = atan2(q[3],q[2]);
		6647	ress[0]=cos(gamma); ress[1]=sin(gamma); ress[2]=-cos(gamma); ress[3]=-sin(gamma);
		6648	}
		6649	else
		6650	{int i;for(i=0;i<4;++i) ress[i]=q[i];}
18615	bpr	6651	ress[6]=(q[0]+q[2])/2;
		6652	ress[7]=(q[1]+q[3])/2;
18555	bpr	6653	return 0;}
		6654	cx = ny/dy; cy=-nx/dy;
		6655	r = sqrt(cxcx+cycy-1);
		6656	if(full)
		6657	{alpha=atan(1/r); beta = atan2(cy,cx);a1=M_PI+beta-alpha;a2=M_PI+beta+alpha;}
		6658	else
		6659	{a1 = atan2(q[1]-cy, q[0]-cx);a2 = atan2(q[3]-cy, q[2]-cx);}
		6660	if (fabs(a2-a1)>M_PI){if(a1<a2) a1+=2M_PI; else a2+=2M_PI;};
		6661	a3 = (a1+a2)/2;
		6662	if(a1>a2) {tmp=a1; a1=a2; a2=tmp;}
		6663	ress[0]=cx;
		6664	ress[1]=cy;
		6665	ress[2]=2*r;
		6666	ress[3]=2*r;
		6667	ress[4]=360+180/M_PI*a1;
		6668	ress[5]=360+180/M_PI*a2;
		6669	ress[6]=cx+r*cos(a3);
		6670	ress[7]=cy+r*sin(a3);
		6671	return 1;
		6672	}
7614	schaersvoo	6673
		6674	int get_token(FILE *infile){
18589	bpr	6675	int left,milieu,delta,right,c,i=0;
18562	bpr	6676	char temp[MAX_INT], *input_type;
18589	bpr	6677	enum{rien,usefilled,usedashed};
		6678	static struct commande {char *nom; int res; int special;} table[]=
		6679	{
		6680	{"#",COMMENT,0},
		6681	{"affine",AFFINE,0},
		6682	{"allowdups",ALLOW_DUPLICATES,0},
		6683	{"angle",ANGLE,0},
		6684	{"animate",ANIMATE,0},
		6685	{"arc",ARC,0},
		6686	{"arcarrow",ARCARROW,0},
		6687	{"arrow",ARROW,0},
		6688	{"arrow2",ARROW2,0},
		6689	{"arrowarc",ARCARROW,0},
		6690	{"arrowhead",ARROWHEAD,0},
		6691	{"arrows",ARROWS,0},
		6692	{"arrows2",ARROWS2,0},
		6693	{"audio",AUDIO,0},
		6694	{"audioobject",AUDIOOBJECT,0},
		6695	{"axis",AXIS,0},
		6696	{"axisnumbering",AXIS_NUMBERING,0},
		6697	{"axisnumbers",AXIS_NUMBERING,0},
		6698	{"backgroundimage",BGIMAGE,0},
		6699	{"barchart",BARCHART,0},
		6700	{"bezier",BEZIER,0},
		6701	{"bgcolor",BGCOLOR,0},
		6702	{"bgimage",BGIMAGE,0},
		6703	{"blink",BLINK,0},
		6704	{"boxplot",BOXPLOT,0},
		6705	{"boxplotdata",BOXPLOTDATA,0},
		6706	{"brokenline",POLYLINE,0},
		6707	{"canvastype",CANVASTYPE,0},
		6708	{"centered",CENTERED,0},
		6709	{"centerstring",CENTERSTRING,0},
		6710	{"chemtex",CHEMTEX,0},
		6711	{"circle",CIRCLE,0},
		6712	{"circles",CIRCLES,0},
		6713	{"clearbutton",CLEARBUTTON,0},
		6714	{"clicktile",CLICKTILE,0},
		6715	{"clicktile_colors",CLICKTILE_COLORS,0},
		6716	{"clock",CLOCK,0},
		6717	{"colorpalette",COLORPALETTE,0},
		6718	{"colors",MULTISTROKECOLORS,0},
		6719	{"copy",COPY,0},
		6720	{"copyresized",COPYRESIZED,0},
		6721	{"crosshair",CROSSHAIR,0},
		6722	{"crosshairs",CROSSHAIRS,0},
		6723	{"crosshairsize",CROSSHAIRSIZE,0},
		6724	{"css",CSS,0},
		6725	{"cursor",CURSOR,0},
		6726	{"curve",CURVE,0},
		6727	{"curvedarrow",CURVEDARROW,0},
		6728	{"curvedarrow2",CURVEDARROW2,0},
		6729	{"curvedarrows",CURVEDARROWS,0},
		6730	{"curvedarrows2",CURVEDARROWS2,0},
		6731	{"darrow",ARROW,usedashed},
		6732	{"darrow2",ARROW2,usedashed},
		6733	{"dashed",DASHED,0},
		6734	{"dashtype",DASHTYPE,0},
		6735	{"dcurve",CURVE,usedashed},
		6736	{"delete",CLEARBUTTON,0},
		6737	{"demiline",HALFLINE,0},
		6738	{"demilines",HALFLINES,0},
		6739	{"dhline",HLINE,usedashed},
		6740	{"diafill",DIAMONDFILL,0},
		6741	{"diamondfill",DIAMONDFILL,0},
		6742	{"disk",CIRCLE,usefilled},
		6743	{"disks",CIRCLES,usefilled},
		6744	{"display",MOUSE_DISPLAY,0},
		6745	{"dline",LINE,usedashed},
		6746	{"dotfill",DOTFILL,0},
		6747	{"dplot",CURVE,usedashed},
		6748	{"dpolyline",POLYLINE,usedashed},
		6749	{"drag",DRAG,0},
		6750	{"dsegment",SEGMENT,usedashed},
		6751	{"dsegments",SEGMENTS,usedashed},
		6752	{"duplicates",ALLOW_DUPLICATES,0},
		6753	{"dvline",VLINE,usedashed},
		6754	{"ellipse",ELLIPSE,0},
		6755	{"ellipses",ELLIPSES,0},
		6756	{"end",END,0},
		6757	{"erase",CLEARBUTTON,0},
		6758	{"farc",ARC,usefilled},
		6759	{"fcircle",CIRCLE,usefilled},
		6760	{"fcircles",CIRCLES,usefilled},
		6761	{"fellipse",ELLIPSE,usefilled},
		6762	{"fhypcircles",HYPCIRCLES,usefilled},
18615	bpr	6763	{"fhyppolygon",HYPPOLY,usefilled},
18589	bpr	6764	{"fill",FLOODFILL,0},
		6765	{"fillall",FILLALL,0},
		6766	{"fillcolor",FILLCOLOR,0},
		6767	{"fillcolors",MULTIFILLCOLORS,0},
		6768	{"filled",FILLED,0},
		6769	{"filledarc",ARC,usefilled},
		6770	{"filledpoly",POLY,usefilled},
		6771	{"filledpolygon",POLY,usefilled},
18608	bpr	6772	{"fillopacity",FILLOPACITY,0},
18589	bpr	6773	{"fillpattern",FILLPATTERN,0},
		6774	{"filltoborder",FILLTOBORDER,0},
		6775	{"floodfill",FLOODFILL,0},
		6776	{"fontcolor",FONTCOLOR,0},
		6777	{"fontfamily",FONTFAMILY,0},
		6778	{"fontsize",FONTSIZE,0},
		6779	{"fpoly",POLY,usefilled},
		6780	{"fpolygon",POLY,usefilled},
		6781	{"frect",RECT,usefilled},
		6782	{"frectangle",RECT,usefilled},
		6783	{"frects",RECTS,usefilled},
		6784	{"froundrect",ROUNDRECT,usefilled},
		6785	{"froundrects",ROUNDRECTS,usefilled},
		6786	{"fsquare",SQUARE,usefilled},
		6787	{"fsquares",RECTS,usefilled},
		6788	{"ftriangle",TRIANGLE,usefilled},
		6789	{"ftriangles",TRIANGLES,usefilled},
		6790	{"functionlabel",FUNCTION_LABEL,0},
		6791	{"functionlabels",FUNCTION_LABEL,0},
		6792	{"grid",GRID,0},
		6793	{"gridfill",GRIDFILL,0},
		6794	{"group",GROUP,0},
		6795	{"halfline",HALFLINE,0},
		6796	{"halflines",HALFLINES,0},
		6797	{"hatchfill",HATCHFILL,0},
		6798	{"highlight",STYLE,0},
		6799	{"hline",HLINE,0},
		6800	{"hlines",HLINES,0},
		6801	{"horizontalline",HLINE,0},
		6802	{"horizontallines",HLINES,0},
		6803	{"html",HTML,0},
		6804	{"http",HTTP,0},
		6805	{"hypcircles",HYPCIRCLES,0},
		6806	{"hyplines",HYPLINES,0},
		6807	{"hyppolygon",HYPPOLY,0},
		6808	{"hyprays",HYPRAYS,0},
		6809	{"hypsegments",HYPSEGMENTS,0},
		6810	{"imagefill",IMAGEFILL,0},
		6811	{"imagepalette",IMAGEPALETTE,0},
		6812	{"input",INPUT,0},
		6813	{"intooltip",INTOOLTIP,0},
		6814	{"jscurve",JSCURVE,0},
		6815	{"jsmath",JSMATH,0},
		6816	{"jsplot",JSCURVE,0},
		6817	{"katex",LATEX,0},
		6818	{"kill",KILL,0},
		6819	{"killaffine",KILLAFFINE,0},
		6820	{"killgroup",KILLSLIDER,0},
		6821	{"killinear",KILLLINEAR,0},
		6822	{"killlinear",KILLLINEAR,0},
		6823	{"killreset",NORESET,0},
		6824	{"killrotate",KILLROTATE,0},
		6825	{"killslider",KILLSLIDER,0},
		6826	{"killtranslate",KILLTRANSLATION,0},
		6827	{"killtranslation",KILLTRANSLATION,0},
		6828	{"latex",LATEX,0},
		6829	{"lattice",LATTICE,0},
		6830	{"legend",LEGEND,0},
		6831	{"legendcolors",LEGENDCOLORS,0},
		6832	{"levelcurve",LEVELCURVE,0},
		6833	{"line",LINE,0},
		6834	{"linear",LINEAR,0},
		6835	{"linegraph",LINEGRAPH,0},
		6836	{"lines",LINES,0},
		6837	{"linewidth",LINEWIDTH,0},
		6838	{"linewidths",MULTILINEWIDTH,0},
		6839	{"math",LATEX,0},
		6840	{"mathml",MATHML,0},
		6841	{"mouse",MOUSE,0},
		6842	{"mousedegree",MOUSE_DEGREE,0},
		6843	{"mouseprecision",MOUSE_PRECISION,0},
		6844	{"mousex",MOUSEX,0},
		6845	{"mousey",MOUSEY,0},
		6846	{"multicolors",MULTISTROKECOLORS,0},
		6847	{"multidash",MULTIDASH,0},
		6848	{"multidraw",MULTIDRAW,0},
		6849	{"multifill",MULTIFILL,0},
		6850	{"multifillcolors",MULTIFILLCOLORS,0},
		6851	{"multifillopacity",MULTIFILLOPACITY,0},
		6852	{"multiinput",MULTIUSERINPUT,0},
		6853	{"multilabel",MULTILABEL,0},
		6854	{"multilinewidth",MULTILINEWIDTH,0},
		6855	{"multisnap",MULTISNAPTOGRID,0},
		6856	{"multisnaptogrid",MULTISNAPTOGRID,0},
		6857	{"multistrokecolors",MULTISTROKECOLORS,0},
		6858	{"multistrokeopacity",MULTISTROKEOPACITY,0},
		6859	{"multiuserinput",MULTIUSERINPUT,0},
		6860	{"newrange",NEWRANGE,0},
		6861	{"noreset",NORESET,0},
		6862	{"nostatus",STATUS,0},
		6863	{"noxaxis",NOXAXIS,0},
		6864	{"noyaxis",NOYAXIS,0},
		6865	{"numberline",NUMBERLINE,0},
		6866	{"obabel",OBABEL,0},
		6867	{"onclick",ONCLICK,0},
		6868	{"opacity",OPACITY,0},
		6869	{"parallel",PARALLEL,0},
		6870	{"path",POLYLINE,0},
		6871	{"patternfill",PATTERNFILL,0},
		6872	{"piechart",PIECHART,0},
		6873	{"pixels",PIXELS,0},
		6874	{"pixelsize",PIXELSIZE,0},
		6875	{"plot",CURVE,0},
		6876	{"plotstep",PLOTSTEPS,0},
		6877	{"plotsteps",PLOTSTEPS,0},
		6878	{"point",POINT,0},
		6879	{"pointer",CURSOR,0},
		6880	{"points",POINTS,0},
		6881	{"poly",POLY,0},
		6882	{"polygon",POLY,0},
		6883	{"polyline",POLYLINE,0},
		6884	{"popup",POPUP,0},
		6885	{"precision",MOUSE_PRECISION,0},
		6886	{"protractor",PROTRACTOR,0},
		6887	{"range",RANGE,0},
		6888	{"ranget",TRANGE,0},
		6889	{"rangex",XRANGE,0},
		6890	{"rangey",YRANGE,0},
		6891	{"rays",RAYS,0},
		6892	{"rect",RECT,0},
		6893	{"rectangle",RECT,0},
		6894	{"rects",RECTS,0},
		6895	{"replyformat",REPLYFORMAT,0},
		6896	{"reset",RESET,0},
		6897	{"resetoffset",RESETOFFSET,0},
		6898	{"rotate",ROTATE,0},
		6899	{"rotationcenter",ROTATION_CENTER,0},
		6900	{"roundrect",ROUNDRECT,0},
		6901	{"roundrectangle",ROUNDRECT,0},
		6902	{"roundrects",ROUNDRECTS,0},
		6903	{"ruler",RULER,0},
		6904	{"seg",SEGMENT,0},
		6905	{"segment",SEGMENT,0},
		6906	{"segments",SEGMENTS,0},
		6907	{"segs",SEGMENTS,0},
		6908	{"setlimits",SETLIMITS,0},
		6909	{"setpixel",SETPIXEL,0},
		6910	{"settile",FILLPATTERN,0},
		6911	{"sgraph",SGRAPH,0},
		6912	{"size",SIZE,0},
		6913	{"slider",SLIDER,0},
		6914	{"snaptofun",SNAPTOFUNCTION,0},
		6915	{"snaptofunction",SNAPTOFUNCTION,0},
		6916	{"snaptogrid",SNAPTOGRID,0},
		6917	{"snaptopoints",SNAPTOPOINTS,0},
		6918	{"square",SQUARE,0},
		6919	{"status",STATUS,0},
		6920	{"string",STRING,0},
		6921	{"stringup",STRINGUP,0},
		6922	{"strokecolor",STROKECOLOR,0},
		6923	{"strokecolors",MULTISTROKECOLORS,0},
18608	bpr	6924	{"strokeopacity",STROKEOPACITY,0},
18589	bpr	6925	{"style",STYLE,0},
		6926	{"text",FLY_TEXT,0},
		6927	{"textarea",TEXTAREA,0},
		6928	{"textfill",TEXTFILL,0},
		6929	{"textup",FLY_TEXTUP,0},
		6930	{"title",CENTERSTRING,0},
		6931	{"trace_jscurve",TRACE_JSCURVE,0},
		6932	{"trange",TRANGE,0},
		6933	{"translate",TRANSLATION,0},
		6934	{"translation",TRANSLATION,0},
		6935	{"transparent",OPACITY,0},
		6936	{"triangle",TRIANGLE,0},
		6937	{"triangles",TRIANGLES,0},
		6938	{"tsteps",PLOTSTEPS,0},
		6939	{"userboxplot",USERBOXPLOT,0},
		6940	{"userboxplotdata",USERBOXPLOT,0},
		6941	{"userdraw",USERDRAW,0},
		6942	{"userinput",USERINPUT,0},
		6943	{"userinput_function",USERINPUT_FUNCTION,0},
		6944	{"userinput_xy",USERINPUT_XY,0},
		6945	{"vector",ARROW,0},
		6946	{"vectors",ARROWS,0},
		6947	{"verticalline",VLINE,0},
		6948	{"verticallines",VLINES,0},
		6949	{"video",VIDEO,0},
		6950	{"vline",VLINE,0},
		6951	{"vlines",VLINES,0},
		6952	{"xaxis",X_AXIS_STRINGS,0},
		6953	{"xaxistext",X_AXIS_STRINGS,0},
		6954	{"xaxistextup",X_AXIS_STRINGS_UP,0},
		6955	{"xaxisup",X_AXIS_STRINGS_UP,0},
		6956	{"xerrorbars",XERRORBARS,0},
		6957	{"xlabel",XLABEL,0},
		6958	{"xlogbase",XLOGBASE,0},
		6959	{"xlogscale",XLOGSCALE,0},
		6960	{"xoffset",XOFFSET,0},
		6961	{"xrange",XRANGE,0},
		6962	{"xsnaptogrid",XSNAPTOGRID,0},
		6963	{"xunit",XUNIT,0},
		6964	{"xylogscale",XYLOGSCALE,0},
		6965	{"xyoffset",XYOFFSET,0},
		6966	{"yaxis",Y_AXIS_STRINGS,0},
		6967	{"yaxistext",Y_AXIS_STRINGS,0},
		6968	{"yerrorbars",YERRORBARS,0},
		6969	{"ylabel",YLABEL,0},
		6970	{"ylogbase",YLOGBASE,0},
		6971	{"ylogscale",YLOGSCALE,0},
		6972	{"yoffset",YOFFSET,0},
		6973	{"yrange",YRANGE,0},
		6974	{"ysnaptogrid",YSNAPTOGRID,0},
		6975	{"yunit",YUNIT,0},
		6976	{"zoom",ZOOM,0}
		6977	};
7614	schaersvoo	6978
18552	bpr	6979	while(((c = getc(infile)) != EOF)&&(c!='\n')&&(c!=',')&&(c!='=')&&(c!='\r')&&(c!='\t')){
		6980	if( i == 0 && (c == ' ') ){ continue; /* white spaces or tabs allowed before first command identifier */
		6981	}else{
		6982	if( c == ' ' ){
		6983	break;
		6984	}else{
		6985	temp[i] = c;
		6986	if(i > MAX_INT - 2){canvas_error("command string too long !");}
		6987	i++;
		6988	}
		6989	}
		6990	if(temp[0] == '#'){ break; }
		6991	}
		6992	if (c == '\n' \|\| c == '\r' \|\| c == '\t' ){ line_number++; }
		6993	if (c == EOF) {finished=1;return 0;}
7614	schaersvoo	6994
18552	bpr	6995	temp[i]='\0';
		6996	if(strstr(temp,"dash") !=0 && strlen(temp) > 4 && strstr(temp,"dashtype") == 0 ){
		6997	/* 4/2024 adapt to Flydraw's dashing syntax for all objects with prefix "dash" */
		6998	use_dashed = TRUE;int idx=0;int p;
		6999	for( p = 4; p < strlen(temp); p++){temp[idx] = temp[p];idx++;}
		7000	input_type = (char*)my_newmem(idx); snprintf(input_type,idx+1,"%s",temp);
		7001	}else{
		7002	input_type=(char*)my_newmem(strlen(temp));
		7003	snprintf(input_type,sizeof(temp),"%s",temp);
		7004	}
18572	bpr	7005	/* fprintf(stdout,"input_type = %s no_reset = %d <br>",input_type,no_reset);*/
18589	bpr	7006
		7007	left=0; right=sizeof(table)/sizeof(struct commande);
		7008	while (left<right){
		7009	milieu = (left+right)/2;
		7010	delta = strcmp(input_type, table[milieu].nom);
		7011	if (delta == 0){
		7012	free(input_type);
		7013	if (table[milieu].special==usefilled) use_filled=TRUE;
		7014	if (table[milieu].special==usedashed) use_dashed=TRUE;
		7015	return table[milieu].res;
		7016	}
		7017	if (delta<0) right=milieu; else left=milieu+1;
18552	bpr	7018	}
		7019	free(input_type);
18562	bpr	7020	ungetc(c,infile);
		7021	return 0;
7614	schaersvoo	7022	}

Subversion Repositories wimsdev

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