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"

void *tmp_buffer;

FILE    *js_include_file;

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

**  Internal Functions

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

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

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

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

/*

1 = onclick ;

2 = draggable ;

3 = click+slideable ;

4 = slideable without click

5 = draggable + slideable

*/

char *slider_type="0";

char *my_sliders = "[-1]";

int use_slider = -1;

int last_slider = 0;

double double_data[MAX_INT+1];

int int_data[MAX_INT+1];

int dragstuff[MAX_DRAGSTUFF];

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

double affine_matrix[] = {1,0,0,1,0,0};

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

double angle = 0.0;

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

char *getfile_cmd = "";

int reply_format = 0;

unsigned int canvas_root_id;

char *css_class;

int font_size;

char *draw_type;

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

int input_cnt = 0;

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

char *function_label = "[\"f(x)=\",\"g(x)=\",\"h(x)=\"]";

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

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

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 legend_cnt = -1; /* to allow multiple legends to be used, for multiple piecharts etc  */

int use_axis = FALSE;

int use_axis_numbering = -1;

int no_reset = FALSE;

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

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

    canvas_root_id = (unsigned int) tv.tv_usec;

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

    int i,c;

    for(i=0;i<MAX_DRAGSTUFF;i++){dragstuff[i] = 0;}

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

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

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

    int line_width = 1;

    int decimals = 2;

    int use_dragstuff = 0;

    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 = 0; /* 0=none,1=userdraw,2=multidraw flag to indicate user interaction */

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

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

    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 = "255,255,255";

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

    char *font_color = "#00000";

    draw_type = "points";

    char *fly_font = "normal";

    css_class = "none";

    char *flytext = "";

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

    int pixelsize = 1;

    int fill_cnt = 0;

    int use_zoom = 0;

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

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

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

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

    int boxplot_cnt = 0;

    int drawxml_cnt = 0;

    int numberline_cnt = 0;

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

    char *rotation_center = "null";/* needs to be removed... but is used for canvas CTX based rotation*/

    double rotationcenter[] = {0,0}; /* use for recalculating x/y values on rotation() */

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

    int use_input_xy = 0; /* 1= input fields 2= textarea 3=calc y 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.5;/* use some opacity as default */

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

    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

        @ Canvasdraw will try use the same basic syntax structure as flydraw

        @ 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></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 />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 />note: do not use a <b>f</b> with this non-solid pattern filling !<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>. Commands with only numeric or colour 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:<br /><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><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 + "newline";<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> <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...<br />For example a typical canvasdraw script is between 5 and 40 kB...a large library like JSXgraph is approx 600 kB<br />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 !<br />

        @ Canvasdraw can be used 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...)

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

        @ Be aware that combining several different objects and interactivity may lead to problems.

        @ 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="#multidraw">multidraw primitives </a>, <a href="#protractor">protractor</a>, <a href="#ruler">ruler</a> and probably a few others... <br />Only single finger gestures are supported (for now).<br />The use of a special pen is advised for interactive drawing on touch devices.<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 AFFINE:

        /*

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

         @ defines a transformation matrix for subsequent objects

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

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

         @ <b>note</b>: not all affine operations on canvasdraw objects will be identical to flydraw's behaviour. Make sure to check !

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

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

        */

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

                switch(i){

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

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

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

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

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

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

                        use_affine = TRUE;

                        break;

                    default: break;

                }

            }

        break;

        case ALLOW_DUPLICATES:

        /*

         @ duplicates || allowdups

         @ keyword (no arguments)

         @ only useful in case of a <a href="#multidraw">multidraw</a> student reply.

         @ only useful in default <a href="#replyformat">replyformat</a> (eg in case of a not specified replyformat).

         @ if set, duplicate (x:y) coordinates will not be removed from the student reply.

         @ technical: a javascript variable "allow_duplicate_answer = 1;" is declared.

         @ default for command multidraw is: removal of duplicates.

        */

        fprintf(js_include_file,"var allow_duplicate_answers = 1;");

        break;

        case ANGLE:

        /*

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

         @ width is in x-range

         @ angles are in degrees

         @ not compatible with ''flydraw``

         @ will zoom in/out

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

         @ ''angle`` and <a href="#arc">arc</a>  are exceptions in case of sliders...they are always active (e.g. not click-activated)

         @%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%strokecolor blue%slider -2*pi,2*pi,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 -2*pi,2*pi,260,28,angle active radian,red arrow%arrow 0,1,8,1,8,red%fillpattern dot%angle 0,1,2,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);

                    if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}

                    if(use_affine == TRUE ){ transform(2,2);}

                    break; /* y-values */

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

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

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

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

                        if( use_slider != -1 ){ onclick = 3; }/* always active in case of slider */

                        decimals = find_number_of_digits(precision);

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

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

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

                        add_to_buffer(tmp_buffer);

                        dragstuff[17] = 1;

                        if(use_dragstuff == 0 ){ use_dragstuff = 1; }

                        if(onclick != 0){object_cnt++;}/* object_cnt++;*/

                    break;

                }

            }

            break;

        case ANIMATE:

        /*

         @ animate

         @ keyword

         @ if set, it will animate a point on a curve

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

         @ 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 in combination with command <a href='#jsplot'>jsplot</a> (normal functions or parametric)

         @ 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 not be set ''onclick`` or ''drag xy``

         @ compatible with ''flydraw``

         @ attention: width & height in x/y-range

         @ better use command <a href='#angle'>angle</a> for use with a <a href='#slider'>slider</a>

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

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

        */

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

                    if(use_rotate == TRUE ){rotate(2,angle,rotationcenter,2);}

                    if(use_affine == TRUE ){ transform(4,2);}

                    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) - angle ;break; /* start angle in degrees */

                    case 5:double_data[5] = get_real(infile,0) - angle;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]

                    */

                        if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */

                        decimals = find_number_of_digits(precision);

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

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

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

                        add_to_buffer(tmp_buffer);reset();

                        dragstuff[12] = 1;

                        if(onclick != 0){object_cnt++;}

                        if(use_dragstuff == 0 ){ use_dragstuff = 1; }

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

                            if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}

                            if(use_affine == TRUE ){ transform(4,2);}

                            if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */

                            decimals = find_number_of_digits(precision);

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

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

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

                            if(onclick != 0){object_cnt++;}

                            /* object_cnt++;*/

                            add_to_buffer(tmp_buffer);reset();

                            dragstuff[8] = 1;

                            if(use_dragstuff == 0 ){ use_dragstuff = 1; }

                            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%

        @%arrows_drag_slider%size 400,400%xrange -10,10%yrange -10,10%linewidth 2%drag xy%# Click arrow(s) to activate %slider 0,2*pi,300,30,angle degrees,Rotate%slider -5,5*pi,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%

        */

            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++;

            }

            if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}

            if( use_affine == TRUE ){ transform(i-1,2);}

            if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */

            decimals = find_number_of_digits(precision);

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

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

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

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

                add_to_buffer(tmp_buffer);

                if(onclick != 0){object_cnt++;}/* object_cnt++; */

            }

            if(use_dragstuff == 0 ){ use_dragstuff = 1; }

            dragstuff[8] = 1;

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

                        if(use_rotate == TRUE ){rotate(4,angle,rotationcenter,2);}

                        if( use_affine == 1 ){ transform(4,2);}

                        if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */

                        decimals = find_number_of_digits(precision);

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

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

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

                        add_to_buffer(tmp_buffer);

                        if(onclick != 0){object_cnt++;}/* object_cnt++;*/

                        if(use_dragstuff == 0 ){ use_dragstuff = 1; }

                        dragstuff[10] = 1;

                        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++;

            }

            if(use_rotate == TRUE ){rotate(i-1,angle,rotationcenter,2);}

            if( use_affine == 1 ){ transform(i-1,2);}

            if( use_slider != -1 && onclick == 0){ onclick = 3; }/* no drag&onclick but slideable */

            decimals = find_number_of_digits(precision);

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

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

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

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

                add_to_buffer(tmp_buffer);

                if(onclick != 0){object_cnt++;}/* object_cnt++; */

            }

            dragstuff[10] = 1;

            if(use_dragstuff == 0 ){ use_dragstuff = 1; }

            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

        */

            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 = 1 + 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);

                    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;