Web GUI for TouchDesigner – Component & Beginner Tutorial

Hey! In this tutorial, we’ll go over how to use a new custom component that allows you to instantly create a web GUI for any TouchDesigner container and control TD in real time over the web. The website will also live-update when changes in TD are made.

We’ll also dive into behind the scenes how we’re able to programmatically get and set the state of TouchDesigner containers using Python.

The project file is available on my Patreon: https://patreon.com/tblankensmith
Glitch Website for the WebGUI: https://glitch.com/edit/#!/touchdesigner-web-gui

Websockets in TouchDesigner Tutorials: https://www.youtube.com/watch?v=P-N8-sJEM6s&list=PLgfxkm9xFocaQvweC3KF3uIeQyDhsLhWX
Websocket Server Github Template: https://github.com/torinmb/Socket-Server-Template
Heroku: https://www.heroku.com/

Python Documentation
TDJSON: https://docs.derivative.ca/TDJSON
TDFunctions: https://docs.derivative.ca/TDFunctions

VDO Ninja for Live Streaming: https://vdo.ninja/

GitHub Repo for contributing to the website: https://github.com/torinmb/td-web-gui

0:00 Overview and Examples
5:20 Component Setup
10:38 Creating Custom Parameters
19:34 How the Component Works: Python Examples
27:16 Settings a Remote TD Monitor
30:58 Additional Directions