====== Example1 ======

===== Start using the IG.Creator =====

The IG.Creator is located under: [[https://3d.intelligentgraphics.biz/creator/Default.aspx]]
Ask the admin for Login credentials and fill the mask

{{ ::creator_login.png?400 |}}

  * Domain: In this case, usually it is the name of a supplyer or IG.
  * Subdomain: Each supplyer has different models that needs data creation. They are inserted here or //Basics//
     * Subdomain Basics: In case of a project workflow a //Basics// subdomain exists. Inside //Basics// generall stuff, like shared assets or scripts is stored

Together Domain and Subdomain build a workspace, that is usually communicated as Domain.Subdomain. Ask the admin for workspaces.

After filling the mask, click connect to connetct into a workspace.

The next page will be the //Products// page:
{{ ::creator_productpage_01.png?400 |}}

This side has an overview of all available products of a supplyer. In case starting with a new workspace it is initially empty.
To learn more about the //Products// page, check its [[ig.creator:products|Wiki]] page!

==== Setting up the IG.Creator for editing ====


In case starting with a new empty workspace usually it is necessary to enable some features in case they are not available now.

  * Endable adding new products
    * Switch to the //Settings// page, by navigating with the side bar on the left side and choose the tab //Advanced//
    * On the right hand side check the //Editable// checkbox

{{ ::creator_settingsenableediting.png?400 |}}

==== Creating a first product (Cube) ====

Go back to the //Products// page and notice the **New** button on the top right corner. Click it and fill the mask.
{{ ::creator_productpage_02.png?800 |}}

{{ ::creator_productpage_03.png?800 |}}

Apply the new created product with //Update//.

In case the list was empty at the beginning, now the **Cube** should appeare there. In case the list was allready filled the **Cube** is sorted somewhere in the tabel. In this case search for it.

Notice, when ever creating a new product its //State// starts with //New// to have an overview of the current working state, this can be changed every time.

Not changeable is the name of the created product. In case the name needs to be changed, a new product needs to be created and the old one needs to be deleted.

As next, lets check what the product **Cube** looks like at this state.

Select the line with the **Cube** product and click //Configurator//.
{{ ::creator_productpage_04.png?600 |}}

The **Cube** is initially structurless, so from the shown dialoge choose either //Empty// or select an other product that should be cloned. Press the //Create/Clone the Product// button to continue.

{{ ::creator_productpage_05.png?600 |}}

After creating a structure for the **Cube** the next page that appeares is the //Configurator// page. Check its [[ig.creator:products:graphical|Wiki]] page to learn more.

Click //Update// to update the 3D view

{{ ::configurator_01.png?400 |}}

After this, nothing will happen in the 3D View! But, notice the window below, it will show a log message.
{{ ::configurator_02.png?400 |}}

At this point only an empty structure for the product was created. There is no (3D) content defined now!

First of all, make sure the //Assets/Geometries// page is having some geometries, otherwise [[ig.guidelines:uploading_geometries#manually|upload one manually]].

For uploading a new geometry, use this one: {{ ::unitcube.zip |}}

After ensuring a geometry is available this one will be added to the **Cube** product. Go back to the //Products// page and make sure the **Cube** is still selected. From this, go to the //Products/Graphical// page.

Fill in the maks as shown and //Apply//.

{{ ::products_graphical_01.png?600 |}}

Step next to the //Products/Graphical/Configurator// and press the //Update// button again.

{{ ::configurator_03.png?600 |}}

Notice the wire structure in the 3D view. But it doesn't look like a cube. When rotating the view, this wire will become a wire cube. This is because, there is no material assigned.

Next step, make sure under the //Assets/Materials// page there exist some materials,[[ig.guidelines:creating_materials#creating_a_simple_material|otherwise create a simple one]].

After this, switch to the //Products/Graphical// page (make sure the **Cube** product was selected). Search for the Material section on this page and search for a //Material// and in //Category//, choose one from the drop down menu. To confirm the assigned material, click //Apply//.

{{ ::products_graphical_02.png?600 |}}

Notice the material has a **@** as prefix. It is added, so that the IG.Creatir can identify this as a material.

Switch to the //Products/Graphical/Configurator// page and press //Update//. In the 3D view a red cube is generated.

{{ ::configurator_04.png?600 |}}


==== Creating a chair ====

This is a more advanced tutorial serie. In case being a newbe, first follow this [[example.1#creating_a_first_product_(Cube)|tutorial]]!

Use these geometries to follow the tutorial: {{ ::chair.zip |}}

At the //Products// page create a new product called **Chair**.
{{ ::creator_productpage_06.png?1000 |}}
Select the **Chair** product, click //Configurator// on the bottom of the page and create a new //Empty//.

Switch to the //Products/Graphical// page to build up the structure.
At the top, press //Add Child// to create a child node named //Chair.o1//.

{{ ::products_graphical_03.png?800 |}}

In the //Description// field below, type in //SeatElements//.This node will cover the seat and the seat back geometries.

Press the //Add Child// button again, to get the child node of the seat -> //Chair.o1.o1//. As //Description// type in //Seat//.

For the seat node, add the seat geometry and a material. Apply both.

{{ ::products_graphical_04.png?600 |}}

Scroll up and add a sibling to the seat node. As //Description// type in //SeatBack//.

{{ ::products_graphical_05.png?600 |}}

Apply the seat back geometry and a material to this node, too.

Now, add a node Chair.o2. For this press the //Up// button till node //Chair.o1// is displayed (SeatElements). 

Create a sibling //FootElements//. Create a child //FootBack// and add a geometry and a material for this.

In this case, the feets have black plastic elements for the ground. So, add an other child withe the //Description// //FootBack_Black// and assign a geometry and material.

{{ ::products_graphical_06.png?600 |}}

In the structure move up to the //FootElements// node. Add the front feet with the same schema.

{{ :products_graphical_07.png?600 |}}

Go to the //Products/Graphical/Configurator// page and press the //Update// button. Inside the 3D view the created chair should look like this:
{{ ::configurator_05.png?200 |}}

The presentation isn't right bacause:
      * The geometries origins are at the left, back, lower corner
      * The geometries don't get a position.

Now, go back to the //Products/Graphical// page and set the position for each geometry.
{{ ::products_graphical_08.png?400 |}}
Note, it is quiet time consuming to naviagate through the product nodes. It is also confusing to navigate in this visualisation. There is a clearer visualisation for this.

Go to the //Products/Graphical/Structure// page. 

{{ ::products_structure_01.png?600 |}}

This is an hierachically overview of the created nodes. On the left side the node tree can filters the listed nodes. For more information on this page, check the [[ig.creator:products:graphical:structure|wiki]]


Choose the //SeatElements// node and click //Edit//. For //Pos Y// type in a height of//0.417//. Click //Update// to confirm.
{{ ::products_structure_02.png?400 |}}

This lifts the seat and seat back elements. Correct the positions for all chair parts.

{{ ::products_structure_03.png?600 |}}

A red chair is possible but not common. Next change the material to a wooden (oak) one.[[ig.guidelines:creating_materials#creating_a_material_with_a_texture|Create one if necessary]]. Use this texture:{{ ::oak.tex.zip |}}  

Also, check if a simple black material exists or [[ig.guidelines:creating_materials#creating_a_simple_material|create one]].

When both materials exist, go to //Products/Graphical/Material//. For more information on this page, see the [[ig.creator:products:graphical:material| Wiki]]

Click //Edit// and change the material for the geometries according to the image below.
{{ ::products_material_01.png?600 |}}

Go back to the //Producs/Graphical/Configurator// page and checking the result, it should look similar like this.
{{ ::configurator_06.png?600 |}}

=== Configure a Chair ===
To configure a chair, commercial data are needed. This data can come from different sources. For this tutorial, a set of own properties is created.

== Configure the Material ==
This part extends the above described section of the **Chair**. It will add a property to change the material of the seat.
Make sure on the //Settings// page the workspace settings are set up as following:
{{ ::configuration_settings.png?600 |}}

Also if switching the mode to SimpleCom make sure to click "connect". Changing the dropdown value is not enough.
If you are not using a contect script make also sure the "Advanced"->"Commercial context" ist set to "NoContext".

As first the **Chair** should get a property to switch the material. There for go to the //Assets/Commercial// page. For more information on this page, check its [[ig.creator:assets:commercial|Wiki]].

On the left side, all the available products are listed, in the middle, all available properties for this workspace are listed and on the right side all available properties for this workspace are listed.

{{ ::configuration_01.png?800 |}}

To create a new property, click the //New// button in the middle and fill the mask as shown:
{{ ::configuration_02.png?600 |}}


The //Id// is the displayed name, the //Property UL// is a description.
Confirm the property with //Update//.

Next the created property needs some values. On the right side click //New//. Fill the mask:
{{ ::configuration_03.png?300 |}}

The //Id// is the value (e.g. Red material). In case using an other material, make sure to type in the name from the //Assets/Matterials// page. Otherwise it will not be linked later in this tutorial. The //Value UL// is the description.

Next step is to link the new created property, the value and the product.

For this, select the product **Chair** from the left list. Then select the property from the middle list and click //Edit//. Click the checkbox next to //Active// and confirm with //Update//.
{{ ::configuration_04.png?600 |}}

Now make sure the **Chair** and the property are selected both. Next select the new created value on the right side and click //Edit//. Click the //Active// checkbox, too and confirm with //Update//.

{{ ::configuration_05.png?800 |}}

Switch to the //Products/Graphical/Configurator// page. Click the //Configure// and //Update// button. The chair appeares as usual, but nothing else happens.
{{ ::configuration_06.png?600 |}}

Befor the configuration options are shown in the //Configurator//, a last step needs to be done. Go to the //Products/Commercial// page and add the created property here. For more information, see the [[ig.creator:products:commercial|Wiki]] page.
{{ ::configuration_07.png?800 |}}

As //Type// choose //Material// and as //Default// choose //Oak//. Confirm with //Update//.
{{ ::configuration_08.png?800 |}}

Go back to the //Producs/Graphical/Configurator// page and click //Configure// again.
The created property appeares, now. Click on the propery name, on the left side, the value of the property appeares, too.
{{ ::configuration_09.png?800 |}}

By clicking on the the material property and updating the 3D view, nothing happens!
{{ :configuration_06.png?400 |}}

This is because the current material is still assigned as fix material.
Switch to the //Products/Graphical/Material// page.
{{ :products_material_01.png?600 |}}

To change this and use the new property, click //Edit// for the //Seat// node (o1.o1). In //Material Category// type in //DefaultMaterial// and confirm.

Go back to the //Configurator// page and click //Configure// and //Update//. Now the seat is allready red not brown any more, but as configuration, nothing is selected.
{{ ::configuration_10.png?400 |}}

There is missing an other part, a [[ig.creator:assets:materials:categories|Material Category]].

To create a //Material Category// go to the //Assets/Materials/Categories// page and create a new category. As default value choose //Oak//.
{{ ::configuration_11.png?800 |}}

After this, go to the //Products/Commercial// page and add this material categroy to the //DefaultMaterial//
Also go to //Products/Graphical/Material// and change it as shown below.

Notice in both case the assigned material categroy is without @!
{{ ::configuration_12.png?1000 |}}


Go back to the //Configurator// page. Click //Configure// and than //Update//. Initially the chair is colored oak. Now now from the configuration table, choose the created property and the value. Click //Update// and see how the seat will change its color.
{{ ::configuration_13.png?400 |}}

Unfortunally the color cannot be changed back to oak. For this add a second color //Oak// to the properties list. Go to //Assets/Commercial// and add an other color to the right side. Assign it to the material property.
{{ ::configuration_14.png?800 |}}

Go back to the //Configurator// and click //Configure//. The material property should have two values now.
{{ ::configuration_15.png?300 |}}

With this it is now possible to change between two materials.

Now, this //Material Category// can be assigned to differen geometies as well. As an exercise, create more materials, material categories and other properties to change the materials of differen parts. 


== Configure the Seat Back ==

This section will teach how to change geometries inside the IG.Creator. For this the seat back geometries of the chair will be changed.
Make sure having two seat back geometries for the chair or [[ig.guidelines:uploading_geometries#uploading_data|upload some]].
{{ ::upload_seatbacks.png?800 |}}

Next go to the //Assets/Commercial// page and create a new property with two values. Make sure the values //Id// fit the created geometry names. Assign the property to the **Chair**.
{{ ::property_01.png?800 |}}

Go to the //Products/Graphical/Configurator// page and click //Configure//. A second property for the seat backs will appear.
{{ ::configuration_16.png?300 |}}

For now the new property hasn't any influence on the 3D model. For this, two more steps are needed.
  * Update the hierarchical structure
  * Create a new property under //Products/Commercial//

For updating the hierarchical structure got to the //Products/Graphical/Structure// page. Next to the //SeatBack// node there needs to be an additional node for the other seat back type.
{{ ::configuration_17.png?800 |}}

Select the //SeatBack// line and press the right mouse button. Add two child elements.
{{ ::configuration_18.png?800 |}}
The result should look like this:
{{ ::configuration_19.png?800 |}}

Name the //Description// of the new nodes //SeatBack_A// and //SeatBack_B//.
{{ ::configuration_20.png?800 |}}
The new nodes will not get a positioon, they inheriate it from the prarent node //o1.o2//

As next, go to the //Products/Graphical/Geometry// page and remove the geometry from node //o1.o2//.
{{ ::configuration_21.png?800 |}}

Add the geometries //SeatBack_A// and //SeatBack_B// to the nodes //o1.o2.o1// and //o1.o2.o2//.
{{ ::configuration_22.png?800 |}}

For checking, put //SeatBack_B// a little bit higher as //SeatBack_A// and go back to the //Configurator//.
{{ ::configuration_23.png?200 |}}

The next step is to hide either //SeatBack_A// or //SeatBack_B//. For this, a new property needs to be linked to the geometries. This is done like it has been done with the material befor. Go to //Products/Commercial// and create a new commercial property.
{{ ::configuration_24.png?800 |}}
In case testing the new property inside the //Configurator// the result is: Nothing has changed. This is because the geometries itself are not connected to the created property yet.

Go to //Products/Graphical/Structure// to link the property and the geometries. Have a close look at the table. There should be a column called //Visible//.

Take the line with //SeatBack_A// and for the visibility write: **{ComSeatBack==='SeatBack_A'}**

This expression is a JavaScript code snippet.
Each JavaScript code snippet is written between **{}**. **ComSeatBack** is the property created under //Products/Commercial//. But when using it inside the node structure is gets the prefix **Com**. **SeatBack_A** is the name of the geometry. Notice strings are written in **''** not **""** !
{{ ::configuration_25.png?800 |}}

Because //Visible// column is asking for a boolean, this line is evaluatoed as //If-statement//. Make //SeatBack_B// configuratable as well and reset the position, so it has the same position like //SeatBack_A//. Test it in the //Configurator//.
{{ ::configuration_26.png?400 |}}

With this, it is possible to configure the seatback with in two differen variations.

As an exercice, add more properties that changes a part of the chair, e.g. the seat or the legs.