TouchDesigner | Buttons for Interfaces

Building any system that requires an operator who isn’t the system designer often involves creating a control panel to operate the patch or network in question. A control panel can also be useful for controlling various elements of a system that might otherwise be too complicated to manipulate directly.

In TouchDesigner one of the handy built in components that you might think about using is a button. Buttons have various states of operation that offer different types of control. Let’s star this process by looking at some actual buttons in TouchDesigner so we can see some how these work in practice.

Lets start by creating a new network, and deleting the template operators – if you’re new to touch you can draw a rectangular selection by clicking and dragging with the right mouse button. Select all off the operators and hit delete or backspace. You can also close your palette browser. You should now be left with an empty network.

To get started we’re going to double click the empty network or hit TAB on your keyboard. This brings up the Operator Dialog window. Make sure that you’re in the COMP (component) tab of the dialog window, and select a “Button” from the “Panels” column.

Place this button anywhere on your network. If we look at the parameters of this component we can start to get a sense of how it works, and how we can customize its operation for whatever you might be designing.

Looking at the parameter window we can see how this component is organized. This component has several tabs of parameters that all relate to different types of functions and methods for manipulating the button. Below is a quick summary what each tab deals with:
The Layout page gives us the ability to manipulate how the button is placed and represented on the control panel itself.

• The Panel page gives us some control over how the button behaves in the panel.
• The Button page allows for manipulating the kind of button operation methods.
• The Color page allows for some alteration in the color of the button.
• The Drag page controls the drag and drop behavior of the button.
• The Common page controls for some of the higher order mechanisms for this component – for now we don’t need to worry about this page.

To learn more about the Button COMP make sure that you look at Derivative’s documentation here.

Before we move on, let’s open up our control panel so we can see what our button looks like, and where it’s situated. In the upper left hand corner of your network there’s a small square shaped button. Mousing over this button will reveal the help text “open viewer.” Clicking on this button will bring up the panel viewer for the container that you’re working inside of.

Clicking on your open viewer button should mean that you see something like this:

At this point you should be able to click on your button in the viewer. To help us understand what’s happening with the button itself let’s attach a Null to the CHOP out from the container. In your network add a Null Chanel Operator (CHOP). Attach this to the CHOP out from the button (you can tell that it’s a Chanel Operator Out because of the color). With the null attached, now when we click on our button in the viewer we can see what kind of signal is being generated by this button component.

Before we take a closer look at button modes, let’s first see how we can position our button in the viewer. First select the button component to bring up the parameters window. Here on the Layout page we can see X and Y as variables that we can manipulate. These allow us to change the position of the button. The values for X and Y are in pixels. For now, I’m going to leave my button in the bottom left corner.

Next lets take a look at the Button page for this component. Two of the most commonly used states for buttons are Momentary and Toggle. Momentary transmits a signal as a pulse. Clicking the button sends an on, releasing the button sends an off. A toggle enables a button state to be activated or deactivated. In this case, clicking the button toggles it to the on position where it stays until you click the button again sending a signal of off. There are additional button types to choose from, but for now these two different types will help us enough to work through some basic ideas about how you might use and change a button. I’m going to leave my button set as a toggle down for now.

Now that we have a basic understanding of how this component works, lets start customizing it’s appearance. To do this we need to dive inside of our Button. We can do this by zooming in with the scroll wheel until we dive into the component, or we can select the button and hit the “i” key on your keyboard (i in this case is a shortcut for “in”).

Inside of our button we can see the Chanel operators, Texture Operator, and Data Operator that are driving this interface element. One of the most interesting elements to take a note of us the panel1 CHOP. Here you can see that TouchDesigner tracks several different kinds of interaction for our button. We can trigger actions based on the state of our button (is it on or off), the rollover position of our mouse (is the mouse hovering over the button), and if the button is being actively selected (the moment when the mouse button is being actively clicked).

Let’s start our customization of this button by first looking at the Text TOP (Texture Operator). If you click on the text TOP labeled “bg” we can see the parameters associated with this TOP. On the first page we see “Text.” I’m going to change the name of my button here to “Play.”

Next I want to adjust the color of this button. Before we do that, lets first draw our attention to the fact that our button changes it’s color depending on if we’re mousing over it, or have turned it on or off. A closer look at the Text TOP and the associated DAT and CHOP we can see that something very specific is happening. An expression CHOP is watching the button and reporting out the state of our button as a variable called “i” which is then being used by the DAT to dynamically change the color of our button. The table DAT defines what color values should be used for the button in the states: off, on, rollover, rollover on. If we want to keep the established convention of different colors for different states, we then need to edit the table DAT rather than the text TOP.

Let’s start by zooming into the table DAT. We can see here that we’re only using a single color value here for the dynamic content. This means that our options for changing the color of the button right now are only limited to gray scale. Bummer. Let’s make some changes to our table so we can have some color. To do this we’re first going to make our DAT active by clicking on the small + sign in the button right corner of this operator.

With this DAT in active mode we can now edit the table. Color values for our Text are generated off of three different numbers – values for red, green, and blue. We’re going to add two more columns and change the name of one column so we can use three different numbers to generate some different colors. With our DAT active, right click on the column labeled “background” and select add right. Repeat this step so that you have two empty columns to the right of the background column. Next let’s edit the text in the “background” cell, changing it to “bg_r.” In the columns next to this one add the names “bg_g” and “bg_b.” This is going to break our button for a moment, and that’s okay, don’t panic. You should now have a table that looks like this:

For now copy from bg_r to the other columns. Now your table should look like this:

Next lets fix our text TOP. Click on the Text TOP and then click on the Color page. On this page we can see that our values for the background color are all 0s and in red, telling us that something is broken. If we click on the text “Background Color” on this page we can see the expressions driving the dynamic changes for this TOP.

Next we’re going to edit the text in these expressions to account for our new columns in table DAT. We can see that there are three fields that correspond to our bg_r, bg_g, and bg_b with bgcolorr, bgcolorg, and bgcolorb. We’re going to change only the last reference in the expressions in these cells to represent the changes in our table. What we’re after here is to make sure that:

• bgcolorr is looking at the bg_r
• bgcolorg is looking at the bg_g
• bgcolorb is looking at the bg_b

We’ll do that by changing the term “background” in the expressions to match the columns that we’ve added.
Our edited expressions should look like the following (your button should be working again):

Now we need to change our table DAT in order to generate the colors that we want for our button. To help me determine the float values for the colors that I want, I’m going to add a constant TOP to the network momentarily. With my constant added to the network, I’m click on the white rectangle to bring up the color selector. This window will also give me the float values that I want to know so I can edit my table.

After a little bit of exploring I’ve found some colors that will work as a place to start. My resulting table DAT looks like this:

We now have a Button that we’ve given a unique name to, and made changes to a table DAT so that we can see a custom set of colors on our button that dynamically change as we operate our control panel. Now that we’ve made one, try making some buttons on your own.