The new experimental release of TouchDesigner brought with it a slew of exciting changes — a newly implemented Vulkan graphics API, high DPI panel rendering, native VST support, and the list goes on! One of the features in that list that may not have jumped right out at you is the introduction of a new TouchDesigner component operator: the Text COMP.
The Text COMP has been introduced as a replacement for the Field COMP, which enabled the addition of text or numeric data entry fields to user interfaces built within Touch. The Text COMP includes a number of new features which greatly expand upon the capabilities of its predecessor, allowing it to be used not only as an editable field for entering information, but also as a flexible tool for adding static text like labels to UIs. In this post, we’ll dive into several of the new features and what they mean for the future of creating UIs within TouchDesigner.
New Text Renderer
The Text COMP features the same new font renderer found in the Text TOP, which utilizes the Slug Font Rendering Library. Slug allows for high quality, resolution-independent text rendering on the GPU.
This is great news, because it enables access to text rendering that looks better at all resolutions, as well as more advanced text formatting/layout opportunities! The Text COMP’s default font size setting will automatically scale the font based on the DPI settings of the screen. Take a look at the difference when manually scaling the viewer size below. Both examples have an initial size of 100×20 pixels.
For another example of the benefits of the Text COMP (and the Slug library) in use, look no further than TouchDesigner itself. In the experimental version, both Widgets and TouchDesigner’s UI have been updated to make extensive use of the Text COMP — Widget fields and labels now use the Text COMP, as well as the dialogs, palette, main menus and timeline in the TouchDesigner UI. As you can see from the images below, this is a big upgrade!
The Text COMP introduces a number of useful formatting options. Unlike the Text TOP, styling can be applied inline, meaning we can apply multiple formatting options (like color and underlining) within the same line of text. We’ll dive into this in a bit.
One thing to point out is that the Text COMP only uses the new Slug renderer option. We don’t have the ability to choose between different text renderers like the Text TOP.
Types
Like its predecessor, the Text COMP offers the ability to set the type of field we’ll be creating. Besides the String, Integer and Float types featured in the Field COMP, the text COMP includes multiline text, password, and the ability to use a specification DAT (similar to the text TOP). Multiline text and password functionality were also found in the Field COMP, but now have their own specific mode and offer some additional functionality. We’ll take a brief look at these below.
String
Like the Field COMP, the Text COMP allows for displaying strings. This can include numbers, special characters (depending on font support) as well as multiple words. All of the string’s content will only be displayed on a single line.
Multiline Text
Multi line text is a new mode which allows (you guessed it) a user to enter multiple lines of text.
Password
This mode allows you to enter single line strings, but the characters have been obfuscated for password use.
Specification DAT
This mode allows for a Table DAT to be used to display multiple single line strings at different locations in the panel. It’s important to note that this mode does not support editing the text directly on the panel.
Float Numbers
This mode allows you to enter floating point numbers into the entry field.
Integer Numbers
This mode allows you to enter integers into the entry field.
Number and Text Formatting
The Text COMP also includes a number of formatting options which will no doubt be very useful for a variety of different UI components.
Number Formatting
There are different options available under the Formatting parameter depending on whether the Integer or Float mode has been selected. The Integer mode offers a number of timecode formatting, while the Float mode offers Number, Scientific, Percent and Currency formatting. Both Integer and Float also offer custom formatting using Python F String syntax as well as C++ Fmt syntax. A few examples of the number formatting options are displayed below.
Text Formatting
The String mode offers the same custom formatting options using the Python F-String syntax and the C++ Fmt syntax that are available for formatting numbers. An example is shown below.
Inline Styling
One of the most intriguing features the Text COMP brings to the table is the ability to style text inline, which means we can now add multiple formatting options like color, underlining, and scaling within the same line of text. That’s something not even the Text TOP can do (at this point, anyway)!
Instead of having to use multiple operators to add color highlights or underlines to a specific word (or foregoing them all together), it’s now possible to do that within just one Text COMP. Note that for inline styling to work, the Enable Formatting Codes switch needs to be turned on. We’ll take a look at some examples below.
Underline, Strikethrough
Color, Gradients
Notice how you can specify different styles within the same line of text, as well as on different lines of text.
Scaling
This example shows how you can start to build visual hierarchy with a combination of inline scaling and Specification DAT positioning. It’s not quite the same as being able to adjust the font family or weight, but it’s definitely a step in the right direction!
Tracking, Stretch, Skew
Subscript, Superscript
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.
Other Cool Features
Continuous Update Edit Mode
Another useful new feature is the Editable (Continuous Update) edit mode. The ability to choose between an editable and locked field is nothing new, but in the past the Field COMP would only output its contents after you finished typing and hit enter, or clicked on another part of the panel. With this new feature, the Text COMP gives you the option to continuously output its contents (including while you are typing). At the same time, the non-continuous update functionality is still available via the Editable mode. Check out an example below.
Callbacks
One final feature we’ll take a look at is the inclusion of callbacks with the Text COMP. Callbacks are an amazing tool for building all kinds of custom functionality. The Text COMP includes a variety of callback functions that are called as user interaction occurs, including when the content is edited.
For a quick look at the possibilities this might offer, the example below will automatically add custom inline formatting based on the text the user types in. If “Callbacks” is typed in, the text’s color will be changed to orange, otherwise the text’s color will be changed to blue.
Wrap up
The Text COMP looks poised to up the game of TouchDesigner’s UI creation capabilities, even if just from an aesthetic level. With the ability to natively deal with many types of numeric formats, implement custom Python formatting for text and numbers, utilize inline style formatting, and craft custom functionality with callbacks, we’re likely to see more advanced and well designed user interfaces built with TouchDesigner in the near future.
