CCS Overview Workshop

GUI ComposerEmbedded Development Tools

CCS APPS1OutlineOverview of GUI ComposerWhy to use itWhat you can do with itExamplesArchitectureData transferLabCCS APPS

What is a LaunchPad?Low cost, easy-to-use development tool intended for beginners and experienced users alike for TI microcontroller devices

Complete development environment that features integrated USB-based emulation and all of the hardware and software necessary to develop applications

CCS APPSLaunchPad Layout

USB JTAGUSB SerialICDI JTAG EmulatorMicrocontrollerBoosterPackconnectionGeneral Purpose ButtonsSwitch Power USB/SerialCCS APPS

LaunchPad: Hardware SetupAgenda

USB JTAG ConnectionUSB Serial ConnectionCCS APPS

GUI Composer: See & ControlCreate GUI applications that provide:Visibility into what is happening in the target applicationThe ability to control target variables

CCS APPSWhether it is part of a product demo or even a tool to help monitor or debug your application, there is often a need to have a simple host user interface that can visualize or even control target applications. This is where GUI Composer comes in. GUI Composer provides a framework to build and deliver rich HTML 5 based GUI applications for embedded systems. GUI Composer enables the quick development and deployment of these applications.6When to use GUI ComposerWhile debuggingCreate simple displays that allow you to quickly see target status in a meaningful wayStandalone applicationsCreate GUI applications that allow you to see and control your application outside of the CCS environment. Great for demonstrationsCCS APPS

GUIs are Comprised of WidgetsGUI Composer Applications are made up of HTML5 widgetsControl widgets (dials, edit boxes)Let you adjust the value of target variablesDisplay widgets (meters, graphs, lights)Show the value of target variables

CCS APPSGUI Composer generates user interfaces that are comprised of a set of HTML 5 widgets. These widgets are then connected or binded to variables or locations in the target system.

When a control widget like a dial or slider has been connected to a target variable or address any adjustments made to the widget will result in a change in that variable or location in the target system. For example you could use a dial to change a variable that controls the speed that a motor is spinning at.

When a display widget like a gauge or graph is connected then the value is read from the target system and the value is displayed in the widget.

8Example Application: InstaSpinGUI application for demonstrating motor control development kitWidgetsKnobsGraphsMetersStatus lightsSlidersEdit boxes

CCS APPSCustomize how Widgets LookMost widgets can be customized to get the exact appearance that you want.Adjust:DesignColorLabelsNumber format

CCS APPSGUI Composer Builder

CanvasPropertiesProjectPaletteCCS APPSThe development environment allows you to quickly drag and drop from a selection of widgets including dials, meters and graphs and add them to your custom user interface. You can customize the widgets to get the exact look and then bind the widget to a target variable or address by adjusting the widgets properties.

11Application ModelsProgram ModelCCS Debugger is used to translate Symbols to addressesWrites to the target are done via JTAG or via a command to a target monitorData is requested by the GUI applicationJTAG or Serial connections are usedStreaming ModelData is streamed from the target application up to the hostSerial or Ethernet connections are usedCCS APPSProgram ModelSymbol translationSymbols are translated to addresses by the CCS debuggerData displayGUI application requests data and it is read over JTAG or via request to a monitor service running on the deviceData writesWrite is performed via JTAG or can be passed to a monitor service running on the device

Web serverDebug ServerJTAG

MonitorSerialCCS APPSThe generated user interface is a HTML5 GUI that can be viewed in a web browser or you use a generated application that leverages the GUI composer runtime and an embedded browser. Under this there is a light weight webserver that hosts the application. If using variables to access locations in the target system the debug server is used to resolve the symbols. You can then use JTAG or a serial connection to perform the accesses. JTAG is often used if the device supports non-initrusive accesses over JTAG. Otherwise you can use a serial connection which requires a small monitor to be placed in the target application. In these scenarios where the GUI application is initiating the requests for data we call it the Program Model.

Alternatively you can have the target system push the data up to the user interface . This can be done via a serial interface or in the future via ethernet . This scenario where the data is being streamed from the target back up to the host GUI application is called the streaming model . You can pick the solution that works best for your environment.

