Using Altia to Design a GUI and Deploy on Renesas SH7269

Transcription

1 Using Altia to Design a GUI and Deploy on Renesas SH7269 Brian Stewart, Senior HMI Developer Altia, Incorporated Class ID: 5L02I Renesas Electronics America Inc.

2 Brian Stewart, Senior HMI Developer Senior HMI Developer since 2004 Develops graphics, logic and behavior for GUI projects Leads instruction for on-site and remote training courses Provides support to Altia s global network of customers Developed Altia PhotoProto, our Adobe Photoshop add-on Co-founder of Dot Pitch Studios, a web application development company Freelance contractor for a variety of website and multimedia creation projects flash development, 2D/3D logo creation, website construction and video editing/motion graphics B.S. in Computer Information Systems from the University of Colorado - Pueblo 2

3 Renesas Technology & Solution Portfolio 3

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

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

6 Who is Altia? 6

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

8 Altia s Motto: The best user interface from the artist s imagination to the lowest cost hardware in the shortest amount of time. 8

9 The Process Market Research Develop Concept Market Studies User Studies Altia PhotoProto Altia FlowProto Build GUI User Studies Altia Design Altia DeepScreen Generate Code User Studies Renesas 9

10 Altia + Renesas SH7269 A Powerful Combination 10

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

12 Working in Altia Design 12

13 Altia Design flow Altia Design Objects can have: Animation What Stimulus How Control Logic Connections Properties Most Altia Design GUIs consist of: Deck Object Image Object Text I/O 13

14 UI Example This automotive UI uses: Deck Object Image Object Text I/O 14

15 Altia Design Interface Universe (work space) Animation, Stimulus, Control.dsn file Group Tool Box Focus In/Out Edit/Run Mode Navigator Can keep it open all the time Easily rename objects 15

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

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

18 Grouping + Focus In/Out just like Windows Explorer folders! 18

19 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 or CRTL + G Focus In/Out Show Out of Focus Objects Groups covered multiple times throughout 19

20 Animation by Example, or Keyframe Animation Define State 0 Define State 100 Interpolate all states in between State 20 20

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

22 Stimulus When I do X, set animation to Y State 0 State 100 When I push the button, set animation to state

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

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

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

26 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) Deck Object Image Object Text I/O Demo: Prove It! 26

27 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 handout content. If you get stuck, need to catch up, or revert backwards, look for the Part # text in the bottom-right corner of certain slides. The Part # corresponds with the dsn file name in your lab files folder. Example: Renesas_Altia_DevCon_2012_GUI_progress_part#.dsn 27

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

29 Proof of Concept - Build a cool GUI with Altia Design Click Libraries, and drag in an Image object from /models/imageobjs.dsn. 29

30 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). 30

31 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). 31

32 Proof of Concept - 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. 32

33 Proof of Concept - Build a cool GUI with Altia Design Click the map image and drag it into your model. 33

34 Proof of Concept - Build a cool GUI with Altia Design With the Deck you just imported selected, move it to (0,0). 34

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

36 Proof of Concept - Build a cool GUI with Altia Design Remove the numeric prefix from the Deck you just brought in by replacing the prefix #_ with (nothing). 36

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

38 Proof of Concept - Build a cool GUI with Altia Design Once again, remove the numeric prefix from the new objects you just brought in by replacing the prefix #_ with (nothing). 38

39 Proof of Concept - Build a cool GUI with Altia Design 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. 39

40 Proof of Concept - Build a cool GUI with Altia Design 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 40

41 Proof of Concept - Build a cool GUI with Altia Design Click Focus Out to return to Focus Level 0 (the top of the hierarchy of your model). 41

42 Proof of Concept - Build a cool GUI with Altia Design 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. 42

43 Proof of Concept - Build a cool GUI with Altia Design To make our GUI always start on this home/menu screen, click Initial->Set Selected Initial State to Current. 43

44 Proof of Concept - Build a cool GUI with Altia Design This is what the Animation Editor window should look like after setting the Init state of the screen_main_card animation. 44

45 Proof of Concept - Build a cool GUI with Altia Design 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! 45

46 Proof of Concept - Build a cool GUI with Altia Design Before we move on How did the buttons work? Some simple Control Code on the buttons caused them to change the value of screen_main_card on the Screen Main Deck object. For the sake of time, it was pre-established, but let s take a look. Click the small flowchart icon on the Deck Audio Button to bring up the code. 46

47 Proof of Concept - Build a cool GUI with Altia Design 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). 47

48 Proof of Concept - Build a cool GUI with Altia Design 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. 48

49 Proof of Concept - Build a cool GUI with Altia Design 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. 49

50 Proof of Concept - Build a cool GUI with Altia Design Renesas_Altia_DevCon_2012_GUI_complete.rtm File exists at same location as: Renesas_Altia_DevCon_2012_GUI_complete.dsn 50

51 Proof of Concept - Build a cool GUI with Altia Design 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. 51

52 Proof of Concept Generate Code with DeepScreen Click Code Generation -> Generate Source Code NOTE: Options should already be pre-configured for this lab. 52

53 Proof of Concept Generate Code with DeepScreen Click Code Generation -> Make Standalone Press Enter in the command window when it s done. 53

54 Proof of Concept Generate Code with DeepScreen 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. 54

55 Proof of Concept Deploy onto the Renesas SH7269 In HEW, click Build -> Build All. 55

56 Proof of Concept Generate Code with DeepScreen In HEW, click Debug->Connect 56

57 Proof of Concept Generate Code with DeepScreen When prompted to, press the white reset button located on hardware between the power connector and the debugger cable, then press Enter. 57

58 Proof of Concept Generate Code with DeepScreen Click Debug -> Download modules -> <Altia lab path>\main_app.abs 58

59 Proof of Concept Generate Code with DeepScreen Download should take ~30 seconds 59

60 Proof of Concept Generate Code with DeepScreen Launch your GUI on hardware! Click Debug -> Go, or press F5 60

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

62 Questions? 62

63 Please Provide Your Feedback Please utilize the Guidebook application to leave feedback or Ask me for the paper feedback form for you to use 63

64 Renesas Electronics America Inc.