Home Artists Posts Import Register

Downloads

Content

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.

Links:

Glitch Website for the Web GUI 

Websockets in TouchDesigner Tutorials

Websocket Server Github Template 

Heroku 


Python Documentation:

TDJSON 

TDFunctions 


VDO Ninja for Live Streaming 

GitHub Repo for contributing to the website

Files

Web GUI for TouchDesigner - Beginner Tutorial & Component

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 component will also. The project file is available on my Patreon: https://patreon.com/tblankensmith Glitch Website: 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

Comments

Anonymous

Hi Torin, great lessons! 👌🏼 I tried opening the WebGUI.102.toe on my Mac but got 'Vulkan Device Error', any idea what's going? I'm on TD version 2022.32120, I'm working on an Intel Mac. Cheers, Asjer

tblankensmith

Hi Asjer, that's very strange. I just tried opening it up as well on an intel Mac TD version 2022.32120 and it worked fine. It might be worth rebooting your computer and trying again. Also what OS are you running?

Anonymous

you sir are amazing! Thank you!!! Just one thing: custom menus are not supported yet right? When I have a custom dropdown menu in my container, it won't show anything of the container controls on the website :-( Still awesome though!!

Shamanic Vocal Arts

Hey All, Had a bunch of small issues with this component, which i was able to fix with some, admittedly janky solutions. First : XY behaviour was bugged/not useful in tweakpane. Y would end up being constrained to an unuseable amount of the XY pad, & X wouldnt constrain at all, when trying to set a min max range of -1 to 1. I fixed this by setting the min max range from -10 to 10 in the custom component and using a constant & math chop to set the range to -1 to 1 where I needed to map it. Second : populating a menu via "menuSource" means the menu will not show up in the GUI, populate your menus using script or other methods. Third: UI would regularly forget itself, close the websocket connection and require manual pulsing and tweaking to get back up & running, certain Components would just dissapear & require multiple "pulses" to get back. Solution for this was actually very simple, though it feels jank, pulse your webGUI components on a timer ( I have it pulsing once a minute )! since implementing this ive not had my GUI rug on me! Fourth: more than 4 custom pages breaks things: this one was really screwing me for a while as my component had multiple pages of parameters in it. but after testing a bunch I found that once you add a 5th page the webGUI gets confused and starts not rendering every parameter. The workaround for this is to store and bind UI components in a seperate Base. thats all the bugs and fixes Ive figured out so far - If I find anymore will post here or wherever is appropriate. Have a good day yall!

tblankensmith

hey thanks so much for such a thorough breakdown. Lmk if you want to chat. I'd be happy to incorporate any changes to make it a better experience for everyone

Shamanic Vocal Arts

Hey Torin. Would love to have a chat about the webGUI component! I've sent you a DM before on this platform so we can chat there if it works for you 😀

Yukihiro Taira

Hey this seems like a verry usful thing but I cannot seem to get the GUI to show up in Glitch... I have confirmed that the socket is receiving data in Websocket King but still the GUI will not show up in Glitch...is there something that has been updated since this video was produced?