Implementation:Facebookresearch Habitat lab UIElements

Knowledge Sources	Facebookresearch_Habitat_lab
Domains	Embodied_AI, Human_in_the_Loop, User_Interface
Last Updated	2026-02-15 00:00 GMT

Overview

Defines a networked UI element system for the Human-in-the-Loop (HITL) framework, including data classes for labels, buttons, toggles, list items, separators, spacers, and canvas management via a context-manager-based API.

Description

This module provides the complete UI element hierarchy and management system for HITL remote clients. The architecture consists of:

Data Classes (UI Elements):

• UIElement: Base class with a unique uid string.
• UICanvas: Canvas properties including padding and background color.
• UILabel: Text label with font size, bold, horizontal alignment, and color.
• UIToggle: Toggle switch with two-state labels, enabled state, and tooltip.
• UIButton: Clickable button with text and enabled state.
• UIListItem: Two-column list item with left/right text.
• UISeparator: Visual line separator.
• UISpacer: Empty space of configurable size.

Enums:

• HorizontalAlignment: LEFT, CENTER, RIGHT.
• VerticalAlignment: TOP, CENTER, BOTTOM.

Update System:

• UIElementUpdate: Wraps a single UI element for serialization and transmission.
• UICanvasUpdate: Container for a batch of element updates with a clear flag.

Management Classes:

• UIManager: Manages per-user canvas state, performs dirty-checking to only send changed elements, and provides button press detection.
• UIContext: Context manager (used with with statement) for building canvas updates. Provides convenient methods like label(), button(), toggle(), list_item(), separator(), and spacer().

The system uses 10 predefined canvas positions: top_left, top, top_right, left, center, right, bottom_left, bottom, bottom_right, and tooltip.

Usage

Use the UIManager and UIContext in HITL application states to build and update user interface canvases that are networked to remote clients. The context manager pattern ensures that canvas updates are consolidated and only dirty elements are transmitted.

Code Reference

Source Location

• Repository: Facebookresearch_Habitat_lab
• File: habitat-hitl/habitat_hitl/core/ui_elements.py
• Lines: 1-496

Signature

@dataclass
class UIElement:
    uid: str

@dataclass
class UICanvas(UIElement):
    padding: int
    backgroundColor: Color

@dataclass
class UILabel(UIElement):
    text: str
    horizontalAlignment: int
    fontSize: int
    bold: bool
    color: Color

@dataclass
class UIToggle(UIElement):
    enabled: bool
    toggled: bool
    textFalse: str
    textTrue: str
    color: Color
    tooltip: str

@dataclass
class UIButton(UIElement):
    enabled: bool
    text: str
    color: Color

class UIManager:
    def __init__(
        self,
        users: Users,
        client_state: "RemoteClientState",
        client_message_manager: "ClientMessageManager",
    ): ...
    def update_canvas(self, canvas_uid: str, destination_mask: Mask) -> UIContext: ...
    def is_button_pressed(self, uid: str, user_index: int) -> bool: ...
    def clear_canvas(self, canvas_uid: str, destination_mask: Mask): ...
    def clear_all_canvases(self, destination_mask: Mask): ...
    def reset(self): ...

class UIContext:
    def __init__(self, canvas_uid: str, destination_mask: Mask, manager: UIManager): ...
    def canvas_properties(self, *, padding: int = 0, background_color: Optional[List[float]] = None) -> None: ...
    def label(self, *, uid: str = AUTO, text: str = "", font_size: int = 24, bold: bool = False, horizontal_alignment: HorizontalAlignment = HorizontalAlignment.LEFT, color: Optional[List[float]] = None) -> None: ...
    def button(self, *, uid: str = AUTO, text: str = "", enabled: bool = True, color: Optional[List[float]] = None) -> None: ...
    def toggle(self, *, uid: str = AUTO, toggled: bool = False, text_false: str = "", text_true: str = "", enabled: bool = True, color: Optional[List[float]] = None, tooltip: Optional[str] = None) -> None: ...
    def list_item(self, *, uid: str = AUTO, text_left: str = "", text_right: str = "", font_size: int = 24, color: Optional[List[float]] = None) -> None: ...
    def separator(self, *, uid: str = AUTO): ...
    def spacer(self, *, uid: str = AUTO, size: float = 24): ...

Import

from habitat_hitl.core.ui_elements import (
    UIManager,
    UIContext,
    UIElement,
    UILabel,
    UIButton,
    UIToggle,
    UICanvas,
    UICanvasUpdate,
    HorizontalAlignment,
)

I/O Contract

Inputs (UIManager.__init__)

Name	Type	Required	Description
users	Users	Yes	User management object for multi-user support
client_state	RemoteClientState	Yes	Remote client state for reading button press events
client_message_manager	ClientMessageManager	Yes	Message manager for sending UI updates to clients

Outputs (UIContext)

Name	Type	Description
Canvas update	UICanvasUpdate	Serialized set of UI element updates sent to clients when the context manager exits

Usage Examples

Building a UI Canvas with Labels and Buttons

from habitat_hitl.core.ui_elements import UIManager, HorizontalAlignment
from habitat_hitl.core.user_mask import Mask

# ui_manager is a UIManager instance
with ui_manager.update_canvas("center", Mask.ALL) as ctx:
    ctx.canvas_properties(padding=10, background_color=[0.0, 0.0, 0.0, 0.7])
    ctx.label(
        text="Welcome to the Task",
        font_size=32,
        bold=True,
        horizontal_alignment=HorizontalAlignment.CENTER,
    )
    ctx.separator()
    ctx.label(text="Pick up the red object and place it on the table.")
    ctx.spacer(size=16)
    ctx.button(uid="start_btn", text="Start Task", enabled=True)

Checking Button Presses

if ui_manager.is_button_pressed("start_btn", user_index=0):
    # User 0 pressed the "Start Task" button
    begin_task()