# Part 1: Smart Importer This section describes the creation of a new Solution. We will use the Smart Importer to import a Photoshop .psd file. Smart Importer will analyze the PSD file and try to identify which controls are included in the picture. The final assignment of controls (such as RadioButtons, DigitalClocks, CheckBoxes, etc.) however has to be performed manually. After some configuration effort Scene Composer Controls can be imported into your Scene Composer solution. ### Creating a new Solution 1. Start Scene Composer and double-click on **\[Empty\]** from **\[Samples and Templates\]** on the startup screen. - A new solution will be created based on the Empty solution template. 2. In the **Render Targets** panel, select **\[Display (0)\]**. - - The **\[Properties\]** panel will display **\[Display\]** properties.
3. In the **\[Display\]** section of the **\[Properties\]** panel configure the resolution as in the table below.
X Resolution 640
Y Resolution960
4. Click **\[Save solution...\]** in the toolbar. - The Windows **\[Save As\]** dialog will appear.
5. In the **\[Save As\]** dialog choose a location and name for your solution and click **\[Save\]**. - The solution is saved. ### Using Smart Importer In our example we will use the Smart Importer to import a Photoshop .psd file. Smart Importer will analyze the PSD file and try to identify which controls are included in the picture. After some configuration effort you can directly create CGI Studio Controls wherever it is applicable. #### Configuration of Header 1. Select **\[Import > Smart Importer > From Local File...\]** from the menu bar. - A Windows Open dialog titled **Smart Importer** will be opened. 2. Select the following Photoshop file and press **\[Open\]**. - The **\[Smart Importer\]** window is opened (please be patient, this may take a while). - The Photoshop file's layers will be displayed in the **Layer Tree** area marked in orange in the image below. - The **Layer Tree** is displayed in tree style. Initially it is collapsed, but it can be expanded via double-clicking or using the triangle to the \[IVI\_Sample\]'s left.
File path <cgi-studio-root>\\cgi\_studio\_content\\2D\\PSD\\IVI\_Sample.psd
3. Expanding the **Layer Tree** navigate to **\[IVI\_Sample > Header > DigitalClock\]** and select **\[DigitalClock\]**. - In the **Smart Importer's Preview** the DigitalClock on the top left is marked with a yellow border. - The **Control List** to the right displays applicable Controls. 4. In the **\[Control List\]** click on the **\[Apply\]** button on the right side of the **\[DigitalClock\]** control (see image below). - Based on the Photoshop file's DigitalClock the Scene Composer control **DigitalClock** will be created when the import is done. - **DigitalClock** will be displayed in a different color and with a different icon in the **Layer Tree** to indicate successful assignment of a Scene Composer control.
5. Switch to the **\[Basic Properties\]** tab and tick the checkboxes noted in the table below. - After import the created SceneComposer Control **DigitalClock** will be configured with these property values.
ShowFull24HoursTRUE
ShowSecondsTRUE
6. In the **Layer Tree** select **\[TellTale\_Error\].** - In the **Smart Importer's Preview** the TellTale\_Error on the top right is marked with a yellow border. - The **Control List** panel to the right displays applicable Controls. 7. In the **Control List** panel click the **\[Apply\]** button next to **\[Tell Tale\]**. - The Scene Composer Control **TellTale** is applied to the Photoshop file's **TellTale\_Error** layers. - In the **Appearance Tab** you can see that the **Telltale**'s properties **OnStateImage** and **OffStateImage** are automatically configured with the Photoshop file's layers OnStateImage and OffStateImage. - **TellTale\_Error** as well as its OnStateImage and OffStateImage will be displayed in a different color and with different icon in the **Layer Tree** to indicate successful assignment of a Scene Composer control. #### Configuration of Menu Buttons 1. In the **Layer Tree** expand **\[Menu\_button\]**. - The **Layer Tree** displays 4 **TextButtons**, each of which has 3 images (NormalImage, PressedImage and FocussedImage). 2. In the **Layer Tree** select **TextButton\_Car**. - The **Control List** offers a list of Controls to apply. 3. In the **Control List** apply the Scene Composer control **TextButton**. - In the **Appearance** tab you can see that NormalImage, PressedImage and FocussedImage have been configured automatically. - In the **Layer Tree** the **TextButton** has changed its color and its icon. 4. In the **\[Basic Properties\]** tab empty the textfield of the Text property (delete "Text..."). - The textfield of property Text is empty. 5. Repeat the 3 steps above with the other **TextButtons** to achieve a configuration as in the table below. - The menu buttons are configured for importing.
**Target Layer****Control List****Basic Properties**
TextButton\_CarTextButtonText(blank space)
TextButton\_NavigationTextButtonText(blank space)
TextButton\_PhoneTextButtonText(blank space)
TextButton\_MusicTextButtonText(blank space)
#### Configuration of Music Tree
1. In the **Layer Tree** expand **\[Music\]**. - The **Layer Tree** displays among other things a Slider, DigitalClock\_Time, DigitalClock\_Total\_Time and a CheckBox. 2. In the **Layer Tree** select the target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of the Music part are configured for importing.
**Target Layer****Control List****Basic Properties**
SliderSliderValueFloat9000
MinimumFloat0
MaximumFloat18000
DigitalClock\_TimeDigitalClockShowFull24HoursBooleanTRUE
ShowSeconds BooleanFALSE
DigitalClock\_Total\_Time DigitalClock TimeUInt3218000
ShowFull24HoursBooleanTRUE
ShowSecondsBooleanFALSE
CheckBox CheckBox TextString(blank space)
#### Configuration of Comfort Tree
1. In the **Layer Tree** expand **\[Comfort > Seat\_Left\]**. - The **Layer Tree** displays among other things Seat\_Left with TextValue\_Temperature, Icon\_Button\_+, Icon\_Button\_-, ProgressBar and SeatHeating\_Left. 2. In the **Layer Tree** select the **Seat\_Left**'s target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of Comfort's Seat\_Left are configured for importing.
**Seat\_Left**
**Target Layer****Control List****Basic Properties**
TextValue\_TemperatureText ValueValueFloat23
FormatTextString%02d
Icon\_Button\_+IconButton
Icon\_Button\_-IconButton
ProgressBarProgressBarValueFloat23
MinimumFloat16
MaximumFloat28
SeatHeating\_LeftCheckBoxTextString(blank space)
3. In the **Layer Tree** expand **\[Comfort > Seat\_Right\]**. - The **Layer Tree** displays among other things Seat\_Right with TextValue\_Temperature, Icon\_Button\_+, Icon\_Button\_-, ProgressBar and SeatHeating\_Left. 4. In the **Layer Tree** select the **Seat\_Right**'s target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of Comfort's Seat\_Right are configured for importing.
**Seat\_Right**
**Target Layer****Control List****Basic Properties**
TextValue\_TemperatureText ValueValueFloat23
FormatTextString%02d
Icon\_Button\_+IconButton
Icon\_Button\_-IconButton
ProgressBarProgressBarValueFloat23
MinimumFloat16
MaximumFloat28
SeatHeating\_RightCheckBoxTextString(blank space)
5. In the Layer Tree expand **\[Comfort > Fan\]**. - The **Layer Tree** displays among other things a Slider. 6. In the **Layer Tree** select **Fan**. Apply the control in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of the Comfort's Fan are configured for importing.
**Fan**
**Target Layer****Control List****Basic Properties**
SliderSlider
7. In the Layer Tree expand **\[Comfort > Air\]**. - The **Layer Tree** displays among other things a RadioButton\_Outside air, RadioButton\_Inside air and RadioButton\_AUTO. 8. In the **Layer Tree** select **Air**. Apply the control in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The RadioButtons are configured for importing.
**Air**
**Target Layer****Control List****Basic Properties**
RadioButton\_Outside airRadioButtonTextString(blank space)
RadioButton\_Inside air RadioButton Text String (blank space)
RadioButton\_AUTO RadioButton Text String (blank space)
9. When expanding these **RadioButtons** in the Layer Tree, you can see that each of them contains a **Control\_Background**. **Uncheck the checkbox** of these Control\_Background images in the Layer Tree as seen in the image below. - All images for the RadioButtons are configured for importing
**\[Air\] In the Layer Tree Panel **
**Target Layer****Configuration Details**
RadioButton\_Outside air/Control\_Backgrounddisable (uncheck checkbox in Layer Tree)
RadioButton\_Inside air/Control\_Background disable (uncheck checkbox in Layer Tree)
RadioButton\_AUTO/Control\_Background disable (uncheck checkbox in Layer Tree)
#### Configuration of Navigation Tree
1. In the Layer Tree enable the Navigation tree by checking the checkbox to the left of **Navigation**. - Navigation will be enabled as seen in the image below.
#### Completing the Import 1. Since configuration is done now, click the **\[OK\]** button on the bottom of the **Smart Importer** window. - The Photoshop file will be imported with all configured controls and settings. - The imported content can be viewed in the Scene Composer's Solution Explorer. - The imported scene IVI\_Sample will be displayed in the Scene Editor. - In the Scene Tree panel you can confirm that all configured controls and settings made in Smart Importer have been applied during the import. 2. In the Scene Tree panel right-click on the Navigation GroupNode and uncheck "Node Rendering Enabled" in the context menu. Alternatively press <Ctrl + E> on your keyboard. - The Navigation GroupNode will not be rendered (i.e. displayed) by default. 3. In the Render Targets panel enable displaying the imported "IVI\_Sample\\DocumentView" camera in display design. - Rendering of camera "IVI\_Sample\\DocumentView" is enabled.