UberGui V4
UberGui is a lightweight multi-threaded, webRender UI module for TouchDesigner projects. The aim is to solve the trifecta of challenges building UI's in TouchDesigner often poses: being fast, feature rich, and visually appealing.
Additionally, UberGui is built as a layer of abstraction directly on top of Custom Parameters, so you can use this in existing projects with little to no additional refactoring.
Fast, Beautiful, with TouchDesigner-centric features.
Performance
UberGui uses the webRender TOP in TD which runs a separate threaded instance of an embedded chromium browser. You can spawn many UG UI's and each will run independently of the main TouchDesigner TOE. Keeping your UI's from bogging down your real-time projects.
Both real time performance when many parameters are animated AND the speed in which a totally new ui is generated is very fast.
Resting performance is very low, just the cost of the web render TOP. NOTE: You can even disable the "Enable Thread" parameter, when you want to fully shut down the cook times of UG, for example when a certain window is not open, or part of the software not visible.
Aesthetic
Since UberGui is built on html/css we have a massive array of pre existing tech and styling options to leverage to build out compelling UIs. For this tool, I've exposed many of these css styling variables to TD, through a custom parameter styles page. You can modify/expose as many others as you'd like very easily with the parameter injection find/replace method.
You can also change the horizontal alignment of several elements from the styles page.
Features
UberGui is built to layer directly on top of existing projects that utilize Custom Parameters, and is intended to be a visual and functional extension of that feature set in TouchDesigner.
That said, it does offer many additional ways to manipulate and set numerical values that can speed up workflows and improve the experience greatly. Those features are covered below.
Using UberGui
Initial Setup
The fastest way to get going is to just download the Tox file in this repo, and drag it into your project. If you haven't used UberGui before, I suggest cloning the entire repo or downloading a zip file, and opening the UberGui_V4_Release.toe file to see how to use it with examples.
Input Mode
UberGui supports operation via mouse, and via touchscreen. The default mode is mouse, however you can change the Input Mode parameter shown below to activate Touch mode. If you do this, it's usually recommended to increase the height of parameter rows, and headers so it's easier to interact with them.
Page Filtering
UberGui by default is looking for any custom parameter pages on your source object. If you have some custom pages you wish to have visible, and others not - you can use the other page filtering mode in the config page, which will only show pages named with all upper case characters.
Scroll Speed
If scrolling or touch interactions are too fast or too slow, you can change the speed and acceleration below:
Adjusting Values via Sliders
You can adjust the value of any type of numerical parameter just dragging left and right. The min/max ranges of the parameter will determine the range. Menu parameters can also be treated like a slider.
Manual Entry via Field
Double clicking on any field will launch an editable field that you can type values into. Most parameters have this ability, but some do not (like the Menu parameter).
You may also tab to next for quick entry of several values either in a parameter tuple row or simply down the line. Each tab press will launch a field in the next parameter, if it supports a field.
You can also left click on any label, to automatically enter field entry mode for it's parameter (if supported).
You can also type in valid python expressions (in TD math is imported by default for us). These will not be set to the TD expression mode of the parameter, it will simply be evaluated when set.
You are able to evaluate expressions using many of the common measurement units as well (the assumed default unit cm).
Scroll Wheel
Depending on where your mouse is inside the UI, the scroll wheel will perform one of two functions generally.
When scrolling inside a parameter slider on the right half of the UI, it will adjust the parameter value in increments ( ctrl and shift will scale the increments accordingly )
When scrolling on the left side of the UI, this will scroll vertically through your UI if there is a scroll bar.
Parameter Reset
Right Clicking on any parameter label will reset the value to it's TD parameter set default.
Auxiliary UI
Menu and Color parameters have special auxiliary UI that will launch over top of UberGui to make it easier to choose a value. You'll see the triple dot icon to the right when this is the case. (file and folder parameters use this icon as well, but they simply launch TouchDesigner's built in picker.)
You can take advantage of the tool-tips overlay, if you include a table DAT in the source object, that contains descriptions of each parameter.
This is also where you'd specify special functionality for certain types of parameters in the third and fourth columns.
Touch Screen support
Touch Screens are supported as well, via a parameter called Input Mode, in the Config page. By default it's set to a mouse control scheme, but upon switching to Touch mode, the mouse is disabled in UG and Touch Screen controls become active.
Scrolling is easy, just drag up and down on the left side of UberGui.
When in Touch mode, you always need to single tap an element before trying to interact with it. This is because our ability to "hover" over a UI element is not possible with Touch Screen mode.
Using a slider is simple, just tap and drag left to right.
To reset a parameter tuplet to it's default value(s), highlight a label, then long press to reset. NOTE: You can change the global delay for long press in the config page of UG.
To enter field mode, long press any element after highlighting it with a tap.
Support this work
If you find value in this sort of thing, help me dedicating time to making open source code.