ShowTouch Panels

So far, we’ve been talking primarily about the way systems interact with each other. The show controller interacts with all of the other systems in your design, but it also frequently interacts with something much more complex than tech systems – humans.

Whether you call them HMIs (Human Machine Interfaces), GUIs (Graphical User Interfaces), or just touch panels, these are the way your humans interact with the show control system for managing the functions it provides on their behalf.

Before we get started, let’s talk a little bit about how you interact with ShowTouch. Designing ShowTouch panels is done in WinScript. RUNNING ShowTouch panels are done in ShowTouch, and ShowTouch is available for iOS (both iPhones and iPads), ShowTouch panels (sold by us), and both Windows and Mac desktop/laptop computers (including the full-scale Windows tablets like the Surface and others). It will not run on Linux or Android (another excellent Tiki Teria conversation if you’re curious).

In older versions of WinScript, ShowTouch was a separate piece of software. Based on user feedback (including our own internal engineers who do eat their own dog food), it was moved into being an integral part of WinScript allowing for a much more harmonious workflow for creating user interfaces. We’re going to walk through the user interface for creating user interfaces (very meta) and create a couple of example touchscreens together. Then, you’ll get a chance to try it on your own in the labs. We are known to occasionally give prizes out for outstanding creativity on this portion of the show control course when we present training in person, so show us what ya got!

From the left Resource menu (or the Resources menu at the top), choose “Panels”. This is the starting point for creating panels.

The first thing to know is that panels are resolution-dependent. You need to know what type of device you’re designing for – are you going to be controlling this using an iPhone, an iPad, a ShowTouch device, or some other type of tablet? That will give you an answer on what resolution to design for. Think about the finger size difference between designing for a 5” iPhone screen vs a 17” ShowTouch industrial panel. There’s a lot of real estates to work with on the larger size, less so on the phone touchscreen, particularly when you want to be sure they’re pressing the right buttons!

When you start a New Panel (or edit an existing one), the first question it’s going to ask you is “What size device are you targeting?” The default is a ShowTouch 10, which is a 10” industrial PC that we sell that’s purpose-built for ShowTouch. They’re rugged, reliable, and just like everything else we do, designed to last a long time. You can choose any flavor you like, and you can have multiple panels available on your controller depending on what device connects – so you can have one set of panels for phones when they connect to control and a different set of panels for a ShowTouch or tablet size display.

Let’s start out with the ShowTouch 10 for now so we don’t get too squished in working for a phone display. Next, you’ll select whether you’re working in Landscape or Portrait mode. Because the ShowTouch devices are 4:3 monitors and not 16:9, the difference isn’t vast, but you’ll want it to look right. We’ll start with Landscape. You can name your panels for ease of use later – they come with a default name but when you’re trying to choose between a variety of panels, clarity is beneficial. On the Options page, you can see there are options for an Unlock Code, handy if you want to prevent everyone from accessing the panel or restricting to maintenance or admin staff. There’s also a field for you to add a second controller’s IP address if you are using redundant controllers. We’ll leave those blank for now.

Once we have it created, let’s double-click on it and we’re taken to the Home Page. The default look is a black and red color reminiscent of the Alcorn branding. Before we add any content to these pages, it’s important to spend a few minutes talking about planning.

When designing a user interface, it’s important to take off the programmer’s hat and do not think about all the things you know about the system and how excellent and perfectly it’s programmed. You have to put your user hat on and assume you know only what you were trained about the system (and several generations of training down the line – like Telephone, some fidelity is lost when users train the next set of users). Your user interfaces, therefore, need to be intuitive and well-considered so that you don’t need a user manual for them. That includes a selection of buttons, text, navigation, etc. Like web design, innovation can be wonderful – but often not beneficial for users. Use existing designs as inspiration, if possible, as users will already be familiar with those, and if not, think KISS “Keep It Super Simple” (or other less-kind flavors of the same).

Each “panel” can have multiple “pages” – think of panels as the whole interface for a chosen device and pages as each individual screen that’s presented to a user on that device. You can swap from page to page easily – but changing panels is not something you want to be doing consistently.

While we’re talking about pages, let’s look at how we create those. This page gives us a way to talk about the architecture of ShowTouch pages and how each type works for you to choose the right one.

A normal page is called a “Touch” page because it’s designed to be touched as part of the interaction. Occasionally people will design Touch panels to be used with a mouse, but it’s primarily a touch-based interface system as that’s how most installations go. The vast majority of pages you will create are Touch pages.

