Video Transcript
UCI Customization
9m 7s
0:08
Now that you know the basic steps of creating and managing a UCI, it’s time to add some real content to it.
0:15
You’ve seen that we can add controls from the Schematic into the UCI,
0:18
by either dragging those elements or copy-and-pasting them.
0:23
It’s important to note that you can’t drag a component itself into the UCI, you have to add its controls
0:30
and you can add as many or as few as you like.
0:32
All of your Graphic Tools also work in the UCI.
0:35
So, you can create Text Boxes for example… Headers… Group Boxes… and Polygons…
0:44
If you’re unfamiliar with these tools, check out our Software Overview videos.
0:49
The UCI Editor has a collection of clean, professional fonts,
0:53
each of which have a variety of styles for you to choose from.
0:57
When choosing colors for an object, our unique color picker allows you to select a hue from a color wheel,
1:04
adjust brightness and saturation here, or you could input direct RGB values or hexadecimal color codes.
1:13
Colors that have been used recently will be found in the “Design Colors” tray for your convenience.
1:19
When it comes to customizing buttons themselves, you’ve already seen most of the ways that you can adjust
1:24
a button’s size, color, label, and icon. But, I also want to show you this property: Button Style.
1:31
By default, most buttons have the Gloss style, which gives you a faint highlight in the top third of the button.
1:39
You could choose Flat to keep a single solid color, or … you could select “Image.”
1:47
This allows you to import your own custom graphics and completely replace the button with your own images instead.
1:54
A button has a few different states
1:56
an on state and an off state,
1:59
as well as the “pressed on” which is visible while you are still pressing the button to turn it on,
2:04
and “pressed off” which is visible while you are pressing the button to turn it off.
2:09
You can also add external images into your UCI just for aesthetic purposes.
2:14
You can add PNGs, JPEGs, SVG files, you kind of get the picture.
2:19
Don’t bother looking for an “import Image” button, because it’s even easier than that.
2:23
Simply drag an image file from a file browser into the UCI Editor.
2:28
Objects that have transparencies such as PNGs will retain those transparent sections in your UCI.
2:35
You can right click on an object and select “Bring to Front”
2:38
or “Send to Back” to change the object’s location in z-space.
2:42
In fact, if you place an image on top of a button, the button will retain its functionality,
2:49
since the image itself isn’t interactive.
2:51
This lets you create some pretty great custom effects by using graphics with transparencies.
2:56
For instance, if you have access to the groundplan or a 3d model of your venue,
3:02
some simple manipulation of that image with a graphic editor could add transparent sections.
3:08
You could then create an interactive map for things such as quick controls for geographic areas of the venue…
3:14
zone selection for PA announcements… or a customized Room Combiner interface...
3:20
All of these involve a single image that is simply placed on top of standard Q-SYS buttons and polygons.
3:26
By the way, as you add images to the design, they’re saved as part of your Q-SYS file,
3:31
so don’t worry about losing these links when you move them around – they’re actually embedded in the design.
3:38
As we talk about adding images, let’s also talk about image size.
3:42
Different touch screen models have different pixel dimensions, some of which you can see here.
3:48
There would never be a reason to add an image greater than the pixel size of the screen you’re displaying it on.
3:55
In fact, if you add really large graphics to your UCI you may even see a decrease in the screen’s performance,
4:02
because the system has to refresh that image a lot of times per second.
4:06
Even if the graphic is in a compressed format,
4:10
the Q-SYS Core has to uncompress that file to deliver it to the touch screen,
4:14
so don’t bloat your design with super hi-resolution images, especially if you’re using a lot of them.
4:20
Once you start adding lots of things to your UCI, like we have, you can see that we’ll need a way to organize it all.
4:27
Aside from using multiple pages, which we saw in the previous video, there are a lot of other tools at your disposal.
4:35
You may have noticed that there’s no grid to snap objects in place,
4:39
but you can add your own custom guidelines by double-clicking in the margin on the left or top.
4:44
You can then snap objects to these guidelines to make sure they’re aligned.
4:49
To remove a guide, you can drag it into the top-left corner, or right click and select Clear Guides.
4:56
You also have a number of quick organizational tools in the right-click menu.
5:00
If you select a couple of objects and right-click,
5:03
you can quickly “Align” them all on the same horizontal or vertical line,
5:08
you could “Distribute” them to give them even spacing,
5:11
or “Pack” them to stack them right next to each other.
5:15
You could also save on screen space by using Pop Up Buttons.
5:20
Pop Up Buttons can be found in the Layout branch of the Schematic Library.
5:25
When you add one to your UCI and interact with it, a hidden window pops up.
5:32
You can adjust the size of this window...
5:35
or which side the pop-up is docking to… as well as the color of the window
5:42
Then you can add as many controls as you like to the pop up area,
5:46
and when you tap the button again, they will automatically hide.
5:50
This lets you give the user quick access to lots of controls that would otherwise clutter up the page,
5:57
without forcing them to navigate to an entirely different page.
6:00
As you learn more tools, you’ll probably see the value in combining them together.
6:05
For instance, if we use a popup button in conjunction with our transparent groundplan image,
6:12
you could make an interactive page that gives the user access to a variety of controls for multiple areas,
6:17
such as gain control and amplifier status, all on one screen.
6:21
Next, let’s talk about Layers.
6:24
If you expand your Page branch here in the UCI Editor, you’ll see that we’ve been working on Layer 1.
6:31
You could add new Layers to your Page by pressing the Plus icon and selecting “Add Layer.”
6:37
Each Layer is sort of like a pane of glass you can stack all these layers on top of each other
6:43
and see right through them to the layers beneath, all on the same page.
6:47
You can also expand the Layer branch and see a list of all the objects on that layer.
6:52
Here we can see the images, buttons, and graphic elements that I’ve added.
6:57
I’ll select my new layer, and add some content from the Schematic onto Layer 2.
7:05
Right now it may look the same as if I added them onto the same layer,
7:08
but let’s dig a little deeper to see what Layers can do for us.
7:13
For every layer and object,
7:14
we could lock it in place using this box so that it can’t be moved
7:19
or toggle the Show/Hide button to make it temporarily invisible.
7:24
You may find it helpful to group similar controls together onto a single layer,
7:29
and then hide that layer so you can focus on other areas.
7:33
Or, you may want to add a lower layer that only has your background image,
7:37
then lock it in place so you don’t accidentally select it when moving other objects
7:43
You can also adjust the order of these objects with more finesse by either nudging them up and down
7:48
in z-space with these buttons, or by dragging them to a new position in the UCI Editor.
7:54
Be aware that every object of a higher layer will appear above every object in a lower layer.
8:00
When you use the “Send to Back” or “Bring to Front” commands,
8:05
this only moves that object to the front or back of the Layer that it’s on.
8:11
This lets you get really specific with the visual appearance of your design,
8:15
without accidentally sending objects behind the Background image.
8:18
One of the greatest advantages to using Layers is the fact that they can be programmed
8:22
to transition on and off the screen.
8:25
You’ll need to program these transitions using either the Lua text controller or the Block controller component,
8:32
which you’ll learn about in our deeper control learning curriculum.
8:35
Once you learn these commands,
8:36
you could use layers as subpanels that slide on the screen and off the screen…
8:42
or extra controls that can be revealed… and then hidden again… or,
8:46
any number of other creative implementations.
8:50
So, you’ve seen a lot of tools at your disposal to customize the visual appearance and functionality of your UCI.
8:57
In the next video, we’ll take a look at how you can deploy your UCI onto a touchscreen. We’ll see you next time.
Lesson Description
UCI Customization
9m 7s
Demonstrates how to customize a User Control Interface with custom graphics.
Tips and Definitions
UCI Customization
9m 7s
- Only Component Controls can be dragged into UCIs. You cannot drag the entire Component into the UCI.
- To create guides, click the top or left side of the UCI and drag inward.
Pop-up button: The Pop-up button is used specifically for UCIs. It provides the user with a collapsible window where user controls and status information can be stored and easily accessed.
You can download simple pre-built models here: https://3dwarehouse.sketchup.com/
Downloads and Links
UCI Customization
9m 7s