CoverFlow: using ScreenPlay
This example application demonstrates creating semi-transparent
UI content over OpenVG content that is rendered to a composition surface.
This is only possible when ScreenPlay is enabled.
Click on the following link to download the example:
to view the example code.
is located in the
This code implements a 'coverflow' application. It uses OpenVG to
display images while semi-transparent or transparent windows and controls
are used to display overlaid content. The application does the following:
Creates an EGL drawing surface by calling the
Converts bitmap cover images to OpenVG images.
Applies OpenVG transformations on the converted OpenVG images.
Draws the transformed images on the EGL surface by calling the
Draws the mirror image of bitmap cover images on the surface.
Displays an incoming call animation and a moving ticker window
in a separate active object. These are activated when relevant key
press events are detected. It uses the invalidate and re-draw pattern
of the window server to draw the contents on the window.
The ScreenPlay graphics architecture uses a composition
engine to display multiple overlaid windows. The composition engine
takes multiple overlaid surfaces as input and creates a single screen
buffer. For more information, see
Figure 1. Basic Screenshot
Figure 2. Screenshot showing ticker and incoming call animation
Figure 3. Screenshot showing the absence of the mirror surface
These are the principal classes used in this example:
Figure 4. UML class diagram
The Symbian build process describes how to
build an application.
settings for running the example on an Emulator or H4 board
epoc32\data\z\system\data\wsini.ini on the H4 board
cannot run if ScreenPlay is disabled. If it is not already enabled,
you need to enable it. See
Enabling the Graphics
for more information.
(image) files from the
directory to the
can be boosted significantly by switching to portrait mode, which
is the native mode for the LCD controller. To enable portrait mode,
uncomment the following line in the
// MACRO PORTRAIT_MODE
Add the following
configuration statements to the
to run the example in portrait mode.
and using the example
Press the Left
or the Right arrow key to navigate through the covers.
Press the Down
arrow key to show or hide the Ticker at the bottom of the screen.
Press the Up arrow
key to show or hide the incoming call animation.
Press the Tab key
to show or hide the semi-transparent green window around the incoming
Press the Backspace
key to show or hide mirror images of the covers.
Copyright ©2010 Nokia Corporation and/or its subsidiary(-ies).
reserved. Unless otherwise stated, these materials are provided under the terms of the Eclipse Public License