User Control Interface

By default, there are no UCIs listed with the exception of the system-generated Inventory Status.

To add a new UCI:

1. Select User Control Interfaces from the left-side pane.
2. Click and select New User Control Interface.
3. Select the new UCI (for example, "Interface 1").
4. In the right-side pane, under Properties, configure the UCI as desired. See User Control Interface Properties.
5. In the middle pane, select Page 1.
6. In the right-side pane, under Properties, configure the UCI page, including its Title. See Page Properties.
7. Add control elements to the UCI page to build your UCI. See User Control Interface.
8. To add more pages, see Working with Pages.
9. To configure layering within a page, see Working with Layers.

To add controls to a UCI page:

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. Modify control element properties and organize your design:
   • Select a control element to view its properties in the right-side pane. You can adjust an element's position, size, and other properties. For details, see Control Properties.
   • The Tools menu contains options for grouping elements, as well as aligning, distributing, packing, and ordering elements. For details, see Grouping Schematic Elements and Aligning Schematic Elements.
   • Add guide lines to assist with element placement.
     Adding guide lines

     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 guide line displayed across or down through the workspace. The guide line moves with the cursor, and coordinates are displayed as you move the guide line.

     • Double-click the cursor where you want the guide line to remain. Continue adding guide lines as needed.
     • To move a guide line, move the cursor over the guide line in the gray area then click and hold when the cursor becomes a double arrow over the desired guide line. 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.
     • To clear all guide lines, right-click in the gray area to the left or above the UCI area and click Clear Guides.
     • After setting your guide lines, you can use them to align items in the UCI.

Limitations

• 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. For more information about controls, see Using Controls.
• The Responsalyzer and RTA - Band-Pass components are the only components with a Response graph supported in a UCI.

You can add image files to a UCI in multiple ways.

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

Supported Image Types

You can add .png, .jpg, .jpeg, .gif, and .svg files to a UCI.

Methods

• Drag and drop: You can drag and drop (or copy and paste) an image file onto the UCI canvas from another application. (Not all applications support both methods.). This is useful for adding a background and decorative graphics to your UCI.
• As control button icon: You can place a custom icon image over a control button. In the control's Graphic Properties, set the Icon property to "Custom". For more information, see Control Style Properties.
• As button image: You can use an image as an entire control button (as opposed to an icon, which is an overlay). In the control's Graphic Properties, set the Button Style property to "Image". For more information, see Control Style Properties.

If you select None for the Tabs: Location property (see User Control Interface Properties), you need to provide an alternate navigation method 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 Q-SYS touchscreen (or in the UCI Viewer), which disables the display for 30 seconds to allow for cleaning. The Log Off Button will log off of the Q-SYS touchscreen if logging in is required.

Navigation Buttons

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.

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 Q-SYS touchscreen controller (or in the UCI Viewer), 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.

Adding, Deleting, and Re-ordering Pages

Use the toolbar at the bottom of the middle pane to manipulate UCI pages.

• Click to add a UCI page.
• Click to delete the selected UCI pages.
• Click or to change the UCI page order.

Copying and Pasting UCI Pages

