UCI Design

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 UCI Design.
8. To add more pages, see Working with Pages.
9. To configure layering within a page, see Working with Layers.

There are two ways to add controls to a 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.

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.

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 Presentation 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 Presentation 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.

Note: Although page transitions do not function in the Q-SYS Designer Software preview, they do function within the HTML5 viewer in Core Manager.

Navigation Buttons

1.  In the Schematic Library > UCI Buttons category, 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 > UCI Buttons category, 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 > UCI Buttons category, drag the Log Off Button into your UCI page.
3. Configure UCI access in Q-SYS Core Manager. See User Control Interfaces in the Q-SYS Core Manager help.
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 > UCI Buttons category, 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 > Add Page 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

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.

You can add a layer to a single page, or create a shared layer that can be used across multiple pages.

Viewing, Ordering, and Deleting Layers

• To view the layers within a UCI page, click the drop-down arrow next to the page name.
• Click or to move a layer. Content on higher layers displays on top of the content on lower layers.
• Click to delete the selected layers. You can delete a layer from the left pane regardless of its visibility or lock state.

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.
  Notes

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

  • 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 more information, see Uci.

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
Style	Select a CSS style to apply to the UCI. See Design Resources.	User Defined
Panel Type	Select an iOS or TSC touch screen device, a generic aspect ratio, or a custom size. Custom Select an Orientation, Horizontal Resolution, and Vertical Resolution. Generic Aspect Ratio Select an aspect ratio and Orientation. Generic 16:10 Generic 16:9 Generic 4:3 iPad and iPhone Select an iOS device model and Orientation. iPad iPad Mini iPad Pro 12.9, 10.5 iPad Pro 9.7, Air 2 iPhone iPhone 11 Pro, X, Xs iPhone 11, 11 Pro Max, Xs Max, Xr iPhone 5 iPhone 6 iPhone 6 Plus iPhone 8, 7, 6s iPhone 8+, 7+, 6s+ TSC Touch Screen Select a QSC capacitive touch screen model and Orientation. TSC-116-G2 TSC-47-G2 TSC-55-G2 TSC-7 TSC-80-G2	(Multiple)
Orientation	Set to the orientation of the screen used to display the UCI. Note: When installing a touchscreen in portrait orientation, the Orientation property in the UCI Properties and the Status/Control (Touch Screen) component must both be set to 'Portrait'.	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. Note: When Private mode is enabled, you will still be able to view this UCI on Q-SYS touchscreen controllers, the HTML5 UCI viewer in Q-SYS Core Manager and Enterprise Manager, and within Q-SYS Designer.	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)

Control Properties

To 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.

See Graphic Tools.

See Design Resources.