Open topic with navigation

User Control Interfaces

The Q-SYS User Control Interface (UCI) provides a means by which a User can control defined parts of a Q-SYS design via a networked device such as the Q-SYS Touch Screen Controller (TSC) panel, Windows based PC, Apple iPad, iPhone, and others. The UCI is created in Q-SYS Designer, and has one or more pages that can contain controls, indicators, and graphic objects dragged in from the Schematic. Graphic objects and images can also be inserted directly into UCI pages by dragging and dropping, or copying and pasting from other applications (Not all applications support both methods.).

Once a UCI is created, you can deploy it for use in several ways including the Q-SYS TSC-8, TSC-3, Q-SYS UCI Viewer and UCI Viewer Status\Control component for Windows, and Apple iOS devices. Refer to the Deploying User Control Interfaces section of this topic for details.

You can control access for individual UCIs based on individual Users through the Q-SYS Administrator.

IMPORTANT:   Due to the finite amount of memory on any hardware, creating large UCIs can cause performance issues on the device hosting the UCI. Pay particular attention to smaller devices such as those that use the Apple iOS.

Inventory Status

The Inventory Status UCI, is a system-generated UCI that lists the status of all components in your inventory that have a Status field available. This UCI can not be modified other than by adding or removing items from the Inventory. The components do not have to be in the Schematic to be listed.

By default, there is one UCI page (Default Location) available. When enough Inventory items are added, and for each hardware location defined, Q-SYS generates another page, and continues until all Inventory is listed. When there is more than one page, a Navigation page is generated with buttons to select each page. On the individual pages, there is a single button labeled "Home" that takes you back to the Navigation Page.

The Inventory items are ordered by location, each location having its own page, then the order in which they were added to the Inventory by type. For example, if you add a Page Station first, all Page Stations in the same location are listed first, if you then add an Amplifier in the same location as the Page Stations, all Amplifiers are added under the Page Stations.

Properties

User Control Interface Properties

To access the Properties for a UCI, you must select the UCI (not one of its pages) in the left-side pane under User Control Interfaces.

Page Properties

Each page you add has its own Properties.

Building a User Control Interface

Building a UCI consists of adding controls and other items to the UCI in the UCI Design Interface. You can do this by the methods listed below. Once you a number of items in your UCI, you will probably want to arrange them to increase usability and appearance. Q-SYS provides a number of tools to do that.

• Properties - the Properties of a selected item are located in the right side pane of the Q-SYS Designer workspace, and contain the following items:
  • Position coordinates of a selected item allow you to place an item exactly where you want it to be. The left number controls horizontal placement of the left side of the selected item, the right number controls the vertical placement of the top edge of the selected item.
  • Control the Size of the selected item. The left number controls the width (horizontal), and the right number controls the height (vertical) size of the item.
  • Other items in the Properties include Fill color, Corner Radius, Stroke Color, Stroke Width, and Text Color, Size, Weight, and Horizontal Alignment.
• In the UCI Design Interface there are a number of tools you can use:
  • In the Tools drop-down menu there is Group / Ungroup (Ctrl+G) / (Ctrl+Shift-G), Align, Distribute, Pack, and Order.
  • Guidelines - When you open the UCI Design Interface, the working area is defined by a light blue background surrounded by gray area. If you place your cursor in the gray area above or to the left side of the working area, you will see a guideline displayed across or down through the workspace. The guideline moves with the cursor, and coordinates are displayed as you move the guideline.
    • Click the cursor where you want the guideline to remain. Continue adding guidelines as needed.
    • To move a guideline, move the cursor over the guideline in the gray area then click and hold when the cursor becomes a double arrow over the desired guideline. Drag the cursor to the place you want it. You can zoom in on the area if you need to in order to see the coordinates.
    • After setting your guide lines, you can use them to align items in the UCI.
  • Copy/cut and Paste UCI pages.
    • To copy or cut a UCI page, select the UCI page under the UCI in the User Control Interfaces panel, then press Ctrl+C/Ctrl+X, or select Edit > Copy/Paste.
    • Select the destination UCI, and press Ctrl+V or select Edit > Paste. The page now displays in the destination UCI.

