Changes after TouchedSignal changes
[platform/core/uifw/dali-demo.git] / examples / image-scaling-and-filtering / image-scaling-and-filtering-example.cpp
index 0b6248f..981c6f0 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  */
 
 #include <dali/dali.h>
+#include <dali/devel-api/actors/actor-devel.h>
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include <dali-toolkit/devel-api/controls/table-view/table-view.h>
 #include "shared/view.h"
 #include <iostream>
 
@@ -27,50 +29,53 @@ using Toolkit::TextLabel;
 namespace
 {
 
-const char* BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-gradient.jpg" );
+const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-gradient.jpg" );
 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
 
+const char* BORDER_IMAGE( DEMO_IMAGE_DIR "border-4px.9.png" );
+const int BORDER_WIDTH = ( 11.0f + 4.0f ); // Shadow size = 11, border size = 4.
+const char* RESIZE_HANDLE_IMAGE( DEMO_IMAGE_DIR "resize-handle.png" );
+
 const int MARGIN_SIZE = 10;
 
 const char* const NEXT_BUTTON_ID = "NEXT_BUTTON";
 const char* const PREVIOUS_BUTTON_ID = "PREVIOUS_BUTTON";
-const char * const DALI_ICON_PLAY = DALI_IMAGE_DIR "icon-play.png";
+const char * const DALI_ICON_PLAY = DEMO_IMAGE_DIR "icon-play.png";
 
 const char* const FITTING_BUTTON_ID = "FITTING_BUTTON";
 const char* const SAMPLING_BUTTON_ID = "SAMPLING_BUTTON";
 const char* const FITTING_BUTTON_TEXT = "Fitting";
 const char* const SAMPLING_BUTTON_TEXT = "Sampling";
 
-const char* const STYLE_LABEL_TEXT  = "grouplabel";
-const char* const STYLE_BUTTON_TEXT = "buttonlabel";
-
-
+const char* const STYLE_LABEL_TEXT  = "ImageScalingGroupLabel";
+const char* const STYLE_BUTTON_TEXT = "ImageScalingButton";
 
 const char* IMAGE_PATHS[] =
 {
+  // Variety of sizes, shapes and formats:
+  DEMO_IMAGE_DIR "dali-logo.png",
+  DEMO_IMAGE_DIR "layer1.png",
+  DEMO_IMAGE_DIR "layer2.png",
+  DEMO_IMAGE_DIR "animation-list.png",
+  DEMO_IMAGE_DIR "music-libray-main-screen.png",
+  DEMO_IMAGE_DIR "music-libray-record-cover.png",
+  DEMO_IMAGE_DIR "contacts-background.png",
+  DEMO_IMAGE_DIR "portrait_screen_primitive_shapes.gif",
+  DEMO_IMAGE_DIR "landscape_screen_primitive_shapes.gif",
+  DEMO_IMAGE_DIR "square_primitive_shapes.bmp",
+  DEMO_IMAGE_DIR "gallery-large-14.jpg",
+  DEMO_IMAGE_DIR "book-landscape-cover.jpg",
+  DEMO_IMAGE_DIR "book-portrait-p1.jpg",
+  DEMO_IMAGE_DIR "book-landscape-cover-back.jpg",
+
   // Worst case for aliasing in downscaling, 2k x 2k 1 bit per pixel dithered
   // black and white image:
-  DALI_IMAGE_DIR "gallery-large-14.wbmp",
-  // Variety of sizes, shapes and formats:
-  DALI_IMAGE_DIR "animation-list.png",
-  DALI_IMAGE_DIR "layer1.png",
-  DALI_IMAGE_DIR "layer2.png",
-  DALI_IMAGE_DIR "music-libray-main-screen.png",
-  DALI_IMAGE_DIR "music-libray-record-cover.png",
-  DALI_IMAGE_DIR "contacts-background.png",
-  DALI_IMAGE_DIR "portrait_screen_primitive_shapes.gif",
-  DALI_IMAGE_DIR "landscape_screen_primitive_shapes.gif",
-  DALI_IMAGE_DIR "square_primitive_shapes.bmp",
-  DALI_IMAGE_DIR "dali-logo.png",
-  DALI_IMAGE_DIR "com.samsung.dali-demo.ico",
-  DALI_IMAGE_DIR "gallery-large-14.jpg",
-  DALI_IMAGE_DIR "book-landscape-cover.jpg",
-  DALI_IMAGE_DIR "book-portrait-p1.jpg",
-  DALI_IMAGE_DIR "book-landscape-cover-back.jpg",
-  DALI_IMAGE_DIR "background-1.jpg",
-  DALI_IMAGE_DIR "background-blocks.jpg",
-  DALI_IMAGE_DIR "background-magnifier.jpg",
-  DALI_IMAGE_DIR "gallery-large-14.jpg",
+  DEMO_IMAGE_DIR "gallery-large-14.wbmp",
+
+  DEMO_IMAGE_DIR "background-1.jpg",
+  DEMO_IMAGE_DIR "background-blocks.jpg",
+  DEMO_IMAGE_DIR "background-magnifier.jpg",
+  DEMO_IMAGE_DIR "gallery-large-14.jpg",
   NULL
 };
 const int NUM_IMAGE_PATHS = sizeof(IMAGE_PATHS) / sizeof(IMAGE_PATHS[0]) - 1u;
@@ -149,10 +154,13 @@ public:
 
   ImageScalingAndFilteringController( Application& application )
   : mApplication( application ),
-    mImageStageScale( 0.5f, 0.5f ),
+    mLastPinchScale( 1.0f ),
+    mImageWindowScale( 0.5f, 0.5f ),
     mCurrentPath( 0 ),
-    mFittingMode( FittingMode::SCALE_TO_FILL ),
-    mSamplingMode( SamplingMode::BOX_THEN_LINEAR)
+    mFittingMode( FittingMode::FIT_WIDTH ),
+    mSamplingMode( SamplingMode::BOX_THEN_LINEAR),
+    mImageLoading( false ),
+    mQueuedImageLoad( false )
   {
     // Connect to the Application's Init signal
     mApplication.InitSignal().Connect( this, &ImageScalingAndFilteringController::Create );
@@ -166,102 +174,69 @@ public:
   // The Init signal is received once (only) during the Application lifetime
   void Create( Application& application )
   {
-    // Get a handle to the stage
-    Stage stage = Stage::GetCurrent();
+    // Get a handle to the window
+    Window window = application.GetWindow();
+    Vector2 windowSize = window.GetSize();
 
     // Background image:
     Dali::Property::Map backgroundImage;
-    backgroundImage.Insert( "rendererType",  "imageRenderer" );
-    backgroundImage.Insert( "imageUrl",  BACKGROUND_IMAGE );
-    backgroundImage.Insert( "imageDesiredWidth",   stage.GetSize().width );
-    backgroundImage.Insert( "imageDesiredHeight",   stage.GetSize().height );
-    backgroundImage.Insert( "imageFittingMode",   "scaleToFill" );
-    backgroundImage.Insert( "imageSamplingMode",   "boxThenNearest" );
+    backgroundImage.Insert( Toolkit::Visual::Property::TYPE,  Toolkit::Visual::IMAGE );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::URL,  BACKGROUND_IMAGE );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::DESIRED_WIDTH, windowSize.width );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::DESIRED_HEIGHT, windowSize.height );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::FITTING_MODE,   FittingMode::SCALE_TO_FILL );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::SAMPLING_MODE,   SamplingMode::BOX_THEN_NEAREST );
 
     Toolkit::ImageView background = Toolkit::ImageView::New();
     background.SetProperty( Toolkit::ImageView::Property::IMAGE, backgroundImage );
