examples/motion-stretch/motion-stretch-example.cpp

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