Qmaze2D How To/en

Naar de Nederlandse versie: Qmaze2D_How_To/nl

Qmaze 2D product configurator user manual -- Engels / English

1. Getting started

Before getting started with creating the configurator you have to add some code to the outputscript.
This code does not only make sure that the canvas works like intented, but it also makes sure that it fits your wishes and requirements.
Below are a few examples (templates) of the code that you could use.

Templates

Template: The canvas uses the surrounding container for it's size.

Template: You choose the sizing yourself.

Template: You add a container yourself where you define the sizing. (Without bootstrap)

Template: You add a container yourself where you define the sizing. (With bootstrap)

Template: (OPTIONAL) Loader

Settext

2. Adding objects / images to the canvas.

Adding objects, images and text can easily be done with the help of a few functions.
You can use these functions in the rules and/or the outputscript.

2a. Filling the canvas using the rules.

Function structure:
x3d(id).function = value

Function structure complete:
x3d(object).functionname = value

In this example we will add an image and an text object to the canvas, which we are going to alter using different functions.

Do you have multiple canvasses? To add objects / images and text objects you must declare to which canvas these will be added beforehand, if you do not do this the latest added canvas will be used.

You can do that using this function:
x3d(id).setactivecanvas;

An example of this:
x3d(c).setactivecanvas;

• Attention! We don't use ' ' and/or " " in the rules!*
  

Adding our first objects to the canvas

Adding a text object:
x3d(welcometext).settext = Hello World!

First of we will change the location of the text object, because this is placed in the top left by default.
We can achieve this using the setx and sety functions:

x3d(welcometext).setx = 100
x3d(welcometext).sety = 50

The image is now placed 100 pixels to the right and 50 pixels to the bottom (from the topleft)

Multiple functions work 2 ways around; they can not only add, but also alter objects.
When settext is run on an object that already exists but with a different value, the existent text is replaced with the new value.

x3d(welcometext).settext = How are you?

The text is replaced from 'Hello World!' to 'How are you?'.

Adding a image is not much different from adding a text object:

x3d(welcomeimg).setimage = /Images/pug.png

Changing the sizing (in this case of an image) can be done like this:

x3d(welcomeimg).setheight = 100
x3d(welcomeimg).setwidth= 100

The image is now 100 pixels in height and 100 pixels in width.

We can also change the sizing of the image using scale:

x3d(welcomeimg).setscale= 0.5

Through the setscale function we made the image 0.5x of its current size.

Besides the setx and sety functions theres also a function called setz.
This function changes the objects' layering:

x3d(welcomeimg).setz = 0

The given value in this example is 0, this is all the way in the back.
This means that all objects will be placed above this image.

The object that was on layer 0 is now placed into layer 1 and is therefore now above the image.

2b. Filling the canvas using the outputscript.

Function structure:
x3d(id).function = value

Function structure complete:
x3d(object).functionname = value

In this example we will add an image and an text object to the canvas, which we are going to alter using different functions.

Do you have multiple canvasses? To add objects / images and text objects you must declare to which canvas these will be added beforehand, if you do not do this the latest added canvas will be used.

You can do that using this function:
setactivecanvas('id');

An example of this:
setactivecanvas('c');

Adding our first objects to the canvas

Adding a text object:
settext('welcometext','Hello World!');

First of we will change the location of the text object, because this is placed in the top left by default.
We can achieve this using the setx and sety functions:

setx('welcometext',100);
sety('welcometext',50);

The image is now placed 100 pixels to the right and 50 pixels to the bottom (from the topleft)

Multiple functions work 2 ways around; they can not only add, but also alter objects.
When settext is run on an object that already exists but with a different value, the existent text is replaced with the new value.

settext('welcometext','How are you?');

The text is replaced from 'Hello World!' to 'How are you?'.

Adding a image is not much different from adding a text object:

setimage('welcomeimg','/Images/pug.png');

Changing the sizing (in this case of an image) can be done like this:

setheight('welcomeimg',100);
setwidth('welcomeimg',100);

The image is now 100 pixels in height and 100 pixels in width.

We can also change the sizing of the image using scale:

