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