Remove ImageActor usage from programming guide 34/67834/3
authorXiangyin Ma <x1.ma@samsung.com>
Mon, 25 Apr 2016 12:24:15 +0000 (13:24 +0100)
committerXiangyin Ma <x1.ma@samsung.com>
Thu, 28 Apr 2016 15:13:38 +0000 (16:13 +0100)
Change-Id: Ifabac0c8896ff96cd632c5b8ede72db9b21c76ff

23 files changed:
docs/content/images/texture-atlas/atlas-size.jpg [deleted file]
docs/content/images/texture-atlas/atlas.jpg [deleted file]
docs/content/images/texture-atlas/compression-example.jpg [deleted file]
docs/content/images/texture-atlas/compression-options.jpg [deleted file]
docs/content/images/texture-atlas/example-code.jpg [deleted file]
docs/content/images/texture-atlas/example-javascript-code.jpg [deleted file]
docs/content/images/texture-atlas/image-wall.jpg [deleted file]
docs/content/images/texture-atlas/texture-packer-add-sprites.jpg [deleted file]
docs/content/images/texture-atlas/texture-packer-preferences.jpg [deleted file]
docs/content/images/texture-atlas/texture-packer-publish.jpg [deleted file]
docs/content/images/texture-atlas/texture-packer-startup.jpg [deleted file]
docs/content/main.md
docs/content/programming-guide/image-actor.h [deleted file]
docs/content/programming-guide/scroll-view.h
docs/content/programming-guide/size-negotiation.h
docs/content/shared-javascript-and-cpp-documentation/item-view.md
docs/content/shared-javascript-and-cpp-documentation/popup.md
docs/content/shared-javascript-and-cpp-documentation/resource-image-scaling.md
docs/content/shared-javascript-and-cpp-documentation/resources.md
docs/content/shared-javascript-and-cpp-documentation/script-json-specification.md
docs/content/shared-javascript-and-cpp-documentation/script-overview.md
docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md [deleted file]
docs/content/shared-javascript-and-cpp-documentation/texture-compression.md [deleted file]

diff --git a/docs/content/images/texture-atlas/atlas-size.jpg b/docs/content/images/texture-atlas/atlas-size.jpg
deleted file mode 100644 (file)
index 084278d..0000000
Binary files a/docs/content/images/texture-atlas/atlas-size.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/atlas.jpg b/docs/content/images/texture-atlas/atlas.jpg
deleted file mode 100644 (file)
index d2e03b2..0000000
Binary files a/docs/content/images/texture-atlas/atlas.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/compression-example.jpg b/docs/content/images/texture-atlas/compression-example.jpg
deleted file mode 100644 (file)
index 474c572..0000000
Binary files a/docs/content/images/texture-atlas/compression-example.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/compression-options.jpg b/docs/content/images/texture-atlas/compression-options.jpg
deleted file mode 100644 (file)
index 1540315..0000000
Binary files a/docs/content/images/texture-atlas/compression-options.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/example-code.jpg b/docs/content/images/texture-atlas/example-code.jpg
deleted file mode 100644 (file)
index 4e2b576..0000000
Binary files a/docs/content/images/texture-atlas/example-code.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/example-javascript-code.jpg b/docs/content/images/texture-atlas/example-javascript-code.jpg
deleted file mode 100644 (file)
index a4f0805..0000000
Binary files a/docs/content/images/texture-atlas/example-javascript-code.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/image-wall.jpg b/docs/content/images/texture-atlas/image-wall.jpg
deleted file mode 100644 (file)
index f06d258..0000000
Binary files a/docs/content/images/texture-atlas/image-wall.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/texture-packer-add-sprites.jpg b/docs/content/images/texture-atlas/texture-packer-add-sprites.jpg
deleted file mode 100644 (file)
index 67b65e7..0000000
Binary files a/docs/content/images/texture-atlas/texture-packer-add-sprites.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/texture-packer-preferences.jpg b/docs/content/images/texture-atlas/texture-packer-preferences.jpg
deleted file mode 100644 (file)
index fa0b067..0000000
Binary files a/docs/content/images/texture-atlas/texture-packer-preferences.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/texture-packer-publish.jpg b/docs/content/images/texture-atlas/texture-packer-publish.jpg
deleted file mode 100644 (file)
index e1564b0..0000000
Binary files a/docs/content/images/texture-atlas/texture-packer-publish.jpg and /dev/null differ
diff --git a/docs/content/images/texture-atlas/texture-packer-startup.jpg b/docs/content/images/texture-atlas/texture-packer-startup.jpg
deleted file mode 100644 (file)
index 5ed29b5..0000000
Binary files a/docs/content/images/texture-atlas/texture-packer-startup.jpg and /dev/null differ
index 41354e0..3cea028 100644 (file)
@@ -30,8 +30,6 @@
   + [Positioning](@ref positioning-actors)
   + [Event Handling](@ref event-system)
   + [Layouting](@ref size-negotiation)
