examples/motion-blur/motion-blur-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 #include <sstream>
  19 #include <iomanip>
  20
  21 #include "shared/view.h"
  22 #include <dali/dali.h>
  23 #include <dali-toolkit/dali-toolkit.h>
  24 #include <dali-toolkit/devel-api/shader-effects/motion-blur-effect.h>
  25
  26 using namespace Dali;
  27 using namespace Dali::Toolkit;
  28
  29
  30
  31 namespace // unnamed namespace
  32 {
  33
  34 ////////////////////////////////////////////////////
  35 //
  36 // Demo setup parameters
  37 //
  38
  39 const float MOTION_BLUR_ACTOR_WIDTH = 256;                                          // actor size on screen
  40 const float MOTION_BLUR_ACTOR_HEIGHT = 256;                                         // ""
  41 const unsigned int MOTION_BLUR_NUM_SAMPLES = 8;
  42
  43 const int MOTION_BLUR_NUM_ACTOR_IMAGES = 5;
  44 const char* MOTION_BLUR_ACTOR_IMAGE1( DEMO_IMAGE_DIR "image-with-border-1.jpg" );
  45 const char* MOTION_BLUR_ACTOR_IMAGE2( DEMO_IMAGE_DIR "image-with-border-2.jpg" );
  46 const char* MOTION_BLUR_ACTOR_IMAGE3( DEMO_IMAGE_DIR "image-with-border-3.jpg" );
  47 const char* MOTION_BLUR_ACTOR_IMAGE4( DEMO_IMAGE_DIR "image-with-border-4.jpg" );
  48 const char* MOTION_BLUR_ACTOR_IMAGE5( DEMO_IMAGE_DIR "image-with-border-1.jpg" );
  49
  50 const char* MOTION_BLUR_ACTOR_IMAGES[] = {
  51   MOTION_BLUR_ACTOR_IMAGE1,
  52   MOTION_BLUR_ACTOR_IMAGE2,
  53   MOTION_BLUR_ACTOR_IMAGE3,
  54   MOTION_BLUR_ACTOR_IMAGE4,
  55   MOTION_BLUR_ACTOR_IMAGE5,
  56 };
  57
  58 const int NUM_ACTOR_ANIMATIONS = 4;
  59 const int NUM_CAMERA_ANIMATIONS = 2;
  60
  61
  62 const char* BACKGROUND_IMAGE_PATH = DEMO_IMAGE_DIR "background-default.png";
  63
  64 const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
  65 const char* LAYOUT_IMAGE( DEMO_IMAGE_DIR "icon-change.png" );
  66 const char* LAYOUT_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-change-selected.png" );
  67 const char* APPLICATION_TITLE( "Motion Blur" );
  68 const char* EFFECTS_OFF_ICON( DEMO_IMAGE_DIR "icon-effects-off.png" );
  69 const char* EFFECTS_OFF_ICON_SELECTED( DEMO_IMAGE_DIR "icon-effects-off-selected.png" );
  70 const char* EFFECTS_ON_ICON( DEMO_IMAGE_DIR "icon-effects-on.png" );
  71 const char* EFFECTS_ON_ICON_SELECTED( DEMO_IMAGE_DIR "icon-effects-on-selected.png" );
  72
  73 const float UI_MARGIN = 4.0f;                              ///< Screen Margin for placement of UI buttons
  74
  75 const Vector3 BUTTON_SIZE_CONSTRAINT( 0.24f, 0.09f, 1.0f );
  76 const Vector3 BUTTON_TITLE_LABEL_TAP_HERE_SIZE_CONSTRAINT( 0.55f, 0.06f, 1.0f );
  77 const Vector3 BUTTON_TITLE_LABEL_INSTRUCTIONS_POPUP_SIZE_CONSTRAINT( 1.0f, 1.0f, 1.0f );
  78
  79 // move this button down a bit so it is visible on target and not covered up by toolbar
  80 const float BUTTON_TITLE_LABEL_Y_OFFSET = 0.05f;
  81
  82 const float ORIENTATION_DURATION = 0.5f;                  ///< Time to rotate to new orientation.
  83
  84 /**
  85  * @brief Set an image to image view, scaled-down to no more than the dimensions passed in.
  86  *
  87  * Uses SHRINK_TO_FIT which ensures the resulting image is
  88  * smaller than or equal to the specified dimensions while preserving its original aspect ratio.
  89  */
  90 void SetImageFittedInBox( ImageView& imageView, Property::Map& shaderEffect, const char * const imagePath, int maxWidth, int maxHeight )
  91 {
  92   Property::Map map;
  93   map[Visual::Property::TYPE] = Visual::IMAGE;
  94   map[ImageVisual::Property::URL] = imagePath;
  95   // Load the image nicely scaled-down to fit within the specified max width and height:
  96   map[ImageVisual::Property::DESIRED_WIDTH] = maxWidth;
  97   map[ImageVisual::Property::DESIRED_HEIGHT] = maxHeight;
  98   map[ImageVisual::Property::FITTING_MODE] = FittingMode::SHRINK_TO_FIT;
  99   map[ImageVisual::Property::SAMPLING_MODE] = SamplingMode::BOX_THEN_LINEAR;
 100   map.Merge( shaderEffect );
 101
 102   imageView.SetProperty( ImageView::Property::IMAGE, map );
 103 }
 104
 105 } // unnamed namespace
 106
 107
 108 //
 109 class MotionBlurExampleApp : public ConnectionTracker
 110 {
 111 public:
 112
 113   /**
 114      * DeviceOrientation describes the four different
 115      * orientations the device can be in based on accelerometer reports.
 116      */
 117   enum DeviceOrientation
 118   {
 119     PORTRAIT = 0,
 120     LANDSCAPE = 90,
 121     PORTRAIT_INVERSE = 180,
 122     LANDSCAPE_INVERSE = 270
 123   };
 124
 125   /**
 126    * Constructor
 127    * @param application class, stored as reference
 128    */
 129   MotionBlurExampleApp(Application &app)
 130   : mApplication(app),
 131     mActorEffectsEnabled(false),
 132     mCurrentActorAnimation(0),
 133     mCurrentImage(0),
 134     mOrientation( PORTRAIT )
 135   {
 136     // Connect to the Application's Init signal
 137     app.InitSignal().Connect(this, &MotionBlurExampleApp::OnInit);
 138   }
 139
 140   ~MotionBlurExampleApp()
 141   {
 142     // Nothing to do here; everything gets deleted automatically
 143   }
 144
 145   /**
 146    * This method gets called once the main loop of application is up and running
 147    */
 148   void OnInit(Application& app)
 149   {
 150     // The Init signal is received once (only) during the Application lifetime
 151
 152     Stage::GetCurrent().KeyEventSignal().Connect(this, &MotionBlurExampleApp::OnKeyEvent);
 153
 154
 155     // Creates a default view with a default tool bar.
 156     // The view is added to the stage.
 157     mContentLayer = DemoHelper::CreateView( mApplication,
 158                                             mView,
 159                                             mToolBar,
 160                                             BACKGROUND_IMAGE_PATH,
 161                                             TOOLBAR_IMAGE,
 162                                             APPLICATION_TITLE );
 163
 164     // Ensure the content layer is a square so the touch area works in all orientations
 165     Vector2 stageSize = Stage::GetCurrent().GetSize();
 166     float size = std::max( stageSize.width, stageSize.height );
 167     mContentLayer.SetProperty( Actor::Property::SIZE, Vector2( size, size ) );
 168
 169     //Add an effects icon on the right of the title
 170     mActorEffectsButton = Toolkit::PushButton::New();
 171     mActorEffectsButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, EFFECTS_OFF_ICON );
 172     mActorEffectsButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, EFFECTS_OFF_ICON_SELECTED );
 173     mActorEffectsButton.ClickedSignal().Connect( this, &MotionBlurExampleApp::OnEffectButtonClicked );
 174     mToolBar.AddControl( mActorEffectsButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 175
 176     // Creates a mode button.
 177     // Create a effect toggle button. (right of toolbar)
 178     Toolkit::PushButton layoutButton = Toolkit::PushButton::New();
 179     layoutButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, LAYOUT_IMAGE );
 180     layoutButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, LAYOUT_IMAGE_SELECTED );
 181     layoutButton.ClickedSignal().Connect( this, &MotionBlurExampleApp::OnLayoutButtonClicked);
 182     layoutButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 183     mToolBar.AddControl( layoutButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 184
 185     // Input
 186     mTapGestureDetector = TapGestureDetector::New();
 187     mTapGestureDetector.Attach( mContentLayer );
 188     mTapGestureDetector.DetectedSignal().Connect( this, &MotionBlurExampleApp::OnTap );
 189
 190     Dali::Window winHandle = app.GetWindow();
 191     winHandle.AddAvailableOrientation( Dali::Window::PORTRAIT );
 192     winHandle.AddAvailableOrientation( Dali::Window::LANDSCAPE );
 193     winHandle.AddAvailableOrientation( Dali::Window::PORTRAIT_INVERSE  );
 194     winHandle.AddAvailableOrientation( Dali::Window::LANDSCAPE_INVERSE );
 195     winHandle.ResizedSignal().Connect( this, &MotionBlurExampleApp::OnWindowResized );
 196
 197     // set initial orientation
 198     Rotate( PORTRAIT );
 199
 200     ///////////////////////////////////////////////////////
 201     //
 202     // Motion blurred actor
 203     //
 204
 205     // Scale down actor to fit on very low resolution screens with space to interact:
 206     mMotionBlurActorSize = Size( std::min( stageSize.x * 0.3f, MOTION_BLUR_ACTOR_WIDTH ), std::min( stageSize.y * 0.3f, MOTION_BLUR_ACTOR_HEIGHT ) );
 207     mMotionBlurActorSize = Size( std::min( mMotionBlurActorSize.x, mMotionBlurActorSize.y ), std::min( mMotionBlurActorSize.x, mMotionBlurActorSize.y ) );
 208
 209     mMotionBlurEffect = CreateMotionBlurEffect();
 210     mMotionBlurImageView = ImageView::New();
 211     SetImageFittedInBox( mMotionBlurImageView, mMotionBlurEffect, MOTION_BLUR_ACTOR_IMAGE1, mMotionBlurActorSize.x, mMotionBlurActorSize.y );
 212     mMotionBlurImageView.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 213     mMotionBlurImageView.SetProperty( Actor::Property::SIZE, Vector2(mMotionBlurActorSize.x, mMotionBlurActorSize.y) );
 214
 215     mContentLayer.Add( mMotionBlurImageView );
 216
 217     // Create shader used for doing motion blur
 218     mMotionBlurEffect = CreateMotionBlurEffect();
 219
 220     // set actor shader to the blur one
 221     Toolkit::SetMotionBlurProperties( mMotionBlurImageView, MOTION_BLUR_NUM_SAMPLES );
 222
 223   }
 224
 225   //////////////////////////////////////////////////////////////
 226   //
 227   // Device Orientation Support
 228   //
 229   //
 230
 231   void OnWindowResized( Window::WindowSize size )
 232   {
 233     Rotate( size.GetWidth() > size.GetHeight() ? LANDSCAPE : PORTRAIT );
 234   }
 235
 236   void Rotate( DeviceOrientation orientation )
 237   {
 238     // Resize the root actor
 239     const Vector2 targetSize = Stage::GetCurrent().GetSize();
 240
 241     if( mOrientation != orientation )
 242     {
 243       mOrientation = orientation;
 244
 245       // check if actor is on stage
 246       if( mView.GetParent() )
 247       {
 248         // has parent so we expect it to be on stage, start animation
 249         mRotateAnimation = Animation::New( ORIENTATION_DURATION );
 250         mRotateAnimation.AnimateTo( Property( mView, Actor::Property::SIZE_WIDTH ), targetSize.width );
 251         mRotateAnimation.AnimateTo( Property( mView, Actor::Property::SIZE_HEIGHT ), targetSize.height );
 252         mRotateAnimation.Play();
 253       }
 254       else
 255       {
 256         mView.SetProperty( Actor::Property::SIZE, targetSize );
 257       }
 258     }
 259     else
 260     {
 261       // for first time just set size
 262       mView.SetProperty( Actor::Property::SIZE, targetSize );
 263     }
 264   }
 265
 266
 267   //////////////////////////////////////////////////////////////
 268   //
 269   // Actor Animation
 270   //
 271   //
 272
 273   // move to point on screen that was tapped
 274   void OnTap( Actor actor, const TapGesture& tapGesture )
 275   {
 276     Vector3 destPos;
 277     float originOffsetX, originOffsetY;
 278
 279     // rotate offset (from top left origin to centre) into actor space
 280     Vector2 stageSize = Dali::Stage::GetCurrent().GetSize();
 281     actor.ScreenToLocal(originOffsetX, originOffsetY, stageSize.width * 0.5f, stageSize.height * 0.5f);
 282
 283     // get dest point in local actor space
 284     destPos.x = tapGesture.localPoint.x - originOffsetX;
 285     destPos.y = tapGesture.localPoint.y - originOffsetY;
 286     destPos.z = 0.0f;
 287
 288     float animDuration = 0.5f;
 289     mActorTapMovementAnimation = Animation::New( animDuration );
 290     if ( mMotionBlurImageView )
 291     {
 292       mActorTapMovementAnimation.AnimateTo( Property(mMotionBlurImageView, Actor::Property::POSITION), destPos, AlphaFunction::EASE_IN_OUT_SINE, TimePeriod(animDuration) );
 293     }
 294     mActorTapMovementAnimation.SetEndAction( Animation::Bake );
 295     mActorTapMovementAnimation.Play();
 296
 297
 298     // perform some spinning etc
 299     if(mActorEffectsEnabled)
 300     {
 301       switch(mCurrentActorAnimation)
 302       {
 303         // spin around y
 304         case 0:
 305         {
 306           float animDuration = 1.0f;
 307           mActorAnimation = Animation::New(animDuration);
 308           mActorAnimation.AnimateBy( Property( mMotionBlurImageView, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(360.0f) ), Vector3::YAXIS ), AlphaFunction::EASE_IN_OUT );
 309           mActorAnimation.SetEndAction( Animation::Bake );
 310           mActorAnimation.Play();
 311         }
 312         break;
 313
 314         // spin around z
 315         case 1:
 316         {
 317           float animDuration = 1.0f;
 318           mActorAnimation = Animation::New(animDuration);
 319           mActorAnimation.AnimateBy( Property( mMotionBlurImageView, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(360.0f) ), Vector3::ZAXIS ), AlphaFunction::EASE_IN_OUT );
 320           mActorAnimation.SetEndAction( Animation::Bake );
 321           mActorAnimation.Play();
 322         }
 323         break;
 324
 325         // spin around y and z
 326         case 2:
 327         {
 328           float animDuration = 1.0f;
 329           mActorAnimation = Animation::New(animDuration);
 330           mActorAnimation.AnimateBy( Property( mMotionBlurImageView, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(360.0f) ), Vector3::YAXIS ), AlphaFunction::EASE_IN_OUT );
 331           mActorAnimation.AnimateBy( Property( mMotionBlurImageView, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(360.0f) ), Vector3::ZAXIS ), AlphaFunction::EASE_IN_OUT );
 332           mActorAnimation.SetEndAction( Animation::Bake );
 333           mActorAnimation.Play();
 334         }
 335         break;
 336
 337         // scale
 338         case 3:
 339         {
 340           float animDuration = 1.0f;
 341           mActorAnimation = Animation::New(animDuration);
 342           mActorAnimation.AnimateBy( Property( mMotionBlurImageView, Actor::Property::SCALE ), Vector3(2.0f, 2.0f, 2.0f), AlphaFunction::BOUNCE, TimePeriod( 0.0f, 1.0f ) );
 343           mActorAnimation.SetEndAction( Animation::Bake );
 344           mActorAnimation.Play();
 345         }
 346         break;
 347
 348         default:
 349           break;
 350       }
 351
 352       mCurrentActorAnimation++;
 353       if(NUM_ACTOR_ANIMATIONS == mCurrentActorAnimation)
 354       {
 355         mCurrentActorAnimation = 0;
 356       }
 357     }
 358   }
 359
 360   void ToggleActorEffects()
 361   {
 362     if(!mActorEffectsEnabled)
 363     {
 364       mActorEffectsEnabled = true;
 365       mActorEffectsButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, EFFECTS_ON_ICON );
 366       mActorEffectsButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, EFFECTS_ON_ICON_SELECTED );
 367     }
 368     else
 369     {
 370       mActorEffectsEnabled = false;
 371       mActorEffectsButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, EFFECTS_OFF_ICON );
 372       mActorEffectsButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, EFFECTS_OFF_ICON_SELECTED );
 373     }
 374   }
 375
 376   //////////////////////////////////////////////////////////////
 377   //
 378   // Input handlers
 379   //
 380   //
 381
 382   bool OnLayoutButtonClicked( Toolkit::Button button )
 383   {
 384     ChangeImage();
 385     return true;
 386   }
 387
 388   bool OnEffectButtonClicked( Toolkit::Button button )
 389   {
 390     ToggleActorEffects();
 391     return true;
 392   }
 393
 394   /**
 395    * Main key event handler
 396    */
 397   void OnKeyEvent(const KeyEvent& event)
 398   {
 399     if(event.state == KeyEvent::Down)
 400     {
 401       if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 402       {
 403         mApplication.Quit();
 404       }
 405     }
 406   }
 407
 408   //////////////////////////////////////////////////////////////
 409   //
 410   // Misc
 411   //
 412   //
 413
 414
 415   void ChangeImage()
 416   {
 417     mCurrentImage++;
 418     if(MOTION_BLUR_NUM_ACTOR_IMAGES == mCurrentImage)
 419     {
 420       mCurrentImage = 0;
 421     }
 422     SetImageFittedInBox( mMotionBlurImageView, mMotionBlurEffect, MOTION_BLUR_ACTOR_IMAGES[mCurrentImage], mMotionBlurActorSize.x, mMotionBlurActorSize.y );
 423
 424   }
 425
 426
 427 private:
 428   Application&               mApplication;            ///< Application instance
 429   Toolkit::Control           mView;
 430   Toolkit::ToolBar           mToolBar;
 431
 432   Layer                      mContentLayer;           ///< Content layer (contains actor for this blur demo)
 433
 434   PushButton                 mActorEffectsButton;     ///< The actor effects toggling Button.
 435
 436   // Motion blur
 437   Property::Map mMotionBlurEffect;
 438   ImageView mMotionBlurImageView;
 439   Size mMotionBlurActorSize;
 440
 441   // animate actor to position where user taps screen
 442   Animation mActorTapMovementAnimation;
 443
 444   // show different animations to demonstrate blur effect working on an object only movement basis
 445   bool mActorEffectsEnabled;
 446   Animation mActorAnimation;
 447   int mCurrentActorAnimation;
 448
 449   // offer a selection of images that user can cycle between
 450   int mCurrentImage;
 451
 452   TapGestureDetector mTapGestureDetector;
 453
 454   DeviceOrientation mOrientation;               ///< Current Device orientation
 455   Animation mRotateAnimation;                   ///< Animation for rotating between landscape and portrait.
 456 };
 457
 458 int DALI_EXPORT_API main(int argc, char **argv)
 459 {
 460   Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
 461   MotionBlurExampleApp test(app);
 462   app.MainLoop();
 463   return 0;
 464 }