7.5. GC Component Library v3: UART Streaming with JSON¶

7.5.1. How to configure target communication components in detail¶

Create new project using Application v3 project template. Once you select v3 based Project Template there is a help text popup that has a link to component help with some code snippet examples of target communication configurations that you can use in your app. Target communication is configured differently in v3 based projects hence you will need to click OK on first page to create the project.

7.5.1.1. Option 1 (use code snippet as template):¶

If you used Project Wizard’s tooltip to open GUI Composer Component Help, then please move to next step. If it is not open, then please open GC Component Help by clicking on Help->Components Help->Components V3 menu and from the left component listing click on “gc-target-connection-manager” to select the help.
Select desired target communication code snippet, in this case USB-UART-JSON. Select and copy all lines starting with “<gc-target-connection-manager… and ending at </gc-target-connection-manager>
If your projects .gui file is not open or is not active, then open it by double clicking. Now switch to source mode by clicking on <> in main toolbar.
Locate ” <!– Add target communication configuration below this line –>” line and paste in the code snippet from connection manager help.
Now switch back to GUI Editing mode by clicking on <> in main GC Designer toolbar.
Switch left navigation bar to Outline view, this view shows the hierchical tree of all HTML tags e.g. widgets in your project. Near the top of the view there is a node called gc-target-connection-manager which includes other components that make up target communication configuration
Please select gc-transport-usb node, this selects the component and shows that components properties in right side properties view. We can now use properties view to further configure settings.
You will need to update deviceName to match device that you are using, TIP: You can enter a portion of device name to filter down the list or press <CTRL+spacebar> to see full list.
You may also need to adjust defaultBaudRate to match your firmware.
Optional Step : If you would like your application to have ability to program firmware, you will need to adjust properties of gc-target-program-loader component.
1. In Outline view; select gc-target-program-loader.
2. Set deviceName property to match the device that is on your EVM or LaunchPad. TIP: You can enter a portion of device name in property editor to filter down the list or press <CTRL+spacebar> to see full list.
3. You will also need to populate connectionName with Debug Probe used with your EVM or LaunchPad
4. Lastly set programOrBinPath property to match the program to use for programming. Firmware file should be uploaded to your application (e.g. In File View, create New Folder (e.g. firmware), right click on new folder and choose Upload File to choose firmware to upload)

7.5.1.2. Option 2 (Build target communication from base components):¶

In the Designer, open the Component Palette panel and expand the Transports, Models, and Codecs group
With the index.gui file opened in the editor area. Select the following components, drag and drop them anywhere onto the index.gui file
1. USB Transport (gc-transport-usb)
2. Delimited Text Codec (gc-codec-delimited-text)
3. Json Codec (gc-codec-json)
4. Streaming Model (gc-model-streaming)
5. Connection Manager (gc-target-connection-manager)
6. Program Loader (gc-target-program-loader). This is optional, flashing the target firmware
To configure the properties for the gc-transport-usb
1. In the Project Outline panel, select the gc-transport-usb
2. In the Properties panel, add your device name to the device-name property (this is required so that the connection manager picks the correct COM port)
To configure the properties for the gc-target-connection-manager
1. In the Project Outline panel, select the gc-target-connection-manager
2. In the Properties panel
  1. Add the usb+cr+json+streaming string to the active-configuration property
    1. The active-configuration property string is made up of component id’s that control the target communication data flow. In general the string has the following pattern <transport_id>+<codec_id>+…+<codec_id>+<model_id>
    2. The gc-codec-delimited-text codec by default uses a newline character to delimit the message
  2. Enable the auto-connect property
To configure the properties for the gc-target-program-loader
1. 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 and select Upload File and upload firmware file(.out)
2. Select the gc-target-program-loader in the Project Outline panel
3. In the Properties panel
  1. Add the <DeviceName> string to the device-name property
  2. Add the ` firmware/<firmwarefile>.out` string to the program-or-bin-path property
  3. Add the ‘Texas Instruments XDS110 USB Debug Probe’ string to the connection-name property
  4. Enable the auto-program property

7.5.1.3. Example¶

When everything is added correctly into the project, the index.gui file should look similar to text below (click on the ‘Toggle Code Editor’ toolbar button to toggle between source and WYSIWYG editor). In this particular example CC3220SF device is used as <DeviceName> with firmware.

<gc-transport-usb id=”usb” device-name=”CC3220SF”></gc-transport-usb>

<gc-codec-json id=”json”></gc-codec-json>

<gc-codec-delimited-text id=”cr”></gc-codec-delimited-text>

<gc-model-streaming id=”streaming”></gc-model-streaming>

<gc-target-connection-manager id=”gc_target_connection_manager” auto-connect active-configuration=”usb+cr+json+streaming”></gc-target-connection-manager>

<gc-target-program-loader id=”gc_target_program_loader” auto-program device-name=”CC3220SF” connection-name=”Texas Instruments XDS110 USB Debug Probe” program-or-bin-path=”./firmware/CC3220_Blink_Serial.out”></gc-target-program-loader>