Skip to content

ArScreen

Overview

The ArScreen class is the root for all LOS UI that is displayed on the glasses display.

It draws the IArElement elements according to their Z order (which is defined by the world position of each element).

Using the ArScreen

The following example shows a simple usage of an ArScreen and IArElement.

This example illustrates the following features:

  • "HUD Text" at the center of the screen
  • "LOS Text" at where you first looked when the app connected to the glasses
  • Cube at the north rotating around itself
class HelloWorldScreen : ArScreen() {
    private val hudText = Text()
    private val losText = Text()
    private val losWindow = ArWindow()
    private val cubeModel = ArFactory.makeCube()
    private var cubeAngle = 0f
    private var wasSet = false
    override fun onCreate() {
        super.onCreate()
        hudText
            .setText("HUD Text")
            .setCenter(getWidth()/2)
            .setY(getHeight()/2-hudText.getHeight()/2)
            .setForegroundColor(EvsColor.White)
        add(hudText)

        losText
            .setText("LOS Text")
            .setCenter(getWidth()/2f)
            .setY(getHeight()/2-hudText.getHeight()/2)
            .setForegroundColor(EvsColor.Green)
        losWindow.add(losText)
        add(losWindow)

        cubeModel
            .scale(0.15f)
            .translate(east = 0f, north = 5f, up = 0f)
        add(cubeModel)
    }

    override fun onUpdateUI(timestampMs: Long) {
        super.onUpdateUI(timestampMs)
        if (quat.isValid && !wasSet) {
            wasSet = true
            losWindow.setEyePosition(quat)
        }
        cubeAngle = (cubeAngle+5f)%360f
        cubeModel.rotate(east = cubeAngle, north = 0f, up = cubeAngle/2f)
    }
}

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

class HelloWorldScreen: ArScreen {
    let hudText = Text()
    let losText = Text()
    let losWindow = ArWindow()
    let cubeModel = ArFactory.companion.makeCube()
    var cubeAngle = 0
    var wasSet = false
    override func onCreate() {
        super.onCreate()
        hudText
            .setText(text: "HUD Text")
            .setCenter(x: getWidth()/2)
            .setY(y: getHeight()/2-hudText.getHeight()/2)
            .setForegroundColor(evsColor: EvsColor.white)
        add(uiElement: hudText)

        losText
            .setText(text: "LOS Text")
            .setCenter(x: getWidth()/2)
            .setY(y: getHeight()/2-hudText.getHeight()/2)
            .setForegroundColor(evsColor: EvsColor.green)
        losWindow.add(uiElement: losText)
        add(uiElement: losWindow)

        cubeModel
            .scale(factor: 0.15)
            .translate(east: 0.0, north: 5.0, up: 0.0)
        add(arElement: cubeModel)
    }

    override func onUpdateUI(timestampMs: Int64) {
        super.onUpdateUI(timestampMs: timestampMs)
        if (quat.isValid && !wasSet) {
            wasSet = true
            losWindow.setEyePosition(qtrn: quat)
        }
        cubeAngle = (cubeAngle+5)%360
        cubeModel.rotate(east: Float(cubeAngle), north: 0.0, up: Float(cubeAngle)/2.0)
    }
}
// The screen should be added to the screen stack by calling:
Evs.instance().screens().addScreen(screen: HelloWorldScreen())

HUD Window

The ArScreen maintains an internal ArWindow allowing seamless integration of UI Kit elements directly into the ArScreen.

As a result, any UIElement added directly to the ArScreen will be added to this HUD Window and act as it would on a 2D Screen, meaning it keeps its pixel location within the display regardless of the user's viewpoint.

Learn about the Development Resource