-  + [Image Actor](@ref image-actor)
-  + [Image View](@ref image-view)
  + [Animation](@ref animation)
   + [Basic Framework](@ref animation-basics)
   + [Key Frame Animations](@ref animation-key-frame)
@@ -56,6 +54,7 @@
 
 ### UI Components
  + Buttons
+ + [ImageView](@ref image-view)
  + [ItemView](@ref item-view)
  + [Popup](@ref popup)
  + [Scroll View](@ref scroll-view)
@@ -93,8 +92,6 @@
  + [JavaScript Wrapping Guide for DALi developers](@ref javascriptwrapping)
 
 ### Application Optimization Guide
- + [Texture Atlases](@ref textureatlases)
- + [Texture Compression](@ref texturecompression)
  + [Rescaling Images](@ref resourceimagescaling)
  + Performance & Debugging
  + [Performance Tips](@ref performancetips)
diff --git a/docs/content/programming-guide/image-actor.h b/docs/content/programming-guide/image-actor.h
deleted file mode 100644 (file)
index b528ef1..0000000
+++ /dev/null
@@ -1,87 +0,0 @@
-/*! \page image-actor Image Actors
- *
- *
- * <h1 class="pg">Overview</h1>
- * The Dali::ImageActor inherits from Dali::Actor and provide means to display resources like Images on the stage.
- * All the Dali::Actor methods can be called on them.<br>
- *
- * - <b>ImageActor:</b> An actor for displaying Images. It allows the developer to display a Dali::Image object on the stage.<br>
- *
- * <h1 class="pg">Image Actor</h1>
- *
- * <h2 class="pg">Construction</h2>
- * The Image Actor is constructed by passing a Dali::Image object.
- * Dali::Image is an abstract base class with multiple derived classes.
- * Dali::ResourceImage is used for the common case of loading an image
- * from a file.
- *
- * @code
- * Dali::Image image = ResourceImage::New( myImageFilename );
- * Dali::ImageActor myImageActor = ImageActor::New( image );
- * @endcode
- *
- * <h3 class="pg">Resizing at Load Time</h3>
- * An application loading images from an external source will often want to
- * display those images at a lower resolution than their native ones.
- * To support this, DALi can resize an image at load time so that its
- * in-memory copy uses less space and its visual quality benefits from being
- * prefiltered.
- * There are four algorithms which can be used to fit an image to a desired
- * rectangle, a desired width or a desired height
- * (see Dali::FittingMode).
- *
- * Here is an example doing rescaling:
- *
- * @code
- * Dali::Image image = Dali::ResourceImage::New( filename, ImageDimensions( 240, 240 ), FittingMode::SCALE_TO_FILL );
- * @endcode
- *
- * This example sets the size and fitting mode appropriately for a large thumbnail
- * during Dali::ResourceImage construction.
- * In general, to enable scaling on load, pass a non-zero width or height and
- * one of the four fitting modes to the Dali::ResourceImage creator function
- * as shown above.
- *
- * The fitting modes and a suggested use-case for each are as follows:
- * <ol>
- *   <li> Dali::FittingMode::SHRINK_TO_FIT Full-screen image display: Limit loaded image resolution to device resolution but show all of image.
- *   <li> Dali::FittingMode::SCALE_TO_FILL Thumbnail gallery grid: Limit loaded image resolution to screen tile, filling whole tile but losing a few pixels to match the tile shape.
- *   <li> Dali::FittingMode::FIT_WIDTH Image columns: Limit loaded image resolution to column.
- *   <li> Dali::FittingMode::FIT_HEIGHT Image rows: Limit loaded image resolution to row height.
- * </ol>
- *
- * The dali-demo project contains a full example under
- * <code>examples/image-scaling-and-filtering</code>
- * and a specific sampling mode example under
- * <code>examples/image-scaling-irregular-grid</code>.
- *
- * There are more details on this topic in the
- * \link resourceimagescaling Rescaling Images \endlink
- * section.
- *
- * <h2 class="pg">Style</h2>
- * The Actor can render an image in only as a quad. Use ImageView for nine-patch/n-patch image rendering.<br>
- * -# STYLE_QUAD: A simple flat quad style for rendering images.<br>
- * -# STYLE_NINE_PATCH: This is deprecated as of Dali 1.1.11. 
- *
- * <h2 class="pg">Pixel area</h2>
- * The area of the image to be displayed by the Image Actor can be set by setting the Pixel area. Pixel area is relative to the top-left (0,0) of the image.
- * @code
- * Rect<int> pixel1( myX, myY, myWidth, myHeight );
- * if(!myImageActor.IsPixelAreaSet())
- * {
- *   myImageActor.SetPixelArea( pixel1 );
- * }
- *
- * //Removes the pixel are set
- * myImageActor.ClearPixelArea();
- * @endcode
- *
- *
- * <h2 class="pg">Changing the image</h2>
- * The Image Actor needs a reference to a Dali::Image object on creation. However the Image object can be later changed by calling DaliActor:SetImage
- * @code
- * myImageActor.SetImage( newImage );
- * @endcode
- *
- */
index 981e4da..f236440 100644 (file)
@@ -31,8 +31,8 @@
 
    Add Actors to this ScrollView
    @code