13Streaming ModelData displayTarget application pushes data up to the GUI for displayData writesData is passed to a monitor service running on the device

Web server

MonitorSerialEthernetCCS APPSThe generated user interface is a HTML5 GUI that can be viewed in a web browser or you use a generated application that leverages the GUI composer runtime and an embedded browser. Under this there is a light weight webserver that hosts the application. If using variables to access locations in the target system the debug server is used to resolve the symbols. You can then use JTAG or a serial connection to perform the accesses. JTAG is often used if the device supports non-initrusive accesses over JTAG. Otherwise you can use a serial connection which requires a small monitor to be placed in the target application. In these scenarios where the GUI application is initiating the requests for data we call it the Program Model.

Alternatively you can have the target system push the data up to the user interface . This can be done via a serial interface or in the future via ethernet . This scenario where the data is being streamed from the target back up to the host GUI application is called the streaming model . You can pick the solution that works best for your environment.

14Adjusting Data FormatIt is possible to adjust the value of data that is displayedData may be stored in 1 unit of measure on the device but you wish to display it in the GUI in anotherPre-processing FunctionTakes the value from the target and adjusts it for displayPost-processing FunctionTakes the value entered in the widget and adjusts it prior to writing it to the deviceCCS APPSTypes of ApplicationsCCS Plug-onFeature within CCSAvailable from view menu within CCSStandalone applicationCan be run without CCSRequires the GUI Composer runtime to be installedhttp://processors.wiki.ti.com/index.php/GUI_ComposerUsed for larger applicationsCCS APPSStandalone ApplicationConfiguration ViewAppears when the standalone app starts up and shows the progress of the connection to the device being initialized, program loaded/flashed and then runCan be accessed later if you need to re-initialize the target

Application ViewSwitches to this view when initialization is completeShows all your widgets

CCS APPSGUI Composer RuntimeTo function GUI Composer applications need access to services (target read/write)These services can be provided by CCS, or if CCS is not present then the are provided by the GUI Composer RuntimeSubset of CCS FunctionalityCan be bundled with GUI Composer applicationsCCS APPSLABSCCS APPSLAB RequirementsSoftware:Code Composer Studio v5.3 or laterDownload from http://processors.wiki.ti.com/index.php/Download_CCS and install into c:\tiTivaWare for C series 1.0 or laterGUI Composer Runtime for CCS (pick the one that matches your CCS) http://processors.wiki.ti.com/index.php/Category:GUI_Composer#DownloadsHardwareTiva C TM4C123G or LM4 Launchpad2 micro USB cables connected to the Launchpad and your PC.CCS APPSLAB conventionsLab steps are numbered for easier reference

Explanations, notes, warnings are written in blueWarnings are shown with Information is marked with Tips and answers are marked with Questions are marked with

CCS APPS21JTAG Transport: Exercise SummaryObjectivesCreate a simple GUI that will control the LED refresh rateLoad the blinky program onto the LaunchPadRun GUI composer to view and control the applicationTools and Concepts CoveredJTAG transport connectionGUI Builder toolVariable bindingTarget variable modificationTarget variable displayPre/post processing functionsCCS APPS22Lab: JTAG Transport example

30 minutesLaunch CCS and select a workspaceCCS APPS23Import blinky ProjectGo to Project -> Import Existing CCS Eclipse Project.Select search-directory and browse to the LaunchPad examples within the TivaWare installation directory: C:\ti\TivaWare_C_Series-1.0\examples\boards\ek-tm4c123gxl. Click OK.Select the project blinky.Click Finish.

CCS APPSModify the CodeThe imported project is shown in the Project Explorer. Expand it to show its contents.Double-click on blinky.c to open it.Add a global variable called delay after the include statements.

Change 200000 in both for loops to use the variable delay.

Click the Save button to save the file.

CCS APPSOpen GUI ComposerGo to View -> GUI Composer.

Double-click on the GUI Composer tab to maximize it

