gui development with...window builder for rapid development • full wysiwyg development • gui...

External Use

GUI Development with

PEG Pro Software

FTF-SDS-F0072

A P R . 2 0 1 4

Clark Jarvis | Software Technical Marketer

External Use 1

Agenda

• Introduction to PEG

− Overview, Suites, Licensing Model

• PEG Enablement

− Evaluation, Precompiled Libraries, Example Application, Support

• PEG Building Blocks / Workflow

− Window Builder, Configuration, PEG Libraries, Builds

• PEG Hands-On

− Window Builder Walk-Through

− Customizing the PEG Game Demo

− Creating a new module

External Use 2

PEG Graphics Suite - Any LCD. Anywhere

User GUI Application(s)

PEG Core Source Files

RTOS Driver

Underlying OS

Screen Driver

Display Panel

Input Driver

Touch Overlay /

Input Device

• Any RTOS and Tool: − Freescale CodeWarrior, IAR Embedded

Workbench, 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 Power

Architecture

− 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

External Use 3

PEG Graphics Suite Comparison

Free on Freescale Silicon,

Basic UI Widgets, Minimal

Set of Predefined Elements

Customizable UI Widgets,

Full Set of Predefined

Elements

Higher Color Depth, Effects,

Customizable UI Widgets,

Full Set of Predefined

Elements

Color Depth Monochrome to 65K High

Monochrome to 16.7M

True Color

65K High Color to 16.7M

True Color with Alpha

Custom Bitmap Elements Buttons and Images …adds Widgets and Animation

Predefined Widgets Text Button, Checkbox,

Radio, Progress Bar, Slider,

Dial, Scroll, Combo Box, …

…plus, Windows, Charts,

Spreadsheet, Tables, Tabs,

Menu and Status Bars, …

…adds gradients and

transparency effects

Multilingual Support Dual Language Full Multi-lingual

Anti-Aliasing Simple Anti-Aliasing True Anti-Aliasing

Window Builder Full WYSIWYG editor with integrated Font Capture and Image Converter

Additional Features Runtime themes/skins,

Runtime image decoding

…adds swipe detection,

alpha blending

Starting Cost

(10K Runtime License)

$6,000 (Free on Freescale Silicon)

$7,000 $7,500

PEG Lite is offered as a free license on Freescale silicon,

initial year of support is not included.

External Use 4

PEG Graphics Software Window Builder for rapid development

• Full WYSIWYG development

• GUI Code Generation

• Desktop simulation environment

• Runs on PC / Linux / X11

to allow proof of concept

development

• Enables hardware / software

development in parallel

• Free evaluation includes full

Window Builder application for all

PEG versions

External Use 5

PEG Graphics Software Runtime for flexible GUI framework

• Portable GUI application layer

• Full access to PEG source code

• RTOS Integration Driver

• Bare metal

• MQX or other RTOS

• Linux

• Configurable Screen Driver

• Integrated LCD Controllers and Smart Display Panels

• Range of color depth options

• Flexible Input Driver

• Analog and Digital interfaces to input devices

• Polling or message driven communication

User GUI Application(s)

PEG Core Source Files

RTOS Driver

Underlying OS

Screen Driver

Display Panel

Input Driver

Touch Overlay /

Input Device

External Use 6

PEG Graphics Software Scalable Licensing Tiers

Allows for a PEG binary application to be deployed on an unlimited

lifetime number of units from a product family based on similar

hardware and restricted to a common MCU.

Allow for a PEG binary application to be deployed on an unlimited

lifetime number of units from a product family based on similar

architecture without being restricted to a common MCU.

Allows for a PEG binary application to be deployed on an unlimited

lifetime number of units of a single end product.

Allows for a PEG binary application to be deployed on up to 10K

lifetime units of a single end product.

Limited Runtime

License

Unlimited Runtime

Product License

Unlimited Runtime

Family License

Unlimited Runtime

Extended Family License

External Use 7

Sample Applications & Customer Products

• Currently used in:

− Consumer electronics

− GPS & Navigation Controls

− Industrial Controls

− Medical Devices

− Phones (Cell, Desktop, Video)

12+ 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

External Use 8

Agenda

• Introduction to PEG − Overview, Suites, Licensing Model

• PEG Enablement − Evaluation, Licensed Version, Support

• PEG Building Blocks / Workflow − Window Builder, Configuration, PEG Libraries, Builds

• PEG Hands-On

External Use 9

PEG Enablement Full Version – Buy Direct on www.freescale.com/peg

Window Builder

pconfig.hpp

GUI 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

Source Files

PEG Source Files

Example Windows

Application

Example Tower

Application

External Use 10

PEG Enablement Evaluation Version – Request form on www.freescale.com/peg

Window Builder

pconfig.hpp

GUI 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

Source Files

PEG Source Files

Example Windows

Application

Example Tower

Application

External Use 11

PEG Community / Standard Support

• Who has access to this level of support? − Anyone who has downloaded and registered any version of PEG