-   ImageView imageActor = Toolkit::ImageView::New(DALI_IMAGE_DIR "button-background.png");
-   myScrollView.Add( imageActor );
+   Toolkit::ImageView imageView = Toolkit::ImageView::New(DALI_IMAGE_DIR "button-background.png");
+   myScrollView.Add( imageView );
    @endcode
 
    The ScrollView contents are now draggable by the user using touch (panning gestures).
index 334c709..9605573 100644 (file)
@@ -49,17 +49,17 @@ Text and image actors have relayout enabled by default, while a plain Actor is d
 
 <h3>Specifying Size Policies</h3>
 
-Actors have different size policies by default. For example ImageActor is set to USE_NATURAL_SIZE. This ensures that when an image actor is
+Actors have different size policies by default. For example ImageView is set to USE_NATURAL_SIZE. This ensures that when an image actor is
 placed on the stage it will use its natural size by default. However if the user calls SetSize with non-zero sizes on the image actor then the current
 size policy is overridden by the FIXED size policy and the actor will take on the size specified.
 
 The next step is to specify how an actor will be size negotiated. The resize policies for an actor may be specified by the following method:
 @code void SetResizePolicy( ResizePolicy::Type policy, Dimension::Type dimension ) @endcode
 It is common to specifiy different policies for the different dimensions of width and height to achive different layouts. Different actors have
-different resize policies specified by default. For example ImageActors are set to use USE_NATURAL_SIZE.
+different resize policies specified by default. For example ImageViews are set to use USE_NATURAL_SIZE.
 
 The following example code snippet shows rootActor having its width policy set to ResizePolicy::FILL_TO_PARENT and its height policy set to ResizePolicy::FIT_TO_CHILDREN.
-It has an ImageActor added to it with an explicit call to USE_NATURAL_SIZE in both dimensions called on it. This will make an actor that will
+It has an ImageView added to it with an explicit call to USE_NATURAL_SIZE in both dimensions called on it. This will make an actor that will
 fill up the space of its parent in the width dimension and fit to its child in the height dimension. As the image actor child is using natural size
 the height of the root actor will fit to the height of the child image.
 
@@ -67,7 +67,7 @@ the height of the root actor will fit to the height of the child image.
 Actor rootActor = Actor::New();
 rootActor.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 rootActor.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
-ImageActor image = ImageActor::New( Image::New( MY_IMAGE_PATH ) );
+Toolkit::ImageView image = Toolkit::ImageView::New( MY_IMAGE_PATH );
 image.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 rootActor.Add( image );
 @endcode
@@ -141,7 +141,7 @@ text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 content.AddChild( text, Toolkit::TableView::CellPosition( 0, 0 ) );
 
 // Image
-ImageActor image = ImageActor::New( ResourceImage::New( IMAGE1 ) );
+Toolkit::ImageView image = Toolkit::ImageView::New( IMAGE_PATH );
 image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 image.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 image.SetPadding( Padding( 20.0f, 0.0f, 0.0f, 0.0f ) );
index 1313253..93c4816 100644 (file)
@@ -32,13 +32,12 @@ public:
   {
     // We should create the actor here that represents our item based on the itemId given.
 
-    // Here we'll create an ImageActor which uses the the itemId to parse the image in a particular directory.
+    // Here we'll create an ImageView which uses the the itemId to parse the image in a particular directory.
     std::ostringstream imageName;
     imageName << "my-image-folder/" << itemId << ".png"; // If item was 10, then this would result in my-image-folder/10.png
-    Dali::ResourceImage image = Dali::ResourceImage::New( imageName.str() );
 
-    // Create an Image Actor from the image and return
-    return Dali::ImageActor::New( image );
+    // Create the Image View from the image and return
+    return Dali::Toolkit::ImageView::New( imageName.str() );
   }
 };
 ~~~
