Graphic System Design Considerations (1)

Renesas Electronics America Inc.
© 2012 Renesas Electronics America Inc. All rights reserved.
Graphic System Design Considerations
© 2012 Renesas Electronics America Inc. All rights reserved.2
Renesas Technology & Solution Portfolio
© 2012 Renesas Electronics America Inc. All rights reserved.3
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
© 2012 Renesas Electronics America Inc. All rights reserved.4
 Challenge:
“In the smart society we want more information and control
over the power consumption of electronic devices.”
 Solution:
“This class will show how to build a graphical user interface
(GUI). GUIs can be used to provide a method for user input
and control over power consumption of our electronics”
‘Enabling The Smart Society’
© 2012 Renesas Electronics America Inc. All rights reserved.5
Agenda
 Introduction
 Key System Design Requirements
 System Design Discussion
 System Design Example
© 2012 Renesas Electronics America Inc. All rights reserved.6
Introduction
© 2012 Renesas Electronics America Inc. All rights reserved.7
Introduction
 The following items are required for a
graphical system
 Display
– Screen showing desired graphics

 Display Driver
– Moves pixels from framebuffer to display
 Framebuffer
– Memory buffer(s) containing graphical
content
 Drawing Engine
– HW/SW responsible for drawing to
framebuffer
© 2012 Renesas Electronics America Inc. All rights reserved.8
Key Requirements
© 2012 Renesas Electronics America Inc. All rights reserved.9
Key Requirements - Displays
 Thin Film Transistor (TFT) Liquid Crystal Displays (LCD)
 Most common display technology in embedded systems
 Many varieties of LCDs (color, monochrome, grayscale, etc…)
 Requires backlight
 Organic Light Emitting Diode (OLED)
 Better contrast ratio than LCD
 Lighter than LCD
 Uses less power than LCD
 Electronic Paper Display (e-ink)
 Does not emit light
 No power required to maintain color
 Commonly used on electronic readers (Amazon Kindle)
© 2012 Renesas Electronics America Inc. All rights reserved.10
Key Requirements - Display Controllers
 LCD TFT Controller External
 Typically 18 (RGB 6:6:6) or 24 (RGB 8:8:8) data lines
 Pixel Clock
 Data Enable

 Horizontal Sync
 Vertical Sync
Video
Output
clk, hsync,
vsync, desync
and data
Timing
Controller
clk, hsync,
vsync, desync
and data
Additional
derived
Sync signals
© 2012 Renesas Electronics America Inc. All rights reserved.11
Key Requirements - Display Controllers
 LCD TFT Controller Internal
 Multiple layers
 Alpha blending of layers
 Dithering of layers
 Byte stuffing (direct 24bit access)
Background
Layer 3
Layer 2
Layer 1
Layer 0
Alpha Blending
Layer Blend Pipe
Dithering

Timing
Signals
Red
Green
Blue
Pixel Clk
Data Enable
H Sync
V Sync
© 2012 Renesas Electronics America Inc. All rights reserved.12
Key Requirements - TFT Timing
 Most critical timing signals
 Pixel Clock - used to push pixels to display
– Importance: determines how fast the display is refreshed
 Vertical Blanking Time - Sync time between frames
– Importance: visible framebuffer(s) can only be updated
during vertical blanking
‘Missing‘ Data Enable Sync
for several lines marks vsync
(frame sync)
© 2012 Renesas Electronics America Inc. All rights reserved.13
Key Requirements - Framebuffer Memory
 Memory buffer(s) containing graphical content
 Total memory required for framebuffer(s) can be significant
 Example 640x480pixels w/16bpp RGB 5:6:5 color
– Double Buffered
• 640*480pixels*2 bytes/pixel * 2 buffers = 1,228,800 bytes
 Framebuffer Memory Types
 Static RAM (SRAM)
– Faster but larger and more expensive

– Usually internal to MCU and best used for framebuffers if
available
 Dynamic RAM (DRAM)
– Must be refreshed periodically therefore slower
– Usually external to MCU and best used for caching drawing
objects
© 2012 Renesas Electronics America Inc. All rights reserved.14
Key Requirements - Framebuffer Pixel Format
 Pixels are often described by size (in bits) and color format
 Ex: 16bpp RGB 5:6:5
