1. ID 424C: HMI for Renesas Processors
Your Partner In Innovationᵀᴹ
ID 424C: HMI for Renesas Processors
Rendering Requirements & UI development using TES Guiliani framework 1
Harsha Padmanabha
Marketing Manager, Embedded Graphics

2. Your Partner In Innovationᵀᴹ
User Interface
alpha images
icons
variable size
text
background
TES © 2010 2

3. Your Partner In Innovationᵀᴹ
The Requirements
Application
Framework
C++, Java, Guiliani, QT
Renderer
Blit, 2D, 3D OGLES 1.1, 2.0
Processor
SH2, SH4, V850, ARM
TES © 2010 3

4. The Renderer Requirement
Your Partner In Innovationᵀᴹ
The Renderer Requirement
Basic Feature Necessities
BLITS : Ability to render images, decode PNG/JPEG and display on screen
BLIT Features : Rotate, Scale, Stretch, MAP images to objects
GEOMETRY : Line, Circle, Rectangle, Triangle
Platform Dependencies
CPU Frequency / Renderer SW or HW
Memory Bandwidth
TES © 2010 4

5. More Complex Render Features
Your Partner In Innovationᵀᴹ
More Complex Render Features
Use OpenGL ES for rendering complex features such as lighting & 3D
Texture maps are common , use a picture on a polygon mesh
Animate the polygon mesh , for example coverflow
Save bandwidth with texture compression
Shader effects for transitions between screens
TES © 2010 5

6. Your Partner In Innovationᵀᴹ
SH7723 : SH-MobileR2
TES © 2010 6

7. Graphics Renderers : TES eGML
Your Partner In Innovationᵀᴹ
Graphics Renderers : TES eGML
embedded Graphics Multiplatform Library
SW renderer , highly optimized for size and features
Blits, Vector Rendering, Anti-Aliasing, Sub-pixel rendering
Utilities for bitmap fonts, File I/O, Image rendering, Debug, Memory
TES © 2010 7

8. Your Partner In Innovationᵀᴹ
Product Example
TES © 2010 8

9. V850/DN4: 2D -Automotive Dashboard
Your Partner In Innovationᵀᴹ
V850/DN4: 2D -Automotive Dashboard
2D GPU
TES © 2010 9

10. Your Partner In Innovationᵀᴹ
V850/DR4-3D
TES © 2010 10

11. Your Partner In Innovationᵀᴹ
Demo on DR4-3D
TES © 2010 11

12. Your Partner In Innovationᵀᴹ
Guiliani
GUIliani is a easy to use C++ framework & tools
Develop intuitive, visually appealing embedded GUI
Designed for embedded software integration
Object oriented, enhanced , multi-platform framework
Widgets, Animation & Real-time awareness
Built-In XML support, skinning
Design flow from concept to target implementation
Develop it once, optimize and compile for platforms
Supports a variety of OS & Non-OS support
TES © 2010 12

13. Your Partner In Innovationᵀᴹ
The BIG Overview
TES © 2010 13

14. Portability Through Abstraction
Your Partner In Innovationᵀᴹ
Portability Through Abstraction
Points of contact between GUILIANI and the underlying system are encapsulated within slim wrapper-classes.
Adaption to a new platform requires implementation of just the wrapper‘s interface – GUILIANI application remains as is.
Supports: SDL, OpenGL-ES, Windows GDI, OpenGL
This leads to:
shorter development times, since most of the development can take place on a desktop-PC
Native GFx
File I/O
Input Devices
Data Types
WinCE / Linux / QNX / pSoS / VxWorks / emWIN
TES © 2010 14

15. Your Partner In Innovationᵀᴹ
Input & Events
Guiliani Event
TES © 2010 15

16. Your Partner In Innovationᵀᴹ
Gfx Portability
TES © 2010 16

17. Your Partner In Innovationᵀᴹ
Font Features
Unicode UTF-16 & UTF-8 support
Runtime language switching
Text alignment
right, left, center, top, bottom
word wrap & truncation
Independent of font engine
Freetype, Cleartype
SDL Fonts, Bitmap fonts
Curved text**
TES © 2010 17

18. Your Partner In Innovationᵀᴹ
Font Rendering
Font rendering is a complex topic
Guiliani offers a flexible front-end interface, supports
BitMap fonts inform of textures
TTF fonts through ClearType / Freetype
All fonts are rendered with sub-pixel accuracy , anti-aliasing , smart caching, font scaler
Optimized freetype library for a given platform , low memory footprint
TES © 2010 18

