Part 1: Smart Importer

This section describes the creation of a new Solution and how to proceed importing IVI_Sample.psd file via Smart Importer. Specially about how to assign Controls to each image parts.

---

Create a new Solution

The first step is to create a new Solution for Scene Composer.

Double-click on the Empty template under Samples and Templates.
* Selecting “Empty” template creates a new solution based on the template.

Activate the "Render Targets" panel and select the "Display". Change the display's resolution as shown below.

Click the "Save solution..." icon in the menu bar.

A dialog box will appear, allowing you to select an appropriate location. Input any name as a solution file name.

---

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.

Choose "Import > Smart Importer", "From Local File...". This will open the Windows Open dialog. Select the following Photoshop file and press "Open": 

<cgi-studio-root>\cgi_studio_content\2D\PSD\IVI_Sample.psd

The photoshop file will be loaded and the Smart Importer dialog box will appear.

The photoshop file's content will be displayed in the area marked in orange in the above picture. Click on the left-most triangle button to extend the IVI_Sample and Header layer tree. Check the checkbox to the left of the Header and make sure that all items under the Header are checked. Click on DigitalClock in the tree. From the Control List, click on the Apply button to the right side of the DigitalClock control.

Click on “Basic Properties” tab and check “ShowFull24Hours” checkbox. This will make the display show 24 hours. Similarly, uncheck “ShowSeconds”. This will prevent the seconds from being displayed.

If a Control is set and imported with layers and properties that do not match when imported, the original group will not reflect the Control, and another new group node with Control applied will be added.

Following the previous operation, similar operations are performed on each item.

Header Tree

---

Menu_button tree

---

Music Tree

---

Comfort Tree

Target Layer		Control List
Seat_Left	Icon_Button_+	IconButton
	Icon_Button_-	IconButton

Target Layer		Control List	Basic Properties
Seat_Left	ProgressBar	ProgressBar	Value	23
			Minimum	16
			Maximum	28

Target Layer		Control List	Basic Properties
Seat_Left	SeatHeating_Left(*)	CheckBox	Text	(blank space)

(*)The image is treated like a checkbox. So there is no additional rectangle for that.

Target Layer		Control List
Seat_Right	Icon_Button_+	IconButton
	Icon_Button_-

Target Layer		Control List	Basic Properties
Seat_Right	ProgressBar	ProgressBar	Value	23
			Minimum	16
			Maximum	28

Target Layer		Control List	Basic Properties
Seat_Right	SeatHeating_Right(*)	CheckBox	Text	(blank space)

(*)The image is treated like a checkbox. So there is no additional rectangle for that.

Target Layer		Control List
Fan	slider	slider

Target Layer		Control List	Basic Properties
Air	RadioButton_Outside Air	RadioButton	Text	(blank space)
	RadioButton_Inside Air	RadioButton	Text	(blank space)
	RadioButton_AUTO	RadioButton	Text	(blank space)

Target Layer		Configuration details
Air	RadioButton_Outside Air/Control_Background	disable (uncheck checkbox on the left)
	RadioButton_Inside Air/Control_Background	disable (uncheck checkbox on the left)
	RadioButton_AUTO Air/Control_Background	disable (uncheck checkbox on the left)

---

Navigation Tree

Since this tree is unchecked, check it. There is no need to apply the control in ControlList since it only imports a Navigation image. After completing the settings up to this point, press the OK button to perform the import. The photoshop file will be imported with all configured controls and settings.

In the Scene Tree panel, you can confirm that all configured controls and settings made in Smart Importer have been applied during the import.

After you finish importing, right click on the Navigation RenderNode2D below the Navigation group in Scene Tree and uncheck "Node Rendering Enabled”. Then this element will be not displayed by default.

---