Subversion Repositories wimsdev

/*27/7/2013 version 0.01

"Inspired" by FLY program: http://martin.gleeson.com/fly

*********************************************************************************

* J.M. Evers 7/2013                                                             *

* This is all just amateur scriblings... So no copyrights.                      *

* This source code file, and compiled objects derived from it,                  *

* can be used and distributed without restriction, including for commercial use *

* No warrenty whatsoever                                                        *

*********************************************************************************

*/

#include "canvasdraw.h"

/******************************************************************************

**  Internal Functions

******************************************************************************/

void    add_to_buffer(char *tmp); /* add tmp_buffer to the buffer */

void    sync_input(FILE *infile);/* proceed with inputfile */

void    add_javascript_function(int js_function[], int canvas_root_id);

void    reset();/* reset some global variables like "use_filled", "use_dashed" */

int     get_token(FILE *infile); /* read next char until EOL*/

/*

int     x2px(double x);

int     y2px(double y);

*/

double  px2x(int x);

double  px2y(int y);

double  get_real(FILE *infile,int last); /* read a value; calculation and symbols allowed */

char    *str_replace ( const char *word, const char *sub_word, const char *rep_word );

char    *get_color(FILE *infile,int last); /* read hex-color or colorname -> hex */

char    *get_string(FILE *infile,int last); /* get the string at the end of a command */

char    *get_string_argument(FILE *infile,int last); /* the same, but with "comma" as  separator */

char    *convert_hex2rgb(char *hexcolor);

void    add_read_canvas(int canvas_root_id,int reply_format,int reply_precision);

void    make_js_include(int canvas_root_id);

void    check_string_length(int length);/* checks if the length of string argument of command is correct */

FILE    *js_include_file;

FILE    *get_file(int *line_number, char **filename);

FILE    *infile;    /* will be stdin */

/******************************************************************************

** global

******************************************************************************/

int finished = FALSE;/* main variable for signalling the end of the fly-script ; if finished = 1 ; write to stdout or canvasz */

int line_number = 1;/* used in canvas_error() ; keep track of line number in canvasdraw/fly - script */

/* set some variables to avoid trouble (NaN) in case of syntax and other usage errors */

int xsize = 320;

int ysize = 320;

double xmin = 0.0;

double xmax = 320.0;

double ymin = 0.0;

double ymax = 320.0;

double tmax = 0;

double tmin = 0;

/* flag to indicate parsing of line status */

int done = FALSE;

int type; /* eg command number */

int onclick = 0;/* 0 = noninteractive ; 1 = onclick ; 2 = draggable*/

int slider = 0;/* slider=1: x-values ; slider=2: y-values;slider=3 angle values */

int use_affine = FALSE;

int use_rotate = FALSE;

int use_filled = 0; /* 0:no fill, 1:fill,2=grid?,3=hatch?,4=diamond?,5=dot?,6=image? */

int use_dashed = FALSE; /* dashing not natively supported in firefox, for now... */

char buffer[MAX_BUFFER];/* contains js-functions with arguments ... all other basic code is directly printed into js-include file */

char *getfile_cmd = "";

/******************************************************************************

** Main Program

******************************************************************************/