setscale('welcomeimg',0.5);

Through the setscale function we made the image 0.5x of its current size.

Besides the setx and sety functions theres also a function called setz.
This function changes the objects' layering:

setz('welcomeimg',0);

The given value in this example is 0, this is all the way in the back.
This means that all objects will be placed above this image.

The object that was on layer 0 is now placed into layer 1 and is therefore now above the image.

3a. Explanation per individual function (Rules)

Adding / Altering (existing) objects / images:

Function name:
setcanvas

Function description:
Changes the default canvas to a fabric canvas.

Function structure:
x3d(object).setcanvas;

Example:
x3d(c).setcanvas;

Function name:
settext

Function description:
Adds a text object to a canvas or changes the text of an already existent text object.

Function structure:
x3d(object).settext = value

Example:
x3d(welcometext).settext = Hello World!
In case a text object already exists; When the id matches that of an already existent text object, the text of this object is then replaced by the given value.
If you wish to split a sentence (enter), you can use \n.
An example of this: x3d('welcomeimg').settext = Hello \n World!

Function name:
setimage

Function description:
Adds a image to a canvas or changes the source/url or data string of an already existent image.

Function structure:
x3d(object).setimage = source/url/data-string

Example:
x3d(object).setimage = /Images/pug.png
In case a image already exists; When the id matches that of an already existent image, the source/url or datastring of this image will be replaced by the given value.

Function name:
setbgimg

Function description:
Adds a background image to a canvas or changes the current background image, the image fills the entire canvas.

Function structure:
x3d(object).setbgimg = source/url/data-string

Example:
x3d(object).setbgimg = /Images/pineapples.png
In case a background image already exists; When the id matches that of an already existing background image, the source/url or data string of this background image will be replaced by the given value.
When you add a background image with another id whilst a background image is already active on that canvas, the lastest added background image will be the one shown because of the layering structure. (see setz)

Function name:
setrectangle

Function description:
Adds a rectangle to a canvas or changes an already existent rectangle. ( position, height and width )

Function structure:
x3d(object).setrectangle = x1,y1,x2,y2

Example:
x3d(newrect).setrectangle = 50,50,100,100
The rectangle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom.
In case a rectangle with this id is already existent, the locations ( and the width,height ) are changed.

Function name:
setcircle

Function description:
Adds a circle to a canvas or changes an already existent circle. ( position and radius )

Function structure:
x3d(object).setcircle = x,y,radius

Example:
x3d(newcircle).setcircle = 50,50,25
The circle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom and gets a 25 pixel radius.
In case a circle with this id is already existent, the location and radius is changed.

Function name:
settriangle

Function description:
Adds a triangle to a canvas or changes an already existent circle. ( position, height and width )

Function structure:
x3d(object).settriangle = x,y,width,height

Example:
x3d(newtriangle).settriangle = 50,50,75,75
The triangle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom and get a 75 pixels height and a 75 pixels width.
In case a triangle with this id is already existent, the location, height and width are changed.

Function name:
setpolygon

Function description:
Adds a polygon to a canvas or changes an already existent polygon, the begin and endpoint always connect. ( positions)

Function structure:
x3d(object).setpolygon = x1,y1,x2,y2 etc.

Example:
x3d(newpoly).setpolygon = 20,0,40,50,60,80,40,70,20,60
The polygon in this example starts ( starting top left (0,0)) 20 pixels to the right and 0 pixels to the bottom, the second point is 40 pixels to the right and 50 pixels to the bottom etc.
The end of the polygon always connects with the beginpoint.
In case a triangle with this id is already existent, the points get changed.

Function name:
setarrows

Function description:
Adds a line to the canvas with 2 arrowpoints or replaces an already existing arrow/line.

Function structure:
x3d(object).setarrows = x1,y1,x2,y2

Example:
x3d(newarrow).setarrows = 100,100,300,300
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Function name:
setarrow

Function description:
Adds a line to a canvas with 1 arrowpoint or replaces an already existing arrow/line.

Function structure:
x3d(object).setarrow = x1,y1,x2,y2

Example:
x3d(object).setarrows = 100,100,300,300
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Function name:
setline

