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     mMotionStretchImageView.SetProperty(Actor::Property::UPDATE_AREA_HINT, Vector4(0, 0, MOTION_STRETCH_ACTOR_WIDTH + 32, MOTION_STRETCH_ACTOR_HEIGHT + 32));
 186
 187     mContentLayer.Add(mMotionStretchImageView);
 188
 189     // Create shader used for doing motion stretch
 190     Toolkit::SetMotionStretchProperties(mMotionStretchImageView);
 191   }
 192
 193   //////////////////////////////////////////////////////////////
 194   //
 195   // Device Orientation Support
 196   //
 197   //
 198
 199   void OnWindowResized(Window window, Window::WindowSize size)
 200   {
 201     Rotate(size.GetWidth() > size.GetHeight() ? LANDSCAPE : PORTRAIT);
 202   }
 203
 204   void Rotate(DeviceOrientation orientation)
 205   {
 206     // Resize the root actor
 207     const Vector2 targetSize = mApplication.GetWindow().GetSize();
 208
 209     if(mOrientation != orientation)
 210     {
 211       mOrientation = orientation;
 212
 213       // check if actor is on window
 214       if(mView.GetParent())
 215       {
 216         // has parent so we expect it to be on window, start animation
 217         mRotateAnimation = Animation::New(ORIENTATION_DURATION);
 218         mRotateAnimation.AnimateTo(Property(mView, Actor::Property::SIZE_WIDTH), targetSize.width);
 219         mRotateAnimation.AnimateTo(Property(mView, Actor::Property::SIZE_HEIGHT), targetSize.height);
 220         mRotateAnimation.Play();
 221       }
 222       else
 223       {
 224         mView.SetProperty(Actor::Property::SIZE, targetSize);
 225       }
 226     }
 227     else
 228     {
 229       // for first time just set size
 230       mView.SetProperty(Actor::Property::SIZE, targetSize);
 231     }
 232   }
 233
 234   //////////////////////////////////////////////////////////////
 235   //
 236   // Actor Animation
 237   //
 238   //
 239
 240   // move to point on screen that was tapped
 241   void OnTap(Actor actor, const TapGesture& tapGesture)
 242   {
 243     Vector3 destPos;
 244     float   originOffsetX, originOffsetY;
 245
 246     // rotate offset (from top left origin to centre) into actor space
 247     Vector2 windowSize = mApplication.GetWindow().GetSize();
 248     actor.ScreenToLocal(originOffsetX, originOffsetY, windowSize.width * 0.5f, windowSize.height * 0.5f);
 249
 250     // get dest point in local actor space
 251     const Vector2& localPoint = tapGesture.GetLocalPoint();
 252     destPos.x                 = localPoint.x - originOffsetX;
 253     destPos.y                 = localPoint.y - originOffsetY;
 254     destPos.z                 = 0.0f;
 255
 256     float tapMovementAnimDuration = 0.5f;
 257     mActorTapMovementAnimation    = Animation::New(tapMovementAnimDuration);
 258     if(mMotionStretchImageView)
 259     {
 260       mActorTapMovementAnimation.AnimateTo(Property(mMotionStretchImageView, Actor::Property::POSITION), destPos, AlphaFunction::EASE_IN_OUT_SINE, TimePeriod(tapMovementAnimDuration));
 261     }
 262     mActorTapMovementAnimation.SetEndAction(Animation::BAKE);
 263     mActorTapMovementAnimation.Play();
 264
 265     // perform some spinning etc
 266     if(mActorEffectsEnabled)
 267     {
 268       switch(mCurrentActorAnimation)
 269       {
 270         // spin around y
 271         case 0:
 272         {
 273           float animDuration = 1.0f;
 274           mActorAnimation    = Animation::New(animDuration);
 275           mActorAnimation.AnimateBy(Property(mMotionStretchImageView, Actor::Property::ORIENTATION), Quaternion(Radian(Degree(360.0f)), Vector3::YAXIS), AlphaFunction::EASE_IN_OUT);
 276           mActorAnimation.SetEndAction(Animation::BAKE);
 277           mActorAnimation.Play();
 278         }
 279         break;
 280
 281         // spin around z
 282         case 1:
 283         {
 284           float animDuration = 1.0f;
 285           mActorAnimation    = Animation::New(animDuration);
 286           mActorAnimation.AnimateBy(Property(mMotionStretchImageView, Actor::Property::ORIENTATION), Quaternion(Radian(Degree(360.0f)), Vector3::ZAXIS), AlphaFunction::EASE_IN_OUT);
 287           mActorAnimation.SetEndAction(Animation::BAKE);
 288           mActorAnimation.Play();
 289         }
 290         break;
 291
 292         // spin around y and z
 293         case 2:
 294         {
 295           float animDuration = 1.0f;
 296           mActorAnimation    = Animation::New(animDuration);
 297           mActorAnimation.AnimateBy(Property(mMotionStretchImageView, Actor::Property::ORIENTATION), Quaternion(Radian(Degree(360.0f)), Vector3::YAXIS), AlphaFunction::EASE_IN_OUT);
 298           mActorAnimation.AnimateBy(Property(mMotionStretchImageView, Actor::Property::ORIENTATION), Quaternion(Radian(Degree(360.0f)), Vector3::ZAXIS), AlphaFunction::EASE_IN_OUT);
 299           mActorAnimation.SetEndAction(Animation::BAKE);
 300           mActorAnimation.Play();
 301         }
 302         break;
 303
 304         // scale
 305         case 3:
 306         {
 307           float animDuration = 1.0f;
 308           mActorAnimation    = Animation::New(animDuration);
 309           mActorAnimation.AnimateBy(Property(mMotionStretchImageView, Actor::Property::SCALE), Vector3(2.0f, 2.0f, 2.0f), AlphaFunction::BOUNCE, TimePeriod(0.0f, 1.0f));
 310           mActorAnimation.SetEndAction(Animation::BAKE);
 311           mActorAnimation.Play();
 312         }
 313         break;
 314
 315         default:
 316           break;
 317       }
 318
 319       mCurrentActorAnimation++;
 320       if(NUM_ACTOR_ANIMATIONS == mCurrentActorAnimation)
 321       {
 322         mCurrentActorAnimation = 0;
 323       }
 324     }
 325   }
 326
 327   void ToggleActorEffects()
 328   {
 329     if(!mActorEffectsEnabled)
 330     {
 331       mActorEffectsEnabled = true;
 332       mActorEffectsButton.SetProperty(Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, EFFECTS_ON_ICON);
 333       mActorEffectsButton.SetProperty(Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, EFFECTS_ON_ICON_SELECTED);
 334     }
 335     else
 336     {
 337       mActorEffectsEnabled = false;
 338       mActorEffectsButton.SetProperty(Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, EFFECTS_OFF_ICON);
 339       mActorEffectsButton.SetProperty(Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, EFFECTS_OFF_ICON_SELECTED);
 340     }
 341   }
 342
 343   //////////////////////////////////////////////////////////////
 344   //
 345   // Input handlers
 346   //
 347   //
 348
 349   bool OnLayoutButtonClicked(Toolkit::Button button)
 350   {
 351     ChangeImage();
 352     return true;
 353   }
 354
 355   bool OnEffectButtonClicked(Toolkit::Button button)
 356   {
 357     ToggleActorEffects();
 358     return true;
 359   }
 360
 361   /**
 362    * Main key event handler
 363    */
 364   void OnKeyEvent(const KeyEvent& event)
 365   {
 366     if(event.GetState() == KeyEvent::DOWN)
 367     {
 368       if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK))
 369       {
 370         mApplication.Quit();
 371       }
 372     }
 373   }
 374
 375   //////////////////////////////////////////////////////////////
 376   //
 377   // Misc
 378   //
 379   //
 380
 381   void ChangeImage()
 382   {
 383     mCurrentImage++;
 384     if(MOTION_STRETCH_NUM_ACTOR_IMAGES == mCurrentImage)
 385     {
 386       mCurrentImage = 0;
 387     }
 388
 389     mMotionStretchEffect["url"] = MOTION_STRETCH_ACTOR_IMAGES[mCurrentImage];
 390     mMotionStretchImageView.SetProperty(Toolkit::ImageView::Property::IMAGE, mMotionStretchEffect);
 391   }
 392
 393 private:
 394   Application&     mApplication; ///< Application instance
 395   Toolkit::Control mView;
 396   Toolkit::ToolBar mToolBar;
 397   Layer            mContentLayer; ///< Content layer (contains actor for this stretch demo)
 398
 399   PushButton mActorEffectsButton; ///< The actor effects toggling Button.
 400
 401   // Motion stretch
 402   Property::Map mMotionStretchEffect;
 403   ImageView     mMotionStretchImageView;
 404
 405   // animate actor to position where user taps screen
 406   Animation mActorTapMovementAnimation;
 407
 408   // show different animations to demonstrate stretch effect working on an object only movement basis
 409   bool      mActorEffectsEnabled;
 410   Animation mActorAnimation;
 411   int       mCurrentActorAnimation;
 412
 413   // offer a selection of images that user can cycle between
 414   int mCurrentImage;
 415
 416   TapGestureDetector mTapGestureDetector;
 417
 418   DeviceOrientation mOrientation;     ///< Current Device orientation
 419   Animation         mRotateAnimation; ///< Animation for rotating between landscape and portrait.
 420 };
 421
 422 int DALI_EXPORT_API main(int argc, char** argv)
 423 {
 424   Application             app = Application::New(&argc, &argv, DEMO_THEME_PATH);
 425   MotionStretchExampleApp test(app);
 426   app.MainLoop();
 427   return 0;
 428 }