-    background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    background.SetSize( stage.GetSize() );
-    stage.Add( background );
-
-    // Make grey pixels for the desired box, the desired height the desired width:
-    BufferImage desiredBackground = BufferImage::WHITE();
-
-    BufferImage heightBackground = BufferImage::WHITE();
-    PixelBuffer* const heightPixel = heightBackground.GetBuffer();
-    heightPixel[0] = 0x8f;
-    heightPixel[1] = 0x8f;
-    heightPixel[2] = 0x8f;
-
-    BufferImage widthBackground = BufferImage::WHITE();
-    PixelBuffer* const widthPixel = widthBackground.GetBuffer();
-    widthPixel[0] = 0x4f;
-    widthPixel[1] = 0x4f;
-    widthPixel[2] = 0x4f;
-
-    mHeightBox = Toolkit::ImageView::New( heightBackground );
-    mHeightBox.SetOpacity( 0.2f );
-    background.Add( mHeightBox );
-
-    mWidthBox = Toolkit::ImageView::New( widthBackground );
-    mWidthBox.SetOpacity( 0.2f );
-    background.Add( mWidthBox );
-
-    mDesiredBox = Toolkit::ImageView::New( desiredBackground );
-    background.Add( mDesiredBox );
-
-    mDesiredBox.SetSize( stage.GetSize() * mImageStageScale );
-    mDesiredBox.SetParentOrigin( ParentOrigin::CENTER );
-    mDesiredBox.SetAnchorPoint( AnchorPoint::CENTER );
+    background.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT );
+    background.SetProperty( Actor::Property::SIZE, windowSize );
+    window.Add( background );
 
