Q-SYS UCI — User Control Interface Design

UCI (User Control Interface) is Q-SYS's built-in graphical control panel system. It allows integrators to design touchscreen interfaces directly in Q-SYS Designer and deploy them to iPads, Android tablets, Chrome-based browser panels, and dedicated Q-SYS hardware panels — all without a separate control processor. UCI panels connect directly to the Q-SYS Core over the network and reflect real-time system state. For audio-centric installations where Q-SYS already handles DSP and control logic, UCI eliminates the need for Crestron or AMX entirely.

See control-systems/qsc-qsys-overview for the Q-SYS platform overview. For scripting that drives UCI logic, see control-systems/qsc-lua-scripting.

UCI Architecture

A UCI lives inside the Q-SYS design file alongside audio processing components. Each UCI is a separate design layer:

• UCI pages — Each design can contain multiple UCI pages. Pages are discrete screens (e.g., "Home", "Volume", "Video", "Conference").
• UCI components — Placed on the canvas like audio components. Each UCI component represents one panel instance.
• Control binding — Every button, knob, slider, and label in the UCI is bound to a Named Control or directly wired to a component control pin in the design.
• Real-time sync — The UCI reflects live system state. If a Lua script changes a gain value, the fader on every connected UCI panel updates instantly.

Deployment targets:

UCI Designer Canvas

UCI design happens in a dedicated UCI tab within Q-SYS Designer. The canvas represents the panel surface at a defined pixel resolution.

Setting up a new UCI:

