Skip to main content

Smart Impoter UI

This page describes the Smart Importer dialog. The Smart Importer dialog consists of the following four parts.

  1. Preview
  2. Import
  3. Layer Tree
  4. Control
drawing-5-1725626895.png

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.

drawing-4-1710316832.png

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 ].

drawing-4-1710316951.png
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.detection are made here.

drawing-4-1729212783.png

The value specified in the Preference is used for [ Edge Detection ]. For details, please refer to that.

The colour selected under [ Transparent background color ] is used by the AI to analyzeanalyse the graphicsimage to bebeing imported. ItWhich prettytransparent muchbackground colour is best for detecting controls depends greatly on the content of the image,image. whichIf transparentyou background color works best for detecting controls. In case the AI isare having problems inwith AI detecting controls, you can try to changechanging 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.

drawing-5-1725626973.pngdrawing-5-1725626973.png

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 controls are categorised by solution and reference (such as ConstructionKit and Custom Controls).

    The number (and bar) displayed to the right of each control name is the probability of a match by AI, and the controls are listed in descending order from highest to lowest. By default, five controls are displayed in each category. Clicking the [ View All ] button (red box in the image below) will display a list of all controls.
    The list of controls that is displayed can be narrowed down by entering keywords in the search field at the top (orange box in the image below). To apply the controls to the selected element, use the [ Apply ] button in the control list.
    drawing-5-1725627007.pngdrawing-4-1729213292.png

    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).appearance. Note that some controls such as TextValue do not require appearance settings.

      The

      TellAppearance Taletab control:is Setmade OnState/OffState and images representing each state.
      Gauge control: Settingup of the pivotfollowing pointthree positionmain ofsections. the
      gaugeControl needle image.Image Pivot Point 9-Patch
      drawing-5-1725627076.pngdrawing-4-1729213616.png

      LayerControl MappingImage

      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. However, you cannot edit the image layer.

      For example, when Gauge control is applied, the Control Image 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.

      drawing-4-1729213753.png

       

      When you assign a control to a group player, you can choose from the following options for the control image.

      drawing-4-1729213848.png
      Select layers

      Select any image layer from the group layer. You can use composite images with multiple layers. For more information, please refer to here.

      After importing, the composite image will be placed in the [ ControlBitmaps ] folder. At this time, the bitmap name will be set to the property name specified here.

      If you select a single layer, the original bitmap placed in the [ Bitmaps ] folder will be used. For information on the location of the folder, please refer to Folder structure after import.

      Transparent A transparent image will be used. Default value Uses the default image for the applied control.

      You can select images included in the group player by clicking on the selection icon on the right of the image.

      drawing-4-1729214897.png

       

      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.

      Image Array Properties

      ForImage array properties is supported, and for example, whenimages Gaugein FlipBook control isare applied,automatically assigned. The numbers attached to each Image element on the LayerAppearance Mappingtab hascorrespond ato NeedleImagethe property.values Therefore,displayed ifin NeedleImagedescending existsorder in the layer nametree.

      of
      drawing-4-1729230884.png

       

      Folder structure after import

      After import, the file[ toBitmaps be], imported,[ itControlBitmaps ], and [ TextStyles ] folders are created in the Solution Explorer.

      drawing-4-1729218003.png
      Bitmaps The imported bitmap for each layer is automaticallyplaced. set totheControlBitmaps NeedleImageThe property.bitmap merged from multiple layers is placed for control properties. TextStyles The created text style is placed.

       

      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

      In addition, by checking the Pivot Point check box (No.1 below image), the following options can be used

      drawing-4-1729214188.png
        Can be enter any values for the X/Y coordinates of the pivot point (decimal points can be entered). Set the pivot point to the centre of the image (click on No.2 the above image). The Freehand dialog box will appear (click on No.3 the above image). Move the crosshair cursor on the dialog box to set the pivot point as you want.

        On the other hand, you can apply any pivot point value by specifying the pivot point value in the layer name inof the fileimage 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 Importer.

        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.

        drawing-5-1725627785.png
        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).

            drawing-4-1710317422.png

             

            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.

            drawing-5-1725628096.pngdrawing-5-1725628096.png

            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.

            Please note that you need to set a value for the property item String before importing.

            Back to top