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

   1 /*
   2  * Copyright (c) 2019 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/toggle-button.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
 197 CubeTransitionApp::CubeTransitionApp( Application& application )
 198 : mApplication( application ),
 199   mIndex( 0 ),
 200   mIsImageLoading( false ),
 201   mSlideshow( false )
 202 {
 203   mApplication.InitSignal().Connect( this, &CubeTransitionApp::OnInit );
 204 }
 205
 206 CubeTransitionApp::~CubeTransitionApp()
 207 {
 208   //Nothing to do
 209 }
 210
 211 void CubeTransitionApp::OnInit( Application& application )
 212 {
 213   Stage::GetCurrent().KeyEventSignal().Connect(this, &CubeTransitionApp::OnKeyEvent);
 214
 215   // Creates a default view with a default tool bar, the view is added to the stage.
 216   mContent = DemoHelper::CreateView( application, mView, mToolBar, "", TOOLBAR_IMAGE, "" );
 217   mContent.SetBehavior( Layer::LAYER_3D );
 218
 219
 220   // Add an effect changing toggle button
 221   Toolkit::ToggleButton effectChangeToggleButton = Toolkit::ToggleButton::ToggleButton::New();
 222
 223   effectChangeToggleButton.SetProperty( Toolkit::ToggleButton::Property::STATE_VISUALS,
 224                                         Property::Array{ EFFECT_WAVE_IMAGE,
 225                                                          EFFECT_CROSS_IMAGE,
 226                                                          EFFECT_FOLD_IMAGE }
 227                                       );
 228
 229   effectChangeToggleButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnEffectButtonClicked );
 230   mToolBar.AddControl( effectChangeToggleButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 231
 232   // Add title to the tool bar.
 233   mTitle = DemoHelper::CreateToolBarLabel( APPLICATION_TITLE_WAVE );
 234   mToolBar.AddControl( mTitle, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Toolkit::Alignment::HorizontalCenter );
 235
 236   //Add an slideshow icon on the right of the title
 237   mSlideshowButton = Toolkit::PushButton::New();
 238   mSlideshowButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON );
 239   mSlideshowButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON_SELECTED );
 240   mSlideshowButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnSildeshowButtonClicked );
 241   mToolBar.AddControl( mSlideshowButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 242
 243   // Set size to stage size to avoid seeing a black border on transition
 244   mViewSize = Stage::GetCurrent().GetSize();
 245
 246   // show the first image
 247   mCurrentTexture = LoadStageFillingTexture( IMAGES[mIndex] );
 248
 249   //use small cubes
 250   mCubeWaveEffect = Toolkit::CubeTransitionWaveEffect::New( NUM_ROWS_WAVE, NUM_COLUMNS_WAVE );
 251   mCubeWaveEffect.SetTransitionDuration( ANIMATION_DURATION_WAVE );
 252   mCubeWaveEffect.SetCubeDisplacement( CUBE_DISPLACEMENT_WAVE );
 253   mCubeWaveEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 254
 255   mCubeWaveEffect.SetProperty( Actor::Property::SIZE, mViewSize );
 256   mCubeWaveEffect.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 257   mCubeWaveEffect.SetCurrentTexture( mCurrentTexture );
 258
 259   // use big cubes
 260   mCubeCrossEffect = Toolkit::CubeTransitionCrossEffect::New(NUM_ROWS_CROSS, NUM_COLUMNS_CROSS );
 261   mCubeCrossEffect.SetTransitionDuration( ANIMATION_DURATION_CROSS );
 262   mCubeCrossEffect.SetCubeDisplacement( CUBE_DISPLACEMENT_CROSS );
 263   mCubeCrossEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 264
 265   mCubeCrossEffect.SetProperty( Actor::Property::SIZE, mViewSize );
 266   mCubeCrossEffect.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 267   mCubeCrossEffect.SetCurrentTexture( mCurrentTexture );
 268
 269   mCubeFoldEffect = Toolkit::CubeTransitionFoldEffect::New( NUM_ROWS_FOLD, NUM_COLUMNS_FOLD );
 270   mCubeFoldEffect.SetTransitionDuration( ANIMATION_DURATION_FOLD );
 271   mCubeFoldEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
 272
 273   mCubeFoldEffect.SetProperty( Actor::Property::SIZE, mViewSize );
 274   mCubeFoldEffect.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 275   mCubeFoldEffect.SetCurrentTexture( mCurrentTexture );
 276
 277   mViewTimer = Timer::New( VIEWINGTIME );
 278   mViewTimer.TickSignal().Connect( this, &CubeTransitionApp::OnTimerTick );
 279
 280
 281   mCurrentEffect = mCubeWaveEffect;
 282   mContent.Add( mCurrentEffect );
 283
 284   // use pan gesture to detect the cursor or finger movement
 285   mPanGestureDetector = PanGestureDetector::New();
 286   mPanGestureDetector.DetectedSignal().Connect( this, &CubeTransitionApp::OnPanGesture );
 287   mPanGestureDetector.Attach( mContent );
 288 }
 289
 290 // signal handler, called when the pan gesture is detected
 291 void CubeTransitionApp::OnPanGesture( Actor actor, const PanGesture& gesture )
 292 {
 293   // does not response when the transition has not finished
 294   if( mIsImageLoading || mCubeWaveEffect.IsTransitioning() || mCubeCrossEffect.IsTransitioning() || mCubeFoldEffect.IsTransitioning() || mSlideshow )
 295   {
 296     return;
 297   }
 298
 299   if( gesture.state == Gesture::Continuing )
 300   {
 301     if( gesture.displacement.x < 0)
 302     {
 303       mIndex = (mIndex + 1)%NUM_IMAGES;
 304     }
 305     else
 306     {
 307       mIndex = (mIndex + NUM_IMAGES -1)%NUM_IMAGES;
 308     }
 309
 310     mPanPosition = gesture.position;
 311     mPanDisplacement = gesture.displacement;
 312     GoToNextImage();
 313   }
 314 }
 315
 316 void CubeTransitionApp::GoToNextImage()
 317 {
 318   mNextTexture = LoadStageFillingTexture( IMAGES[ mIndex ] );
 319   mCurrentEffect.SetTargetTexture( mNextTexture );
 320   mIsImageLoading = false;
 321   mCurrentEffect.StartTransition( mPanPosition, mPanDisplacement );
 322   mCurrentTexture = mNextTexture;
 323 }
 324
 325 bool CubeTransitionApp::OnEffectButtonClicked( Toolkit::Button button )
 326 {
 327   mContent.Remove( mCurrentEffect );
 328   if(mCurrentEffect == mCubeWaveEffect)
 329   {
 330     mCurrentEffect = mCubeCrossEffect;
 331     mTitle.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_CROSS) );
 332   }
 333   else if(mCurrentEffect == mCubeCrossEffect)
 334   {
 335     mCurrentEffect = mCubeFoldEffect;
 336     mTitle.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_FOLD) );
 337   }
 338   else
 339   {
 340     mCurrentEffect = mCubeWaveEffect;
 341     mTitle.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_WAVE) );
 342   }
 343   mContent.Add( mCurrentEffect );
 344
 345   // Set the current image to cube transition effect
 346   // only need to set at beginning or change from another effect
 347   mCurrentEffect.SetCurrentTexture( mCurrentTexture );
 348   return true;
 349 }
 350
 351 bool CubeTransitionApp::OnSildeshowButtonClicked( Toolkit::Button button )
 352 {
 353   mSlideshow = !mSlideshow;
 354   if( mSlideshow )
 355   {
 356     mPanGestureDetector.Detach( mContent );
 357     mSlideshowButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_STOP_ICON );
 358     mSlideshowButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_STOP_ICON_SELECTED );
 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( mContent );
 366     mSlideshowButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON );
 367     mSlideshowButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON_SELECTED );
 368     mViewTimer.Stop();
 369   }
 370   return true;
 371 }
 372
 373 void CubeTransitionApp::OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, Texture texture )
 374 {
 375   if( mSlideshow )
 376   {
 377     mViewTimer.Start();
 378   }
 379 }
 380
 381 bool CubeTransitionApp::OnTimerTick()
 382 {
 383   if(mSlideshow)
 384   {
 385     mIndex = (mIndex + 1)%NUM_IMAGES;
 386     GoToNextImage();
 387   }
 388
 389   //return false to stop the timer
 390   return false;
 391 }
 392
 393 Texture CubeTransitionApp::LoadStageFillingTexture( const char* filepath )
 394 {
 395   ImageDimensions dimensions( Stage::GetCurrent().GetSize().x, Stage::GetCurrent().GetSize().y );
 396   Devel::PixelBuffer pixelBuffer = LoadImageFromFile( filepath, dimensions, FittingMode::SCALE_TO_FILL );
 397   PixelData pixelData = Devel::PixelBuffer::Convert(pixelBuffer);
 398
 399   Texture texture = Texture::New( TextureType::TEXTURE_2D, pixelData.GetPixelFormat(), pixelData.GetWidth(), pixelData.GetHeight() );
 400   texture.Upload( pixelData );
 401   return texture;
 402 }
 403
 404 void CubeTransitionApp::OnKeyEvent(const KeyEvent& event)
 405 {
 406   if(event.state == KeyEvent::Down)
 407   {
 408     if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 409     {
 410       mApplication.Quit();
 411     }
 412   }
 413 }
 414
 415 int DALI_EXPORT_API main( int argc, char **argv )
 416 {
 417   Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
 418   CubeTransitionApp test( application );
 419   application.MainLoop();
 420
 421   return 0;
 422 }