index a86442f..02b7e59 100644 (file)
@@ -44,7 +44,7 @@ Example: Image only popup (using the content field):
 ### Example content: {#popupfieldexample}
   
 - Title:   TextLabel
-- Content: ImageActor or TextLabel
+- Content: ImageView or TextLabel
 - Footer:  PushButton or Actor containing two PushButtons
   
 ## Setting and getting the display state {#popupdisplaystate}
@@ -216,7 +216,7 @@ This example creates a Popup with:
   
 - Title:   TextLabel
 - Content: TextLabel
-- Footer:  ImageActor (an image border around the buttons)
+- Footer:  ImageView (an image border around the buttons)
             - PushButton (OK control)
             - PushButton (Cancel control)
   
@@ -237,7 +237,7 @@ contentActor.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "C
 popup.SetContent( contentActor );
 
 // Create the footer: Two buttons surrounded by an image.
-ImageActor footer = ImageActor::New( ResourceImage::New( DEFAULT_CONTROL_AREA_IMAGE_PATH ) );
+ImageView footer = ImageView::New( DEFAULT_CONTROL_AREA_IMAGE_PATH );
 footer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 footer.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT );
 footer.SetSize( 0.0f, 80.0f );
index 2d68c92..3976541 100644 (file)
@@ -378,7 +378,7 @@ Upscaling can still be effected at render time by setting the size of an actor t
 
 ### Compressed Textures and Scaling {#resourceimagescaling-compressedtextures}
   
-Compressed textures cannot be scaled at load time as their formats are designed to be uploaded directly to GPU memory. To achieve scaling of compressed textures, set the desired size on the attached `ImageActor` for scaling at render time instead.
+Compressed textures cannot be scaled at load time as their formats are designed to be uploaded directly to GPU memory. To achieve scaling of compressed textures, set the desired size on the attached `ImageView` for scaling at render time instead.
   
   
 
@@ -411,7 +411,7 @@ The application can get a scaled resource image rendered correctly to screen wit
   
   1. Use one of the special cases above.
   2. Read the image header from disk, recreate the dimension deriving, fitting, and sampling logic described in this document, and use that to generate a pair of requested dimensions which match the eventual image dimensions.
-  3. Use the requested dimensions it really wants to but then read the image header from disk, recreate the dimension deriving, fitting, and sampling logic described in this document, and set the size of an `ImageActor` to that size explicitly rather than relying on the *natural size* of the image.
+  3. Use the requested dimensions it really wants to but then read the image header from disk, recreate the dimension deriving, fitting, and sampling logic described in this document, and set the size of an `ImageView` to that size explicitly rather than relying on the *natural size* of the image.
   
 
 
index 50ca99b..98c175a 100644 (file)
@@ -10,7 +10,7 @@ To create a resource image:
 ~~~{.cpp}
 Dali::ResourceImage image = Dali::ResourceImage::New( "/my-path/my-image.png" );
 ~~~
-Which can then be used with actors (e.g. ImageActor).
+Which can then be used with actors (e.g. ImageView).
 
 Resources are loaded in separate threads.
 The application can connect to the Dali::ResourceImage::LoadingFinishedSignal() to get notified when the image has loaded.
index f6887cb..2575417 100644 (file)
@@ -121,10 +121,10 @@ The constants section supports sub-string and full property replacement.
     },                                  //
     ...                                 //
     {                                   //
-      "type":"ImageActor"               // An DALi type or a template name
+      "type":"ImageView"               // An DALi type or a template name
       "image":                          //
       {                                 //
-        "filename":"{IMAGES}b.jpg"      // Image filename substring replacement
+        "url":"{IMAGES}b.jpg"      // Image filename substring replacement
       },                                //
       "size": "{SIZE}"                  //
     }                                   //  Property replacement
