GUI Composer application designer is bundled with Code Composer Studio. You may start GUI Composer from View menu. You will need to enter project name when GUI Composer first starts. You can then start creating your application by selecting appropriate widgets and dropping them onto a blank page.

The basic flow of creating an application is to:
1. Select a widget from left hand pane and place it on GUI Composer design page, then position it as desired.
2. Adjust its size and properties through Properties view on the right hand side. Size and properties of the widget are available under Widget Specific properties category.
3. Bind this widget to a global variable in your target application by modifying value field in Widget Binding category in Properties view. The simplest way of avoiding mistakes is to have CCS project open in CCS, open the source file and highlight the appropriate variable copy it (CTRL-C) and then click on value field in GUI Composer in Properties view and paste the variable name (CTRL-V).

Preview Application:

GUI Composer provides a feature that allows you to preview(test) your application directly within Code Composer Studio. Click on preview GUI Composer button to start this mode. Runtime that is built into Code Composer Studio will automatically initiate widget variable binding to currently active debug session or will initiate binding process when program is loaded if a debug session is started after Preview mode is started. Before GUI Composer preview application starts to function you will need to have a debug session started and program needs to be loaded. In Preview mode you can interact with widgets as a end user would. We suggest opening CCS Expression view and adding variables that are bound to widgets to verify that variables are modified as expected when user interacts with widgets.

Export Application:

Once you complete development of your application you may export it for use with GUI Composer Runtime. Click on Deploy button, you will be asked to select location for .zip file, default connection(emulator), device and program (.out) file that is to be automatically loaded when this application is started.

Application Export Important Notes:

GUI Composer export automatically generates a DSS script that performs system intialization tasks. The default script starts a debugger, connects, loads a program and runs the target. In addition to performing these steps the debugger mode is enabled to halt the CPU before making a target access. This allows for greatest compatibility across various devices. However, if your application requires non-intrusive target access and your HW (device/emulator) supports it then please modify "appInitScript.js" and comment out or remove this line session.options.setBoolean("UseLegacyStopMode", true); Furthermore, some targets may require a special mode to be enabled to allow non-intrusive access. e.g. C2000 family of devices requires following lines to be added to "appInitScript.js" between load program and run program steps. print("Enabling Realtime\n"); session.expression.evaluate("ST1.DBGM = 0"); session.expression.evaluate("GEL_EnableRealtime()");