(including evaluation versions and PEG Lite)

• What does this level of support cover? − Basic “Getting Started” support

− Installation and basic usage support of PEG development tools

− Support running existing demos on Windows and supported Freescale evaluation platforms

(Tower, etc)

− Any support provided on the Freescale Communities

• How is this support provided? − Service Requests will be responded to via the Freescale Technical Support Center

(www.freescale.com/support)

− Dedicated Freescale Community support driven by members (including Freescale

contributions)

• How much does the support level cost? − Free (Freescale silicon and non-Freescale silicon)

External Use 12

PEG Licensed / Professional Support and Maintenance

• Who has access to this level of support? − Anyone who has a valid PEG support plan.

1-year of support is included with a valid license of PEG, with purchasable 1-year extensions

• What does this level of support cover? − Responses to any inquiries beyond “Standard Support” with the exception of custom driver

development and testing

Source code related questions and project integration support

Driver development guidance (excluding driver development)

− Maintenance of PEG application

Access to new releases and patches

• How is this support provided? − Service Requests will be responded to via dedicated PEG Development Engineers

• How much does the support level cost? − 1-year included with valid PEG License

− 1-year extensions, price depends on current license type, refer to www.freesale.com/peg

for complete pricing* details

*1-year support extension is typically 20% of license cost.

External Use 13

PEG Driver Development Support

• Who has access to this level of support? − Anyone with a valid PEG support plan who has purchased a PEG Driver Development

Package

− PEG Driver Development Packages available for:

Screen Drivers, RTOS Drivers, and Input Drivers

• What does this level of support cover?

− Basic driver development for any compatible hardware Driver development only, no modifications to PEG source code to accommodate unique circumstances.

Validation of driver on actual hardware provided to Freescale under Freescale specific NDA, hardware non-returnable

• How is this support provided? − Drivers developed by PEG Development Engineers

• How much does the support level cost?

Screen Driver RTOS Driver Input Driver

Freescale Silicon $2,500 $1,500 $2,000

Non-Freescale Silicon $4,500 $2,000 $3250

External Use 14

PEG Driver Development Support for Freescale Developed Hardware (Tower System, EVBs, …)

• Who has access to this level of support? − Anyone with a valid PEG license, including PEG Lite (excludes evaluation-only licenses)

• What does this level of support cover?

− Development of basic PEG drivers for any Freescale-developed

evaluation platform capable of supporting PEG, with Freescale supplied

OS (MQX or Linux BSP)

• How is this support provided? − Drivers developed by PEG Development Engineers

• How much does the support level cost? − No Cost, new drivers developed upon request only

External Use 15

PEG Professional Services

• Who has access to this level of support? − Anyone who has downloaded and registered any version of PEG and has agreed to pay for

professional services under a respective Statement of Work

• What does this level of support cover? − Source code modifications

− Custom widget development

− Advanced driver development

• How is this support provided? − Statement of Work fulfilled by dedicated PEG Development Engineers

• How much does the support level cost? − Pricing is subject to the respective Statement of Work and aligns with the Freescale

Professional Service rates

External Use 16

Agenda

• PEG Enablement − Evaluation, Precompiled Libraries, Example Application, Support

• PEG Hands-On

External Use 17

Window Builder - WYSIWYG Layout Editor

• Window Builder 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

External Use 18

Configurable runtime library with modular interface drivers

Screen Driver

− The screen driver interfaces between the PEG Library and the display 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

− Input 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

External Use 19

Resource Management (Images, Themes, Fonts, Languages)

Resource Panel

External Use 20

Understanding the PEG components Auto-Generated Files

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

External Use 21

Understanding the PEG components Creating a Pre-compiled PEG Library with a C++ Tool Chain

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)

External Use 22

Understanding the PEG components Creating a PEG Application with a C++ Tool Chain

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

External Use 23

Development Environment Options

Accelerates GUI design by creating prototypes on a

Windows® or Linux® based PC Develop directly in an IDE specific to hardware

External Use 24

Review

• 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.

• Window Builder 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.

Learn more at: www.freescale.com/PEG

or contact pegsales@freescale.com

External Use 25

Key Takeaways

• PEG Lite is available for free when used on Freescale silicon. A yearly professional level support agreement can be purchased separately.

• PEG Plus and Pro licenses include the initial year of professional level support and can be renewed for continued support and access to new releases.

• All users of PEG will have access to the Freescale Community for common inquiries that are supported by the community.

• Driver development packages can be purchased. This package provides a basic driver developed specifically for the target hardware.

• Professional Engineering Services can provide advanced driver development and PEG code optimizations.

Learn more at: www.freescale.com/PEG

or contact pegsales@freescale.com

External Use 26

Agenda

• PEG Enablement − Evaluation, Precompiled Libraries, Example Application, Support

• PEG Hands-On

External Use 27

Hands-On

Window Builder Walk-Through

External Use 28

Window Builder Walk-Through Configuration Mode – Target Environment

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

