TM

Fast Development of Impressive Graphical User Interfaces with Wind

River Tilcon and Freescale

Gil HellmannDirector, Sales Operations Engineering

gil.hellmann@windriver.com

TM

2

Agenda

• GUI Challenges• GUI Solutions• Wind River’s Tilcon Graphics Suite

– Host Tools– Target Support Packages

• Technical Advantages• Workflow Impacts

TM

The Importance of GUI

• Branding is one of the most important aspects of an y business, large or small, retail or B2B (John Williams, enterpreneur.com)

3© 2009 Wind River

© Freescale Semiconductor, Inc. 2006

• User experience helps to build and position brandin g

TM

User Experience

4© 2009 Wind River

© Freescale Semiconductor, Inc. 2006

TM

GUI Impacts and Challenges

• GUIs are key for today’s devices , they can determi nethe success of your product

• Different markets require different GUIs– Language/culture: NA, EMEA, Asia, Japan– Age / demographic– Entry level vs. high end versions

• Companies spend significant time and moneyon graphics and user interfaces– Device manufactures can spend 30-40% of their devel opment time

on developing their UI– Graphics software is complex– Integration of various pieces in the graphic stack can be difficult

TM

GUI Challenges

• Building interfaces is complex, code intensive and impacts on product costs

• Complex integration and optimization on hardware/software platforms

• Onerous testing requirements for reliable products

Complexity

Integration

Testing

TM7

GUI Challenges

• Challenges in transforming graphics artist concept into functional device

• Difficulty in re-using graphics code across multiple projects

• Time spent re-configuring and re-branding product with custom look and feel

TM

8

Categories of GUI Solutions

• There are four main categories of GUI solutions:– In-house proprietary solutions– Graphic libraries– Code generators– Binary graphic engines

TM

9

In-House Proprietary Solutions

TM

10

In-House Proprietary Solutions

TM

11

In-House Proprietary Solutions

TM

12

In-House Proprietary Solutions

• Description– UIs are developed from scratch– Developers must develop all code to implement every object

• Advantages– No real advantages except job security for UI devel opers.

• Disadvantages– The GUI and application sources are combined togeth er– You need extensive knowledge of graphics expertise– No way to prototype or simulate the final product l ook

and feel– Takes longer to put a product out in the market

TM

13

Graphic Libraries and Code Generators

TM

14

Graphics Editor

Code Generator

Graphic Libraries and Code Generators

TM

15

Graphics Editor

Code Generator

Graphic Libraries and Code Generators

TM

16

Graphic Libraries

• Description– Developers use graphic libraries that provide primi tive GUI

objects (others must be implemented from scratch)– Developers must program specific attributes of the object –

position, color, size, etc.

• Advantages– Easier than doing it all from scratch– Compatible with more advanced GUI builder product ( Wind

River Tilcon)

• Disadvantages– Still requires significant GUI development knowledg e– Often restricted by the features and behavior of th e

underlying library

TM

GUI Solutions: Code Generators

Graphical Object Description and Behavior (Code Generated)

Application

Hardware Layer

Device Software Optimized Graphics

Embedded Operating System

Graphics Driver

Windowing System

Automates part of the graphics development process by generating code for pre-established graphical syste ms

TM

18

Code Generators

• Description– Many advanced GUI packages fall into this category– They provide tools that can be used to assign attri butes to

objects and then generate code that calls the APIs of a graphicslibrary

– These companies are direct competitors to Wind Rive r TilconGraphics Suite

• Advantages– Reduces the coding burden

• Disadvantages– Developers need to generate UI code for each window– Developers must still understand, debug, test and m aintain the

custom GUI application– Challenges customizing UIs for different vendors

TM

19

Binary Graphics Engines

TM

GUI Solutions: Embedded GUI Engine

Graphical Object Description and Behavior (Embedded GUI Engine)

Application

Hardware Layer

Device Software Optimized Graphics (Embedded GUI Engine)

Embedded Operating System

Graphics Driver

Windowing System

Provides all necessary Graphical User Interface (GU I) functionality through the use of an embedded graphi cs engine.

TM

Wind River Tilcon Graphics Suite

• Wind River Tilcon enables the development and deplo yment of richuser interfaces for multi-functional embedded devic es more quickly, more cost effectively, and with a better e nd-user experience

• Supporting– Industrial– Medical– A&D– Automotive– Consumer

• Operating Systems– VxWorks– Wind River Linux– Windows XP– Windows CE

21

TM

Wind River Tilcon Graphics Suite Markets

22

Industrial

