It can be easy to miss some of the exciting features that get released in TouchDesigner. One of the ones that is really exciting are the dynamic features added to components that allow them to scale easily with other elements of TouchDesigner’s user interface. UIs have always been a little bit tricky for many developers, especially considering you previously needed to use a lot of Python to make them scale. In this post, we’re going to look at some of these new features that you can dive into quickly and easily!
Set up
Before we dive in, let’s quickly setup a small user interface we can use for our testing. I’m going to make 4x Button COMPs and 4x Slider COMPs in my network:
Once we have our UI, we want to make all of the elements children of a parent container. We can do this by grabbing the top output of all the UI elements and plug them into the bottom input of a Container COMP:
Now we can see everything stacked on top of each other in the bottom left part of the container. Let’s dive into some magic!
Children Alignment
The first element of our automagic scaling UI is leaning into the children alignment parameter of the Container COMP. If you’ve never done this before, it’s incredibly powerful for quickly laying out a bunch of different UI elements together. We’ll start by setting the parent’s Children Alignment to Left to Right.
We’ll see this automatically puts all the UI elements from the top left back to back all the way to the right. We can even see that it pushes two of the sliders, which is not great. The key parameter that goes with the alignment is the Max per Line parameter. This allows you to truncate how many items are on each row before the alignment drops down to the next line. You can see how many cool variations of the layout this can make just by moving this parameter around:
When this parameter is set to 0, everything is on one row together. When it’s set to 1, there’s only 1 element per row, then it drops down to put the next item, and repeats until you’re out of elements. At 2 elements, you get 2 elements per row. Etc, etc, etc. We can already see how this could be useful in grouping elements together. Especially since we have 4 buttons and 4 sliders, we could set this to 4 items per line and have all our buttons on one row, and all of our sliders on another row.
We’re getting close to our scaling UI, but we’re missing one thing: the actual scaling part!
Filling available space
Now we’re finally at the new features! On the Layout parameter page of all of the Button COMPs and Slider COMPs, we have Horizontal Mode and Vertical Mode. These new features were added along with all the new widgets that were added recently. By default, these are set to Fixed width which means that TouchDesigner allows us to set the width and height of the UI elements. While that’s useful, a lot of the time we just want to fill all available space with our UI elements. Let’s switch this to Fill mode and we’ll something magic happen:
Once we set both of those parameters to Fill, TouchDesigner will automatically calculate the sizes of all elements. The cool thing about this is that TouchDesigner is smart enough to take into consideration the children alignment options. So all of a sudden, you could start adjusting your Max per Line and getting very nice automatic generated UI layouts:
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
This is really cool and useful. You can even change the alignment method and everything will resize perfectly. Another great aspect of this is that you can resize your parent Container COMP and everything will automatically adjust!
No matter how many more items you add or how you resize the container or how you choose to align the elements, the fill mode will auto-magically resize everything for you! That’s hot! Your work isn’t fully done here, as you may want to adjust the textures inside each UI element to match the new resolution, but that should be A LOT less Python intensive and hacky now with these features.
Wrap up
I’m really excited that we have features like this getting added to TouchDesigner. Sometimes they get overlooked by the more shiny features like nVidia Flex or Bullet Physics, but these are the kind of workflow enhancements that make working in TouchDesigner much easier on a daily basis. If you start using these core features when you’re building your user interfaces you can be sure that they’ll scale quite nicely up and down to fill available spaces in your panels without too much headache! Enjoy!