Function description:
Adds a line to a canvas or replaces an already existing arrow/line.

Function structure:
x3d(object).setline = x1,y1,x2,y2

Example:
x3d(object).setline = 100,100,300,300
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Altering existent objects / images

Function name:
setcolor

Function description:
Changes the color of an object.

Function structure:
x3d(object).setcolor = value

Example:
x3d(welcometext).setcolor = red
When the object is a canvas the background color is changed to the given value.

Function name:
setdraggable

Function description:
Changes the object to be static or dynamic ( user interaction )

Function structure:
x3d(object).setdraggable = value

Example:
x3d(welcomeimg).setdraggable = 1
The value can either be 1 or 0, where 0 makes the object static and 1 makes the object draggable.

Function name:
setanimationduration

Function description:
Changes the duration of animations.

Function structure:
x3d(object).setanimationduration = duration

Example:
x3d(object).setanimationduration = 1000
In this example the animation duration is set to 1000ms (1 second).
The animation duration counts for all animations untill it is altered again.

Function name:
setanimationtype

Function description:
Changes which animation is played when positions change.

Function structure:
x3d(object).setanimationtype = value

Example:
x3d(object).setanimationtype = easeInOutBounce
In this example the animation type is set to InOutBounce, this makes the object 'bounce' at the end of an position change.
The animation type counts for all animations untill it is altered again.

Function name:
sethandles

Function description:
Changes the handles of an object depended on the value.

Function structure:
x3d(object).sethandles = value

Example:
x3d(newrect).sethandles = newrect
Changes which lines and or user interactive corners are visible.

Function name:
sethandlecolor

Function description:
Changes the color of the handles.

Function structure:
x3d(object).sethandlecolor = value

Example:
x3d(newrect).sethandlecolor = red

Function name:
setheight

Function description:
Changes the height of an object in pixels.

Function structure:
x3d(object).setheight = value

Example:
x3d(welcomeimg).setheight = 150

Function name:
setwidth

Function description:
Changes the width of an object in pixels.

Function structure:
x3d(object).setwidth = value

Example:
x3d(welcomeimg).setwidth = 250

Function name:
setscale

Function description:
Changes the width and height of an object or image by scale.

Function structure:
x3d(object).setscale = value

Example:
x3d(welcomeimg).setscale = 0.8
The value represents the scale on which the object / image is scaled. ( x and y axle )
The value 1 is the original value.

Function name:
setid

Function description:
Changes the id of an already existent object / image.

Function structure:
x3d(object).setid = value

Example:
x3d(welcomeimg).setid = goodbyeimg
The object is the id of an object that is to be changed, the value is to become the new id. The new id must not be existent on the canvas.

Function name:
setlineheight

Function description:
Changes how much height is between text lines.

Function structure:
x3d(object).setlineheight = value

Example: x3d(welcometext).setlineheight = 10

Function name:
setrotation

Function description:
Changes the rotation of an object / image.

Function structure:
x3d(object).setrotation = value

Example:
x3d(welcomeimg).setrotation = 90
The value is the rotation starting from the original rotationpoint (0) in degrees. (celcius)

Function name:
setx

Function description:
Changes the position of an object / image on the x-axle. (in pixels where the left is 0)

Function structure:
x3d(object).setx = value

Example:
x3d(welcomeimg).setx = 500
The image in this example will now be placed 500 pixels to the right.

Function name:
sety

Function description:
Changes the position of an object / image on the y-axle. (in pixels where the top is 0)

Function structure:
x3d(object).sety = value

Example:
x3d(welcomeimg).sety = 200
The image in this example will now be placed 200 pixels to the bottom.

Function name:
setz

Function description:
Changes on which layer the object / image resides. ( where 0 is in the back )

Function structure:
x3d(object).setz = value

Example:
x3d(welcomeimg).setz = 10
The value is the layer on which the object / image is placed, where the layer 0 is in the back.
The object / image that is already active on the chosen layer will be placed 1 place higher into the layers.

Function name:
setstroke

Function description:
Changes the stroke of an object.

Function structure:
x3d(object).setstroke = value

