hands-on workshop gui development with peg pro software · environment for peg+ and peg pro ... for...

TM

August 2013

TM 2

• Introduction to PEG

− Overview, Suites, Licensing Model

• PEG Enablement

− Evaluation, Precompiled Libraries, Example Application

• PEG Building Blocks

− Window Builder, Configuration, PEG Libraries, Builds

• Window Builder Walk-Through

− Basic features and aspects of Window Builder

3 TM

Application Layer

PEG Library

RTOS Driver

LCD Driver

Input

Drivers

RTOS

LCD Display

Any LCD. Anywhere Low Footprint (Starting 42KB)

• Any RTOS and Tool:

− Freescale CodeWarrior and MQX RTOS

− CMX, eCOS, Express Logic – ThreadX, GNU, GHS - INTEGRITY, Keil RTX, Mentor Graphics – Nucleus, Micro Digital SMX, Micrium uC/OS, Quadros RTXC

• Any Hardware:

− Freescale ColdFire, Kinetis, i.MX, and PowerPC

− Renesas H8,SH, MIPS , NXP, Samsung, Marvell, Altera, Analog Devices, ST Micro, Texas Instruments

• Each product line has two components

− WindowBuilder – tool to build the UI and auto-generate the application source files

− PEG Runtime Library – code that executes the UI on embedded devices`

4 TM

Designed for small

LCDs (QVGA)

Low color-depth

Very small footprint

Single window update

Multi-language capable

Written in ANSI C

• Screen transitions

• Multiple alpha-blended

windows

• True anti-aliasing

• Gradient manager

• Open GL support

• Written in C++

• Multiple window

updates

• Alpha-blended images

• Run-time image

decoders and

language resources

• Custom widget

integration

• Dynamic themes

• Written in C++

Starting at 42 KB

Typical 42-52 KB

Starting at 48 KB

Typical 48-72 KB

Starting 64 KB

Typical 64-96 KB

* C/PEG is no longer being actively developed.

Announcement coming soon regarding low cost alternative.

5 TM

• Full WYSIWYG

development

− Simulation

environment for PEG+

and PEG Pro

− Runs on PC / Linux /

X11 to allow proof of

concept development

− Enables hardware /

software development

to happen in parallel

− Made available for

free evaluation

Integrated design and simulation demo software that allows for

screen preview / navigation on a Windows or Linux-based

desktop environment.

WindowBuilder

6 TM

Application Layer

PEG Library

RTOS Driver

LCD Driver

Input Drivers

RTOS

LCD Display

• PEG software’s modular form extends an application across architectures and RTOS.

− The core library is separated from the interfaces to different RTOS’s, input devices, and screen controllers.

− Changing the drivers DOES NOT mean changing the application.

7 TM

• Currently used in:

− Consumer electronics

− GPS & Navigation Controls

− Industrial Controls

− Medical Devices

− Phones (Cell, Desktop, Video)

10+ years in the market place

• Customer Applications:

− TI’s Digital Imaging Products division

− HP Digital Cameras

− HP Multi Function Printers

− Stryker Instruments medical products.

− ST Micro Digital TV & set-top boxes

− Magellan’s Triton GPS system

− Mitel IP phones

TM 8



• PEG Enablement






9 TM

www.swellsoftware.com

http://www.swellsoftware.com/

10 TM

• Freescale Tower System

− TWR-K60N512 + TWR-LCD

− TWR-MCF5225X + TWR-LCD

− TWR-K70F120M + TWR-LCD-RGB

− TWR-PXD20 + TWR-LCD-RGB

• i.MX Evaluation Boards

− i.MX28 Evaluation Kit

− i.MX53 Quick Start Board

• Windows / Linux Development Environments

11 TM

Window Builder

pconfig.hpp

Screen Source /

Header Files

Resource Source /

Header Files

Screen / OS / Input

Header Files

PEG Header Files

PEG Pre-Compiled

Library for

Windows / Linux

Example Windows

Projects / Source

PEG Pre-Compiled

Library for

FSL Tower System

Example Tower

Projects / Source

Screen / OS / Input

Header Files

PEG Header Files

Example Windows

Application

Example Tower

Application

12 TM

www.freescale.com/peg

Window Builder

pconfig.hpp

Screen Source /

Header Files

Resource Source /

Header Files

Screen / OS / Input

Header Files

PEG Header Files

PEG Pre-Compiled

Library for

Windows / Linux

Example Windows

Projects / Source

PEG Pre-Compiled

Library for

FSL Tower System

Example Tower

Projects / Source

Screen / OS / Input

Header Files

PEG Header Files

Example Windows

Application

Example Tower

Application

13 TM

Window Builder

pconfig.hpp

Screen Source /

Header Files

Resource Source /

Header Files

Screen / OS / Input

Header Files

PEG Header Files

PEG Pre-Compiled

Library for

Windows / Linux

Example Windows

Projects / Source

PEG Pre-Compiled

Library for

FSL Tower System

Example Tower

Projects / Source

Example Windows

Application

Example Tower

Application

Screen / OS / Input

Header Files

PEG Header Files

TM 14



• PEG Enablement






15 TM

• WindowBuilder allows a designer to layout each of the screens

for a project through a simple-to-use interface, providing a

“What You See Is What You Get” display

Application Panel

16 TM

LCD Driver

− The LCD driver interfaces between the PEG Library and the LCD panel either through an onboard or external controller

RTOS Driver

− The driver interfaces between the PEG Library and the RTOS installed on the microprocessor. If an RTOS has not been selected, use the stand alone driver to jump start your development process.

Input Drivers

− Inputs drivers available in multiple forms, including, but not limited to, a touch screen, keypad or from other sources within the system

− Available input drivers compatible with Freescale Xtrinsic software and hardware solutions

Configuration Panel

17 TM

Resource Panel

18 TM

Main configuration header

pconfig.hpp

GUI Source / Header files (one set per screen)

<screen_name>.cpp / .hpp

Graphical Assets (Pre-rendered images, Fonts, Strings, Colors)

<filename>.cpp/.hpp

<filename>.prb/.hpp

Window Builder

Configuration Panel

Application Panel

Resource Panel

19 TM

Main configuration header

pconfig.hpp

Screen / OS / Input

Header Files

Screen / OS / Input

Source Files

PEG Header Files

PEG Source Files

PEG Pre-Compiled Library

(Target or Desktop Build)

20 TM

GUI Source / Header files

<screen_name>.cpp / .hpp

Graphical Assets (Pre-rendered images, Fonts, Strings, Colors)

<filename>.cpp/.hpp –or- .prb/.hpp

pconfig.hpp

Screen / OS / Input

Header Files

PEG Header Files

PEG Pre-Compiled Library

(Target or Desktop Build)

Application

21 TM

• Accelerates GUI design by creating prototypes on

a Windows® or Linux® based PC.

• Develop directly in an IDE specific to hardware

TM 22



• PEG Enablement






23 TM

− Configuration Mode

(configure the PEG library settings)

− Resource Mode

(import graphics, create fonts, define strings)

− Application Mode

(create screen modules and add PEG objects)

24 TM

For additional details refer to Section 1.3 of the PEG_Windowbuilder.pdf manual.

RTOS / Bare Metal

Target CPU /

Endianess

25 TM


Screen

Driver

Color Depth Resolution

Driver

Options

Input/ Touch

Driver

File I/O

Support

26 TM


Source Code

or

Binary

Filename

Available

Languages

27 TM


String ID

String Table

String Edit Area

String Toolbar

(add / remove)

Number of

References

28 TM


User Fonts

Font Creator

Tool

Integrated

Font Creator

29 TM


Image Preview User Image

Group

Image ID

(BID_)

Image Options

Add New

Images

30 TM


User Defined

Colors

Custom Color

Dialog

Add / Edit

Custom Colors

31 TM


PEG Object List

(Hierarchy)

WYSIWYG

Editor

PEG Object

Settings Panel

WYSIWYG

Editor Toolbar

32 TM

• Subset of Elements

− Buttons

PegTextButton – Basic “OK / Cancel”-style button

PegBitmapButton – Custom button with Normal / Press states

PegIconButton – Custom image with callback functionality

PegIcon – Basic image

− Text

PegPrompt – Basic Single-line Text

− Indicator

PegProgressBar – 0-100% Graphical Progress

PegCircularBitmapDial / PegFiniteBitmapDial – Custom Dials

− Slide/Scroll

PegSlider / PegBitmapSlider – Interactive Sliders

− Chart

PegMultiLineChart – Line Chart (point A to point B to ….)

PegStripChart – Scrolling Chart

− Window

PegWindow – Basic window element (primarily for grouping)

PegSpreadSheet – Spreadsheet implementation

For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual

and PEG_API_Reference_Manual.pdf

WYSIWYG

Editor Toolbar

33 TM


PEG ID – When Object should

be interactive

Basic Settings

Panel

PEG Pointer – When Object

should be modifiable at runtime

Member Pointer – PEG Object

should be accessible to class

Catch Signal – Auto-Generate

callback code section

34 TM


Extended Settings Panel

Dynamic, based on Object Type

String ID

(from String Table)

Initial Text

35 TM


Bitmap Settings Panel

Dynamic, based on Object Type

Image with focused

Normal State Image

Image when pressed

36 TM


Size / Position

Alignment

Cut/Paste

PEG Objects

37 TM


Grid-Snap

Options

Simulation

Test Mode Test Mode View

38 TM


Generate

pconfig.hpp

Generate Source Code

(.cpp/.hpp)

Generate Resource

(Binary or Source)

Generate All Files

39 TM

• Overview of PEG Pro Game Demo

− Review the components of the PEG Pro Game Demo

• Hands-on with PEG Window Builder

− Customize and Complete the PEG Pro Game Demo GUI

• Update the Application Layout Code

− Modify the layout and re-generate our code

• Update the Resource Binary

− Modify the resource images and update the SD Card

40 TM

• PEG is a portable embedded GUI library, API, and set of

development tools that are designed to help you create a

professional quality GUI for your real-time, multi-tasking

embedded application.

• WindowBuilder allows a designer to layout each of the screens

for a project through a simple-to-use interface, providing a

“What You See Is What You Get” display.

• Evaluate PEG today using example Desktop Environment

projects and pre-compiled Target Applications.

hands-on workshop gui development with peg pro software · environment for peg+ and peg pro ... for...

Documents