The Button Component is used in panels to provide interactive on/off buttons, including toggle buttons, momentary buttons, and sets of radio buttons or exclusive buttons. Radio and exclusive buttons act as a group, which can be as simple as all Button components in a Container component. The group can be specified more tightly using the Button Group Label parameter or the Button Group DAT parameter.
Default Button Component
Parameters - Button Page
buttontype - - This menu determines the button's state behavior.
Button Group Label
buttongroup - Create a radio button group using this parameter. Buttons grouped using this parameter must all be located in the same component. Any buttons with the same group label will be in the same radio group.
Button Group DAT
buttongroupdat - Specify a Table DAT that lists all buttons in a radio group. This allows a group of radio buttons to have its member buttons located in any network - the buttons do not have to be in the same component. The paths are relative to the DAT and can contain patterns and wildcards (see Pattern Matching). When a button is activated, it modifies the radio panel values of the DAT's parent, not its own parent, since buttons can now be scattered in different components.
Parameters - Layout Page
The Layout parameter page controls the size and position of the panel.
x - Specify the horizontal position in pixels relative to its parent.
y - Specify the vertical position in pixels relative to its parent.
w - Specify the panel's width in pixels.
h - Specify the Panel's height in pixels.
fixedaspect - ⊞ - Allows easy creation of panels with a specific aspect set in the Aspect Ratio parameter below. Only requires setting the width or height of the panel and the other dimension is calculated based on the Aspect Ratio parameter.
- Use Horizontal
- Use Vertical
aspect - Specify the ratio when using Fixed Aspect parameter above, the ratio is width/height.
layer - Specifies the order the panel components are drawn in, similar to layers in Photoshop. Higher values will be drawn over any other panel with a lower value (that is at the same level of hierarchy). If two panel components have the same Depth Layer value then they are ordered based on the operator's name.
hmode - ⊞ - Select one of 3 modes to determine the horizontal width of the panel.
- Fixed Width
fixed- Uses the Width parameter above to set this panel's width in pixels.
fill- The width of this panel will match (fill) the width of the parent panel.
anchors- The width of this panel is set by the Left Anchor and Right Anchor parameters below which will maintain a relative width to the parent panel as the parent panel changes size. This allows for stretchy panels. These anchor parameters are normalized 0-1 like uv coordinates where 0 is the left edge and 1 is the right edge of the parent panel. For example, Left Anchor = 0.2 and Right Anchor = 0.8 will maintain the width proportionally to the parent panel such that the left edge is 20% (0.2) in from the left and the right edge is 20% (0.8) in from the right.
leftanchor - Position of the left anchor of the panel with respect to the parent. This value is normalized 0-1, 0 is the left edge of the parent and 1 is the right edge of the parent.
leftoffset - An offset for the left anchor in pixels.
rightanchor - Position of the right anchor of the panel with respect to the parent. This value is normalized 0-1, 0 is the left edge of the parent and 1 is the right edge of the parent.
rightoffset - An offset for the right anchor in pixels.
horigin - Sets the position of the panel's origin horizontally. The default origin (0,0) is the bottom-left corner of the panel.
Horizontal Fill Weight
hfillweight - When multiple panels are using Horizontal Mode = Fill and being aligned by the parent either Left to Right or Right to Left, this fill weight parameter can be used to bias the fill width of the panels.
vmode - ⊞ - Select one of 3 modes to determine the vertical height of the panel.
- Fixed Height
fixed- Uses the Height parameter above to set this panel's height in pixels.
fill- The height of this panel will match (fill) the height of the parent panel.
anchors- The height of this panel is set by the Bottom Anchor and Top Anchor parameters below which will maintain a relative and proportionally height to the parent panel as the parent panel changes size. This allows for stretchy panels. These anchor parameters are normalized 0-1 like uv coordinates where 0 is the bottom edge and 1 is the top edge of the parent panel. For example, Bottom Anchor = 0.3 and Right Anchor = 0.5 will maintain the height proportionally to the parent panel such that the bottom edge is 30% (0.3) up from the bottom and the top edge is 50% (0.5) down from the top.
bottomanchor - Position of the bottom anchor of the panel with respect to the parent. This value is normalized 0-1, 0 is the bottom edge of the parent and 1 is the top edge of the parent.
bottomoffset - An offset for the bottom anchor in pixels.
topanchor - Position of the top anchor of the panel with respect to the parent. This value is normalized 0-1, 0 is the bottom edge of the parent and 1 is the top edge of the parent.
topoffset - An offset for the top anchor in pixels.
vorigin - Sets the position of the panel's origin vertically. The default origin (0,0) is the bottom-left corner of the panel.
Vertical Fill Weight
vfillweight - When multiple panels are using Vertical Mode = Fill and being aligned by the parent either Top to Bottom or Bottom to Top, this fill weight parameter can be used to bias the fill height of the panels.
alignallow - ⊞ - When set to Ignore, the Panel will ignore any Align parameter settings from its parent.
allow- Aligns the panel based on settings in parent.
ignore- Does not align the panel but respects margins.
- Ignore and Ignore Margins
ignoremargin- Does not align the panel and disregards margins.
alignorder - This parameter allows you to specify the align position when its parent's Align parameter is set to something other then None or Match Network Nodes. Lower numbers are first.
postoffset - ⊞ - Adds an offset after all other postions and alignment options have been applied to the panel.
Size from Window
sizefromwindow - When enabled the panel component's width and height are set by resizing its floating viewer window.
Parameters - Look Page
The Color parameter page sets the panel's background, border, and disabled colors.
bgcolor - ⊞ - RGB values for the background. (default: black (0,0,0))
bgalpha - Set the alpha value for the background.
top - Allows you to specify a TOP as the background for the panel.
topfill - ⊞ - This menu specifies the way the Background TOP will fill the panel's background.
- Fill Width
- Fill Height
- Fill Best
- Native Resolution
bordera - ⊞ - RGB values for border A color.
Border A Alpha
borderaalpha - Alpha value for border A color.
borderb - ⊞ - RGBA values for border B color.
Border B Alpha
borderbalpha - Alpha value for border B color.
leftborder - What color the 2 left-most pixels are. Options are 0 (no change), Border A (uses color defined in Border A), or Border B (uses color defined in Border B).
Left Border Inside
leftborderi - Same as above parameter but used for an inside border.
rightborder - What color the 2 right-most pixels are. Options are 0 (no change), Border A (uses color defined in Border A), or Border B (uses color defined in Border B).
Right Border Inside
rightborderi - Same as above parameter but used for an inside border.
bottomborder - What color the 2 bottom-most pixels are. Options are 0 (no change), Border A (uses color defined in Border A), or Border B (uses color defined in Border B).
Bottom Border Inside
bottomborderi - Same as above parameter but used for an inside border.
topborder - What color the 2 top-most pixels are. Options are 0 (no change), Border A (uses color defined in Border A), or Border B (uses color defined in Border B).
Top Border Inside
topborderi - Same as above parameter but used for an inside border.
Border Over Children
borderover - Draws the panel's borders on top of all children panels.
dodisablecolor - Enable the use of a unique disable color below when the panel's Enable = Off.
disablecolor - ⊞ - RGB values for the disable color. (default: black (0,0,0))
disablealpha - Set the alpha value for the disable color.
Multiply RGB by Alpha
multrgb - Multiplies the RGB channels by the alpha channel.
composite - ⊞ - Selects how the panel is composited with its siblings panels. See the Composite TOP for a description of the various composite methods.
opacity - Allows you to control the transparency of the panel.
Parameters - Drag/Drop Page
Please refer to Drag-and-Drop for a full explanation on how Drag and Drop between Panel Components functions.
When Dragging This
drag - ⊞ - Specify if this Panel Component can be dragged.
- Use Parent's Drag Settings
dragparent- Follow the parent Panel Components Drag setting.
- Legacy Drag System
legacy- Allow Dragging for this Panel Component. Use the Paramters
Drop Destination Scriptand
Dropped Operatorto control the behaviour.
- Do Not Allow Drag
dragno- Disallows Dragging for this Panel Component.
dragscript - Specify a script that will be executed when starting to drag a Panel Component. Please refer to the Drag Script section of the Drag and Drop page.
Drop Destination Script
dropdestscript - Specify a script that will be executed when the dragged Panel Component is dropped. A temporary network is created and the component (or the alternative operator specified in Dropped Component) is copied to this network. You can add or modify operators in this network. Please refer to the Drop Destination Script section of the Drag and Drop page.
droptypescript - If a drop destination script is specified, you can also add a DAT table with a list of return types that the drop destination script will provide. Return types can be one of the op types (COMP,TOP,CHOP,SOP,MAT,DAT), channel, or supported filetypes. Please refer to the Drop Types section of the Drag and Drop page.
paneldragop - The Dropped Component parameter is the easiest way to specify an alternative operator to drop. Note that this alternative operator must exist, otherwise the component itself will be dropped. The alternative is only used when dropping onto a network or control panel. Text pasted via dragging and dropping, or files saved via dropping onto the desktop, will still use the original.
On Dropping Into
drop - ⊞ - Specify if this Panel Component accepts items that are dropped onto it.
- Use Parent's Drop Settings
dropparent- Follow the parent Panel Components Drop setting.
- Legacy Drop System
legacy- Allow Dropping onto this Panel Component. Use the Paramter
Drop Scriptto control the behaviour.
- Do Not Allow Drop
dropno- Disallows Dropping onto this Panel Component.
dropscript - A component's Drop Script is run when you drop another component or an external file into that component. Please refer to the Drop Scripts - Text section of the Drag and Drop page.
Alternatively specify a Table DAT in the drop script field. TouchDesigner will automatically look for 2 columns in the table. The first column should indicate the data type and the second should indicate the Text DAT that holds the script to process that data type. Please refer to the Drop Script - Tables section of the Drag and Drop page.
|• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •|
(1) The TouchDesigner window is made of a menu bar at the top, a Timeline at the bottom, plus one of a choice of Layouts in the middle. A Layout is made on one or more Panes, each Pane can contain a Network Editor, Viewer, Panel, etc. See Pane and Bookmark. (2) Nodes in a network are arranged using Layout commands in the RMB menu.
A custom interactive control panel built within TouchDesigner. Panels are created using Panel Components whose look is created entirely with TOPs.
An Operator Family that creates, composites and modifies images, and reads/writes images and movies to/from files and the network. TOPs run on the graphics card's GPU.
The component types (e.g. Slider, Button, Field, Container) that are used to create custom control panels, also known simply as Panel or Gadget
Any of the procedural data operators. OPs do all the work in TouchDesigner. They "cook" and output data to other OPs, which ultimately result in new images, data and audio being generated. See Node.
An Operator Family that reads, creates and modifies 3D polygons, curves, NURBS surfaces, spheres, meatballs and other 3D surface data.
An Operator Family that associates a shader with a SOP or Geometry Object for rendering textured and lit objects.