Skip to content

UI Kit

Overview

The Maverick SDK UI Kit enables creating UI for the Maverick Smart Glasses in a modern programming way, by supplying a collection of UI elements, containers and the support of creating custom controls support.

The UI elements can be added to the Screen or ArScreen, to be rendered on the glasses display.

Each rendering cycle, the SDK generates a compressed data stream from the topmost Viewport and sends it to the glasses for rendering.

Note

It is important to understand the Viewport and the UiElement lifecycle.

UI Elements

The UIElement is the base class for any 2D item that need to be rendered on the glasses display.

The SDK supplies several out of the box UIElements, but they can easily extended, to create your own custom controls.

Base Classes

Name Description
UIElement Base class for all UI Elements
UIElementsGroup A container of UI Element

UI Element Types

There are 3 type of UI Elements (all inherit from UIElement):

  1. Vector Elements: Represent a vector shape
  2. Binary Resources: Data from the application resources that is uploaded to the glasses
  3. Containers: A group of UI Elements

Stock UI Elements

The SDK supplies the following UI Elements:

Type UI Elements
Vector Elements Arc, Arc2, Arrow, Ellipse, Line, Path, Polygon, Polyline, Rect
Binary Resources Image, Text, TextBlock
Containers UIElementsGroup, Frame

Screen

The Screen class is the root for all 2D UI that is displayed on the glasses (Similar to the Android Activity or the iOS UIViewController).

The SDK enables using the whole physical display via the FullScreen class, or a virtual smaller screen via the Screen class.

Recommended screen size:

Class Size(WxH) Use-case
Screen 420x150* Recommended for normal usage of displaying HUD information for your application
FullScreen 640x400 Best for line of sight use-cases, when peripheral sight is required

*The size is customizable and can be defined by the developer

Using the Screen

The following example shows a simple usage of a Screen and UIElement.

The example displays the 'Hello World' text on the glasses:

class HelloWorldScreen:Screen(420f,150f) {
    private val text = Text()
    override fun onCreate() {
        text
            .setText("Hello World")
            .setCenter(getWidth()/2)
            .setY(getHeight()/2)
        add(text)
    }
}

// The screen should be added to the screen stack by calling:
Evs.instance().screens().addScreen(HelloWorldScreen())

class HelloWorldScreen : Screen(screenWidth: 420,screenHeight: 150) {
    let text = Text()
    override func onCreate() {
        text
            .setText(text: "Hello World")
            .setCenter(x: getWidth()/2)
            .setY(y: getHeight()/2)

        add(uiElement: text)
    }

}
// The screen should be added to the screen stack by calling:
Evs.instance().screens().addScreen(screen: HelloWorldScreen())

Learn about the UI lifecycle