Panel Layout & Organization

Overview:

What we call “Panel Components” are the set of 10+ components that are in the Panel column of the OP Create Dialog. Panel Components have a wide variety of arrangement options in TouchDesigner, and you can choose to mix and match styles or use a single style when designing your interfaces. 

When authoring panels in a TouchDesigner network, you can layout your Panel operators in two ways (both of these approaches have nearly the same results and behaviors):

1. By using the top and bottom connectors of the node to create hierarchy 
2. By nesting operators where you put panels inside the networks of other panels.

Once you’ve laid out your operators, there are four different approaches to control how the child sub-panels fill the parent panel:

1. Absolute Layouts rely on the child components to size and position themselves within the Containers Panel using their X, Y, Width, Height parameters. Each child node is responsible for positioning itself in the parent. 
2. Aligned Layouts allows the parent component to determine how to organize the child components via the Align Parameter. Each child still needs to set its Width and Height parameter, but their positioning is determined by the parent panel’s Align parameter along with the Align Order parameter of each child.
3. Anchored Layouts can be attained by setting each child panel’s Horizontal or Vertical Mode to “Anchor”. This will allow the child to set its size and position expressed as a fraction of the parent’s size.
4. Fill Layouts can be attained by setting each child panel’s Horizontal or Vertical Mode to “Fill”. This makes the child panel’s size take on the size of the parent’s width or height, and when several children are set to Fill, they divide the width or height determined by the Fill Weight parameters, and their order is set by their Align Order parameter.

• COMPs – Derivative Wiki
• Panel Components – Derivative Wiki
• Container COMP – Derivative Wiki