<?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>

<section id="GUID-A512AE19-D921-47B7-86D7-1AE293365BC9-GENID-1-10-1-12-1-1-6-1-5-1-3-1"><title>Download</title> <p>Click on the following link to download the example: <xref href="guid-6013a680-57f9-415b-8851-c4fa63356636/zips/guid-25ca392e-ce0c-414e-99aa-3f419cfe5170.zip" scope="external">GraphicsShell.zip</xref></p><p>Click: <xref href="guid-6013a680-57f9-415b-8851-c4fa63356636/guid-25ca392e-ce0c-414e-99aa-3f419cfe5170.html" scope="peer">browse</xref> to view the example code. </p><p>The example

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

<section id="GUID-12DAE9CC-9E18-40AA-A820-FBC86F179425-GENID-1-10-1-12-1-1-6-1-5-1-3-2"><title>Description</title> 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:

  <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>

<section id="GUID-7CC504AD-E99D-419D-9A86-E5051B80705E"><b>Screenshots</b><fig id="GUID-0022F196-B3BD-5438-99C8-6EF0AA0D1E43-GENID-1-10-1-12-1-1-6-1-5-1-3-3-2">

<title>           Basic Screenshot      </title>

<image href="GUID-61BB12AA-7467-5633-8E4C-54D82AFF0F5E_d0e185528_href.jpg" placement="inline"/>

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

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

<image href="GUID-59D86225-4727-5B3F-9117-7815B4900445_d0e185535_href.jpg" placement="inline"/>

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

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

<image href="GUID-D84847BB-523D-5057-8F14-F6BCEECA2327_d0e185542_href.jpg" placement="inline"/>

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

and Implementation</title><p><fig id="GUID-0022F196-B3BD-5438-99C8-6EF0AA0D1E43-GENID-1-10-1-12-1-1-6-1-5-1-3-5-2-1">

<title>UML class diagram     </title>

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

<image href="GUID-02970C7B-5B98-50C7-A324-0DDD71120DEB_d0e185592_href.png" placement="inline"/>

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

<section id="GUID-11F1F1BF-F1DC-4876-B47A-275B07C645E3-GENID-1-10-1-12-1-1-6-1-5-1-3-6"><title>Building

and running</title> <p><xref href="GUID-3100800B-B2F7-50EF-BD4C-3C345ECCB2A5.dita">The Symbian build

process</xref> describes how to build an application.</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>

<li id="GUID-CC897C4A-15CF-4B05-ABF7-32A1A0C38AFA-GENID-1-10-1-12-1-1-6-1-5-1-3-7-2-1"><p>Change the <codeph>WINDOWMODE</codeph> parameter  to <codeph>Color16MAP </codeph>in <codeph>epoc32\release\winscw\&lt;udeb/urel&gt;\z\system\data\wsini.ini </codeph>(<codeph>epoc32\data\z\system\data\wsini.ini on the H4 board</codeph>).</p></li>

<li id="GUID-CC897C4A-15CF-4B05-ABF7-32A1A0C38AFA-GENID-1-10-1-12-1-1-6-1-5-1-3-7-2-2"><p>The application

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-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>