Interface editor: overview, screens and layers settings

The "Interface editor" component is used to create interfaces that users will interact with in the course of their work with project templates at media display points.

The term "interface" refers to one or more screens (stages) that contain interactive elements (layers) for data representation and user interaction. Layers can be interlinked with each other and other components of the project.

The component editor includes:

1. Stage panel for management of interface screens;
2. Properties panel;
3. main workspace for interface creation;
4. buttons for adding new layers;
5. Layers panel for representation and adjustment of all elements used on the screen, Zones panel for setting up video walls.

To add a new screen:

1. Click the "Add stage" button.   
2. A new screen will be added to the Stages panel.
3. Click "Apply" or "OK" to save the changes made.

To rename a screen, double-click on its name in the Stages panel, then type the new value. 

Click "Apply" or "OK" to save the changes made.

To adjust the screen background color: 

1. Select the screen in the Stages panel.                                                           
2. In the "Settings" tab, click "Background" and select the desired color.
3. The screen background will be changed accordingly.                                        
4. Click "Apply" or "OK" to save the changes made.

This component enables you to set a period of time, upon expiration of which the current screen will be automatically switched for another screen of the same component or another component of the project.

Before setting up, the screen or component to be switched to shall be added.

Turning switching to a different screen (stage) on:

1. Select the screen in the Stages panel.
2. In the "Settings" tab, specify in the "Duration" field the amount of time, upon expiration of which the screen shall be changed.                                                                       
3. Press the link adding button and select the screen that you would like to switch to.       
4. Automatic switching will be activated.
5. Click "Apply" or "OK" to save the changes made.

Turning switching to a different screen (stage) off

1. In the "Duration" field, specify the "0" value.
2. Press the link adding button and select the value none "none".
3. The setting will be turned off.
4. Click "Apply" or "OK" to save the changes made.

Turning switching to a different component on

1. Select the screen in the Stages panel.
2. In the "Settings" tab, specify in the "Duration" field the amount of time, upon expiration of which the screen shall be changed.                                                 
3. Click the button that adds link to a component and select the component that you would like to switch to.
4. Automatic switching will be activated.
5. Click "Apply" or "OK" to save the changes made.

Turning switching to a different component off

1. In the "Duration" field, specify the "0" value.
2. Click the button that adds link to a component.                                
3. On the desktop that opens click on the button that removes link to a component.
4. The setting will be turned off.
5. Click "Apply" or "OK" to save the changes made.

To set entrance animation effects for a screen:

1. Select the screen that you want to animate in the Stages panel.
2. In the "Settings" tab, select one of the available values in the first field "Transition animation":
• none – no animation;
• From left – the screen appears from left to right;
• From right – the screen appears from right to left;
• From top – the screen appears from the top down;
• From bottom – the screen appears from the bottom up;
• Fade.                                                                                           
3. In the second field "Transition animation", select one of the available screen entrance animation effects:
• Back easeOut;
• Bounce easeOut;
• Elastic easeOut;
• Linear easeOut;
• Regular easeOut;
• Strong easeOut.
4. In the field "Transition duration" indicate the duration of animation in seconds.
5. Animation will be set up.
6. Click "Apply" or "OK" to save the changes made.

Changing or disabling animation effects is done similarly to the process described above.

This component enables reordering of interface screens.

To change the order of screens, drag a screen in the Stages panel to the desired position. The order will be changed. Click "Apply" or "OK" to save the changes made.

To copy a screen:

1. Select the screen in the Stages panel.
2. Click the "Copy" button.                                                                          
3. The screen will be copied together with all its settings and elements.
4. Click "Apply" or "OK" to save the changes made.

To remove a screen:

1. Select the screen in the Stages panel.
2. Click the removal button.                                                                    
3. The screen will be removed.
4. Click "Apply" or "OK" to save the changes made.

Available layers:

• text content;
• graphic primitives (balloon, bar);
• media content (media layer, TV tuner, camera image, live streaming, successive animation);
• button;
• web frame;
• media gallery,
• text input field.

To add a layer, click a corresponding button.

Adding some layers onto the screen (stage) will result in a pop-up window asking to select background image for the layer.

Layer will be added to the main workspace of the selected screen. Contents of the Layers panel will be updated.

This component enables import of layers from files created in Adobe Photoshop CC and Illustrator CC that have been saved in compatibility mode.

Import preserves properties of graphics – the latter is transferred in the form identical to the source, preserving layer ordering and coordinates.

To import layers from Photoshop or Illustrator:

1. Select the screen (stage) you need in the Stages panel.  
2. Drag the imported PSD- or AI-file from OS folder into the component’s main workspace.       
3. If you need to import inscriptions as text layers rather than images (media layer), check the box "Import all texts as text layers" in the new window. To import layers, use the "Import" button.  
4. Layers will be imported to the specified screen (stage) and available for adjustment.