====== Products/Graphical ====== This page and it's sub pages implement the creation of parametric 3D descriptions for the Products. The following pages are provided: * Graphical/Index (this page) - display (and editing) of all properties of a component * [[ig.creator:products:graphical:archetype|Archetype]] - creation of the structure by using predefined archetypes with help of a template. * [[ig.creator:products:graphical:structure|Structure]] - management of the component structure including a component tree, each Product may be built from a number of components * [[ig.creator:products:graphical:geometry|Geometry]] - a special view onto the component structure to manage geometries and layer assignments * [[ig.creator:products:graphical:material|Material]] - a special view onto the component structure to manage material and mapping assignments * [[ig.creator:products:graphical:evaluator|Evaluator]] - for the selected component, assign an Evaluator script and set it's parameters * [[ig.creator:products:graphical:interactor|Interactor]] - for the selected component, assign an Interactor script and set it's parameters * [[ig.creator:products:graphical:configurator|Configurator]] - run the selected Product in the Configurator incl. live previews * [[ig.creator:products:graphical:planner|Planner]] - create multiple Products in a 3D planner and basket All pages share a common selection state. The Planner page does not require a selected Product. This page provides the full access to all component's properties like positions, rotations or nodes creation. {{ :ig.creator:products:graphicaloverview.png?600 |}} ==== 1) Navigation ==== These options give controll over the structure's navigation and structure building. * **Next:** Go to the next component on the same level. * **Previous:** Go to the previous component on the same level. * **Down:** Go to the first child of the current component. * **Up:** Go to the parent of the current component. * **Add Sibbling:** Add a neighbour and load it. * **Add Child:** Add a child and load it. ==== 2) Component ==== The Component section holds information about the current selected node, a description of the current node as well visibility and selection options for this node. The __Visible__ section manages the visibility of a component.\\ It takes fix booleans as well well as JavaScript expressions returning a boolean.\\ The images below shows three examples to fill this area.\\ The visibility can be set either with true or false. Or you can type in a JavaScript function for a more complex behaivior of the visibility giving back a true or false as result. |Visible {}: false |Set a fix value| |Visible {}: {ComShowComponent === 'Yes'} |Simple JavaScript expression using a Commercial property| |Visible {}: {$c.toggleVisibility()} |JavaScript expression using a function from the Context| To learn more about using JavaScript expressions and Context functions, see the following links: **Needs to be provided** __Selectable__ defines if this node can be selected inside the 3D view with the mouse. The selectivity was mainly used to group nodes and provide interaction options for Interactors if they use mouse controll. There are four options. * **Empty:** If nothing is selected, the node itself is automatical selectable * **Self:** The node itself is selectable * **Parent:** The nodes parent is selectable * **None:** The node is not selectable and nothing is selected in this case **Note: After filling these areas, don't forget to press the __Apply__ button!** ==== 3) Position and Rotation ==== Positions and Rotations of a node can be set here.\\ Positions are provided in meters.\\ Rotations are provided in degrees. :!: Each node can only hold one rotation around one axis. :!: If more than one rotation axis is needed, this must be done by creating several child nodes. Each area can hold a fix value as a number or it can hold JavaScript code returning a number.\\ For details see the section **2) Component -> Visible** or see the following links: **Needs to be provided** **Note: After filling these areas, don't forget to press the __Apply__ button!** ==== 4) Geometry ==== In this section a geometry can be applied to the node. The area is devided into two parts. On the left side there is a preview window. If the geometrie provides a preview, it is shown there. {{ :ig.creator:products:graphicalpreview.png?400 |}} On the right side there are parameters to set up the geometry. \\ * **Geometry:** Search for a geometry by typing in the name or searching in the dropdown menu. Instead of using a fix geometry, the geometry can be assigned with the help of a JavaScript snippet. For details see the section **2) Component -> Visible** or see the following links: **Needs to be provided** * **Scale:** If needed, the scale of the geometry can be adjustet. Keep in mind, the default value is 1. A scale lesser than 0 is interpreted as deformation. :!: A value between 0 and -1 can be set in ratio with the animation times 0 and 100 %. A value of -0.5 indicates an animation time of 50%. Instead of using a fix values, the scale can be assigned with the help of a JavaScript snippet. For details see the section **2) Component -> Visible** or see the following links: **Needs to be provided** * **Layer:** A geometry can be assigned to a Layer. **Note: After filling these areas, don't forget to press the __Apply__ button!** ==== 5) Material ==== In this section a material or a mapping can be assigned. * **Material:** Assigne a material or a material category. It is also possible to use a JavaScript snippet. For details see the section **2) Component -> Visible** or see the following links: **Needs to be provided** * **Mapping**: Assigne a mapping to change the given material mapping. **Note: After filling these areas, don't forget to press the __Apply__ button!** ==== 6) Evaluator and Interactor ==== In this section a preview of the assigned evaluator and interactor can be seen. To assign an evaluator or interactor see the corresponding sections: * [[ig.creator:products:graphical:evaluator|Evaluator]] * [[ig.creator:products:graphical:interactor|Interactor]]