hands-on workshop gui development with peg pro software · environment for peg+ and peg pro ... for...
TRANSCRIPT
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
• 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
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
• 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
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
• 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
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
For additional details refer to Section 1.3 of the PEG_Windowbuilder.pdf manual.
Screen
Driver
Color Depth Resolution
Driver
Options
Input/ Touch
Driver
File I/O
Support
26 TM
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
Source Code
or
Binary
Filename
Available
Languages
27 TM
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
String ID
String Table
String Edit Area
String Toolbar
(add / remove)
Number of
References
28 TM
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
User Fonts
Font Creator
Tool
Integrated
Font Creator
29 TM
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
Image Preview User Image
Group
Image ID
(BID_)
Image Options
Add New
Images
30 TM
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
User Defined
Colors
Custom Color
Dialog
Add / Edit
Custom Colors
31 TM
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
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
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
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
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
Extended Settings Panel
Dynamic, based on Object Type
String ID
(from String Table)
Initial Text
35 TM
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
Bitmap Settings Panel
Dynamic, based on Object Type
Image with focused
Normal State Image
Image when pressed
36 TM
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
Size / Position
Alignment
Cut/Paste
PEG Objects
37 TM
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
Grid-Snap
Options
Simulation
Test Mode Test Mode View
38 TM
For additional details refer to Section 1.6 of the PEG_Windowbuilder.pdf manual.
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.
TM