Aerospace &Defense

Automotive

Medical

Consumer

TM

23

Wind River’s Tilcon Graphics Suite Solution

Wind River Tilcon Graphics Suite contains 2 main co mponents:

• Host Side: A graphic user interface builder that is called the Interface Development Tool (IDT)

• Target (Runtime) Side: A GUI engine and an API Library that are called the Target Support Package (TSP)

TM

Wind River Tilcon Graphics Suite

GUI Development Tool: • Interface Development Tool (IDT)

– WYSWIG editor for building graphical user interfaces

– Runs on the host system– Generates Tilcon Window

Descriptor (TWD) file

GUI Rendering Engine:• Target Support Package

– Embedded GUI engine and API Library runtime package called Target Support Package (TSP)

– Runs on the target system– Reads TWD file and renders GUI

on the target display

24

Host Side

Target Side

TM

• Simple drag and drop of objects onto the canvas

• Simulates object look and behavior without application code

• Provides pre-defined intelligent and customizable objects

• Saves the context of a screen as a platform-independent resource file known as a Tilcon Window Definition (TWD) file without generating any code

Interface Development Tool

TM

Interface Development Tool

• Photoshop import, export and merge• Integrated workflow between artists and

engineers

Integration with Adobe Design Tools

• Animate GUI components• High-fidelity mock-ups• Simulate user behavior without any code

Codeless Animation

• Re-skin and re-brand• Without code changes• Without compilations• No software QA cycles

Dynamic UI Customization

TM

Target Support Package

Wind River Tilcon API Library

Application

Hardware GPU

VxWorks WR Linux Other RTOS

Wind River Tilcon Embedded GUI Engine

WindML X11Win32 /

Photon etc

Interfaces the customer application with the underlining vector engine

API Library

GUI service provider and hardware interface

Embedded GUI Engine

Target Support Package includes the following:

TM

28

Target Support PackageEmbedded GUI Engine

• The Enbedded GUI Engine reads the TWD file (UI) and renders it

• It works directly with the native platform technologies (e.g. VxWorks WindML, Linux X11, etc.)

• Supports alpha blending, anti-aliasing, double buffering, etc.

• Can scale to include only the components needed

Communication Module (TCP/IP)

Font Management

Object Management

Graphics Layout

Animation

Language Management

GUI and HMI Objects

Advance Drawing Techniques

Input / Output

Win

d R

iver

Tilc

on G

UI E

ngin

e

TM

29

Target Support PackageEmbedded GUI Engine

• The Engine is specifically design for hardware and software flexibility• Combining technologies and migrating between platfo rms is not a problem

VxWorksWR

LinuxWin32

Engine Core

Operating System Interface

X11 WindML

Graphics Library Interface

Window Manager Interface

WinCE X11 WindML Custom

Hardware Layer Interface

PowerPC Other Architectures

Solution A

Linux Based TSP

WR Linux

X11 X11

PowerPC

Solution B

VxWorks Based TSP

VxWorks WindML WindML

ARMARM

TM

30

Target Support Package

API Library• Customer code interfaces with

the Wind River Tilcon Embedded GUI Engine through a very easy to use API Library.

• API can be used to change widgets attributes and behavior.

• Widgets can be dynamically created using APIs as well.

Wind River Tilcon API Library

Application

Wind River Tilcon Embedded GUI Engine

TM

31

Graphics Suite Architectural Overview

Host side

Target side

TM

Technical Advantages Reduced Code

• Replaces more than 80% of UI code • Pre-integrated, optimized, validated• Plug & play cross-platform solution (without code c hanges)• New applications can be added on the fly using the same engine

TM

33

Technical Advantages Reusability

• Re-branding / Re-skinning Scenario– Product internationalization does not pose an issue– Built-in tools allow designers to import and export TWD

language content– Language changes can occur dynamically

Embedded Hardware Platform

Tilcon Target Support Package

Application

Embedded Hardware Platform

Tilcon Target Support Package

Application

North American Market Asian Market

GUI Description (TWD) GUI Description (TWD)

TM

34

Technical Advantages Reusability

• Re-skinning– Integration with Photoshop simplifies the creations of

impressive GUIs– GUI skins are easily changed using the GUI Engine’s API or by

simply loading a new TWD

TM

35

Technical Advantages Rapid Migration

• Hardware Migration/Upgrade Scenario– TWDs are stored in a platform-independent format– TSP must be supplied for new hardware– Does not necessitate additional engineering or grap hics

designer effort

Embedded Hardware Platform(Configuration A)