• To copy or cut a UCI page, select the UCI page name in the middle pane, and then press Ctrl+C/Ctrl+X (or, select Edit > Copy or Paste.
• Select the destination UCI, and press Ctrl+V (or select Edit > Paste). The page now displays in the destination UCI.

Adding layers to your UCI allows you to separate items on your UCI page. When you create a page in the UCI, it will always have at least one layer by default.

Adding Content to a Layer

You can copy and paste, or drag and drop items onto the selected layer. For complete details, refer to "Arranging and Modifying Controls, Adding Text, and Adding Graphic Boxes" below.

To delete content, select an item and press Delete.

NOTE:  You cannot delete content from a layer when the layer is not visible, or when the layer is locked.

Viewing, Adding, Deleting, and Ordering Layers

• To view the layers within a UCI page, click the drop-down arrow next to the page name.
• Click to add a layer to the selected page.
  About layer names

  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.

• Click to delete the selected layers. You can delete a layer from the left pane regardless of its visibility or lock state.
• Click or to move a layer. Content on higher layers displays on top of the content on lower layers.

Hiding and Locking Layers and Layer Elements

• Click to hide or show a layer or an element within a layer. The icon indicates the layer or element is visible.
  Read more

  • 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.
• Click to lock or unlock a layer or a layer element. The icon indicates the layer is locked.
  Read more

  • 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.
  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”

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.

Property	Function	Choices
Title	User-defined name to uniquely identify the UCI. The Title does not display unless there is more than one Page for the UCI.	User Defined
Panel Type	Custom – Provides the option to manually set the Orientation, Horizontal Resolution, and Vertical Resolution. Generic – Provides three aspect ratios: 16:10, 16:9, and 4:3. In addition, you can manually set the Orientation. iPad and iPhone (multiple models) – All allow control of the Orientation. TSC-xx – Various QSC capacitive touchscreen models. All allow control of the Orientation. Touchscreen components are found in Inventory > Peripherals. See Touchscreen Status / Control.	Custom Generic 16:10 Generic 16:9 Generic 4:3 iPad iPad Mini iPhone iPhone 5 iPhone 6 iPhone 6 Plus TSC-116-G2 TSC-3 TSC-47-G2 TSC-55-G2 TSC-7 TSC-8 TSC-80-G2
Orientation	Set to the orientation of the screen used to display the UCI.	Landscape Portrait
Horizontal Resolution	Available only with the Custom Panel Type.	1 to 10,000
Vertical Resolution	Available only with the Custom Panel Type.	1 to 10,000
Tabs: Location	Available when there is more than one UCI page, and the Location Property is not "None". Gives you the option to select the position of the tabs used for navigation between multiple pages. If there is only one page, there are no tabs. NOTE:  If you plan to use Tabs, add them prior to adding any controls. When you add Tabs, the usable area for placing controls changes.	Bottom Left None Right Top
Tabs: Style	Available when there is more than one UCI page, and the Location Property is not "None". Gives you the option of Classic, or Chevron style tabs.	Classic Chevron
Tabs: Font	Available when there is more than one UCI page, and the Location Property is not "None". Determines the font used in tab text.	(Multiple)
Tabs: Font Style	Available when there is more than one UCI page, and the Location Property is not "None". Determines the style applied to the selected font. Available styles differ depending on the selected font.	(Font-specific)
Tabs: Font Size	Available when there is more than one UCI page, and the Location Property is not "None". Controls the size of the font for the tabs as displayed on the UCI.	6 to 64
Tabs: Stroke Color	Available when there is more than one UCI page, and the Location Property is not "None". Sets the color of the border between the tabs and UCI page.	(Multiple)
Tabs: Stroke Width	Available when there is more than one UCI page, and the Location Property is not "None". Sets the width of the border between the tabs and UCI page.	1 to 64
Swipe Disabled	Turns the Swipe function on the touchscreen on and off.	No Yes
Private	Set this to Yes to hide this UCI from the iOS and Windows UCI viewers. You will be able to view this UCI on Q-SYS touchscreen controllers connected to your Q-LAN network.	No Yes
Enable Button Swipe	Allows multiple buttons to be activated on a touch screen with a single, continuous finger swipe. As you swipe across multiple buttons, the buttons change state to match the state of the first button pressed. If disabled, each button must be pressed individually. Note: This option is not applicable when controlling a UCI within Q-SYS Designer or the Q-SYS Control app on Apple iOS devices.	No Yes

Page Properties

Each page you add has its own Properties.

Property	Function	Choices
Title	To identify a UCI Page. Displays as a tab on the left side, and only when there is more than one page. In addition, you can change the Title by clicking the Page listed under the UCI in the User Control Interfaces list. Click the Page, then click directly on the Title to edit it.	User Defined
Fill	Select the background color of each individual UCI page.	(Multiple)
Icon	Select an icon image to appear next to the page tab text. If your UCI only uses one page, no icon is displayed.	(Multiple)

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. For more information about inserting graphic files into a UCI, see Adding Images to a UCI Page.