<?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-14-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-14-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-14-1-1-6-1-5-1-3-3-2">
<title>           Basic Screenshot      </title>
<image href="GUID-61BB12AA-7467-5633-8E4C-54D82AFF0F5E_d0e190524_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_d0e190531_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_d0e190538_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-14-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_d0e190588_href.png" placement="inline"/>
</fig></p></section>
<section id="GUID-11F1F1BF-F1DC-4876-B47A-275B07C645E3-GENID-1-10-1-14-1-1-6-1-5-1-3-6"><title>Building
and running</title> <p>The Symbian build process 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-14-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-14-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>