examples/cube-transition-effect/cube-transition-effect-example.cpp

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