Importing content from Photoshop file

Using Smart Importer, import content for the individual scenes of the Solution. It utilizes AI to analyze Photoshop files and detect, suggest, and create controls for the Scene Composer Solution. The user has the option to choose which control is intended for which image. 

1. Click Import > Smart Importer…Importer > From Local File… from the menu bar.
   
   
   
   
   
2. A dialog box appears. Select the target Photoshop file for importing.
   • For this tutorial, select Car_Cluster.psd 

A preview of the Photoshop image is displayed along with a Layer Tree (Orange frame in the image below) which contains the layers in the .psd file shown in “tree” structure format. When an item in the tree is clicked, the right-side view beside it will show the suggested controls (Red frame in the image below) based on the image. The controls are sorted by the AI’s detection probability. Controls are reusable components in Scene Composer that are configurable to achieve a certain functionality in the solution.

Starting on the next section, a guideline on how to apply Controls to each item in the .psd file is introduced. 

Gauge Controls

Apply Gauge control to the gauge-looking images on right/left side of the image. 

1. Click the triangular icon beside Cluster for expanding the Cluster layer tree. (Orange frame in the image above)

• The target is to display Gauge left and Gauge right in the expanded tree. 
  

2. Click Gauge left in the tree.

• A control list (Red frame in the image above) is displayed in a right-side window (Blue frame inon the figureright below).side.
• These controls are categorized into AI detected Controls and other Available Controls.

3. Click Apply button on Gauge from the control list.

• This operation converts the Gauge left image into a Gauge control which can be used in Scene Composer.

4. Click OK button when a dialog box appears.

• You can customize that control by configuring Appearance (Red frame in the image above) and Basic Properties tabs (Orange frame in the image above).
• Please configure Gauge left and Gauge right settings as seen below.
  

Gauge Left
Operational tab	Target item	Setting Value
Control	Gauge
Appearance	Scale kmh Gauge Background BackgroundImage Pivot Point	BackgroundImage BackgroundImage CenterCentered
Basic Properties	name InputMax RolationMaxRotationMax	SpeedGauge 240 225
Gauge right
Operational tab	Target item	Setting Value
Control	Gauge
Appearance	Scale rpm Gauge Background BackgroundImage Pivot Point	BackgroundImage BackgroundImage CenterCentered
Basic Properties	name InputMax	SpeedGaugeRPMGauge 8000

• By following the settings above, you can map correct images to CGI Studio Controls.
• Please note, if you don't set the BackgroundImage as mentioned above, CGI Studio useswill anuse the original image thatof is applied tothe Gauge controlControl instead of anthe image onfrom athe Photoshop file.

5. Apply settings as seen below for the Text item under Gauge left and Gauge right.

• Please refer to Setting Properties of a Control how to apply a control function. 
  

Gauge left: 000
Operational tab	Target item	Setting value
Control	Text Value
Basic Properties	name	SpeedValue
Gauge right: 0000000
Operational tab	Target item	Setting value
Control	Text Value
Basic Properties	name	RPMValue

       
    

Status Indicators (top) 

Apply Tell Tale control to the status indicator on the screen top. (Orange frame in the image below)

1. Click the triangular icon beside StatusTop below the Cluster layer tree.

• StatustopStatusTop is expanded and items Line and Telltales are shown.

2. Click the triangular icon beside Telltales in the tree. 

• Telltales is expanded and IndicatorLeft, IndicatorRight, OpenDoors and so on are shown. 

3. Apply Tell Tale (Red frame in the image above) control to OpenDoors, Engine, Airbag and Brake. 

• Please refer Gauge Control section how to apply controls. 

Status Indicators (bottom) 

Apply Progress Bar and Text controls to the status indicator on the bottom of the screen (Orange frame in the image below). 

1. Click the triangular icon beside StatusBottom below the Cluster layer tree. 

• StatusBottom is expanded and items 78.321km, Petrol and Temp are shown. 

2. Apply the settings below for 78.321km. 

Operational tab	Target item	Setting value
Control	Text Value
Basic Properties	name	Odometer

3. Click the triangular icon beside Petrol in the tree. 

• Petrol is expanded and items PetrolControl, petrol icon, F and E are shown. 

4. Apply the settings below for PetrolControl. 

Operational tab	Setting value
Control	ProgressBar

5. Click the triangular icon beside Temp in the tree. 

6. Apply the same settings as No.4 to TempControl that is shown below Temp layer tree. 

• Please refer Gauge Control section how to apply controls. 
  

Middle Section Display 

Last step is to transform the middle part of the display. The goal is to create separate scenes for each scenario to display the Car Status, and Incoming Call. 

1. Right-click on Car_Cluster under Scenes in the Import Settings. 

2. In the context menu, select “Clone Scene…”. 

3. In the Clone Scene dialog box, name the cloned scene as Car_Status. 

4. Click the newly created Car_Status scene to display its Cluster tree. 

5. Uncheck the checkbox of Car under Middle. 

6. Then, mark the checkbox of Car_Status.

7. Repeat steps 1 to 6 above tofor Incoming Calls:

create a clone of the clonedCar_Cluster scene forwith Incoming_Call.the Thisname time,"Incoming_Call" makeuncheck sure Incoming_Callthe checkbox isof marked.the "Car" group check the checkbox of the "Incoming Call" group

Finally, after everything is set, click the OK button of the Smart Importer dialog box.