Add a User Control Interface to the Design

1. Select the User Control Interface accordion bar from the left-side pane.
2. Click the plus sign ( +) on the right side of the User Control Interface accordion bar. By default, there are no UCIs listed with the exception of the system-generated Inventory Status. The first time you click the plus sign a new UCI displays in the list with a single page, and the UCI layout window displays. The layout window is "docked" as a tab on the top of Q-SYS Designer interface. You can right-click the tab to choose to "float" the window.
3. Click the newly added UCI under the User Control Interface accordion bar. The Properties for the UCI display in the right-side pane.
4. Select the desired settings in Properties for this UCI. Refer to the User Control Interface Properties.
5. If necessary, expand the listed UCI in the left-side pane, and select Page 1 of the UCI. The Page Properties display in the right-side pane.
6. Give a unique title to the Page in the Properties. When you name the Page, if there is more than one, the Page Title changes in the page tab in the layout window.
7. To add more UCIs, click the plus sign ( +) and select New User Control Interface from the fly-out menu and repeat the appropriate steps in this procedure.
8. To add more Pages, click the plus sign ( +) and select Add Web Page to, then select the desired UCI from the list that displays. A new page is added below the selected UCI.
9. To change the order of pages in a UCI, expand the UCI in the left-side panel, then click and drag the page to its new position. The changes are reflected in the UCI when it is run.

Add Layers to the UCI Page

Adding layers to your UCI allows you to separate items on your UCI page for various reasons. When you create a page in the User Control Interface it has one layer by default. You cannot delete all of the layers on a page, one layer will always be on a page. Adding or deleting content: You may copy and paste, or drag and drop items onto the layer. For complete details, refer to "Arranging and Modifying Controls, Adding Text, and Adding Graphic Boxes" below. To delete content, select the item you want to delete then right-click and select the X to delete the selected item. You cannot delete content from a layer when the layer is not visible, or when the layer is locked.

Adding and deleting layers: To add a layer, click the add layer icon (1). A new layer is added. Layers are named Layer 1, Layer 2, and so on. If, for example, you rename Layer 1, then add another layer, it is named Layer 1. To delete a layer, select the layer in the left pane you want to delete, then click the delete layer icon (2). The layer and any content on the layer is deleted. You can delete a layer from the left pane regardless of its visibility or lock state. To move a layer, select the layer you want to move, and click the up or down arrows (3) until it is where you want it. Content on the higher layers displays on top of the content on lower layers. To hide or display a layer, select the layer you want to hide (6) or display (4 and 5) and click the eyeball icon. When a layer is hidden you cannot select any content on that layer. You can delete the layer and the content on the layer is also deleted. To lock or unlock a layer, select the layer you want to lock (5) or unlock (4 and 6) and click the lock icon. You cannot add, delete, or move any content on a locked layer. You can delete the layer when it is locked or unlocked. You can script actions of the layers. For example: Uci.SetLayerVisibility(<UCI name>, <Page Name>, <Layer Name>, <show>, <transition type> ) Uci.SetLayerVisibility("TSC-7", "Page 1", "Layer 2", true, "top" ) <show> is true or false (show or hide) <transition type> is one of “fade”, “left”, “right”, “top”, “bottom”

Adding Navigation and Control Buttons to a UCI Page

When you select None for the Page Tabs Property, you will probably need to provide some type of navigation for the user. Q-SYS Designer provides two ways of adding navigation buttons to your UCI. In addition to the navigation type buttons, there are two control type buttons you can add. The Clean Screen Button allows you to start a timer on a TSC-3 or TSC-8 which disables the touch screen for 30 seconds to allow for cleaning. The Log Off Button will log off of the TSC-3 or TSC-8 touch screen if logging in is required.

