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_functions(int js_functions[], 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 = 2;

double tmin = -2;

/* 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 = FALSE;

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

    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 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 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 font_size = 12;/* this may lead to problems when using something like "fontfamily Italic 24px Ariel" the "font_size" 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 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 clickfillmarge = 20; /* in pixels : if the 'remove click' is within this marge, the filling is removed */

    int animation_type = 9; /* REMOVED == object type curve in drag library */

    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 type="text/javascript" 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 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...)

        @ 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'<br />(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)</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 'family' may be combined with keywords <a href="#snaptogrid">"snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command "snaptopoints x1,y1,x2,y2,..."  </li><li>every draggable | onclick object may be combined with keywords <a href="#snaptogrid">snaptogrid | xsnaptogrid | ysnaptogrid | snaptofunction</a> or command "snaptopoints x1,y1,x2,y2,..."  </li><li>almost every command for a single object has a multiple objects counterpart:<br /><ul>general syntaxrule:<li><em>single_object</em> x1,y1,...,color</li><li><em>multi_object</em> color,x1,y1,...</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 'fontfamily' 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 'read_canvas()' and / or 'read_dragdrop()' can read all interactive userdata from these images.<br />The global array 'canvas_scripts' 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 />fun = eval("read_canvas"+canvas_scripts[0]) 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 /><em>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";<br />&nbsp;&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;&nbsp;};<br />&nbsp;&nbsp;};<br />&nbsp;if( found_result ){return draw_reply;}else{return null;};<br />};</em>

        @ 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 /><small>\\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 />}</small>

        @ 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's 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 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 COMMENT:

            sync_input(infile);

            break;

        case EMPTY:

            sync_input(infile);

            break;

        case SIZE:

            /*

            @ size width,height

            @ set canvas size in pixels

            @ mandatory first command (can only be preceded by keyword <a href="#popup">'popup'</a>)

            @ if xrange and/or yrange is not given the range will be set to pixels :<br />xrange 0,xsize yrange 0,ysize<br /><b>note</b>: lower left  corner is Origin (0:0) !!! this in contrast to flydraw

            */

            found_size_command = 1;

            /* using fabs : however "xsize == int" : so "xsize = abs( (int) get_real(infile,0))" would be the idea... */

            xsize = (int)(fabs(round(get_real(infile,0)))); /* just to be sure that sizes > 0 */

            ysize = (int)(fabs(round(get_real(infile,1))));

            /* sometimes we want xrange / yrange to be in pixels...without telling x/y-range */

            xmin = 0;xmax = xsize;

            ymin = 0;ymax = ysize;

/*

 The sequence in which stuff is finally printed is important !!

*/

