1. Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved. Class ID: 5L08I Using the Renesas Graphics API to Create a User Interface Jon Brabender, Applications Engineer

2. © 2012 Renesas Electronics America Inc. All rights reserved.2 Jon Brabender Principle Engineer 11 years with Renesas Electronics Technical Lead for RX MCU Family Creator of LCD Direct Drive and GAPI IP Over 25 years experience in embedded product development Mostly industrial controls

3. © 2012 Renesas Electronics America Inc. All rights reserved.3 Renesas Technology & Solution Portfolio

4. © 2012 Renesas Electronics America Inc. All rights reserved.4 Renesas Technology & Solution Portfolio

5. © 2012 Renesas Electronics America Inc. All rights reserved.5 Microcontroller and Microprocessor Line-up Wide Format LCDs  Industrial & Automotive, 130nm  350µA/MHz, 1µA standby 44 DMIPS, True Low Power Embedded Security, ASSP 165 DMIPS, FPU, DSC 1200 DMIPS, Performance 1200 DMIPS, Superscalar 500 DMIPS, Low Power 165 DMIPS, FPU, DSC 25 DMIPS, Low Power 10 DMIPS, Capacitive Touch  Industrial & Automotive, 150nm  190µA/MHz, 0.3µA standby  Industrial, 90nm  200µA/MHz, 1.6µA deep standby  Automotive & Industrial, 90nm  600µA/MHz, 1.5µA standby  Automotive & Industrial, 65nm  600µA/MHz, 1.5µA standby  Automotive, 40nm  500µA/MHz, 35µA deep standby  Industrial, 40nm  200µA/MHz, 0.3µA deep standby  Industrial, 90nm  1mA/MHz, 100µA standby  Industrial & Automotive, 130nm  144µA/MHz, 0.2µA standby 2010 2012 32-bit 8/16-bit

6. © 2012 Renesas Electronics America Inc. All rights reserved.6 Challenge: “As everyday products become more complex, the ability to control and configure them becomes more difficult.” Solution: “Enabling low cost, high quality, simple to design graphical interfaces allows for intuitive use of complex products by all users” ‘Enabling The Smart Society’

7. © 2012 Renesas Electronics America Inc. All rights reserved.7 Introduction to TFT Framebuffer, GAPI and Framework Lab 1: Explore Raster Frame and GAPI Lab 2: Understanding the Framework GUI translation process Lab 3: Create graphical resource files Lab 4: Create new screen Lab 5: Creating Interaction with the Screen Agenda

8. © 2012 Renesas Electronics America Inc. All rights reserved.8 Introduction to GAPI and Framework Lab 1: Explore Frame Buffer and GAPI

9. © 2012 Renesas Electronics America Inc. All rights reserved.9 RGB pixel placement and sync pulses Vertical Sync (1 per frame) D1,DH1 R5R5 G6G6 B5B5 1 PIXEL (or DOT) 16 BITS THERE ARE 130,560 (= 480x272) OF THESE ON THIS PANEL Horizontal Sync (1 per line, 240 lines per frame) L1, P1L1, P2L1, P3L1, P480 1 st LINE L2, P1L2, P2L2, P3L2, P480 2 nd LINE L272, P1L272, P2L272, P3L272, P480 272 nd LINE L1,P1 means “Line 1, Pixel 1” L2,P1 means “Line 2, Pixel 1”

10. © 2012 Renesas Electronics America Inc. All rights reserved.10 Start Lab 1 Please refer to the Lab Handout and let’s get started!

11. © 2012 Renesas Electronics America Inc. All rights reserved.11 The Frame Buffer 480 272 8 8 8 Data (8/8/8, 24bpp) H-SYNC V-SYNC Pixel CLK Control 6 6 6 Data (6/6/6, 18bpp) 5 6 5 Data (5/6/5, 16bpp) RAM Frame Pointer

12. © 2012 Renesas Electronics America Inc. All rights reserved.12 Lab 1 Review/Questions Lab 1 Questions: 1.Where are the bitmaps and fonts source files being stored within the MCU? 2.How are they being located there? 3.What types of issues are you seeing with these methods of writing to the frame buffer?

13. © 2012 Renesas Electronics America Inc. All rights reserved.13 Introduction to GAPI and Framework Lab 2: Understanding the Framework

14. © 2012 Renesas Electronics America Inc. All rights reserved.14 What is the “Framework”? Overview of demonstration code Hardware Ext. Bus Driver RTOS GAPI FrameWork USB DriverEthernet Driver USB-APIEthernet-API Direct Drive User Application Screens Other Application Code

