UCI Creation and Management

The Q-SYS User Control Interface, or UCI for short, provides the means for an end user to control parts

of the Q-SYS design via a networked device such as a Q-SYS Touchscreen,

a Windows-based PC, or an IOS device...

The choice is yours as to how much

or how little you would like the user of a UCI to be able to control the system,

and the creativity you use in designing the UCI can go a long way to enhance the user’s total experience.

Don’t worry, there’s no programming experience required to make a UCI!

You can build robust UCI screens by simply dragging any Q-SYS DSP

or control element from the schematic into the UCI Editor.

Luck for you, you don’t need to learn a new platform in order to build these UCIs

and you don’t need separate control hardware to run the UCIs.

All that’s required is to add a UCI deployment feature license to your core processor.

Which will allow you to deploy your UCIs to any device.

In this video we’ll go through the basic steps of creating and editing the basic properties of a UCI.

Your first step is to open the UCI Editor, by navigating to the Left-Side Pane.

The first thing you’ll notice is that there is already a UCI here titled Inventory Status,

which displays the current status of every Inventory item in your design.

These are categorized by the Location you provide in their Properties.

You cannot remove, rename, or edit this UCI.

This screen is what we call the UCI Editor.

The UCI interface itself has replaced our main Schematic page,

and you can see a new side panel which lists all of the pages, layers, and objects on this UCI.

We’ll talk more about those in a minute.

First, we’ll create a new UCI, by pressing the plus icon in the UCI panel.

You now have a blank UCI with one blank Page in it.

We can add almost any control from our design into this blank UCI space,

as well as a variety of external images.

To add a control, simply open the component’s control panel, select the controls you want,

and copy and paste them into your UCI window.

I used the Ctrl+C and Ctrl+V shortcut,

but you could also use the right-click menu to select Copy and Paste.

Alternatively, you could drag these controls up to the UCI’s name tab, and then drop them onto your UCI.

Or … and this is what I usually do

you could undock your UCI window by dragging its tab away from the main screen.

You could either move this to a second computer monitor,

or you could split your screen by releasing the mouse button on one of these four split-screen icons

Splitting your screen makes it extremely easy to drag controls from your Schematic onto your UCI.

But before you add too much to your UCI, you should make sure your panel is sized for right device.

If you select your UCI’s name and look at its Properties,

choose the Panel Type from the available options.

Once you change your selection,

the dimensions of the UCI Editor will automatically adjust to the new device.

This will change the canvas size, but it doesn’t rescale any of the objects.

So, be sure to do this first, or you may end up needing to reorganize all your UCI elements

for the correct dimension if you first built it with an incorrect device selected.

There are a variety of QSC Touchscreen controllers on this list, as well as iPhones, iPads,

and generic aspect ratio options for displaying on a networked PC.

For some of these devices, be sure to specify if you want to work in a horizontal Landscape mode,

or a vertical Portrait mode.

For most UCIs, you won’t be able to fit every control onto a single screen, even if you wanted to.

Instead, let’s add a new page to your UCI,

by pressing the Plus button down here at the bottom and selecting “Add Page.”

Now we have a fresh UCI page, and we can add more content to this page.

But now that your UCI has multiple pages,

you’ll need to decide how you want the user to navigate between them.

By default, navigation tabs are added to the side.

You can customize some basic properties of these pages here on the right.

You can change your Title to rename them.

You could select an Icon that will appear on the Page tab.

And you can select a Fill color which will be used for both the Page’s background and the tab color.

You can also adjust the depth of this tab window by dragging its border with your mouse.

To further customize these tabs, let’s select the UCI itself and adjust its Properties.

You could change their Location to dock this navigation bar to the Left, Right, Bottom or Top.

You can also change the font, and add a colorful Stroke (or border) with these fields here.

However, if you don’t like any of these options there are other ways to let your

user navigate between pages as well.

The user can actually navigate between pages by swiping left or right on the screen,

rather than using the navigation buttons.

In this case, you might want to change the Tabs location to “None,” since we’re not using them.

On the other hand,

you could disable the swipe ability by finding the “Swipe Disabled” property and activating it.

Now we have a UCI without navigation tabs or swipe ability – but this might be exactly what you want.

You see, an important thing to note about using the Page Tabs or the Swipe method is that these

give the user access to every single page in your UCI.

But let’s say you have a Maintenance page that you don’t want a casual user to stumble upon,

or perhaps you have a large number of pages and you want to really customize the paths between them.

In this case, you can use Navigation buttons.

You’ll find these in the “Layout” branch on the Schematic Library, in the “UCI” folder.

The Navigation Button can be placed anywhere on your UCI,

and you can change its appearance just like any other button.

Its main property you need to adjust is which Page you want it to open when it is pressed.

This allows you to create your own custom navigation section,

and limit the user’s navigation based on the options you present them.

It’s also worth noting that you can write any label you want on these Navigation buttons,

while the Navigation tabs will only display the Page’s actual name.

There are a few more properties here we should mention, such as the Enable Button Swipe property.

This property allows you to activate multiple buttons without your finger leaving the touchscreen.

Imagine a paging interface where you can select multiple zones for your announcement.

If Button Swipe is disabled, then you would need to select each of those zones one by one.

But, if Button Swipe is enabled,

you can make one continuous swipe and every button you touch along the way will engage.

Let’s also look at the Private property.

When we talk about deploying these UCIs in a later video,

you’ll learn that a Windows device or an iOS device can manually select from all available UCIs present on the network.

If you want to exclude a particular UCI from that list, engage Private here.

That means the UCI can only be displayed by a QSC touchscreen that it is assigned to.

This is not the same as restricting access to a specific user.

If you want to require a user to log on to a UCI, that is accomplished in the Administrator tool.

Navigate to the User Control Interfaces tab, and select the UCI you want to protect.

Engage the “Require User Logon” button and the UCI will display a keypad screen instead of the UCI.

A user must input their custom PIN number, as configured in the Users list, in order to access the UCI.

To log off, you should provide them with a Log Off button, found in the Layout>UCI Folder.

And a few more things, since we’re already looking at them.

The Clean Screen button will disable your UCI for thirty seconds, allowing you to physically clean your screen.

And the URL button allows you to specify a web address.

Pressing this button will launch the viewers default native web browser and load your hyperlink.

This is obviously only available on an internet-connected tablet or PC, not on a QSC touchscreen.

So, that’s the basic structural layout of how to add UCIs and adjust their properties and navigation.

Go ahead and take a quick break if you’d like.

In the next videos we’ll look at how further you can customize their appearances and actually deploy them onto a touchscreen.

See you next time.