1. Renesas Electronics America Inc. © 2010 Renesas Electronics America Inc. All rights reserved. 431L: Using a Graphics API to Create User Interface Components—Advanced Making it real Jon Brabender Senior Staff Engineer October 13, 2010 Version: 1.1

2. 2 © 2010 Renesas Electronics America Inc. All rights reserved. Jon Brabender Sr. Engineering Manager 9 years with Renesas Electronics Technical Lead for RX MCU Family Creator or LCD Direct Drive and GAPI IP 25 years experience in embedded product development Mostly industrial controls

3. 3 © 2010 Renesas Electronics America Inc. All rights reserved. Renesas Technology and Solution Portfolio Microcontrollers & Microprocessors #1 Market share worldwide * Analog and Power Devices #1 Market share in low-voltage MOSFET** Solutions for Innovation ASIC, ASSP & Memory Advanced and proven technologies * MCU: 31% revenue basis from Gartner "Semiconductor Applications Worldwide Annual Market Share: Database" 25 March 2010 **Power MOSFET: 17.1% on unit basis from Marketing Eye 2009 (17.1% on unit basis).

4. 4 © 2010 Renesas Electronics America Inc. All rights reserved. 4 Renesas Technology and Solution Portfolio Microcontrollers & Microprocessors #1 Market share worldwide * Analog and Power Devices #1 Market share in low-voltage MOSFET** ASIC, ASSP & Memory Advanced and proven technologies * MCU: 31% revenue basis from Gartner "Semiconductor Applications Worldwide Annual Market Share: Database" 25 March 2010 **Power MOSFET: 17.1% on unit basis from Marketing Eye 2009 (17.1% on unit basis). Solutions for Innovation

5. 5 © 2010 Renesas Electronics America Inc. All rights reserved. 5 Microcontroller and Microprocessor Line-up Superscalar, MMU, Multimedia  Up to 1200 DMIPS, 45, 65 & 90nm process  Video and audio processing on Linux  Server, Industrial & Automotive  Up to 500 DMIPS, 150 & 90nm process  600uA/MHz, 1.5 uA standby  Medical, Automotive & Industrial  Legacy Cores  Next-generation migration to RX High Performance CPU, FPU, DSC Embedded Security  Up to 10 DMIPS, 130nm process  350 uA/MHz, 1uA standby  Capacitive touch  Up to 25 DMIPS, 150nm process  190 uA/MHz, 0.3uA standby  Application-specific integration  Up to 25 DMIPS, 180, 90nm process  1mA/MHz, 100uA standby  Crypto engine, Hardware security  Up to 165 DMIPS, 90nm process  500uA/MHz, 2.5 uA standby  Ethernet, CAN, USB, Motor Control, TFT Display High Performance CPU, Low Power Ultra Low Power General Purpose

6. 6 © 2010 Renesas Electronics America Inc. All rights reserved. 6 Microcontroller and Microprocessor Line-up Superscalar, MMU, Multimedia  Up to 1200 DMIPS, 45, 65 & 90nm process  Video and audio processing on Linux  Server, Industrial & Automotive  Up to 500 DMIPS, 150 & 90nm process  600uA/MHz, 1.5 uA standby  Medical, Automotive & Industrial  Legacy Cores  Next-generation migration to RX High Performance CPU, FPU, DSC Embedded Security  Up to 10 DMIPS, 130nm process  350 uA/MHz, 1uA standby  Capacitive touch  Up to 25 DMIPS, 150nm process  190 uA/MHz, 0.3uA standby  Application-specific integration  Up to 25 DMIPS, 180, 90nm process  1mA/MHz, 100uA standby  Crypto engine, Hardware security  Up to 165 DMIPS, 90nm process  500uA/MHz, 2.5 uA standby  Ethernet, CAN, USB, Motor Control, TFT Display High Performance CPU, Low Power Ultra Low Power General Purpose RX LCD Direct Drive

7. 7 © 2010 Renesas Electronics America Inc. All rights reserved. Innovation Enabling low cost, high performance GUI.

8. 8 © 2010 Renesas Electronics America Inc. All rights reserved. Position Statement Free tools can be used create world class UI products.

9. 9 © 2010 Renesas Electronics America Inc. All rights reserved. Agenda GUI translation process Lab 1: Create resource files Lab 2: Create new screen Lab 3: Making it work

10. © 2010 Renesas Electronics America Inc. All rights reserved. 10 GUI translation process

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

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

13. 13 © 2010 Renesas Electronics America Inc. All rights reserved. ABCabc123 123 Breaking out Resources Background Image Transparency “T” Font “Square 721 BT” in sizes 12, 18, 42 Icons, Buttons and Regions

14. 14 © 2010 Renesas Electronics America Inc. All rights reserved. Coverting Resources Background Image Tradeoffs 16bpp 256Kbytes 8bpp – 128Kb8bpp RLE – 103Kb 4bpp – 64Kb 16bpp Inset

15. 15 © 2010 Renesas Electronics America Inc. All rights reserved. Converting Resources Button and Box Conversions

16. © 2010 Renesas Electronics America Inc. All rights reserved. 16 Lab 1: Create Resource Files

17. 17 © 2010 Renesas Electronics America Inc. All rights reserved. Start Lab 1 Keep your dice turned to the section of the lab you are on. (Instructions are provided in the lab handout) Please refer to the Lab Handout and let’s get started! 17

18. 18 © 2010 Renesas Electronics America Inc. All rights reserved. Lab 1 Review/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)?

19. © 2010 Renesas Electronics America Inc. All rights reserved. 19 Lab 2: Create Screen Using Your Resources

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

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

22. 22 © 2010 Renesas Electronics America Inc. All rights reserved. Start Lab 2 Keep your dice turned to the section of the lab you are on. (Instructions are provided in the lab handout) Please refer to the Lab Handout and let’s continue! 22

23. 23 © 2010 Renesas Electronics America Inc. All rights reserved. Lab 2 Review/Questions 2. Where in the source code are the “temperature” boxes and “T” shading be drawn? Why? 3. What would be another candidate for a “handler” looking at the sourced in this example?

24. © 2010 Renesas Electronics America Inc. All rights reserved. 24 Lab 3: Making it Work – Linking behavior

25. 25 © 2010 Renesas Electronics America Inc. All rights reserved. Controlling Dynamic Text Use Callback functions to control text Use +/- Buttons to control temperature values Time/Date will be displayed using timer event

26. 26 © 2010 Renesas Electronics America Inc. All rights reserved. Start Lab 3 Keep your dice turned to the section of the lab you are on. (Instructions are provided in the lab handout) Please refer to the Lab Handout and let’s continue! 26

27. 27 © 2010 Renesas Electronics America Inc. All rights reserved. Lab 3 Review/Questions 4. What happens if you use the FileFind framework call to search for a resource and it is not located?

28. 28 © 2010 Renesas Electronics America Inc. All rights reserved. Innovation Enabling low cost, high performance GUI.

29. 29 © 2010 Renesas Electronics America Inc. All rights reserved. Questions?

30. © 2010 Renesas Electronics America Inc. All rights reserved. 30 Thank You

31. Renesas Electronics America Inc.