-    mHeightBox.SetSize( stage.GetSize().width,  (stage.GetSize() * mImageStageScale).height );
-    mHeightBox.SetParentOrigin( ParentOrigin::CENTER );
-    mHeightBox.SetAnchorPoint( AnchorPoint::CENTER );
+    mDesiredBox = Toolkit::ImageView::New( BORDER_IMAGE );
+    background.Add( mDesiredBox );
 
-    mWidthBox.SetSize( (stage.GetSize() * mImageStageScale).width, stage.GetSize().height );
-    mWidthBox.SetParentOrigin( ParentOrigin::CENTER );
-    mWidthBox.SetAnchorPoint( AnchorPoint::CENTER );
+    mDesiredBox.SetProperty( Actor::Property::SIZE, windowSize * mImageWindowScale );
+    mDesiredBox.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
+    mDesiredBox.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 
     // Initialize the actor
     mImageView = Toolkit::ImageView::New( IMAGE_PATHS[ 0 ] );
 
     // Reposition the actor
-    mImageView.SetParentOrigin( ParentOrigin::CENTER );
-    mImageView.SetAnchorPoint( AnchorPoint::CENTER );
+    mImageView.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
+    mImageView.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 
-    // Display the actor on the stage
+    // Display the actor on the window
     mDesiredBox.Add( mImageView );
 
-    mImageView.SetSize( stage.GetSize() * mImageStageScale );
+    mImageView.SetProperty( Actor::Property::SIZE, windowSize * mImageWindowScale );
 
     // Setup the pinch detector for scaling the desired image load dimensions:
     mPinchDetector = PinchGestureDetector::New();
     mPinchDetector.Attach( mImageView );
     mPinchDetector.DetectedSignal().Connect( this, &ImageScalingAndFilteringController::OnPinch );
 
-    // Make a grab-handle for resizing the image:
-    mGrabCorner = Toolkit::PushButton::New();
-    mGrabCorner.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
-    mGrabCorner.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-    mGrabCorner.SetName( "GrabCorner" );
-    mGrabCorner.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
-    mGrabCorner.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
-    mGrabCorner.SetSize( Vector2( stage.GetSize().width*0.08f, stage.GetSize().width*0.08f ) );
-    mGrabCorner.SetOpacity( 0.6f );
+    mGrabCorner = Toolkit::ImageView::New( RESIZE_HANDLE_IMAGE );
+    mGrabCorner.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    mGrabCorner.SetProperty( Dali::Actor::Property::NAME, "GrabCorner" );
+    mGrabCorner.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_RIGHT );
+    mGrabCorner.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_RIGHT );
+    mGrabCorner.SetProperty( Actor::Property::POSITION, Vector2( -BORDER_WIDTH, -BORDER_WIDTH ));
+    mGrabCorner.SetProperty( Actor::Property::OPACITY, 0.6f );
 
     Layer grabCornerLayer = Layer::New();
-    grabCornerLayer.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
-    grabCornerLayer.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
-
+    grabCornerLayer.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_RIGHT );
+    grabCornerLayer.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_RIGHT );
     grabCornerLayer.Add( mGrabCorner );
-    mImageView.Add( grabCornerLayer );
+    mDesiredBox.Add( grabCornerLayer );
+
     mPanGestureDetector = PanGestureDetector::New();
     mPanGestureDetector.Attach( mGrabCorner );
     mPanGestureDetector.DetectedSignal().Connect( this, &ImageScalingAndFilteringController::OnPan );
 
-
     // Tie-in input event handlers:
-    stage.KeyEventSignal().Connect( this, &ImageScalingAndFilteringController::OnKeyEvent );
+    window.KeyEventSignal().Connect( this, &ImageScalingAndFilteringController::OnKeyEvent );
 
     CreateControls();
 