Target (A) Support Package

Application

GUI Description (TWD) GUI Description (TWD)

Embedded Hardware Platform(Configuration B)

Application

Target (B) Support Package

Configuration A Configuration B

TM

36

Workflow Impacts

GUI Concept Simulate GUI usingWind River’s Tilcon IDT

Embed API calls within Application – test on PC

Download applicationonto target

Typical GUI Development Cycle

TM

37

Workflow Impacts

• Clear and distinct workflows between engineers and graphics designers

• Allows application development to occur in parallel with GUI design

• Engineers do not need to put effort into creating a GUI framework

• Graphics designers do not need to concern themselve s with software or hardware issues

TM

38

Workflow Impacts

GUI Prototype

Application Development GUI Development

Branding AnimationTriggers and

Links

SimulationTesting and Debugging

Wind River Tilcon API Code

Core Application Code

Package and Download to Target

Engineering Effort Graphics Designer Effort

TM

Workflow Advantages

• User-centric Approach• Simple, Streamlined and

Optimized• Right the First Time• Solution from Concept to Target

• Easy to Upgrade• Improved User Experience• Reduced Development Cost• Faster Time to Market

TM

Demo Available on MPC5121e

40© 2009 Wind River

© Freescale Semiconductor, Inc. 2006

TM

Wind River Tilcon Graphics Summary

• Rapid UI Development– Prototype, simulate, validate, deploy

& maintain– Codeless environment on the host

and easily deploy to VxWorks, Wind River Linux and other targets

– Faster Time to Market / Lower Risk

• Reuse and Update UI As Needed– Create platform-portable GUIs and

update, reskin and rebrand GUI without changing any software code

– More markets addressed and lower costs

• Develop High Quality Interfaces– Import Photoshop graphics – Leverage Tilcon’s extensive library

of high quality objects/widgets– Build more competitive devices

41

TM

Summary

• Building GUI’s & graphics for devices involve very complex software

• The Wind River Tilcon Graphics Suite helps tame thi s complexity by providing– Powerful interface builder tools to create sophisti cated UIs– A GUI engine that handles the difficult task of imp lementing UI

graphics– Target Support Packages using pre-integrated and va lidated software

to enable UIs on a desired device platform

• Wind River Tilcon also provides– Accelerated workflows allowing parallelism between engineering and

graphic artist efforts– Reuse of GUI designs for multiple platforms or mult iple markets– Positive return on investment, faster time to marke t & improved user

experience for your devices

42

TM

TM

PRODUCT EXAMPLES

44

TM

New Ericsson VOIP built with Tilcon UI

45

TM

46

“The simple point-and-click philosophy of Tilcon is just what our company was looking for”, affirms chief software engineer Dr. Thorsten Klepsch of Rexroth Murrhardt, “since our customers expect the Rexroth tightening system to be ‘plug-and-run’, or easy to install, at all times.” The professional support provided by German distributor Embedded Tools GmbH in Münster, North Rhine-Westphalia and by the service department at TILCON in Canada wasalso impressive in addition to the concept.

Rexroth offers a sophisticated new user interface f or its tightening system. This interface can be adapted to meet different customer needs without changes in programming code having to be made

Impressive screen design of Rexroth Compact System CS351

TM

47

• Worldwide license agreement

• GE owns 80% market share

• 5 node network - 3 HMI’s or more per Locomotive

TM

48

How KLAFS GmbH & Co used Tilcon Technology - to create a compelling touchscreen experience and reduce time to market.

Recognizing a need to create innovative approaches to control systems for their sauna line, KLAFS turned to Tilcon Software to leverage the powerful capabilities of Interface Development Suite to create a new look and feel for the industry’s first integrated touchscreen controls in a sauna.

TM

49

"Gambro initiated an in-depth investigation of avai lable user interface development tools for embedded platforms with a vie w to developing a custom interface for our next generation of dialysis machi nes" said Rune Thor, Software Manager. "The user interface in a medical device of this nature needs to be very user friendly but at the same time is multi-layered with a great number of screens and many complex instrument clusters. As part of a highly critical device, reliability and real time performance are also key considerations."

Mr. Thor also added that "The Tilcon Real-Time Developer has been adopted as Gambro's principal user interface development tool for this product and further projects are being considered. Gambro Renal Product s has entered into a General Supply Agreement with Tilcon and we look fo rward to continued success."

"The support TILCON offers is one of the best I hav e encountered" said Anders Fredlund (Senior Software Engineer, UI-group). Quick and prompt responses by mail or telephone have helped us a lot in our development.