• Navigation buttons:
  •  Method A
    1. In Design mode, select "page 1". The page displays in the UCI design area.
    2. Right click and hold "page 2" in the left-side pane and drag it onto "page 1" in the UCI design area. A button displays with the label "page 2".
    3. You can change the name by selecting the button and simply type a new name, or double-click the button and edit the name.
    4. You can change various Properties of the button while it is selected.
  • Method B
    1. In the Schematic Library > Layout > UCI, drag the Navigation Button into your UCI design.
    2. With the button selected, select the UCI page you want in the Properties > Page. The Page property lists all of the Pages in your UCI.
• Polygon buttons:
  1. In Design mode, select "page 1". The page displays in the UCI design area.
  2. Select the Polygon Graphic tool from the right-side pane.
  3. Draw a polygon in the UCI design area.
  4. Click and hold "page 2" in the left-side pane and drag it over the polygon on "page 1". A hover message displays that says "Assign Page to Region".
  5. Release the mouse button. The page you dragged on to the polygon button is now assigned to the polygon.
• Clean Screen Button
  1. In Design mode, select the UCI page on which you wish to place the Clean Screen Button.
  2. From the Schematic Library > Layout, drag the Clean Screen Button into your UCI page.
  3. When the design is run on a TSC-3 or TSC-8 Touch Screen, this button starts the 30 second timer allowing you to clean the screen.
• Log Off Button
  1. In Design mode, select the UCI page on which you wish to place the Log Off Button.
  2. From the Schematic Library > Layout, drag the Log Off Button into your UCI page.
  3. Emulate or Run the design.
     1. In Q-SYS Administrator, select the User Control Interfaces tab.
     2. Double click the UCI design containing the Log Off button.
     3. Make sure that the Require User Logon field is set to Yes, and that at least one User is assigned.
     4. Save the changes.
  4. When the design is run, this button logs the user off. You must enter a logon password to gain access.
• URL Button
  1. In Design mode, select the UCI page on which you wish to place the URL Button.
  2. From the Schematic Library > Layout, drag the URL Button into your UCI page.
  3. With the URL button selected, in the component Properties, enter the url you wish to connect to.
  4. Run the design.
  5. Make sure the device (UCI viewer, or iOS device) used for this UCI is running and connected to the UCI.
  6. If necessary, select the page containing the URL button, and click the button.
  7. The UCI opens your default browser and the url assigned to the button.

Add Controls to the User Control Interface Layout Window

NOTE:  You must have at least one element of your design in the Schematic before you can add any controls or indicators to the UCI layout page.

NOTE:  Currently, the Equalizer, Dynamics components, and the 2D Matrix Panner cannot be displayed in a UCI. As of Q-SYS Designer 4.1, you can add the Responsalyzer, and RTA controls to the UCI's.

Refer to the Controls section of the About Schematic Elements topic for details about using controls.

1. Select the Page in the layout window to which you are going to add the controls.
2. Open the Control Panel for one of the Schematic Elements in your design.
3. Select one or more controls in the Control Panel
   • Click a single control
   • Click multiple controls using Ctrl+click
   • Use Ctrl+A to select all the controls in the Control Panel, including graphics. Make sure the Control Panel is selected before pressing Ctrl+A.
4. Once the desired controls are selected, drag, or copy and paste them into the UCI layout window. The controls you add to the UCI are directly linked to the controls in the component from which you selected them.
5. You can arrange the controls in the UCI layout window as desired. Keep in mind that if you decide to change the location of the Tabs, the layout of controls may have to change.

Arranging and Modifying Controls, Adding Text, and Adding Graphic Boxes

IMPORTANT:   Because of the differences in the native Windows and Air text generation, there may be alignment differences between the UCI, and the deployed display. Before commissioning a UCI on a Web Control Interface, test it to be sure the alignment is adequate.

The following list of actions can be done in any order, and are optional.

