Recommended PSD Layers Structure for Smart Importer

When creating PSD files using Adobe Photoshop, it is recommended that the naming and structure of the Photoshop layer controls be pre-matched to SceneComposer. This will allow for smooth application of controls and their properties when importing with SmartImporter. The list below shows the Controls that will be assigned in Scene Composer via Smart Importer. Press the links on each Control to jump to the page showing the recommended layer structure in detail.

It is important to note that the Smart Importer cannot process effects, masks, filters in Photoshop. Therefore, if you want to use these features, please rasterize the images in advance. 

 Some Controls are included in the sample file "IVI_Sample.psd" and are explained with specific examples.

Contents List

  Button

CheckBox CircularSlider Gauge GroupBox IconButton InputField Menu Icon Menu Item Menu Screen

Breadcrumb

Mesh2D

Button

MultiStateButton

CheckBox

PageIndicator

CircularSlider

RadioButton

Gauge

Roll

GroupBox

SpinBox

IconButton

TextButton

InputField

ToggleButton

Menu Icon

TouchIndication

Menu Item

 

 

 

PSD layer settings for Control

In this section, the recommended layer configuration in PSD file is described for each control. And, you can confirm its configuration in the sample file about CheckBox, Gauge, IconButton, RadioButton, and TextButton.

• Setting Group name is optional, but it is recommended to use the Control name (as seen in Scene Composer)
• It is also recommended to use the property names (as seen in Scene Composer) as layer names (in Photoshop), but please don't use spaces in the layer names.

 

 

 

 CheckBox

Back to List

The CheckBox Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state. 

 

 

 

 

 

 

1.2.     Gauge

Back to List

The Gauge allows to rotate a needle on a background according to its input value.

 

Example of this Control

 

 

 

 

1.3.     IconButton

Back to List

IconButton has similar functionality as the standard button, but in addition an icon (image) is placed on top of the button.

 

Example of this Control

 

 

 

 

1.4.     RadioButton

Back to List

The RadioButton Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state.

 

Example of this Control

 

 

RadioButton (In the image, it is RadioButton_Outside_air to distinguish it.)

 

1.5.     TextButton

Back to List

The TextButton Control offers an easy way to define all different states of a button and an action that is performed when clicking it.

 

Example of this Control

 

 

 

 

1.6.     AnalogClock

Back to List

An analog clock with images for the certain needles (hours, minutes, seconds).

 

Example of a default Control view

 

 

 

1.7.     Breadcrumb

Back to List

A Breadcrumb shows the history/flow through the screen hierarchy and allows user, for example, to navigate between scenes using breadcrumb's elements.

 

Example of this Control

 

 

1.8.     Button

Back to List

The Button Control offers an easy way to define all different states of a button and an action that is performed when clicking it.

 

Example of this Control

 

 

 

1.9.     CircularSlider

Back to List

Circular slider is a control that allows user to set the value using circular slide movement or directly indicate value on slider's bar.

 

Example of this Control

 

 

1.10.         GroupBox

Back to List

The GroupBox offers an easy way to combine RadioButtons to a RadioButtonGroup.

 

 

1.11.         InputField

Back to List

The InputField contains an editable text.

 

 

1.12.         Menu Icon

Back to List

The MenuIcon Control is an “icon” like in graphical environments of most known operating systems.

 

 

1.13.         Menu Item

Back to List

A MenuItem is a basic building block of MenuScreens. It can represent for example an application or a deeper level in a menu hierarchy.

 

Example of this Control

 

 

 

1.14.         Menu Screen

Back to List

The Control represents a menu in the form of a grid of icons (instances of the Menu Item Control).

 

Example of this Control

 

 

1.15.         Mesh2D

Back to List

Performs a perspective projection of a 3D rotated effect based on the configured origin, rotation and field of view.

 

Example of this Control

 

 

 

1.16.         MultiStateButton

Back to List

The MultiStateButton Control offers an easy way to define all different states of a button.

 

 

1.17.         PageIndicator

Back to List

A Page Indicator is a control that indicates currently visible page of set and provides method to switch to another page directly by click or if focused on a stepping manner using rotary action input.

 

Example of this Control

 

 

 

1.18.         Roll

Back to List

The Control represents a vertical list of numeric values from a specified range with a specified step.

 

Example of this Control

 

 

SpinBox

Back to List

A spin box or spin button is a control that enables users to increase or decrease the number value by a specific increment via clicking an up or down arrow button.

 

Example of this Control

 

 

 

 

 

 

 ToggleButton

Back to List

The ToggleButton Control offers an easy way to define all different states of a toggle button and an action that is performed when clicking it.

 

Example of this Control

 

TouchIndication

Back to List

The TouchIndication indicates the location of touch events.

 

Example of this Control