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