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