@@ -273,38 +248,38 @@ public:
    */
   void CreateControls()
   {
-    Stage stage = Stage::GetCurrent();
+    Window window = mApplication.GetWindow();
+    Vector2 windowSize = window.GetSize();
 
     Dali::Layer controlsLayer = Dali::Layer::New();
     controlsLayer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
-    controlsLayer.SetSizeModeFactor( Vector3( 1.0f, 1.0f, 1.0f ) );
-    controlsLayer.SetAnchorPoint( AnchorPoint::TOP_LEFT);
-    controlsLayer.SetParentOrigin( ParentOrigin::TOP_LEFT);
-    stage.Add( controlsLayer );
+    controlsLayer.SetProperty( Actor::Property::SIZE_MODE_FACTOR, Vector3( 1.0f, 1.0f, 1.0f ) );
+    controlsLayer.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+    controlsLayer.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+    window.Add( controlsLayer );
 
-    // Back and next image buttons in corners of stage:
-    unsigned int playWidth = std::min( stage.GetSize().x * (1 / 5.0f), 58.0f );
-    Image playImage = ResourceImage::New( DALI_ICON_PLAY, ImageDimensions( playWidth, playWidth ), FittingMode::SHRINK_TO_FIT, SamplingMode::BOX_THEN_LINEAR );
-    Toolkit::ImageView imagePrevious = Toolkit::ImageView::New( playImage );
+    // Back and next image buttons in corners of window:
+    unsigned int playWidth = std::min( windowSize.x * (1 / 5.0f), 58.0f );
+    Toolkit::ImageView imagePrevious = Toolkit::ImageView::New( DALI_ICON_PLAY, ImageDimensions( playWidth, playWidth ) );
 
     // Last image button:
-    imagePrevious.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    imagePrevious.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT );
     imagePrevious.RotateBy( Radian(3.14159265358979323846f), Vector3( 0, 1.0f, 0 ) );
-    imagePrevious.SetY( playWidth * 0.5f );
-    imagePrevious.SetX( playWidth + playWidth * 0.5f );
-    imagePrevious.SetOpacity( 0.6f );
+    imagePrevious.SetProperty( Actor::Property::POSITION_Y,  playWidth * 0.5f );
+    imagePrevious.SetProperty( Actor::Property::POSITION_X,  playWidth + playWidth * 0.5f );
+    imagePrevious.SetProperty( Actor::Property::OPACITY, 0.6f );
     controlsLayer.Add( imagePrevious );
-    imagePrevious.SetName( PREVIOUS_BUTTON_ID );
+    imagePrevious.SetProperty( Dali::Actor::Property::NAME, PREVIOUS_BUTTON_ID );
     imagePrevious.TouchedSignal().Connect( this, &ImageScalingAndFilteringController::OnControlTouched );
 
     // Next image button:
-    Toolkit::ImageView imageNext = Toolkit::ImageView::New( playImage );
-    imageNext.SetAnchorPoint( AnchorPoint::TOP_RIGHT );
-    imageNext.SetY( playWidth * 0.5f );
-    imageNext.SetX( stage.GetSize().x - playWidth * 0.5f );
-    imageNext.SetOpacity( 0.6f );
+    Toolkit::ImageView imageNext = Toolkit::ImageView::New( DALI_ICON_PLAY, ImageDimensions( playWidth, playWidth ) );
+    imageNext.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_RIGHT );
+    imageNext.SetProperty( Actor::Property::POSITION_Y,  playWidth * 0.5f );
+    imageNext.SetProperty( Actor::Property::POSITION_X,  windowSize.x - playWidth * 0.5f );
+    imageNext.SetProperty( Actor::Property::OPACITY, 0.6f );
     controlsLayer.Add( imageNext );
-    imageNext.SetName( NEXT_BUTTON_ID );
+    imageNext.SetProperty( Dali::Actor::Property::NAME, NEXT_BUTTON_ID );
     imageNext.TouchedSignal().Connect( this, &ImageScalingAndFilteringController::OnControlTouched );
 
     // Buttons to popup selectors for fitting and sampling modes:
@@ -317,9 +292,9 @@ public:
     modesGroupBackground.SetCellPadding( Size( MARGIN_SIZE * 0.5f, MARGIN_SIZE ) );
     modesGroupBackground.SetFitHeight( 0 );
 
-    modesGroupBackground.SetAnchorPoint( AnchorPoint::BOTTOM_LEFT );
-    modesGroupBackground.SetParentOrigin( ParentOrigin::BOTTOM_LEFT );
-    modesGroupBackground.SetPosition( 0.0f, 0.0f );
+    modesGroupBackground.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_LEFT );
+    modesGroupBackground.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_LEFT );
+    modesGroupBackground.SetProperty( Actor::Property::POSITION, Vector2( 0.0f, 0.0f ));
 
     controlsLayer.Add( modesGroupBackground );
 
@@ -334,7 +309,7 @@ public:
       fittingModeGroup.SetFitHeight( 1 );
 
       TextLabel label = TextLabel::New( "Image fitting mode:" );
