Rollover effect, panel chop, image selector, containers, dat execute, panel execute, strings, ifs, renderpick and instances

Finally got through most of the Elektronaut vids, so working through some of the Matthew Ragan tuts now. Here are two really good ones demoing two different ways of making a UI that allows you to select an image from a 3x3 grid and display it in a larger window/panel.

 https://matthewragan.com/2015/03/29/thp-494-598-image-selector-container-method-touchdesigner/

 https://matthewragan.com/2015/03/29/thp-494-598-image-selector-instance-method-touchdesigner/

 

Some key points that I think are good things to note -

Containers are panel types of objects that can be finicky to arrange! However, you can utilise the PANEL CHOP within a container to great advantage - attributes such as "inside" or "rollover" can be used to dim the panel's opacity for example, or maybe a texture TOP that is somewhere.

Containers are a bit limited in terms of how you can position them (with any great speed). You're more or less limited to rows and columns, unless you get a little creative with some python. The cool thing with the Instances example is being able to add noise to the Instance position info, or rotating the shape. Some very cool effects can be achieved this way - and the selecting which I'll mention later in this post will still work!

The second video covers a similar result, but with the use of instances. Since all the instances of the images are in ONE container, we can't exactly rely on the panel chop to get us the "inside"/"rollover" data we need. We do however use it (selecting just the U, V and Select channels), in conjunction with 1)a CHOP to DAT (this converts the chop to a table) and 2)a RENDERPICK DAT.

In the Renderpick DAT, enable "Fetch Instance ID" and specify the render TOP that we're looking at. Now when you click on an instance of an image the Renderpick table will identify the instance that's been selected! But when do you use this info?  Matthew's tutorial also introduced me to the DAT Execute node.

Specify the DAT (table) we're monitoring (in our case it will be the renderpick) and select "Table Change" to be on. "Basically" everytime the renderpick table changes a value (ie the instance number) we execute a bunch of Python script/code. The bit we'll keep for this is called:

def onTableChange(dat):

    return

We can delete all the other areas & add our code in between the : and the return.

Something to note - when we click on an area that ISN'T an instance. eg part of the background, or some other image, the value of the instance in the Renderpick will be displayed as "-1". This is important to keep in mind (he tests for -1 and sets the value of the image to whatever is already there if it is -1, otherwise he assigns the new instance number)
So another thing that the tutorial clarified for me was the syntax of the IF statement.

if test<=-1:

    do something

else:

    do the other thing

colons and tabs....colons and tabs...

In the Container version of this, something called the PANEL EXECUTE DAT is used. This is only usable by panel type objects. It is used in the Off to On mode, which means the code is executed whenever a certain action is performed on the panel in question. For our example we used "lselect" (which is left click). A full list of available actions is viewable in the Panel DAT.

The last bit of wisdom to mention is joining strings together.

a simple + works

so for example

number=str(op('something')[0,1]) //and lets say we get 4 from this

stringStart='first'

stringEnd='end'

print(stringStart+number+stringEnd)

would output "first4end"