Skip to main content

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

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

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

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

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​

  1. Choose the Right Layout: Select the layout type that best fits your content's structure.

  2. Keep Text Concise: Screen space in AR glasses is limited. Keep your text brief and to the point.

  3. 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)

  4. 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