int main(int argc, char *argv[]){

    /* need unique id for every call to canvasdraw: rand(); is too slow...will result in many identical id's */

    struct timeval tv;struct timezone tz;gettimeofday(&tv, &tz);

    unsigned int canvas_root_id = (unsigned int) tv.tv_usec;

    infile = stdin;/* read flyscript via stdin */

    int i,c;

    double double_data[MAX_INT+1];

    int int_data[MAX_INT+1];

    for(i=0;i<MAX_INT;i++){int_data[i]=0;double_data[i]=0;}

    int use_parametric = FALSE;/* will be reset after parametric plotting */

    int use_axis = FALSE;

    int use_axis_numbering = -1;

    int use_snap = 0; /* 0 = none 1=grid: 2=x-grid: 3=y-grid: 4=snap to points */

    int use_offset = 0;/* use_offset only for text shape objects... 0=none;1=yoffset;2=xoffset;3=xyoffset;4=centered*/

    int use_pan_and_zoom = FALSE;

    int use_safe_eval = FALSE; /* if true, add just once: js function to evaluate userinput values for plotting etc */

    int use_js_math = FALSE; /* if true add js-function to convert math_function --> javascript math_function */

    int use_js_plot = FALSE; /* if true, let js-engine plot the curve */

    int jsplot_cnt = 0; /* keepint track on the curve identity */

    int print_drag_params_only_once = FALSE;/* avoid multiple useless identical lines about javascript precision and use_dragdrop */

    int include_special_OEF_reply = FALSE; /* used for including extra read_canvas_images();*/

    int line_width = 1;

    int decimals = 2;

    int precision = 100; /* 10 = 1;100=2;1000=3 decimal display for mouse coordinates or grid coordinate.May be redefined before every object */

    int use_userdraw = FALSE; /* flag to indicate user interaction */

    int drag_type = -1;/* 0,1,2: xy,x,y */

    int use_tooltip = -1; /* 1= tooltip 2= popup window*/

    char *tooltip_text = "Click here";

    char *temp = ""; /* */

    char *bgcolor = "";/* used for background of canvas_div ; default is tranparent */

    char *stroke_color = "255,0,0";

    char *fill_color = "0,255,0";

    char *font_family = "12px Ariel"; /* commands xaxistext,yaxistext,legend,text/textup/string/stringup may us this */

    char *font_color = "#00000";

    char *draw_type = "points";

    char *fly_font = "normal";

    char *input_style = "font-family:Ariel;text-align:center;color:blue;font-size:12px;background-color:orange;";

    char *flytext = "";

    char *affine_matrix = "[1,0,0,1,0,0]";

    char *function_label = "f(x)=";

    int use_pattern = 0; /* used in drag&drop library: grid=2,hatch=3,diamond=4,dot=5*/

    int canvas_type = DRAG_CANVAS; /* to use a specific canvas  for filling etc */

    int pixelsize = 1;

    int reply_format = 0;

    int input_cnt = 0;

    int ext_img_cnt = 0;

    int slider_cnt = 0;

    int fill_cnt = 0;

    int font_size = 12;/* this may lead to problems when using something like <code>fontfamily Italic 24px Ariel</code> the ''fontsize`` value is not substituted into fontfamily !! */

    int fly_font_size = 12; /*fly_font_size is relative to this... */

    int dashtype[2] = { 4 , 4 }; /* just line_px and space_px: may have more arguments...if needed in future */

    int js_function[MAX_JS_FUNCTIONS]; /* javascript functions include objects on demand basis: only once per object type */

    for(i=0;i<MAX_JS_FUNCTIONS;i++){js_function[i]=0;}

    int arrow_head = 8; /* size in px needed for arrow based  userdraw:  "userdraw arrow,color" */

    int crosshair_size = 5; /* size in px*/

    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  */

    int found_size_command = 0; /* 1 = found size ; 2 = found xrange; 3 = found yrange: just to flag an error message */

    int click_cnt = 0; /*counter to identify the "onclick" ojects ; 0 is first object set onclick: reply[click_cnt]=1 when clicked ; otherwise reply[click_cnt]=0 ; click_cnt is only increased when another object is set  again */

    int clock_cnt = 0; /* counts the amount of clocks used -> unique object clock%d */

    int linegraph_cnt = 0; /* identifier for command 'linegraph' ; multiple line graphs may be plotted in a single plot*/

    int barchart_cnt = 0; /* identifier for command 'barchart' ; multiple charts may be plotted in a single plot*/

    int boxplot_cnt = 0;

    int numberline_cnt = 0;

    int legend_cnt = -1; /* to allow multiple legends to be used, for multiple piecharts etc  */

    int reply_precision = 100; /* used for precision of student answers / drawings */

    double angle = 0.0;

    char *rotation_center = "null";

    int use_animate = 0; /* used for jscurve / js parametric  */

    int use_input_xy = 0; /* 1= input fields 2= textarea 3=calc y value*/

    int use_slider_display = 0; /* in case of a slider, should we display its value ?*/

    size_t string_length = 0; /* measure the size of the user input fly-string */

    double stroke_opacity = 0.8; /* use some opacity as default */

    double fill_opacity = 0.8;/* use some opacity as default */

    char *URL = "http://localhost/images";

    char *slider_function_x = "x";

    char *slider_function_y = "y";

    memset(buffer,'\0',MAX_BUFFER);

    void *tmp_buffer = "";

    /* default writing a unzipped js-include file into wims getfile directory */

    char *w_wims_session = getenv("w_wims_session");

    if(  w_wims_session == NULL || *w_wims_session == 0 ){canvas_error("Hmmm, your wims environment does not exist...\nCanvasdraw should be used within wims.");}

    int L0=strlen(w_wims_session) + 21;

    char *getfile_dir = my_newmem(L0); /* create memory to fit string precisely */

    snprintf(getfile_dir,L0, "../sessions/%s/getfile",w_wims_session);/* string will fit precisely  */

    mode_t process_mask = umask(0); /* check if file exists */

    int result = mkdir(getfile_dir, S_IRWXU | S_IRWXG | S_IRWXO);

    if( result == 0 || errno == EEXIST ){

     umask(process_mask); /* be sure to set correct permission */

     char *w_session = getenv("w_session");

     int L1 = (int) (strlen(w_session)) + find_number_of_digits(canvas_root_id) + 48;

     getfile_cmd = my_newmem(L1); /* create memory to fit string precisely */

     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 */

    /* write the include tag to html page:<script src="wims.cgi?session=%s&cmd=getfile&special_parm=11223344_js"></script> */

    /* now write file into getfile dir*/

    char *w_wims_home = getenv("w_wims_home"); /* "/home/users/wims": we need absolute path for location */

    int L2 = (int) (strlen(w_wims_home)) + (int) (strlen(w_wims_session)) + find_number_of_digits(canvas_root_id) + 23;

    char *location = my_newmem(L2); /* create memory to fit string precisely */

    snprintf(location,L2,"%s/sessions/%s/getfile/%d.js",w_wims_home,w_wims_session,canvas_root_id);/*absolute path */

    js_include_file = fopen(location,"w");/* open the file location for writing */

    /* check on opening...if nogood: mount readonly? disk full? permissions not set correctly? */

    if(js_include_file == NULL){ canvas_error("SHOULD NOT HAPPEN: could not write to javascript include file...check your system logfiles !" );}

/* ----------------------------------------------------- */

/* while more lines to process */

    while(!finished){

        if(line_number>1 && found_size_command == 0 && use_tooltip != 2 ){canvas_error("command \"size xsize,ysize\" needs to come first ! ");}

        type = get_token(infile);

        done = FALSE;

        /*

        @ canvasdraw

        @ will try use the same syntax as@ general syntax <ul><li>The transparency of all objects can be controlled by command <a href="#opacity">opacity [0-255],[0,255]</a></il><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></li><li>a fillable object can be set fillable by starting the object command with an ''f`` (like frect,fcircle,ftriangle...)<br />or by using the keyword <a href="#filled">filled</a> before the object command.<br />The fill colour of ''non_userdraw`` objects will be the stroke colour...(flydraw harmonization 19/10/2013)<br />non-solid filling (grid,hatch,diamond,dot,text) is provided using command <a href="#fillpattern">fillpattern a_pattern</a><br />for <a href="#filltoborder">filltoborder x0,y0,color</a> or <a href="#filltoborder">fill x0,y0,color</a> type filling (eg fill a region around x0,y0 with color until a border is encountered),<br />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><br />commands with only numeric or colour arguments may be using a '';`` as command separator (instead of a new line)<br />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 <code>family</code> 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:<br /><ul>general syntax rule:<li><code>single_object x1,y1,...,color</code></li><li><code>multi_object color,x1,y1,...</code></li></ul><li>All inputfields or textareas generated, can be styled individually using command <a href="#inputstyle">inputstyle some_css</a><br/>the fontsize used for labeling these elements can be controlled by command <a href="#fontsize">fontsize int</a> <br />command <code>fontfamily</code> is <b>not</b> active for these elements </li></ul>

        @ 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 />&nbsp;var script_len = canvas_scripts.length;<br />&nbsp;var draw_reply = "";<br />&nbsp;var found_result = false;<br />&nbsp;for(var p = 0 ; p < script_len ; p++){<br />&nbsp;&nbsp;var fun = eval("read_canvas"+canvas_scripts[p]);<br />&nbsp;&nbsp;if( typeof fun === 'function'){<br />&nbsp;&nbsp;&nbsp;var result = fun();<br />&nbsp;&nbsp;&nbsp;if( result&nbsp;&nbsp;&& result.length != 0){<br />&nbsp;&nbsp;&nbsp;&nbsp;if(script_len == 1 ){ return result;};<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;found_result = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_reply = draw_reply + result + "\\n" flydraw or svgdraw to paint a html5 bitmap image<br />by generating a tailor-made javascript include file: providing only the js-functionality needed to perform the job.<br />thus ensuring a minimal strain on the client browser <br />(unlike some popular ''canvas-do-it-all`` libraries, who have proven to be not suitable for low-end computers found in schools...) ;<br />&nbsp;&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;};<br />&nbsp;if( found_result ){return draw_reply;}else{return null;};<br />};</code>

        @ 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>

        @ 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>

        @ be aware that older browsers will probably not work correctly<br />no effort has been undertaken to add glue code for older browsers !! <br />in any case it is not wise to use older browsers...not just for canvasdraw

        @ 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.

        @ there is limited support for touch devices: touchstart,touchmove and touchend in commands <a href="#userdraw">userdraw primitives </a>, <a href="#protractor">protractor</a> and <a href="#ruler">ruler</a><br />only single finger gestures are supported (for now)<br />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>

        */

        switch(type){

        case END:

        finished = 1;

        done = TRUE;

        break;

        case 0:

            sync_input(infile);

            break;

        case CENTERED:

         use_offset = 4;

         /*

         @ centered

         @ keyword ; to place the text centered (in width and height) on the text coordinates(x:y)

         @ may be used for text exactly centered on its (x;y)

         @ use <a href="#fontfamily">fontfamily</a> for setting the font

         @ 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``)

         @%centered%size 400,400%xrange -10,10%yrange -10,10%fontfamily 12pt Ariel%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

        */

        break;

        case COMMENT:

            sync_input(infile);

            break;

        case AFFINE:

        /*

         @ affine a,b,c,d,tx,ty

         @ defines a transformation matrix for subsequent objects

         @ follows the HTML5 / Canvas transformation standards<br />note: images drawn by setting skew params a &amp; d will thus be very different from Flydraw's "affine a,b,c,d,e,tx,ty" !!

         @ use keyword <a href='#killaffine'>killaffine</a> to end the transformation...the next objects will be drawn in the original x/y-range

         @ note 1: only ''draggable`` / ''onclick`` type of objects (e.g. objects in the ''drag/drop/onclick-library``) can be transformed.

         @ note 2: do not use <code>onclick</code> or <code>drag xy</code> with tranformation / rotation objects: the mouse coordinates do not get transformed (yet)

         @ note 3: no matrix operations on the transformation matrix implemented (yet)

         @ a: Scales the drawings horizontally

         @ b: Skews the drawings horizontally

         @ c: Skews the drawings vertically

         @ d: Scales the drawings vertically

         @ tx: Moves the drawings horizontally in xrange coordinate system

         @ ty: Moves the drawings vertically in yrange coordinate system

         @ the data precision may be set by preceding command ''precision int``

         @%affine%size 400,400%xrange -10,10%yrange -10,10%opacity 255,255%fcircle 5,5,40,blue%affine 1,0,0,1,-10,-10%fcircle 5,5,40,green

        */

            for(i = 0 ; i<6;i++){

                switch(i){

                    case 0: double_data[0] = get_real(infile,0);break;

                    case 1: double_data[1] = get_real(infile,0);break;

                    case 2: double_data[2] = get_real(infile,0);break;

                    case 3: double_data[3] = get_real(infile,0);break;

                    case 4: double_data[4] = get_real(infile,0);break;

                    case 5: double_data[5] = get_real(infile,1);

                        use_affine = TRUE;

                        decimals = find_number_of_digits(precision);

                        string_length = snprintf(NULL,0,     "[%.*f,%.*f,%.*f,%.*f,%.*f,%.*f] ",decimals,double_data[0],decimals,double_data[1],decimals,double_data[2],decimals,double_data[3],decimals,double_data[4]*xsize/(xmax - xmin),decimals,-1*double_data[5]*ysize/(ymax - ymin));

                        check_string_length(string_length);affine_matrix = my_newmem(string_length+1);

                        snprintf(affine_matrix,string_length,"[%.*f,%.*f,%.*f,%.*f,%.*f,%.*f] ",decimals,double_data[0],decimals,double_data[1],decimals,double_data[2],decimals,double_data[3],decimals,double_data[4]*xsize/(xmax - xmin),decimals,-1*double_data[5]*ysize/(ymax - ymin));

                        break;

                    default: break;

                }

            }

        break;

        case ANGLE:

        /*

         @ angle xc,yc,width,start_angle,end_angle,color

         @ width is in x-range

         @ will zoom in/out

         @ if size is controlled by command <a href='#slider'>slider</a>, use radians to set limits of slider.

         @%angle%size 400,400%xrange -10,10%yrange -10,10%filled%fillcolor orange%angle 0,0,4,10,135,blue

         @%angle_slider%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%fillcolor black%strokecolor yellow%slider 0,2*pi,400,30,angle degrees,Rotate arrow%arrow 0,0,8,0,8,red%filled%fillcolor orange%angle 0,0,4,0,0,red

        */

            for(i=0;i<7;i++){

                switch(i){

                    case 0:double_data[0] = get_real(infile,0);break; /* x-values */

                    case 1:double_data[1] = get_real(infile,0);break; /* y-values */

                    case 2:double_data[2] = get_real(infile,0);break; /* width in pixels ! */

                    case 3:double_data[3] = get_real(infile,0);break; /* start angle in degrees */

                    case 4:double_data[4] = get_real(infile,0);break; /* end angle in degrees */

                    case 5:stroke_color = get_color(infile,1);/* name or hex color */

                        decimals = find_number_of_digits(precision);

                        fprintf(js_include_file,"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\",%d,%s,%d,%d,%s,%d,%d));\n",drag_type,click_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,use_affine,affine_matrix,slider,slider_cnt,rotation_center,use_offset,use_pattern);

                        reset();

                    break;

                }

            }

            break;

        case ANIMATE:

        /*

         @ animate

         @ keyword

         @ the animated point is a filled rectangle ; adjust colour with command <code>fillcolor colorname/hexnumber</code>

         @ use linewidth to adjust size of the points

         @ 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

         @ only usable for command jsplot (normal functions or parametric)<br />no other object/thing can be animated -for now

         @ 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>

         @ 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>

         @%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 -2*pi,2*pi%linewidth 1%opacity 255,50%canvastype 100%fill 1.2,1.2,red%canvastype 101%fill -1.2,-1.2,blue%jsplot blue,7*cos(x),5*sin(2*x)

         @%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 -2*pi,2*pi%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,7*cos(x),5*sin(2*x),9*sin(x),5*cos(x),x^2,x

        */

            use_animate++;

            if( use_animate == 1 ){

            fprintf(js_include_file,"\nvar trace_canvas  = create_canvas%d(%d,xsize,ysize);\

            var trace_ctx = trace_canvas.getContext('2d');\

            trace_ctx.fillStyle = 'rgba(%s,%f)';\

            trace_ctx.strokeStyle = 'rgba(%s,%f)';\

            trace_ctx.lineWidth = %d;var anim_pos = 0;\n\

            function animate_this(){\

             var sync;\

             var synchrone = Math.floor(animation_steps/animation_funs);\

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

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

              sync = p*synchrone;\

              trace_ctx.fillRect(x_anim_points[sync+anim_pos]-%d, y_anim_points[sync+anim_pos]-%d,%d,%d);\

             };\

             setTimeout(function(){\

              requestAnimationFrame(animate_this);  anim_pos++;}, 50\

             );\

             if(anim_pos >= animation_steps){anim_pos = 0;};\

             };",canvas_root_id,ANIMATE_CANVAS,fill_color,fill_opacity,stroke_color,stroke_opacity,line_width,line_width,line_width,2*line_width,2*line_width);

            }

            else

            {

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

            }

            break;

        case ARC:

        /*

         @ arc xc,yc,x-width,y-height,start_angle,end_angle,color

         @ can <b>not</b> be set ''onclick`` or ''drag xy``

         @ <b>attention</b>: width in height in x/y-range

         @%arc%size 400,400%xrange -10,10%yrange -10,10%arc 0,0,4,4,10,135,red%zoom blue

         @%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

         @%arc_slider%size 400,400%xrange -10,10%yrange -10,10%grid 1,1,grey%linewidth 3%fillcolor black%strokecolor yellow%slider 0,2*pi,400,30,angle degree,Rotate arrow%arrow 0,0,8,0,8,red%filled%fillcolor orange%fillpatter hatch%opacity 255,80%arc 0,0,8,8,0,0,red

        */

            for(i=0;i<7;i++){

                switch(i){

                    case 0:double_data[0] = get_real(infile,0);break; /* x-values */

                    case 1:double_data[1] = get_real(infile,0);break; /* y-values */

                    case 2:double_data[2] = get_real(infile,0);break; /* width x-range no pixels ! */

                    case 3:double_data[3] = get_real(infile,0);break; /* height y-range no pixels ! */

                    case 4:double_data[4] = get_real(infile,0);break; /* start angle in degrees */

                    case 5:double_data[5] = get_real(infile,0);break; /* end angle in degrees */

                    case 6:stroke_color = get_color(infile,1);/* name or hex color */

                    /* in Shape library:

                        x[0] = x[1] = xc = double_data[0]

                        y[0] = y[1] = yc = double_data[1]

                        w[0] = width = double_data[2]

                        w[1] = height = double_data[3]

                        h[0] = start_angle = double_data[4]

                        h[1] = end_angle = double_data[5]

                    */

                        decimals = find_number_of_digits(precision);

                        fprintf(js_include_file,"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\",%d,%s,%d,%d,%s,%d,%d));\n",drag_type,click_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,use_affine,affine_matrix,slider,slider_cnt,rotation_center,use_offset,use_pattern);

                        reset();

                    break;

                }

            }

            break;

        case ARROW:

        /*

        @ arrow x1,y1,x2,y2,h,color

        @ alternative: <code>vector</code>

        @ draw a single headed arrow / vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color 'color'

        @ use command <code>linewidth int</code> to adjust thickness of the arrow

        @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>

        @%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

        @%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

        */

            for(i=0;i<6;i++){

                switch(i){

                    case 0: double_data[0] = get_real(infile,0);break; /* x */

                    case 1: double_data[1] = get_real(infile,0);break; /* y */

                    case 2: double_data[2] = get_real(infile,0);break; /* x */

                    case 3: double_data[3] = get_real(infile,0);break; /* y */

                    case 4: arrow_head = (int) get_real(infile,0);break;/* h */

                    case 5: stroke_color = get_color(infile,1);/* name or hex color */

                        decimals = find_number_of_digits(precision);

                        fprintf(js_include_file,"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\",%d,%s,%d,%d,%s,%d,%d));\n",drag_type,click_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,use_affine,affine_matrix,slider,slider_cnt,rotation_center,use_offset,use_pattern);

                        if(onclick > 0){click_cnt++;}

                        /* click_cnt++;*/

                        reset();

                        break;

                }

            }

            break;

        case ARROWS:

        /*

        @ arrows color,head (px),x1,y1,x2,y2...x_n,y_n

        @ alternative: <code>vectors</code>

        @ draw single headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color 'color'

        @ use command <code>linewidth int</code> to adjust thickness of the arrow

        @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually

        @%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%

        @%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%

        */

            stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/

            fill_color = stroke_color;

            arrow_head = (int) get_real(infile,0);/* h */

            i=0;

            while( ! done ){     /* get next item until EOL*/

                if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}

                if(i%2 == 0 ){

                    double_data[i] = get_real(infile,0); /* x */

                }

                else

                {

                    double_data[i] = get_real(infile,1); /* y */

                }

                i++;

            }

            decimals = find_number_of_digits(precision);

            for(c = 0 ; c < i-1 ; c = c+4){

                fprintf(js_include_file,"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\",%d,%s,%d,%d,%s,%d,%d));\n",drag_type,click_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,use_affine,affine_matrix,slider,slider_cnt,rotation_center,use_offset,use_pattern);

                if(onclick > 0){click_cnt++;}

                /* click_cnt++; */

            }

            reset();

            break;

        case ARROW2:

        /*

        @ arrow2 x1,y1,x2,y2,h,color

        @ draw a double headed arrow/vector from (x1:y1) to (x2:y2)<br />with arrowhead size h in px and in color ''color``

        @ use command <code>arrowhead int</code> to adjust the arrow head size

        @ use command <code>linewidth int</code> to adjust thickness of the arrow

        @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a>

        @%arrow2%size 400,400%xrange -10,10%yrange -10,10%drag xy%arrow2 0,0,4,3,8,blue%

        */

            for(i=0;i<6;i++){

                switch(i){

                    case 0: double_data[0] = get_real(infile,0);break; /* x */

                    case 1: double_data[1] = get_real(infile,0);break; /* y */

                    case 2: double_data[2] = get_real(infile,0);break; /* x */

                    case 3: double_data[3] = get_real(infile,0);break; /* y */

                    case 4: arrow_head = (int) get_real(infile,0);break;/* h */

                    case 5: stroke_color = get_color(infile,1);/* name or hex color */

                        decimals = find_number_of_digits(precision);

                        fprintf(js_include_file,"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\",%d,%s,%d,%d,%s,%d,%d));\n",drag_type,click_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,use_affine,affine_matrix,slider,slider_cnt,rotation_center,use_offset,use_pattern);

                        if(onclick > 0){click_cnt++;}

                        /* click_cnt++;*/

                        reset();

                        break;

                }

            }

            break;

        case ARROWS2:

        /*

        @ arrows2 color,head (px),x1,y1,x2,y2...x_n,y_n

        @ draw double headed arrows / vectors from (x1:y1) to (x2:y2) ... (x3:y3) to (x4:y4) etc ... in color ''color``

        @ use command <code>linewidth int</code> to adjust thickness of the arrows

        @ may be set <a href="#drag">draggable</a> / <a href="#onclick">onclick</a> individually

        @%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%

        */

            stroke_color=get_color(infile,0); /* how nice: now the color comes first...*/

            fill_color = stroke_color;

            arrow_head = (int) get_real(infile,0);/* h */

            i=0;

            while( ! done ){     /* get next item until EOL*/

                if(i > MAX_INT - 1){canvas_error("too many points in argument: repeat command multiple times to fit");}

                if(i%2 == 0 ){

                    double_data[i] = get_real(infile,0); /* x */

                }

                else

                {

                    double_data[i] = get_real(infile,1); /* y */

                }

                i++;

            }

            decimals = find_number_of_digits(precision);

            for(c = 0 ; c < i-1 ; c = c+4){

                fprintf(js_include_file,"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\",%d,%s,%d,%d,%s,%d,%d));\n",drag_type,click_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,use_affine,affine_matrix,slider,slider_cnt,rotation_center,use_offset,use_pattern);

                if(onclick > 0){click_cnt++;}

                /* click_cnt++; */

            }

            reset();

            break;

        case ARROWHEAD:

        /*

        @ arrowhead int

        @ default 8 (pixels)

        */

            arrow_head = (int) (get_real(infile,1));

            break;

        case AUDIO:

        /*

        @ audio x,y,w,h,loop,visible,audiofile location

        @ x,y: left top corner of audio element (in xrange / yrange)

        @ w,y: width and height in pixels

        @ loop: 0 or 1 ( 1 = loop audio fragment)

        @ visible: 0 or 1 (1 = show controls)

        @ audio format may be in *.mp3 or *.ogg

        @ If you are using *.mp3: be aware that FireFox will not (never) play this ! (Pattented format)

        @ if you are using *.ogg: be aware that Microsoft based systems not support it natively

        @ To avoid problems supply both types (mp3 and ogg) of audiofiles.<br />the program will use both as source tag

        */

            if( js_function[DRAW_AUDIO] != 1 ){ js_function[DRAW_AUDIO] = 1;}

            for(i=0;i<7;i++){

                switch(i){

                    case 0: int_data[0] = x2px(get_real(infile,0)); break; /* x in x/y-range coord system -> pixel */

                    case 1: int_data[1] = y2px(get_real(infile,0)); break; /* y in x/y-range coord system  -> pixel */

                    case 2: int_data[2] = (int) (get_real(infile,0)); break; /* pixel width */

                    case 3: int_data[3] = (int) (get_real(infile,0)); break; /* height pixel height */

                    case 4: int_data[4] = (int) (get_real(infile,0)); if(int_data[4] != TRUE){int_data[4] = FALSE;} break; /* loop boolean */

                    case 5: int_data[5] = (int) (get_real(infile,0)); if(int_data[5] != TRUE){int_data[5] = FALSE;} break; /* visible boolean */

                    case 6:

                    temp = get_string(infile,1);

                    if( strstr(temp,".mp3") != 0 ){ temp = str_replace(temp,".mp3","");}

                    if( strstr(temp,".ogg") != 0 ){ temp = str_replace(temp,".ogg","");}

                    string_length = snprintf(NULL,0,  "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);

                    check_string_length(string_length);tmp_buffer = my_newmem(string_length+1);

                    snprintf(tmp_buffer,string_length,"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);

                    add_to_buffer(tmp_buffer);

                    break;

                    default:break;

                }

            }

            reset();

            break;

        case AXIS_NUMBERING:

        /*

            @ axisnumbering

            @ keyword (no arguments required)

            @ 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>

            @ to be used before command grid (see <a href="#grid">command grid</a>)

        */

            use_axis_numbering++;

            break;

        case AXIS:

        /*

            @ axis

            @ keyword (no arguments required)

            @ to be used before command grid (see <a href="#grid">command grid</a>)

        */

            use_axis = TRUE;

            break;

        case BARCHART:

        /*

        @ barchart x_1:y_1:color_1:x_2:y_2:color_2:...x_n:y_n:color_n

        @ may <b>only</b> to be used together with command <a href='#grid'>grid</a>

        @ 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>

        @ use command <a href='#legend'>legend</a> to provide an optional legend in right-top-corner

        @ multiple barchart command may be used in a single script

        @ also see command <a href='#piechart'>piechart</a>

        @ note: your arguments are not checked by canvasdraw: use your javascript console in case of trouble...

        @%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 Ariel%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

        */

            temp = get_string(infile,1);

            if( strstr( temp,":" ) != 0 ){ temp = str_replace(temp,":","\",\""); }

            fprintf(js_include_file,"var barchart_%d = [\"%s\"];",barchart_cnt,temp);

            barchart_cnt++;

            reset();

            break;

        case BEZIER:

        /*

        @ bezier color,x_start,y_start,x_first,y_first,x_second,y_second,x_end,y_end

        @ draw a bezier curve between points, starting from (x_start:y_start)

        @ can <b>not</b> be dragged or set onclick

        */

            if( js_function[DRAW_BEZIER] != 1 ){ js_function[DRAW_BEZIER] = 1;}

            decimals = find_number_of_digits(precision);

            for(i = 0 ; i < 9; i++){

                switch(i){

                    case 0: stroke_color = get_color(infile,0);break;

                    case 1: double_data[0] = get_real(infile,0);break;/* start x */

                    case 2: double_data[1] = get_real(infile,0);break;/* start y */

                    case 3: double_data[2] = get_real(infile,0);break;/*The x-coordinate of the first Bézier control point */

                    case 4: double_data[3] = get_real(infile,0);break;/*The y-coordinate of the first Bézier control point */

                    case 5: double_data[4] = get_real(infile,0);break;/*The x-coordinate of the second Bézier control point */

                    case 6: double_data[5] = get_real(infile,0);break;/*The y-coordinate of the second Bézier control point */

                    case 7: double_data[6] = get_real(infile,0);break;/*The x-coordinate of the Bézier end point */

                    case 8: double_data[7] = get_real(infile,1);/*The y-coordinate of the Bézier end point */

                        string_length = snprintf(NULL,0,"draw_bezier(%d,%d,[%f,%f,%f,%f,%f,%f,%f,%f],\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.2f,%d,%s);",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,use_affine,affine_matrix);

                        check_string_length(string_length);tmp_buffer = my_newmem(string_length+1);

                        snprintf(tmp_buffer,string_length,"draw_bezier(%d,%d,[%f,%f,%f,%f,%f,%f,%f,%f],\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.2f,%d,%s);",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,use_affine,affine_matrix);

                        add_to_buffer(tmp_buffer);

                        break;

                    default: break;

                }

            }

            reset();

            break;

        case BGCOLOR:

        /*

         @ bgcolor colorname or #hex

         @ use this color as background of the "div" containing the canvas(es)

         @%bgcolor%size 400,400%xrange -10,10%yrange -10,10%bgcolor lightblue

        */

        /* [255,255,255]*/

            bgcolor = get_string(infile,1);

            if(strstr(bgcolor,"#") == NULL){ /* convert colorname -> #ff00ff */

                int found = 0;

                for( i = 0; i < NUMBER_OF_COLORNAMES ; i++ ){

                    if( strcmp( colors[i].name , bgcolor ) == 0 ){

                        bgcolor = colors[i].hex;

                        found = 1;

                        break;

                    }

                }

                if(found == 0){canvas_error("your bgcolor is not in my rgb.txt data list: use hexcolor...something like #a0ffc4");}

            }

            fprintf(js_include_file,"/* set background color of canvas div */\ncanvas_div.style.backgroundColor = \"%s\";canvas_div.style.opacity = %f;\n",bgcolor,fill_opacity);

            break;

        case BGIMAGE:

        /*

         @ bgimage image_location

         @ use an image as background; technical: we use the background of ''canvas_div``