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 [...]... State 0 Define State 100 Interpolate all states in between State 20 19 © 2012 Renesas Electronics America Inc All rights reserved 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 20 © 2012 Renesas Electronics America... in Altia Design 11 © 2012 Renesas Electronics America Inc All rights reserved Altia Design flow Altia Design Objects can have: Animation Stimulus Control What How Logic Connections Properties Most Altia Design GUIs consist of: Deck Object 12 © 2012 Renesas Electronics America Inc All rights reserved Image Object Text I/O UI Example This automotive UI uses: Deck Object 13 © 2012 Renesas Electronics America... Build a cool GUI with Altia Design Click “Libraries” again, and open “ _Renesas _Altia_ DevCon_Screen_Main_Deck.dsn” from your lab’s working directory 31 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept - Build a cool GUI with Altia Design Click the map image and drag it into your model 32 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept - Build a. .. America Inc All rights reserved Proof of Concept - Build a cool GUI with Altia Design 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 27 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept - Build a cool GUI with Altia Design. .. 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 18 © 2012 Renesas Electronics America Inc All rights reserved Animation by Example, or Keyframe Animation Define... 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 22 © 2012 Renesas Electronics America Inc All rights reserved Stimulus – When I do X, set animation to Y Animation tells object WHAT to do Stimulus tells object WHEN to do it When... Build a cool GUI with Altia Design Remove the numeric prefix from the Deck you just brought in by replacing the prefix “#_” with “” (nothing) 35 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept - Build a cool GUI with Altia Design Click “Libraries” open “ _Renesas _Altia_ DevCon_Buttons.dsn” and drag in the Group that contains the 2 buttons 36 © 2012 Renesas Electronics America... cool GUI with Altia Design With the Deck you just imported selected, move it to (0,0) 33 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept - Build a cool GUI with Altia Design With the Deck still selected, click Animate to bring up the Animation Editor window, and then click Edit->Rename Animation… 34 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept... “Libraries”, and drag in an Image object from /models/imageobjs.dsn 28 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept - Build a cool GUI with Altia Design 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) 29 © 2012 Renesas Electronics America Inc All... Proof of Concept - Build a cool GUI with Altia Design 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) 30 © 2012 Renesas Electronics America Inc All rights reserved Proof of Concept . 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 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. 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