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