– 16 bits per pixel
– Color is 5bits red, 6 bits green, and 5bits blue
 A few of the more common color formats are:
 1bpp monochrome
 8bit Color Lookup Table
 16bpp RGB 5:6:5
 24bpp RGB 8:8:8
 32bpp ARGB 8:8:8:8
© 2012 Renesas Electronics America Inc. All rights reserved.15
Key Requirements - Drawing Engine
 Generic term describing all features responsible for updating
framebuffer pixels
 Features can be in hardware or software
 Drawing engine can support 2D or 3D
 Hardware drawing engines significantly reduce CPU load
© 2012 Renesas Electronics America Inc. All rights reserved.16
 Primitives
 Lines
 Polygons
 Circles and Ellipses

 Quadratic Bézier
 Features
 Gradients
 Per-pixel alpha blending
 Anti-aliasing
 Outlining
Drawing Engine - Primitives
© 2012 Renesas Electronics America Inc. All rights reserved.17
Drawing Engine – Textures and Warping
 Texture Mapping
 Array of pixels mapped to primitive
 Transformations / Warping
© 2012 Renesas Electronics America Inc. All rights reserved.18
Drawing Engine – Fast Memory Transfers
 DMA
 Accesses memory independently of the CPU
 Each row is a separate DMA instruction
 Manually skip pixels at front/end of each row
 2D DMA (a.k.a. BitBlit)
 One DMA instruction
 Many Options
– Direct Blit
– Stretch Blit
– Transparency
– Per Pixel Alpha Blending
– Color Keying
– Coloring
–
RLE Decompression
=>

25% Transparency
=>
© 2012 Renesas Electronics America Inc. All rights reserved.19
Drawing Engine - Fonts
 Font Facts
 Rendering fonts is very CPU intensive
 Each glyph has a lot of position information
 Glyphs are frequently pre-rendered
 Bitmap Fonts
 Glyphs represented by array of pixels
 Faster to draw
 Significant memory used
 Glyphs do not scale easily
 Vector Fonts
 Glyphs represented by set of curves
 Slower to draw
 Reduced memory requirement
 Glyphs scale easily
© 2012 Renesas Electronics America Inc. All rights reserved.20
Drawing Engine – Image Compression
 Run Length Encoding
 Lossless compression method
 Works best with line drawings, text, or icons
 Simple algorithm (diagram below)
 JPEG
 Complex algorithms for encoding/decoding
 Lossy compression method
 Best suited for photographs
 Supports increased level of compression w/quality tradeoff
8 pixel x 4 byte = 32 byte

3
4
1
3 pixel x 4 byte + 3 cnt x 1 byte = 15 byte
© 2012 Renesas Electronics America Inc. All rights reserved.21
System Design Discussion
© 2012 Renesas Electronics America Inc. All rights reserved.22
System Design Discussion – Low End System
 Display
 Monochrome Chip On Glass w/o internal timing controller
 Display Controller
 80MHz MCU w/64kB SRAM/512kB flash
 TFT + Timing Controller
 Framebuffers
 128 x 64 pixels
 1bpp monochrome color
 Memory
– (128 x 64) pixels / 8 pixels per bit * 2 buffers = 2 kB SRAM
 Drawing Engine
 Software
 Advantages
 Low Cost
 Disadvantages
 Low colors, small displays, and no drawing engine
© 2012 Renesas Electronics America Inc. All rights reserved.23
System Design Discussion – Mid Level System
 Display
 800x600 pixel 18bit RGB 6:6:6 w/internal timing control
 Display Controller
 120 MHz MCU

– 4MB internal SRAM
– 2MB internal flash
 TFT w/24bit RGB 8:8:8 output
 Framebuffer
 3 hardware layers
 Drawing Engine
 2D drawing engine w/BitBlit
 Advantages
 More colors, larger displays, and hw drawing engine
 Disadvantages
 Limited screen sizes and color formats
© 2012 Renesas Electronics America Inc. All rights reserved.24
System Design Discussion – High End System
 Display
 1920 x 1080 pixel 24bit RGB 8:8:8 w/internal timing control
 Display Controller
 800 MHz MPU
 32MB external DDR3 RAM
 64MB External Flash
 TFT 24bit RGB 8:8:8
 JPEG Encode/Decoder
 Framebuffer
 3 layers
 Drawing Engine
 2D and 3D drawing engine
 Advantages
 High colors, large displays, and 3D drawing engine
 Disadvantages
 Higher cost
© 2012 Renesas Electronics America Inc. All rights reserved.25

System Design Example