Importing resources (Smart Importer)

Import contents into each scene in the solution using the Smart Importer, which uses AI to analyze Photoshop files to detect, suggest, and create controls for the Scene Composer solution. This step describes the operation of assigning appropriate controls to images on a resource using the Smart Importer.

Gauge Control

1. From the menu bar, select "Import" and then "Smart Importer > From Local File...", select the resource to be imported
   • A file selection dialog will be opened.
     

     If your solution contains unsaved changes you will be prompted to save your solution before importing. Clicking [OK] in the prompt will save your solution.

     
     

     Resource to be Imported
     Path	Filename
     \cgi_studio_content\2D\PSD\	Car_Cluster.psd

     
     
     
     
     
     
2. In the Smart Importer file selection dialog choose the resource to be imported as specified in the table below, then click [Open]. 
   • The Smart Importer dialog box will be opened.

     For more information on the Smart Importer dialog box, click here.

   • Before clicking the [OK] button at the bottom of the Smart Importer dialog box, follow the configuration instructions in the steps below.
     
     
3. In the Smart Importer dialog's Layer tree expand "Cluster" by clicking on the white triangle on its left and select "Gauge Left".
   • A control list appears on the right side of the dialog, listing the available controls.
     
   • The number displayed to the right of each control indicates the AI's detection confidence for that specific item.
     
     
     
     
     
4. In the Control list press the [Apply] button on the right side of the Gauge control.
   • "Gauge left" will be displayed in a different text color with a different icon. This indicates a successful assignment of a Scene Composer control.
   • The Appearance tab will be automatically selected on the right side of the dialog.
     
     
5. Configure the following settings under [Appearance] and [Basic Properties] sections of "Gauge Left".
   • For the specifications and specific operation for [Appearance] and [Basic Properties], please refer to here.

     If no "BackgroundImage" is set for layer mapping, the default background of the Gauge control will be used instead of the image from the Photoshop file.
     

     Gauge left
     Target Tab	Target Item	Setting Value
     Appearance
     To configure the image properties, select [Select layers] from the drop-down menu. This will open a dialog where the appropriate ImageLayers can be selected. After selecting the image, check [Pivot Point].
     	BackgroundImage	Scala kmh Gauge Background Pivot Point: Center (X: 209, Y: 209)
     	NeedleImage	NeedleImage
     Basic Properties
     	Name InputMax RotationMax	SpeedGauge 240 225

6. In the Smart Importer dialog's Layer tree select the Text "000" which can be found directly below "Speed Gauge". In the Control List apply the control "Text Value" and configure its properties according to the table below.

   Gauge left
   Target Tab	Target Item	Setting Value
   Basic properties
   	Name	SpeedValue

7. Configure "Gauge Right" in the same manner by following the instructions from step 3 through step 7. Apply the settings provided in the table below.
   • The configuration of the Gauge controls is now complete.

     Gauge Control
     Target Tab	Target Item	Setting Value
     Appearance
     To configure the image properties, select [Select layers] from the drop-down menu. This will open a dialog where the appropriate ImageLayers can be selected. After selecting the image, check [Pivot Point].
     	BackgroundImage	Scala rpm Gauge Background Pivot Point: Center  (X: 209, Y: 209)
     	NeedleImage	NeedleImage
     Basic Properties
     	Name InputMax	RPMGauge 8000
     Text Value control
     Basic Properties
     	Name	RPMValue

     
     

Duplicate and Configure Scenes

In the Smart Importer's Layer Tree expand the Cluster > Middle group. There you can see that the photoshop file to be imported provides 3 scenarios for the middle part:

• Car
• Car Status
• Incoming Call.

The goal of the following steps is to create separate scenes for each of the 3 scenarios.

1. In the Smart Importer's "Import Settings" section under "Scenes" right-click on the Car_Cluster scene and choose [Duplicate Scene...] from the context menu.
   • The [Clone Scene...] dialog will be opened.
     
     
     
     
2. In the "Clone Scene..." dialog enter the scene name as specified in the table below, then click [OK].
   • A new scene configuration has been created.
   • In the "Import Settings" tab the new "Car_Status" scene will be displayed and actively selected.
   • The Preview window displays the Car_Status scene.
   • The Layer tree displays the Car_Status scene's layers.

     Clone Scenes...
     Property	Value
     Name	Car_Status

     
     
3. With the "Car_Status" scene selected in the "Import Settings" tab under "Scenes", expand "Cluster" > "Middle" in the Layer Tree.
   • There is a checked checkbox in front of "Car". The checkboxes of "Car Status" and "Incoming Call" are unchecked.
     
     
4. In the Layer Tree uncheck and uncheck the checkboxes as specified in the image and table below.
   • The Smart Importer's Preview window will be updated accordingly, displaying the checked and hiding the unchecked layers.
     

     Scene "Car_Status": Cluster > Middle
     Layer	Checkbox
     Car	unchecked
     Car Status	checked
     Incoming Call	unchecked

     
     
     
5. Repeat operations 1 through 4 above, this time checking and unchecking the Layers as provided in the table below.
   • There are 3 scenes in the "Import Settings" tab's Scenes section: Car_Cluster, Car_Status and Incoming_Call.
   • The import configuration is completed.

     Clone Scenes...
     Property	Value
     Name	Incoming Calls

     Scene "Incoming_Call": Cluster > Middle
     Layer	Checkbox
     Car	unchecked
     Car Status	unchecked
     Incoming Call	checked

6. In the Scene's section of the Import Settings tab select each scene and verify its content in the Preview. Once all of the scenes have been reviewed, click the [OK] button in the Smart Importer dialog box to initiate the import.