examples/cube-transition-effect/cube-transition-effect-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 // EXTERNAL INCLUDES
  19 #include <math.h>
  20
  21 // INTERNAL INCLUDES
  22 #include "shared/view.h"
  23
  24 #include <dali/dali.h>
  25 #include <dali-toolkit/dali-toolkit.h>
  26 #include <dali-toolkit/devel-api/transition-effects/cube-transition-effect.h>
  27 #include <dali-toolkit/devel-api/transition-effects/cube-transition-cross-effect.h>
  28 #include <dali-toolkit/devel-api/transition-effects/cube-transition-fold-effect.h>
  29 #include <dali-toolkit/devel-api/transition-effects/cube-transition-wave-effect.h>
  30
  31
  32 using namespace Dali;
  33
  34 using Dali::Toolkit::TextLabel;
  35
  36 // LOCAL STUFF
  37 namespace
  38 {
  39
  40 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
  41 const char * const APPLICATION_TITLE_WAVE( "Cube Transition: Wave" );
  42 const char * const APPLICATION_TITLE_CROSS( "Cube Transition: Cross" );
  43 const char * const APPLICATION_TITLE_FOLD( "Cube Transition: Fold" );
  44 const char * const EFFECT_WAVE_IMAGE( DALI_IMAGE_DIR "icon-effect-wave.png" );
  45 const char * const EFFECT_CROSS_IMAGE( DALI_IMAGE_DIR "icon-effect-cross.png" );
  46 const char * const EFFECT_FOLD_IMAGE( DALI_IMAGE_DIR "icon-effect-fold.png" );
  47 const char * const SLIDE_SHOW_START_ICON( DALI_IMAGE_DIR "icon-play.png" );
  48 const char * const SLIDE_SHOW_STOP_ICON( DALI_IMAGE_DIR "icon-stop.png" );
  49
  50 const char* IMAGES[] =
  51 {
  52   DALI_IMAGE_DIR "gallery-large-1.jpg",
  53   DALI_IMAGE_DIR "gallery-large-2.jpg",
  54   DALI_IMAGE_DIR "gallery-large-3.jpg",
  55   DALI_IMAGE_DIR "gallery-large-4.jpg",
  56   DALI_IMAGE_DIR "gallery-large-5.jpg",
  57   DALI_IMAGE_DIR "gallery-large-6.jpg",
  58   DALI_IMAGE_DIR "gallery-large-7.jpg",
  59   DALI_IMAGE_DIR "gallery-large-8.jpg",
  60   DALI_IMAGE_DIR "gallery-large-9.jpg",
  61   DALI_IMAGE_DIR "gallery-large-10.jpg",
  62   DALI_IMAGE_DIR "gallery-large-11.jpg",
  63   DALI_IMAGE_DIR "gallery-large-12.jpg",
  64   DALI_IMAGE_DIR "gallery-large-13.jpg",
  65   DALI_IMAGE_DIR "gallery-large-14.jpg",
  66   DALI_IMAGE_DIR "gallery-large-15.jpg",
  67   DALI_IMAGE_DIR "gallery-large-16.jpg",
  68   DALI_IMAGE_DIR "gallery-large-17.jpg",
  69   DALI_IMAGE_DIR "gallery-large-18.jpg",
  70   DALI_IMAGE_DIR "gallery-large-19.jpg",
  71   DALI_IMAGE_DIR "gallery-large-20.jpg",
  72   DALI_IMAGE_DIR "gallery-large-21.jpg",
  73 };
  74 const int NUM_IMAGES( sizeof(IMAGES) / sizeof(IMAGES[0]) );
  75
  76 // the number of cubes: NUM_COLUMNS*NUM_ROWS
  77 // better choose the numbers that can divide viewAreaSize.x
  78 const int NUM_COLUMNS_WAVE(16);
  79 const int NUM_COLUMNS_CROSS(8);
  80 const int NUM_COLUMNS_FOLD(8);
  81 // better choose the numbers that can divide viewAreaSize.y
  82 const int NUM_ROWS_WAVE(20);
  83 const int NUM_ROWS_CROSS(10);
  84 const int NUM_ROWS_FOLD(10);
  85 //transition effect duration
  86 const float ANIMATION_DURATION_WAVE(1.5f);
  87 const float ANIMATION_DURATION_CROSS(1.f);
  88 const float ANIMATION_DURATION_FOLD(1.f);
  89 //transition effect displacement
  90 const float CUBE_DISPLACEMENT_WAVE(70.f);
  91 const float CUBE_DISPLACEMENT_CROSS(30.f);
  92
  93 // The duration of the current image staying on screen when slideshow is on
  94 const int VIEWINGTIME = 2000; // 2 seconds
  95
  96 /**
  97  * @brief Load an image, scaled-down to no more than the stage dimensions.
  98  *
  99  * Uses image scaling mode SCALE_TO_FILL to resize the image at
 100  * load time to cover the entire stage with pixels with no borders,
 101  * and filter mode BOX_THEN_LINEAR to sample the image with
 102  * maximum quality.
 103  */
 104 ResourceImage LoadStageFillingImage( const char * const imagePath )
 105 {
 106   Size stageSize = Stage::GetCurrent().GetSize();
 107   return ResourceImage::New( imagePath, ImageDimensions( stageSize.x, stageSize.y ), Dali::FittingMode::SCALE_TO_FILL, Dali::SamplingMode::BOX_THEN_LINEAR );
 108 }
 109
 110 } // namespace
 111
 112 class CubeTransitionApp : public ConnectionTracker
 113 {
 114 public:
 115
 116   /**
 117    * Constructor
 118    * @param application class, stored as reference
 119    */
 120   CubeTransitionApp( Application& application );
 121
 122   ~CubeTransitionApp();
 123
 124 private:
 125
 126   /**
 127    * This method gets called once the main loop of application is up and running
 128    */
 129   void OnInit( Application& application );
 130   /**
 131    * PanGesture callback. This method gets called when the pan gesture is detected.
 132    * @param[in] actor The actor receiving the pan gesture.
 133    * @param[in] gesture The detected pan gesture.
 134    */
 135   void OnPanGesture( Actor actor, const PanGesture& gesture );
 136   /**
 137    * Load the next image and start the transition;
 138    */
 139   void GoToNextImage();
 140   /**
 141    * Callback function of image resource loading succeed
 142    * Start the transition
 143    * @param[in] image The image content of the imageActor for transition
 144    */
 145   void OnImageLoaded(ResourceImage image);
 146   /**
 147    * Main key event handler
 148    */
 149   void OnKeyEvent(const KeyEvent& event);
 150   /**
 151    * Callback function of effect-switch button
 152    * Change the effect when the effect button is clicked
 153    * @param[in] button The handle of the clicked button
 154    */
 155   bool OnEffectButtonClicked( Toolkit::Button button );
 156   /**
 157    * Callback function of slideshow button
 158    * Start or stop the automatical image display when the slideshow button is clicked
 159    * @param[in] button The handle of the clicked button
 160    */
 161   bool OnSildeshowButtonClicked( Toolkit::Button button );
 162   /**
 163    * Callback function of cube transition completed signal
 164    * @param[in] effect The cube effect used for the transition
 165    * @param[in] imageActor The target imageActor of the completed transition
 166    */
 167   void OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, ImageActor imageActor);
 168   /**
 169    * Callback function of timer tick
 170    * The timer is used to count the image display duration in slideshow,
 171    */
 172   bool OnTimerTick();
 173
 174 private:
 175   Application&                    mApplication;
 176   Toolkit::Control                mView;
 177   Toolkit::ToolBar                mToolBar;
 178   Layer                           mContent;
 179   Toolkit::TextLabel              mTitleActor;
 180   Actor                           mParent;
 181
 182   Vector2                         mViewSize;
 183
 184   ImageActor                      mCurrentImage;
 185   ImageActor                      mNextImage;
 186   unsigned int                    mIndex;
 187   bool                            mIsImageLoading;
 188
 189   PanGestureDetector              mPanGestureDetector;
 190
 191   Toolkit::CubeTransitionEffect   mCubeWaveEffect;
 192   Toolkit::CubeTransitionEffect   mCubeCrossEffect;
 193   Toolkit::CubeTransitionEffect   mCubeFoldEffect;
 194   Toolkit::CubeTransitionEffect   mCurrentEffect;
 195
 196   bool                            mSlideshow;
 197   Timer                           mViewTimer;
 198   Toolkit::PushButton             mSlideshowButton;
 199   Image                           mIconSlideshowStart;
 200   Image                           mIconSlideshowStop;
 201
 202   Vector2                         mPanPosition;
 203   Vector2                         mPanDisplacement;
 204
 205   Image                           mImageWave;
 206   Image                           mImageCross;
 207   Image                           mImageFold;
 208   Toolkit::PushButton             mEffectChangeButton;
 209 };
 210
 211 CubeTransitionApp::CubeTransitionApp( Application& application )
 212 : mApplication( application ),
 213   mIndex( 0 ),
 214   mIsImageLoading( false ),
 215   mSlideshow( false )
 216 {
 217   mApplication.InitSignal().Connect( this, &CubeTransitionApp::OnInit );
 218 }
 219
 220 CubeTransitionApp::~CubeTransitionApp()
 221 {
 222   //Nothing to do
 223 }
 224
 225 void CubeTransitionApp::OnInit( Application& application )
 226 {
 227   Stage::GetCurrent().KeyEventSignal().Connect(this, &CubeTransitionApp::OnKeyEvent);
 228
 229   // Creates a default view with a default tool bar, the view is added to the stage.
 230   mContent = DemoHelper::CreateView( application, mView, mToolBar, "", TOOLBAR_IMAGE, "" );
 231
 232   // Add an effect-changing button on the right of the tool bar.
 233   mImageWave = ResourceImage::New( EFFECT_WAVE_IMAGE );
 234   mImageCross = ResourceImage::New( EFFECT_CROSS_IMAGE );
 235   mImageFold = ResourceImage::New( EFFECT_FOLD_IMAGE );
 236   mEffectChangeButton = Toolkit::PushButton::New();
 237   mEffectChangeButton.SetBackgroundImage(mImageWave);
 238   mEffectChangeButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnEffectButtonClicked );
 239   mToolBar.AddControl( mEffectChangeButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 240
 241   // Add title to the tool bar.
 242   mTitleActor = DemoHelper::CreateToolBarLabel( APPLICATION_TITLE_WAVE );
 243   mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Toolkit::Alignment::HorizontalCenter );
 244
 245   //Add an slideshow icon on the right of the title
 246   mIconSlideshowStart = ResourceImage::New( SLIDE_SHOW_START_ICON );
 247   mIconSlideshowStop = ResourceImage::New( SLIDE_SHOW_STOP_ICON );
 248   mSlideshowButton = Toolkit::PushButton::New();
 249   mSlideshowButton.SetBackgroundImage( mIconSlideshowStart );
 250   mSlideshowButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnSildeshowButtonClicked );
 251   mToolBar.AddControl( mSlideshowButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 252
 253   // Set size to stage size to avoid seeing a black border on transition
 254   mViewSize = Stage::GetCurrent().GetSize();
 255
 256   mParent = Actor::New();
 257   mParent.SetSize( mViewSize );
 258   mParent.SetPositionInheritanceMode( USE_PARENT_POSITION );
 259   mContent.Add( mParent );
 260
 261   // use pan gesture to detect the cursor or finger movement
 262   mPanGestureDetector = PanGestureDetector::New();
 263   mPanGestureDetector.DetectedSignal().Connect( this, &CubeTransitionApp::OnPanGesture );
 264   mPanGestureDetector.Attach( mParent );
 265
 266   //use small cubes
 267   mCubeWaveEffect = Toolkit::CubeTransitionWaveEffect::New(NUM_ROWS_WAVE, NUM_COLUMNS_WAVE, mViewSize);
 268   mCubeWaveEffect.SetTransitionDuration( ANIMATION_DURATION_WAVE );
 269   mCubeWaveEffect.SetCubeDisplacement( CUBE_DISPLACEMENT_WAVE );
 270   mCubeWaveEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 271   mParent.Add(mCubeWaveEffect.GetRoot());
 272   // use big cubes
 273   mCubeCrossEffect = Toolkit::CubeTransitionCrossEffect::New(NUM_ROWS_CROSS, NUM_COLUMNS_CROSS, mViewSize);
 274   mCubeCrossEffect.SetTransitionDuration( ANIMATION_DURATION_CROSS);
 275   mCubeCrossEffect.SetCubeDisplacement( CUBE_DISPLACEMENT_CROSS );
 276   mCubeCrossEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 277   mParent.Add(mCubeCrossEffect.GetRoot());
 278
 279   mCubeFoldEffect = Toolkit::CubeTransitionFoldEffect::New(NUM_ROWS_FOLD, NUM_COLUMNS_FOLD, mViewSize);
 280   mCubeFoldEffect.SetTransitionDuration( ANIMATION_DURATION_FOLD);
 281   mCubeFoldEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 282   mParent.Add(mCubeFoldEffect.GetRoot());
 283
 284   mViewTimer = Timer::New( VIEWINGTIME );
 285   mViewTimer.TickSignal().Connect( this, &CubeTransitionApp::OnTimerTick );
 286
 287   // show the first image
 288   mCurrentImage = ImageActor::New( LoadStageFillingImage( IMAGES[mIndex] ) );
 289   mCurrentImage.SetPositionInheritanceMode( USE_PARENT_POSITION );
 290   mCurrentImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 291   mCurrentImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
 292   mParent.Add( mCurrentImage );
 293
 294   mCurrentEffect = mCubeWaveEffect;
 295   mCurrentEffect.SetCurrentImage( mCurrentImage );
 296 }
 297
 298 // signal handler, called when the pan gesture is detected
 299 void CubeTransitionApp::OnPanGesture( Actor actor, const PanGesture& gesture )
 300 {
 301   // does not response when the transition has not finished
 302   if( mIsImageLoading || mCubeWaveEffect.IsTransiting() || mCubeCrossEffect.IsTransiting() || mCubeFoldEffect.IsTransiting() || mSlideshow )
 303   {
 304     return;
 305   }
 306
 307   if( gesture.state == Gesture::Continuing )
 308   {
 309     if( gesture.displacement.x < 0)
 310     {
 311       mIndex = (mIndex + 1)%NUM_IMAGES;
 312     }
 313     else
 314     {
 315       mIndex = (mIndex + NUM_IMAGES -1)%NUM_IMAGES;
 316     }
 317
 318     mPanPosition = gesture.position;
 319     mPanDisplacement = gesture.displacement;
 320     GoToNextImage();
 321   }
 322 }
 323
 324 void CubeTransitionApp::GoToNextImage()
 325 {
 326   ResourceImage image = LoadStageFillingImage( IMAGES[ mIndex ] );
 327   mNextImage = ImageActor::New( image );
 328
 329   mNextImage.SetPositionInheritanceMode(USE_PARENT_POSITION);
 330   mNextImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 331   mNextImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
 332   mCurrentEffect.SetTargetImage(mNextImage);
 333   if( image.GetLoadingState() == ResourceLoadingSucceeded )
 334   {
 335     mIsImageLoading = false;
 336     OnImageLoaded( image );
 337   }
 338   else
 339   {
 340     mIsImageLoading = true;
 341     image.LoadingFinishedSignal().Connect( this, &CubeTransitionApp::OnImageLoaded );
 342   }
 343 }
 344
 345 void CubeTransitionApp::OnImageLoaded(ResourceImage image)
 346 {
 347    mIsImageLoading = false;
 348    mCurrentEffect.StartTransition( mPanPosition, mPanDisplacement );
 349    mParent.Remove(mCurrentImage);
 350    mParent.Add(mNextImage);
 351    mCurrentImage = mNextImage;
 352 }
 353
 354 bool CubeTransitionApp::OnEffectButtonClicked( Toolkit::Button button )
 355 {
 356   if(mCurrentEffect == mCubeWaveEffect)
 357   {
 358     mCurrentEffect = mCubeCrossEffect;
 359     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_CROSS) );
 360     mEffectChangeButton.SetBackgroundImage(mImageCross);
 361
 362   }
 363   else if(mCurrentEffect == mCubeCrossEffect)
 364   {
 365     mCurrentEffect = mCubeFoldEffect;
 366     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_FOLD) );
 367     mEffectChangeButton.SetBackgroundImage(mImageFold);
 368   }
 369   else
 370   {
 371     mCurrentEffect = mCubeWaveEffect;
 372     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_WAVE) );
 373     mEffectChangeButton.SetBackgroundImage(mImageWave);
 374   }
 375
 376   // Set the current image to cube transition effect
 377   // only need to set at beginning or change from another effect
 378   mCurrentEffect.SetCurrentImage(mCurrentImage);
 379   return true;
 380 }
 381
 382 bool CubeTransitionApp::OnSildeshowButtonClicked( Toolkit::Button button )
 383 {
 384   mSlideshow = !mSlideshow;
 385   if( mSlideshow )
 386   {
 387     mPanGestureDetector.Detach( mParent );
 388     mSlideshowButton.SetBackgroundImage( mIconSlideshowStop );
 389     mPanPosition = Vector2( mViewSize.width, mViewSize.height*0.5f );
 390     mPanDisplacement = Vector2( -10.f, 0.f );
 391     mViewTimer.Start();
 392   }
 393   else
 394   {
 395     mPanGestureDetector.Attach( mParent );
 396     mSlideshowButton.SetBackgroundImage( mIconSlideshowStart );
 397     mViewTimer.Stop();
 398   }
 399   return true;
 400 }
 401
 402 void CubeTransitionApp::OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, ImageActor imageActor)
 403 {
 404   if( mSlideshow )
 405   {
 406     mViewTimer.Start();
 407   }
 408 }
 409
 410 bool CubeTransitionApp::OnTimerTick()
 411 {
 412   if(mSlideshow)
 413   {
 414     mIndex = (mIndex + 1)%NUM_IMAGES;
 415     GoToNextImage();
 416   }
 417
 418   //return false to stop the timer
 419   return false;
 420 }
 421
 422 void CubeTransitionApp::OnKeyEvent(const KeyEvent& event)
 423 {
 424   if(event.state == KeyEvent::Down)
 425   {
 426     if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 427     {
 428       mApplication.Quit();
 429     }
 430   }
 431 }
 432
 433 // Entry point for Linux & Tizen applications
 434 int main( int argc, char **argv )
 435 {
 436   Application application = Application::New( &argc, &argv, DALI_DEMO_THEME_PATH );
 437   CubeTransitionApp test( application );
 438   application.MainLoop();
 439
 440   return 0;
 441 }