15. © 2012 Renesas Electronics America Inc. All rights reserved.15 Start Lab 2 Please refer to the Lab Handout and let’s get started!

16. © 2012 Renesas Electronics America Inc. All rights reserved.16 Framework Flow

17. © 2012 Renesas Electronics America Inc. All rights reserved.17 Lab 2 Review/Questions Lab 2 Questions: 1.How are we changing the color of the slider button? 2.Do you need to use Screen Object in the callback? 3.How are we handling the display corruption issues from Lab 1?

18. © 2012 Renesas Electronics America Inc. All rights reserved.18 Lab 2 Questions: 1 - How are we changing the color of the slider button? Determines the visual behavior of an associated object The usage of the scheme is dependent on object: In case of button handler – [0]: behavior in inactive state – [1]: behavior in active state In case of slider handler – [0]: appearance of the slider bar – [1]: appearance of the slider button

19. © 2012 Renesas Electronics America Inc. All rights reserved.19 2-Do you need to use screen objects in the callback? No Screen objects are just a template for common behavior. Completely custom behavior can be defined in the callback. A combination of custom behavior and screen object is typical. Creation of your own “Screen Objects” is encouraged. In case of “Touched” callback, no screen object is used.

20. © 2012 Renesas Electronics America Inc. All rights reserved.20 3-How are we handling the display corruption? Background Work Display Via frame buffer manipulation

21. © 2012 Renesas Electronics America Inc. All rights reserved.21 GUI Translation Process: Lab 3: Create Graphical Resource Files

22. © 2012 Renesas Electronics America Inc. All rights reserved.22 Original Artwork Your Mission: Make it “Work”

23. © 2012 Renesas Electronics America Inc. All rights reserved.23 Decomposing the Problem Touch SpotsStatic TextDynamic Text

24. © 2012 Renesas Electronics America Inc. All rights reserved.24 Breaking out Resources Background Image Waveform Box Slider Font “Square 721 BT” in sizes 12, 18, 24, 42 Icons, Buttons and Regions

25. © 2012 Renesas Electronics America Inc. All rights reserved.25 Converting Resources Button and Box Conversions

26. © 2012 Renesas Electronics America Inc. All rights reserved.26 Start Lab 3 Please refer to the Lab Handout and let’s get started!

27. © 2012 Renesas Electronics America Inc. All rights reserved.27 Lab 3 Review/Questions Lab 3 Questions: 1.What are several advantages and disadvantages to building the screen at runtime from components (as opposed to pre-rendering the information into the bitmaps)?

28. © 2012 Renesas Electronics America Inc. All rights reserved.28 GUI Translation Process: Lab 4: Create new screen

29. © 2012 Renesas Electronics America Inc. All rights reserved.29 Resource File Contains all resources Individual components accessed at runtime

30. © 2012 Renesas Electronics America Inc. All rights reserved.30 Initial Screen Creation Build Background Add buttons Background Frame Display Frame Resources.bin

31. © 2012 Renesas Electronics America Inc. All rights reserved.31 Start Lab 4-Almost Done Please refer to the Lab Handout and let’s get started!

32. © 2012 Renesas Electronics America Inc. All rights reserved.32 Lab 4 Review/Questions Lab 4 Questions: 1.Where in the source code are the six “data boxes” being handled? 2.What would be another candidate for a “handler” looking at the source in this example?

33. © 2012 Renesas Electronics America Inc. All rights reserved.33 GUI Translation Process: Lab 5: Creating Interaction with the Screen

34. © 2012 Renesas Electronics America Inc. All rights reserved.34 Using Events to Signal Updates Use Callback to control non-graphical elements Use Events to signal updates to Callback functions Control Target Rate from Slider Display simulated data values on graph and monitors

35. © 2012 Renesas Electronics America Inc. All rights reserved.35 Start Lab 5 – Last One Please refer to the Lab Handout and let’s get started!

36. © 2012 Renesas Electronics America Inc. All rights reserved.36 Lab 5 Review/Questions Lab 5 Questions: 1.What happens if you use the FileFind framework call to search for a resource and it is not located?

37. © 2012 Renesas Electronics America Inc. All rights reserved.37 Questions? Questions?

38. © 2012 Renesas Electronics America Inc. All rights reserved.38 Challenge: “As everyday products become more complex, the ability to control and configure them becomes more difficult.” Solution: “Enabling low cost, high quality, simple to design graphical interfaces allows for intuitive use of complex products by all users” ‘Enabling The Smart Society’

39. © 2012 Renesas Electronics America Inc. All rights reserved.39 Please utilize the ‘Guidebook’ application to leave feedback or Ask me for the paper feedback form for you to use… Please Provide Your Feedback…

40. Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved.