The Problem with TouchDesigner UI

What’s the problem with TouchDesigner UI?

If you ever talk to an intermediate TouchDesigner developer, you’ll get a lot of the same complaints about User Interfaces (UI):

• “TouchDesigner UIs are ugly!”
• “They don’t make any sense and aren’t flexible.”
• “Ugh, I hate them, I’d rather do it in the web or something.”
• “They’re so slow and heavy on my project!”

Now while some of these might hold some weight, I’m about to let you in on a secret. The real problem with TouchDesigner UIs is you. Sorry! There are tons of high-end pros who utilize TouchDesigner for both front-end and back-end servers. Everything from world tours for huge performances to one-night events to permanent installation control panels. The difference between them and you is that they have a deep understanding of how UIs work in TouchDesigner. So here’s a few tips to help you conquer your UIs.

All hail the Panel CHOP

The first problem that most users encounter is not really understanding how all of the default TouchDesigner UI components work. These include Button COMP and Slider COMP, but include any interactive panel of any kind. The key to conquering buttons and sliders in TouchDesigner is knowing how the Panel CHOP works and that it controls most of the behaviour of the interface element you’re interacting with. Now that’s not to say that there isn’t a little bit of black magic behind each of the panel components, but for the most part you could basically take any panel component, and using the Panel CHOP you could transform it into any other type of panel. Seriously, I could create a Button COMP and within a few minutes have a kickass custom made slider. It really doesn’t matter that it’s a Button COMP at the end of the day because most things are derived from the channels of the Panel CHOP inside.

So how does a Panel CHOP work? Well it gives you CHOP channels that represent all the different kinds of interactions happening on the panel component referenced in its parameter. By default on the panel components like Button COMPs and Slider COMPs that you’ll create, they’ll be pointing at their parent (the button or slider itself). You can open a viewer on your UI element, and click and move around inside of it and watch the channels change. By default only a few of the channels are exposed, because most of the default panel behaviour is simple enough to be driven by this. That doesn’t mean you can’t just start enabling more channels in the Panel CHOP and add your own functionality. If you click the little triangle to the right of the Panel CHOPs channel selector parameter, you can see the full list of available channels that you can use to build your UIs.

I can’t stress how important it is to become comfortable with the Panel CHOP when working with TouchDesigner UIs. If you start to look inside some of the default UI components, you’ll see that they’re just a few Panel CHOP channels driving the whole thing! Taking control of those channels allows you infinite flexibility when working with TouchDesigner UIs.

Divide and conquer

A common mistake I see in beginner and intermediate projects is that they keep their really hectic UI inside the same process as their main rendering/processing/drawing. This is mistake number one as far as I’m concerned. TouchDesigner UIs can be hyper-optimized with some work, but they can be moved to external processes with even less effort. One method is to just copy and paste your whole UI, paste it into a new instance of TouchDesigner, then use Touch In/Out CHOPs or OSC In/Out CHOPs to send the data between the two processes. The whole thing takes about 1 minute to setup, then you can have as hectic an interface as you like and never worry about it messing around with your main project. Now it can be a bit more complicated than that and real life isn’t always so cut and dry. The nice thing is the process of moving to a new instance of TouchDesigner is the same as moving your UI to a new computer. For example, if your main rendering computer was under a lot of stress, you could get a cheap laptop or small form factor PC that could run the UI and send the data to the other computer.

A second super common addition to this is to use something like the Remote Panel components found in the Palette Browser (under UI -> Remote Panel). These allow you to have a UI in another process or even another computer, but see it and control it (with a little bit of latency) from your main TouchDesigner project. This is useful for those times when you might need to draw the UI on your main rendering box’s screen, but still want to offload the process to another process/GPU/computer. It only takes a few parameters to set it up and most clients can’t tell the difference between the Remote Panel and the native one.

Why are they so ugly??

While I agree that the default UI components aren’t beautiful, the greyscale buttons server their minimal purpose of being quick to drop in and use. But there’s good news. Just like anything in TouchDesigner, all of the UI component can be skinned to made look however you want. There’s no limit to what you can make a button or slider or list or panel look like. Whereas with UI behaviours I talked about knowing the Panel CHOP, skinning is all about being comfortable working with Container COMPs. At the end of the day, all of the UI components are basically just Container COMPs with some extra stuff added to their parameters or a few operators already added inside of them. So it’s logical that changing any of the looks is exactly like changing the looks of a Container COMP. This can be done by either on the COMP level by using the different parameters on the Look page of the parameter or you can assign a TOP as the background of the panel.

The latter is what most pros use, because it allows you to do everything from:

• Generate a UI kit to any aesthetic you like
• Import UI elements as textures and use them as panel elements
• Render interactive content per panel that feeds off of the value of the UI element and uses it as an interactive visualization for the panel (wut? u can do that?? I thot TD UI sux?)

You do this by setting the Background TOP parameter of the panel component. Once you start to take apart the black box of TouchDesigner UIs, you’ll slowly start to see that they’re exactly like any other components in your network. If you can make interesting content elsewhere in TouchDesigner, you can 100% make attractive and compelling UIs in TouchDesigner.

Wrap up: TouchDesigner UI Problems

I hope these few approaches and ideas will help you come to terms with TouchDesigner UIs. While they might not be as easy as UIs in other software, they are infinitely powerful and with a bit of extra knowledge and skills you can basically make anything with them. For more tips on navigating TouchDesigner’s UI, check out my TouchDesigner interface tutorial.