• Arrange the controls by dragging. Alignment indicators display when the top/bottom/side is in alignment with another control in the layout. You can also select a group of controls and use the Alignment and Pack features from the Main Menu > Tools > Align or Pack.
• Change the Properties of a control.
  1. Select the control. The Properties for that control display in the right-side pane.
  2. Change the Fill color, or any of the other Properties listed for the control. Depending on the style of control, different properties are available.

A Text Block, when not selected, looks like a plain line of text with nothing surrounding it.

• Add a Text Block using the Text Block tool.
  1. Click the (Text Block tool) under Graphic Tools in the right-side pane.
  2. Click and hold the mouse button approximately where you want one corner of the Text Block to begin.
  3. Drag the mouse in the direction you wish, when the Text Block is approximately the size you want, release the mouse button. A box displays indicating the area in which the text is confined. This box is not visible when you de-select the Text Block.
  • You can re-size the Text Block by clicking and holding one of the "handles" on the box and moving it appropriately. If you grab one of the corner handles, you can re-size the height and width at the same time. Pressing the Shift key constrains the height and width proportions.
  • You can move the Text Block by clicking anywhere in the Text Block, and while holding the mouse button, move the box where you want it. If you double-click the Text Block, you enter the edit mode and cannot move or re-size the box until you exit the edit mode.
  4. Set the Properties for the Text Block.
  • Position - Sets the position of the text block in the schematic. You can drag as needed, or enter specific coordinates.
  • Size - Sets the size of the text block.
  • Fill - Initially, the Text Block is transparent. The Fill changes the color of the background. Click the color sample in the Fill property to select from a panel of colors, or click the eyedropper then click an item in the Schematic or layout window having the color you want to use. After changing the color, you need to set the transparency of the background with the slider at the bottom of the color pallet.
  • Corner Radius - Initially, the Text Block has square corners, the Corner Radius allows rounded corners.
  • Stroke Width - Initially, the Text Block has no border, the Stroke Width must be set in order to have a border. Values are from 0 to 64.
  • Text Color - Sets the color of the text using the color pallet.
  • Size - Changes the font size (in pixels) for all text in the Text Block. The range is 6 to 64.
  • Weight - Changes the font weight: Bold, Normal or Light for all text in the Text Block.
  • Horizontal Alignment - Aligns the text horizontally in the Text Block: Left, Center or Right.
  • Vertical Alignment - Aligns the text vertically in the Text Block. Bottom, Center, or Top
  5. Start typing.
     • Pressing Enter gives a new line within the text box. The text continues on one line until the Enter key is pressed.
     • Pressing the Tab or Esc key will select the text object.
     • Pressing the Insert key toggles between inserting text and typing over text.
     • Any characters are allowed.
     • You cannot add graphics, for example, pictures, to a Text Block.
  6. When you're finished typing, click somewhere away from the Text Block to de-select it.
  7. To add another Text Block click the again and repeat the steps above.
• Selecting a Text Block
  • Click the Text, or anywhere in the Text Block area.
  • Using your mouse, drag a selection box around the Text Block.
  • If you created a Text Block but did not enter any text, you cannot see the "box" unless it is selected. You can drag a selection box around the Text Block. It is recommended that you put at least some text in the Text Block before de-selecting it since it may be difficult to find once it is de-selected with no text entered.
• Editing the text in a Text Block
• Double-click anywhere in the Text Block.
• The text in the Text Block is selected. If you start typing, the text is replaced with what you are typing.
• You can click again at the point you want to make edits and add or delete as necessary.

The Graphic Box is a means to visually group objects within a Q-SYS design, or UCI.

