Smart Impoter UI
This page describes the Smart Importer dialog. The Smart Importer dialog consists of the following four parts.
Preview
Here you will see a preview of the file to be imported. Use the mouse wheel to zoom in and out of the preview image. The zoom factor of the preview is displayed in the lower left corner of the preview section. Pressing the button with the four arrows will preview the file at the maximum zoom factor within the display area of the preview area.
Select an element on the preview image, then AI detection will be performed on the selected element and the controls will be listed in the Control section.
Import
The import section consists of two tabs, [ Import Settings ] and [ AI Settings ].
Import Settings Tab
The Import Settings tab contains the following settings.
| Import to folder |
Select a destination folder for the imported resources. The selection can be any location on the Solution Explorer. To change the destination folder, use the pull-down menu. To create a new destination folder, use the next section [ Create new folder for import ]. |
| Create new folder for import |
When this option is enabled, a new import folder can be created with any name. The created folder will be located in the import destination folder specified in [ Import to folder ]. |
| Scenes |
You can edit scenes with the Smart Importer. Please click here to learn how to use it. |
| Toggle Applied Controls Preview |
When this option is enabled, a green frame will appear where the control is applied. This allows you to visually check where the control is applied on the preview. |
| Resize Display Resolution |
This option is enabled when the resolution of the file to be imported is larger than the solution's display resolution. When this option is enabled, the resolution of the imported file will be automatically resized to fit the display resolution. |
| Import State Machine |
When this option is enabled, import state machines from your design file directly to your CGI Studio solution. If a global state machine already exists within your solution, a prompt will be displayed in which you can choose whether or not to import the new state machines with the Is Global property enabled. |
AI Settings Tab
In the AI Settings you can change the Transparent Background Color for AI detection. The selected color is used by the AI to analyze the graphics to be imported. It pretty much depends on the content of the image, which transparent background color works best for detecting controls. In case the AI is having problems in detecting controls, you can try to change this setting.
Layer Tree
Displays a tree view of each element from the file being imported. The list displayed here corresponds to the scene tree in Scene Composer. When one or more elements are selected in this list, AI detection is performed on the selected elements and the controls are listed in the Control section.
Entering any keywords in the search field at the top of the Layer Tree will narrow down the list to only those layers that contain the entered keywords.
Check the checkbox to the left of each layer element to set it as an element that constitutes a scene. Unchecked elements will not be imported.
Revert/Revert All button
To cancel the applied control settings, select the target item in the Layer Tree panel and press the [ Revert ] button. Note that pressing the [ Revert All ] button cancels all applied control settings in the layer tree. When the [ Revert All ] button is pressed, a dialog box will appear to confirm the continuation of the operation for safety.
Control
Control List Tab
Select any layer in the Layer Tree and the AI will detect the most suitable controls. The results of this analysis are displayed in the "Control List" tab, where candidate controls are listed in order of probability.
The displayed control list can be narrowed down by entering keywords in the search field at the top. In addition, using the settings section that appears by clicking the triangle icon on the left side of the search field, you can configure the display settings of the controls that appear according to the detection value.
To apply a control to a selected element, use the "Apply" button in the control list. When applying a control with a low probability of AI detection result, a dialog box will appear to confirm your selection.
Appearance Tab
When any control is applied, the display automatically switches to the "Appearance" tab. Set the propertyies settings related to the applied control's appearance (the following is an example). Note that some controls do not require appearance settings.
- Tell Tale control: Set OnState/OffState and images representing each state.
- Gauge control: Setting of the pivot point position of the gauge needle image.
Note that some controls do not require appearance settings.
Layer Mapping
For each control image properties, set the layer image in the file to be imported. If the control image properties name and the layer name are equal, the layer image is automatically set.
For example, when Gauge control is applied, the Layer Mapping has a NeedleImage property. Therefore, if NeedleImage exists in the layer name of the file to be imported, it is automatically set to the NeedleImage property.
Configure the Pivot Point
When set-up a control image with layer mapping, the pivot point is automatically set. The pivot point value that is automatically set is set as follows.
- Pivot point X value: Image width of the target layer/2
- Pivot point Y value: image height of the target layer/2
On the other hand, you can apply any pivot point value by specifying the pivot point value in the layer name in the file to be imported.
- If the layer name in the target file to be imported is something like "***@X10@Y20", the pivot point values are automatically set as X10 and Y20.
- If the layer name in the file to be imported is "***@X10.5", the pivot point value is automatically set as X10.5 and Y as "image height of the target layer/2".
There are three ways to configure pivot points on the Smart Impoter.
| X/Y |
Enter the X/Y coordinates of the pivot point in the dialog that appears (you can enter a decimal point). |
| FreeHand |
A crosshair cursor will appear on the Bitmap Preview panel, move it to the desired pivot point. |
| Center |
The pivot point is set to the center of the image. When the pivot point is centered, "Centered" appears in the Appearance tab. |
Use default control image
This option specifies whether to use the default image of the applied control or a transparent image if no image resource is set for the Layer Mapping. If an image is set for Layer Mapping, this setting is not required.
- Unchecked: A 1x1 transparent image will be used.
- Checked: The control's default image is applied.
Expand the image to the size of the control
Enable this option to fit each image resource to the size of the control.
- Enabled (checked): Auto resizing enabled (transparent area is added).
- Disabled (unchecked): Auto resizing disabled.
9-patch
This option appears when the "Enable editing 9-patch" option is enabled in the Preferences>Smart Importer settings. When enabled, the 9-patch feature can be configured (input values must be positive numbers only).
Basic Properties Tab
This section allows you to set some properties items for the applied control. After importing, you can also select the target control and configure it on the properties panel.
If the layer name is the same as the control's property name, the individual properties are automatically mapped from the file to be imported.