Next up are Overlays. They’re exactly what they sound like – either the whole screen or partial screen overlays that you can use to keep elements consistent from page to page. You can use this to support branding to make sure each page looks the same or to have a consistent menu for navigation from page to page. Just keep in mind it’s an OVERlay, so anything that exists on the overlay page will go over the top of whatever’s on your page (we’ll see how this works in a few minutes).

Web pages will load a web page, either from your controller (for those devices with web serving capabilities) or from any other device accessible on the network and render it in the interface. This is useful for displaying user manuals or accessing intranet resources where appropriate. Be sure to test on your target device to make sure it works as expected and that the resolution will support seeing all the things you need to see).

Log is a special type of page that shows the information from the Live Log on the touchscreen. There are a few options you can select – choosing which watch list to display/highlight, whether to log all sequence status or not, logging event errors or not, and highlighting particular text (if you want to have a special keyword that draws users attention for action like “Preventative Maintenance” or “Failure”, for instance).

On the appearance tab, you can select a font – just make sure it’s a font that is available on your target device (or leave it at the default). You can also customize the color that the Log Messages event’s custom colors show up as here so you can help your users determine whether they need to focus on the information they’re receiving, or you can filter by subsystem, etc.

The final option is a Slide Show, which is most often used for putting up excellent pictures of Cats and Dogs – Okay, maybe that’s just us. It’s often used to have a screen saver which will automatically start running after a pre-set amount of time and scroll the images selected to give some branding opportunities or just something to keep the display interesting.

We already have our Home Page, but let’s add a page here so we have something to play with. Let’s call this page “Audio” for our audio controls.

Just like when we created our panel, we have the ability to select a resolution and choose a lock code for this touch page. We can choose a background from the available provided images or we can create our own and choose it from the navigator. If we click on the Touch Graphics Library, we get to the 4 default libraries included with ShowTouch. There are a HOST of other libraries available on our website for download if you’re looking for inspiration or something fun! I’m going to go with Clear – then choose the appropriate resolution (we’re using a ShowTouch 10), then choose Backgrounds. I have 3 choices for the ShowTouch 10 in this library. This blue ribbon is nice. Let’s use it.

By default, our ShowTouch panel comes with a “Home” button created for us. That’s helpful, but it’s HUGE and right in the middle of the screen. Let’s move that. Oops! Where did it go?

Important note about ShowTouch. The buttons are LIVE while you’re working on them. If I click a button, and it’s attached to an event, it will run. I can click and drag it, but if I just CLICK it – it’s going to do whatever the action assigned to it is, which in this case is going back to the Home Page. The list of pages is visible at the bottom, so I can go back to my Audio page now. Now, I can click and drag it into the bottom corner. It’s also too big, so let’s resize it too. That’s better.

Now you’ll notice I can’t get it to align to the bottom of the screen based on my new size. The grid is helping me to make sure everything aligns nicely, but the grid spacing is a little too wide for me to get the accuracy I want. If I click on Set Grid Snap up here in the top menu, I can adjust that. The default is 40, but let’s try 10. MUCH better granularity. I can always jump back and forth between grid sizes. I can also turn the Grid Off if I don’t prefer to use it at all.

Okay, so right now this page is super boring. I’ve got a few audio sequences that will liven it up though. This script has a QSys core and an AV Binloop in it, and I’m going to use the AV Binloop to send some audio over Dante to the QSys core to play some music in our virtual environment here. Audio playback commands will go to the AV Binloop; speaker mutes and volumes will go to the QSys core.

Like many shows, we already have chosen our media, so we just need to give our users the ability to play, pause and stop and then control the volume and mute the audio when necessary. So let’s get to creating an interface for this.

There are several ways to create a new item on the page. There’s a list of new item types over here on the far right. I can drag from this list into the designer and it will create a new item of that type for me. I can also right-click on a blank spot in the designer space and choose the item type I want to create. I need a button for Play, Pause and Stop. Let’s start with Play. If I right-click this new big button I’ve got, I have a choice between Edit Action and Edit Appearances. I’m normally a function over form guy, but user interfaces are all about aesthetics, so let’s get the look right first.

I can choose to go with a Text-based button (like the default) or I can choose an icon to display – or I can have both. The built-in images include a number of default icon types that are appropriate for many media-based projects. Let’s see what we’ve got. We’re using the clear library for ShowTouch10, and here are a whole lot of buttons. Notice there are TWO types of each icon – the difference is the “pressed” vs “un-pressed” to allow you to highlight the state when the user’s finger is on the button. Right now, we’re in the default state of unpressed, so we want the unpressed PLAY button. There it is.

