<?xml version="1.0" encoding="utf-8"?>

<!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. -->

<!-- This component and the accompanying materials are made available under the terms of the License 

"Eclipse Public License v1.0" which accompanies this distribution, 

and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". -->

<!-- Initial Contributors:

    Nokia Corporation - initial contribution.

Contributors: 

-->

<!DOCTYPE concept

  PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">

<concept id="GUID-53707903-9A88-409B-80F8-FDF7EF47ACBF" xml:lang="en"><title>CoverFlow: using ScreenPlay</title><shortdesc>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. </shortdesc><prolog><metadata><keywords/></metadata></prolog><conbody>

is located in the <filepath>examples\Graphics\CoverFlow</filepath> directory.</p></section>

display images while semi-transparent or transparent windows and controls

are used to display overlaid content. The application does the following:

  <ul>

<li>Creates an EGL drawing surface by calling the <xref href="GUID-AFCD509C-11EA-305D-9E25-D5A8E4244CF1.dita"><apiname>eglCreateWindowSurface()</apiname></xref> function.</li>

<li>Converts bitmap cover images to OpenVG images. </li>

<li>Applies OpenVG transformations on the converted OpenVG images.</li>

<li>Draws the transformed images on the EGL surface by calling the <xref href="GUID-D825614F-A95A-3BE3-9B31-5E76507AB79A.dita"><apiname>vgDrawImage()</apiname></xref> function.</li>

<li>Draws the mirror image of bitmap cover images on the surface.</li>

<li>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. </li>

</ul>       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 <xref href="GUID-859CAA08-59C9-5FD3-98DE-6BDD0D6ED50B.dita">Graphics Composition</xref> and <xref href="GUID-D93978BE-11A3-5CE3-B110-1DEAA5AD566C.dita">The ScreenPlay

Graphics Architecture</xref>.  </section>

<title>           Basic Screenshot      </title>

</fig><fig id="GUID-C918E177-E2DF-4F76-A6AD-709B93959B9E">

<title>Screenshot showing ticker and incoming call animation </title>

</fig><fig id="GUID-0B983730-C5C8-47DF-82FB-4A02624CEECD">

<title>Screenshot showing the absence of the mirror surface </title>

</fig></section>

<section id="GUID-801DEEAD-37EC-4FE3-88C9-CBCFA7650E0A"><title>Class

Summary</title><p>These are the principal classes used in this example:<ul>

<li><codeph>CCoverFlowAppUi</codeph></li>

<li><codeph>CEGLRendering</codeph></li>

<li><codeph>MEngine</codeph></li>

<li><codeph>CDialogBox</codeph></li>

<li><codeph>COpenVGEngine</codeph></li>

<li><codeph>CTicker</codeph></li>

<li><codeph>CLoader</codeph></li>

</ul></p></section>

<section id="GUID-6F6FBA67-C8F1-4B55-9922-ADCF9CB0636A"><title>Design

<title>UML class diagram     </title>

</fig><fig id="GUID-F08882AF-B171-4D56-A3E7-F510D87D9FEC">

</fig></p></section>

<section id="GUID-3D4FF2C6-91B8-4EFC-A008-DE4FEEF5938A"><title>Configuration

settings for running the example on an Emulator or H4 board</title><ol>

cannot run if ScreenPlay is disabled. If it is not already enabled,

you need to enable it. See <xref href="GUID-6D8A1FC7-095B-587E-8274-23C132978C53.dita">Enabling the Graphics

Architecture Variants </xref>for more information.</p></li>

<li id="GUID-B6E8CCB6-B71F-45AF-9BC5-6C79E30B74F6"><p>(Emulator only):

Copy all <filepath>.mbm</filepath> (image) files from the <filepath>coverflow\gfx\call</filepath> directory to the <filepath>epoc32\release\winscw\&lt;udeb/urel&gt;\z\resource\apps</filepath> directory.</p></li>

<li id="GUID-C8F36B2B-5B19-43A6-8F6C-75E2782C91EE"><p>Performance

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 <filepath>coverflowapp.mmp</filepath>:</p><codeblock xml:space="preserve">// MACRO PORTRAIT_MODE</codeblock></li>

<li id="GUID-7070197E-8E9C-450E-B9AC-5CE8846CE382"><p>Add the following

configuration statements to the <filepath>epoc32\data\epoc.ini</filepath> to run the example in portrait mode. </p><codeblock xml:space="preserve">screenwidth 240

screenheight 320

fasciabitmap null.bmp

screenoffsetx 0

screenoffsety 0</codeblock></li>

</ol></section>

<section id="GUID-FDB1B241-DD03-4C44-959B-905D6059B5A1"><title>Building the ROM Image</title><p>Perform the following steps to build the ROM image:<ol>

<li id="GUID-E1C673B2-5D3A-4DFB-9336-554620F0BA4F">Ensure that the

SD card is connected and its drive letter is <codeph>F:</codeph>.</li>

<li id="GUID-B2B32E0C-0FFD-4257-BC6A-8C8D78947CED"><p>Create the ROM

image using the following command from <filepath>epoc32\rom\</filepath>:</p><p>  <codeblock xml:space="preserve"> &gt; buildrom.cmd -D_EABI=ARMV5 -DRVCT -DEXCLUDE_JAVA -DSYMBIAN_BASE_USE_GCE -DSYMBIAN_GRAPHICS_USE_GCE -nosymbols -nofm h4hrp techview coverflowapp.iby -osys$rom.bin &amp;&amp; zip sys$rom.zip sys$rom.bin &amp;&amp; copy /y sys$rom.zip f:\ &amp;&amp; chkdsk f:</codeblock></p></li>

<li id="GUID-DA0049E4-0595-4DB3-B692-92AE42B34B48">Copy all <filepath>.mbm</filepath> (image) files from <filepath> coverflow\gfx\call</filepath> to<filepath>e:\resource\apps</filepath> of the SD card.   Copy the <filepath>covers.mbm</filepath> file from<filepath> \epoc32\data\z\resource\apps\covers.mbm </filepath>to <filepath>e:\resource\apps\</filepath>of the SD card. </li>

</ol></p></section>

<section id="GUID-0ECB73AE-87F0-449A-8F3E-7959794F52DC"><title>Running

and using the example</title><p><ol>

<li id="GUID-D819C144-751D-4FD6-8229-4EFF00F379D1">Run <filepath>coverflowapp.exe</filepath>.</li>

<li id="GUID-076DD732-5AD6-471C-8E93-33992A44A92D">Press the Left

or the Right arrow key to navigate through the covers.</li>

<li id="GUID-985331D6-029A-4777-B006-9A4F370827B1">Press the Down

arrow key to show or hide the Ticker at the bottom of the screen.</li>

<li id="GUID-746C8166-2BBB-435F-A6D5-61ED86045F0C">Press the Up arrow

key to show or hide the incoming call animation.   </li>

<li id="GUID-29369361-B50F-499D-9B50-D81E5151A3A1">Press the Tab key

to show or hide the semi-transparent green window around the incoming

call animation.</li>

<li id="GUID-0DED8319-2F36-42BB-998C-291A3E4ADA9A">Press the Backspace

key to show or hide mirror images of the covers. </li>

</ol>   </p></section>

</conbody></concept>