CCS APPSCreate a New GUI Composer ProjectClick on the New Project button.

Name the project Lab1 Blink.

Click OKThis opens a file called app.html in the GUI Composer Editor which is your HTML5 source file. On the right-hand side you will see the Palette and Project list. The middle area is your canvas.

CCS APPSAdd a DialGo to the Palette on the left. It should be open by default.Expand Instrumentation.Click on Dial, drag it onto your canvas in the middle of the screen and release the button. Place it at the top left of the canvas.

CCS APPSChange the Appearance of the DialSelect the dial on the canvas.A blue square will appear around it when selected.Click on Widget on the right.This will display some properties of the selected Widget.Set the following properties:Minimum value = 0Maximum value = 100Current value = 1Number Format = standardFrame Design = brassDial Design = turned

CCS APPSBind a Variable to the DialMake sure the dial is selected.Select Binding on the right.Enter delay as the value.If you have your symbol file for the target application loaded then you can see global variables via the Modules view in CCS.Click on the button beside value.Add a pre-processing function called divideTenthousand.Add a post-processing function called timesTenthousand.Click OK.

CCS APPSDefine Pre/Post Processing FunctionsDouble-click on app.js in the Projects area at the bottom left.This opens app.js in the CCS Editor with some stub functions.In the divideTenthousand function change return valueFromTarget; to return valueFromTarget/10000;

In the timesTenthousand function change return valueToTarget; to return valueToTarget*10000;

Press the Save button on the main toolbar.

CCS APPSPreview the AppClick on the GUI Composer tab in the editor.Click on the Save button.Click on the Preview button at the top right.Note if you have the program loaded on the device then preview mode will allow you to use the widget.If there are errors a red X will appear. One is seen now as symbols are not loaded.

Click on the Exit Preview Mode button.

CCS APPSGenerate App as a CCS Plug-inClick on the Install Project button in the Projects area.

Name the App Lab 1A and click OK.

There will now be a menu item for the App on the View menu.

CCS APPSLoad Target ApplicationIf the Project Explorer is not visible double-clickon the GUI Composer tab to restore it to its normal size.Select blinky in the Project Explorer.Click the Debug button to build the project, flash the program and run to main().Click on the Expressions view and add delay.Click the Continuous Refresh button.

CCS will now periodically read and display the value of delay.

CCS APPSTest the AppGo to the View -> Applications -> Lab 1A menu item to open the GUI Composer app.

Arrange the view so that you can see the dial.Click the Resume button to run the target application.Observe the blink rate.Click on the dial and adjust the value.Observe the blink rate as well as the value of delay in the Expressions view.

CCS APPSClean UpClick the X on the Lab 1A tab to close your GUI Composer app.

Click the Terminate button in the Debug view to close the debug session.CCS will shutdown the debugger and return to the Edit perspective.

CCS APPSExporting the ApplicationClick on the GUI Composer tab.In the Project area click on the Export Project button.Specify:Location of where to generate the zip file: C:\ti\Lab1B_Blink.zipDebug connection used: Stellaris In-Circuit Debug InterfaceTarget device used: Tiva TM4C123GH6PMProgram to load: C:\Users\\GUI Composer Workshop\blinky\Debug\blinky.out

CCS APPSAdd App to GUI Composer RuntimeOpen windows explorer at c:\ti.Right-click on Lab1B_Blink.zip.Select Extract All.Extract the files to c:\ti\guicomposer\webapps\Lab1B_Blink.

CCS APPSEdit Initialization ScriptOpen the appInitScript.js in a text editor.Remove the following line:

By default the script is set to have the debug halt the processor before performing memory operations. However as our device supports real-time memory operations we want to disable this mode.Save the file.session.options.setBoolean(UseLegacyStopMode, true);

CCS APPSRun the Standalone ApplicationClose CCS.Double-click on Launcher.exe located in c:\ti\guicomposer\webapps\Lab1B_BlinkThe splash screen will appear, then you will see it go through a startup sequence while it connects and flashes the program.

After the app is initialized try adjusting the dial.

CCS APPS