Multi-State Bargraph Buttons
Multi-State Bargraph Buttons are level monitors and adjustable level controls that can be configured to monitor or adjust audio outputs and lighting levels, and that (like Multi-State General buttons) support up to 256 states. Use multi-state buttons when you want to utilize animation effects. Multi-state Bargraph buttons also allow you to create a custom Bargraph slider (using an image icon).
NOTE: Since multi-state buttons are pre-rendered, meaning that touch panel memory is allocated in advance for each state, be aware of the potential for excessive memory usage by multi-state buttons. Always take into account that large multi-state buttons, depending upon their size and their functionality, may use more memory than is available to the touch panel.
Creating Multi-State Bargraph Buttons
- Open the Page, Popup Page or Sub-Page that the button will be added to (double-click on the page in the Workspace window (Pages tab) to open the page and bring it into edit focus).
- Select the Button Draw tool from the Button Selection/Draw toolbar.
- Click on a Page, Popup Page or Sub-Page (in the active Design View window), and while holding the mouse button down, drag to draw the button to the desired size and shape.
Upon the creation of a button, you will see selection handles appear on the outsides of the button that are small yellow squares with red interiors. This is a visual indication that the newly created button has the Edit Focus.
- In the General tab of the Properties window, set the Type property to Multi-State Bargraph.
This selection updates the Properties window to represent properties specific to this button type.
- Set the button properties as desired by editing the General, Programming and States properties in the Properties window.
- Select File > Save to save your changes.
Multi-State Bargraph Buttons - General Properties
Once you have created a Multi-State Bargraph button, you can use the General tab of the Properties window to set/edit general (non-state oriented) button properties. To edit any of the properties in the table, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both.
The following General button properties are supported for Multi-State Bargraph buttons:
| Multi-State Bargraph Buttons - General Properties |
|---|
Type
| see
page 247
| | |
Name
| see
page 242
| | |
Lock Button Name
| see
page 242
| | |
Description
| see
page 236
| | |
Left
| see
page 238
| | |
Top
| see
page 246
| | |
Width
| see
page 247
| | |
Height
| see
page 237
| | |
Border Style
| see
page 236
| | |
State Count
| see
page 246
| | |
Disabled
| see
page 236
| | |
Hidden
| see
page 237
| | |
Value Direction
| see
page 247
| | |
Touch Map
| see
page 246
|
Multi-State Bargraph Buttons - Programming Properties
Once you have created a Multi-State Bargraph button, you can use the Programming tab of the Properties window to set/edit programming-oriented button properties. To edit any of the properties, click in the right-hand table cell to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both.
The following Programming properties are supported for Multi-State Bargraph buttons:
| Multi-State Bargraph Buttons - Programming Properties |
|---|
Address Port
| see
page 247
| | |
Address Code
| see
page 249
| | |
Channel Port
| see
page 249
| | |
Channel Code
| see
page 249
| | |
Level Port
| see
page 250
| | |
Level Code
| see
page 250
| | |
Level Function
| see
page 251
| | |
Range Low
| see
page 251
| | |
Range High
| see
page 251
| | |
Range Inverted
| see
page 251
| | |
Range Time Up
| see
page 251
| | |
Range Time Down
| see
page 251
|
NOTE: Maximum command, string and text length = 4096 characters.
Multi-State Bargraph Buttons - States Properties
Once you have created a Multi-State Bargraph button, you can use the States tab of the Properties window to set/edit state- oriented button properties. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both.
The State tab of the Properties window works in conjunction with the State Manager window. Note that if the State Manager is not displayed, or if no state(s) are selected in the State Manager, the States tab shows a list of all states associated with the selected button. Each state represented in the States tab is a collapsed folder containing the state properties for that particular state. Click the + symbol to expand each folder. If you select a state (or multiple states) in the State Manager, then the States tab only represents the selected state(s).
Use the All States option to apply any changes you make to all states on the selected button. Note that if you have multiple buttons selected (Shift+click to select multiple buttons a page), the All States option only affects states for the button that has Edit Focus. The button with edit focus would be the last one selected, and is indicated by having red-colored square handles (as opposed to the black squares that indicate that a button is selected, but does not currently have edit focus).
FIG. 82 Multi-State Bargraph Buttons - States Properties
NOTE: The maximum number of states for Multi-State type buttons = 256.
The following State properties are supported for Multi-State Bargraph buttons (for each state). Note that depending on the Panel associated with your project some of these options may not be available.
| Multi-State Bargraph Buttons - States Properties |
|---|
Border Name
| see
page 252
| | |
Border Color
| see
page 251
| | |
Fill Type
| see
page 252
| | |
Fill Color
| see
page 252
| | |
Fill Gradient Colors
| see
page 252
| | |
Gradient Radius
| see
page 253
| | |
Gradient Center X%
| see
page 253
| | |
Gradient Center Y%
| see
page 253
| | |
Text Color
| see
page 254
| | |
Text Effect Color
| see
page 254
| | |
Overall Opacity
| see
page 253
| | |
Video Fill
| see
page 254
| | |
Streaming Source
| see
page 253
| | |
Bitmaps
| see
page 251
| | |
Font
| see
page 252
| | |
Font Size
| see
page 253
| | |
Text
| see
page 254
| | |
Text Justification
| see
page 254
| | |
Text X Offset
| see
page 254
| | |
Text Y Offset
| see
page 254
| | |
Text Effect
| see
page 254
| | |
Word Wrap
| see
page 254
| | |
Sound
| see
page 253
|
NOTE: Multi-State Bargraph buttons do not support Events.
Creating a Custom Slider
Multi-State Bargraph buttons work differently than regular Bargraph buttons. Note that when you draw a Multi-State Bargraph button, that there is no slider indicated on the button (in the Design View window).
Also note that unlike regular Bargraph buttons, there are no slider-oriented settings to make in the Properties window. This is because multi-state Bargraph buttons, like multi-state General buttons, use up to 255 states to animate the button action. In the case of Bargraph buttons, you'll be animating a change in levels as opposed to a push/release, as on Multi-State General buttons. Rather than assign a prepared slider, like you would for a normal Bargraph button, you can animate an icon across the states to serve as a custom slider.
Custom sliders on Multi-state Bargraph Buttons work on the panel basically the same as regular sliders. You adjust a level, you touch the Bargraph button and move the slider up and down (or side to side on a horizontal Bargraph button).
To create a custom slider:
- Create a Multi-State Bargraph button.
- Select State 1 in the Properties window (States tab), or in the State Manager window.
- Apply a bitmap assignment to State 1.
- Set the Bitmap Justification to Absolute.
- In the State Manager, right-click on State 1 and select Image/Text Positioning to open the Image and Text Positioning dialog.
- In the Image and Text Positioning dialog, move the bitmap into the position that you want to be the "start position" for the Bargraph slider. The start position for Multi-State Bargraph buttons is always the bottom of the Bargraph (representing the minimum level setting).
NOTE: One key difference between regular and Multi-State Bargraph buttons is the way they work on the panel. The button action is the same (press the Bargraph slider and drag to adjust the level), but while regular Bargraph buttons can be set as either horizontal or vertical, Multi-State Bargraph buttons are always oriented vertically. The user will always press and drag the slider up and down to adjust the level. Keep this in mind when setting up a custom slider. Always begin the icon animation starting (at State 1) at the bottom position, and ending at the top.
- Add States to the button (up to 255 total), duplicating State 1 (containing the bitmap). Generally, you'll want to delete the "extra" state at the end of the sequence, which does not contain the bitmap (the original State 2 setting).
NOTE: Keep in mind that the more states used to animate the movement of the icon, the smoother and more accurate the slider will be. The range of motion (i.e. the size of the button that the icon will travel across) needed for the slider should be taken in to consideration as well. A "short" Bargraph button would require less states to create a smooth motion than a "long" one (that for example spans the entire touch panel page).
- Select the last State in the Properties window (States tab), or in the State Manager window.
- In the Image and Text Positioning dialog, move the bitmap into the position that you want to be the "end position" for the Bargraph slider. The end position for Multi-State Bargraph buttons is always the top of the Bargraph (representing the maximum level setting).
- In the State Manager window, Ctrl+click to select just the first and last states.
- Right-click on either of the selected states and select Slot Position from the Tweeners sub-menu. The results of the tweening are displayed in the State Manager window.
To preview the custom slider in action, open the Button Preview window, and click and drag the cursor up and down within the button to move the slider up and down.
Remember, you can also utilize the other tweeners in conjunction with the custom slider to create complex color transition effects.
Working With Touch Maps
TPD5 supports Touch Maps for Multi-State Bargraph buttons. Touch Map images allow you to use irregular shapes for active Bargraph buttons. If you select Touch Map as the Value Direction (state property), an additional state property is enabled (displayed directly below Value Direction in the Properties window) called Touch Map.
Click the browse button (...) next to Touch Map to select an image to use as a Touch Map (via the Resource Manager). The alpha values in the selected image represent the areas where touch will be registered, and the red-channel values represent the overall value to change the control to.
Formatting Codes
Formatting codes can be used in the Text for Bargraph and Multi-State Bargraph buttons. The following formatting codes will be replaced with the identified values:
- $P: level percentage
- $V: raw level value
- $L: range low
- $H: range high
- $A: adjusted level value (raw level value - range low)
- $R: range (range high - range low)
- $$: $ character
NOTE: Bargraph and Multi-State Bargraph buttons do not support Events.