# Part 2 - Setup the Graphical Panel

Graphics Panels are similar to the graphical user interface (GUI) of an application. Once built they allow a user that has no knowledge of Vehicle Spy to perform complex tasks with the program. This tutorial will build a very basic Graphical Panel with only two tools. It is possible to have dozens of tools across multiple panels.

### 1. Open the Graphical Panels Tab:

Select **Measurement** > **Graphical Panels** from the main menu.

### 2. Create the necessary Tools:

Select the **LED Control** (Figure 1:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smOne.gif)) at the bottom of the screen. Click anywhere inside the Graphical Panel to place the LED. Next, select the **Power Control** (Figure 1:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smTwo.gif)) at the bottom of the screen to add an on/off button. Click anywhere in the graphical panel to place the on/off button.

![Figure 1: LED and Button Controls for a graphical panel.](https://2280262322-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3KyOmcYmM6ZVd3OQDa1%2Fuploads%2FhOOK5WyINIUmG6DbaTOm%2Fspyfbexample2.2.1.gif?alt=media\&token=4937368a-87ec-44f4-afd8-6547650f7e4c)

### 3. Change the Tool Properties:

Select the LED that was placed in the graphical panel. Once the LED is selected, find the **Caption** property (Figure 2:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smOne.gif)), and change it **Playback Status**. Select the **Show Caption** (Figure 2:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smTwo.gif)) and select **1-Yes** from the pulldown. Select your **On/Off button** and change the **OnText** property to **Running** and the **OffText** property to **Stopped**. The caption for the On/Off Button changes depending whether it is set on or off.

![Figure 2: Properties setup for Controls](https://2280262322-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3KyOmcYmM6ZVd3OQDa1%2Fuploads%2FxcrldhSqbhgnkVMFHKgs%2Fspyfbexample2.2.2.gif?alt=media\&token=8201aa05-e86e-4a94-9612-cbe8f5180357)

### 4. Attach the Controls to the Application Signals:

Click the LED, then double click the **Signal** property from the right. This will open the [Expression Builder](https://docs.intrepidcs.com/vspy-3-documentation/3.9.12/shared-features-in-vehicle-spy/shared-features-expression-builder). From here, select the **App Signals** (Figure 3:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smOne.gif)) category from the left. Double click the **Playback Indicator** signal (Figure 3:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smTwo.gif)) to enter it into the expression field. **OK** (Figure 3:![](https://cdn.intrepidcs.net/support/VehicleSpy/assets/smThree.gif)) will confirm the changes. By default when the signal value that the LED is attached to equals 1, the LED will be lit. Now, do the same for the On/Off button, except this time double click the **Playback Control** application signal. The On/Off button will change the signal value to either a 1 or a 0 depending on it's position (on or off).

![Figure 2: Selecting the proper signal](https://2280262322-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC3KyOmcYmM6ZVd3OQDa1%2Fuploads%2Fly02xx1FyyKlowuMHZ9x%2Fspyfbexample2.2.3.gif?alt=media\&token=bc805a48-fef8-48ea-b251-b0db0ae2d618)