-      label.SetProperty( Toolkit::Control::Property::STYLE_NAME, STYLE_LABEL_TEXT );
+      label.SetStyleName( STYLE_LABEL_TEXT );
       fittingModeGroup.Add( label );
 
       Toolkit::PushButton button = CreateButton( FITTING_BUTTON_ID, StringFromScalingMode( mFittingMode ) );
@@ -355,7 +330,7 @@ public:
       samplingModeGroup.SetFitHeight( 1 );
 
       TextLabel label = TextLabel::New( "Image sampling mode:" );
-      label.SetProperty( Toolkit::Control::Property::STYLE_NAME, STYLE_LABEL_TEXT );
+      label.SetStyleName( STYLE_LABEL_TEXT );
       samplingModeGroup.Add( label );
 
       Toolkit::PushButton button = CreateButton( SAMPLING_BUTTON_ID, StringFromFilterMode( mSamplingMode ) );
@@ -369,9 +344,9 @@ public:
   Toolkit::PushButton CreateButton( const char * id, const char * label )
   {
     Toolkit::PushButton button = Toolkit::PushButton::New();
-    button.SetProperty( Toolkit::Control::Property::STYLE_NAME, STYLE_BUTTON_TEXT );
-    button.SetName( id );
-    button.SetLabelText( label );
+    button.SetStyleName( STYLE_BUTTON_TEXT );
+    button.SetProperty( Dali::Actor::Property::NAME, id );
+    button.SetProperty( Toolkit::Button::Property::LABEL, label );
     button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
     button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
     button.ClickedSignal().Connect( this, &ImageScalingAndFilteringController::OnButtonClicked );
@@ -380,29 +355,28 @@ public:
 
   Toolkit::Popup CreatePopup()
   {
-    Stage stage = Stage::GetCurrent();
-    const float POPUP_WIDTH_DP = stage.GetSize().width * 0.75f;
+    Window window = mApplication.GetWindow();
+    const float POPUP_WIDTH_DP = window.GetSize().GetWidth() * 0.75f;
 
     Toolkit::Popup popup = Toolkit::Popup::New();
-    popup.SetName( "POPUP" );
-    popup.SetParentOrigin( ParentOrigin::CENTER );
-    popup.SetAnchorPoint( AnchorPoint::CENTER );
-    popup.SetSize( POPUP_WIDTH_DP, 0.0f );
+    popup.SetProperty( Dali::Actor::Property::NAME, "POPUP" );
+    popup.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
+    popup.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
+    popup.SetProperty( Actor::Property::SIZE, Vector2( POPUP_WIDTH_DP, 0.0f ) );
 
     popup.OutsideTouchedSignal().Connect( this, &ImageScalingAndFilteringController::OnPopupOutsideTouched );
 
     return popup;
   }
 
-  //void CreatePopupButton( Toolkit::Popup popup, const char* id )
   Toolkit::PushButton CreatePopupButton( Actor parent, const char* id )
   {
     Toolkit::PushButton button = Toolkit::PushButton::New();
-    button.SetName( id );
-    button.SetLabelText( id );
+    button.SetProperty( Dali::Actor::Property::NAME, id );
+    button.SetProperty( Toolkit::Button::Property::LABEL, id );
 
-    button.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    button.SetParentOrigin( ParentOrigin::BOTTOM_LEFT );
+    button.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT );
+    button.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_LEFT );
     button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
     button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
 
@@ -414,7 +388,7 @@ public:
 
   bool OnButtonClicked( Toolkit::Button button )
   {
-    if( button.GetName() == FITTING_BUTTON_ID )
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == FITTING_BUTTON_ID )
     {
       mPopup = CreatePopup();
 
@@ -434,10 +408,10 @@ public:
       CreatePopupButton( fittingModes, StringFromScalingMode( FittingMode::FIT_HEIGHT ) );
 
       mPopup.SetContent( fittingModes );
-      Stage::GetCurrent().Add( mPopup );
+      mApplication.GetWindow().Add( mPopup );
       mPopup.SetDisplayState( Toolkit::Popup::SHOWN );
     }
