UCI Design
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 touchscreen controller (TSC) panel, Windows-based PC, Apple iOS device, 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.).
You can deploy and view a UCI on several device types and viewers, including Q-SYS touchscreen controllers, UCI Viewer App (Windows), Q-SYS Control App (iOS), and Status/Control (UCI Viewer) in Designer. See Deploying User Control Interfaces.
Note: The deployment of a UCI is a licensed feature on certain Cores manufactured with Q-SYS 7.0 and later. For more information, see Licensing.
You can control access to individual UCIs with Q-SYS Core Manager. See User Control Interfaces.
- Select User Control Interfaces from the left-side pane.
- Click and select New User Control Interface.
- Select the new UCI (for example, "Interface 1").
- In the right-side pane, under Properties, configure the UCI as desired. See User Control Interface Properties.
- In the middle pane, select Page 1.
- In the right-side pane, under Properties, configure the UCI page, including its Title. See Page Properties.
- Add control elements to the UCI page to build your UCI. See UCI Design.
- To add more pages, see Working with Pages.
- To configure layering within a page, see Working with Layers.
There are two ways to add controls to a UCI:
Use this method to copy controls from components in your schematic into a UCI. This is the traditional method of building a UCI.
To add controls to a UCI page:
- Select the Page in the layout window to which you are going to add the controls.
- Open the Control Panel for one of the Schematic Elements in your design.
- 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.
- 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.
- 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. See Adding Guide Lines.
Alternatively, you can use the User Control Interfaces > Toolbox tab to add, name, and link controls and then script the UCI in the UCI Script tab. This method is useful for UCI portability – i.e., you can easily copy and paste the UCI into a new UCI. The new UCI retains the script and component control links, and you can re-link individual controls or modify the script as desired.
To learn how to use this method, see the UCI Controller [BETA] topic.
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.
For an .svg graphic to properly display in your UCI, ensure that you configure your graphics application to output an .svg file using the extents of the graphic itself instead of the "document" or "artboard" extents. Exported SVG images must have a width and height defined in the file. For example:
- Adobe Illustrator: Export the Asset, not the Artboard.
- Affinity Designer: Select the "Selection with background" or "Selection without background" options. Do not select "Whole Document".
- Figma, Sketch: Select graphics for direct output as .svg.
- Text editor: When viewing .svg code in a text editor, the "viewBox=" property should reflect the actual extents of the graphic element, not the document extents.
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.
Navigation Buttons
- In the Schematic Library > UCI Buttons category, drag the Navigation Button into your UCI design.
- 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.
You can alternatively add a navigation button by dragging a UCI page name into the editor for another UCI page:
- In Design mode, select "Page 1". The page displays in the UCI design area.
- In the left-side pane, drag the icon for "Page 2" onto "Page 1" in the UCI design area. A button displays with the label "Page 2".
- You can change the name by selecting the button and simply type a new name, or double-click the button and edit the name.
- You can change various Properties of the button while it is selected.
Polygon Buttons
- In Design mode, select "Page 1". The page displays in the UCI design area.
- Select the Polygon Graphic tool from the right-side pane.
- Draw a polygon in the UCI design area.
- In the left-side pane, drag the icon for "Page 2" over the polygon on "Page 1". A hover message displays that says "Assign page to region".
- Release the mouse button. The page you dragged on to the polygon button is now assigned to the polygon.
Clean Screen Button
- In Design mode, select the UCI page on which you wish to place the Clean Screen Button.
- From the Schematic Library > UCI Buttons category, drag the Clean Screen Button into your UCI page.
- 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
- In Design mode, select the UCI page on which you wish to place the Log Off Button.
- From the Schematic Library > UCI Buttons category, drag the Log Off Button into your UCI page.
- Configure UCI access in Q-SYS Core Manager. See User Control Interfaces in the Q-SYS Core Manager help.
- When the design is run, this button logs the user off. You must enter a logon password to gain access.
URL Button
- In Design mode, select the UCI page on which you wish to place the URL Button.
- From the Schematic Library > UCI Buttons category, drag the URL Button into your UCI page.
- With the URL button selected, in the component Properties, enter the url you wish to connect to.
- Run the design.
- Make sure the device (UCI viewer, or iOS device) used for this UCI is running and connected to the UCI.
- If necessary, select the page containing the URL button, and click the button.
- 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.
- Select a page name.
- Click > Add Layer to add a layer to the selected page.
- Add content to the layer – copy and paste or drag and drop items onto the selected layer.
You can create shared layers to easily share content between multiple pages. You add content to a shared layer the same as any other layer.
- Click > Add Shared Layer. The new shared layer is added at the Page level of the UI elements list.
- Add content to the layer – copy and paste or drag and drop items onto the selected layer.
- In the UI elements list, drag the shared layer name under the desired page names.
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 UCI Styles. |
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.
iPad and iPhone
Select an iOS device model and Orientation.
TSC Touch Screen
Select a QSC capacitive touch screen model and Orientation.
|
(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:
- Select the control. The Properties for that control display in the right-side pane.
- Change the Fill color, or any of the other Properties listed for the control. Depending on the style of control, different properties are available.
There are several ways you can display a UCI:
- On Q-SYS touchscreen controllers. See Status/Control (Touch Screen).
- In the Q-SYS UCI Viewer for Windows. Download the Q-SYS UCI Viewer from the QSC website as part of the Q-SYS software download. Read more
- 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.
- 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.
- On Apple iOS devices, including iPhone, iPhone 6, iPhone 6 Plus, iPad, and iPad Mini. Download the Q-SYS Control app from the App Store.
Note: 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.