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 Resolution	960

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.
     

     ShowFull24Hours	TRUE
     ShowSeconds	TRUE

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_Car	TextButton	Text	(blank space)
     TextButton_Navigation	TextButton	Text	(blank space)
     TextButton_Phone	TextButton	Text	(blank space)
     TextButton_Music	TextButton	Text	(blank space)

Configuration of Music Tree

Configuration of Comfort Tree

Configuration of Navigation Tree

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.
4. Rendering of camera "IVI_Sample\DocumentView" is enabled.