Example:
x3d(newrect).setstroke = 20
The object gets a line around the object with the size of the value in pixels.

Function name:
setstrokecolor

Function description:
Changes the color of the objects' stroke.

Function structure:
x3d(object).setstrokecolor = value

Example:
x3d(newrect).setstrokecolor = blue

Function name:
settextfont

Function description:
Changes the text font of an text object.

Function structure:
x3d(object).settextfont = value

Example:
x3d(welcometext).settextfont = Arial
The text font must exist, if this is not the case the text font will remain the same. Attention: Case sensitive!
You can download text fonts directly from fonts.google.com or through a url link.

Function name:
settextsize

Function description:
Changes the text size of a text object.

Function structure:
x3d(object).settextsize = value

Example:
x3d(welcometext).settextsize = 20
The value is the text size in pixels.

Function name:
settextweight

Function description:
Changes the boldness of an text object.

Function structure:
x3d(object).settextweight = value

Example:
x3d(welcometext).settextweight = 400
Possible values: light, normal, bold, number.

Function name:
setvisible

Function description:
Changes the visibility of an object / image / canvas.

Function structure:
x3d(object).setvisible = value

Example:
x3d(welcometext).setvisible = 0.7
To make the canvas visible or invisible the value must be either 1 or 0 where 0 makes it invisible and 1 makes it visible.
To make an object / image visible or invisible the value must be between 0 and 1, where 1 is visible and 0 is invisible, decimals may be used.

Function name:
setflipx

Function description:
Flips the object / image around. (Horizontally)

Function structure:
x3d(object).setflipx = value

Example:
x3d(welcomeimg).setflipx = true
The 'value' true flips the object / image around from it original stance, the value 'false' changes it back to it's original stance.
The value 'flip' makes the object / image flip around no matter which stance it currently is.

Function name:
setflipy

Function description:
Flips the object / image around. (Vertically)

Function structure:
x3d(object).setflipy = value

Example:
x3d(welcomeimg).setflipy = flip
The 'value' true flips the object / image around from it original stance, the value 'false' changes it back to it's original stance.
The value 'flip' makes the object / image flip around no matter which stance it currently is.

Function name:
setdefault

Function description:
Changes the default properties of which an object / image is loaded in with.

Function structure:
x3d(object).setdefault = property,propertyvalue

Example:
x3d(text).setdefault = fill,red

Retrieving object / imag properties

Function name:
getproperty

Function description:
Gets the chosen property (value) of the object / image.

Function structure:
x3d(object).getproperty = value

Example:
x3d(welcomeimg).getproperty = top
The value is the property you wish to retrieve.

Function name:
getx

Function description:
Gets the x-axle value from the object / image.

Function structure:
x3d(object).getx

Example:
x3d(welcomeimg).getx

Function name:
gety

Function description:
Gets the y-axle value from the object / image.

Function structure:
x3d(object).gety

Example:
x3d(welcomeimg).gety

Function name:
getz

Function description:
Gets the layer on which the object / images resides.

Function structure:
x3d(object).getz

Example:
x3d(welcomeimg).getz

Function name:
getscale

Function description:
Gets the objects scale (X&Y combined)

Function structure:
x3d(object).getscale

Example:
x3d(welcomeimg).getscale

Function name:
getscalex

Function description:
Gets the objects x-axle scale.

Function structure:
x3d(object).getscalex

Example:
x3d(welcomeimg).getscalex

Function name:
getscaley

Function description:
Gets the objects y-axle scale.

Function structure:
x3d(object).getscalex

Example:
x3d(welcomeimg).getscalex

Other functions

Function name:
copy

Function description:
Copies the chosen object / image and gives it a new id.

Function structure:
x3d(object).copy = value

