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