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
⌘I