Skip to main content

Multiview

Multiview enables displaying multiple video sources simultaneously on a single screen in a grid layout. This feature is ideal for security camera walls, sports viewing, multi-source monitoring, and picture-in-picture displays.

Overview​

Multiview features:

  • Grid Layouts: 2x2, 3x2, 4x4, or custom layouts
  • Source Assignment: Assign different sources to each grid position
  • Drag & Drop: Visually arrange sources on grid
  • Fullscreen Toggle: Enable/disable fullscreen per source
  • Audio Routing: Route audio from one source while viewing multiple
  • Video Commands: Configure commands for main video routing

Understanding Multiview​

What is Multiview?​

A multiview display shows multiple video feeds in a grid:

┌─────────┬─────────┐
│ Camera 1│ Camera 2│  2x2 Grid
├─────────┼─────────┤  4 sources
│ Camera 3│ Camera 4│
└─────────┴─────────┘

┌────┬────┬────┐
│ C1 │ C2 │ C3 │       3x2 Grid
├────┼────┼────┤       6 sources
│ C4 │ C5 │ C6 │
└────┴────┴────┘

Each grid position can show a different source.

Multiview vs. Regular Sources​

Regular Source: One source fills entire display

Multiview: Multiple sources share display in grid

Auto-Initialization​

When a multiview source is selected in an AV zone, the system automatically initializes the multiview layout:

  1. The first source in the multiview grid becomes the active audio source
  2. The multiview video command is executed (if configured) to set up the grid layout
  3. The first source's audio command is executed (if configured)

This means users see a fully configured multiview grid immediately upon source selection, without needing to manually select an initial source or trigger routing commands.

Use Cases​

Security Monitoring:

  • 4x4 grid showing 16 cameras
  • Security guard station
  • Surveillance room

Sports Viewing:

  • 2x2 grid showing 4 games simultaneously
  • Sports bar configuration
  • Multi-event coverage

Trading Floor:

  • 3x2 grid with market data
  • News feeds
  • Trading terminal
  • Charts/graphs

Multi-Source Preview:

  • Preview sources before routing to main display
  • Director's monitor in production environments

Creating a Multiview Device​

Initial Setup​

  1. Click Create New button

  2. A dialog appears with three fields:

    Name: Internal identifier (auto-formatted to lowercase_with_underscores)

    • Example: security_wall_multiview

    Label: Display name

    • Example: "Security Camera Wall"

    AV Zone: Which AV zone this multiview appears in (required)

    • Select the zone where this multiview will be available as a source
    • Example: "Security Office Video"

  3. Click Create

Result: A virtual device is created with driver "virtual", and an AV source with component "multiview" is added to the selected zone.

Device Selection​

Select existing multiview device from dropdown:

  • Shows all devices with multiview sources
  • Select to configure that multiview
  • Configuration loads automatically

Multiview Configuration​

Layout​

Configure grid dimensions:

Width: Number of columns

  • Range: 1-8
  • Common: 2, 3, 4

Height: Number of rows

  • Range: 1-8
  • Common: 2, 3, 4

Total Positions: Width × Height

  • 2x2 = 4 positions
  • 3x2 = 6 positions
  • 4x4 = 16 positions

Common Layouts:

2x1 (Dual): Side-by-side
2x2 (Quad): 4-way grid
3x2: 6 sources
3x3: 9 sources
4x4: 16 sources (max for most displays)

Grid Editor​

Visual grid shows all positions:

Each Grid Cell:

  • Position number (1-based, numbered left-to-right, top-to-bottom)
  • Current source label (if assigned) or "+" icon (if empty)
  • Click to select position for configuration
  • Drag to rearrange (drag occupied cell to empty cell to move, or to another occupied cell to swap)

Grid Interaction:

  • Click Cell: Select position for editing
  • Drag Source: Move source to different position
  • Drop on Empty: Move source to empty position
  • Drop on Occupied: Swap sources

Position Configuration​

When a position is selected, a detail panel appears on the right:

