1 Your Partner In Innovation ID 424C: HMI for Renesas Processors 1 Harsha Padmanabha Marketing Manager, Embedded Graphics [email protected] Rendering Requirements

1

Your Partner In Innovationᵀᴹ

ID 424C: HMI for Renesas Processors

1

Harsha PadmanabhaMarketing Manager, Embedded [email protected]

Rendering Requirements & UI development using TES Guiliani framework

2TES © 2010


2

User Interface

icons

alpha images

variable size text

background

3TES © 2010


The Requirements

3

Processor

Renderer

Application

Framework

SH2, SH4, V850, ARM

Blit, 2D, 3D OGLES 1.1, 2.0

C++, Java, Guiliani, QT

4TES © 2010


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

4

5TES © 2010


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

5

6TES © 2010


SH7723 : SH-MobileR2

6

7TES © 2010


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

7

8TES © 2010


Product Example

8

9TES © 2010


V850/DN4: 2D -Automotive Dashboard

9

2D GPU

10TES © 2010


V850/DR4-3D

10

11TES © 2010


Demo on DR4-3D

11

12TES © 2010


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

12

13TES © 2010


The BIG Overview

13

14TES © 2010


Portability Through Abstraction

14

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

WinCE / Linux / QNX / pSoS / VxWorks / emWIN

Native GFx File I/O Input Devices Data Types

15TES © 2010


Input & Events

15

Guiliani EventGuiliani Event

16TES © 2010


Gfx Portability

16

17TES © 2010


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**

17

18TES © 2010


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

18

19TES © 2010


Font Rendering

19

ClearType FreeType Bitmap

Guiliani FontEngine Manager

eGML FontScaler

Graphics API

20TES © 2010


Language Features

20

German text on Buttons

and Text Alignment

English text on Buttonsand Text Alignment

Run-Time Switch

21TES © 2010


Widget Support

21

• 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

22TES © 2010


Smart Redraw

22

90%

23TES © 2010


Class Hierarchy

23

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

24TES © 2010


Model View Controller

• Model : Data / Algorithms / Networking

• View : Display / Event Capture / Visual Appeal

• Controller : Coordination / Delegation

24

state query update

state change

Model --> Data Controller --> Coordination

View --> Display

update event

25TES © 2010


Application Binding

• Presentation

• Gather user input

• Buttons

• Sliders

• Animations

• …

25

GUI Application Logic

CommandObjects

• Search AddressStart NavigationGet GPS statusIncrease speech volume

• Route CalculationGPS handlingVoice guidanceBluetooth featuresJunction lane guidance

26TES © 2010


UI Composition

26

27TES © 2010


The Workflow

27

GUIlianiPhotoBridge

Adobe CS3Photoshop

GUIlianiStream Editor

Visual Studio /Native Dev

Platform

GUIlianiStream RuntimeXML + Resources

Custom Widgets +

Custom Animations

Custom Widgets +

Custom Animations

28TES © 2010


HMI Editor Demo

28

29TES © 2010


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

29

30TES © 2010


Resources

• http://support.tesbv.com

• Download eval kits

• Framework API

• HMI Editor, Photoshop tools

• www.khronos.org

• API Specification

• www.youtube.com/TESDemo

30

31TES © 2010


TES Overview

31

• 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

32TES © 2010


Graphics Development & Support

32

BangaloreUI & Support

HamburgMAP &

Rendering

FrankfurtUI

Development

NurembergSW Services

33TES © 2010


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

33

34TES © 2010


34

Graphics Technology at TES

RenderingTechnology

•eGML / eVRU

•D/AVE 2D

•D/AVE 3D

•D/AVE HD

HMIFramework

•GUIliani

•PhotoBridge

•HMI Editor

Graphics HWPlatforms

•OMAP Module

• i.MX Module

DesignServices

•MAP Services

•UI

Development

•Graphics API

•ASIC & FPGA

One STOP Shop

Documents

1 Your Partner In Innovation ID 424C: HMI for Renesas Processors 1 Harsha Padmanabha Marketing Manager, Embedded Graphics [email protected] Rendering Requirements