examples/image-scaling-irregular-grid/image-scaling-irregular-grid-example.cpp

   1 /*
   2  * Copyright (c) 2014 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17
  18 /**
  19  * @file image-scaling-irregular-grid-example.cpp
  20  * @brief Demonstrates how to use image scaling modes when loading images.
  21  *
  22  * If an image is going to be drawn on-screen at a lower resolution than it is
  23  * stored at on-disk, the scaling feature of the image loader can be used to
  24  * reduce the image to save memory, improve performance, and potentially display
  25  * a better small version of the image than if the default size were loaded.
  26  *
  27  * The functions CreateImage and CreateImageView below show how to build an
  28  * image using a scaling mode to have %Dali resize it during loading.
  29  *
  30  * This demo defaults to the SCALE_TO_FILL mode of ImageAttributes which makes
  31  * sure that every pixel in the loaded image is filled with a source colour
  32  * from the image's central region while losing the minimum number of pixels
  33  * from its periphery.
  34  * It is the best option for producing thumbnails of input images that have
  35  * diverse aspect ratios.
  36  *
  37  * The other four scaling modes of dali can be cycled-through for the whole
  38  * grid  using the button in the top-right of the toolbar.
  39  * A single image can be cycled by clicking the image directly.
  40  *
  41  * @see CreateImage CreateImageView
  42  */
  43
  44 // EXTERNAL INCLUDES
  45 #include <algorithm>
  46 #include <map>
  47 #include <dali-toolkit/dali-toolkit.h>
  48 #include <iostream>
  49
  50 // INTERNAL INCLUDES
  51 #include "grid-flags.h"
  52 #include "shared/view.h"
  53
  54 using namespace Dali;
  55 using namespace Dali::Toolkit;
  56 using namespace Dali::Demo;
  57
  58 namespace
  59 {
  60
  61 /** Controls the output of application logging. */
  62 //#define DEBUG_PRINT_DIAGNOSTICS;
  63
  64 const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-gradient.jpg" );
  65 const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
  66 const char* APPLICATION_TITLE( "Image Scaling Modes" );
  67 const char* TOGGLE_SCALING_IMAGE( DEMO_IMAGE_DIR "icon-change.png" );
  68 const char* TOGGLE_SCALING_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-change-selected.png" );
  69
  70 /** The width of the grid in whole grid cells. */
  71 const unsigned GRID_WIDTH = 9;
  72 /** Limit the grid to be no higher than this in units of a cell. */
  73 const unsigned GRID_MAX_HEIGHT = 600;
  74
  75 /** The space between the edge of a grid cell and the image embedded within it. */
  76 const unsigned GRID_CELL_PADDING = 4;
  77
  78 /** The aspect ratio of cells in the image grid. */
  79 const float CELL_ASPECT_RATIO = 1.33333333333333333333f;
  80
  81 const Dali::FittingMode::Type DEFAULT_SCALING_MODE = Dali::FittingMode::SCALE_TO_FILL;
  82
  83 /** The number of times to spin an image on touching, each spin taking a second.*/
  84 const float SPIN_DURATION = 1.0f;
  85
  86 /** The target image sizes in grid cells. */
  87 const Vector2 IMAGE_SIZES[] = {
  88  Vector2( 1, 1 ),
  89  Vector2( 2, 1 ),
  90  Vector2( 3, 1 ),
  91  Vector2( 1, 2 ),
  92  Vector2( 1, 3 ),
  93  Vector2( 2, 3 ),
  94  Vector2( 3, 2 ),
  95  // Large, tall configuration:
  96  Vector2( GRID_WIDTH / 2, GRID_WIDTH + GRID_WIDTH / 2 ),
  97  // Large, square-ish images to show shrink-to-fit well with wide and tall images:
  98  Vector2( GRID_WIDTH / 2, GRID_WIDTH / 2.0f * CELL_ASPECT_RATIO + 0.5f ),
  99  Vector2( GRID_WIDTH - 2, (GRID_WIDTH - 2) * CELL_ASPECT_RATIO + 0.5f ),
 100 };
 101 const unsigned NUM_IMAGE_SIZES = sizeof(IMAGE_SIZES) / sizeof(IMAGE_SIZES[0]);
 102
 103 /** Images to load into the grid. These are mostly large and non-square to
 104  *  show the scaling. */
 105 const char* IMAGE_PATHS[] = {
 106
 107   DEMO_IMAGE_DIR "dali-logo.png",
 108   DEMO_IMAGE_DIR "com.samsung.dali-demo.ico",
 109   DEMO_IMAGE_DIR "square_primitive_shapes.bmp",
 110   DEMO_IMAGE_DIR "gallery-large-14.wbmp",
 111
 112   // Images that show aspect ratio changes clearly in primitive shapes:
 113
 114   DEMO_IMAGE_DIR "portrait_screen_primitive_shapes.gif",
 115   DEMO_IMAGE_DIR "landscape_screen_primitive_shapes.gif",
 116
 117   // Images from other demos that are tall, wide or just large:
 118
 119   DEMO_IMAGE_DIR "gallery-large-1.jpg",
 120   DEMO_IMAGE_DIR "gallery-large-2.jpg",
 121   DEMO_IMAGE_DIR "gallery-large-3.jpg",
 122   DEMO_IMAGE_DIR "gallery-large-4.jpg",
 123   DEMO_IMAGE_DIR "gallery-large-5.jpg",
 124   DEMO_IMAGE_DIR "gallery-large-6.jpg",
 125   DEMO_IMAGE_DIR "gallery-large-7.jpg",
 126   DEMO_IMAGE_DIR "gallery-large-8.jpg",
 127   DEMO_IMAGE_DIR "gallery-large-9.jpg",
 128   DEMO_IMAGE_DIR "gallery-large-10.jpg",
 129   DEMO_IMAGE_DIR "gallery-large-11.jpg",
 130   DEMO_IMAGE_DIR "gallery-large-12.jpg",
 131   DEMO_IMAGE_DIR "gallery-large-13.jpg",
 132   DEMO_IMAGE_DIR "gallery-large-14.jpg",
 133   DEMO_IMAGE_DIR "gallery-large-15.jpg",
 134   DEMO_IMAGE_DIR "gallery-large-16.jpg",
 135   DEMO_IMAGE_DIR "gallery-large-17.jpg",
 136   DEMO_IMAGE_DIR "gallery-large-18.jpg",
 137   DEMO_IMAGE_DIR "gallery-large-19.jpg",
 138   DEMO_IMAGE_DIR "gallery-large-20.jpg",
 139   DEMO_IMAGE_DIR "gallery-large-21.jpg",
 140
 141   DEMO_IMAGE_DIR "background-1.jpg",
 142   DEMO_IMAGE_DIR "background-2.jpg",
 143   DEMO_IMAGE_DIR "background-3.jpg",
 144   DEMO_IMAGE_DIR "background-4.jpg",
 145   DEMO_IMAGE_DIR "background-5.jpg",
 146   DEMO_IMAGE_DIR "background-blocks.jpg",
 147   DEMO_IMAGE_DIR "background-magnifier.jpg",
 148
 149   DEMO_IMAGE_DIR "background-1.jpg",
 150   DEMO_IMAGE_DIR "background-2.jpg",
 151   DEMO_IMAGE_DIR "background-3.jpg",
 152   DEMO_IMAGE_DIR "background-4.jpg",
 153   DEMO_IMAGE_DIR "background-5.jpg",
 154   DEMO_IMAGE_DIR "background-blocks.jpg",
 155   DEMO_IMAGE_DIR "background-magnifier.jpg",
 156
 157   DEMO_IMAGE_DIR "book-landscape-cover-back.jpg",
 158   DEMO_IMAGE_DIR "book-landscape-cover.jpg",
 159   DEMO_IMAGE_DIR "book-landscape-p1.jpg",
 160   DEMO_IMAGE_DIR "book-landscape-p2.jpg",
 161
 162   DEMO_IMAGE_DIR "book-portrait-cover.jpg",
 163   DEMO_IMAGE_DIR "book-portrait-p1.jpg",
 164   DEMO_IMAGE_DIR "book-portrait-p2.jpg",
 165   NULL
 166 };
 167 const unsigned NUM_IMAGE_PATHS = sizeof(IMAGE_PATHS) / sizeof(IMAGE_PATHS[0]) - 1u;
 168
 169
 170 /**
 171  * Creates an Image
 172  *
 173  * @param[in] filename The path of the image.
 174  * @param[in] width The width of the image in pixels.
 175  * @param[in] height The height of the image in pixels.
 176  * @param[in] fittingMode The mode to use when scaling the image to fit the desired dimensions.
 177  */
 178 Image CreateImage(const std::string& filename, unsigned int width, unsigned int height, Dali::FittingMode::Type fittingMode )
 179 {
 180 #ifdef DEBUG_PRINT_DIAGNOSTICS
 181     fprintf( stderr, "CreateImage(%s, %u, %u, fittingMode=%u)\n", filename.c_str(), width, height, unsigned( fittingMode ) );
 182 #endif
 183   Image image = ResourceImage::New( filename, ImageDimensions( width, height ), fittingMode, Dali::SamplingMode::BOX_THEN_LINEAR );
 184
 185   return image;
 186 }
 187
 188 /**
 189  * Creates an ImageView
 190  *
 191  * @param[in] filename The path of the image.
 192  * @param[in] width The width of the image in pixels.
 193  * @param[in] height The height of the image in pixels.
 194  * @param[in] fittingMode The mode to use when scaling the image to fit the desired dimensions.
 195  */
 196 ImageView CreateImageView(const std::string& filename, unsigned int width, unsigned int height, Dali::FittingMode::Type fittingMode )
 197 {
 198   Image img = CreateImage( filename, width, height, fittingMode );
 199   ImageView actor = ImageView::New( img );
 200   actor.SetName( filename );
 201   actor.SetParentOrigin(ParentOrigin::CENTER);
 202   actor.SetAnchorPoint(AnchorPoint::CENTER);
 203
 204   return actor;
 205 }
 206
 207 /** Cycle the scaling mode options. */
 208 Dali::FittingMode::Type NextMode( const Dali::FittingMode::Type oldMode )
 209 {
 210   Dali::FittingMode::Type newMode = FittingMode::SHRINK_TO_FIT;
 211   switch ( oldMode )
 212   {
 213     case FittingMode::SHRINK_TO_FIT:
 214       newMode = FittingMode::SCALE_TO_FILL;
 215       break;
 216     case FittingMode::SCALE_TO_FILL:
 217       newMode = FittingMode::FIT_WIDTH;
 218       break;
 219     case FittingMode::FIT_WIDTH:
 220       newMode = FittingMode::FIT_HEIGHT;
 221       break;
 222     case FittingMode::FIT_HEIGHT:
 223       newMode = FittingMode::SHRINK_TO_FIT;
 224       break;
 225   }
 226   return newMode;
 227 }
 228
 229 /**
 230  * Bundle an image path with the rectangle to pack it into.
 231  * */
 232 struct ImageConfiguration
 233 {
 234   ImageConfiguration( const char * const path, const Vector2 dimensions ) :
 235     path( path ),
 236     dimensions( dimensions )
 237   {}
 238   const char * path;
 239   Vector2 dimensions;
 240 };
 241
 242 /**
 243  * Post-layout image data.
 244  */
 245 struct PositionedImage
 246 {
 247   PositionedImage(ImageConfiguration& configuration, unsigned cellX, unsigned cellY, Vector2 imageGridDims) :
 248     configuration( configuration ),
 249     cellX( cellX ),
 250     cellY( cellY ),
 251     imageGridDims( imageGridDims )
 252   {}
 253
 254   ImageConfiguration configuration;
 255   unsigned cellX;
 256   unsigned cellY;
 257   Vector2 imageGridDims;
 258 };
 259
 260 }
 261
 262 /**
 263  * @brief The main class of the demo.
 264  */
 265 class ImageScalingIrregularGridController : public ConnectionTracker
 266 {
 267 public:
 268
 269   ImageScalingIrregularGridController( Application& application )
 270   : mApplication( application ),
 271     mScrolling( false )
 272   {
 273     std::cout << "ImageScalingIrregularGridController::ImageScalingIrregularGridController" << std::endl;
 274
 275     // Connect to the Application's Init signal
 276     mApplication.InitSignal().Connect( this, &ImageScalingIrregularGridController::Create );
 277   }
 278
 279   ~ImageScalingIrregularGridController()
 280   {
 281     // Nothing to do here.
 282   }
 283
 284   /**
 285    * One-time setup in response to Application InitSignal.
 286    */
 287   void Create( Application& application )
 288   {
 289     std::cout << "ImageScalingIrregularGridController::Create" << std::endl;
 290
 291     // Get a handle to the stage:
 292     Stage stage = Stage::GetCurrent();
 293
 294     // Connect to input event signals:
 295     stage.KeyEventSignal().Connect(this, &ImageScalingIrregularGridController::OnKeyEvent);
 296
 297     // Hide the indicator bar
 298     mApplication.GetWindow().ShowIndicator(Dali::Window::INVISIBLE);
 299
 300     // Create a default view with a default tool bar:
 301     mContentLayer = DemoHelper::CreateView( mApplication,
 302                                             mView,
 303                                             mToolBar,
 304                                             BACKGROUND_IMAGE,
 305                                             TOOLBAR_IMAGE,
 306                                             "" );
 307
 308     // Create an image scaling toggle button. (right of toolbar)
 309     Toolkit::PushButton toggleScalingButton = Toolkit::PushButton::New();
 310     toggleScalingButton.SetUnselectedImage( TOGGLE_SCALING_IMAGE );
 311     toggleScalingButton.SetSelectedImage( TOGGLE_SCALING_IMAGE_SELECTED );
 312     toggleScalingButton.ClickedSignal().Connect( this, &ImageScalingIrregularGridController::OnToggleScalingTouched );
 313     mToolBar.AddControl( toggleScalingButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 314
 315     SetTitle( APPLICATION_TITLE );
 316
 317     // Build the main content of the widow:
 318     PopulateContentLayer( DEFAULT_SCALING_MODE );
 319   }
 320
 321   /**
 322    * Build the main part of the application's view.
 323    */
 324   void PopulateContentLayer( const Dali::FittingMode::Type fittingMode )
 325   {
 326     Stage stage = Stage::GetCurrent();
 327     Vector2 stageSize = stage.GetSize();
 328
 329     float fieldHeight;
 330     Actor imageField = BuildImageField( stageSize.x, GRID_WIDTH, GRID_MAX_HEIGHT, fittingMode, fieldHeight );
 331
 332     mScrollView = ScrollView::New();
 333
 334     mScrollView.ScrollStartedSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollStarted );
 335     mScrollView.ScrollCompletedSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollCompleted );
 336
 337     mScrollView.SetAnchorPoint(AnchorPoint::CENTER);
 338     mScrollView.SetParentOrigin(ParentOrigin::CENTER);
 339
 340     mScrollView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 341
 342     mScrollView.SetAxisAutoLock( true );
 343     mScrollView.SetAxisAutoLockGradient( 1.0f );
 344
 345     // Restrict scrolling to mostly vertical only, but with some horizontal wiggle-room:
 346
 347     RulerPtr rulerX = new FixedRuler( stageSize.width ); //< Pull the view back to the grid's centre-line when touch is release using a snapping ruler.
 348     rulerX->SetDomain( RulerDomain( stageSize.width * -0.125f, stageSize.width * 1.125f ) ); //< Scroll slightly left/right of image field.
 349     mScrollView.SetRulerX ( rulerX );
 350
 351     RulerPtr rulerY = new DefaultRuler(); //< Snap in multiples of a screen / stage height
 352     rulerY->SetDomain( RulerDomain( - fieldHeight * 0.5f + stageSize.height * 0.5f - GRID_CELL_PADDING, fieldHeight * 0.5f + stageSize.height * 0.5f + GRID_CELL_PADDING ) );
 353     mScrollView.SetRulerY ( rulerY );
 354
 355     mContentLayer.Add( mScrollView );
 356     mScrollView.Add( imageField );
 357     mGridActor = imageField;
 358
 359     // Create the scroll bar
 360     mScrollBarVertical = ScrollBar::New(Toolkit::ScrollBar::Vertical);
 361     mScrollBarVertical.SetParentOrigin(ParentOrigin::TOP_RIGHT);
 362     mScrollBarVertical.SetAnchorPoint(AnchorPoint::TOP_RIGHT);
 363     mScrollBarVertical.SetResizePolicy(Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::HEIGHT);
 364     mScrollBarVertical.SetResizePolicy(Dali::ResizePolicy::FIT_TO_CHILDREN, Dali::Dimension::WIDTH);
 365     mScrollView.Add(mScrollBarVertical);
 366
 367     mScrollBarHorizontal = ScrollBar::New(Toolkit::ScrollBar::Horizontal);
 368     mScrollBarHorizontal.SetParentOrigin(ParentOrigin::BOTTOM_LEFT);
 369     mScrollBarHorizontal.SetAnchorPoint(AnchorPoint::TOP_LEFT);
 370     mScrollBarHorizontal.SetResizePolicy(Dali::ResizePolicy::FIT_TO_CHILDREN, Dali::Dimension::WIDTH);
 371     mScrollBarHorizontal.SetOrientation(Quaternion(Radian( 1.5f * Math::PI ), Vector3::ZAXIS));
 372     mScrollView.Add(mScrollBarHorizontal);
 373
 374     mScrollView.OnRelayoutSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollViewRelayout );
 375
 376     // Scroll to top of grid so first images loaded are on-screen:
 377     mScrollView.ScrollTo( Vector2( 0, -1000000 ) );
 378   }
 379
 380   void OnScrollViewRelayout(Actor actor)
 381   {
 382     // Make the height of the horizontal scroll bar to be the same as the width of scroll view.
 383     mScrollBarHorizontal.SetSize(Vector2(0.0f, mScrollView.GetRelayoutSize( Dimension::WIDTH) ));
 384   }
 385
 386   /**
 387    * Build a field of images scaled into a variety of shapes from very wide,
 388    * through square, to very tall. The images are direct children of the Dali::Actor
 389    * returned.
 390    **/
 391   Actor BuildImageField( const float fieldWidth,
 392                            const unsigned gridWidth,
 393                            const unsigned maxGridHeight,
 394                            Dali::FittingMode::Type fittingMode,
 395                            float & outFieldHeight )
 396   {
 397     // Generate the list of image configurations to be fitted into the field:
 398
 399     std::vector<ImageConfiguration> configurations;
 400     configurations.reserve( NUM_IMAGE_PATHS * NUM_IMAGE_SIZES );
 401     for( unsigned imageIndex = 0; imageIndex < NUM_IMAGE_PATHS; ++imageIndex )
 402     {
 403       for( unsigned dimensionsIndex = 0; dimensionsIndex < NUM_IMAGE_SIZES; ++ dimensionsIndex )
 404       {
 405         configurations.push_back( ImageConfiguration( IMAGE_PATHS[imageIndex], IMAGE_SIZES[dimensionsIndex] ) );
 406       }
 407     }
 408     // Stir-up the list to get some nice irregularity in the generated field:
 409     std::random_shuffle( configurations.begin(), configurations.end() );
 410     std::random_shuffle( configurations.begin(), configurations.end() );
 411
 412     // Place the images in the grid:
 413
 414     std::vector<ImageConfiguration>::iterator config, end;
 415     GridFlags grid( gridWidth, maxGridHeight );
 416     std::vector<PositionedImage> placedImages;
 417
 418     for( config = configurations.begin(), end = configurations.end(); config != end; ++config )
 419     {
 420       unsigned cellX, cellY;
 421       Vector2 imageGridDims;
 422
 423       // Allocate a region of the grid for the image:
 424       bool allocated = grid.AllocateRegion( config->dimensions, cellX, cellY, imageGridDims );
 425       if( !allocated )
 426       {
 427 #ifdef DEBUG_PRINT_DIAGNOSTICS
 428           fprintf( stderr, "Failed to allocate image in grid with dims (%f, %f) and path: %s.\n", config->dimensions.x, config->dimensions.y, config->path );
 429 #endif
 430         continue;
 431       }
 432
 433       placedImages.push_back( PositionedImage( *config, cellX, cellY, imageGridDims ) );
 434     }
 435     DALI_ASSERT_DEBUG( grid.DebugCheckGridValid() && "Cells were set more than once, indicating erroneous overlap in placing images on the grid." );
 436     const unsigned actualGridHeight = grid.GetHighestUsedRow() + 1;
 437
 438     // Take the images images in the grid and turn their logical locations into
 439     // coordinates in a frame defined by a parent actor:
 440
 441     Actor gridActor = Actor::New();
 442     gridActor.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 443     gridActor.SetParentOrigin( ParentOrigin::CENTER );
 444     gridActor.SetAnchorPoint( AnchorPoint::CENTER );
 445
 446     // Work out the constants of the grid and cell dimensions and positions:
 447     const float cellWidth = fieldWidth / gridWidth;
 448     const float cellHeight = cellWidth / CELL_ASPECT_RATIO;
 449     const Vector2 cellSize = Vector2( cellWidth, cellHeight );
 450     outFieldHeight = actualGridHeight * cellHeight;
 451     const Vector2 gridOrigin = Vector2( -fieldWidth * 0.5f, -outFieldHeight * 0.5 );
 452
 453     // Build the image actors in their right locations in their parent's frame:
 454     for( std::vector<PositionedImage>::const_iterator i = placedImages.begin(), end = placedImages.end(); i != end; ++i )
 455     {
 456       const PositionedImage& imageSource = *i;
 457       const Vector2 imageSize = imageSource.imageGridDims * cellSize - Vector2( GRID_CELL_PADDING * 2, GRID_CELL_PADDING * 2 );
 458       const Vector2 imageRegionCorner = gridOrigin + cellSize * Vector2( imageSource.cellX, imageSource.cellY );
 459       const Vector2 imagePosition = imageRegionCorner + Vector2( GRID_CELL_PADDING , GRID_CELL_PADDING ) + imageSize * 0.5f;
 460
 461       ImageView image = CreateImageView( imageSource.configuration.path, imageSize.x, imageSize.y, fittingMode );
 462       image.SetPosition( Vector3( imagePosition.x, imagePosition.y, 0 ) );
 463       image.SetSize( imageSize );
 464       image.TouchSignal().Connect( this, &ImageScalingIrregularGridController::OnTouchImage );
 465       mFittingModes[image.GetId()] = fittingMode;
 466       mResourceUrls[image.GetId()] = imageSource.configuration.path;
 467       mSizes[image.GetId()] = imageSize;
 468
 469       gridActor.Add( image );
 470     }
 471
 472     return gridActor;
 473   }
 474
 475  /**
 476   * Upon Touching an image (Release), change its scaling mode and make it spin, provided we're not scrolling.
 477   * @param[in] actor The actor touched
 478   * @param[in] event The TouchEvent.
 479   */
 480   bool OnTouchImage( Actor actor, const TouchData& event )
 481   {
 482     if( ( event.GetPointCount() > 0 ) && ( !mScrolling ) )
 483     {
 484       if( event.GetState( 0 ) == PointState::UP )
 485       {
 486         // Spin the image a few times:
 487         Animation animation = Animation::New(SPIN_DURATION);
 488         animation.AnimateBy( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(360.0f * SPIN_DURATION) ), Vector3::XAXIS ), AlphaFunction::EASE_OUT );
 489         animation.Play();
 490
 491         // Change the scaling mode:
 492         const unsigned id = actor.GetId();
 493         Dali::FittingMode::Type newMode = NextMode( mFittingModes[id] );
 494         const Vector2 imageSize = mSizes[actor.GetId()];
 495
 496         const std::string& url = mResourceUrls[id];
 497         Image newImage = CreateImage( url, imageSize.width + 0.5f, imageSize.height + 0.5f, newMode );
 498         ImageView imageView = ImageView::DownCast( actor );
 499         if(imageView)
 500         {
 501           imageView.SetImage( newImage );
 502         }
 503         mFittingModes[id] = newMode;
 504       }
 505     }
 506     return false;
 507   }
 508
 509  /**
 510   * Main key event handler.
 511   * Quit on escape key.
 512   */
 513   void OnKeyEvent(const KeyEvent& event)
 514   {
 515     if( event.state == KeyEvent::Down )
 516     {
 517       if( IsKey( event, Dali::DALI_KEY_ESCAPE )
 518           || IsKey( event, Dali::DALI_KEY_BACK ) )
 519       {
 520         mApplication.Quit();
 521       }
 522     }
 523   }
 524
 525  /**
 526   * Signal handler, called when the 'Scaling' button has been touched.
 527   *
 528   * @param[in] button The button that was pressed.
 529   */
 530   bool OnToggleScalingTouched( Button button )
 531   {
 532     const unsigned numChildren = mGridActor.GetChildCount();
 533
 534     for( unsigned i = 0; i < numChildren; ++i )
 535     {
 536       ImageView gridImageView = ImageView::DownCast( mGridActor.GetChildAt( i ) );
 537       if( gridImageView )
 538       {
 539         // Cycle the scaling mode options:
 540         unsigned int id = gridImageView.GetId();
 541
 542         const Vector2 imageSize = mSizes[ id ];
 543         Dali::FittingMode::Type newMode = NextMode( mFittingModes[ id ] );
 544         Image newImage = CreateImage( mResourceUrls[ id ], imageSize.width, imageSize.height, newMode );
 545         gridImageView.SetImage( newImage );
 546
 547         mFittingModes[ id ] = newMode;
 548
 549         SetTitle( std::string( newMode == FittingMode::SHRINK_TO_FIT ? "SHRINK_TO_FIT" : newMode == FittingMode::SCALE_TO_FILL ?  "SCALE_TO_FILL" : newMode == FittingMode::FIT_WIDTH ? "FIT_WIDTH" : "FIT_HEIGHT" ) );
 550       }
 551     }
 552     return true;
 553   }
 554
 555   /**
 556    * Sets/Updates the title of the View
 557    * @param[in] title The new title for the view.
 558    */
 559   void SetTitle(const std::string& title)
 560   {
 561     if(!mTitleActor)
 562     {
 563       mTitleActor = DemoHelper::CreateToolBarLabel( "" );
 564       // Add title to the tool bar.
 565       mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
 566     }
 567
 568     mTitleActor.SetProperty( TextLabel::Property::TEXT, title );
 569   }
 570
 571   /**
 572    * When scroll starts (i.e. user starts to drag scrollview),
 573    * note this state (mScrolling = true)
 574    * @param[in] position Current Scroll Position
 575    */
 576   void OnScrollStarted( const Vector2& position )
 577   {
 578     mScrolling = true;
 579   }
 580
 581   /**
 582    * When scroll starts (i.e. user stops dragging scrollview, and scrollview has snapped to destination),
 583    * note this state (mScrolling = false).
 584    * @param[in] position Current Scroll Position
 585    */
 586   void OnScrollCompleted( const Vector2& position )
 587   {
 588     mScrolling = false;
 589   }
 590
 591 private:
 592   Application&  mApplication;
 593
 594   Layer mContentLayer;                ///< The content layer (contains non gui chrome actors)
 595   Toolkit::Control mView;             ///< The View instance.
 596   Toolkit::ToolBar mToolBar;          ///< The View's Toolbar.
 597   TextLabel mTitleActor;               ///< The Toolbar's Title.
 598   Actor mGridActor;                   ///< The container for the grid of images
 599   ScrollView mScrollView;             ///< ScrollView UI Component
 600   ScrollBar mScrollBarVertical;
 601   ScrollBar mScrollBarHorizontal;
 602   bool mScrolling;                    ///< ScrollView scrolling state (true = scrolling, false = stationary)
 603   std::map<unsigned, Dali::FittingMode::Type> mFittingModes; ///< Stores the current scaling mode of each image, keyed by image actor id.
 604   std::map<unsigned, std::string> mResourceUrls; ///< Stores the url of each image, keyed by image actor id.
 605   std::map<unsigned, Vector2> mSizes; ///< Stores the current size of each image, keyed by image actor id.
 606 };
 607
 608 void RunTest( Application& application )
 609 {
 610   ImageScalingIrregularGridController test( application );
 611
 612   application.MainLoop();
 613 }
 614
 615 /** Entry point for Linux & Tizen applications */
 616 int DALI_EXPORT_API main( int argc, char **argv )
 617 {
 618   Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
 619
 620   RunTest( application );
 621
 622   return 0;
 623 }