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

Trang 1

Using Altia to Design a GUI and Deploy on Renesas SH7269

Trang 2

2

Renesas Technology & Solution Portfolio

Trang 3

GUIs for a Smart Society

 Unprecedented amount of information available to us

 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

Trang 4

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

Trang 5

Who is Altia?

Trang 6

 20 years of experience in user interface development

 Our focus is GUIs for embedded devices

Trang 7

Altia’s Motto:

The best user interface from the artist’s

imagination to the lowest cost hardware in the shortest amount of time.

Trang 8

Trang 9

Altia + Renesas SH7269 – A Powerful Combination

Trang 10

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

Trang 11

Working in Altia Design

Trang 12

Connections Properties

Most Altia Design GUIs consist of:

Altia Design flow

Trang 13

This automotive UI uses:

Deck

Image Object

UI Example

Trang 14

14

Altia Design Interface

 Universe (work space)

• Can keep it open all the time

• Easily rename objects

Trang 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

Trang 16

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

Trang 17

Grouping + Focus In/Out

…just like Windows Explorer folders!

Trang 18

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

Trang 19

Animation by Example, or Keyframe Animation

Interpolate all states in between

State 20Define

State 0 Define State 100

Trang 20

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

Trang 21

Stimulus – When I do X, set animation to Y

When I push the button, set animation to state 100

Trang 22

22

 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

Trang 23

 Animation tells object WHAT to do

 Stimulus tells object WHEN to do it

 When I click in this region, set animation to X

Trang 24

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

Trang 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

Image Object

Trang 26

26

Proof of Concept - Build a cool GUI with Altia Design

 Build a GUI on the fly right now!

 Process will be shown in slides, and is the same as the out content

hand- If you get stuck, need to catch up, or revert backwards, look for the “Part #” text in the bottom-right corner of certain

Trang 27

 Open the file “c:\altia_lab\lab\hmi

Renesas_Altia_DevCon_2012_GUI_progress_begin.dsn”

 TIP: Opening this blank dsn file quickly establishes the working directory for this lab – c:\altia_lab\lab\hmi

Trang 28

28

 Click “Libraries”, and drag in an Image object from

/models/imageobjs.dsn

Trang 29

 Change the Image Name Property to:

“images/bg_main.png”

 Double-click the object or use Ctrl+I to open Properties.

 Set the coordinate location of this Image object to (0,0)

Trang 30

30

 Name the Image object

“Main BG Image Object” by

double-clicking the description

property of the object in

Navigator

 Optional: If you forgot to

move the object to (0,0), you

can do it here in Navigator as

well

 Click “Attributes” and move the object to coordinate (0,0).

Trang 31

 Click “Libraries” again, and open

“_Renesas_Altia_DevCon_Screen_Main_Deck.dsn” from your lab’s working directory

Trang 32

32

 Click the map image and drag it into your model

Trang 33

 With the Deck you just imported selected, move it to (0,0)

Trang 34

34

 With the Deck still selected, click Animate to bring up the Animation Editor window, and then click Edit->Rename Animation…

Trang 35

 Remove the numeric prefix from the Deck you just brought

in by replacing the prefix “#_” with “” (nothing)

Trang 36

36

 Click “Libraries” open “_Renesas_Altia_DevCon_Buttons.dsn” and drag in the Group that contains the 2 buttons

Trang 37

 Once again, remove the numeric prefix from the new objects you just brought in by replacing the prefix “#_” with “”

(nothing)

Trang 38

38

 Ensure the button group is still selected and move it to

coordinate (210,179)

 TIP: If you prefer, you can do this in Navigator via “Attributes”.

Trang 39

 Using Navigator, drag and drop the “Menu Screen Buttons” object onto the title of the “Screen Main Deck” object

 NOTE: Make sure to let go of the mouse only when the title of the “Screen Main Deck” is fully boxed/outlined.

 Confirm that the “Main Screen Buttons” group is now on Card 2

