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_WAVE_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-effect-wave-selected.png" );
  46 const char * const EFFECT_CROSS_IMAGE( DALI_IMAGE_DIR "icon-effect-cross.png" );
  47 const char * const EFFECT_CROSS_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-effect-cross-selected.png" );
  48 const char * const EFFECT_FOLD_IMAGE( DALI_IMAGE_DIR "icon-effect-fold.png" );
  49 const char * const EFFECT_FOLD_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-effect-fold-selected.png" );
  50 const char * const SLIDE_SHOW_START_ICON( DALI_IMAGE_DIR "icon-play.png" );
  51 const char * const SLIDE_SHOW_START_ICON_SELECTED( DALI_IMAGE_DIR "icon-play-selected.png" );
  52 const char * const SLIDE_SHOW_STOP_ICON( DALI_IMAGE_DIR "icon-stop.png" );
  53 const char * const SLIDE_SHOW_STOP_ICON_SELECTED( DALI_IMAGE_DIR "icon-stop-selected.png" );
  54
  55 const char* IMAGES[] =
  56 {
  57   DALI_IMAGE_DIR "gallery-large-1.jpg",
  58   DALI_IMAGE_DIR "gallery-large-2.jpg",
  59   DALI_IMAGE_DIR "gallery-large-3.jpg",
  60   DALI_IMAGE_DIR "gallery-large-4.jpg",
  61   DALI_IMAGE_DIR "gallery-large-5.jpg",
  62   DALI_IMAGE_DIR "gallery-large-6.jpg",
  63   DALI_IMAGE_DIR "gallery-large-7.jpg",
  64   DALI_IMAGE_DIR "gallery-large-8.jpg",
  65   DALI_IMAGE_DIR "gallery-large-9.jpg",
  66   DALI_IMAGE_DIR "gallery-large-10.jpg",
  67   DALI_IMAGE_DIR "gallery-large-11.jpg",
  68   DALI_IMAGE_DIR "gallery-large-12.jpg",
  69   DALI_IMAGE_DIR "gallery-large-13.jpg",
  70   DALI_IMAGE_DIR "gallery-large-14.jpg",
  71   DALI_IMAGE_DIR "gallery-large-15.jpg",
  72   DALI_IMAGE_DIR "gallery-large-16.jpg",
  73   DALI_IMAGE_DIR "gallery-large-17.jpg",
  74   DALI_IMAGE_DIR "gallery-large-18.jpg",
  75   DALI_IMAGE_DIR "gallery-large-19.jpg",
  76   DALI_IMAGE_DIR "gallery-large-20.jpg",
  77   DALI_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] imageActor The target imageActor of the completed transition
 171    */
 172   void OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, ImageActor imageActor);
 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              mTitleActor;
 185   Actor                           mParent;
 186
 187   Vector2                         mViewSize;
 188
 189   ImageActor                      mCurrentImage;
 190   ImageActor                      mNextImage;
 191   unsigned int                    mIndex;
 192   bool                            mIsImageLoading;
 193
 194   PanGestureDetector              mPanGestureDetector;
 195
 196   Toolkit::CubeTransitionEffect   mCubeWaveEffect;
 197   Toolkit::CubeTransitionEffect   mCubeCrossEffect;
 198   Toolkit::CubeTransitionEffect   mCubeFoldEffect;
 199   Toolkit::CubeTransitionEffect   mCurrentEffect;
 200
 201   bool                            mSlideshow;
 202   Timer                           mViewTimer;
 203   Toolkit::PushButton             mSlideshowButton;
 204   Image                           mIconSlideshowStart;
 205   Image                           mIconSlideshowStartSelected;
 206   Image                           mIconSlideshowStop;
 207   Image                           mIconSlideshowStopSelected;
 208
 209   Vector2                         mPanPosition;
 210   Vector2                         mPanDisplacement;
 211
 212   Image                           mImageWave;
 213   Image                           mImageWaveSelected;
 214   Image                           mImageCross;
 215   Image                           mImageCrossSelected;
 216   Image                           mImageFold;
 217   Image                           mImageFoldSelected;
 218   Toolkit::PushButton             mEffectChangeButton;
 219 };
 220
 221 CubeTransitionApp::CubeTransitionApp( Application& application )
 222 : mApplication( application ),
 223   mIndex( 0 ),
 224   mIsImageLoading( false ),
 225   mSlideshow( false )
 226 {
 227   mApplication.InitSignal().Connect( this, &CubeTransitionApp::OnInit );
 228 }
 229
 230 CubeTransitionApp::~CubeTransitionApp()
 231 {
 232   //Nothing to do
 233 }
 234
 235 void CubeTransitionApp::OnInit( Application& application )
 236 {
 237   Stage::GetCurrent().KeyEventSignal().Connect(this, &CubeTransitionApp::OnKeyEvent);
 238
 239   // Creates a default view with a default tool bar, the view is added to the stage.
 240   mContent = DemoHelper::CreateView( application, mView, mToolBar, "", TOOLBAR_IMAGE, "" );
 241   mContent.SetBehavior( Layer::LAYER_3D );
 242
 243   // Add an effect-changing button on the right of the tool bar.
 244   mImageWave = ResourceImage::New( EFFECT_WAVE_IMAGE );
 245   mImageWaveSelected = ResourceImage::New( EFFECT_WAVE_IMAGE_SELECTED );
 246   mImageCross = ResourceImage::New( EFFECT_CROSS_IMAGE );
 247   mImageCrossSelected = ResourceImage::New( EFFECT_CROSS_IMAGE_SELECTED );
 248   mImageFold = ResourceImage::New( EFFECT_FOLD_IMAGE );
 249   mImageFoldSelected = ResourceImage::New( EFFECT_FOLD_IMAGE_SELECTED );
 250   mEffectChangeButton = Toolkit::PushButton::New();
 251   mEffectChangeButton.SetButtonImage( mImageWave );
 252   mEffectChangeButton.SetSelectedImage( mImageWaveSelected );
 253   mEffectChangeButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnEffectButtonClicked );
 254   mToolBar.AddControl( mEffectChangeButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 255
 256   // Add title to the tool bar.
 257   mTitleActor = DemoHelper::CreateToolBarLabel( APPLICATION_TITLE_WAVE );
 258   mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Toolkit::Alignment::HorizontalCenter );
 259
 260   //Add an slideshow icon on the right of the title
 261   mIconSlideshowStart = ResourceImage::New( SLIDE_SHOW_START_ICON );
 262   mIconSlideshowStartSelected = ResourceImage::New( SLIDE_SHOW_START_ICON_SELECTED );
 263   mIconSlideshowStop = ResourceImage::New( SLIDE_SHOW_STOP_ICON );
 264   mIconSlideshowStopSelected = ResourceImage::New( SLIDE_SHOW_STOP_ICON_SELECTED );
 265   mSlideshowButton = Toolkit::PushButton::New();
 266   mSlideshowButton.SetButtonImage( mIconSlideshowStart );
 267   mSlideshowButton.SetSelectedImage( mIconSlideshowStartSelected );
 268   mSlideshowButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnSildeshowButtonClicked );
 269   mToolBar.AddControl( mSlideshowButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 270
 271   // Set size to stage size to avoid seeing a black border on transition
 272   mViewSize = Stage::GetCurrent().GetSize();
 273
 274   mParent = Actor::New();
 275   mParent.SetSize( mViewSize );
 276   mParent.SetPositionInheritanceMode( USE_PARENT_POSITION );
 277   mContent.Add( mParent );
 278
 279   // use pan gesture to detect the cursor or finger movement
 280   mPanGestureDetector = PanGestureDetector::New();
 281   mPanGestureDetector.DetectedSignal().Connect( this, &CubeTransitionApp::OnPanGesture );
 282   mPanGestureDetector.Attach( mParent );
 283
 284   //use small cubes
 285   mCubeWaveEffect = Toolkit::CubeTransitionWaveEffect::New(NUM_ROWS_WAVE, NUM_COLUMNS_WAVE, mViewSize);
 286   mCubeWaveEffect.SetTransitionDuration( ANIMATION_DURATION_WAVE );
 287   mCubeWaveEffect.SetCubeDisplacement( CUBE_DISPLACEMENT_WAVE );
 288   mCubeWaveEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 289   mParent.Add(mCubeWaveEffect.GetRoot());
 290   // use big cubes
 291   mCubeCrossEffect = Toolkit::CubeTransitionCrossEffect::New(NUM_ROWS_CROSS, NUM_COLUMNS_CROSS, mViewSize);
 292   mCubeCrossEffect.SetTransitionDuration( ANIMATION_DURATION_CROSS);
 293   mCubeCrossEffect.SetCubeDisplacement( CUBE_DISPLACEMENT_CROSS );
 294   mCubeCrossEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 295   mParent.Add(mCubeCrossEffect.GetRoot());
 296
 297   mCubeFoldEffect = Toolkit::CubeTransitionFoldEffect::New(NUM_ROWS_FOLD, NUM_COLUMNS_FOLD, mViewSize);
 298   mCubeFoldEffect.SetTransitionDuration( ANIMATION_DURATION_FOLD);
 299   mCubeFoldEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 300   mParent.Add(mCubeFoldEffect.GetRoot());
 301
 302   mViewTimer = Timer::New( VIEWINGTIME );
 303   mViewTimer.TickSignal().Connect( this, &CubeTransitionApp::OnTimerTick );
 304
 305   // show the first image
 306   mCurrentImage = ImageActor::New( LoadStageFillingImage( IMAGES[mIndex] ) );
 307   mCurrentImage.SetPositionInheritanceMode( USE_PARENT_POSITION );
 308   mCurrentImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 309   mCurrentImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
 310   mParent.Add( mCurrentImage );
 311
 312   mCurrentEffect = mCubeWaveEffect;
 313   mCurrentEffect.SetCurrentImage( mCurrentImage );
 314 }
 315
 316 // signal handler, called when the pan gesture is detected
 317 void CubeTransitionApp::OnPanGesture( Actor actor, const PanGesture& gesture )
 318 {
 319   // does not response when the transition has not finished
 320   if( mIsImageLoading || mCubeWaveEffect.IsTransiting() || mCubeCrossEffect.IsTransiting() || mCubeFoldEffect.IsTransiting() || mSlideshow )
 321   {
 322     return;
 323   }
 324
 325   if( gesture.state == Gesture::Continuing )
 326   {
 327     if( gesture.displacement.x < 0)
 328     {
 329       mIndex = (mIndex + 1)%NUM_IMAGES;
 330     }
 331     else
 332     {
 333       mIndex = (mIndex + NUM_IMAGES -1)%NUM_IMAGES;
 334     }
 335
 336     mPanPosition = gesture.position;
 337     mPanDisplacement = gesture.displacement;
 338     GoToNextImage();
 339   }
 340 }
 341
 342 void CubeTransitionApp::GoToNextImage()
 343 {
 344   ResourceImage image = LoadStageFillingImage( IMAGES[ mIndex ] );
 345   mNextImage = ImageActor::New( image );
 346
 347   mNextImage.SetPositionInheritanceMode(USE_PARENT_POSITION);
 348   mNextImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 349   mNextImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
 350   mCurrentEffect.SetTargetImage(mNextImage);
 351   if( image.GetLoadingState() == ResourceLoadingSucceeded )
 352   {
 353     mIsImageLoading = false;
 354     OnImageLoaded( image );
 355   }
 356   else
 357   {
 358     mIsImageLoading = true;
 359     image.LoadingFinishedSignal().Connect( this, &CubeTransitionApp::OnImageLoaded );
 360   }
 361 }
 362
 363 void CubeTransitionApp::OnImageLoaded(ResourceImage image)
 364 {
 365    mIsImageLoading = false;
 366    mCurrentEffect.StartTransition( mPanPosition, mPanDisplacement );
 367    mParent.Remove(mCurrentImage);
 368    mParent.Add(mNextImage);
 369    mCurrentImage = mNextImage;
 370 }
 371
 372 bool CubeTransitionApp::OnEffectButtonClicked( Toolkit::Button button )
 373 {
 374   if(mCurrentEffect == mCubeWaveEffect)
 375   {
 376     mCurrentEffect = mCubeCrossEffect;
 377     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_CROSS) );
 378     mEffectChangeButton.SetButtonImage( mImageCross );
 379     mEffectChangeButton.SetSelectedImage( mImageCrossSelected );
 380
 381   }
 382   else if(mCurrentEffect == mCubeCrossEffect)
 383   {
 384     mCurrentEffect = mCubeFoldEffect;
 385     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_FOLD) );
 386     mEffectChangeButton.SetButtonImage( mImageFold );
 387     mEffectChangeButton.SetSelectedImage( mImageFoldSelected );
 388   }
 389   else
 390   {
 391     mCurrentEffect = mCubeWaveEffect;
 392     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_WAVE) );
 393     mEffectChangeButton.SetButtonImage( mImageWave );
 394     mEffectChangeButton.SetSelectedImage( mImageWaveSelected );
 395   }
 396
 397   // Set the current image to cube transition effect
 398   // only need to set at beginning or change from another effect
 399   mCurrentEffect.SetCurrentImage(mCurrentImage);
 400   return true;
 401 }
 402
 403 bool CubeTransitionApp::OnSildeshowButtonClicked( Toolkit::Button button )
 404 {
 405   mSlideshow = !mSlideshow;
 406   if( mSlideshow )
 407   {
 408     mPanGestureDetector.Detach( mParent );
 409     mSlideshowButton.SetButtonImage( mIconSlideshowStop );
 410     mSlideshowButton.SetSelectedImage( mIconSlideshowStopSelected );
 411     mPanPosition = Vector2( mViewSize.width, mViewSize.height*0.5f );
 412     mPanDisplacement = Vector2( -10.f, 0.f );
 413     mViewTimer.Start();
 414   }
 415   else
 416   {
 417     mPanGestureDetector.Attach( mParent );
 418     mSlideshowButton.SetButtonImage( mIconSlideshowStart );
 419     mSlideshowButton.SetSelectedImage( mIconSlideshowStartSelected );
 420     mViewTimer.Stop();
 421   }
 422   return true;
 423 }
 424
 425 void CubeTransitionApp::OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, ImageActor imageActor)
 426 {
 427   if( mSlideshow )
 428   {
 429     mViewTimer.Start();
 430   }
 431 }
 432
 433 bool CubeTransitionApp::OnTimerTick()
 434 {
 435   if(mSlideshow)
 436   {
 437     mIndex = (mIndex + 1)%NUM_IMAGES;
 438     GoToNextImage();
 439   }
 440
 441   //return false to stop the timer
 442   return false;
 443 }
 444
 445 void CubeTransitionApp::OnKeyEvent(const KeyEvent& event)
 446 {
 447   if(event.state == KeyEvent::Down)
 448   {
 449     if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 450     {
 451       mApplication.Quit();
 452     }
 453   }
 454 }
 455
 456 // Entry point for Linux & Tizen applications
 457 int main( int argc, char **argv )
 458 {
 459   Application application = Application::New( &argc, &argv, DALI_DEMO_THEME_PATH );
 460   CubeTransitionApp test( application );
 461   application.MainLoop();
 462
 463   return 0;
 464 }