If you’ve done any interface building in TouchDesigner, you’ve surely noticed that there is a button and a slider Comp at your disposal. These are outstanding building blocks to use when you’re creating interfaces, and give you a ton of flexibility and dependability. In the past I’ve taken some time to talk about making some changes to the Button Comp, but what about the slider Comp? Won’t someone think of the slider comps?! Perhaps most importantly, what about making a vertical slider – the standard slider comp is horizontal, and wouldn’t it be nice to have one that worked up and down instead of left to right? Well, today is your lucky day – let’s look at how to make a few changes to our stock horizontal slider and turn it into a vertical slider instead.
Let’s start by first looking at what’s inside of our slider, and what makes it tick so to speak.
Unlike the button comp, the slider looks much simpler – after all it’s only made up of a container (the knob) a Panel CHOP and an Out CHOP. That seems pretty bare bones, but if we take a closer look at the knob we can see some interesting things at work here. Of the most interest to us is the expression in the x parameter of the knob. Here you should see an expression that reads:
me.parent().panel.u.val*me.parent().par.panelw-me.par.panelw/2
What on earth does that mean?! Well let’s take a closer look at this by first experimenting with a Constant CHOP that will let us see these numbers individually. In our Constant I’m going to break this longer expression into its component parts so we can see what’s happening.
me.parent().panel.u.val
me.parent().par.panelw
me.par.panelw
At this point you should be seeing an error message. What gives?
The answer to that questions lies in the last expression that we’re using – me.par.panelw. A constant, doesn’t have a panel that’s associated with it, so by asking for this value we’re getting an error message telling us that we are in fact asking for the impossible. If we want the panel width of our knob, we need to change this expression slightly so instead it reads: op(‘knob’).par.panelw. Once you make that change, you should now see something like this in your Constant.
Okay, so what are all of these values.
Our first expression (me.parent().panel.u.val) is looking for the u value from the parent’s control panel. We can confirm this value by looking at the Panel CHOP in this slider. At the middle position of the container, the panel u value is .5 – all the way to the right is 1, all the way to the left is 0. So far so good.
Our second expression (me.parent().par.panelw) is looking for the width parameter of the parent operator. If we look at our parent’s panel values we can see that that parameter panelw is in fact 100. That’s two values down, one to go.
Our third expression (me.par.panelw) is asking for the width parameter of the current operator. We can verify this by looking at our width parameter of the knob, and can see that they match.
Okay. Now let’s look at what is happening in the full expression:
me.parent().panel.u.val*me.parent().par.panelw-me.par.panelw/2
In English this might read – my parent’s panel u value (.5) * my parents width (100) – my panel’s width / 2. Great. Why? Well by multiplying the u value (a normalized value) with the width of the panel I get my position in terms of pixels – almost. The last thing I need to do is to take into consideration the width of the knob (divided by 2 so you split it’s value equally left and right). So what can we do with this new information?
Let’s make a vertical slider.
First lets start by taking our Slider COMP and swap the width and height values:
Next, let’s dive into our slider, and make a few changes. Inside of the slider, on the knob copy the expression from the x parameter and paste it into the y parameter. Let’s also swap the width and height values:
Hang on to your boots, because now we need to pay close attention to some details. We did some swapping around with our expressions, so before this is working correctly we need to make sure we change the expressions so they’ll work they way we expect them to. First up we need to change our u value to v, and then we need to look at panelh instead of panelw – remember that we’ve swapped our directions, instead of moving left and right we’re moving up and down and our expression needs to reflect that change. Here’s what your expression should look like:
me.parent().panel.v.val*me.parent().par.panelh-me.par.panelh/2
Finally, we need to change the Panel CHOP to output the v value instead of the u value:
Congratulations, you should now have a vertical slider that works just like the horizontal ones.
Matthew Ragan 
1 comment
Comments are closed.