of the Deck.

 TIP: Click “Collapse All” before doing this.

D R A G

Trang 40

40

 Click Focus Out to return to Focus Level 0 (the top of the hierarchy of your model)

Trang 41

 Ensure the “Screen Main Deck” is still selected, and click

“Animate” to bring up the Animation Editor window

 Highlight the “screen_main_card” animation, then ensure the State value is 2

Trang 42

42

 To make our GUI always start on this home/menu screen, click “Initial->Set Selected Initial State to Current”

Trang 43

 This is what the Animation Editor window should look like after setting the Init state of the “screen_main_card”

animation

Trang 44

44

 Your GUI is complete! Save your dsn file as

“Renesas_Altia_DevCon_2012_GUI_complete.dsn”

 Test your completed GUI!

 Ensure no objects are selected (click somewhere in the gray void background), then put Altia Design into Run Mode Click the working buttons!

Trang 45

 Before we move on…

 How did the buttons work?

– Some simple Control Code on the buttons caused them to

change the value of

 Click the small flowchart icon on the

“Deck Audio Button” to bring up the code.

Trang 46

46

 Control code listens for value 0 (LeftUp), and when that happens, it sets screen_main_card to 1, causing the

screen to change to the Audio screen

 Notice that there is some simple Stimulus to set the

value of “audio_button_card” on a LeftDown event

(value 1), and a LeftUp event (value 0)

Trang 47

 It’s the same for the Navigation button, but the result is

to set the value of “screen_main_card” to 0 to change to the Navigation screen

 Finally, the Back buttons on each screen are identical,

but set the value of “screen_main_card” to 2, which is where the “Menu Screen Buttons” group exists

Trang 48

48

 Prepare for Code Generation!

 Click “Code Generation-> Explore Working Directory” and edit the file:

“Renesas_Altia_DevCon_2012_GUI_complete.rtm” so it matches the next slide…

 Changes are:

– Altia*AltiaScene*width: 800 – Altia*AltiaScene*height: 480 – Add “non” in front of Writable within the first line of text.

Trang 49

 Renesas_Altia_DevCon_2012_GUI_complete.rtm

 File exists at same location as:

Renesas_Altia_DevCon_2012_GUI_complete.dsn

Trang 50

50

 Prepare for Code Generation!

 Click File->Open… and choose your Renesas_Altia_DevCon_2012_GUI_complete.dsn file to open it fresh and see the rtm file changes apply.

Trang 51

Proof of Concept – Generate Code with DeepScreen

 Click “Code Generation -> Generate Source Code…”

 NOTE: Options should already

be pre-configured for this lab

Trang 52

52

 Click “Code Generation -> Make Standalone”

 Press Enter in the command window when it’s

done

Trang 53

 Open HEW and load the lab workspace:

“sh7269_hmi_openvg.hws”

 There is a shortcut to this project at c:\altia_lab\

 NOTE: Make sure the debugger cable is connected and power applied to the HW.

Trang 54

54

Proof of Concept – Deploy onto the Renesas SH7269

 In HEW, click “Build -> Build All”

Trang 55

 In HEW, click “Debug->Connect”

Trang 56

56

 When prompted to, press the white reset button located on

hardware between the power connector and the debugger cable, then press Enter.

Trang 57

 Click “Debug -> Download modules -> <Altia lab

path>\main_app.abs”

Trang 58

58

 Download should take ~30 seconds…

Trang 59

 Launch your GUI on hardware!

 Click “Debug -> Go”, or press F5

Trang 60

60

Summary

 Introduction

 Who is Altia?

 Altia DeepScreen Code Optimized for Renesas SH7269

 Working in Altia Design

 Proof of Concept

 Built a cool GUI with Altia Design

 Generated code with Altia DeepScreen

 Deployed onto the Renesas SH7269

 Summary

Trang 61

Questions?

Trang 62

Renesas Electronics America Inc.

Định dạng
Số trang	62
Dung lượng	6,64 MB