Importing resources (Smart Importer)

UsingImport contents into each scene in the solution using the Smart Importer, importwhich content for the individual scenes of the Solution. It utilizesuses AI services to analyze Photoshop files andto detect, suggest, and create controls for the Scene Composer Solution.solution. TheThis userstep hasdescribes the optionoperation of assigning appropriate controls to chooseimages whichon controla isresource intendedusing forthe whichSmart image.Importer.

 

Gauge Control

1. ClickFrom Importthe >menu bar, select "Import" and then "Smart Importer > From Local File…File...".
   from
2. A file selection dialog will appear.
3. If you have not saved the menusolution bar.yet, a dialog will appear prompting you to save the file first.

In this tutorial, "Car_Cluster.psd" saved in the following folder is used.
\cgi_studio_content\2D\PSD


AThe Smart Importer dialog box appears. Select the target Photoshop file for importing.

• For thismore tutorial,information selecton Car_Cluster.psdthe Smart Importer dialog box, click here.

The [ OK ] button at the bottom of the Smart Importer dialog box is pressed when all settings are complete and performing import.

Expand

A"Cluster" previewin the Layer tree of the PhotoshopSmart imageImporter 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 leftdialog and select "Gauge right in the expanded tree. 

2. Click Gauge left in the tree.

Left".

• A control list (Red frame in the image above) is displayedappears on the right side.side of the dialog, listing the available controls.
• TheseThe listed controls are categorized intoas "AI detectedDetected ControlsControls" and other "Available Controls.Controls".

The

3.number Clickdisplayed Apply button on Gauge fromto the right of each control list.

This operation convertsindicates the Gaugedetection leftrate imageby intothe AI.
If you select a Gauge control whichwith cana below useddetection in Scene Composer.

4. Click OK button whenrate, a dialog box appears.will appear asking you to confirm the execution of the application.

Press the [ Apply ] button for the Gauge control listed under "AI Detected Controls".

• YouThe canGauge customizecontrol is assigned to "Gauge Left" on the layer tree ("Gauge Left" text color changes to blue).

The Appearance tab will automatically select on the right side of the dialog.

Set the following settings in [ Appearance ] and [ Basic Properties ] of "Gauge Left".

Note that if "BackgroundImage" is not set for layer mapping, the standard background of the Gauge control byis configuringused Appearanceinstead (Red frame inof the image above) and Basic Properties tabs (Orange frame inon the imagePhotoshop above). Please configure Gauge left and Gauge right settings as seen below.file.

Gauge Leftleft
OperationalTarget tabTab	Target itemItem	Setting Value

Control Gauge
Appearance

Scale kmh

Gauge Background

BackgroundImage Pivot Point

BackgroundImage

BackgroundImage

Centered

Basic Properties

name

InputMax

RotationMax

SpeedGauge

240

225

Gauge right Operational tabAppearance Target item
  Setting　　Layer ValueMapping Control Gauge
Appearance

ScaleScala rpmkmh

Gauge Background

BackgroundImage Pivot Point

BackgroundImage

BackgroundImage

Centered

　　Control Bitmaps and Customize
BackgroundImage Center Basic Properties

nameName

InputMaxImputMax
RotationMax

RPMGaugeSpeedGauge

8000240
225

By followingApply the settingscontrol above,"Text you can map correct imagesValue" to CGIthe StudioText Controls.in Pleasethe note,"Gauge ifLeft" you don'tand set the BackgroundImage as mentioned above, CGI Studio will use the original image of the Gauge Control instead of the image from the 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 Controlfollowing.
 how to apply a control function. 

Gauge left: 000 left
OperationalTarget tabTab	Target itemItem	Setting valueValue

Control Text Value
Basic Properties name SpeedValue Gauge right: 0000 
OperationalBasic tabproperties Target item Setting value Control
Text Value

Name

SpeedValue

Basic Properties name RPMValue

       
    

Status Indicators (top) 

Apply Tell Tale control to

Perform the statusstep indicator2 onthrough step 6 above for the screen"Gauge top.Right" (Orangeas framewell.

The settings for the Gauge and Text Value controls are shown in the imagetable 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 (Red frame in the image above) control to OpenDoors, Engine, Airbag and Brake. below.

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. 

OperationalGauge tabControl

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. 

OperationalTarget tabTab Target Item Setting valueValue ControlAppearance ProgressBar
  　　Layer mapping

Scala kmh

Gauge Background

BackgroundImage

BackgroundImage

　　Control Bitmaps and Customize
BackgroundImage central Basic Properties

Name

ImputMax

RPMGauge
8000

Text Value control Basic Properties

Name

RPMValue

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. 

MiddleDuplicate Sectionand Displayset up scenes

LastTransitions stepbetween isscenes are made using State Machine Editor function described below. In this section, duplicate the "Car_Cluster" to transformwhich the middlecontrols parthave ofbeen applied up to the display.previous The goal is to create separate scenes for each scenario to display the Car Status,section 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 for Incoming Calls:

create a cloneseparate ofscene. The following operations are performed on the Car_Clusterright scene with the name "Incoming_Call" uncheck the checkbox of the "Car" group check the checkbox of the "Incoming Call" group

Finally, after everything is set, click the OK buttonside of the Smart Importer dialog box.box, [ Import Settings ] tab.

Select Car_Cluster in [ Scene Name ] and choose [ Duplicate Scene... ] from the context menu.

The [ Clone Scene... ] dialog appears.

Enter "Car_Status" as the name of the scene to be duplicated and press [ OK ] button.

A scene named "Car_Status" is created and displayed in the Layer Tree and Preview.

With the "Car_Status" scene selected, expand "Middle" from the Layer Tree.

The check is in place on the "Car".

Uncheck "Car" and check "Car Status".

The center of the image displayed in the Preview section changes.


Repeat operations 1 through 4 above, this time adding an "Incoming Call" scene.

In step 4, check the "Incoming Call" checkbox.

The resource preparation work is completed. Click the [ OK ] button in the Smart Importer dialog box to perform the import.