Using the Renesas Graphics API to Create a User Interface

Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved. Using the Renesas Graphics API to Create a User Interface © 2012 Renesas Electronics America Inc. All rights reserved.2 Renesas Technology & Solution Portfolio © 2012 Renesas Electronics America Inc. All rights reserved.3 Renesas Technology & Solution Portfolio © 2012 Renesas Electronics America Inc. All rights reserved.4 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-bit8/16-bit 32-Bit High Performance DSP, FPU with High Integration © 2012 Renesas Electronics America Inc. All rights reserved.5  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’ © 2012 Renesas Electronics America Inc. All rights reserved.6  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 © 2012 Renesas Electronics America Inc. All rights reserved.7 Introduction to GAPI and Framework Lab 1: Explore Frame Buffer and GAPI © 2012 Renesas Electronics America Inc. All rights reserved.8 RGB pixel placement and sync pulses Vertical Sync (1 per frame) D1,DH1 R 5 G 6 B 5 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, P1 L1, P2 L1, P3 L1, P480 1 st LINE L2, P1 L2, P2 L2, P3 L2, P480 2 nd LINE L272, P1 L272, P2 L272, P3 L272, P480 272 nd LINE L1,P1 means “Line 1, Pixel 1” L2,P1 means “Line 2, Pixel 1” © 2012 Renesas Electronics America Inc. All rights reserved.9 Start Lab 1  Please refer to the Lab Handout and let’s get started! © 2012 Renesas Electronics America Inc. All rights reserved.10 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 Frame Pointer [...]... 2012 Renesas Electronics America Inc All rights reserved Start Lab 3  Please refer to the Lab Handout and let’s get started! 25 © 2012 Renesas Electronics America Inc All rights reserved 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)? 26 © 2012 Renesas. .. Electronics America Inc All rights reserved What is the “Framework”?  Overview of demonstration code User Application Screens Other Application Code FrameWork GAPI USB -API Ethernet -API RTOS Ext Bus Driver Direct Drive USB Driver Hardware 13 © 2012 Renesas Electronics America Inc All rights reserved Ethernet Driver Start Lab 2  Please refer to the Lab Handout and let’s get started! 14 © 2012 Renesas Electronics... 2012 Renesas Electronics America Inc All rights reserved GUI Translation Process: Lab 5: Creating Interaction with the Screen 32 © 2012 Renesas Electronics America Inc All rights reserved 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... Frame 29 © 2012 Renesas Electronics America Inc All rights reserved Start Lab 4-Almost Done  Please refer to the Lab Handout and let’s get started! 30 © 2012 Renesas Electronics America Inc All rights reserved 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?... reserved 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 17 © 2012 Renesas Electronics... monitors 33 © 2012 Renesas Electronics America Inc All rights reserved Start Lab 5 – Last One  Please refer to the Lab Handout and let’s get started! 34 © 2012 Renesas Electronics America Inc All rights reserved 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? 35 © 2012 Renesas Electronics America Inc All... Electronics America Inc All rights reserved 3-How are we handling the display corruption?  Via frame buffer manipulation Background Work Display 19 © 2012 Renesas Electronics America Inc All rights reserved GUI Translation Process: Lab 3: Create Graphical Resource Files 20 © 2012 Renesas Electronics America Inc All rights reserved Original Artwork  Your Mission: Make it “Work” 21 © 2012 Renesas Electronics...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? 11 © 2012 Renesas Electronics America Inc All rights reserved Introduction to GAPI and Framework Lab 2: Understanding the Framework 12 © 2012 Renesas Electronics... Renesas Electronics America Inc All rights reserved GUI Translation Process: Lab 4: Create new screen 27 © 2012 Renesas Electronics America Inc All rights reserved Resource File  Contains all resources  Individual components accessed at runtime 28 © 2012 Renesas Electronics America Inc All rights reserved Initial Screen Creation  Build Background  Add buttons Background Frame Resources.bin Display... Electronics America Inc All rights reserved Framework Flow Event Sources (Touchscreen,RTC) 15 © 2012 Renesas Electronics America Inc All rights reserved 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? 16 © 2012 Renesas Electronics America Inc All . Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved. Using the Renesas Graphics API to Create a User Interface © 2012 Renesas Electronics America Inc Driver USB -API Ethernet -API Direct Drive User Application Screens Other Application Code © 2012 Renesas Electronics America Inc. All rights reserved.14 Start Lab 2  Please refer to the Lab Handout and. 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 ©