fprintf(stdout,"\n\

<script type=\"text/javascript\">\n\

/*<![CDATA[*/\n\

if( typeof wims_status === 'undefined' ){ var wims_status = \"$status\";};\

if( typeof use_dragdrop_reply === 'undefined' ){ var use_dragdrop_reply = false;};\

if( typeof canvas_scripts === 'undefined' ){ var canvas_scripts = new Array();};\

canvas_scripts.push(\"%d\");\n/*]]>*/\n</script>\n\

",canvas_root_id);

/* style=\"display:block;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\" */

if( use_tooltip != 2){

 fprintf(stdout,"<!-- canvasdraw div  -->\n\

<div tabindex=\"0\" id=\"canvas_div%d\" style=\"position:relative;width:%dpx;height:%dpx;margin-left:auto;margin-right:auto;\" oncontextmenu=\"return false;\"></div>\n\

<!-- tooltip and input placeholder  -->\n\

<div id=\"tooltip_placeholder_div%d\" style=\"text-align:center\"><span id=\"tooltip_placeholder%d\" style=\"display:none;\"></span></div>\

<!-- include actual object code via include file -->\n\

<script id=\"canvas_script%d\" type=\"text/javascript\" src=\"%s\"></script>\n",canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);

}

else

{

/*

set canvas_div invisible and do not include placeholder in main html page :

the js-include will also be in a popup window...to be shown when wims $status = done

*/

 fprintf(stdout,"<!-- canvasdraw div invisible  -->\n\

<div tabindex=\"0\" id=\"canvas_div%d\" style=\"display:none;position:relative;width:%dpx;height:%dpx;margin-left:auto;margin-right:auto;\" ></div>\n\

<div id=\"tooltip_placeholder_div%d\" style=\"display:none;position:relative;margin-left:auto;margin-right:auto;margin-bottom:4px;\"><span id=\"tooltip_placeholder%d\" style=\"display:none;\"></span></div>\

<!-- include actual object code via include file -->\n\

<script id=\"canvas_script%d\" type=\"text/javascript\" src=\"%s\"></script>\n",canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,getfile_cmd);

}

/* these must be global...it's all really very poor javascript :( */

fprintf(js_include_file,"\n<!-- begin generated javascript include for canvasdraw -->\n\

\"use strict\";\n\

<!-- these variables and functions must be global -->\n\

var read_dragdrop%d;\

var read_canvas%d;\

var set_clock;\

var clear_draw_area%d;\

var update_draw_area%d;\

var draw_boxplot;\

var redraw_all%d;\

var userdraw_primitive;\n\

var wims_canvas_function%d = function(){\n<!-- common used stuff -->\n\

var userdraw_x = [];var userdraw_y = [];var userdraw_radius = [];\n\

var xsize = %d;\

var ysize = %d;\

var precision = 100;\

var canvas_div = document.getElementById(\"canvas_div%d\");\

var create_canvas%d = function(canvas_type,size_x,size_y){var cnv;if(document.getElementById(\"wims_canvas%d\"+canvas_type)){ cnv = document.getElementById(\"wims_canvas%d\"+canvas_type);}else{try{ cnv = document.createElement(\"canvas\"); }catch(e){alert(\"Your browser does not support HTML5 CANVAS:GET FIREFOX !\");return;};canvas_div.appendChild(cnv);};cnv.width = size_x;cnv.height = size_y;cnv.style.top = 0;cnv.style.left = 0;cnv.style.position = \"absolute\";cnv.id = \"wims_canvas%d\"+canvas_type;return cnv;};\

function findPosX(i){ var obj = i;var curleft = 0;if(obj.offsetParent){while(1){curleft += obj.offsetLeft;if(!obj.offsetParent){break;};obj = obj.offsetParent;};}else{if(obj.x){curleft += obj.x;};};return curleft;};function findPosY(i){var obj = i;var curtop = 0;if(obj.offsetParent){while(1){curtop += obj.offsetTop;if(!obj.offsetParent){break;};obj = obj.offsetParent;};}else{if(obj.y){curtop += obj.y;};};return curtop;};\

function x2px(x){if(use_xlogscale == 0 ){return parseFloat(x*xsize/(xmax - xmin) - xsize*xmin/(xmax - xmin));}else{var x_max = Math.log(xmax)/Math.log(xlogbase);var x_min = Math.log(xmin)/Math.log(xlogbase);var x_in = Math.log(x)/Math.log(xlogbase);return x_in*xsize/(x_max - x_min) - xsize*x_min/(x_max - x_min);};};\

function px2x(px){if(use_xlogscale == 0 ){return parseFloat(px*(xmax - xmin)/xsize + xmin);}else{var x_max = Math.log(xmax)/Math.log(xlogbase);var x_min = Math.log(xmin)/Math.log(xlogbase);var x_out = x_min +px*(x_max - x_min)/(xsize);return Math.pow(xlogbase,x_out);};};\

function px2y(py){if(use_ylogscale == 0 ){return parseFloat(ymax - py*(ymax - ymin)/ysize);}else{var y_max = Math.log(ymax)/Math.log(ylogbase);var y_min = Math.log(ymin)/Math.log(ylogbase);var y_out = y_max +py*(y_min - y_max)/(ysize);return Math.pow(ylogbase,y_out);};};\

function y2px(y){if(use_ylogscale == 0){return parseFloat(-1*y*ysize/(ymax - ymin) + ymax*ysize/(ymax - ymin));}else{var y_max = Math.log(ymax)/Math.log(ylogbase);var y_min = Math.log(ymin)/Math.log(ylogbase);var y_in = Math.log(y)/Math.log(ylogbase);return (y_max - y_in)*ysize/(y_max - y_min);};};\

function scale_x_radius(rx){return rx*xsize/(xmax - xmin);};\

function scale_y_radius(ry){return ry*ysize/(ymax - ymin);};\

function distance(x1,y1,x2,y2){return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) );};\

function distance_to_line (r,q,x,y){var c = (y) - (-1/r)*(x);var xs = r*(c - q)/(r*r+1);var ys = (r)*(xs)+(q);return parseInt(Math.sqrt( (xs-x)*(xs-x) + (ys-y)*(ys-y) ));};\

function move(obj,dx,dy){for(var p = 0 ; p < obj.x.length; p++){obj.x[p] = obj.x[p] + dx;obj.y[p] = obj.y[p] + dy;};return obj;};\

function slide(obj,dx,dy){for(var p = 0 ; p < obj.x.length; p++){obj.x[p] = x2px(obj.xorg[p] + dx);obj.y[p] = y2px(obj.yorg[p] + dy);};return obj;};\

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));\

var x_use_snap_to_grid = 0;var y_use_snap_to_grid = 0;var snap_x = 1;var snap_y = 1;\

var use_snap_to_points = 0;\

function snap_to_x(x){return x2px(snap_x*(Math.round((px2x(x))/snap_x)));};\

function snap_to_y(y){return y2px(snap_y*(Math.round((px2y(y))/snap_y)));};\n\

var xlogbase = 10;\

var ylogbase = 10;\

var use_xlogscale = 0;\

var use_ylogscale = 0;\

var x_strings = null;var x_strings_up = null;\

var y_strings = null;\

var use_pan_and_zoom = 0;\

var use_jsmath = 0;\

var xstart = 0;\

var ystart = 0;\

var unit_x=\" \";\

var unit_y=\" \";\

var external_canvas = create_canvas%d(%d,xsize,ysize);\n",canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,xsize,ysize,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,canvas_root_id,EXTERNAL_IMAGE_CANVAS);

/* default add the drag code : nearly always used ...*/

  add_drag_code(js_include_file,DRAG_CANVAS,canvas_root_id);

            break;

        case XRANGE:

        /*

        @ xrange xmin,xmax

        @ alternative : rangex

        @ if not given: 0,xsize (eg in pixels)

        */

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

                switch(i){

                    case 0: xmin = get_real(infile,0);break;

                    case 1: xmax = get_real(infile,1);break;

                    default: break;

                }

            }

            if(xmin >= xmax){canvas_error(" xrange is not OK : xmin < xmax !\n");}

            fprintf(js_include_file,"var xmin = %f;var xmax = %f;\n",xmin,xmax);

            found_size_command++;

            break;

        case YRANGE:

        /*

        @ yrange ymin,ymax

        @ alternative : rangey

        @ if not given 0,ysize (eg in pixels)

        */

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

                switch(i){

                    case 0: ymin = get_real(infile,0);break;

                    case 1: ymax = get_real(infile,1);break;

                    default: break;

                }

            }

            if(ymin >= ymax){canvas_error(" yrange is not OK : ymin < ymax !\n");}

            fprintf(js_include_file,"var ymin = %f;var ymax = %f;\n",ymin,ymax);

            found_size_command++;

            break;

        case TRANGE:

        /*

        @ trange tmin,tmax

        @ alternative : ranget

        @ default -2,2

        */

            use_parametric = TRUE;

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

                switch(i){

                    case 0: tmin = get_real(infile,0);break;

                    case 1: tmax = get_real(infile,1);break;

                    default: break;

                }

            }

            if(tmin >= tmax ){canvas_error(" trange is not OK : tmin < tmax!\n");}

            break;

        case LINEWIDTH:

        /*

        @ linewidth int

        @ default 1

        */

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

            break;

        case CROSSHAIRSIZE:

        /*

        @ crosshairsize int

        @ default 8 (px)

        */

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

            break;

        case CROSSHAIR:

        /*

        @ crosshair x,y,color

        @ draw a single crosshair point at (x;y) in color 'color'

        @ use command 'crosshairsize int' and / or 'linewidth int'  to adust

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

        */

            for(i=0;i<3;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: 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,7,[%.*f],[%.*f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[0],decimals,double_data[1],crosshair_size,crosshair_size,line_width,stroke_color,stroke_opacity,fill_color,fill_opacity,use_filled,0,0,0,use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

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

                        /* click_cnt++ */

                        reset();

                        break;

                    default:break;

                }

            }

            break;

        case CROSSHAIRS:

        /*

        @ crosshairs color,x1,y1,x2,y2,...,x_n,y_n

        @ draw multiple crosshair points at given coordinates in color 'color'

        @ use command 'crosshairsize int' and / or 'linewidth int'  to adust

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

        */

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

            fill_color = stroke_color;

            i=0;

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

                if(i > MAX_INT - 1){canvas_error("to 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+2){

                fprintf(js_include_file,"dragstuff.addShape(new Shape(%d,%d,%d,7,[%.*f],[%.*f],[%d],[%d],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[c],decimals,double_data[c+1],crosshair_size,crosshair_size,line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

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

                /* click_cnt++; */

            }

            reset();

            break;

        case POINT:

        /*

        @ point x,y,color

        @ draw a single point at (x;y) in color 'color'

        @ use command 'linewidth int'  to adust size

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

        @ will not resize on zooming <br />(command 'circle x,y,r,color' will resize on zooming)

        @ attention: in case of command <a href="#rotate">'rotate angle'</a> a point has rotation center (0:0) in x/y-range

        */

            for(i=0;i<3;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: 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,2,[%.*f],[%.*f],[%.2f],[%d],%.2f,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[0],decimals,double_data[1],1.5*line_width,line_width,1.5*line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

                    /* click_cnt++; */

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

                    break;

                    default: break;

                }

            }

            reset();

            break;

        case POINTS:

        /*

        @ points color,x1,y1,x2,y2,...,x_n,y_n

        @ draw multiple points at given coordinates in color 'color'

        @ use command 'linewidth int'  to adust size

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

        @ attention: in case of command <a href="#rotate">'rotate angle'</a> the points have rotation center (0:0) in x/y-range

        */

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

            fill_color = stroke_color;

            i=0;

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

                if(i > MAX_INT - 1){canvas_error("to 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+2){

                fprintf(js_include_file,"dragstuff.addShape(new Shape(%d,%d,%d,2,[%.*f],[%.*f],[%.2f],[%d],%.2f,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[c],decimals,double_data[c+1],1.5*line_width,line_width,1.5*line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

                /* click_cnt++; */

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

            }

            reset();

            break;

        case YERRORBARS:

        /*

        @ yerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n

        @ draw multiple points with y-errorbars E1 (error value under point) and E2 (error value above point) at given coordinates in color 'color'

        @ the errors E1 and E2 values are in yrange.

        @ use command 'linewidth int' to adust size

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

        */

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

            fill_color = stroke_color;

            i=0;

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

                if(i > MAX_INT - 1){canvas_error("to 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++;

            }

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

                fprintf(js_include_file,"dragstuff.addShape(new Shape(%d,%d,%d,19,[%.*f],[%.*f],[%.2f],[%.2f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",

                click_cnt,onclick,drag_type,decimals,double_data[c],decimals,double_data[c+1],double_data[0],double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

                /* click_cnt++; */

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

            }

            decimals = find_number_of_digits(precision);

            reset();

            break;

        case XERRORBARS:

        /*

        @ xerrorbars color,E1,E2,x1,y1,x2,y2,...,x_n,y_n

        @ draw multiple points with x-errorbars E1 (error value left from point) and E2 (error value right from point) at given coordinates in color 'color'

        @ the errors E1 and E2 values are in xrange.

        @ use command 'linewidth int' to adust size

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

        */

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

            fill_color = stroke_color;

            i=0;

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

                if(i > MAX_INT - 1){canvas_error("to 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 = 2 ; c < i-1 ; c = c+2){

                fprintf(js_include_file,"dragstuff.addShape(new Shape(%d,%d,%d,20,[%.*f],[%.*f],[%.2f],[%.2f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[c],decimals,double_data[c+1],double_data[0],double_data[1],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,1,0,0,0,use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

                /* click_cnt++; */

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

            }

            reset();

            break;

        case CIRCLE:

        /*

        @ circle xc,yc,width (2*r in pixels),color

        @ use command 'fcircle xc,yc,d,color'

        @ alternative: disk for a filled circle

        @ use command 'fillcolor color' to set the fillcolor

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

        @ will shrink / expand on zoom out / zoom in

        */

            for(i=0;i<4;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] = px2x((get_real(infile,0))/2) - px2x(0);break; /* for zoom in/out : radius in 'dx' xrange*/

                    case 3: 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,13,[%.*f],[%.*f],[%.3f],[%.3f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[0],decimals,double_data[1],double_data[2],double_data[2],line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

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

                        /* click_cnt++;*/

                        reset();

                        break;

                    default : break;

                }

            }

            break;

        case CIRCLES:

        /*

        @ circles color,xc1,yc1,r1,xc2,yc2,r2...xc_n,yc_n,r_n

        @ <b>attention</b> r = radius in x-range (!)

        @ use keyword 'filled' or command 'fcircles' to produce solid circles

        @ alternative : disks for filled circles

        @ use command 'fillcolor color' to set the fillcolor

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

        @ will shrink / expand on zoom out / zoom in

        */

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

            fill_color = stroke_color;

            i=1;

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

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

                switch (i%3){

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

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

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

                }

                i++;

            }

            decimals = find_number_of_digits(precision);

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

                fprintf(js_include_file,"dragstuff.addShape(new Shape(%d,%d,%d,13,[%.*f],[%.*f],[%.3f],[%.3f],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[c],decimals,double_data[c+1],double_data[c+2],double_data[c+2],line_width,stroke_color,stroke_opacity,stroke_color,fill_opacity,use_filled,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

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

                /* click_cnt++; */

            }

            reset();

            break;

        case SEGMENT:

        /*

        @ segment x1,y1,x2,y2,color

        @ alternative : seg

        @ draw a line segment between points (x1:y1)--(x2:y2) in color 'color'

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

        */

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

                switch(i){

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

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

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

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

                    case 4: 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,4,[%.*f,%.*f],[%.*f,%.*f],[30,30],[30,30],%d,\"%s\",%.2f,\"%s\",%.2f,%d,%d,%d,%d,%d,%.1f,\"%s\",%d,\"%s\",%d,%s,%d,%d,%s));\n",click_cnt,onclick,drag_type,decimals,double_data[0],decimals,double_data[2],decimals,double_data[1],decimals,double_data[3],line_width,stroke_color,stroke_opacity,stroke_color,stroke_opacity,0,use_dashed,dashtype[0],dashtype[1],use_rotate,angle,flytext,font_size,font_family,use_affine,affine_matrix,slider,slider_cnt,rotation_center);

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

                        /* click_cnt++; */

                        reset();

                        break;

                    default: break;

                }

            }

            break;

        case SEGMENTS:

        /*

        @ segments color,x1,y1,x2,y2,...,x_n,y_n

        @ alternative : segs

        @ draw multiple segments between points (x1:y1)--(x2:y2).....and... (x_n-1:y_n-1)--(x_n:y_n) in color 'color'

        @ use command 'linewidth int'  to adust size

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

        */

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

            fill_color = stroke_color;

            i=0;

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

                if(i > MAX_INT - 1){canvas_error("to 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 */