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.                                                                                           

• Back easeOut;
• Bounce easeOut;
• Elastic easeOut;
• Linear easeOut;
• Regular easeOut;
• Strong easeOut.

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.   

Each layer contains properties that are used to adjust its appearance, functioning, and contents. Layer adjustment uses the Layers panel and the Properties panel.

A layer can be placed on one or more interface screens. Placement can be selected:

• from the Layers panel;
• from the Properties panel.

To place a layer:

1. Select layer in the Layers panel or in the main workspace.
2. Click the screen selection button.    
3. Check those screens on which the layer shall be present. To place the layer on all screens, select "Show on all stages".
4. The layer will be placed on the selected screens. When a layer is placed over several screens, changes to layer settings on one screen will result in identical changes on other screens where this layer is placed.
5. Click "Apply" or "OK" to save the changes made.

To adjust layer visibiity:

1. Select layer in the Layers panel or in the main workspace.
2. In the Layers panel, click on the visibility setting button.                        
3. Layer visibility will be adjusted.
4. To adjust visibility of all layers simultaneously, click the visibility adjustment button located above the list.                                    
5. Click "Apply" or "OK" to save the changes made.

To lock or unlock a layer for editing:

1. Select layer in the Layers panel or in the main workspace.
2. In the Layers panel, click on the lock button.                                         
3. The layer will be (un)locked for editing.
4. To simultaneously toggle availability of all layers for editing, click on the lock button located above the list.
5. Click "Apply" or "OK" to save the changes made.

Layer size and position settings include:

• the button that toggles uniform size scaling;
• fields "W" and "H" – width and height;
• fields X and Y – layer coordinates on screen (stage);
• the button that sets default layer size (for all layer except graphic primitives and web frames);
• "Registration" field – layer coordinate reference point, point zero for screen coordinates specified in fields X and Y.

To adjust layer size and position settings, open the "Position" tab in the Properties panel and make the required changes in the "Size and position" tab. Click "Apply" or "OK" to save the changes made.

To set layer binding:

1. Open the "Position" tab in the Properties panel, then the "Binding and movement" section.
2. In the "Binding" field, select one of the available values:

• Stage – layer position is bound to screen (stage);
• Cursor – layer position is bound to the cursor position;
• Container – layer position is bound to another layer of the screen.         

Available effects:

• Custom effects (effects based on one of the below-listed effects with the required settings);
• Shake;
• Scaling;
• Glittering;
• Smoke;
• 3D Rotation;
• Shadow;
• Blur;
• Border;
• Bevel;
• Sepia;
• Grayscale;
• Recolour;
• Glow;
• Adjust color;
• Tint;
• Pixelate.

To add a layer effect:

1. In the properties panel, open the "Effects" tab.
2. Click on the effect adding button and select the required effect.                     
3. Make changes to effect settings.                                               
4. To remove an effect, use the dedicated button.                                               
5. Click "Apply" or "OK" to save the changes made.

To adjust layer animation settings:

1. In the properties panel, open the "Animation" tab.                                   
2. In the fields "Fade in" and "seconds for" specify (in seconds) when the layer should appear and how long it shall take.
3. In the fields "Fade in" and "seconds for" specify (in seconds) when the layer should disappear and how long it shall take.
4. Layer animation will be set up.
5. Click "Apply" or "OK" to save the changes made.