-    else if( button.GetName() == SAMPLING_BUTTON_ID )
+    else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == SAMPLING_BUTTON_ID )
     {
       mPopup = CreatePopup();
 
@@ -461,7 +435,7 @@ public:
       CreatePopupButton( samplingModes, StringFromFilterMode( SamplingMode::NO_FILTER ) );
 
       mPopup.SetContent( samplingModes );
-      Stage::GetCurrent().Add( mPopup );
+      mApplication.GetWindow().Add( mPopup );
       mPopup.SetDisplayState( Toolkit::Popup::SHOWN );
     }
     else if( CheckFittingModeButton( button, FittingMode::SCALE_TO_FILL) ||
@@ -485,10 +459,10 @@ public:
   bool CheckFittingModeButton( Actor &button, FittingMode::Type mode )
   {
     const char * const modeName = StringFromScalingMode( mode );
-    if( button.GetName() == modeName )
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == modeName )
     {
       mFittingMode = mode;
-      mFittingModeButton.SetLabelText( modeName );
+      mFittingModeButton.SetProperty( Toolkit::Button::Property::LABEL, modeName );
       ResizeImage();
       mPopup.SetDisplayState( Toolkit::Popup::HIDDEN );
       mPopup.Reset();
@@ -500,10 +474,10 @@ public:
   bool CheckSamplingModeButton( Actor &button, SamplingMode::Type mode )
   {
     const char * const modeName = StringFromFilterMode( mode );
-    if( button.GetName() == modeName )
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == modeName )
     {
       mSamplingMode = mode;
-      mSamplingModeButton.SetLabelText( modeName );
+      mSamplingModeButton.SetProperty( Toolkit::Button::Property::LABEL, modeName );
       ResizeImage();
       mPopup.SetDisplayState( Toolkit::Popup::HIDDEN );
       mPopup.Reset();
@@ -521,23 +495,15 @@ public:
     }
   }
 
-  void OnImageLoaded( ResourceImage image )
-  {
-      DALI_ASSERT_DEBUG( image == mNextImage );
-      mImageView.SetImage( image );
-      mImageView.SetSize( Size( image.GetWidth(), image.GetHeight() ) );
-  }
-
   bool OnControlTouched( Actor actor, const TouchEvent& event )
   {
     if(event.GetPointCount() > 0)
     {
-      const TouchPoint& point = event.GetPoint(0);
-      switch(point.state)
+      switch( event.GetState( 0 ) )
       {
-        case TouchPoint::Up:
+        case PointState::UP:
         {
-          const std::string & name = actor.GetName();
+          const std::string & name = actor.GetProperty< std::string >( Dali::Actor::Property::NAME );
           if( name == NEXT_BUTTON_ID )
           {
             mCurrentPath = mCurrentPath + 1;
@@ -564,23 +530,23 @@ public:
 
   void OnPinch( Actor actor, const PinchGesture& pinch )
   {
-    if( pinch.state == Gesture::Started )
+    if( pinch.GetState() == Gesture::Started )
     {
-      mLastPinchScale = pinch.scale;
+      mLastPinchScale = pinch.GetScale();
     }
-    const float scale = pinch.scale;
+    const float scale = pinch.GetScale();
 
     if( ! Equals( scale, mLastPinchScale ) )
     {
       if ( scale < mLastPinchScale )
       {
-        mImageStageScale.x = std::max( 0.05f, mImageStageScale.x * 0.9f );
-        mImageStageScale.y = std::max( 0.05f, mImageStageScale.y * 0.9f );
+        mImageWindowScale.x = std::max( 0.05f, mImageWindowScale.x * 0.9f );
+        mImageWindowScale.y = std::max( 0.05f, mImageWindowScale.y * 0.9f );
       }
       else
       {
-        mImageStageScale.x = std::max( 0.05f, std::min( 1.0f, mImageStageScale.x * 1.1f ) );
-        mImageStageScale.y = std::max( 0.05f, std::min( 1.0f, mImageStageScale.y * 1.1f ) );
+        mImageWindowScale.x = std::max( 0.05f, std::min( 1.0f, mImageWindowScale.x * 1.1f ) );
+        mImageWindowScale.y = std::max( 0.05f, std::min( 1.0f, mImageWindowScale.y * 1.1f ) );
       }
       ResizeImage();
     }
@@ -589,19 +555,24 @@ public:
 
   void OnPan( Actor actor, const PanGesture& gesture )
   {
-    Stage stage = Stage::GetCurrent();
-    mImageStageScale.x = std::max( 0.05f, std::min( 1.0f, mImageStageScale.x + (gesture.displacement.x * 2.0f / stage.GetSize().width ) ) );
-    mImageStageScale.y = std::max( 0.05f, std::min( 1.0f, mImageStageScale.y + (gesture.displacement.y * 2.0f / stage.GetSize().height ) ) );
+    Window window = mApplication.GetWindow();
+    Vector2 windowSize = window.GetSize();
+    const Vector2& displacement = gesture.GetDisplacement();
+
+    // 1.0f and 0.75f are the maximum size caps of the resized image, as a factor of window-size.
+    mImageWindowScale.x = std::max( 0.05f, std::min( 0.95f,  mImageWindowScale.x + ( displacement.x * 2.0f / windowSize.width ) ) );
+    mImageWindowScale.y = std::max( 0.05f, std::min( 0.70f, mImageWindowScale.y + ( displacement.y * 2.0f / windowSize.height ) ) );
+
     ResizeImage();
   }
 
   void OnKeyEvent(const KeyEvent& event)
   {
-    if( event.state == KeyEvent::Down )
+    if( event.GetState() == KeyEvent::DOWN )
     {
       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
       {
-        if( mPopup && mPopup.IsVisible() )
+        if( mPopup && mPopup.GetCurrentProperty< bool >( Actor::Property::VISIBLE ) )
         {
           mPopup.SetDisplayState( Toolkit::Popup::HIDDEN );
           mPopup.Reset();
@@ -611,53 +582,53 @@ public:
           mApplication.Quit();
         }
       }
-      else if ( event.keyPressedName == "Right" )
+      else if ( event.GetKeyName() == "Right" )
       {
-        mImageStageScale.x = std::max( 0.05f, std::min( 1.0f, mImageStageScale.x * 1.1f ) );
+        mImageWindowScale.x = std::max( 0.05f, std::min( 1.0f, mImageWindowScale.x * 1.1f ) );
       }
-      else if ( event.keyPressedName == "Left" )
+      else if ( event.GetKeyName() == "Left" )
       {
-        mImageStageScale.x = std::max( 0.05f, mImageStageScale.x * 0.9f );
+        mImageWindowScale.x = std::max( 0.05f, mImageWindowScale.x * 0.9f );
       }
-      else if ( event.keyPressedName == "Up" )
+      else if ( event.GetKeyName() == "Up" )
       {
-        mImageStageScale.y = std::max( 0.05f, std::min( 1.0f, mImageStageScale.y * 1.1f ) );
+        mImageWindowScale.y = std::max( 0.05f, std::min( 1.0f, mImageWindowScale.y * 1.1f ) );
       }
-      else if ( event.keyPressedName == "Down" )
+      else if ( event.GetKeyName() == "Down" )
       {
-        mImageStageScale.y = std::max( 0.05f, mImageStageScale.y * 0.9f );
+        mImageWindowScale.y = std::max( 0.05f, mImageWindowScale.y * 0.9f );
       }
-      else if ( event.keyPressedName == "o" )
+      else if ( event.GetKeyName() == "o" )
       {
-        mImageStageScale.x = std::max( 0.05f, mImageStageScale.x * 0.9f );
-        mImageStageScale.y = std::max( 0.05f, mImageStageScale.y * 0.9f );
+        mImageWindowScale.x = std::max( 0.05f, mImageWindowScale.x * 0.9f );
+        mImageWindowScale.y = std::max( 0.05f, mImageWindowScale.y * 0.9f );
       }
-      else if ( event.keyPressedName == "p" )
+      else if ( event.GetKeyName() == "p" )
       {
-        mImageStageScale.x = std::max( 0.05f, std::min( 1.0f, mImageStageScale.x * 1.1f ) );
-        mImageStageScale.y = std::max( 0.05f, std::min( 1.0f, mImageStageScale.y * 1.1f ) );
+        mImageWindowScale.x = std::max( 0.05f, std::min( 1.0f, mImageWindowScale.x * 1.1f ) );
+        mImageWindowScale.y = std::max( 0.05f, std::min( 1.0f, mImageWindowScale.y * 1.1f ) );
       }
-      else if ( event.keyPressedName == "n" )
+      else if ( event.GetKeyName() == "n" )
       {
         mCurrentPath = mCurrentPath + 1;
         mCurrentPath = mCurrentPath <  NUM_IMAGE_PATHS ? mCurrentPath : 0;
       }
-      else if ( event.keyPressedName == "b" )
+      else if ( event.GetKeyName() == "b" )
       {
         mCurrentPath = mCurrentPath - 1;
         mCurrentPath = mCurrentPath >= 0 ? mCurrentPath : NUM_IMAGE_PATHS - 1;
       }
       // Cycle filter and scaling modes:
-      else if ( event.keyPressedName == "f" )
+      else if ( event.GetKeyName() == "f" )
       {
         mSamplingMode = NextFilterMode( mSamplingMode );
-        mSamplingModeButton.SetLabelText( StringFromFilterMode( mSamplingMode ) );
+        mSamplingModeButton.SetProperty( Toolkit::Button::Property::LABEL, StringFromFilterMode( mSamplingMode ) );
       }
       // Cycle filter and scaling modes:
-      else if ( event.keyPressedName == "s" )
+      else if ( event.GetKeyName() == "s" )
       {
         mFittingMode = NextScalingMode( mFittingMode );
-        mFittingModeButton.SetLabelText( StringFromScalingMode( mFittingMode ) );
+        mFittingModeButton.SetProperty( Toolkit::Button::Property::LABEL, StringFromScalingMode( mFittingMode ) );
       }
       else
       {
@@ -669,57 +640,65 @@ public:
   }
 
 private:
-  void ResizeImage()
+
+  void LoadImage()
   {
-    const char * const path = IMAGE_PATHS[mCurrentPath];
+    mImageLoading = true;
 
-    Stage stage = Stage::GetCurrent();
-    Size imageSize = stage.GetSize() * mImageStageScale;
-    const ImageDimensions imageSizeInt = ImageDimensions::FromFloatArray( &imageSize.x );
+    const char * const path = IMAGE_PATHS[ mCurrentPath ];
+    Window window = mApplication.GetWindow();
+    Size imageSize = Vector2(window.GetSize()) * mImageWindowScale;
+    mImageView.SetProperty( Actor::Property::SIZE, imageSize );
 
-    ResourceImage image = ResourceImage::New( path, imageSizeInt, mFittingMode, mSamplingMode );
-    image.LoadingFinishedSignal().Connect( this, &ImageScalingAndFilteringController::OnImageLoaded );
+    Property::Map map;
+    map[Toolkit::ImageVisual::Property::URL] = path;
+    map[Toolkit::ImageVisual::Property::DESIRED_WIDTH] = imageSize.x;
+    map[Toolkit::ImageVisual::Property::DESIRED_HEIGHT] = imageSize.y;
+    map[Toolkit::ImageVisual::Property::FITTING_MODE] = mFittingMode;
+    map[Toolkit::ImageVisual::Property::SAMPLING_MODE] = mSamplingMode;
 
-    mNextImage = image;
+    mImageView.SetProperty( Toolkit::ImageView::Property::IMAGE, map );
 
-    mDesiredBox.SetSize( stage.GetSize() * mImageStageScale );
-    mHeightBox.SetSize( stage.GetSize().width,  (stage.GetSize() * mImageStageScale).height );
-    mWidthBox.SetSize( (stage.GetSize() * mImageStageScale).width, stage.GetSize().height );
+  }
+
+  void ResizeImage()
+  {
+
+    Window window = mApplication.GetWindow();
+    Vector2 windowSize = window.GetSize();
+    Size imageSize = windowSize * mImageWindowScale;
+
+    LoadImage();
+
+    // Border size needs to be modified to take into account the width of the frame.
+    Vector2 borderScale( ( imageSize + Vector2( BORDER_WIDTH * 2.0f, BORDER_WIDTH * 2.0f ) ) / windowSize );
+    mDesiredBox.SetProperty( Actor::Property::SIZE, windowSize * borderScale );
   }
 
 private:
   Application&  mApplication;
   Toolkit::ImageView mDesiredBox; //< Background rectangle to show requested image size.
-  Toolkit::ImageView mHeightBox;  //< Background horizontal stripe to show requested image height.
-  Toolkit::ImageView mWidthBox;   //< Background vertical stripe to show requested image width.
   Toolkit::PushButton mFittingModeButton;
   Toolkit::PushButton mSamplingModeButton;
   Toolkit::Popup mPopup;
   PinchGestureDetector mPinchDetector;
   float mLastPinchScale;
-  Toolkit::PushButton  mGrabCorner;
+  Toolkit::ImageView mGrabCorner;
   PanGestureDetector mPanGestureDetector;
   Toolkit::ImageView mImageView;
-  ResourceImage mNextImage; //< Currently-loading image
-  Vector2 mImageStageScale;
+  Vector2 mImageWindowScale;
   int mCurrentPath;
   FittingMode::Type mFittingMode;
   SamplingMode::Type mSamplingMode;
+  bool mImageLoading;
+  bool mQueuedImageLoad;
+
 };
 
-void RunTest( Application& application )
+int DALI_EXPORT_API main( int argc, char **argv )
 {
+  Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
   ImageScalingAndFilteringController test( application );
-
   application.MainLoop();
-}
-
-// Entry point for Linux & Tizen applications
-int main( int argc, char **argv )
-{
-  Application application = Application::New( &argc, &argv, DALI_DEMO_THEME_PATH );
-
-  RunTest( application );
-
   return 0;
 }