By now you’ve almost certainly heard of Widgets. They’re the new UI kit and system that was added to TouchDesigner over the course of the last year. It’s not only important now, but even more important for the future of TouchDesigner. A lot of the features you know and love have secretly been driven by widgets, such as bindings and improvements to how you can automatically layout and resize COMPs. They can be hard to get into because they’re both new / uncharted territory and have some unique aspects to their workflow. Let’s dive in!
“Fill” isn’t a dirty word!
In most of my years as a professional TouchDesigner developer and consultant, I’ve always cringed when someone told me to set something to any kind of fill mode. It doesn’t matter if it was a texture or sample count in channels, I’d be hesitant to “just fill or stretch it” and would always lean towards explicitness. With TouchDesigner widgets, I’ve had to put that behind me, because one of the strongest aspects of widgets is their ability to dynamically resize themselves based on different factors.
A lot of this comes from the fact that Container COMPs and Widget COMPs (which are based on Container COMPs) have a great new parameter called Horizontal Mode and Vertical Mode. This allows you to disregard the old way of having to either define strict pixel values or setting really lengthy Python expressions that would try to calculate it for you. You can still do that if you’re really into that, but you can also now use the Fill mode of it, which will automatically resize the widget or container to match the size of it’s parent. You might be thinking “Elburz, that sounds basic…” and you’d be right to think that. The secret magic comes into play when you start having multiple items set to Fill in the same container: they intelligently divide the available space equally between each other AND automatically take into consideration spacing and margins if they’re set on the parent container. You think this sounds still basic then you’ve obviously never needed to build a real UI quickly. Look at this gif below and tell me your mind isn’t slightly blown:
Trust the parameters
TouchDesigner is the environment you know and love to get your hands dirty in. We’ve all had our own moments where we realised we could build and tweak anything to our hearts content. While that’s still the case, widgets are an attempt to add a more plug-and-play aspect to TouchDesigner. In the future, the widgets are going to grow into more advanced UI elements with enough features to allow you to prototype whole apps without needing to do too much heavy lifting. We’re not there yet but there are some new thought processes that should be adopted when working with TouchDesigner widgets. One of the those is that you should not go inside the widgets and mess around to your hearts content. While you could do that, you would lose a lot of the value of the widgets.
One of them being that a lot of work was put into creating and organizing extensive custom parameters that let you control just about anything (almost) that you might want to control for that particular widget. There are parameters for all the colours, the text, the labels, how the values work, running Python scripts on certain actions, and much more. In my experience, there are very few things you’ll need outside of the available custom parameters, and if there’s something missing, you were probably needing a custom UI built from scratch to being with.
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.
Another thing that you’d lose is the ability to update your widgets over the life time of your projects. If you’ve ever used TUIK or built your own UI elements, you’ll have probably encountered an update to TouchDesigner that either broke your UI element or had a feature that you wish would automatically appear in your UI. In both previous cases, it was left up to you to figure out. Widgets take a different approach. They are versioned and get updated in the palette with each new update to TouchDesigner, so you’re likely to find new features or bug fixes in the actual widgets themselves. If that wasn’t useful enough, widgets ship with an automatic (but not mandatory!) update system. You can drag into your project a copy of the latest BasicWidgets component from the palette, hit the update button, and it will magically run through your whole project, find all the widgets, and update them without changing any of your custom parameters or layouts. I’m excited to take advantage of that and save myself some valuable dev time. BUT…if you were to go into the widgets and start adding your own nodes or changing scripts, then the automatic updating would either fail or wipe out all of your customizations. That’s why it’s important to trust the custom parameters!
Wrap up
As TouchDesigner widgets pick up more and more steam and get used in the trenches by pros, I’m certain they will become the new defacto way of making UI’s. There will be folks who still need to make totally customized UI’s, and for those folks the methods of using Container COMPs and Panel CHOPs still exists. For the rest of us, it’s nice to know there’s an easy way to quickly make functional and aesthetically-pleasing UIs. Hopefully these 2 tips help you get up and running with TouchDesigner widgets and exploring this new direction for the software. Enjoy!
