CGI Studio Smart Importer
Overview
Use the Smart Importer to quickly and easily import digital assets to your solution. With AI assistance you can assign functional HMI controls to elements within your design in a straightforward manner. Several other useful features are included, such as layer merging or multiple scene support.
With the Smart Importer you can import Photoshop files or files in Candera’s “XML Scene Composer Intermediate Format” (xscil) into your Scene Composer solution.
The Smart Importer uses Artificial Intelligence (AI) to analyze the content of the imported PSD or XSCIL file. The AI, that classifies HMI controls, has been implemented as Windows Service – ControlsAIService. The tray application ControlsAIApp will help you monitor and control this service.
Setup the Environment for Smart Importer
Setting up the ControlsAIService
Before you can start using the Smart Importer, you have to register the ControlsAIService as a Windows Service. Once it is installed, the service can be started and managed via command shell or by using the Windows Service Interface. Lastly, ControlsAIApp needs the be run and started
Starting and stopping a service wil require Administrator rights on that computer since Windows 10.
Register ControlsAIService Using the Command Shell
To register the ControlsAIService using the command line, start the command shell as Administrator. To do this, type “cmd”into the Windows menu, right-click and choose “Rund as Administrator” from the shortcut menu or “cmd.exe”.
To create the ControlsAIService use the following command:
sc create "ControlsAIService" binPath= "<absolute_path>/ControlsAIService.exe"You have to provide the absolute path to the executable to register a service, which can be found in folder bin/AI/ControlsAIService/.
To start the ControlsAIService you can use the following command in the command shell (as administrator). Alternatively, you can manage the service with the Windows Service Interface or using the provided ControlsAIApp.
sc start "ControlsAIService"The ControlsAIService will start the actual AI application called ControlsClassification.exe. You can see this process in the Task Manager whenever the ControlsAIService is running.
To unregister the service (in case it is not needed anymore), please ruin the following command:
sc delete "ControlsAIService"
Manage the ControlsAIService Using the Windows Service Interface
After ControlsAIService is created, it can be started/stopped using Windows Services. Type “Services” into the Windows menu to start the “Services” application. You can start and stop the ControlsAIService from within this list with the links on the left, or buttons on the menu bar, or by using the shortcut menu.
Using the Properties entry of the shortcut menu, you can find more options for the Service. Here you can e.g. configure the service to be started on every system startup by setting the startup type to “Automatic”.
Start the ControlsAIApp tray application
After ControlsAIService is running, start the ControlsAIApp. Run the tray application in <CGI_STUDIO_ROOT>/bin/AI/ControlsAIApp/ControlsAIApp.exe with administrator privileges by right-clicking the ControlsAIApp.exe and selecting “Run as Administrator”. After starting the application, you can see a tray icon in the taskbar on the bottom right of the screen.
Right-clicking on the tray icon will open a menu that allows you to control the ControlsAIApp’s states. Select Start to start the AI. After a few seconds with a flashing yellow dot, the tray icon indicates that the AI is started, when the dot turns green.
How to Use the Smart Importer
Select File for Smart Importer
The Controls AI Service will analyze imported files to detect, propose and create controls for your Scene Composer solution. Use the Import > Smart Importer… option from the menu bar to open the dialog box for the Smart Importer.
After choosing “Smart Importer…” from the menu, select which file (.psd or .xscil) to import using the “Open” dialog box.
Smart Importer Windows
Once you have selected a file to import, the Smart Importer window will be opened.
The Smart Importer window consists of the following panels:
| (1) | Preview |
The preview panel displays a preview of the graphics file o be imported. You can use the mouse wheel to zoom in and out, with the zoom percentage displayed in the lower left corner of the preview panel. By pressing the button displaying four arrows, you can modify the preview image’s size within the panel’s maximum available space. |
| (2) | Import Settings |
The import settings panel will allow you to select a destination folder to import template solutions. You can choose to create a custom imports folder, which will be created inside the destination folder. |
| (3) | Layer Tree |
The layer tree panel will display the elements imported from your graphic file as a branching list. The list displayed within this panel is equivalent to the template scene’s Scene Tree within Scene Composer. You can select one or multiple items within this list to begin the AI detection process. The filter bar located on top of the layer tree will allow you to more easily identify a specific layer when dealing with multiple layers. |
| (4) | Control List, Appearance and Basic Properties |
By selecting a layer, the AI service will attempt to detect which controls are suitable for the selected elements. The result of this analysis will be displayed in the ControlList panel, listing the candidate control from greatest to least probability. The list of controls can also be filtered using the input field on the top. Use the “Apply” button in the control list to apply a control to the selected element. If the AI has detected only a weak probability for your selected control, you will be prompted to confirm your choice. |
| (5) | AI Settings |
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 improved. 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 detection controls, you can try to change this setting. |
| (6) | Revert & Revert All |
You can select an item in the layer tree panel (3) and revert the already applied control using the “Revert” button. You can choose to revert all applied controls in the “Layer Tree” by pressing the Revert All button. You will be prompted to confirm this action in order to keep you safe. |
Configure Scenes
In the Import Settings Panel you can manage the scenes you want to import into Scene Composer. Opening the shortcut menu, you will see the available options: Add Scene, Close Scene, Remove Scene, and Rename Scene. Double-clicking on the scene’s name allows you to rename an existing scene.
If you choose to add a new scene or clone the existing scene, you will be prompted to input the name for the new scene.
The AddScene and Remove Scene options will be disabled when multiple scenes are included within the imported Intermediate Language file.
Configure the Scene’s Content
Let’s assume you got a graphic file from your designer with 2 scenes, an IVI scene (e.g. with a music player and climate control) and a Cluster scene. You will create two scenes in the Import Settings panel: an “IVI_Scene” and a “Cluster_Scene”. Select the “IVI_Scene” and adjust the visibility of the layers in the Layer Tree panel – only “IVI” and “Background_1” will be checked. Handle the “Cluster Scene” similarly – only “Cluster” and “Background_1” will be checked.
When clicking the OK button, the import is started. You can then see the imported scenes and resources in the Solution Explorer panel and in the Imports panel of Scene Composer.
Detection, Configuration and Import of a GaugeControl
When you import a graphics file that includes a gauge using the Smart Importer the AI will detect this control and import the template scene including the correctly identified gauge control-
To make the AI detect the gauge in your graphics file, open the graphics file with the Smart Importer (via the Menu: Import – Smart Importer and choose your graphics file). Your graphics file will be displayed in the “Preview” panel.
Now you can select your gauge by clicking on the corresponding graphics in the “Preview” panel. The Layer Tree panel will expand the layers and mark the layer you selected.
As an alternative, you can browse to the desired layer in the “Layer Tree” panel. If you know at least part the layer’s name, you may use the filter field in the top of the Layer Tree panel to find the correct layer more easily. The content you select in the “Layer Tree” panel will be highlighted with a yellow frame in the “Preview” panel.
Whenever you select any content – no matter if selecting single layers or multiple layers – the AI tries to detect known controls. You can see the list of detected controls in the “Control List” panel on the bottom right.
In our example the AI correctly detected a Gauge Control, so you will press the “Apply” button on the right. The Appearance Tab is put to the foreground, offering you the possibility to configure the GaugeControl’s NeedleImage and BackgroundImage. After performing this Layer Mapping, you will see the GaugeControl Layer in the “Layer Tree” panel and its content will be colored, indicating a successful application of the GaugeControl (blue font) and a successful mapping of the image (yellow font).
Configure the Pivot Point
For all images configured in the Layer Mapping, you can configure the pivot point in the Appearance Tab on the bottom right. In our example for the GaugeControl it is important that the pivot point of the needle image is set correctly in order to guarantee the correct movement of the needle in Scene Composer.
There are 3 ways to configure the pivot point:
- Enter digits for the X/Y coordinate.
- Freehand position a crosshair cursor using the mouse.
- Configure the pivot point to be in the center of the image.
- X/Y: You can choose this option to enter the X/Y coordinates for the pivot point in the following editor.
- Freehand: If you choose this option, you can move the crosshair cursor to the desired pivot point in the “Bitmap Preview” panel.
- Center: With this option, the pivot point will be configured to the center of the image. A center configuration of the pivot point will be indicated by the text “centered” in the Appearance tab.
Configure Basic Properties
The controls have been detected by the AI and you have applied them to your layers. In the appearance tab you have mapped your layers to images that are part of the controls (i.e. the gauge’s needle image and the background image). You can also define values for basic properties of the applied control.
The following basic properties are available for the gauge control. To easily find our gauge control instance in Scene Composer after the import, you may also change its name to e.g. “Gauge_for_speed”.
Individual properties from your design will be automatically mapped if the property’s name is the same as the control’s property name.
Import to Scene Composer
Once you are finished applying the detected controls and configuring images, pivot points and other properties, click the OK button to import your configured file.
You can now see that the folder “AI_Advanced_Cluster_Sample§ has been created and the content of your psd file has been imported. The gauge control instance “Gauge_for_speed” you configured using the Smart Importer can be found in the “Imports” panel.
You may create an instance of your “Gauge_for_speed” by dragging it into your scene – either into the Scene Editor panel or into the Scene Tree panel.
7.3.5. Layer Merging
Sometimes the graphics file to import will be quite complex, having several images for a gauge’s background and a few images for a gauge’s needle to achieve a brilliant HMI. The built in GaugeControl of Scene Composer however requires only one image for the background and one image for the needle. To meet the needs of both, complex graphics files and a clear implementation and configuration of the control, the Smart Importer is able to configure several layers for a single image of the control.
In the following example the layers for the gauge’s background are marked in orange and the layers for the needle are marked in blue.
Select the root of the gauge in the “Layer Tree” üanel that includes both the background images and the needle images. In our example this layer is called “LayerGroup”. In the “Control List” panel you will see that the AI has detected the GaugeControl. After pressing the “Apply” button next to the GaugeControl you can map the layers to the GaugeControl’s background and needle image.
Useful Hints:
- You can configure a complex layer group by selecting and configuring only the root. All its children will be configured similarly.
- You can select multiple layers and configure them all at once. For multi selection you can keep the <ctrl> or <shift> key pressed while selecting the layers with a mouse click or you can click-and-drag a box around the layers you want to select.
Finalize the configuzration of your GaugeControl by setting the NeedleImage’s pivot point to exactly that point where the needle should rotate around as described in Configure the Pivot Point.
After the configuration is complete you can press the “OK” Button of the Smart Importer to import your graphics file and the configured GaugeControl Instance into SceneComposer.
Smart Importer has created a single image for the needle and a single image for the background as you can see in the Solution Explorer.
To test the functionality of the GaugeControl, drag and drop the configured GaugeControl instance to the scene (as described in Import to Scene Composer). When altering the GaugeControl’s value in the Properties panel, the needle of the GaugeControl in the Scene Editor panel will rotate in front of the background according to the alteration of the Control’s value.
7.3.6.
Re-Importing of Graphics Content
When importing the same content to the same location once again, the resources and scenes in Scene Composer are overwritten. This allows you to replace outdated graphics of your scene with newly updated graphics from your designer while maintaining the mapping between layers and controls.
7.3.6.1.
Reload Configuration for New Graphics File
If you use the Smart Importer to open the same graphics file (same path, same filename) again, which you have already made configurations to, you will see your configurations are available again (marked with orange font in the layer tree panel). The applied controls as well as the Layer Mapping have been loaded.
You will be notified by blue information icons that the import target folder or the scene already exist (A tooltip gives you the necessary information once you hover those icons). Starting the import as currently configured will overwrite already imported resources and scenes and therefore update the graphics of your Scene Composer solution to the newest graphics version, while keeping the information of mapped layers and applied controls. Figure 76 – Loaded Configuration when Re-Importing a Graphics File.
Note: If you want to import graphics content to your Scene Composer solution for a second time, maintaining the resources and scenes from both imports, you can choose a different import location or a different scene name.
7.3.6.2.
Re-Import of a Graphics File with Different Layers
When importing a graphics file with the same path and filename but partially different layers, you will see the configuration of the layers that are still available has been loaded.•
7.3.6.3.
Restore a Configuration
If you have already imported a graphics file into a certain folder and you are attempting to import the same graphics file to the same folder again, the Smart Importer will load the configuration you applied last time. If you are reverting your configuration using the Revert All button, the loaded configuration is gone. However, the configuration of the last successful import is still saved with the lastly imported scene. So, changing the import location and changing it back to the original import location, where the configuration is saved, makes a dialog pop up asking you whether you want to restore the saved configuration.
Choose Restore to restore the configuration from your last import or Cancel to start configuring all over again. Figure 78 – Restore Configuration Dialog
7.3.6.4.
Merge Configurations
A configuration that has been imported to Scene Composer is saved to the imported scene. You can use one graphics file, import various configurations to Scene Composer and merge them together into one final configuration.
I. Create Configurations1.
Figure 79 – Cluster_TellTalesFigure 80 – Cluster_GaugeFigure 81 – Cluster_ProgressBar
II. Merge Configurations
1.
- If you now open the Cluster graphics file again and set the import folder to Cluster_Telltale you can restore the configuration for your Telltale controls by clicking Restore in the Restore a Configuration dialog.
2. - Now, change the import folder to Cluster_Gauge, which triggers the following dialog, where you choose Merge to add the Gauge configuration to the currently loaded Telltale configuration.
Figure82
–
3.
And finally, you’ll end up with a configuration having applied TellTale Controls, Gauge Controls and ProgressBar Controls.
Advanced Configuration of PSD Content for Import to Scene Composer
Import Bitmap Resources
Images of Image Layers in psd data are imported as Bitmap Resources. By default, the value of the Pivot Hint of imported Bitmap Resources is calculated to be in the center as follows:
Pivot Hint X = Image Layer width /2
Pivot Hint Y = Image Layer height /2
You can set the Pivot Hint in Photoshop by embedding the token into the layer’s name. The Pivot Hint tokens are removed from the Bitmap Resource name upon import.
E.g. 1: If the layer’s name in the photoshop file is "Image@X30.5@Y40"
the Bitmap resource name will be “Image”,
Pivot Hint X = 30.50
Pivot Hint Y = 40.00
E.g. 2: If the layer’s name in the photoshop file is "ImageData@Y40.55"
the Bitmap resource name will be “ImageData”,
Pivot Hint X = "ImageData@Y40.5" layer width / 2
Pivot Hint Y = 40.55
TextStyle
When importing a Text Layer into Scene Composer, a new TextStyle is created. Its name will be a combination of the font name and the font size used in the Text Layer of the PSD file. Upon creation of a new TextStyle Scene Composer checks if a font resource with the corresponding name is registered in the Scene Composer solution. In case no suitable font resource has been found in the solution, a new TextStyle will be created using the font resources displayed in the “Not imported font” dialog.
Fonts that are not imported are also marked with a warning sign in the “Layer Tree” panel. A tooltip offers additional information:
Technical Details
Collaboration of Scene Composer, ControlsAIService and ControlsAIApp
Scene Composer comes with two additional applications that are needed to make the AI detection work:
ControlsAIApp: A tray icon application that controls the service.
The following diagram explains the collaboration of the Scene Composer, the ControlsAIService and the ControlsAIApp:
XML Scene Composer Intermediate Format – XSCIL
XML Scene Composer Intermediate Format (XSCIL) is an open and well-defined format which has been invented to export graphics data from various user experience design tools (Axure RP, Adobe XY, Sketch etc.) and import them into Scene Composer via the Smart Importer. An API is available which you can use to implement an exporter for your favorite graphics editor, if it isn’t already available.
Recommended Photoshop (.PSD) Layer Structure for Smart Importer
These are the recommended steps for Photoshop layers’ naming and structure of a Control when creating a PSD file with Adobe Photoshop. Tis procedure makes it easier to apply properties to a Control via the Smart Importer.
Create layers for the properties of the Control under the group created in step 1.
Set
the names of the layers to be the same as the property names of the target Control. (layers names in Figure 88 below correspond to property names in Figure 89)
How to set appropriate group and layer names:
For the layer name, use the property name but remove the spaces. For example, “Normal Image” becomes “NormalImage”.
Figure 90 –shows Restorethe TellTalesSmart Importer dialog when a PSD file following the correct format is opened.
It is imported according to the layer structure of the PSD file.
In the Smart Importer dialog, if you apply the TextButton control to the TextButton node, the layers of the PSD file will be reflected in each property as shown in Figure 8391. –
Figure shows the Properties panel after import settings shown in Figure 91. The contents/layers of the PSD file are reflexted in the Properties panel.
The size of the imported Control will be adjusted to the Width and Height of the largest image layer applied to a property.
In Figure 92, when Button is applied instead of TextButton, Text property is not applied correctly since a Button control does not have this property.
If you import a node whose layers and properties do not match, a new Group node will be created and the extra property is added as its child element.
7.5.1. Layer Structure and Naming Guideline for Controls
Figure
In –Mergegeneral, ProgressBarsit is recommended to keep the PSD layer format close to the standard Controls. Below is a guide on how the layers for some Controls should be formatted and named.
MinutesNeedleImage
HoursNeedleImage
FaceImage
EllipsisText
Button
NormalImage
PressedImage
FocusImage
PressedImage
SelectedImage
SelectedPressedImage
FocusedImage CircularSlider Gauge GroupBox
ActiveImage
ThumbImage
ThumbImagePressed
FocusImage
BackgroundImage
PressedImage
FocusedImage
IconNormalImage
IconPressedImage
IconFocusedImage
BackgroundImage
FocusedImage
BackgroundImage Menu Item Menu Screen Mesh2D
FocusImageOnDragging
DeleteButtonNormalImage
DeleteButtonPressedImage
Image
FocusBorderImage
ButtonState2Bmp
ButtonState3Bmp
ButtonState4Bmp
FocusedImage
SelectedPressedImage
SelectedIndicatorImage
IndicatorImage
SelectedIndicatorPressedImage IndicatorPressedImage
PressedImage
SelectedImage
SelectedPressedImage
FocusedImage Roll SpinBox TextButton
TextEditBackground
ArrowUpNormalImage
ArrowUpPressedImage
ArrowDownNormalImage
ArrowDownPressedImage
NormalImage
PressedImage
FocusedImage ToggleButton TouchIndication
FirstPressedImage
SecondImage
SecondPressedImage
FocusedImage