GUI Composer: Embedded Development Tools

(1)

GUI Composer

Embedded Development Tools

(2)

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions!

Start Free Trial Cancel Anytime.

(3)

(4)

Outline

•• Overview of GUI Composer

Overview of GUI Composer

–

– Why to use it

Why to use it

–

– What you can do with it

What you can do with it

–

– Examples

Examples

–

– Architecture

Architecture

–

– Data transfer

Data transfer

•• Lab

Lab

(5)

(6)

(7)

What is a

LaunchPad?

•• Low cost, easy-to-use development tool

Low cost, easy-to-use development tool

intended for beginners and experienced users

alike for TI microcontroller devices

•• Complete development environment that

Complete development environment that

features integrated USB-based emulation and

all of the hardware and

all of the hardware and software necessary to

software necessary to

develop applications

(8)

(9)

(10)

LaunchPad Layout

USB J

USB JT

TAG

AG

USB Serial

ICDI JTAG Emulator

Microcontroller

BoosterPack

connection

Switch Power

USB/Serial

(11)

(12)

(13)

LaunchPad: Hardware Setup

USB JTAG Connection

(14)

(15)

(16)

GUI Composer: See & Control

•• Create GUI applications that provide:

Create GUI applications that provide:

–

– Visibility into what is

Visibility into what is happening in the target application

happening in the target application

–

(17)

(18)

(19)

When to use GUI

Composer

•• While debugging

While debugging

–

– Create simple displays that allow you to quickly see target status in a

Create simple displays that allow you to quickly see target status in a

meaningful way

(20)

(21)

GUIs are Comprised of Widgets

•• GUI Composer Applications are made up of HTML5 widgets

GUI Composer Applications are made up of HTML5 widgets

•• Con

Contro

trol wi

l widge

dgets (d

ts (dial

ials, e

s, edit b

dit boxe

oxes…)

s…)

–

(22)

(23)

Example Application: InstaSpin

•• GUI application for

GUI application for

demonstrating motor

control development

kit

(24)

(25)

Customize how Widgets Look

•• Most widgets can be customized to get

Most widgets can be customized to get the exact appearance that you

the exact appearance that you

want.

•• Adjust:

Adjust:

–

(26)

(27)

GUI Composer Builder

Canvas

Palette

(28)

(29)

Application Models

(30)

(31)

Program Model

(32)

(33)

Streaming Model

(34)

(35)

Adjusting Data Format

(36)

(37)

Types of

(38)

(39)

(40)

(41)

(42)

(43)

(44)

(45)

(46)

(47)

(48)

(49)

(50)

(51)

(52)

(53)

(54)

(55)

(56)

(57)

(58)

(59)

(60)

(61)

(62)

(63)

(64)

(65)

(66)

(67)

(68)

(69)

(70)

(71)

(72)

(73)

(74)

(75)

Preview the App

1 1..

C

Clliic

ck

k o

on

n tth

he

e GUI Composer

GUI Composer tab in the editor.

tab in the editor.

2 2..

C

Clliic

ck

k o

on

n tth

he

e Save

Save button.

button.

3 3..

C

Clliic

ck

k o

on

n tth

he

e Preview

Preview button at the top right.

button at the top right.

•

• Note if you have the

Note if you have the

program loaded on the device then preview

mode will allow you to use the widget.

•

• If there are

If there are

errors a red

X will appear.

One is seen n

ow as symbols

are not loaded.

(76)

(77)

(78)

Generate App as a CCS Plug-in

1 1..

C

Clliic

ck

k o

on

n tth

he

e Install Project

Install Project button in the Projects area.

button in the Projects area.

2

(79)

(80)

(81)

Load Target Application

1 1..

IIf

f tth

he

e Project Explorer

Project Explorer is not visible double-click

is not visible double-click

on the

on the GUI Composer

GUI Composer tab to restore it to its normal size.

tab to restore it to its normal size.

2 2..

S

Se

elle

ec

ctt

b l i n k y

in the

in the Project Explorer.

Project Explorer.

3 3..

C

Clliic

ck

k tth

he

e Debug

Debug button

button

to

to build

build the

the project,

project, flash

flash the

the program

program and

and

run to main().

4 4..

C

Clliic

ck

k o

on

n tth

he

e Expressions

Expressions view and add

view and add

delay

..

5

(82)

(83)

(84)

Test the App

1 1..

G

Go

o tto

o tth

he

e View -> Applications -> Lab 1A

View -> Applications -> Lab 1A menu item to open the GUI

menu item to open the GUI

Composer app.

2. 2. Ar

Arra

rang

nge t

e the

he vi

view s

ew so t

o tha

hat y

t you

ou ca

can se

n see t

e the

he di

dial

al..

3 3..

C

Clliic

ck

k tth

he

e Resume

Resume button

button

to run

to

run the

the target

target application.

application.

4.

(85)

(86)

(87)

Clean Up

1. 1. Cli

Click t

ck the X

he X on t

on the L

he Lab 1

ab 1A ta

A tab to

b to clo

close y

se your

our GUI

GUI Com

Compos

poser

er app

app..

2 2..

C

Clliic

ck

k tth

he

e Terminate

Terminate button

button

in

in the

the Debug

Debug view to close the debug

view to close the debug

session.

•

(88)

(89)

(90)

Exporting the Application

1 1..

C

Clliic

ck

k o

on

n tth

he

e GUI Composer

GUI Composer tab.

tab.

2. 2. In

In th

the P

e Pro

roje

ject

ct ar

area

ea cl

clic

ick o

k on t

n the

he Export Project

Export Project button.

button.

3 3..

S

Sp

pe

ec

ciiffy

y::

Location of where to generate the zip file: C:\ti\Lab1B_Blink.zip

(91)

(92)

Add App to GUI

Composer Runtime

1. 1. Op

Open

en wi

wind

ndow

ows e

s exp

xplo

lore

rer a

r at c

t c:\

:\ti

ti..

2. 2. Ri

Righ

ght-

t-cl

clic

ick on

k on La

Lab1

b1B_

B_Bl

Blin

ink.

k.zi

zip.

p.

3

(93)

(94)

Edit Initialization Script

1 1..

O

Op

pe

en

n tth

he

e

appInitScript.js

in a text editor.

2. 2. R

Rem

emov

ove t

e th

he f

e fol

olllow

owin

ing l

g lin

ine:

e:

session.options.setBoolean

(95)

(96)

Run the

Standalone Applicatio

n

1 1..

C

Cllo

os

se

e C

CC

CS

S..

2. 2. Do

Doub

uble

le-c

-clilick

ck on

on La

Laun

unch

cher

er.e

.exe

xe lo

loca

cate

ted i

d in

n

c:\ti\guicomposer\webapps\Lab1B_Blink

3.