Skip to main content

Importing content from Photoshop file

Using Smart Importer, import content for the individual scenes of the Solution. It utilizes an AI service 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… from the menu bar.
    drawing-4-1678091903.png


  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.

drawing-4-1678092033.png

Starting on the next page, 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. 

drawing-4-1678092273.png

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.window (Blue frame in the figure below).
  • 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.

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

Gauge left

Gauge Left Operational tab Target item Setting Value Control Gauge
Appearance

Scale kmh

Gauge Background

BackgroundImage Pivot Point

BackgroundImage

BackgroundImage

Center

Basic Properties

name

InputMax

RolationMax

SpeedGauge

240

225

Gauge right

OperationalGauge tab Target item Setting Valueright Control Gauge
Appearance

Scale rpm

Gauge Background

BackgroundImage Pivot Point

BackgroundImage

BackgroundImage

Center

Basic Properties

name

InputMax

SpeedGauge

8000

  • By following the settings above, you can map correct images to CGI Studio Controls.
  • Please note, if you don't set BackgroundImage as mentioned above, CGI Studio uses an original image that is applied to Gauge control instead of an image on a Photoshop file.

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

  • Please refer to page 15 how to apply a control function. 

Gauge left: 000 

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

Gauge right: 000 

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 (highlighted in orange below).

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

  • Statustop 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 control to OpenDoors, Engine, Airbag and Brake. 

  • Please refer to steps 2 to 4 in page 5 on how to apply controls. 

 

Status Indicators (bottom) 

Apply Progress Bar and Text controls to the status indicator on the bottom of the screen (highlighted in orange 
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 to steps 2 to 4 in page 5 on 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 to create the cloned scene for Incoming_Call. This time, make sure Incoming_Call checkbox is marked. 

 

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

Back to top