Multi-viewers

Multi-viewers

A multi-viewer is a monitoring wall — many live sources shown together in a single output, each in its own labelled tile with borders, audio meters, and a clock. In Phrame you lay it out visually in a designer, and the compositor renders it as a real broadcast signal.

---

Why it matters

Every gallery, MCR, and OB truck needs monitoring walls — and traditionally they mean dedicated, expensive multi-viewer hardware with fixed layouts. Phrame delivers the same thing in software:

• Any layout, any sources. Arrange as many tiles as you need — cameras, feeds, returns — at any size and position, from a drag-and-drop designer.
• Broadcast-grade output. The wall is composited into a real video signal (labels, borders, meters, and clocks burned in), not just a browser mock-up — so it can go to a screen, a stream, or a record.
• Operate it live. The same layout can be viewed and driven in the browser with live video previews and real-time state over MQTT.
• Resilient by design. Per-tile no-signal failover graphics and a background slate keep the wall meaningful when a source drops.

In one line: software multi-viewers — designed by dragging, rendered at broadcast quality, resilient when a feed dies.

---

How it works

Two pieces work together (see also vision-mixers and the control plane):

Piece	Role
FormDesigner (web UI, /design/:config)	Drag-and-drop layout builder: place components from a palette, set their properties, save the layout.
phrame_compositor (vision-mixers)	Composites the arranged sources into a single output frame, drawing tile labels/borders, clock overlays, the background slate, and failover graphics.

Design the wall in the browser. The component palette includes video panels, labels, analog/digital clocks, audio meters (VU), text, and image panels (part of a ~27-component broadcast UI library). You set each tile’s position, size, label, and border in a property panel and save.

View / operate it live at /stream/:config — a rendered layout with live WebRTC video previews and MQTT-driven state (tallies, meters, stats).

Render the broadcast wall with the compositor, which turns the layout into a composited video output. Ready-made example layouts ship with the platform: 16-Panel Multiviewer, production-desk, simple-monitor, and an EPG guide.

---

Under the hood

The compositor (phrame_compositor)

Composites every input into the output frame (default yuv422p16le) and draws overlays directly into the frame via shared YUV drawing utilities (PhrameDrawUtils) with FreeType text:

• Per-tile labels — label, label_position (top-left … center), label_font_height, label_foreground_color, label_background_color; the rendered glyph mask is cached at config-load and alpha-blended each frame.
• Per-tile borders — border_color, border_width.
• Clock overlays — an overlays[] array of digital_clock (strftime format, font, colours) or analog_clock, positioned by normalised x/y with a per-clock utc_offset_hours.
• Background slate — output.params.background_image (PNG/JPEG/SVG; SVG via librsvg) blitted full-frame before inputs, showing through transparent regions and on no-signal.
• Config schema: vision-mixers/schemas/composit_config.yml.

The designer & renderer (web UI)

• phrame-components — a framework-agnostic library of ~27 broadcast web components (controls, inputs, displays incl. VU meters and clocks, video/ image/iframe panels, a multi-lane timeline).
• FormDesigner builds a PageConfig JSON layout; PageRenderer hydrates it into a live component tree. Components talk to the platform over an MQTT bridge and emit CustomEvents.
• The operator app (phrame-ui) exposes Home, Designer (/design/:config), Stream viewer (/stream/:config), and Service routes; it saves layouts to the config server and authenticates via MSAL or Keycloak.

---

Part of the Phrame documentation system — one Markdown source, multiple audiences, a code-generated house-style diagram. Tagged collection: multiviewer for the focused multi-viewer export.