@@ -171,12 +171,12 @@ an optional actor sub hierarchy.
    {                                    //
    "basic-text":                        //  The template name
    {                                    //
-     "type":"ImageActor",               //  Concrete DALi Type/Class to create
+     "type":"ImageView",               //  Concrete DALi Type/Class to create
      "styles":["base-style"],           //  Style list to apply
      "name":"image",                    //  }
      "image":                           //  } property name : value
      {                                  //  }
-     "filename":"{IMAGES}/b.jpg"        //
+     "url":"{IMAGES}/b.jpg"        //
      },                                 //
      "parentOrigin": "CENTER"           //
      ...                                //
@@ -357,52 +357,6 @@ animation property.
     }                                    //
 ~~~
 
-## Shaders {#shaders}
-
-The shader section of the JSON file defines a library of shader effect
-instances that are created on demand.
-
-The shaders are referred to by name from the template, style, stage or
-animation sections.
-
-Multiple actors can set the same shader as the name refers to a single
-instance.
-
-Similarly one named shader instance can be set to several actors and can
-be animated by one animation.
-
-~~~
-    {                                             //
-    "shaderEffects":                              // Shader Effect section
-    {                                             //
-      "myshader1":                                // Shader  instance  name
-      {                                           //
-       "program":                                 //
-       {                                          // Prefixs are placed before DALi uniforms.
-         "vertexPrefix": "",                      // (Useful for \#defines.)
-         "vertex":"",                             // Glsl vertex program
-         "fragmentPrefix": "",
-         "fragment": "",                          // Glsl fragment program.
-         "geometryType": "GEOMETRY_TYPE_IMAGE",   // Geometry type(see DALi documentation)
-       },
-       "geometryHints": "HINT_NONE":              // Geometry hints (see DALi documentation)
-       "gridDensity": 0,                          // Grid density(see DALi documentation)
-       "image":
-       {
-         "filename": ""                           // Effect image available as a second texture unit.
-       }
-     },
-     ...
-    },
-    "stage":
-    [{
-     "type": "ImageActor",
-     "effect": "myshader1",
-     ...
-    }]
-    }
-~~~
-
 At least one of the vertex or fragment fields is mandatory. All
 other fields are optional will use internal defaults.
 
@@ -486,7 +440,7 @@ builder.addActors( dali.stage.getRootLayer() );
     "stage":                             \\  Stage Section Number
     [                                    \\  An array of actors
      {
-     "type": "ImageActor",
+     "type": "ImageView",
      ...
      "actors":                           \\  Each actor can have children
                                          \\ creating a tree
index 6837b33..4f64f72 100644 (file)
@@ -61,21 +61,21 @@ JSON file contains different sections:
       [
         {
           "name":"usersBackground",
-          "type":"ImageActor",
+          "type":"ImageView",
           "parentOrigin":"CENTER",
           "anchorPoint":"CENTER",
           "size":"{DEFAULT_MENU_USER_SIZE}",
           "colorMode":"USE_OWN_COLOR",
-          "image":{ "filename":"{IMAGE_PATH}white-pixel.png" },
+          "image":{ "url":"{IMAGE_PATH}white-pixel.png" },
           "color":"{DEFAULT_MENU_BACKGROUND_COLOR}"
         },
         {
           "name":"icon",
-          "type":"ImageActor",
+          "type":"ImageView",
           "parentOrigin":"TOP_CENTER",
           "anchorPoint":"TOP_CENTER",
           "position":[0,41,1],
-          "image":{ "filename":"{IMAGE_PATH}ico_man_nor.png" }
+          "image":{ "url":"{IMAGE_PATH}ico_man_nor.png" }
         },
       ]
     },
@@ -222,9 +222,9 @@ Animation anim = builder.createAnimation( "animate-show", propertyMap );
       },
       "actors": [{
           "name":"gallery-1",
-          "type":"ImageActor",
+          "type":"ImageView",
           "image": {
-            "filename": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
+            "url": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
           },
           "customProperties": { // properties registered dynamically
             "cellIndices": [0,0],// property to specify the top-left cell this child occupies
diff --git a/docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md b/docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md
deleted file mode 100644 (file)
index 36d96f8..0000000
+++ /dev/null
@@ -1,249 +0,0 @@
-<!--
-/**-->
-
-# Texture Atlases {#textureatlases}
-
-## Example demo application
-
-![ ](../assets/img/texture-atlas/image-wall.jpg)
-![ ](image-wall.jpg)
-  
-
-Application above is running slow as there are many small individual images displayed (50)
-  
-| Metric | Result | Explanation |
-|--------|--------|-------------|
-| Launch time | Slow | Has to perform: 50 file open requests and multiple reads for each image |
-| Memory consumption|  High | Has to create:50 Dali::Image objects,50 OpenGL Textures|
-| Rendering | Slow | Has to perform: 50 glBindTexture calls per frame ( each OpenGL calls takes time) 50 a frame = 3000 calls per second @60 FPS.Texture switching is a major state change in the GPU|
-  
-
-
-## Solutions to problem: Use a Texture Atlas
-
-A texture atlas is simply one larger image that contains smaller images. A texture atlas is sometimes called a
-sprite sheet, bitmap sheet or texture pack.
-
-![ ](../assets/img/texture-atlas/atlas.jpg)
-![ ](atlas.jpg)
-  
-Dali::ImageActor has the ability to display a portion of an image using ImageActor::PixelArea setting.
-For example to display the first 3 image in the atlas
-  
-![ ](../assets/img/texture-atlas/example-javascript-code.jpg)
-![ ](example-code.jpg)
-
-### Result of using an Atlas
-
-| Metric | Result | Explanation |
-|--------|--------|-------------|
-| Launch time | Fast | Has to perform: - 1 file open request  |
-| Memory consumption|  Low | Has to create: 1 Dali::Image objects 1 OpenGL Textures|
-| Rendering | Fast | HHas to perform: 1 glBindTexture calls per frame ( each OpenGL calls takes time) 1 a frame = 6- calls per second @60 FPS.|
-
-  
-## Atlas creation guide
-
-Many tools exist for creating texture atlases.
-In the following example we are using a tool called TexturePacker as DALi has an exporter script for it.
-The exporter automatically generates a source file that has the ImageActor::PixelArea pre-defined.
-  
-- Download http://www.codeandweb.com/texturepacker
-- Launch TexturePacker
-- Go to the menu File -> Preferences
-- Set the "Exporter directory" to be the location of dali-toolkit/texture-atlas-exporter
-  
-![ ](../assets/img/texture-atlas/texture-packer-preferences.jpg)
-![ ](texture-packer-preferences.jpg)
-  
-- Restart the application!
-- Select DALi 3D framework for new project
-  
-![ ](../assets/img/texture-atlas/texture-packer-startup.jpg)
-![ ](texture-packer-startup.jpg)
-  
-- Create the atlas
-![ ](../assets/img/texture-atlas/texture-packer-add-sprites.jpg)
-![ ](texture-packer-add-sprites.jpg)
-- Click publish to produce the files
-![ ](../assets/img/texture-atlas/texture-packer-publish.jpg)
-![ ](texture-packer-publish.jpg)
-
-
-
-## Using the generated cpp ( contains JavaScript code as well)
-
-The generated cpp file contains 3 different ways of describing the atlas.
-Copy and paste the section that best suits your application.
--  Lookup table. Includes code for storing the table in a std::map for fast lookup.
-- constants.
-- JavaScript property map
-
-### Using the JavaScript generated property map
-
-The property map should be cut and paste in to your application. It just looks like
-  
-~~~{.js}
-var ATLAS_IMAGE_LIST : [
-    { name: "add_user_usericon_bg", x: 2, y:109, w:105, h:105,  blendMode:dali.BLENDING_ON  },
-    { name: "app_background", x: 180, y:183, w:1, h:1,  blendMode:dali.BLENDING_OFF  },
-    { name: "btn_arrow_left", x: 141, y:183, w:11, h:20,  blendMode:dali.BLENDING_ON  },
-    { name: "btn_arrow_right", x: 154, y:183, w:11, h:20,  blendMode:dali.BLENDING_ON  },
-    { name: "icn_app_foc", x: 194, y:2, w:72, h:72,  blendMode:dali.BLENDING_ON  },
-    { name: "icn_app_nor", x: 109, y:109, w:72, h:72, blendMode:dali.BLENDING_ON  }
-    ]
-var atlas = new dali.ResourceImage( { url: "atlas_filename.png" });
-
-// display the user icon using the size / position data in the ATLAS_IMAGE_LIST
-var userIconData = ATLAS_IMAGE_LIST[0];
-var userIconRect = [ userIconData.x, userIconData.y,userIconData.w,userIconData.h];
-
-var btnArrowLeft = new dali.ImageActor( atlas, userIconRect );
-btnArrowLeft.setBlendMode(userIconData.blendMode);
-
-~~~
-
-![ ](example-javascript-code.jpg)
-
-
-### Using the lookup table in C++
-
-Cut and paste the lookup table code into your application.
-
-~~~{.cpp}
-
-// The following code is automatically generated when TexturePacker publishes to a cpp file.
-const char* ATLAS_FILE_NAME( "my_first_atlas.png" );  ///< Atlas image filename
-
-// Structure to hold image name and position within the atlas.
-struct ImageInfo
-{
-  const char* name;
-  unsigned int x,y,w,h;
-  Dali::BlendingMode::Type blendMode;  // only enable blending if image has alpha
-};
-
-
-// lookup table
-const ImageInfo ImageAtlas[]=
-{
- { "blocks-ball", 2, 198, 51, 51, BlendingMode::ON },
- { "bubble-ball", 288, 74, 32, 32, BlendingMode::ON },
- { "gallery-small-52", 2, 2, 128, 128, BlendingMode::OFF },
- { "icon-change", 219, 2, 37, 34, BlendingMode::ON },
- { "icon-cluster-carousel", 180, 2, 37, 34, BlendingMode::ON }
-};
-
-const ImageInfo* GetImageInfo(const char* name)
-{
-  typedef std::map< const char*, const ImageInfo* > LookupMap;
-  static LookupMap lookup;
-  if( lookup.empty() )
-  {
-    for( unsigned int i = 0; i < ATLAS_IMAGE_COUNT; ++i)
-    {
-      lookup[ ImageAtlas[i].name ] =  &ImageAtlas[i];
-    }
-  }
-  LookupMap::const_iterator iter = lookup.find(name);
-  if( iter != lookup.end() )
-  {
-   return (*iter).second;
-  }
-  DALI_ASSERT_ALWAYS(0 && "image name not found in atlas");
-  return NULL;
-}
-
-~~~
-
-To use the lookup table you can do something like this:
-
-~~~{.cpp}
-// Example function on how to get an image info from the table
-
-std::string fileName = std::string( DALI_IMAGE_DIR ) + ATLAS_FILE_NAME;
-Image imageImage = Image::New( fileName );
-
-const ImageInfo* info(NULL);
-
-info = GetImageInfo("blocks-ball");
-if( info)
-{
-  ImageActor ballActor = ImageActor::New( imageAtlas, ImageActor::PixelArea( info->x, info->y, info->w, info->h) );
-  ballActor->SetBlendMode( info->blendMode );
-}
-info = GetImageInfo("bubble-ball");
-if( info)
-{
-  ImageActor bubbleActor = ImageActor::New( imageAtlas, ImageActor::PixelArea( info->x, info->y, info->w, info->h) );
-  bubbleActor->SetBlendMode( info->blendMode );
-}
-
-~~~
-
-### Using the constant definitions (C++)
-
-1. Cut and paste the constant definition code into your application.
-
-You'll notice the code below won't compile because C++ variables can't have a dash character.
-E.g. BLOCKS-BALL, BUBBLE-BALL will cause errors. Do a search and replace for - and replace with underscores.
-This is one reason why using lookup table which holds the filename as a string maybe easier to use.
-  
-~~~{.cpp}
-
-// The following code is automatically generated when TexturePacker publishes to a cpp file.
-const char* ATLAS_FILE_NAME( "my_first_atlas.png" );
-
-
-// Structure to hold position / blend mode within the atlas.
-struct ImageInfo
-{
-  ImageInfo(unsigned int x,unsigned int y,unsigned int w,unsigned int h,  Dali::BlendingMode::Type mode)
-  :pixelArea(x,y,w,h),blendMode(mode)
-  {}
-  ImageActor::PixelArea pixelArea;
-  Dali::BlendingMode::Type blendMode;  // only enable blending if image has alpha
-};
-
-
-const ImageInfo BLOCKS-BALL( 2, 198, 51, 51 ,BlendingMode::ON );
-const ImageInfo BUBBLE-BALL( 288, 74, 32, 32 ,BlendingMode::ON );
-const ImageInfo GALLERY-SMALL-52( 2, 2, 128, 128 ,BlendingMode::OFF );
-~~~
-  
-  2. To use it, you can copy example code from the generated cpp file which looks
-like this
-
-~~~{.cpp}
-void LoadAtlasImages()
-{
-  std::string fileName = std::string(DALI_IMAGE_DIR) + ATLAS_FILE_NAME;
-  Image atlasImage = Image::New( fileName );
-  ImageActor Blocksball = ImageActor::New( atlasImage,  BLOCKS_BALL.pixelArea);
-  Blocksball.SetBlendMode( BLOCKS_BALL.blendMode );
-
-  ImageActor Bubbleball = ImageActor::New( atlasImage,  BUBBLE_BALL.pixelArea);
-  Bubbleball.SetBlendMode( BUBBLE_BALL.blendMode );
-  ...
-~~~
-
-
-## Atlas creation tips
-
-- Compress the atlas  - \link texturecompression Compressing Textures \endlink
-- Avoid adding large images to the Atlas.
-- E.g. don't add background images to it. Medium to large images should be kept seperate.
-  
-![ ](../assets/img/texture-atlas/atlas-size.jpg)
-![ ](atlas-size.jpg)
-  
-
-- Try to ensure the atlas contains only images that are frequently used.  There's no point in having images taking up GPU texture memory if they're not displayed.
-- Avoid very large atlases.   Try to create multiple atlases based on how they are used within your application.
-Alternatively Texture packer has the option to split atlases ( search help for Multipack)
-
-
-
-@class _Guide_TextureAtlases
-
-*/
\ No newline at end of file
diff --git a/docs/content/shared-javascript-and-cpp-documentation/texture-compression.md b/docs/content/shared-javascript-and-cpp-documentation/texture-compression.md
deleted file mode 100644 (file)
index a89212e..0000000
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-/**-->
-
-# Texture Compression {#texturecompression}
-
-
-Using compressing the textures will:
-
-- Reduce memory bandwidth in rendering due to less texture data being transferred per frame.
-  - Reduces power consumption.
-  - Speeds up rendering.
-- Reduce texture memory usage.
-- Speed up load times. There is no CPU decoding step in loading: the file data can be copied directly to GPU memory.
-
-DALi supports the KTX file format.
-
-You load the compressed texture just like you would any other image.
-
-~~~{.cpp}
-// C++
-ResourceImage image = ResourceImage::New("my_compressed_file.ktx");
-~~~
-~~~{.js}
-// JavaScript
-var image = new dali.ResourceImage( { url:"my_compressed_file.ktx"});
-
-~~~
-
-### ARMS texture compression tool
-
-http://malideveloper.arm.com/develop-for-mali/tools/asset-creation/mali-gpu-texture-compression-tool/
-
-Here is an example of using the ARM compression tool.
-
-![ ](../assets/img/texture-atlas/compression-options.jpg)
-![ ](compression-options.jpg)
-
-![ ](../assets/img/texture-atlas/compression-example.jpg)
-![ ](compression-example.jpg)
-
-
-As shown above the ETC-1 compression format does not support alpha.
-
-As a work around the tool will export the alpha as a separate compressed image.
-
-In order to combine both the images you need to use a custom shader.
-Here is an example shader:
-
-~~~{.cpp}
-// C++ Code
-  const char* const COMPRESSED_RGB_PLUS_SEPARATE_ALPHA_FRAGMENT_SOURCE =
-    "\n"
-    "void main()\n"
-    "{\n"
-    "    vec4 v4Color  = (texture2D(sTexture, vTexCoord) * uColor);\n"
-    "    v4Color.a =  texture2D(sEffect, vTexCoord ).r;\n"
-    "   gl_FragColor = v4Color;"
-    "}\n";
-
-
-  mShaderEffect = ShaderEffect::New( "", COMPRESSED_RGB_PLUS_SEPARATE_ALPHA_FRAGMENT_SOURCE);
-
-  mAtlasImageRGB = ResourceImage::New( ATLAS_RGB_FILENAME.KTX);
-
-  mAtlasImageAlpha = ResourceImage::New( ATLAS_ALPHA_FILENAME.KTX );
-
-  mShaderEffect.SetEffectImage( mAtlasImageAlpha );
-
-
-
-  // to create Image Actor
-  ImageActor  imageActor = ImageActor::New( mAtlasImageRGB, GetImagePosition( info) );
-
-  imageActor.SetShaderEffect( mShaderEffect );
-
-  imageActor.SetBlendMode(BlendingMode::ON);
-~~~
-
-~~~{.js}
-// JavaScript code
-var fragSource = "  \
-void main()                                                   \
-{                                                             \
-    vec4 v4Color  = (texture2D(sTexture, vTexCoord) * uColor); \
-    v4Color.a =  texture2D(sEffect, vTexCoord ).r;             \
-   gl_FragColor = v4Color;                                     \
-}";
-
-var shaderEffect = new dali.ShaderEffect( "", fragSource);
-
-var atlasImageRGB = new dali.ResourceImage( { url:"ATLAS_RGB_FILENAME.KTX"} );
-
-var atlasImageAlpha = new dali.ResourceImage( { url:"ATLAS_ALPHA_FILENAME.KTX"} );
-
-shaderEffect.setEffectImage( atlasImageAlpha );
-
-// to create Image Actor
-ImageActor  imageActor = ImageActor::New( mAtlasImageRGB, GetImagePosition( info) );
-
-imageActor.setShaderEffect( shaderEffect );
-
-imageActor.setBlendMode( dali.BLENDING_ON );
-~~~
-
-@class _Guide_Texture_compression
-
-
-*/