108-12-18 GUI for development of REMES models REMES GUI group.
GUI Development with...Window Builder for rapid development • Full WYSIWYG development • GUI...
Transcript of GUI Development with...Window Builder for rapid development • Full WYSIWYG development • GUI...
External Use
TM
GUI Development with
PEG Pro Software
FTF-SDS-F0072
A P R . 2 0 1 4
Clark Jarvis | Software Technical Marketer
TM
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
TM
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
TM
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
Color
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.
TM
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
TM
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
TM
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
PEG
Lite
/ P
lus
/ P
ro
TM
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
TM
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
− Window Builder Walk-Through
− Customizing the PEG Game Demo
− Creating a new module
TM
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
TM
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
TM
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)
TM
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.
TM
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
TM
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
TM
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
TM
External Use 16
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
TM
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
TM
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
TM
External Use 19
Resource Management (Images, Themes, Fonts, Languages)
Resource Panel
TM
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
TM
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)
TM
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
TM
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
TM
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 [email protected]
TM
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 [email protected]
TM
External Use 26
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
TM
External Use 27
Hands-On
Window Builder Walk-Through
TM
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
TM
External Use 29
Window Builder Walk-Through Configuration Mode – Target Settings
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
TM
External Use 30
Window Builder Walk-Through Resource Mode – Generation Options
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
Source Code
or
Binary
Filename
Available
Languages
TM
External Use 31
Window Builder Walk-Through Resource Mode – String Table
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
TM
External Use 32
Window Builder Walk-Through Resource Mode – Fonts
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
User Fonts
Font Creator
Tool
Integrated
Font Creator
TM
External Use 33
Window Builder Walk-Through Resource Mode – Image Groups
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
TM
External Use 34
Window Builder Walk-Through Resource Mode – Colors
For additional details refer to Section 1.4 of the PEG_Windowbuilder.pdf manual.
User Defined
Colors
Custom Color
Dialog
Add / Edit
Custom Colors
TM
External Use 35
Window Builder Walk-Through Application Mode - Overview
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
TM
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
TM
External Use 37
Window Builder Walk-Through Application Mode – PEG Object Settings
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
TM
External Use 38
Window Builder Walk-Through Application Mode – PEG Object Settings
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
TM
External Use 39
Window Builder Walk-Through Application Mode – PEG Object Settings
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
TM
External Use 40
Window Builder Walk-Through Application Mode – Edit / Layout Menu
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
Size / Position
Alignment
Cut/Paste
PEG Objects
TM
External Use 41
Window Builder Walk-Through Application Mode – View Menu (Test Mode)
For additional details refer to Section 1.5 of the PEG_Windowbuilder.pdf manual.
Grid-Snap
Options
Simulation
Test Mode Test Mode View
TM
External Use 42
Window Builder Walk-Through Auto-Generating Code
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
TM
External Use 43
Hands-On
PEG Game Demo Modifications
Creating a new PEG Module
TM
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
TM
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
TM
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
TM
© 2014 Freescale Semiconductor, Inc. | External Use
www.Freescale.com