NOTICE: The Processors Wiki will End-of-Life on January 15, 2021. It is recommended to download any files or other content you may need that are hosted on processors.wiki.ti.com. The site is now set to read only.
Example Application GUI Composer
GUI Composer Runtime ships with an example application that will be used to explain critical components of a GUI Composer created application.
You will need to install GUI Composer Runtime, please refer to Getting Started section.
Example Introduction[edit]
Example application is located in GCInstallRoot\guicomposer\webapps\modem_m3 directory. It is using a modem project that simulates processing of a modem signal. The target that is used in this example is CortexM3 (LE) simulator. The project and its source files are located in above mentioned directory in a zip file. You may import this project into CCSv5.3 to build/debug it. The example is quite simple it has a single dial that allows to control a g_ModemData.carrierFreq variable that can be used to adjust wavelength of the g_ModemData.OutputBuffer which is graphed in the top graph. A spinner control is also tied to the same CarrierFreq variable showing that mutliple widgets may be used to control the same target variable. This might be useful where coarse/fine grained control is required. Second graph is included purely for illustration purposes and it graphs g_ModemData.Idelay array.
Example Application Generated Files[edit]
Files listed below have been created with CCS GUI Composer Designer feature. They explain detailed implementation information that may be useful when attempting to edit/adjust generated application by editing files.
app.html : This is the main html page containing applications layout. This file is generated when GUI Composer is used to design the application by dragging and dropping widgets onto a page. Actual widgets included in this application are between <body> </body> tags. Below is an example of a single widget, in this case the dial widget. All widgets need to have a unique id and then specify data-dojo-type attribute which defines the type of widget. Remainder of parameters specify optional settings such as size, position, colors, min, max values, etc)
<canvas id="widget_915" data-dojo-type="gc.dijit.Dial" title="CarrierFreq" size="225" maxValue="50" labelNumberFormat="standard" fractionalScaleDecimals="1" frameDesign="tiltedBlack" dialDesign="anthracite" style="z-index: 9999; position: absolute; left: 20px; top: 23px;"></canvas> app.json: This is a json file that is automatically loaded by GUI Composer Runtime. Its file name needs to match its corresponding html filename. Json file contains specification information for widgets that interact with target data. Below is an example of a json entry that matches the dial definition. json entries are used to bind widgets to target applications global variables. widgetid needs to match the id from html file. In this case Dial widget mentioned above is bound to g_ModemData.carrierFreq variable from our target application.
{
"propertyName": "value",
"serverBindName": "value:pm.active.g_ModemData.carrierFreq",
"widgetId": "widget_915",
"options":
{"dataType": "Double"}
},
All widgets that GUI Composer supports have code snippet examples shown in GCInstallRoot\bind_examples. Each widget has a html file showing html code and its corresponding .json file.
appConfig.ccxml : This is an optional file that is used to configure a simulator. In most cases when HW is used, this file will not be necessary as the information provided during Export Application stage will be used to auto generate configuration information.
appInitScript.js: This is a DSS javascript file that is used to initialize debugger and target connection. This file performs following steps: configures the target, loads a program file and starts running the application. Some target/program combinations may require more complex initalization. E.g. a C2000 device may need to have real-time debug enabled to allow non-intrusive memory accesses through JTAG.
appProgram.out: This is the target application program that will be loaded when a GUI Composer application is started.
index.html: This is auto generated page that is part of default template. It is the default page that gets loaded when GUI Composer App is launched. It's main purpose is to show target initialization/connection status and then automatically load app.html upon succesful connection.
modem_m3_gc_app.exe : This is a generic executable that is used to start a particular GUI Composer application. This launcher may be renamed and its icons adjusted to match branding requirements of an application.
|
{{
Please post only comments related to the article Example Application GUI Composer here. |
Keystone=
Please post only comments related to the article Example Application GUI Composer here. |
C2000=For technical support on the C2000 please post your questions on The C2000 Forum. Please post only comments about the article Example Application GUI Composer here. | DaVinci=For technical support on DaVincoplease post your questions on The DaVinci Forum. Please post only comments about the article Example Application GUI Composer here. | MSP430=For technical support on MSP430 please post your questions on The MSP430 Forum. Please post only comments about the article Example Application GUI Composer here. | OMAP35x=For technical support on OMAP please post your questions on The OMAP Forum. Please post only comments about the article Example Application GUI Composer here. | OMAPL1=For technical support on OMAP please post your questions on The OMAP Forum. Please post only comments about the article Example Application GUI Composer here. | MAVRK=For technical support on MAVRK please post your questions on The MAVRK Toolbox Forum. Please post only comments about the article Example Application GUI Composer here. | For technical support please post your questions at http://e2e.ti.com. Please post only comments about the article Example Application GUI Composer here.
}} |
