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