• Marina Victoria Pascual

TouchDesigner GUI for DMX control

For my final project, I made a GUI control for the DMX lights at ITP in TouchDesigner.


Connecting to the DMX:

In order to connect to the DMX lights from TD, I followed Louise's documentation, DMX in TouchDesigner. Her tutorial was very helpful. But her DMX set up is quite different from the one we have. For instance, our DMX lights are spread over 104 channels, even though most of them are not connected to any lights, so I had to find a way to connect all of them.


To do this, I created three CHOP constant objects (because each one of them can only take 40 channels), labeled the channels that I needed, and created "empty" channels for all the channels in between the functional ones. If these empty channels are not created, it will not work properly. I then merged the constants together, passed them through a math CHOP to map their values from 0-1 to 0-255, and then sent them through the dmxout CHOP.


(unfortunately some of the images are cropped, but you get the idea)


Making the GUI:

In order to create the GUI I followed a tutorial series made by TouchDesigner on widgets. These tutorials were very, very helpful. So I highly recommend following them if you want to build a UI.


The UI is organized in the following order: two containers (one for the top section and the bottom section), 'x' number of containers for each of the lights, a label widget and a container holding all of the sliders for each light control, and lastly, inside the 'sliders' container, all of the sliders (with a replicator object to copy and replicate the sliders). There are several ways you can organize each of the elements in order to spread them out in the containers, but this will vary depending on what you want to make. Check these images to see how this UI is organized:




And here is an image of the final version of the GUI:


All though I did not include an actual map of the stage lights, I organized the GUI controls in correspondence to where the lights would be in the actual space. So as you can see above, the two front lights are in the bottom have of the GUI, and the rest are on the top part (the the two top lights being in the middle and in between the two back lights).


Binding the light control values to the widgets:

This part is quite easy but a bit confusing at first. So I'll do my best to explain it.

First of all, I needed to add the 'basicWidgets' package that comes in TD to the project in order to make this whole process work. Then, I opened the "Customize Component" panel of the container of the GUI ("dmx_controller"). Here, I created several pages, one for each of the lights. Once this is done, I went and looked for the slides I was going to use, selected all of them and dragged them into the "Parameter" section of the Pages. (In one of the images below you will see that the names correspond to the parameters created in the "Component Editor"). Lastly, I had to open up the parameters of the controller container tab on a separate window and also the parameters of the constant CHOPs. I then dragged each of the values from the dmx_controller window to the constant's parameter values. and when I dropped the value, I chose the "reference" option.




Here is a demo of how this all works:




Last thoughts:

Some things I would have liked to incorporate in this GUI is a direct view of the Live camera at ITP. I think this would have been quite helpful, given that having to always look for the link whenever you want to check the lights is a bit annoying. And since we don't actually have access to see the lights in person, I think it fights very well our current circumstances.

Something else I wanted to try, was making this GUI a direct app, so that the user doesn't necessarily need to have the TouchDesigner software. I am sure there's a simple way of doing this in TD, but unfortunately I was not able to figure it out.

​© 2019 by Marina Victoria Pascual.