Interface Overlays

Overlays help reduce interface sizes by enabling the interface designer to add layers to an interface instead of creating a new page. Overlays are created per user interface and can be nested within another overlay. Creating overlays is the first step in creating a single page interface that changes when switching activities.

This article explains the procedure for adding overlays to an interface.

Defining the Overlay Area with a Frame

1. Launch into your controlled space from within the Builder.
2. Click the Create Interface Element button on the Builder toolbar.
3. Select the Create a Frame option.
   Your mouse pointer changes to a four pointed arrow.
4. Click and drag to define the area for the Overlay.
   The selected area is surrounded by a red outline.
5. Edit the frame size and location in the properties window.
   • Also found within the properties window is the Overlay size option
     • Overlay sizes include
     • Stretch – This option adapts the size of the selected overlay to fit the frame that has been added to the user interface
     • Scroll – This option keeps the size of the overlay and provides the end user the ability to swipe to see more options within the frame

Creating and Sizing the Overlay

1. Launch into your controlled space from within the Builder.
2. Click the title of the interface you wish to add an overlay to.

Note: Overlays are unique to each interface. If you have multiple interfaces within a controlled space, you will need to create overlays per interface.

1. Click the three vertical dots in the left pane, while the interface name is selected.
2. Select the Add an overlay option.
   A new overlay appears within the overlays section of the selected interface.
3. Edit the size of your overlay in the properties window.
   • Options:
     • The size of your overlay can match the size of your frame.
     • For a scrollable frame, you should design an overlay that is larger than the frame that was added to the interface.
     • Since overlays can be stretched, you can design an overlay size and then images are scaled to match the usable area of the frame.

Adding Interface Elements to an Overlay

See this article to add interface elements to an overlay.

Adding Frames to Overlays

Overlays can have frames of overlays nested inside. Follow the above procedure to add a frame within a newly built overlay.

Changing Interface View

To switch overlays via a button press or logical programming, follow the steps found here.

Copyright © 2024 Kramer — Powered by