So now the text is trying to place over the top of this. I can move the text around with the x and y relative coordinates if I want to keep the text, or I can just remove it entirely. I can change the colors of the text to make it more readable (keeping in mind where I’ll be placing this on the background) and I can change the font (again, keeping in mind that the font will need to live on both systems – where I’m developing and where it will actually run – and don’t forget, many fonts are licensed per install!). We also need to change the “Pressed” version of the button, otherwise, we get something like THIS when we click it! You can preview your button’s behavior right here on the screen so you know you’re getting the style you want.

If I like the style of this button and want to use it as the default going forward to save myself time, I can do that by clicking this button at the bottom. Now when I create a new button, I get that same style and text. I can change my text and my button’s icon, and really quickly I have Play, Pause, and Stop buttons.

Right now, they don’t do much though! Let’s remedy that. In our right-click context menu, we have another option called “Edit Action.” We definitely need more Action out of these buttons.

On the Action page, we have access to our Sequences, all our ShowTouch pages, specific variables, and outputs. Some touch control types will have specific limits to the type of functionality they can control or behavior they can induce. This page will always point you in the right direction. For the play button, we’ll choose to play audio. For the Pause, we’ll choose Pause and for the Stop, we’ll choose Stop.

OK, cool! We’ve got buttons that will now run our 3 sequences. Like we learned earlier, sometimes to STOP something, we have to START a sequence, and that’s what we’re doing here. Ditto for pause. That way, in case we need to handle any interim states or any functionality, we can manage that correctly. Otherwise, we’d just be sending native commands to an audio player, and that isn’t what a show controller’s job is about. We’re always involved in way cooler stuff.

Next, we need a MUTE button. Mute is a slightly different situation. We want to know what the current state of this is so that we never get out of sync with what the audio system is doing. Mute is a binary function – there are only two states, it’s either muted or it’s not. I’ve created a Boolean operator for us to track the state, and it gives us a chance to try out another kind of operator – the Toggle indicator. Toggle indicators are specifically designed to use with Boolean variables to represent two states – on/off, muted/unmuted, etc. They come in very handy. So I’m going to click on Edit Action again, and this time instead of assigning a sequence to the action, I’m going to choose from my Boolean variables – MuteState is the one we’re looking for. I can also choose from the outputs, as those are Booleans too, and it’s useful to be able to display those on the screen for users to know the state of them without being near the controller. The Mute Boolean is already attached to a sequence as a trigger, so anytime it changes state, the sequence runs to make sure that QSys is on the same page for whether the system is supposed to be muted or not.

The final control we need to add on this page is a volume control – and for that, we need a different control type. Volumes can be thought of in a number of ways, and it really depends on the target system’s approach. Some systems use dB, some use a scale of either 1-10 or 1-100. For QSys, we’re going to use dB and limit it to a scale of -55 to -5. This prevents users from ever setting the volume higher or lower than we want them to. Since we only have a 50 dB of range, we’ll put in 50 steps here so that it’s always an integer value. If we wanted more granularity, we could add that here. We can also add a Text item to the screen so that users can see the volume to make sure they get the value they’re looking for. And now we’ve got a quick user screen for managing the audio page. So let’s click back to home and …

We’ve got nothing. No way to get to the Audio page. Hmmm. How do we fix that? We want to keep the style of navigation buttons the same. So let’s jump back to the audio page, copy the Home button we just used and paste it onto the home page. Right now, it’s pointing to itself, so we have to fix that. If we right-click and go to Edit Action, we can choose the Audio page from the list of pages on the right.

If we only have two pages, managing the navigation menu is pretty easy. If we have a dozen pages, that gets unwieldy, particularly if we have to make a change. An overlay page makes this much simpler. Let’s make an overlay page for our menu and move our buttons to it.

Because we only want the navigation to be at the bottom, we’re going to make this only a portion of the page height at 75 pixels. The buttons will fit nicely in that width, and when we add Video, Lighting, and other control pages later. We’re going to cut the buttons from each of these other pages and paste them into the new navigation page. Now we need to add the Overlay panels to each of our pages and position them at the bottom so they can be there when we need them. Now, if I add another button for our future Video page, it’s automatically on both of our pages (surely you see the excellence of this invention?).

ShowTouch is a very powerful tool, and there’s a lot more to explore. Look for advanced topic ShowTouch classes online or come to our in-person classes. And don’t forget the labs, where you’ll get a chance to try it out for yourself. And as always, if you have questions or need help designing your fantastic creation, don’t hesitate to ask and please share your favorites with us!