19. Font Rendering Your Partner In Innovationᵀᴹ Graphics API
eGML FontScaler
Guiliani FontEngine Manager
ClearType
FreeType
Bitmap
TES © 2010 19

20. Language Features Your Partner In Innovationᵀᴹ Run-Time Switch
German text on Buttons
and Text Alignment
English text on Buttons
and Text Alignment
TES © 2010 20

21. Your Partner In Innovationᵀᴹ
Widget Support
Support for a number of pre-defined widgets
Buttons, IconButtons
Radiobuttons, animated buttons
Checkboxes, Sliders
Textfields, Inputfields
Scrollbars, Composite Objects
Dialogs, Sliding dialogs
Anchored widget objects
Customizable graphics
TES © 2010 21

22. Your Partner In Innovationᵀᴹ
Smart Redraw
90%
TES © 2010 22

23. Your Partner In Innovationᵀᴹ
Class Hierarchy
Common base-class
Safe interface
Enhanced abstraction
Specialization in derived classes
Customizable in customer specific derivation
Reuse existing code and adapt only those parts that you wish to customize.
TES © 2010 23

24. Your Partner In Innovationᵀᴹ
Model View Controller
state query
update
View --> Display
update
event
state change
Model --> Data
Controller --> Coordination
Model : Data / Algorithms / Networking
View : Display / Event Capture / Visual Appeal
Controller : Coordination / Delegation
TES © 2010 24

25. Your Partner In Innovationᵀᴹ
Application Binding
Command
Objects
Application
Logic
GUI
Presentation
Gather user input
Buttons
Sliders
Animations …
Search AddressStart NavigationGet GPS statusIncrease speech volume
Route CalculationGPS handlingVoice guidanceBluetooth featuresJunction lane guidance
TES © 2010 25

26. Your Partner In Innovationᵀᴹ
UI Composition
TES © 2010 26

27. Your Partner In Innovationᵀᴹ
The Workflow
Custom Widgets +
Custom Animations
Adobe CS3
Photoshop
GUIliani
PhotoBridge
GUIliani
Stream Editor
Visual Studio /
Native Dev Platform
Custom Widgets +
Custom Animations
GUIliani
Stream Runtime
XML + Resources
TES © 2010 27

28. Your Partner In Innovationᵀᴹ
HMI Editor Demo
TES © 2010 28

29. Tips for good development
Your Partner In Innovationᵀᴹ
Tips for good development
Children Don’t Outlive Their Parents
Models create Controllers
Models never own views
Views never own models or controllers
Don’t fight the framework
Coordinate State Changes
Updating model after user actions
Updating views after model changes
There’s more than one way to do it
TES © 2010 29

30. Your Partner In Innovationᵀᴹ
Resources
Download eval kits
Framework API
HMI Editor, Photoshop tools
API Specification
TES © 2010 30

31. Your Partner In Innovationᵀᴹ
TES Overview
Full-spectrum global Electronics Design & Manufacturing Services Company
~ 850 Employees
~ 400 Engineers
16 Locations worldwide
14 Design Centers worldwide
Germany, France, UK, India, Serbia
7 Design Centers in Germany
Munich, Stuttgart, Nuremberg, Frankfurt, Düsseldorf, Berlin, Hamburg
2 Manufacturing Centers
France, Malaysia
Founded 2004 as spin-off from Thales
TES © 2010 31

32. Graphics Development & Support
Your Partner In Innovationᵀᴹ
Graphics Development & Support
Nuremberg
SW Services
Hamburg
MAP & Rendering
Frankfurt
UI Development
Bangalore
UI & Support
TES © 2010 32

33. Your Partner In Innovationᵀᴹ
Market Reach
Comprehensive portfolio provides end-to-end solutions in Graphics development & services
Integration, Verification and Design Services
A strong automotive presence & background
TES Graphics in 6 European & American car brands
Mobile PNDs, Industrial Handhelds, STB & HomeAutomation
High quality automotive & avionics standards
Products deployed in top European car brands
Avionics, Medical & Consumer Customers
TES © 2010 33

34. Graphics Technology at TES
Your Partner In Innovationᵀᴹ
Graphics Technology at TES
Rendering
Technology
eGML / eVRU
D/AVE 2D
D/AVE 3D
D/AVE HD
HMI
Framework
GUIliani
PhotoBridge
HMI Editor
Graphics HW
Platforms
OMAP Module
i.MX Module
Design
Services
MAP Services
UI Development
Graphics API
ASIC & FPGA
One STOP Shop
TES © 2010 34