Building a Button Panel Gadget

Momentary and Toggle Buttons

Buttons are the simplest form of UI gadget and a good place to start. The Button component is used to build momentary, toggle and radio buttons. Let's start with a simple momentary button.

1. Create a Button component from the OP Create Menu. Press <tab> to open the OP Create Menu and select COMP>Button. A Button component called button1 will be created.
2. Look at button1's parameters by pressing 'p' or right-clicking on it and selecting 'Parameters...' from the menu. The default width (W) and height (H) are 100. To look at the button panel, right-click on button1 and select Open Control Panel... The panel will open in a floating window that is 100x100 pixels in resolution.
3. The background color of the button can be set on the Color parameter page. Set Background Color to 0.125, 0.125, 0.125, and the Background Alpha parameter to 1.0. You can also give the button a border here. Set the Border A Color 0.275, 0.275, 0.275, and the Border A Alpha to 1.0. Then set the 1st column of the top, bottom, left, and right border parameters to Border A, this assigns the color defined in Border A to the outside edges.
4. Any image in TOPs can set as the background of the button using the Background TOP parameter. Temporarily place a default MovieIn TOP here. Create a MovieIn TOP by pressing <tab> and select TOP>MovieIn from the create OP menu. Now Drag and Drop the new TOP onto the Background TOP parameter of button1. The image from moviein1 will appear in button1's background.
5. Now to make the button change color when clicked on. Go inside button1's network. Do this by selecting the button1 and pressing <enter> or < i >.
6. Create a Text TOP (press <tab> and select TOP>Text). The Text TOP is useful for making UI gadgets as it can be used to add color, borders, and text to elements. To define the button "off" and "on" looks, two TOPs are required. Rename the first Text TOP created to buttonoff, then create a second and rename it to buttonon.
7. Let's make the button 100x25 pixels in size. Since these TOPs will define the background of the button, the TOPs should be 100x25 pixels as well. Go to the Common page of parameters in each TOP and set Custom Res to 100,25. The button panel itself is still 100x100 pixels. To change this go back up a level by pressing < u >, then change button1's Height parameter to 25. Jump back into button1's network by selecting it and pressing <enter> or < i >.
8. Setting the look of buttonoff. Go to the Color page, then set Font Color to 0.625,0.625,0.625 and Font Alpha to 1.0. Now enter the word "Off" in the Text parameter on the Text page.
9. Setting the look of buttonon. On buttonon's Color page, set Font Color to 0.625,0.625,0.625 and Font Alpha to 1.0. Then set Background Color to 0.1,0.1,0.1 and Background Alpha to 0.1. Enter the word "On" in the Text parameter.
10. To make the button panel switch between "off" and "on", we need to switch between buttonoff and buttonon using a Switch TOP. Create a Switch TOP called switch1 (press <tab> and select TOP>Switch), connect buttonoff to its first input and buttonon to its second input.
11. Set the background of button1 to use these new TOPs. First append a Null TOP to the output of switch1, and rename it to bg. Now return to button1's Panel page of parameters and set the Background TOP parameter to "./bg". The ./ is a relative path meaning "inside this component".

12. To get interaction from button1, a Panel CHOP is needed to get the panel's values as CHOP channels. While inside the button1 network, use the OP Create menu and select CHOP>Panel. By default, the Panel CHOP (called panel1) will refer to its Parent Component, so in this case it is already referring to button1.

    View panel1s CHOP channels. Click on the Node Viewer flag on panel1. This will turn the node's icon into a small CHOP viewer. panel1 may need to be resized larger to view all the channels. Grab the CHOP's upper-right corner (a resize cursor will appear) and drag it until the viewer is big enough to read all the channel names.

    The channels will update when you move, drag and click the cursor over button1's open control panel. NOTE: Touch must be playing forward.

13. <p>Clicking on the button, you will notice that the select and state channels go to 1 with each click. Using one of these channels, but button look can be switch between the buttonoff and buttonon looks whenever the button is clicked.

    Inside button1 create a Switch TOP by using the OP Create menu and selecting TOP>Switch. Connect the buttonoff TOP to switch1's first input, and buttonon to it's second input.

14. Connect button1's state value to switch1.

    When clicking on the button panel, notice the state channel in panel1 go to 1 each time the mouse is clicked. To export panel1s state channel to switch1, append a Null CHOP to panel1.

    Right-click on null1 and select CHOP Exporter... from the menu. The CHOP Exporter dialog will open. Drag state from the CHOP Exporter onto switch1s Index parameter. When the channel is dropped onto the parameter a pop-up box will appear, select Export CHOP.

    The exported channel can be confirmed by the dotted line now extending from null1 CHOP to switch1 TOP. The Input parameter in switch1 will also be highlighted blue. Clicking the button1 panel now changes switch1s Input parameter to 1 and the TOP image to its second input, which is buttonon.

15. Notice that the button1 open control panel does not update yet. This is because we need to specify the switching output as the Background TOP. Append a Null TOP to switch1, rename the Null TOP to bg.

    Go back up to the button1 Component (press < u >). Set the Background TOP parameter to ./switch1 (you can also Drag and Drop switch1 here).

    The button will now update it's 'look' each time you click on it. Below we have the button off (left) and on (right).

16. Getting the channels out of the Component.

    Inside button1s network, append an Select CHOP to panel1. Since only the state channel for button1 is needed, select state from the Channel Names parameter menu (or simply type state into the field). Now in the Rename To field, enter $OPN. $OPN is a variable that holds the parent's name. By using $OPN here, the channel name is renamed to the parent component's name, button1. This is handy when duplicating buttons, as each button will have a distinct channel name. Append an Out CHOP to the Select CHOP.

    Now go back up to the button1 Component (press < u >). There will now be a CHOP output on the right side of the button1. Append a Null CHOP to this output and turn on its Node Viewer. Use this to connect button1s state to any parameter you like. Using an output like this keeps the button encapsulated nicely as a re-usable component, without the need to go inside and grab channels out. Components were designed for encapsulation and re-usability.

17. Changing the button from momentary to toggle.

    This button is currently a momentary button, but it is easy to make it a toggle. Go to the Button page of parameters for button1. Change the Button Type menu from Button Momentary to Button Toggle Down. Button1 is now a toggle button!

    NOTE: Button Toggle Down activates on pressing the button down. Button Toggle Up activates on releasing the button up.