Example:
x3d(welcomeimg).copy = newimage
The new id (value) must be unique. (can't already exist)

Function name:
delete

Function description:
Deletes the chosen object / image from the canvas.

Function structure:
x3d(object).delete

Example:
x3d(newimage).delete
To use this function, you only need to enter a object(id).

Function name:
clearcanvas

Function description:
Removes all objects and images from the canvas.

Function structure:
x3d(object).clearcanvas

Example:
x3d(c).clearcanvas
To use this function, you only need to enter a object(id).
The object(id) in this case is that of the canvas.

Function name:
screenshot

Function description:
Makes a screenshot of the chosen canvas.

Function structure:
x3d(object).screenshot

Example:
x3d(c).screenshot
To use this function, you only need to enter a object(id).
The object(id) in this case is that of the canvas.

3b. Explanation per individual function (Outputscript)

Adding / Altering (existing) objects / images:

Function name:
setcanvas

Function description:
Changes the default canvas to a fabric canvas.

Function structure:
setcanvas('object');

Example:
setcanvas('c');

Function name:
settext

Function description:
Adds a text object to a canvas or changes the text of an already existent text object.

Function structure:
settext ('object','value');

Example:
settext('welcometext','Hello World!');
In case a text object already exists; When the id matches that of an already existent text object, the text of this object is then replaced by the given value.
If you wish to split a sentence (enter), you can use \n.
An example of this: x3d('welcomeimg').settext = Hello \n World!

Function name:
setimage

Function description:
Adds a image to a canvas or changes the source/url or data string of an already existent image.

Function structure:
setimage('object ','source/url/data-string');

Example:
setimage('welcomeimg','/Images/pug.png');
In case a image already exists; When the id matches that of an already existent image, the source/url or datastring of this image will be replaced by the given value.

Function name:
setbgimg

Function description:
Adds a background image to a canvas or changes the current background image, the image fills the entire canvas.

Function structure:
setbgimg('object','source/url/data-string');

Example:
setbgimg('bgimg','/Images/pineapples.png');
In case a background image already exists; When the id matches that of an already existing background image, the source/url or data string of this background image will be replaced by the given value.
When you add a background image with another id whilst a background image is already active on that canvas, the lastest added background image will be the one shown because of the layering structure. (see setz)

Function name:
setrectangle

Function description:
Adds a rectangle to a canvas or changes an already existent rectangle. ( position, height and width )

Function structure:
setrectangle('object','x1,y1,x2,y2');

Example:
setrectangle('newrect' , '50,50,100,100');
The rectangle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom.
In case a rectangle with this id is already existent, the locations ( and the width,height ) are changed.

Function name:
setcircle

Function description:
Adds a circle to a canvas or changes an already existent circle. ( position and radius )

Function structure:
setcircle('object','x,y,radius');

Example:
setcircle('newcircle','50,50,25');
The circle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom and gets a 25 pixel radius.
In case a circle with this id is already existent, the location and radius is changed.

Function name:
settriangle

Function description:
Adds a triangle to a canvas or changes an already existent circle. ( position, height and width )

Function structure:
settriangle ('object','x,y,width,height');

Example:
settriangle('newtriangle',50,50,75,75');
The triangle in this example starts ( starting top left (0,0)) 50 pixels to the right and 50 pixels to the bottom and get a 75 pixels height and a 75 pixels width.
In case a triangle with this id is already existent, the location, height and width are changed.

Function name:
setpolygon

Function description:
Adds a polygon to a canvas or changes an already existent polygon, the begin and endpoint always connect. ( positions)

Function structure:
setpolygon('object','x1,y1,x2,y2 etc.');

Example:
setpolygon('newpoly','20,0,40,50,60,80,40,70,20,60');
The polygon in this example starts ( starting top left (0,0)) 20 pixels to the right and 0 pixels to the bottom, the second point is 40 pixels to the right and 50 pixels to the bottom etc.
The end of the polygon always connects with the beginpoint.
In case a triangle with this id is already existent, the points get changed.

Function name:
setarrows

Function description:
Adds a line to the canvas with 2 arrowpoints or replaces an already existing arrow/line.

Function structure:
setarrows('object','x1,y1,x2,y2');

Example:
setarrows('newarrow','100,100,300,300');
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Function name:
setarrow

Function description:
Adds a line to a canvas with 1 arrowpoint or replaces an already existing arrow/line.

Function structure:
setarrow('object','x1,y1,x2,y2');

Example:
setarrows('newdbarrow','100,100,300,300');
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Function name:
setline

Function description:
Adds a line to a canvas or replaces an already existing arrow/line.

Function structure:
setline('object','x1,y1,x2,y2');

Example:
setline('newline','100,100,300,300');
The arrow in this example starts ( starting top left (0,0)) 100 pixels to the right and 100 pixels to the bottom and stops 300 pixels to the right and 300 pixels to the bottom.
In case a arrow with this id is already existent (setline,setarrow,setarrows), the positions are replaced with the given value and if required arrowpoints are added/removed.

Altering existent objects / images

Function name:
setcolor

Function description:
Changes the color of an object.

Function structure:
setcolor('object','value');

Example:
setcolor('welcometext','red');
When the object is a canvas the background color is changed to the given value.

Function name:
setdraggable

Function description:
Changes the object to be static or dynamic ( user interaction )

Function structure:
setdraggable('object',value);

Example:
setdraggable('object',1);
The value can either be 1 or 0, where 0 makes the object static and 1 makes the object draggable.

Function name:
setanimationduration

Function description:
Changes the duration of animations.

Function structure:
setanimationduration(duration);

Example:
setanimationduration(1000);
In this example the animation duration is set to 1000ms (1 second).
The animation duration counts for all animations untill it is altered again.

Function name:
setanimationtype

Function description:
Changes which animation is played when positions change.

Function structure:
setanimationtype('value');

Example:
setanimationtype('easeInOutBounce');
In this example the animation type is set to InOutBounce, this makes the object 'bounce' at the end of an position change.
The animation type counts for all animations untill it is altered again.

Function name:
sethandles

Function description:
Changes the handles of an object depended on the value.

Function structure:
sethandles('object',value);

Example:
sethandles('newrect',1);
Changes which lines and or user interactive corners are visible.

Function name:
sethandlecolor

Function description:
Changes the color of the handles.

Function structure:
sethandlecolor('object','value');

Example:
sethandlecolor('newrect','red');

Function name:
setheight

Function description:
Changes the height of an object in pixels.

Function structure:
setheight('object',value);

Example:
setheight('welcomeimg',150);

Function name:
setwidth

Function description:
Changes the width of an object in pixels.

Function structure:
setwidth('object',value);

Example:
setwidth('welcomeimg',250);

Function name:
setscale

Function description:
Changes the width and height of an object or image by scale.

Function structure:
setscale('object',value);

Example:
setscale('welcomeimg',0.8);
The value represents the scale on which the object / image is scaled. ( x and y axle )
The value 1 is the original value.

Function name:
setid

Function description:
Changes the id of an already existent object / image.

Function structure:
setid('object','value');

Example:
setid('welcomeimg','goodbyeimg');
The object is the id of an object that is to be changed, the value is to become the new id. The new id must not be existent on the canvas.

Function name:
setlineheight

Function description:
Changes how much height is between text lines.

Function structure:
setlineheight('object',value);

Example:
setlineheight('welcometext',10);

Function name:
setrotation

Function description:
Changes the rotation of an object / image.

Function structure:
setrotation('object',value);

Example:
setrotation('welcomeimg',90);
The value is the rotation starting from the original rotationpoint (0) in degrees. (celcius)

Function name:
setx

Function description:
Changes the position of an object / image on the x-axle. (in pixels where the left is 0)

Function structure:
setx('object',value);

Example:
setx('welcomeimg',500);
The image in this example will now be placed 500 pixels to the right.

Function name:
sety

Function description:
Changes the position of an object / image on the y-axle. (in pixels where the top is 0)

Function structure:
sety('object',value);

Example:
sety('welcomeimg',200);
The image in this example will now be placed 200 pixels to the bottom.

Function name:
setz

Function description:
Changes on which layer the object / image resides. ( where 0 is in the back )

Function structure:
setz('object',value);

Example:
setz('welcomeimg',10);
The value is the layer on which the object / image is placed, where the layer 0 is in the back.
The object / image that is already active on the chosen layer will be placed 1 place higher into the layers.

Function name:
setstroke

Function description:
Changes the stroke of an object.

Function structure:
setstroke('object',value);

Example:
setstroke('newrect',20);
The object gets a line around the object with the size of the value in pixels.

Function name:
setstrokecolor

Function description:
Changes the color of the objects' stroke.

Function structure:
setstrokecolor('object','value');

Example:
setstrokecolor('newrect','blue');

Function name:
settextfont

Function description:
Changes the text font of an text object.

Function structure:
settextfont('object','value');

Example:
settextfont('welcometext','Arial');
The text font must exist, if this is not the case the text font will remain the same. Attention: Case sensitive!
You can download text fonts directly from fonts.google.com or through a url link.

Function name:
settextsize

Function description:
Changes the text size of a text object.

Function structure:
settextsize('object',value);

Example:
settextsize('welcometext',20);
The value is the text size in pixels.

Function name:
settextweight

Function description:
Changes the boldness of an text object.

Function structure:
settextweight('object','value');

Example:
settextweight('welcometext',400);
Possible values: light, normal, bold, number.

Function name:
setvisible

Function description:
Changes the visibility of an object / image / canvas.

Function structure:
setvisible('object',waarde);

Example:
setvisible('welcometext',0.7);
To make the canvas visible or invisible the value must be either 1 or 0 where 0 makes it invisible and 1 makes it visible.
To make an object / image visible or invisible the value must be between 0 and 1, where 1 is visible and 0 is invisible, decimals may be used.

Function name:
setflipx

Function description:
Flips the object / image around. (Horizontally)

Function structure:
setflipx('object','value');

Example:
setflipx('welcomeimg','true');
The 'value' true flips the object / image around from it original stance, the value 'false' changes it back to it's original stance.
The value 'flip' makes the object / image flip around no matter which stance it currently is.

Function name:
setflipy

Function description:
Flips the object / image around. (Vertically)

Function structure:
setflipy('object','value');

Example:
setflipy('welcomeimg','true');
The 'value' true flips the object / image around from it original stance, the value 'false' changes it back to it's original stance.
The value 'flip' makes the object / image flip around no matter which stance it currently is.

Function name:
setdefault

Function description:
Changes the default properties of which an object / image is loaded in with.

Function structure:
setdefault('object','property,propertyvalue');

Example:
setdefault('text','fill,red';

Retrieving object / imag properties

Function name:
getproperty

Function description:
Gets the chosen property (value) of the object / image.

Function structure:
getproperty('object','value');

Example:
getproperty('welcomeimg','top');
The value is the property you wish to retrieve.

Function name:
getx

Function description:
Gets the x-axle value from the object / image.

Function structure:
getx('object');

Example:
getx('welcomeimg');

Function name:
gety

Function description:
Gets the y-axle value from the object / image.

Function structure:
gety('object');

Example:
gety('welcomeimg');

Function name:
getz

Function description:
Gets the layer on which the object / images resides.

Function structure:
getz('object');

Example:
getz('welcomeimg');

Function name:
getscale

Function description:
Gets the objects scale (X&Y combined)

Function structure:
getscale('object');

Example:
getscale('welcomeimg');

Function name:
getscalex

Function description:
Gets the objects x-axle scale.

Function structure:
getscalex('object');

Example:
getscalex('welcomeimg');

Function name:
getscaley

Function description:
Gets the objects y-axle scale.

Function structure:
getscaley('object');

Example:
getscaley('welcomeimg');

Other functions

Function name:
copy

Function description:
Copies the chosen object / image and gives it a new id.

Function structure:
copy('object','value');

Example:
copy('welcomeimg','newimage');
The new id (value) must be unique. (can't already exist)

Function name:
delete

Function description:
Deletes the chosen object / image from the canvas.

Function structure:
delete('object');

Example:
delete('newimage');
To use this function, you only need to enter a object(id).

Function name:
clearcanvas

Function description:
Removes all objects and images from the canvas.

Function structure:
clearcanvas('object');

Example:
clearcanvas('c');
To use this function, you only need to enter a object(id).
The object(id) in this case is that of the canvas.

Function name:
screenshot

Function description:
Makes a screenshot of the chosen canvas.

Function structure:
screenshot('object');

Example:
screenshot('c');
To use this function, you only need to enter a object(id).
The object(id) in this case is that of the canvas.