Part 1: Smart Importer

This section describes the creation of a new SolutionSolution. We will use the Smart Importer to import a Photoshop .psd file. Smart Importer will analyze the PSD file and howtry to proceedidentify importingwhich IVI_Sample.psdcontrols fileare viaincluded Smartin Importer.the Speciallypicture. aboutThe howfinal assignment of controls (such as RadioButtons, DigitalClocks, CheckBoxes, etc.) however has to assignbe performed manually. After some configuration effort Scene Composer Controls tocan eachbe imageimported parts.into your Scene Composer solution.

 

Create

Creating a new Solution

1. SmartStart ImporterScene Composer and double-click on [Empty] from [Samples and Templates] on the startup screen.
   • HeaderA Treenew solution will be created based on the Empty solution template.
     
2. Menu_button tree

In the Render Targets panel, select [Display (0)].

• Music Tree
  • Comfort Tree

The

Navigation[Properties] Treepanel will display [Display] properties.

Create a new Solution

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

Double-click on

Activate the "Render Targets"[Properties] panel and selectconfigure the "Display". Change the display's resolution as shownin the table below.

Click the "[Save solution..." icon] in the menutoolbar.

The Windows [Save As] dialog will appear.

A

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.

Choose

Configuration "of Header

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

Click

import

the

created

If aSceneComposer Control isDigitalClock 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.

Followingwith thethese previousproperty operation, similar operations are performed on each item.

Header Tree

values.

Target LayerShowFull24Hours	Control ListTRUE
TellTale_ErrorShowSeconds	Tell TaleTRUE

Menu_buttonthe tree

Layer Tree

Configuration of Menu Buttons

Configuration of Music Tree

Configuration of Comfort Tree

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.

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 DigitalClock_Total_TimeTextValue_Temperature DigitalClockText Value TimeValue 18000Float 23 ShowFull24HoursFormatText enableString %02d ShowSecondsIcon_Button_+ disableIconButton    

 

Target Layer Control List Basic Properties
CheckBoxIcon_Button_- IconButton       ProgressBar ProgressBar Value Float 23 Minimum Float 16 Maximum Float 28 SeatHeating_Left CheckBox Text String (blank space)

---

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.

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 Seat_Left TextValue_Temperature Text Value Value Float 23 FormatText String %02d

Target Layer Control List Seat_Left Icon_Button_+ IconButton       Icon_Button_- IconButton    

 

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

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

In

the

(*)Layer Tree expand [Comfort > Fan].

The imageLayer isTree treateddisplays likeamong other things a checkbox.Slider.

So there isIn nothe additionalLayer rectangleTree 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 that.

importing.

		Fan

Target Layer Control List Basic Properties Seat_Right TextValue_Temperature Text Value Value 23 FormatTextSlider %02dSlider      

In the Layer Tree expand [Comfort > Air].

The Layer Tree displays among other things a RadioButton_Outside  air, RadioButton_Inside air and RadioButton_AUTO.

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 Seat_Right Icon_Button_+Basic IconButtonProperties 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 Airair RadioButton Text String (blank space) RadioButton_Inside Airair
RadioButton
Text
String
(blank space) RadioButton_AUTO
RadioButton
Text
String
(blank space)

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 detailsDetails
Air RadioButton_Outside Air/air/Control_Background disable (uncheck checkbox onin theLayer left)Tree)
RadioButton_Inside Air/air/Control_Background
disable (uncheck checkbox onin theLayer left)Tree) RadioButton_AUTO Air/RadioButton_AUTO/Control_Background
disable (uncheck checkbox onin theLayer left)Tree)

---

Navigation

Tree

Since

this

Configuration of Navigation Tree

In the Layer Tree enable the Navigation tree isby currently being unchecked, please tickchecking the checkbox.checkbox Thereto the left of Navigation.

Navigation will be enabled as seen in the image below.

Completing the Import

Since configuration is nodone neednow, to applyclick the control[OK] inbutton ControlList since it only imports a Navigation image. After completingon the settingsbottom up to this point, pressof the OKSmart buttonImporter towindow. perform

the import. The photoshopPhotoshop 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,panel you can confirm that all configured controls and settings made in Smart Importer have been applied during the import.

After

you finishIn importing,the rightScene Tree panel right-click on the Navigation GroupNode in Scene Tree and uncheck "Node Rendering Enabled”.Enabled" Thenin thisthe elementcontext menu. Alternatively press <Ctrl + E> on your keyboard.

The Navigation GroupNode will not be notrendered displayed(i.e. displayed) by default.

---