Source Device:

  • Dropdown of available sources filtered to the parent AV zone
  • Select which source to display in this position

Move to Position:

  • Dropdown to move this source to a different grid position (1 through total positions)
  • If the target position has a source, the two sources swap positions

Audio Routing Command (optional):

  • Command builder for routing audio from this source
  • Sent when this position becomes the active audio source
  • Configure: Device, Command, Args

Fullscreen Video Command (optional):

  • Command builder for routing this source to fullscreen
  • Sent when this position is expanded to fullscreen
  • Configure: Device, Command, Args

Remove:

  • Removes the source from this position

Multiview Command​

Command sent when selecting a source for fullscreen:

Configuration:

  • Device: Main display or router device
  • Command: Command to route full-screen
  • Args: Command arguments (input/output numbers, etc.)

How It Works:

  1. User clicks on a multiview source
  2. Main video command routes that source to main display
  3. Multiview switches to single-source fullscreen

Disable Fullscreen​

Toggle to prevent fullscreen mode:

Enabled (checked):

  • Users cannot expand single source to fullscreen
  • Grid always shows all sources
  • Useful for monitoring applications (security, trading)

Disabled (unchecked):

  • Users can click source to expand fullscreen
  • Click again to return to multiview
  • Useful for casual viewing

Common Workflows​

Creating Camera Wall​

For 16-camera security monitoring:

  1. Create Multiview Device:

    Name: security_wall
    Label: Security Camera Wall
    AV Zone: security_office_video

  2. Configure Layout:

    Width: 4
    Height: 4
    Total: 16 positions

  3. Assign Cameras:

    • Position 1: Front Door Camera
    • Position 2: Back Door Camera
    • Position 3: Driveway Camera
    • Position 4: Garage Camera
    • ... (continue for all 16)

  4. Configure Options:

    Disable Fullscreen: Yes
    Multiview Command: (leave blank - monitoring only)

  5. Save

Result: Security office display shows all 16 cameras in grid.

Creating Sports Viewing​

For watching multiple games:

  1. Create Multiview Device:

    Name: sports_quad
    Label: Sports Quad View
    AV Zone: living_room_video

  2. Configure Layout:

    Width: 2
    Height: 2
    Total: 4 positions

  3. Assign Sources:

    • Position 1: Cable Box (ESPN)
    • Position 2: Cable Box 2 (Fox Sports)
    • Position 3: Apple TV (streaming)
    • Position 4: Cable Box 3 (local news)

  4. Configure Main Video:

    Device: living_room_tv
    Command: select_input
    Args: {input: "hdmi1"}

  5. Configure Options:

    Disable Fullscreen: No

  6. Save

Result: Living room can show 4 games in grid, click any to go fullscreen.

Creating Trading Floor Monitor​

For financial monitoring:

  1. Create Multiview Device:

    Name: trading_monitor
    Label: Trading Floor Monitor
    AV Zone: trading_desk_video

  2. Configure Layout:

    Width: 3
    Height: 2
    Total: 6 positions

  3. Assign Sources:

    • Position 1: Bloomberg Feed
    • Position 2: CNBC Feed
    • Position 3: Market Charts
    • Position 4: Portfolio Dashboard
    • Position 5: News Ticker
    • Position 6: Trading Terminal

  4. Audio Routing:

    • Each source can have audio command
    • Only one source active audio at a time
    • Click source to activate its audio

  5. Disable Fullscreen: Yes

Result: Trading desk shows all information sources simultaneously.

Audio Routing in Multiview​

Single Audio Source​

When viewing multiple video sources, only one can provide audio:

Configuration:

  • Each source can have an audio_command
  • Command routes that source's audio when selected
  • Clicking source in multiview:
    • Executes its audio_command
    • Audio switches to that source
    • Video remains in multiview grid

Example:

Position 1 (Camera 1):
  Audio Command: None (no audio from cameras)

Position 2 (Cable Box):
  Audio Command:
    Device: receiver
    Command: select_input
    Args: {input: "cable"}

User clicks Position 2 → Audio switches to cable box