1. In Q-SYS Designer, click the UCI tab (top of canvas area)
2. Right-click → "Add UCI" — name it (e.g., "Conference Room A")
3. Set the target resolution (match the deployment device's screen)
4. Common resolutions: 1024×768 (iPad landscape), 1280×800 (Android 10"), 800×480 (TSC-7t hardware panel)

The Properties panel (right side in UCI view) shows all properties of the selected element: position, size, color, bound control, text, font, visibility conditions.

UCI Components — Widget Library

Buttons

The most-used UCI element. A button binds to a Boolean or trigger control.

• Toggle button — latching; shows active/inactive state via color change
• Momentary button — fires a trigger while held; releases on lift
• Radio button group — mutually exclusive selection (room preset selection, input routing)

Button properties:

• Control — the Named Control or component pin this button reads/writes
• Legend — text displayed on the button (static or bound to a string control for dynamic labels)
• Active Color / Inactive Color — QSC provides a default palette; custom hex colors supported
• Confirm Action — adds a "Are you sure?" confirmation dialog before sending (useful for "End Meeting" or "Shutdown System")

Faders and Knobs

Bind to numeric controls (gains, levels, position).

• Fader — vertical or horizontal slider; drag to adjust
• Knob — rotary control; swipe up/down to adjust value
• Properties: Min Value, Max Value, Step Size, Show Value, Units (dB, %, etc.)
• Meter — read-only level display; bind to a meter output control from a gain or DSP component

Labels and Text

• Static label — fixed text; used for section headers and instructions
• Dynamic label — bound to a string-type Named Control; updates in real time (room name, meeting title, time, status messages from Lua)
• Clock — displays system time from the Core's clock

Images and Backgrounds

• Import PNG/JPEG images as backgrounds, logos, or button graphics
• Supported: company logos on the home page, room diagrams as clickable zone maps
• Background images: drag onto the canvas or set in Page Properties

Page Navigation

• Page Button — switches the UCI display to another page
• Back Button — returns to the previous page
• Conditional Page — show a page only when a control is in a certain state (e.g., show the "Conference Active" page only when a call is connected)

Visibility Control

Any UCI element can be conditionally shown or hidden based on a Named Control value:

• Set Visibility property → Conditional
• Choose the control and the condition (e.g., MicMute == 1 shows the mute indicator)

This is essential for clean interfaces: show only what's relevant to the current room state.

Layout and Design Best Practices

Grid and Alignment

Q-SYS Designer UCI canvas has a snap-to-grid option. Enable it — consistent 8px or 16px grid spacing produces professional results. Use the align tools (distribute horizontally/vertically) to space elements evenly.

Page Structure for Conference Rooms

A standard conference room UCI structure:

Home Page
├── Volume control (main fader + mute button)
├── Input source selection (radio buttons: HDMI, Wireless, PC)
├── Display power (on/off toggle)
├── [→] Conferencing page button
└── [→] Advanced page button (staff only)

Conferencing Page
├── Active call status (dynamic label: "In Call" / "Available")
├── Microphone mute (large, prominent toggle)
├── Camera on/off
├── [End Call] button (with Confirm Action)
└── [← Back] button

Advanced Page (PIN-protected)
├── Individual zone volume controls
├── Preset recall buttons
├── System status indicators
└── [← Back] button

Color Conventions

Follow consistent color semantics across the entire UCI:

• Green — active, on, connected, unmuted
• Red — muted, error, call ended, off
• Blue / brand color — neutral selection, active navigation
• Gray — disabled, inactive, background panels
• Amber / yellow — warning, transitional state

QSC provides a default color palette; create a custom palette using the theme editor to match client brand colors.

Typography

• Use a consistent font throughout (Q-SYS default: Noto Sans works well for readability)
• Minimum button font: 14pt for thumb-accessible tap targets
• Status labels: 12pt acceptable if read-only
• All caps for action buttons ("MUTE", "END CALL") — lower case for status/labels

Touch Target Sizing

Minimum touch target for reliable operation: 60×44 px (WCAG guideline). For primary actions (mute button, end call), 80×60 px or larger. Small buttons clustered together cause mis-taps — space them with at least 8 px between hit areas.

PIN Protection and Access Levels

UCI does not have a built-in multi-user access control system, but PIN protection can be implemented:

1. Create a "hidden" advanced page with system controls
2. Place a numeric keypad on the home page
3. Use a Lua script to compare entered digits against a stored PIN
4. If the PIN matches, trigger a control that makes the advanced page visible

Controls["PINEntry"].EventHandler = function(ctrl)
  if ctrl.String == "1234" then
    Controls["ShowAdvanced"].Boolean = true
    Timer.CallAfter(120.0, function()
      Controls["ShowAdvanced"].Boolean = false  -- auto-lock after 2 min
    end)
  end
end

Q-SYS TSC Hardware Panels

QSC manufactures dedicated UCI hardware panels designed to run Q-SYS UCI natively:

All TSC panels are PoE (802.3af/at) — single Cat6 cable carries power and data. No separate power supply. The panel connects to the Q-SYS Core over the network and is assigned a specific UCI by name in Q-SYS Administrator.

TSC vs. iPad comparison:

UCI Viewer App — iPad and Browser Deployment

iPad deployment:

1. Install Q-SYS UCI Viewer from the App Store (free)
2. Launch → enter the Core IP address
3. Select the UCI by name from the list presented by the Core
4. The UCI loads and runs — full real-time two-way communication

For permanent iPad deployments: use Guided Access (iOS) to lock the iPad into UCI Viewer, disable home button, and configure auto-restart. Mount with a PoE-charging iPad mount (Heckler Design, Bouncepad, or custom millwork insert).

Browser deployment: Navigate to http://[CoreIP]/uci from any Chrome browser. The UCI Viewer web app loads automatically. No installation required — useful for temporary use or PC-based operator stations. The browser UCI requires the Core's web server to be enabled (default: on).

Common Pitfalls

• Designing for the wrong resolution. Building a UCI at 1024×768 then deploying to a 7" TSC at 800×480 results in clipped edges and overlapping elements. Always set the UCI canvas resolution to match the target device before starting layout. If the UCI will deploy to both iPads and TSC panels, design separate UCIs or use the smallest common resolution.

• Binding to component controls instead of Named Controls. Binding UCI elements directly to component pin names (e.g., MyGain.gain) works but is fragile — renaming the component in the design breaks all bindings silently. Use Named Controls (External Control names) for all UCI bindings. Named Controls are explicitly maintained and survive component renames.

• No auto-return to home page. A UCI with no inactivity timer leaves operators stranded on secondary pages. Implement a Lua timer that resets the UCI to the home page after 60–120 seconds of inactivity. Track inactivity by monitoring a control that triggers on any UCI interaction.

• Touch targets too small for reliable use. Buttons sized at 30×30 px look fine in Designer at 100% zoom but are unmissable in practice, especially on wall-mounted panels in dim rooms. Build at 1:1 scale and physically test on the target hardware before client presentation. Primary action buttons should be finger-width: 60×60 px minimum.

• PIN not auto-locking. A PIN-protected advanced page that doesn't auto-lock after a timeout leaves the system permanently in the unlocked state after one staff visit. Always implement an auto-lock timer in the Lua PIN logic (see PIN section above).

• iPad OS updates breaking UCI Viewer. Apple iOS major updates occasionally require an updated Q-SYS UCI Viewer app. If the iPad auto-updates iOS overnight, the UCI Viewer may stop working until QSC releases a compatible app version. Disable auto-updates on permanently installed iPads, or specify TSC hardware panels for reliability-critical installations.