LayoutManager

The LayoutManager is responsible for sending display requests to MentraOS Cloud to show layouts in the AR view. It provides methods for displaying different types of content in the user’s field of view. You access the LayoutManager through the layouts property of a AppSession instance:

const layoutManager = appSession.layouts;

Layout Methods

showTextWall()

Displays a single, primary block of text.

showTextWall(
  text: string,
  options?: {
    view?: ViewType;
    durationMs?: number
  }
): void

Parameters:

text: The text content to display
options: Optional parameters
- view: Target view (ViewType.MAIN or ViewType.DASHBOARD). Defaults to MAIN
- durationMs: Optional duration in milliseconds to show the layout

Example:

import { ViewType } from '@mentra/sdk';

// Simple usage
appSession.layouts.showTextWall('Hello, MentraOS!');

// With options
appSession.layouts.showTextWall('This is an important message', {
  view: ViewType.MAIN,
  durationMs: 5000 // Show for 5 seconds
});

showDoubleTextWall()

Displays two blocks of text, one above the other.

showDoubleTextWall(
  topText: string,
  bottomText: string,
  options?: {
    view?: ViewType;
    durationMs?: number
  }
): void

Parameters:

topText: Text for the top section
bottomText: Text for the bottom section
options: Optional parameters
- view: Target view (ViewType.MAIN or ViewType.DASHBOARD). Defaults to MAIN
- durationMs: Optional duration in milliseconds

Example:

// Show a title and content
appSession.layouts.showDoubleTextWall(
  'Weather Forecast',
  'Partly cloudy, 72°F, 10% chance of rain',
  { durationMs: 3000 }
);

showReferenceCard()

Displays a card with a title and main content text.

showReferenceCard(
  title: string,
  text: string,
  options?: {
    view?: ViewType;
    durationMs?: number
  }
): void

Parameters:

title: The title of the card
text: The main content text of the card
options: Optional parameters
- view: Target view (ViewType.MAIN or ViewType.DASHBOARD). Defaults to MAIN
- durationMs: Optional duration in milliseconds

Example:

// Show a reference card with a recipe
appSession.layouts.showReferenceCard(
  'Chocolate Chip Cookies',
  '2 cups flour\n1 cup sugar\n1/2 cup butter\n2 eggs\n1 tsp vanilla\n2 cups chocolate chips\n\nMix ingredients. Bake at 350°F for 10-12 minutes.'
);

showDashboardCard()

Displays a card suitable for dashboards, typically showing a key-value pair.

showDashboardCard(
  leftText: string,
  rightText: string,
  options?: {
    view?: ViewType;
    durationMs?: number
  }
): void

Parameters:

leftText: Text for the left side (often a label)
rightText: Text for the right side (often a value)
options: Optional parameters
- view: Target view (ViewType.MAIN or ViewType.DASHBOARD). Defaults to DASHBOARD
- durationMs: Optional duration in milliseconds

Example:

// Show current temperature in the dashboard
appSession.layouts.showDashboardCard('Temperature', '72°F');

// Show stock price in the main view
appSession.layouts.showDashboardCard('AAPL', '$178.72', {
  view: ViewType.MAIN
});

Layout Types

The LayoutManager uses several layout types internally. For reference, these are:

TextWall

interface TextWall {
  layoutType: LayoutType.TEXT_WALL;
  text: string;
}

See the full definition in Layout Types.

DoubleTextWall

interface DoubleTextWall {
  layoutType: LayoutType.DOUBLE_TEXT_WALL;
  topText: string;
  bottomText: string;
}

See the full definition in Layout Types.

ReferenceCard

interface ReferenceCard {
  layoutType: LayoutType.REFERENCE_CARD;
  title: string;
  text: string;
}

See the full definition in Layout Types.

DashboardCard

interface DashboardCard {
  layoutType: LayoutType.DASHBOARD_CARD;
  leftText: string;
  rightText: string;
}

See the full definition in Layout Types.

View Types

The ViewType enum is used to specify where in the AR display the layout should appear:

enum ViewType {
  DASHBOARD = 'dashboard', // The persistent dashboard area
  MAIN = 'main'            // The main, typically temporary, display area
}

Best Practices

Choose the Right Layout: Select the layout type that best fits your content’s structure.
Keep Text Concise: Screen space in AR glasses is limited. Keep your text brief and to the point.
Use Duration Wisely:
- For important information, use longer durations or no duration (persistent until replaced)
- For notifications or transient information, use shorter durations (2-5 seconds)
Dashboard vs. Main View:
- Use the DASHBOARD view for persistent information the user may need to reference
- Use the MAIN view for temporary information or responses to user actions

Getting Started

Core Concepts

SDK Reference

LayoutManager

LayoutManager

Layout Methods

showTextWall()

showDoubleTextWall()

showReferenceCard()

showDashboardCard()

Layout Types

TextWall

DoubleTextWall

ReferenceCard

DashboardCard

View Types

Best Practices

​LayoutManager

​Layout Methods

​showTextWall()

​showDoubleTextWall()

​showReferenceCard()

​showDashboardCard()

​Layout Types

​TextWall

​DoubleTextWall

​ReferenceCard

​DashboardCard

​View Types

​Best Practices

LayoutManager

Layout Methods

showTextWall()

showDoubleTextWall()

showReferenceCard()

showDashboardCard()

Layout Types

TextWall

DoubleTextWall

ReferenceCard

DashboardCard

View Types

Best Practices