• Add a graphic box using the Group Box tool.

  NOTE:  The Graphic Box does not constrain any of the objects within its boundaries - if you move the box without selecting the objects inside the box's lines, the objects will not move with the box. Only the text associated with the box will move with the box.

  1. Click the Group Box tool under Graphic Tools in the right-side pane. As you move the mouse cursor over the Schematic or UCI layout window, the cursor becomes a cross-hair pointer.
  2. Click and hold the mouse button where you want one of the corners of the box to be. You can make adjustments later, so this spot isn't critical.
  3. Drag the box cursor in the direction you want the box to be. Release the mouse button when you're finished.
  • You can resize the box by grabbing one of the "handles" on the box and moving it appropriately. If you grab one of the corner handles, you can resize the height and width at the same time, pressing the Shift key constrains the proportions.
  • You can move the box by clicking around the edges of the box or clicking the text, and while holding the mouse button, move the box where you want it. If you click in the center of the box, it is de-selected. This is to make it easier to select and position controls in the box.
  4. Set the Properties for the Group Box as desired
  • Position - Sets the position of the box in the schematic. You can drag as needed, or enter specific coordinates.
  • Size - Sets the size of the box.
  • Fill - Initially, the box is transparent. The Fill changes the color of the background. Click the color sample in the Fill property to select from a panel of colors, or click the eyedropper then click an item in the Schematic or layout window having the color you want to use. After changing the color, you need to set the transparency of the background with the slider at the bottom of the color pallet.
  • Corner Radius - Initially, the box has a corner radius of 8, you can have a radius up to 300.
  • Stroke Width - Initially, the box has a border or stroke width of 1, you can increase the size up to 64.
  • Text Color - Sets the color of the text using the color pallet.
  • Size - Changes the font size (in pixels) for all text in the Text Block. The range is 6 to 64.
  • Weight - Changes the font weight: Bold, Normal or Light for all text in the Text Block.
  • Horizontal Alignment - Aligns the text horizontally in the Text Block: Left, Center or Right.
  • Vertical Alignment - Aligns the text vertically in the Text Block. Bottom, Center, or Top
  5. Select the box and start typing to add text to the box. You can change any of the text Properties after adding the text.
  6. To add another Group Box, click the and repeat the steps above.
• Selecting a Group Box can be accomplished in one of the following ways.

  

  • Click close to any of the outer edges of the box.
  • Click and drag a 'selection box' around the box.
  • Click the Group Box text.
• Editing text in a Group Box is accomplished by:



1. Double-click the text in the Group Box.
2. The text in the Group Box is selected. If you start typing, the text is replaced with what you are typing.
3. You can click again at the point you want to make edits and add or delete as necessary.
• Adding objects to a Group Box.

  

  • Objects pasted or dragged into a Group Box are not connected to the box, but in front of the box. If you select only the box and move it, the objects do not follow the box unless the box and all the objects are selected.
  • You can add controls, text, lines, headings, and boxes from the Control Panels of Q-SYS Components by either dragging, or copying/pasting them into the box area.
  • You can add graphics from other applications by copying and pasting, or dragging them from the other application into the box area. One or both of these methods may not work with all applications.

NOTE:  When you add graphics to a UCI, the images are scaled down for the Panel Type as set in the Properties of the UCI. The images are never scaled up.

Deploying User Control Interfaces

There are several ways you can display a User Control Interface for use:

• Q-SYS TSC-8 and TSC-3 Touch Screen Controller - refer to the instructions in the TSC-8 and TSC-3 Touch Screen topic.
• Q-SYS UCI Viewer for Windows - see below.

• Apple iOS - Go to the App Store search for QSC.

  • iPhone, iPhone 6, and iPhone 6 Plus
  • iPad, iPad Mini

Q-SYS UCI Viewer for Windows

Install the Q-SYS UCI Viewer on the Windows PC that will be used to view the UCI. Follow the instructions in the installation program. You can download the Q-SYS UCI Viewer from the QSC website as part of the Q-SYS Software download.

Start the UCI Viewer by clicking the UCI Viewer icon.

UCI Viewer Status/Control Component

The UCI Viewer Status/Control component allows you to control various aspects and see the status of a UCI when a UCI Viewer client is associated with the UCI.

Related Topics