2 * Copyright (c) 2020 Samsung Electronics Co., Ltd.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
22 #include "shared/utility.h"
23 #include "shared/view.h"
25 #include <dali-toolkit/dali-toolkit.h>
26 #include <dali-toolkit/devel-api/controls/buttons/toggle-button.h>
27 #include <dali-toolkit/devel-api/transition-effects/cube-transition-cross-effect.h>
28 #include <dali-toolkit/devel-api/transition-effects/cube-transition-effect.h>
29 #include <dali-toolkit/devel-api/transition-effects/cube-transition-fold-effect.h>
30 #include <dali-toolkit/devel-api/transition-effects/cube-transition-wave-effect.h>
31 #include <dali/dali.h>
35 using Dali::Toolkit::TextLabel;
40 const char* const TOOLBAR_IMAGE(DEMO_IMAGE_DIR "top-bar.png");
41 const char* const APPLICATION_TITLE_WAVE("Cube Transition: Wave");
42 const char* const APPLICATION_TITLE_CROSS("Cube Transition: Cross");
43 const char* const APPLICATION_TITLE_FOLD("Cube Transition: Fold");
44 const char* const EFFECT_WAVE_IMAGE(DEMO_IMAGE_DIR "icon-effect-wave.png");
45 const char* const EFFECT_WAVE_IMAGE_SELECTED(DEMO_IMAGE_DIR "icon-effect-wave-selected.png");
46 const char* const EFFECT_CROSS_IMAGE(DEMO_IMAGE_DIR "icon-effect-cross.png");
47 const char* const EFFECT_CROSS_IMAGE_SELECTED(DEMO_IMAGE_DIR "icon-effect-cross-selected.png");
48 const char* const EFFECT_FOLD_IMAGE(DEMO_IMAGE_DIR "icon-effect-fold.png");
49 const char* const EFFECT_FOLD_IMAGE_SELECTED(DEMO_IMAGE_DIR "icon-effect-fold-selected.png");
50 const char* const SLIDE_SHOW_START_ICON(DEMO_IMAGE_DIR "icon-play.png");
51 const char* const SLIDE_SHOW_START_ICON_SELECTED(DEMO_IMAGE_DIR "icon-play-selected.png");
52 const char* const SLIDE_SHOW_STOP_ICON(DEMO_IMAGE_DIR "icon-stop.png");
53 const char* const SLIDE_SHOW_STOP_ICON_SELECTED(DEMO_IMAGE_DIR "icon-stop-selected.png");
55 const char* IMAGES[] =
57 DEMO_IMAGE_DIR "gallery-large-1.jpg",
58 DEMO_IMAGE_DIR "gallery-large-2.jpg",
59 DEMO_IMAGE_DIR "gallery-large-3.jpg",
60 DEMO_IMAGE_DIR "gallery-large-4.jpg",
61 DEMO_IMAGE_DIR "gallery-large-5.jpg",
62 DEMO_IMAGE_DIR "gallery-large-6.jpg",
63 DEMO_IMAGE_DIR "gallery-large-7.jpg",
64 DEMO_IMAGE_DIR "gallery-large-8.jpg",
65 DEMO_IMAGE_DIR "gallery-large-9.jpg",
66 DEMO_IMAGE_DIR "gallery-large-10.jpg",
67 DEMO_IMAGE_DIR "gallery-large-11.jpg",
68 DEMO_IMAGE_DIR "gallery-large-12.jpg",
69 DEMO_IMAGE_DIR "gallery-large-13.jpg",
70 DEMO_IMAGE_DIR "gallery-large-14.jpg",
71 DEMO_IMAGE_DIR "gallery-large-15.jpg",
72 DEMO_IMAGE_DIR "gallery-large-16.jpg",
73 DEMO_IMAGE_DIR "gallery-large-17.jpg",
74 DEMO_IMAGE_DIR "gallery-large-18.jpg",
75 DEMO_IMAGE_DIR "gallery-large-19.jpg",
76 DEMO_IMAGE_DIR "gallery-large-20.jpg",
77 DEMO_IMAGE_DIR "gallery-large-21.jpg",
79 const int NUM_IMAGES(sizeof(IMAGES) / sizeof(IMAGES[0]));
81 // the number of cubes: NUM_COLUMNS*NUM_ROWS
82 // better choose the numbers that can divide viewAreaSize.x
83 const int NUM_COLUMNS_WAVE(16);
84 const int NUM_COLUMNS_CROSS(8);
85 const int NUM_COLUMNS_FOLD(8);
86 // better choose the numbers that can divide viewAreaSize.y
87 const int NUM_ROWS_WAVE(20);
88 const int NUM_ROWS_CROSS(10);
89 const int NUM_ROWS_FOLD(10);
90 //transition effect duration
91 const float ANIMATION_DURATION_WAVE(1.5f);
92 const float ANIMATION_DURATION_CROSS(1.f);
93 const float ANIMATION_DURATION_FOLD(1.f);
94 //transition effect displacement
95 const float CUBE_DISPLACEMENT_WAVE(70.f);
96 const float CUBE_DISPLACEMENT_CROSS(30.f);
98 // The duration of the current image staying on screen when slideshow is on
99 const int VIEWINGTIME = 2000; // 2 seconds
103 class CubeTransitionApp : public ConnectionTracker
108 * @param application class, stored as reference
110 CubeTransitionApp(Application& application);
112 ~CubeTransitionApp();
116 * This method gets called once the main loop of application is up and running
118 void OnInit(Application& application);
120 * PanGesture callback. This method gets called when the pan gesture is detected.
121 * @param[in] actor The actor receiving the pan gesture.
122 * @param[in] gesture The detected pan gesture.
124 void OnPanGesture(Actor actor, const PanGesture& gesture);
126 * Load the next image and start the transition;
128 void GoToNextImage();
130 * Main key event handler
132 void OnKeyEvent(const KeyEvent& event);
134 * Callback function of effect-switch button
135 * Change the effect when the effect button is clicked
136 * @param[in] button The handle of the clicked button
138 bool OnEffectButtonClicked(Toolkit::Button button);
140 * Callback function of slideshow button
141 * Start or stop the automatical image display when the slideshow button is clicked
142 * @param[in] button The handle of the clicked button
144 bool OnSildeshowButtonClicked(Toolkit::Button button);
146 * Callback function of cube transition completed signal
147 * @param[in] effect The cube effect used for the transition
148 * @param[in] texture The target Texture of the completed transition
150 void OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, Texture image);
152 * Callback function of timer tick
153 * The timer is used to count the image display duration in slideshow,
158 * Loads image, resizes it to the size of window and creates a textue out of it
159 * @param[in] filepath Path to the image file
160 * @return New texture object
162 Texture LoadWindowFillingTexture(const char* filepath);
165 Application& mApplication;
166 Toolkit::Control mView;
167 Toolkit::ToolBar mToolBar;
169 Toolkit::TextLabel mTitle;
173 Texture mCurrentTexture;
174 Texture mNextTexture;
176 bool mIsImageLoading;
178 PanGestureDetector mPanGestureDetector;
180 Toolkit::CubeTransitionEffect mCubeWaveEffect;
181 Toolkit::CubeTransitionEffect mCubeCrossEffect;
182 Toolkit::CubeTransitionEffect mCubeFoldEffect;
183 Toolkit::CubeTransitionEffect mCurrentEffect;
187 Toolkit::PushButton mSlideshowButton;
189 Vector2 mPanPosition;
190 Vector2 mPanDisplacement;
193 CubeTransitionApp::CubeTransitionApp(Application& application)
194 : mApplication(application),
196 mIsImageLoading(false),
199 mApplication.InitSignal().Connect(this, &CubeTransitionApp::OnInit);
202 CubeTransitionApp::~CubeTransitionApp()
207 void CubeTransitionApp::OnInit(Application& application)
209 application.GetWindow().KeyEventSignal().Connect(this, &CubeTransitionApp::OnKeyEvent);
211 // Creates a default view with a default tool bar, the view is added to the window.
212 mContent = DemoHelper::CreateView(application, mView, mToolBar, "", TOOLBAR_IMAGE, "");
213 mContent.SetProperty(Layer::Property::BEHAVIOR, Layer::LAYER_3D);
215 // Add an effect changing toggle button
216 Toolkit::ToggleButton effectChangeToggleButton = Toolkit::ToggleButton::ToggleButton::New();
218 effectChangeToggleButton.SetProperty(Toolkit::ToggleButton::Property::STATE_VISUALS,
219 Property::Array{EFFECT_WAVE_IMAGE,
223 effectChangeToggleButton.ClickedSignal().Connect(this, &CubeTransitionApp::OnEffectButtonClicked);
224 mToolBar.AddControl(effectChangeToggleButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HORIZONTAL_RIGHT, DemoHelper::DEFAULT_MODE_SWITCH_PADDING);
226 // Add title to the tool bar.
227 mTitle = DemoHelper::CreateToolBarLabel(APPLICATION_TITLE_WAVE);
228 mToolBar.AddControl(mTitle, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Toolkit::Alignment::HORIZONTAL_CENTER);
230 //Add an slideshow icon on the right of the title
231 mSlideshowButton = Toolkit::PushButton::New();
232 mSlideshowButton.SetProperty(Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON);
233 mSlideshowButton.SetProperty(Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON_SELECTED);
234 mSlideshowButton.ClickedSignal().Connect(this, &CubeTransitionApp::OnSildeshowButtonClicked);
235 mToolBar.AddControl(mSlideshowButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HORIZONTAL_CENTER, DemoHelper::DEFAULT_PLAY_PADDING);
237 // Set size to window size to avoid seeing a black border on transition
238 mViewSize = application.GetWindow().GetSize();
240 // show the first image
241 mCurrentTexture = LoadWindowFillingTexture(IMAGES[mIndex]);
244 mCubeWaveEffect = Toolkit::CubeTransitionWaveEffect::New(NUM_ROWS_WAVE, NUM_COLUMNS_WAVE);
245 mCubeWaveEffect.SetTransitionDuration(ANIMATION_DURATION_WAVE);
246 mCubeWaveEffect.SetCubeDisplacement(CUBE_DISPLACEMENT_WAVE);
247 mCubeWaveEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
249 mCubeWaveEffect.SetProperty(Actor::Property::SIZE, mViewSize);
250 mCubeWaveEffect.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER);
251 mCubeWaveEffect.SetCurrentTexture(mCurrentTexture);
254 mCubeCrossEffect = Toolkit::CubeTransitionCrossEffect::New(NUM_ROWS_CROSS, NUM_COLUMNS_CROSS);
255 mCubeCrossEffect.SetTransitionDuration(ANIMATION_DURATION_CROSS);
256 mCubeCrossEffect.SetCubeDisplacement(CUBE_DISPLACEMENT_CROSS);
257 mCubeCrossEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
259 mCubeCrossEffect.SetProperty(Actor::Property::SIZE, mViewSize);
260 mCubeCrossEffect.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER);
261 mCubeCrossEffect.SetCurrentTexture(mCurrentTexture);
263 mCubeFoldEffect = Toolkit::CubeTransitionFoldEffect::New(NUM_ROWS_FOLD, NUM_COLUMNS_FOLD);
264 mCubeFoldEffect.SetTransitionDuration(ANIMATION_DURATION_FOLD);
265 mCubeFoldEffect.TransitionCompletedSignal().Connect(this, &CubeTransitionApp::OnTransitionCompleted);
267 mCubeFoldEffect.SetProperty(Actor::Property::SIZE, mViewSize);
268 mCubeFoldEffect.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER);
269 mCubeFoldEffect.SetCurrentTexture(mCurrentTexture);
271 mViewTimer = Timer::New(VIEWINGTIME);
272 mViewTimer.TickSignal().Connect(this, &CubeTransitionApp::OnTimerTick);
274 mCurrentEffect = mCubeWaveEffect;
275 mContent.Add(mCurrentEffect);
277 // use pan gesture to detect the cursor or finger movement
278 mPanGestureDetector = PanGestureDetector::New();
279 mPanGestureDetector.DetectedSignal().Connect(this, &CubeTransitionApp::OnPanGesture);
280 mPanGestureDetector.Attach(mContent);
283 // signal handler, called when the pan gesture is detected
284 void CubeTransitionApp::OnPanGesture(Actor actor, const PanGesture& gesture)
286 // does not response when the transition has not finished
287 if(mIsImageLoading || mCubeWaveEffect.IsTransitioning() || mCubeCrossEffect.IsTransitioning() || mCubeFoldEffect.IsTransitioning() || mSlideshow)
292 if(gesture.GetState() == GestureState::CONTINUING)
294 const Vector2& displacement = gesture.GetDisplacement();
295 if(displacement.x < 0)
297 mIndex = (mIndex + 1) % NUM_IMAGES;
301 mIndex = (mIndex + NUM_IMAGES - 1) % NUM_IMAGES;
304 mPanPosition = gesture.GetPosition();
305 mPanDisplacement = displacement;
310 void CubeTransitionApp::GoToNextImage()
312 mNextTexture = LoadWindowFillingTexture(IMAGES[mIndex]);
313 mCurrentEffect.SetTargetTexture(mNextTexture);
314 mIsImageLoading = false;
315 mCurrentEffect.StartTransition(mPanPosition, mPanDisplacement);
316 mCurrentTexture = mNextTexture;
319 bool CubeTransitionApp::OnEffectButtonClicked(Toolkit::Button button)
321 mContent.Remove(mCurrentEffect);
322 if(mCurrentEffect == mCubeWaveEffect)
324 mCurrentEffect = mCubeCrossEffect;
325 mTitle.SetProperty(TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_CROSS));
327 else if(mCurrentEffect == mCubeCrossEffect)
329 mCurrentEffect = mCubeFoldEffect;
330 mTitle.SetProperty(TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_FOLD));
334 mCurrentEffect = mCubeWaveEffect;
335 mTitle.SetProperty(TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_WAVE));
337 mContent.Add(mCurrentEffect);
339 // Set the current image to cube transition effect
340 // only need to set at beginning or change from another effect
341 mCurrentEffect.SetCurrentTexture(mCurrentTexture);
345 bool CubeTransitionApp::OnSildeshowButtonClicked(Toolkit::Button button)
347 mSlideshow = !mSlideshow;
350 mPanGestureDetector.Detach(mContent);
351 mSlideshowButton.SetProperty(Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_STOP_ICON);
352 mSlideshowButton.SetProperty(Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_STOP_ICON_SELECTED);
353 mPanPosition = Vector2(mViewSize.width, mViewSize.height * 0.5f);
354 mPanDisplacement = Vector2(-10.f, 0.f);
359 mPanGestureDetector.Attach(mContent);
360 mSlideshowButton.SetProperty(Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON);
361 mSlideshowButton.SetProperty(Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, SLIDE_SHOW_START_ICON_SELECTED);
367 void CubeTransitionApp::OnTransitionCompleted(Toolkit::CubeTransitionEffect effect, Texture texture)
375 bool CubeTransitionApp::OnTimerTick()
379 mIndex = (mIndex + 1) % NUM_IMAGES;
383 //return false to stop the timer
387 Texture CubeTransitionApp::LoadWindowFillingTexture(const char* filepath)
389 ImageDimensions dimensions(mApplication.GetWindow().GetSize());
390 Devel::PixelBuffer pixelBuffer = LoadImageFromFile(filepath, dimensions, FittingMode::SCALE_TO_FILL);
391 PixelData pixelData = Devel::PixelBuffer::Convert(pixelBuffer);
393 Texture texture = Texture::New(TextureType::TEXTURE_2D, pixelData.GetPixelFormat(), pixelData.GetWidth(), pixelData.GetHeight());
394 texture.Upload(pixelData);
398 void CubeTransitionApp::OnKeyEvent(const KeyEvent& event)
400 if(event.GetState() == KeyEvent::DOWN)
402 if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK))
409 int DALI_EXPORT_API main(int argc, char** argv)
411 Application application = Application::New(&argc, &argv, DEMO_THEME_PATH);
412 CubeTransitionApp test(application);
413 application.MainLoop();