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

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

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

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

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

     6 <!-- Initial Contributors:

     7     Nokia Corporation - initial contribution.

     8 Contributors: 

     9 -->

    10 <!DOCTYPE concept

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

    12 <concept id="GUID-53707903-9A88-409B-80F8-FDF7EF47ACBF" xml:lang="en"><title>CoverFlow: using ScreenPlay</title><shortdesc>This example application demonstrates creating semi-transparent

    13 UI content over OpenVG content that is rendered to a composition surface.

    14 This is only possible when ScreenPlay is enabled. </shortdesc><prolog><metadata><keywords/></metadata></prolog><conbody>

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

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

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

    18 display images while semi-transparent or transparent windows and controls

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

    20   <ul>

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

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

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

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

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

    26 <li>Displays an incoming call animation and a moving ticker window

    27 in a separate active object. These are activated when relevant key

    28 press events are detected. It uses the invalidate and re-draw pattern

    29 of the window server to draw the contents on the window. </li>

    30 </ul>       The ScreenPlay graphics architecture uses a composition

    31 engine to display multiple overlaid windows. The composition engine

    32 takes multiple overlaid surfaces as input and creates a single screen

    33 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

    34 Graphics Architecture</xref>.  </section>

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

    36 <title>           Basic Screenshot      </title>

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

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

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

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

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

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

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

    44 </fig></section>

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

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

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

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

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

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

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

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

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

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

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

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

    57 <title>UML class diagram     </title>

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

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

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

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

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

    63 process</xref> describes how to build an application.</p></section>

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

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

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

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

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

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

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

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

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

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

    74 can be boosted significantly by switching to portrait mode, which

    75 is the native mode for the LCD controller. To enable portrait mode,

    76 uncomment the following line in the <filepath>coverflowapp.mmp</filepath>:</p><codeblock xml:space="preserve">// MACRO PORTRAIT_MODE</codeblock></li>

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

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

    79 screenheight 320

    80 fasciabitmap null.bmp

    81 screenoffsetx 0

    82 screenoffsety 0</codeblock></li>

    83 </ol></section>

    84 

    85 

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

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

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

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

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

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

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

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

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

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

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

    97 call animation.</li>

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

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

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

   101 

   102 </conbody></concept>