Using Altia to Design a GUI and Deploy on Renesas SH7269 (1)

Renesas Electronics America Inc.
© 2012 Renesas Electronics America Inc. All rights reserved.
Using Altia to Design a GUI and
Deploy on Renesas SH7269
© 2012 Renesas Electronics America Inc. All rights reserved.2
Renesas Technology & Solution Portfolio
© 2012 Renesas Electronics America Inc. All rights reserved.3
GUIs for a Smart Society
 Unprecedented amount of information available to us.
 How much energy does my home use on any given day?
 How much fuel is my car using on the highway?
 When is the best time to run my washing machine?
 We are a connected, smart society.
 Embedded displays allow us to access wealth of information.
 GUIs – where consumers meet information.
 In order to support smart consumers, GUI must be:
 Easy to understand
 Intuitive
 Great-looking
© 2012 Renesas Electronics America Inc. All rights reserved.4
Agenda
 Introduction
 Who is Altia?
 Altia + Renesas SH7269 – A Powerful Combination
 Working in Altia Design
 Proof of Concept
 Build a cool GUI with Altia Design
 Generate code with Altia DeepScreen
 Deploy onto the Renesas SH7269
 Summary
 Q&A

© 2012 Renesas Electronics America Inc. All rights reserved.5
Who is Altia?
© 2012 Renesas Electronics America Inc. All rights reserved.6
Altia
and Graphical
User
Interfaces
(GUIs)
 Altia provides tools and services for User Interface (UI)
Engineering.
 20 years of experience in user interface development.
 Our focus is GUIs for embedded devices.
© 2012 Renesas Electronics America Inc. All rights reserved.7
Altia’s Motto:
The best user interface from the artist’s
imagination to the lowest cost hardware in the
shortest amount of time.
© 2012 Renesas Electronics America Inc. All rights reserved.8
The Process
Altia
PhotoProto
Altia
FlowProto
Altia Design
Altia
DeepScreen
Develop Concept
Build GUI
Generate Code
User Studies

Market Research
Market Studies
User Studies
User Studies
Renesas
© 2012 Renesas Electronics America Inc. All rights reserved.9
Altia + Renesas SH7269 – A Powerful Combination
© 2012 Renesas Electronics America Inc. All rights reserved.10
Altia + Renesas SH7269 – A Powerful Combination
 Altia DeepScreen generates graphics code that is optimized
to exploit the features of the target, including:
 266 MHz clock frequency high-speed operation
 Display functions, including an OpenVG 1.1 conforming 2D
graphics accelerator
 Vector Path object performance with reduced memory
utilization
 Enables OpenVG dithering for improved blending of colors in
Vector Path objects, 24-bit images, and 32-bit images
 Disables OpenVG dithering for text and stencils to improve their
appearance
 Supports clipped region redraw with the clipped region draw
buffer in VRAM for best performance
 Supports device-dependent bitmap (DDB) image format for fast
image loading to OpenVG directly from Flash memory
 Target Reflash support
© 2012 Renesas Electronics America Inc. All rights reserved.11
Working in Altia Design
© 2012 Renesas Electronics America Inc. All rights reserved.12
Animation
What

Stimulus
How
Control
Logic
Altia Design Objects can have:
Deck
Object
Text I/O
Image
Object
Connections
Properties
Most Altia Design GUIs consist of:
Altia Design flow
© 2012 Renesas Electronics America Inc. All rights reserved.13
This automotive UI uses:
Deck
Object
Text I/O
Image
Object
UI Example
© 2012 Renesas Electronics America Inc. All rights reserved.14
Altia Design Interface
 Universe (work space)
 .dsn file
 Tool Box
 Edit/Run Mode
 Animation, Stimulus, Control
 Group

 Focus In/Out
 Navigator
• Can keep it open all the time
• Easily rename objects
© 2012 Renesas Electronics America Inc. All rights reserved.15
Model Libraries + Connections
 Pre-built objects (Libraries)
 Great examples of just one way to build a widget
 Many have built-in Connection and Properties
 Any .dsn file can be a model library
 Open model libraries
 Drag in pre-built objects
 Connections
 Easily link behaviors between objects
 One objects output is another’s input
 Demo: Meter + Slider
 Open Connections for each object
 Link which variable you need
© 2012 Renesas Electronics America Inc. All rights reserved.16
Model Libraries + Connections
 Pre-built objects (Libraries)
 Open model libraries
 Drag in pre-built objects
 Connections
 Open Connections for each object
 Link which variable you need
© 2012 Renesas Electronics America Inc. All rights reserved.17
Grouping + Focus In/Out
…just like Windows Explorer folders!
© 2012 Renesas Electronics America Inc. All rights reserved.18

Grouping + Focus In/Out
 Group everything first!
 Before adding animation
 Before each additional animation
 Before adding Stimulus, Control, Properties, Connections, etc.
 Group hierarchy can affect animations

Group hierarchy affects renaming animations
 Focus In/Out
 Show Out of Focus Objects
 Groups covered multiple times throughout
or CRTL + G
© 2012 Renesas Electronics America Inc. All rights reserved.19
Animation by Example, or Keyframe Animation
Interpolate all states in between
State 20
Define
State 0
Define
State 100
© 2012 Renesas Electronics America Inc. All rights reserved.20
Altia Design - Animation
 Animation Editor Window
 Displays animations on an object
 Allows you to define new animations
 Allows you to change AND watch value of an animation
 Demo: Deck GUI
 Create a simple multi-screen interface
© 2012 Renesas Electronics America Inc. All rights reserved.21
Stimulus – When I do X, set animation to Y

State 0
State 100
When I push the button,
set animation to state 100
© 2012 Renesas Electronics America Inc. All rights reserved.22
Stimulus – When I do X, set animation to Y
 Animation tells object WHAT to do
 Stimulus tells object WHEN to do it
 Can create multiple types of
Stimulus (mouse click, keypress,
motion, etc.)
 Demo: Simple button, then Deck
Button
 Create a simple button using a
Deck, 2 Image objects, and
Stimulus.
 Different from the buttons in
included buttons.dsn, but this is
actually the “best” way to make a
button
© 2012 Renesas Electronics America Inc. All rights reserved.23
Stimulus – When I do X, set animation to Y
 Animation tells object WHAT to do

Stimulus tells object WHEN to do it
 When I click in this region, set animation to X
© 2012 Renesas Electronics America Inc. All rights reserved.24
Control
 Control Editor Window
 Fill-in-the-blank programming

 Not as powerful as writing C code, but allows much of the functionality
 Does not need to be compiled
 Changes reflected immediately
 Can be edited in Edit Mode or Run Mode
 Best to use EXPR statement for most things
 Demo: Deck Button turns on/off LED
© 2012 Renesas Electronics America Inc. All rights reserved.25
Altia Design – 3 Key Objects!
 If you know these 3 objects, plus proper Grouping and Animation, you can
build anything.
 Deck
 Image Object
 Text I/O (Text Input/Output)
 Demo: Prove It!
Deck
Object
Text I/O
Image
Object