# Graphical Panel Controls: Bitmap Button

Bitmap Button controls provide two options for displaying image content within a graphical panel:

* **Single Image Display:** A single image is displayed on a button, much like an [On Off Button](graphical-panel-controls-on-off-button).
* **Sequential Image Display:** Several images are selected; the first is displayed by default, and the others shown based on user input. This is similar to the [Graphical Display](graphical-panel-controls-graphical-display) control, but instead of the display moving based on a signal value, the image shown changes when the mouse is clicked: a left-click goes forward (showing the next image in the sequence) while a right-click goes back (showing the previous image). An example can be seen in Figure 1.

![Figure 1: An example Bitmap Button control showing how a user can use the mouse to simulate gear shifting.](https://2673726158-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdYdvinhoJh0IN6rV8uo3%2Fuploads%2FRkuXRGv91UXNOTXxical%2FGearShift.gif?alt=media\&token=5e98e07d-f2ac-4ed8-9295-f8d826b5c486)

Table 1 lists the properties specific to a Bitmap Button control. A list of common properties can be found under [Common Control Properties](graphical-panel-controls-common-control-properties).

**Table 1: Bitmap Button Control Properties**

| Property                | Function and Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Action                  | <p>Dictates how the control functions:</p><ul><li><strong>0-Push Button:</strong> The control works like a push button, returning a value of <strong>False</strong> by default, or <strong>True</strong> when clicked.</li><li><strong>1-Toggle:</strong> The control changes from <strong>False</strong> to <strong>True</strong> and back again each time it is clicked.</li><li><strong>2-Switch:</strong> Each left-click increments the value, and each right-click decrements it, allowing the user to step forward or backward through a set of images.</li></ul> |
| Image                   | <p>Launches a special dialog box that allows you to select one or more images for this control; an example of the interface can be found in Figure 2.<br><br>Use the <strong>+</strong> button to add an image to the control; after doing so, VSpy will show a preview of the image, along with its name, width, height, and <strong>Index Number</strong>.<br><br>Press the <strong>-</strong> button to remove an image previously selected.</p>                                                                                                                      |
| FirstPixelIsTransparent | <p>Enables or disables transparency within the button:</p><ul><li><strong>0-No:</strong> Transparency is disabled.</li><li><strong>1-Yes:</strong> Transparency is enabled, keyed on the color of the first pixel in the image. All pixels of that color are displayed as transparent.</li></ul>                                                                                                                                                                                                                                                                         |
| DisplayOnly             | <p>Allows the control to be set to an output-only mode:</p><ul><li><strong>0-No:</strong> Control is input/output.</li><li><strong>1-Yes:</strong> Control is display only.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                    |
| Stretch                 | <p>Specifies whether an image should be shown at its standard size, or stretched to fit the Bitmap Button control:</p><ul><li><strong>0:</strong> Use native image size.</li><li><strong>1:</strong> Stretch image to fill control.</li></ul>                                                                                                                                                                                                                                                                                                                            |

![Figure 2: An example Graphical Display control image selection dialog box, showing the same image seen in Figure 1.](https://2673726158-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdYdvinhoJh0IN6rV8uo3%2Fuploads%2FhqN8K4SGuYqZxgI2jVvC%2FgpctrlGraphicalDisplaySetup.gif?alt=media\&token=a4bc4a7d-9066-4d39-889a-eae28d1c7525)
