Spatial UI ToolKit - WEKIT-ECS/MIRAGE-XR GitHub Wiki

How to create new spatial User Interface dialogues

UI_Kit_Spatial is intended for creating spatial Augmented Reality user interfaces (UIs) and thus provides a collection of UI elements that can be added to a scene as prefabs or directly through the GameObject context menu, similar to Unity's standard elements.

When setting up screens as prefabs, you need to:

  1. Create the view prefab using:

    • UI elements from JetStyle (Menu GameObject/VisionUI), see also JetStyle UI ToolKit jetstyleUIelements

    • Our own complex UI elements (residing in /Assets/MirageXR/Design/MobileUI/Prefabs/UI_KIT_Spatial)

    • (Maybe fallback UI elements from the mobile, but probably better not)

  2. Create new view script

    • view-script

[!Note] The view script should contain listeners for all UI interaction that triggers controller functionality (e.g. OnToggleOrientationValueChanged: this then should call the controller method for changing the value in the data model, so the views can be switched easily between platforms)

  1. Create new controller script: should contain business logic for functionality (e.g., OnCaptureImage)

  2. Attach controller and view scripts to the prefab root GameObject

    • attachScriptToRootGO

[!Note] For now, store all main screens into /Assets/MirageXR/Design/MobileUI/Prefabs/UI_KIT_Spatial or with /Assets/MirageXR/ContentType/[theType]/Editors/Hololens (we will rename these editor paths to Spatial soon)

Example screen

Below is an example layout of the main screen using a sidebar menu, the activity list, a search bar, and the tab-switching functionality:

List of MirageXR UI Elements

  1. Button: A simple round button with an icon.
  2. ProgressBar: A pseudo progress bar that displays the percentage of elements. Use with the script CustomHorizontalProgressBar.cs. Pass the number of elements to the method UpdateProgressBar(int A, int B, int C).
  1. Sidebar_Spatial: The main composite element for the main menu. Use with the script SidebarView.cs.
    • TitleText_Spatial
    • MainLabelText_Spatial
    • Button_Round_Simple_Spatial
    • SidebarSectionToggle_Spatial: is a toggle group consisting of individual toggle items of SidebarItem_Spatial type. Use with the script TwoStateButton_Sidebar.cs.
    • SidebarItem_Spatial
  1. Slider_closed: A collapsed version of Sidebar_Spatial.
  1. Toggles:
    • RoundToggle_Spatial
    • Toggle_HomeScreen: Use with the script SwitchToggleWithText_Spatial.cs.
    • ToggleGroup_Spatial: Use with the script SwitchToggleImageAndText_Spatial.cs.
  1. InputField_Search_Spatial

  1. Texts:

    • TitleText_Spatial: Text for headers.
    • MainLabelText_Spatial: Standard text.
    • GrayUnderlinedText_Spatial: Underlined text for activity items.

  2. ActivityItem_Spatial: An element for the activity list. Use inside the standard Scroll Rect.

  1. AddNewActivity_Spatial: An element for adding a new activity.

[!Note] Elements not included in UI_Kit_Spatial can be found in the mobile UI_Kit and under Gameobject/VisionUI.