Audio Sync​

Keep audio synced with fullscreen video:

Multiview Command can include audio routing:

Multiview Command:
  Device: receiver
  Command: select_input_sync
  Args: {input: "{source.input}", audio_sync: true}

Drag & Drop Interface​

Rearranging Sources​

Drag:

  1. Click and hold on a source in grid
  2. Drag to new position
  3. Drop to place

Swap:

  • Drag occupied position to another occupied position
  • Sources swap positions

Move:

  • Drag occupied position to empty position
  • Source moves, original position becomes empty

Visual Feedback:

  • Dragging source shows as semi-transparent
  • Drop targets highlight
  • Invalid drop areas show red

Video Command Configuration​

Multiview Command​

Routes selected source to main display:

Fields:

  • Device: Main display or routing device
  • Command: Command name
  • Args: JSON arguments

Example:

Device: main_display
Command: select_input
Args: {input: {source.matrix_output}}

Variable Substitution:

  • {source.matrix_output} - Selected source's matrix output
  • {source.device_id} - Source device ID
  • {position} - Grid position number

Per-Source Video Commands​

Each grid position can have its own video command:

Use Cases:

  • Different routing per source
  • Source-specific preprocessing
  • Multi-matrix systems

Example:

Position 1 (Camera 1):
  Video Command:
    Device: camera_matrix
    Command: route
    Args: {input: 1, output: 1}

Position 2 (Cable Box):
  Video Command:
    Device: av_matrix
    Command: route
    Args: {input: 5, output: 1}

Advanced Topics​

Dynamic Layouts​

Change layout based on context:

Example: Security threat response

  1. Normal: 2x2 showing entrance cameras
  2. Alert detected: Auto-switch to 4x4 showing all cameras
  3. Requires macro or trigger to update layout

Picture-in-Picture​

Simulate PIP with 2x2 layout:

Configuration:

Layout: 2x2
Position 1: Main source (larger via CSS)
Position 2-4: Secondary sources (smaller)

Use theme CSS to size positions differently:

.multiview-position-1 {
    grid-column: 1 / 3;  /* Spans 2 columns */
    grid-row: 1 / 3;     /* Spans 2 rows */
}

Source Cycling​

Automatically rotate sources through positions:

Requires:

  • Custom widget or macro
  • Timer to trigger updates
  • API calls to modify multiview config

Example: Cycle through 32 cameras on 16-position display

Audio Following Video​

When source goes fullscreen, route its audio:

Implementation:

  • Set fullscreen selection to trigger audio command
  • Configure audio_command on each source
  • JavaScript in theme or widget handles the trigger

Troubleshooting​

Multiview Not Displaying​

Check:

  1. Multiview Source: Multiview device exists as source in AV zone
  2. Sources Assigned: Grid positions have sources assigned
  3. Device Enabled: Multiview device is enabled
  4. Component: Display supports multiview rendering
  5. Browser: Modern browser with CSS Grid support

Only One Source Showing​

Check:

  1. Layout: Grid dimensions configured correctly (not 1x1)
  2. Multiple Sources: Multiple positions have sources assigned
  3. CSS: Theme CSS not overriding grid layout
  4. Fullscreen: Not stuck in fullscreen mode

Sources in Wrong Positions​

Check:

  1. Position Numbers: Verify position numbering (1-based, left-to-right, top-to-bottom)
  2. Drag Issues: Try manually setting positions instead of dragging
  3. Config Save: Ensure configuration saved after rearranging
  4. Cache: Clear browser cache

Fullscreen Not Working​

Check:

  1. Disable Fullscreen: Ensure "Disable Fullscreen" is unchecked
  2. Multiview Command: Configured if needed for routing
  3. JavaScript: Browser JavaScript enabled
  4. Theme Support: Theme supports fullscreen interaction

Audio Not Routing​

Check:

  1. Audio Commands: Per-source audio commands configured
  2. Device Online: Audio routing device connected
  3. Command Valid: Audio command works when tested independently
  4. Logs: Check for command execution errors