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.
18 #include <dali-toolkit/dali-toolkit.h>
19 #include <dali-toolkit/devel-api/controls/control-devel.h>
20 #include <dali-toolkit/devel-api/controls/table-view/table-view.h>
21 #include <dali-toolkit/devel-api/visuals/animated-image-visual-actions-devel.h>
24 using namespace Dali::Toolkit;
28 const char * const PLAY_ICON_UNSELECTED( DEMO_IMAGE_DIR "icon-play.png" );
29 const char * const PLAY_ICON_SELECTED( DEMO_IMAGE_DIR "icon-play-selected.png" );
31 const unsigned int ANIMATED_IMAGE_COUNT = 2;
33 const char * ANIMATED_IMAGE_URLS[ ANIMATED_IMAGE_COUNT ] =
35 DEMO_IMAGE_DIR "dog-anim.webp",
36 DEMO_IMAGE_DIR "dali-logo-anim.gif"
39 const char * ANIMATED_ARRAY_URL_FORMATS[ ANIMATED_IMAGE_COUNT ] =
41 DEMO_IMAGE_DIR "dog-anim-%03d.png", // Images are named dog-anim-001.png, dog-anim-002.png, etc.
42 DEMO_IMAGE_DIR "dali-logo-anim-%03d.png" // Images are named dali-logo-anim-001.png, dali-logo-anim-002.png, etc.
45 int ANIMATED_ARRAY_NUMBER_OF_FRAMES[ ANIMATED_IMAGE_COUNT ] =
51 const char * ANIMATION_RADIO_BUTTON_NAME( "Animation Image" );
52 const char * ARRAY_RADIO_BUTTON_NAME( "Array" );
54 /// Structure to specify the layout information for the animated images views.
55 struct ImageLayoutInfo
62 ImageLayoutInfo IMAGE_LAYOUT_INFO[ ANIMATED_IMAGE_COUNT ] =
64 { AnchorPoint::BOTTOM_CENTER, ParentOrigin::CENTER, -80.0f },
65 { AnchorPoint::TOP_CENTER, ParentOrigin::CENTER, 80.0f }
68 } // unnamed namespace
71 * @brief This demonstrates how to display and control Animated Images.
73 * - It displays two animated images, an animated dog and an animated DALi logo.
74 * - The images are loaded paused, a play button is overlayed on top of the images to play the animated image.
75 * - Radio buttons at the bottom allow the user to change between Animated Images and a collection of Image Arrays.
77 class AnimatedImageController : public ConnectionTracker
83 * @param[in] application A reference to the Application class
85 AnimatedImageController( Application& application )
86 : mApplication( application ),
87 mImageType( ImageType::ANIMATED_IMAGE )
89 // Connect to the Application's Init signal
90 mApplication.InitSignal().Connect( this, &AnimatedImageController::Create );
96 * @brief The image types supported by the application.
100 ANIMATED_IMAGE, ///< Displays Animated Image Files.
101 IMAGE_ARRAY ///< Displays an array of URLs that are used as an animated image.
105 * @brief Called to initialise the application content.
106 * @param[in] application A reference to the Application class
108 void Create( Application& application )
110 // Set the window background color and connect to the window's key signal to allow Back and Escape to exit.
111 Window window = application.GetWindow();
112 window.SetBackgroundColor( Color::WHITE );
113 window.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent );
115 // Create the animated image-views
116 CreateAnimatedImageViews(window);
118 // Create radio buttons to change between Animated images and Image Arrays
119 CreateRadioButtonLayout(window);
121 // Create a tap gesture detector to use to pause the animated images
122 mTapDetector = TapGestureDetector::New();
123 mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap );
127 * @brief Creates and lays out radio buttons to allow changing between the different image types.
129 void CreateRadioButtonLayout(Window& window)
131 mAnimatedImageButton = CreateRadioButton( ANIMATION_RADIO_BUTTON_NAME, true );
132 mArrayButton = CreateRadioButton( ARRAY_RADIO_BUTTON_NAME, false );
134 Toolkit::TableView radioButtonLayout = Toolkit::TableView::New( 1, 2 );
135 radioButtonLayout.SetProperty( Dali::Actor::Property::NAME, "RadioButtonsLayout" );
136 radioButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
137 radioButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
138 radioButtonLayout.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER );
139 radioButtonLayout.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER );
140 radioButtonLayout.SetFitHeight( 0 );
141 radioButtonLayout.AddChild( mAnimatedImageButton, TableView::CellPosition( 0, 0 ) );
142 radioButtonLayout.AddChild( mArrayButton, TableView::CellPosition( 0, 1 ) );
143 radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ),
144 HorizontalAlignment::CENTER,
145 VerticalAlignment::CENTER );
146 radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ),
147 HorizontalAlignment::CENTER,
148 VerticalAlignment::CENTER );
149 radioButtonLayout.SetProperty( Actor::Property::POSITION_Y, -10.0f );
151 window.Add( radioButtonLayout );
155 * @brief Creates a radio button.
156 * @param[in] name The name of the button
157 * @param[in] selected Whether the button is selected
158 * @return The created radio-button
160 RadioButton CreateRadioButton( const char * const name, bool selected )
162 RadioButton radioButton = Toolkit::RadioButton::New( name );
163 radioButton.SetProperty( Button::Property::SELECTED, selected );
164 radioButton.ClickedSignal().Connect( this, &AnimatedImageController::OnRadioButtonClicked );
169 * @brief Creates the required animated image views.
171 void CreateAnimatedImageViews(Window window)
173 for( unsigned int index = 0; index < ANIMATED_IMAGE_COUNT; ++index )
175 Control& control = ( index == 0 ) ? mActorDog : mActorLogo;
178 // Remove the previous control from the window, it's resources (and children) will be deleted automatically
182 // Create and lay out the image view according to the index
183 control = Toolkit::ImageView::New();
184 control.SetProperty( Toolkit::ImageView::Property::IMAGE, SetupViewProperties( mImageType, index ) );
185 control.SetProperty( Actor::Property::ANCHOR_POINT, IMAGE_LAYOUT_INFO[ index ].anchorPoint );
186 control.SetProperty( Actor::Property::PARENT_ORIGIN, IMAGE_LAYOUT_INFO[ index ].parentOrigin );
187 control.SetProperty( Actor::Property::POSITION_Y, IMAGE_LAYOUT_INFO[ index ].yPosition );
189 control.SetProperty( Actor::Property::SIZE, Vector2(300, 300) );
191 // We do not want the animated image playing when it's added to the window.
192 PauseAnimatedImage( control );
194 window.Add( control );
199 * @brief Plays the passed in animated image.
200 * @details Also sets up the control so it can be paused when tapped.
201 * @param[in] control The animated image to play
203 void PlayAnimatedImage( Control& control )
205 DevelControl::DoAction( control,
206 ImageView::Property::IMAGE,
207 DevelAnimatedImageVisual::Action::PLAY,
212 mTapDetector.Attach( control );
217 * @brief Pauses the animated image.
218 * @details Adds a Play button to the control and sets both up so that the animated image can be played again when
219 * the button is tapped.
220 * @param[in] control The animated image to pause
222 void PauseAnimatedImage( Control& control )
224 DevelControl::DoAction( control,
225 ImageView::Property::IMAGE,
226 DevelAnimatedImageVisual::Action::PAUSE,
229 // Create a push button, and add it as child of the control
230 Toolkit::PushButton animateButton = Toolkit::PushButton::New();
231 animateButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON_UNSELECTED );
232 animateButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED );
233 animateButton.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
234 animateButton.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
235 animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked );
236 control.Add( animateButton );
240 mTapDetector.Detach( control );
245 * @brief Called when the play button is clicked.
246 * @details This method is used to start playing the parent image-view of the clicked button.
247 * @param[in] button The button that has been clicked
248 * @return We return true to state that we handled the event
250 bool OnPlayButtonClicked( Toolkit::Button button )
252 Control control = ( button.GetParent() == mActorDog ) ? mActorDog : mActorLogo;
253 PlayAnimatedImage( control );
261 * @brief Called when the animated image views are tapped.
262 * @details This method is used to pause the tapped animated image view.
263 * @param[in] actor The actor that's tapped
265 void OnTap( Dali::Actor actor, const Dali::TapGesture& /* tap */ )
267 Control control = ( actor == mActorDog ) ? mActorDog : mActorLogo;
268 PauseAnimatedImage( control );
272 * @brief Called when a radio button is clicked.
273 * @details This method is used to change between the different image types.
274 * @param[in] button The clicked radio-button
275 * @return We return true to state that we handled the event.
278 bool OnRadioButtonClicked( Toolkit::Button button )
280 mImageType = ( button == mAnimatedImageButton ) ? ImageType::ANIMATED_IMAGE : ImageType::IMAGE_ARRAY;
282 CreateAnimatedImageViews(mApplication.GetWindow());
287 * @brief Called when any key event is received.
289 * Will use this to quit the application if Back or the Escape key is received
290 * @param[in] event The key event information
292 void OnKeyEvent(const KeyEvent& event)
294 if(event.GetState() == KeyEvent::Down)
296 if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
304 * @brief Sets up the view properties appropriately.
305 * @param[in] type The Image type
306 * @param[in] index The index
307 * @return The set up property value
309 Property::Value SetupViewProperties( ImageType type, int index )
313 AddUrl( map, type, index );
314 AddCache( map, type, index );
315 return Property::Value(map);
319 * @brief Adds the URL to the given map appropriately.
320 * @param[in/out] map The map to add the URL details to
321 * @param[in] type The Image type
322 * @param[in] index The index
324 void AddUrl( Property::Map& map, ImageType type, int index )
326 if( type == ImageType::ANIMATED_IMAGE )
328 map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( ANIMATED_IMAGE_URLS[ index ] ) );
332 Property::Array frameUrls;
333 for( int i = 1; i <= ANIMATED_ARRAY_NUMBER_OF_FRAMES[ index ]; ++i )
336 int len = asprintf( &buffer, ANIMATED_ARRAY_URL_FORMATS[ index ], i );
339 std::string frameUrl( buffer );
341 frameUrls.Add( Property::Value( frameUrl ) );
344 map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) );
349 * @brief Adds the cache properties, if required to the map.
350 * @param[in/out] map The map to add the URL details to
351 * @param[in] type The Image type
352 * @param[in] index The index
354 void AddCache( Property::Map& map, ImageType type, int index )
356 if( type == ImageType::IMAGE_ARRAY )
359 .Add( Toolkit::ImageVisual::Property::BATCH_SIZE, 4 )
360 .Add( Toolkit::ImageVisual::Property::CACHE_SIZE, 10 )
361 .Add( Toolkit::ImageVisual::Property::FRAME_DELAY, 150 );
366 Application& mApplication; ///< A reference to the application.
368 Toolkit::ImageView mActorDog; ///< The current dog image view.
369 Toolkit::ImageView mActorLogo; ///< The current logo image view.
371 Toolkit::RadioButton mAnimatedImageButton; ///< The Animated Image Radio Button.
372 Toolkit::RadioButton mArrayButton; ///< The Array Radio Button.
374 TapGestureDetector mTapDetector; ///< The tap detector.
376 ImageType mImageType; ///< The current Image type.
379 int DALI_EXPORT_API main( int argc, char **argv )
381 Application application = Application::New( &argc, &argv );
383 AnimatedImageController test( application );
385 application.MainLoop();