Qmaze2D How To/en

Naar de Nederlandse versie

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

Below you can find information for every individual function, you will find;

• A list containing every function.
• What the functions do exactly.
• How to use the functions (Rules & Outputscript).
• Examples

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.

<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>

<canvas id="your canvas name"></canvas>

<script>
$(document).ready(function() 
{
        // This function must be run per individual canvas
        setcanvas('your canvas name'); 

        // You can place your functions here
});
</script>
 

Template: You choose the sizing yourself.

<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>

<canvas id="your canvas name" style="height: height px; width: width px"></canvas>

<script>
$(document).ready(function() 
{
        // This function must be run per individual canvas
        setcanvas('your canvas name'); 

        // You can place your functions here
});
</script>
 

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

<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>

<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>

<div style="height: height px; width: width px ">
    <canvas id="your canvas name"></canvas>
</div>

<script>
$(document).ready(function() 
{
    // This function must be run per individual canvas
    setcanvas('your canvas name'); 

    // You can place your functions here
});

</script>
 

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

<!-- GET FabricJS Script Minified-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>

<!-- GET 2D Lib Script -->
<script src="Scripts/Qmaze2dlib.js"></script>

<div class="col-xs-12 col-sm-12  col-md-12 col-lg-12">
    <canvas id="your canvas name"></canvas>
</div>
 
<script>
$(document).ready(function() 
{
    // This function must be run per individual canvas
    setcanvas('your canvas name'); 

    // You can place your functions here
});
</script>
 

Template: (OPTIONAL) Loader

<!-- GET Preloader CSS -->
<link rel="stylesheet" href="Styles/preloader.css"/>

<div class="preloader">
  <span class="line line-1"></span>
  <span class="line line-2"></span>
  <span class="line line-3"></span>
  <span class="line line-4"></span>
  <span class="line line-5"></span>
  <span class="line line-6"></span>
  <span class="line line-7"></span>
  <span class="line line-8"></span>
  <span class="line line-9"></span>
  <div>Loading</div>
</div>
 

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

Do note that when you use the setheight and/or the setwidth function, the setscale function scales from the current sizing.

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.

There are alot of functions that alter object properties, but these only apply per individual object.. Let's make sure we optimise it a bit.
Let's say we want to add a dozen images onto the canvas each of those should be the same dimensions, ofcourse we could set setwidth and setheight for each of these objects but that's not efficient.
A better option is to use the setdefault function, this function makes it so that each object created after running this function will have the new default property.
Let's set the new width and height for every image.
You can do that like this:

x3d(image).setdefault = height,100
x3d(image).setdefault = height,100

Each image created after this function will now be 100 pixels in height and 100 pixels in width.
If you wish to change the default later on say to 50 pixels you simply call upon the function again with your new desired value.
As such:
x3d(image).setdefault = height,50
x3d(image).setdefault = height,50
The default width and height for images created after running this function are now 50 pixels in width and 50 pixels in height.
The setdefault function can save you alot of time if you wish to have alot of objects / images with the same properties.


These were the basic ins and outs of the Qmaze 2D library. If you wish to see a list of all functions with proper individual explanation please visit:Individual function explanation

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

Do note that when you use the setheight and/or the setwidth function, the setscale function scales from the current sizing.

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.

There are alot of functions that alter object properties, but these only apply per individual object.. Let's make sure we optimise it a bit.
Let's say we want to add a dozen images onto the canvas each of those should be the same dimensions, ofcourse we could set setwidth and setheight for each of these objects but that's not efficient.
A better option is to use the setdefault function, this function makes it so that each object created after running this function will have the new default property.
Let's set the new width and height for every image.
You can do that like this:

setdefault('image','height,100');
setdefault('image','width,100');

Each image created after this function will now be 100 pixels in height and 100 pixels in width.
If you wish to change the default later on say to 50 pixels you simply call upon the function again with your new desired value.
As such:
setdefault('image','height,50');
setdefault('image','width,50');
The default width and height for images created after running this function are now 50 pixels in width and 50 pixels in height.
The setdefault function can save you alot of time if you wish to have alot of objects / images with the same properties.


These were the basic ins and outs of the Qmaze 2D library. If you wish to see a list of all functions with proper individual explanation please visit:Individual function explanation