< or greater
- With all **C2000 components** installed
**Hardware:**
- [F28379D LaunchPad (LAUNCHXL-F28379D)](https://www.ti.com/tool/launchxl-f28379D)
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
3. From the top menubar, open: **View → Resource Explorer**
4. Select the **timed_led_blink** example under *Embedded Software -> C2000Ware -> English -> Devices -> F2837XD -> F28379D -> Examples -> Bitfield -> cpu1* and click the **Import to IDE** icon
This will import the project into your workspace. The project will appear in the **Project Explorer** view if the import is successful
##Modify, build and run example CCS project
1. Right-click on the project, go to Build Configurations -> Set Active and select CPU1_FLASH
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_graph.c
4. Open the file LEDBlink.c and copy over the code from LEDBlink.c into LEDBlink_Flash_graph.c. This will make a copy of the file LEDBlink.c that we can then edit
5. Edit LEDBlink_Flash_graph.c and make the modifications shown below OR download the complete modified file from [here](LEDBlink_Flash_graph.c).
- At the top of the file, add a global variable led_status <br>
```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;
}
```
- Add more global variables and computation functions before main()<br>
```c
#define ARRAY_SIZE 20
volatile int input[ARRAY_SIZE];
volatile unsigned int first_output[ARRAY_SIZE];
volatile unsigned int second_output[ARRAY_SIZE];
volatile int Vin = 20;
volatile int Pin = 30;
volatile unsigned int Vout = 0;
volatile unsigned int Pout = 0;
void Init_input();
void Compute_output();
void Init_input()
{
int i = 0;
for( i = 0; i < ARRAY_SIZE; ++i) {
input[i] = i+ (i*10);
};
}
void Compute_output()
{
int i = 0;
for (i = 0; i < ARRAY_SIZE; i++)
{
Vout = input[i] * Vin;
first_output[i] = Vout * 0.025;
Pout = input[i] * Pin;
second_output[i] = Pout * 0.075;
}
}
```
- Call Init_input() before the for loop
```c
EINT; // Enable Global __interrupt INTM
ERTM; // Enable Global realtime __interrupt DBGM
Init_input();
//
// Step 6. IDLE loop. Just sit and loop forever (optional):
//
for(;;);
```
- Call Compute_output() inside the interrupt routine
```c
led_status = (led_status+1) % 2;
if (led_status){
GpioDataRegs.GPBCLEAR.bit.GPIO34 = 1;
} else {
GpioDataRegs.GPBSET.bit.GPIO34 = 1;
}
Compute_output();
//
// Acknowledge this __interrupt to receive more __interrupts from group 1
//
PieCtrlRegs.PIEACK.all = PIEACK_GROUP1;
```
Save the file
6. Right-click on the file LEDBlink.c in *Project Explorer* view and select *Exclude from Build*
7. 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
8. Uncheck the second entry **C28xx_CPU2** and click **OK**
CCS will switch to the CCS Debug perspective and be halted at main()
9. 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
10. 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 is tied to a global variable. Also added other global variables and computation functions
- Built and ran the program to verify operation
#LAB 2 - GUI Composer v2
Key Objectives
- Create a GUI Composer dashboard to
- display the LED status of the Launchpad
- plot global variables and arrays as graphs
- view and control value of global variables
- Bind GUI Composer widgets to variables 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 v2
###Create GUI Composer project (GCv2)
1. Open a web browser and go to Online GUI Composer: https://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 **Application**
4. Specify a **Project Name** and click on **Auto Fill** to auto-fill the **Application Name**
5. Click Next
6. In the Target Programming page, click on **Add**
7. For **Device**, select or type in F28379D. The **Connection** should auto-populate but you can change it if needed
8. For **Executable**, click on **UPLOAD**, browse to and select the executable file (timed_led_blink_cpu01.out) created by Lab 1
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 the Add toolbar icon in the left pane and select **XDS** to create a new transport of the XDS target communication type
12. Click on **Add** next to Available Models
13. A Program model should be added
14. Click Next
15. 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
16. Click OK
The GUI Composer designer will open with an empty dashboard
###Add widgets and bind variables (GCv2)
1. From the Component Palette, select *Instrument Tiles* then drag and drop a **LED** into the application. Components can also be found by searching using the search box.
2. Select the tile in the designer and click on the <img src="./images/pen.png"> icon in the right menubar to edit its properties.
3. In the property editor, bind the variable led_status to the "value" property of the tile widget by clicking on the <img src="./images/bind.png"> icon beside the "value" property.
There will be a dropdown list on the left and a textbox on the right. By default, 'my_model' is selected; this refers to the program model that was selected in the Target Communication page when creating the project.
In the textbox, enter the variable name **led_status**
4. From the Component Palette, select *Instrument Tiles* then drag and drop a **Slider** into the Application
5. In the property editor, bind it to variable **Vin** and set a few other properties as shown below
6. Follow the above two steps again to bind variable **Pin** to a Slider widget
7. From the Component Palette, select *Graphs & Charts* then drag and drop a **Line Graph** into the Application <br>
A Line Graph plots arrays of data as lines on a graph. It can display up to 4 lines at the same time, each with its own y-axis and with all values plotted against a common x-axis.
In this example, we will use it to plot two arrays: **first_output** and **second_output**
8. In the property editor, set the properties as shown below
9. From the Component Palette, select *Graphs & Charts* then drag and drop a **Scalar Graph** into the Application <br>
A Scalar Graph plots one or more data series from data samples streamed from the target device. Values are periodically plotted on a time scale.
In this example, we will use it to plot **led_status**
10. In the property editor, set the properties as shown below
11. Using the same procedures as above, add two **Number Box** widgets and bind them to **Vout** and **Pout**
12. Add **Label** widgets next to each **Number Box** to help identify the variable
13. The final GUI will look like this
14. Click the Run icon <img src="./images/preview.png"> in the designer's toolbar to preview the dashboard
The following steps occur
- New browser window or tab will open to display the application. Be aware that popup blocker may prevent the window from opening the first time
- Connect to TI Cloud Agent and download the program to device (if the **Auto Program** checkbox was enabled)
- When complete, the message will say "Hardware Connected"
The preview will look like this
{{b **Result**: <br>The LED tile should be blinking in sync with the LED on the board <br> The scalar and line graphs should be populated<br>Values of Vout and Pout should be displayed<br>Changing the Vin and Pin values using the slider should correspondingly change the values in the graph and Number Box}}
##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. After the installer completes, Click OK on the **Export Standalone App** dialog. This will download a zip file named after the GUI Composer project, in this case F28379D_Blinky_Graph.zip
4. Click CLOSE to close the dialog
5. To install the standalone app from the downloaded zip file, unzip the downloaded file and
copy the extracted application folder 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\<UserName>\guicomposer\runtime\gcruntime.v7```)
6. To run the application, follow the instructions [here](https://dev.ti.com/gc/designer/docs/readme.txt)
{{b If the app runs successfully, the GUI widgets should update similar to the previous section}}
#### Run within CCS desktop view
{{r Note: Running GUI Composer app within CCS desktop view currently has a bug that causes the CCS debug session to terminate as soon as the program is put to run. Until this bug is addressed, please run the application either as a standalone app or from the GUI Composer previewer}}
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_Blinky_Graph.zip
3. Click CLOSE to close the dialog
4. Unzip the downloaded file and copy the application folder that it contains to ```<CCSDesktopInstallRoot>\ccsv8\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_Blink_Graph
- Run the program by clicking the Resume button in CCS toolbar <br> **OR** <br>
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"
- Right-click on C28xx_CPU1 and select Connect Target
- 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_Blink_Graph
- Run the program by clicking the Resume button in CCS toolbar <br>
{{b If the app runs successfully, the GUI widgets should update similar to the previous section}}
##Summary (GCv2)
In this lab we completed the following:
- Created a GUI Composer application with few different widgets and bound global variables to the widgets
- Previewed the application to visualize the widgets
- Exported GUI Composer app to run as stand-alone app or within CCS desktop view
#LAB 2 - GUI Composer v3
Key Objectives
- Create a GUI Composer dashboard to
- display the LED status of the Launchpad
- plot global variables and arrays as graphs
- view and control value of global variables
- Bind GUI Composer widgets to variables in the code
- Preview the dashboard
Tools and Concepts Covered
- GUI Composer Designer
- GUI Composer Runtime
##GUI Composer Designer v3
###Create GUI Composer project (GCv3)
1. Open a web browser and go to Online GUI Composer: https://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 **Application v3**
4. Specify a **Project Name** and click on **Auto Fill** to auto-fill the **Application Name**
5. Click OK
The GUI file editor should be opened with the default getting started example.
6. In the Files view, right-click on the project name and select *New Folder*, enter *firmware* when prompted and press OK. Right-click on the new folder, select *Upload File* and upload the firmware (.out) for your device. In this example, the file is **timed_led_blink_cpu01.out**.
7. Go to https://dev.ti.com/gc/v3/components/index.html#gc-target-connection-manager and copy the code snippet under *XDS/JTAG*. This will be used to configure target communication. Make sure the .gui file in your project is open and if it is not, double click the file. Switch to source mode by clicking on <> in the main toolbar.
8. Locate the line with "<!– Add target communication configuration below this line –>" and paste in the code snippet below that line. Switch back to GUI Editing mode by clicking on <> in the main toolbar.
9. Switch left navigation bar to Project Outline - Tree View. This view shows the hierarchical tree of all HTML tags e.g. widgets in your project.
10. Near the top of the view there is a node called *gc-transport-xds*. Select this node and use the right side properties view to configure the component's properties. Update deviceName to match the device that you are using. You can press CTRL + space to see the full list of devices. You will also need to update connectionName with the Debug Probe used.
11. In Project Outline - Tree View, select the *gc-model-program* tag. In the Properties view, update the programOrBinPath to **./firmware/timed_led_blink_cpu01.out**. It should match the folder and filename from step 6.
###Add widgets and bind variables (GCv3)
1. From the menubar of the application, select *Configure, measure, and capture data*. This is the page where we will be adding widgets to.
2. From the Component Palette, select *Containers* then drag and drop a **Container** into the application. Next, select *Status Indicators* then drag and drop a **LED** into the container. Components can also be found by searching using the search box.
3. Select the Container in the designer and click on the <img src="./images/pen.png"> icon in the right menubar to edit its properties. Set the heading to "LED".
4. Select the LED in the designer. In the property editor, bind the variable led_status to the "on" property of the widget by clicking on the <img src="./images/bind.png"> icon beside the "on" property.
There will be a dropdown list on the left and a textbox on the right. By default, 'pm' is selected; this refers to the program model that was selected when configuring target communication.
In the textbox, enter the variable name **led_status**
4. From the Component Palette, drag another container into the application and set the heading to "Vin". Next, select *Inputs* then drag and drop a **Slider** into the container
5. In the property editor, bind it to variable **Vin** and set a few other properties as shown below
6. Follow the above two steps again to create a container and bind variable **Pin** to a Slider widget
7. From the Component Palette, drag a container into the application and set the heading to "Graph". Next, select *Graphs* then drag and drop a **Plot** into the container <br>
In this example, we will use it to plot two arrays: **first_output** and **second_output**
8. Toggle the code editor and search for a *gc-widget-plot* tag with an id attribute equal to the id of the widget you just added. This can be found in the Properties view of the widget if you switch back to GUI Editing mode.
- Nest two *gc-widget-plot-data-points-2d* elements within this tag and use the following attributes. These elements represent lines on the graph. Also, notice that each tag represents a widget, and the attributes represent properties of a widget. If you go back to GUI Editing mode and view the Properties, both values should match.
```c
<gc-widget-plot id="plot">
<gc-widget-plot-data-points-2d id="line1" implicit implicit-x capacity="20" legend-name="first_output"></gc-widget-plot-data-points-2d>
<gc-widget-plot-data-points-2d id="line2" implicit implicit-x capacity="20" legend-name="second_output"></gc-widget-plot-data-points-2d>
</gc-widget-plot>
```
- The graphs can be styled like below:
```c
#line1 {
--gc-line-color: rgba(0,0,255,0.8);
--gc-line-width: 3;
}
#line2 {
--gc-marker-color: rgb(255,0,0);
--gc-marker-size: 4;
--gc-line-width: 2;
}
```
You can view https://dev.ti.com/gc/v3/components/index.html#gc-widget-plot for more information.
8. Switch back to GUI Editing mode. Open the Project Outline - Tree View and select the first *gc-widget-plot-data-points-2d* node that you added in the previous step. In the property editor, bind the variable first_output to the "point" property of the widget
9. Repeat the previous step for the second *gc-widget-plot-data-points-2d* node, but bind the variable second_output.
11. Using the same procedures as above, drag and drop two **Label** widgets (under *Common*) into the application. Bind the *label* properties to **Vout** and **Pout**. Add a **Container** widget around each label to help identify the variable. Set the *heading* property accordingly.
13. The final GUI will look like this
14. Click the Run icon <img src="./images/preview.png"> in the designer's toolbar to preview the dashboard
The following steps occur
- New browser window or tab will open to display the application. Be aware that popup blocker may prevent the window from opening the first time
- Connect to TI Cloud Agent and download the program to device (if the **autoConnect** checkbox was checked for the *gc-target-connection-manager*)
- When complete, the message will say "Hardware Connected"
The preview will look like this
{{b **Result**: <br>The LED widget should be blinking in sync with the LED on the board <br> The graph should be populated<br>Values of Vout and Pout should be displayed<br>Changing the Vin and Pin values using the slider should correspondingly change the values in the graph and label}}
##Summary (GCv3)
In this lab we completed the following:
- Created a GUI Composer application with few different widgets and bound global variables to the widgets
- Previewed the application to visualize the widgets
<!-- End of markdown source -->
<div id="footer"></div>
]]>