#Overview
This tutorial provides an introduction to GUI Composer. It will show you how to build a dashboard using GUI Composer, and how to visualize the state of your Launchpad LED on the dashboard using XDS JTAG communication.
#Requirements
**Software:**
- [Code Composer Studio v7.3](https://www.ti.com/tool/ccstudio) or greater
- With all **C2000 components** installed
**Hardware:**
- [F28379D LaunchPad (LAUNCHXL-F28379D)](https://www.ti.com/tool/launchxl-f28379D)
![](./images/launchxl-f28379d.jpg)
Connect the LaunchPad to the Computer via mini-USB cable
#LAB 1 - Import, build and run LED Blink example
Key Objectives
- Import and build an example program that blinks the LED
- Modify the code to add global variable and tie the toggling of LED to the global variable
- Load and run the program to verify operation
Tools and Concepts Covered
- Resource Explorer
- Importing/Building/Running an example project/program
##Import example CCS project
1. Launch CCS with the Code Composer Studio desktop icon
2. Specify a location for your workspace when prompted. This is where your projects will be located. Use a path that does NOT use spaces or any non-alphanumeric characters, with the exception of the underscore character
[[b **NOTE:**
If you have not previously downloaded/installed C2000Ware, then follow Steps 3 through 6 below.
If you already have C2000Ware installed, proceed to Step 7
]]
3. Select **Browse Examples** in the **Getting Started** page
This opens the **Resource Explorer** that displays all available example projects. This includes all available content on the remote TI server, in addition to any content you may have installed locally
4. Select the device or board you are working with in the *Select a device or board* filter box in the top left corner. For this workshop, we select **F28379D**
5. Select the **Bitfield** examples under *Software -> C2000Ware -> English -> Devices -> F28379D -> Examples*
6. Click the **Download and install** icon. This will make a copy of the **C2000Ware** package that is on the Cloud onto your local machine. This is required to import any examples into your local CCS environment
![](./images/rex_download_1.png)
A prompt will appear, asking for confirmation. After agreeing to the prompt, the **C2000Ware** will start downloading
Once the download and installation to the local environment is completed, **C2000Ware** will appear in the Resource Explorer, highlighted with green arrows, indicating that it is available locally (offline) on your machine
![](./images/rex_download_2.png)
7. Select the **timed_led_blink** example and click the **Import to IDE** icon
![](./images/import_1.png)
This will import the project into your workspace. The project will appear in the **Project Explorer** view if the import is successful
![](./images/import_2.png)
##Modify, build and run example CCS project
1. Right-click on the project, go to Build Configurations -> Set Active and select CPU1_FLASH
![](./images/buildconfig_1.png)
This will set the build configuration to the Flash version of the project. Once this program has been loaded to Flash, it does not need to be re-programmed each time. This simplifies the procedure as GUI Composer does not need to program the device each time the connection is established
2. Right-click on the project name in Project Explorer view and select New ->File
3. Name the file LEDBlink_Flash.c
4. Open the file LEDBlink.c and copy over the code from LEDBlink.c into LEDBlink_Flash.c. This will make a copy of the file LEDBlink.c that we can then edit
5. Edit LEDBlink_Flash.c as shown below
- At the top of the file, add a global variable led_status
```c
volatile unsigned int led_status = 0;
```
- Modify the cpu_timer0_isr code as below
```c
__interrupt void cpu_timer0_isr(void)
{
CpuTimer0.InterruptCount++;
led_status = (led_status+1) % 2;
if (led_status){
GpioDataRegs.GPBCLEAR.bit.GPIO34 = 1;
} else {
GpioDataRegs.GPBSET.bit.GPIO34 = 1;
}
//
// Acknowledge this __interrupt to receive more __interrupts from group 1
//
PieCtrlRegs.PIEACK.all = PIEACK_GROUP1;
}
```
6. Save the file
7. Right-click on the file LEDBlink.c in *Project Explorer* view and select *Exclude from Build*
8. Select menu *Run -> Debug* to build/load/run the project. Alternatively you can click the Debug button on the toolbar
If a debug session for this device is being launched for first time, a dialog will prompt user to select which CPUs to load the program to. This dialog will appear if the device has multiple CPUs supported by the project
9. Uncheck the second entry **C28xx_CPU2** and click **OK**
![](./images/debug_launch_1.png)
CCS will switch to the CCS Debug perspective and be halted at main()
![](./images/debug_launch_2.png)
10. Select menu *Run -> Resume* or click the **Resume** button on the toolbar to run the program
Program will run and blink the red LED on the Launchpad
![](./images/f28379d_blinking.jpg)
11. Click the **Terminate** button on the toolbar to terminate the debug session
##Summary
In this lab we completed the following:
- Imported an example that blinks the LED from **C2000Ware** via the **Resource Explorer**
- Made modifications to the code such that the toggling of LED was tied to a global variable
- Built and ran the program to verify operation
#LAB 2 - GUI Composer
Key Objectives
- Create a GUI Composer dashboard to display the LED status of the Launchpad
- Bind GUI Composer widget to global variable in the code
- Preview the dashboard
- Export the GUI Composer application and run it either as a standalone app or within CCS desktop view
Tools and Concepts Covered
- GUI Composer Designer
- GUI Composer Runtime
##GUI Composer Designer
1. Open a web browser and go to Online GUI Composer: http://dev.ti.com/gc
2. In the Welcome page, click **CREATE A NEW PROJECT** to open the New Project wizard
3. For **Project Template** Select **Dashboard**
4. Specify a **Project Name** and click on **Auto Fill** to auto-fill the **Application Name**
![](./images/gc_project_1.png)
5. Click Next
6. Click the Add toolbar icon in the left pane and select **XDS** to create a new model of the XDS target communication type
7. In the right pane, for **Device** select or type in **F28379D**. The **Connection** should auto-populate
8. For **Executable**, click on **Upload...**, browse to and select the executable file created by Lab 1
![](./images/gc_project_2.png)
9. If the program has not been previously flashed to target, check the **Auto Program** check box . If the program has been previously flashed, the box does not need to be checked
10. Click Next
11. Click on **System Connect** to test that GUI Composer is able to communicate with the connected device. The console will display messages to verify connection and download the program. Verify that there are no errors in the console
![](./images/gc_project_3.png)
12. Click OK
The GUI Composer designer will open with an empty dashboard
13. Click the button at the bottom right of the designer to open the 'New Tile Wizard' dialog
14. For **Component Type**, select **Status Display**
For **Status Display Type**, select **LED**
Click **CREATE** to create a LED tile
15. Select the tile in the designer and click on the icon in the tile to edit its properties. You can also click on the icon at the right of the designer to open the full property page
16. In the property editor, bind the variable led_status to the "value" property of the tile widget by clicking on the icon beside the "value" property.
There will be a dropdown list on the left and a textbox on the right. By default, 'my_xds' is selected; this refers to the XDS data connection that was selected in the Target Communication page when creating the project.
In the textbox, enter the variable name **led_status**. Click Close
![](./images/tile2.png)
17. Click the Run icon in the designer's toolbar to preview the dashboard
The following steps occur
- New browser window or tab will open to display the dashboard. Be aware that popup blocker may prevent the window from opening the first time
- Connect to TI Cloud Agent and download the program (if the **Auto Program** checkbox was enabled)
- When complete, the message will say "Flash Successful", and then "Hardware Connected"
The dashboard preview will look like this
![](./images/tile_preview_1.png)
{{b The LED tile in GUI Composer Dashboard should now be blinking in sync with the LED on the board}}
##Export GUI Composer App
You can export your application and run it either as a standalone app or within CCS desktop view.
#### Run as stand-alone app
1. In GUI Composer designer, go to menu File->Export->as Stand-Alone app
2. Before clicking OK, click on the appropriate download link for GUI Composer Runtime Installer and run the downloaded installer
3. Click OK. This will download a zip file named after the GUI Composer project, in this case F28379D_Blinkled.zip
4. Click CLOSE to close the dialog
4. To install the standalone app from the downloaded zip file, unzip the downloaded file and
copy the application folder that it contains into the GUI Composer Runtime root folder.
(The GUI Composer runtime folder is the one that contains a file named version.xml, usually ```c:\Users\\guicomposer\runtime\gcruntime.v4```)
5. To run the application, follow the instructions [here](https://dev.ti.com/gc/designer/docs/readme.txt)
{{b If the app runs successfully, the LED tile in GUI Composer Dashboard should now be blinking in sync with the LED on the board }}
#### Run within CCS desktop view
1. In GUI Composer designer, go to menu File->Export->as CCS Desktop View
2. Click OK. This will download a zip file, in this case F28379D_Blinkled.zip
3. Click CLOSE to close the dialog
4. Unzip the downloaded file and copy the application folder that it contains to ```\ccsv7\eclipse\dropins-gc``` (you may need to create this folder if it does not exist)
5. Start CCS
6. If the CCS project is already open in the Project Explorer view:
- Click the Debug (green bug) button to start a debug session
- Open the GUI Composer app by going to menu View->GUI Composer->Applications->F28379D_Blinkled
- Run the program by clicking the Resume button in CCS toolbar
**OR**
If the CCS project is not open in Project Explorer view:
- Manually Launch debug session : open the Target Configurations view, select the appropriate target configuration file for the device, right-click on it and select "Launch Selected Configuration"
- Go to menu Run->Load->Load Symbols and browse to the .out file for the CCS project
- Open the GUI Composer app by going to menu View->GUI Composer->Applications->F28379D_Blinkled
- Run the program by clicking the Resume button in CCS toolbar
{{b The LED tile in GUI Composer Dashboard should now be blinking in sync with the LED on the board }}
##Summary
In this lab we completed the following:
- Created a GUI Composer dashboard and bound a global variable to GUI Composer widget
- Previewed the dashboard to visualize the widgets
- Exported GUI Composer app to run as stand-alone app or within CCS desktop view