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.11
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?
© 2012 Renesas Electronics America Inc. All rights reserved.12
Introduction to GAPI and Framework
Lab 2: Understanding the Framework
© 2012 Renesas Electronics America Inc. All rights reserved.13
What is the “Framework”?
 Overview of demonstration code
Hardware
Ext. Bus Driver
RTOS
GAPI
FrameWork
USB Driver Ethernet 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 let’s get started!
© 2012 Renesas Electronics America Inc. All rights reserved.15
Framework Flow

Event Sources
(Touchscreen,RTC)
© 2012 Renesas Electronics America Inc. All rights reserved.16
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?
© 2012 Renesas Electronics America Inc. All rights reserved.17
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
© 2012 Renesas Electronics America Inc. All rights reserved.18
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.
© 2012 Renesas Electronics America Inc. All rights reserved.19
3-How are we handling the display corruption?
Background

Work
Display
 Via frame buffer manipulation
© 2012 Renesas Electronics America Inc. All rights reserved.20
GUI Translation Process:
Lab 3: Create Graphical Resource Files
© 2012 Renesas Electronics America Inc. All rights reserved.21
Original Artwork
 Your Mission: Make it “Work”
© 2012 Renesas Electronics America Inc. All rights reserved.22
Decomposing the Problem
Touch Spots Static Text Dynamic Text
© 2012 Renesas Electronics America Inc. All rights reserved.23
Breaking out Resources
 Background Image
 Waveform Box
 Slider
 Font “Square 721 BT” in sizes 12, 18, 24, 42
 Icons, Buttons and Regions
© 2012 Renesas Electronics America Inc. All rights reserved.24
Converting Resources
 Button and Box Conversions
© 2012 Renesas Electronics America Inc. All rights reserved.25
Start Lab 3
 Please refer to the Lab Handout and let’s get started!