RTOS / Bare Metal

Target CPU /

Endianess

External Use 29

Window Builder Walk-Through Configuration Mode – Target Settings

Screen

Driver

Color Depth Resolution

Driver

Options

Input/ Touch

Driver

File I/O

Support

External Use 30

Window Builder Walk-Through Resource Mode – Generation Options

Source Code

Binary

Filename

Available

Languages

External Use 31

Window Builder Walk-Through Resource Mode – String Table

String ID

String Table

String Edit Area

String Toolbar

(add / remove)

Number of

References

External Use 32

Window Builder Walk-Through Resource Mode – Fonts

User Fonts

Font Creator

Integrated

Font Creator

External Use 33

Window Builder Walk-Through Resource Mode – Image Groups

Image Preview User Image

Image ID

(BID_)

Image Options

Add New

Images

External Use 34

Window Builder Walk-Through Resource Mode – Colors

User Defined

Colors

Custom Color

Dialog

Add / Edit

Custom Colors

External Use 35

Window Builder Walk-Through Application Mode - Overview

PEG Object List

(Hierarchy)

WYSIWYG

Editor

PEG Object

Settings Panel

WYSIWYG

Editor Toolbar

External Use 36

Window Builder Walk-Through Application Mode – Add Menu

• 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

External Use 37

Window Builder Walk-Through Application Mode – PEG Object Settings

PEG ID – When Object should be

interactive

Basic Settings

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

External Use 38

Extended Settings Panel

Dynamic, based on Object Type

String ID

(from String Table)

Initial Text

External Use 39

Bitmap Settings Panel

Dynamic, based on Object Type

Image with focused

Normal State Image

Image when pressed

External Use 40

Window Builder Walk-Through Application Mode – Edit / Layout Menu

Size / Position

Alignment

Cut/Paste

PEG Objects

External Use 41

Window Builder Walk-Through Application Mode – View Menu (Test Mode)

Grid-Snap

Options

Simulation

Test Mode Test Mode View

External Use 42

Window Builder Walk-Through Auto-Generating Code

Generate pconfig.hpp

Generate Source Code

(.cpp/.hpp)

Generate Resource

(Binary or Source)

Generate All Files

External Use 43

Hands-On

PEG Game Demo Modifications

Creating a new PEG Module

External Use 44

Creating a new PEG Module

• Project -> Add Module

− Provide “Filename” & “Class Name”

− Specify Base Class as “PegWindow”

• Resources

− Create new PegFont (Default Theme -> Fonts)

TrueType Font / Size = 48 / Anti-Aliased

Generate, Save, and Add PegFont to Theme

− Create new String Table Entry

Add New String ID entry

• ID: “SID_NUMBER” / Value = “50”

− Add New Images to Group (Default Theme -> Images -> Group1)

Browse / Import / Keep Alpha

External Use 45

Add -> Button -> PegBitmapButton

• Provide ID

• Check :

“Catch Signals” & “Transparent”

• Down Action + Auto Repeat

• Set Bitmaps

Add -> Text-> PegPrompt

• Provide ID

• PtrName = “pNUMBER”

• Check “Member Pointer”

• Font = new font

• Initial Text ID: “number”

• Justification: Center

Add -> Button -> PegTextButton

• Provide ID

• Check : “Catch Signals”

• Initial Text ID: “BACK”

• Resize Color Gradient Height

• Color = Default

Add -> Button -> PegBitmapButton

• Provide ID

• Check :

“Catch Signals” & “Transparent”

• Down Action + Auto Repeat

• Set Bitmaps

Screen

• No frame

• Set background

• Define navigation for “Title” and

new screen

External Use 46

Integrate into Project

• Generate Resources and Application

• Drap-and-Drop new screen file into IAR project

• Code modifications:

− Global variable: PEGCHAR temp[5];

− Increment Value (Catch Signal for Up button): PegLtoA(PegAtoI( pNUMBER->DataGet() )+1,temp,10);

pNUMBER->DataSet(temp);

− Decrement Value (Catch Signal for Down button): PegLtoA(PegAtoI( pNUMBER->DataGet() )-1,temp,10);

pNUMBER->DataSet(temp);

− Copy Resource to SD Card / Compile and Flash project

www.Freescale.com

gui development with...window builder for rapid development • full wysiwyg development • gui...

Documents

ios development (part 3) - additional gui components

gui application development

linux rad/gui development kylix – rapid application...

midp gui development: alert, list, form, textbox

report on gui development in python

spu bundle x11

automated gui testing · automated gui testing functional...

web gui-development with qooxdoo

gui development with matlab: gui front panel components gui...

unix gui guntis barzdins girts folkmanis. exception: macos x...

x11 basics - emory...

gui development using matlab for fft

gui development with qt -...

n java gui development n get more...

x11 drill practice

the x11 procedure

108-11-05 gui for development of remes models remes gui...

gui development

gui development with qooxdoo

swift gui development without xcode