X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=examples%2Fanimated-images%2Fanimated-images-example.cpp;h=1b96ac1fd01565a846cafbf25b4b355f52870aad;hb=4f818cd12c9bf2773d44e5cfdc2fc0a344abf7f5;hp=547bdc231bb80892ce1abe19c12f3efc7afc0b6f;hpb=bf1f42d60babe2ab002e6a9126020965b7abbeb1;p=platform%2Fcore%2Fuifw%2Fdali-demo.git diff --git a/examples/animated-images/animated-images-example.cpp b/examples/animated-images/animated-images-example.cpp index 547bdc2..1b96ac1 100644 --- a/examples/animated-images/animated-images-example.cpp +++ b/examples/animated-images/animated-images-example.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * Copyright (c) 2020 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -16,191 +16,282 @@ */ #include -#include - -#include "shared/utility.h" +#include +#include +#include using namespace Dali; using namespace Dali::Toolkit; namespace { -const char * const PLAY_ICON( DEMO_IMAGE_DIR "icon-play.png" ); +const char * const PLAY_ICON_UNSELECTED( DEMO_IMAGE_DIR "icon-play.png" ); const char * const PLAY_ICON_SELECTED( DEMO_IMAGE_DIR "icon-play-selected.png" ); -const char* const STATIC_GIF_DOG( DEMO_IMAGE_DIR "dog-static.gif" ); -const char* const ANIMATE_GIF_DOG( DEMO_IMAGE_DIR "dog-anim.gif" ); +const unsigned int ANIMATED_IMAGE_COUNT = 2; -const char* const STATIC_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-static.gif" ); -const char* const ANIMATE_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-anim.gif" ); +const char * ANIMATED_IMAGE_URLS[ ANIMATED_IMAGE_COUNT ] = +{ + DEMO_IMAGE_DIR "dog-anim.webp", + DEMO_IMAGE_DIR "dali-logo-anim.gif" +}; -const char* const ANIMATE_PIXEL_AREA( "Animate PixelArea" ); -const char* const ANIMATE_PIXEL_AREA_AND_SCALE( "Animate PixelArea & Scale" ); +const char * ANIMATED_ARRAY_URL_FORMATS[ ANIMATED_IMAGE_COUNT ] = +{ + DEMO_IMAGE_DIR "dog-anim-%03d.png", // Images are named dog-anim-001.png, dog-anim-002.png, etc. + DEMO_IMAGE_DIR "dali-logo-anim-%03d.png" // Images are named dali-logo-anim-001.png, dali-logo-anim-002.png, etc. +}; -const Vector4 DIM_COLOR( 0.85f, 0.85f, 0.85f, 0.85f ); -} +int ANIMATED_ARRAY_NUMBER_OF_FRAMES[ ANIMATED_IMAGE_COUNT ] = +{ + 8, + 15 +}; -/* This example shows how to display a GIF image. - * First a static GIF image is loaded and then when the user presses on the "Play" icon, - * the static image is replaced by an animated one - */ +const char * ANIMATION_RADIO_BUTTON_NAME( "Animation Image" ); +const char * ARRAY_RADIO_BUTTON_NAME( "Array" ); + +/// Structure to specify the layout information for the animated images views. +struct ImageLayoutInfo +{ + Vector3 anchorPoint; + Vector3 parentOrigin; + float yPosition; +}; + +ImageLayoutInfo IMAGE_LAYOUT_INFO[ ANIMATED_IMAGE_COUNT ] = +{ + { AnchorPoint::BOTTOM_CENTER, ParentOrigin::CENTER, -80.0f }, + { AnchorPoint::TOP_CENTER, ParentOrigin::CENTER, 80.0f } +}; + +} // unnamed namespace +/** + * @brief This demonstrates how to display and control Animated Images. + * + * - It displays two animated images, an animated dog and an animated DALi logo. + * - The images are loaded paused, a play button is overlayed on top of the images to play the animated image. + * - Radio buttons at the bottom allow the user to change between Animated Images and a collection of Image Arrays. + */ class AnimatedImageController : public ConnectionTracker { public: + /** + * @brief Constructor. + * @param[in] application A reference to the Application class + */ AnimatedImageController( Application& application ) - : mApplication( application ) + : mApplication( application ), + mImageType( ImageType::ANIMATED_IMAGE ) { // Connect to the Application's Init signal mApplication.InitSignal().Connect( this, &AnimatedImageController::Create ); } - ~AnimatedImageController() +private: + + /** + * @brief The image types supported by the application. + */ + enum class ImageType { - // Nothing to do here; - } + ANIMATED_IMAGE, ///< Displays Animated Image Files. + IMAGE_ARRAY ///< Displays an array of URLs that are used as an animated image. + }; - // The Init signal is received once (only) during the Application lifetime + /** + * @brief Called to initialise the application content. + * @param[in] application A reference to the Application class + */ void Create( Application& application ) { - // Get a handle to the stage - Stage stage = Stage::GetCurrent(); - stage.SetBackgroundColor( Color::WHITE ); - // Tie-in input event handlers: - stage.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent ); - - mActorDog = CreateGifViewWithOverlayPlayButton( STATIC_GIF_DOG ); - mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); - mActorDog.SetY( -100.f ); - stage.Add( mActorDog ); - - mActorLogo = CreateGifViewWithOverlayPlayButton( STATIC_GIF_LOGO ); - mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mActorLogo.SetY( 100.f ); - stage.Add( mActorLogo ); + // Set the window background color and connect to the window's key signal to allow Back and Escape to exit. + Window window = application.GetWindow(); + window.SetBackgroundColor( Color::WHITE ); + window.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent ); + + // Create the animated image-views + CreateAnimatedImageViews(window); + // Create radio buttons to change between Animated images and Image Arrays + CreateRadioButtonLayout(window); + + // Create a tap gesture detector to use to pause the animated images mTapDetector = TapGestureDetector::New(); mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap ); } /** - * Create the gif image view with an overlay play button. + * @brief Creates and lays out radio buttons to allow changing between the different image types. */ - Toolkit::ImageView CreateGifViewWithOverlayPlayButton( const std::string& gifUrl ) + void CreateRadioButtonLayout(Window& window) { - Toolkit::ImageView imageView = Toolkit::ImageView::New( gifUrl ); - imageView.SetParentOrigin( ParentOrigin::CENTER ); - - // Create a push button, and add it as child of the image view - Toolkit::PushButton animateButton = Toolkit::PushButton::New(); - animateButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON ); - animateButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED ); - animateButton.SetParentOrigin( ParentOrigin::CENTER ); - animateButton.SetAnchorPoint( AnchorPoint::CENTER ); - animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked ); - imageView.Add( animateButton ); - - // Apply dim color on the gif view and the play button - imageView.SetColor( DIM_COLOR ); + mAnimatedImageButton = CreateRadioButton( ANIMATION_RADIO_BUTTON_NAME, true ); + mArrayButton = CreateRadioButton( ARRAY_RADIO_BUTTON_NAME, false ); + + Toolkit::TableView radioButtonLayout = Toolkit::TableView::New( 1, 2 ); + radioButtonLayout.SetProperty( Dali::Actor::Property::NAME, "RadioButtonsLayout" ); + radioButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT ); + radioButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + radioButtonLayout.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER ); + radioButtonLayout.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER ); + radioButtonLayout.SetFitHeight( 0 ); + radioButtonLayout.AddChild( mAnimatedImageButton, TableView::CellPosition( 0, 0 ) ); + radioButtonLayout.AddChild( mArrayButton, TableView::CellPosition( 0, 1 ) ); + radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), + HorizontalAlignment::CENTER, + VerticalAlignment::CENTER ); + radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), + HorizontalAlignment::CENTER, + VerticalAlignment::CENTER ); + radioButtonLayout.SetProperty( Actor::Property::POSITION_Y, -10.0f ); + + window.Add( radioButtonLayout ); + } - return imageView; + /** + * @brief Creates a radio button. + * @param[in] name The name of the button + * @param[in] selected Whether the button is selected + * @return The created radio-button + */ + RadioButton CreateRadioButton( const char * const name, bool selected ) + { + RadioButton radioButton = Toolkit::RadioButton::New( name ); + radioButton.SetProperty( Button::Property::SELECTED, selected ); + radioButton.ClickedSignal().Connect( this, &AnimatedImageController::OnRadioButtonClicked ); + return radioButton; } - Toolkit::ImageView CreateGifViewWithAnimatePixelAreaButton( const std::string& gifUrl, WrapMode::Type wrapModeU, WrapMode::Type wrapModeV, const std::string& buttonLabel ) + /** + * @brief Creates the required animated image views. + */ + void CreateAnimatedImageViews(Window window) { - Toolkit::ImageView imageView = Toolkit::ImageView::New(); - imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, - Property::Map().Add( Toolkit::ImageVisual::Property::URL, gifUrl ) - .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, wrapModeU ) - .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, wrapModeV )); - imageView.SetParentOrigin( ParentOrigin::CENTER ); - - // Create a push button, and add it as child of the image view - Toolkit::PushButton animateButton = Toolkit::PushButton::New(); - animateButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel ); - animateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER ); - animateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - animateButton.SetY( 20.f ); + for( unsigned int index = 0; index < ANIMATED_IMAGE_COUNT; ++index ) + { + Control& control = ( index == 0 ) ? mActorDog : mActorLogo; + if( control ) + { + // Remove the previous control from the window, it's resources (and children) will be deleted automatically + control.Unparent(); + } + + // Create and lay out the image view according to the index + control = Toolkit::ImageView::New(); + control.SetProperty( Toolkit::ImageView::Property::IMAGE, SetupViewProperties( mImageType, index ) ); + control.SetProperty( Actor::Property::ANCHOR_POINT, IMAGE_LAYOUT_INFO[ index ].anchorPoint ); + control.SetProperty( Actor::Property::PARENT_ORIGIN, IMAGE_LAYOUT_INFO[ index ].parentOrigin ); + control.SetProperty( Actor::Property::POSITION_Y, IMAGE_LAYOUT_INFO[ index ].yPosition ); - animateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS ); - animateButton.SetProperty( Actor::Property::INHERIT_SCALE, false ); - imageView.Add( animateButton ); + control.SetProperty( Actor::Property::SIZE, Vector2(300, 300) ); - mTapDetector.Attach( animateButton ); - mTapDetector.Attach( imageView ); + // We do not want the animated image playing when it's added to the window. + PauseAnimatedImage( control ); - return imageView; + window.Add( control ); + } } - bool OnPlayButtonClicked( Toolkit::Button button ) + /** + * @brief Plays the passed in animated image. + * @details Also sets up the control so it can be paused when tapped. + * @param[in] control The animated image to play + */ + void PlayAnimatedImage( Control& control ) { - Stage stage = Stage::GetCurrent(); + DevelControl::DoAction( control, + ImageView::Property::IMAGE, + DevelAnimatedImageVisual::Action::PLAY, + Property::Value() ); - // With play button clicked, the static gif is replaced with animated gif. - if( button.GetParent() == mActorDog ) + if( mTapDetector ) { - // remove the static gif view, the play button is also removed as its child. - stage.Remove( mActorDog ); - - mActorDog = CreateGifViewWithAnimatePixelAreaButton( ANIMATE_GIF_DOG, WrapMode::REPEAT, WrapMode::DEFAULT, ANIMATE_PIXEL_AREA_AND_SCALE ); - mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); - mActorDog.SetY( -100.f ); - stage.Add( mActorDog ); + mTapDetector.Attach( control ); } - else // button.GetParent() == mActorLogo - { - // remove the static gif view, the play button is also removed as its child. - stage.Remove( mActorLogo ); + } + + /** + * @brief Pauses the animated image. + * @details Adds a Play button to the control and sets both up so that the animated image can be played again when + * the button is tapped. + * @param[in] control The animated image to pause + */ + void PauseAnimatedImage( Control& control ) + { + DevelControl::DoAction( control, + ImageView::Property::IMAGE, + DevelAnimatedImageVisual::Action::PAUSE, + Property::Value() ); + + // Create a push button, and add it as child of the control + Toolkit::PushButton animateButton = Toolkit::PushButton::New(); + animateButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON_UNSELECTED ); + animateButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED ); + animateButton.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER ); + animateButton.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER ); + animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked ); + control.Add( animateButton ); - mActorLogo = CreateGifViewWithAnimatePixelAreaButton( ANIMATE_GIF_LOGO, WrapMode::DEFAULT, WrapMode::MIRRORED_REPEAT, ANIMATE_PIXEL_AREA ); - mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mActorLogo.SetY( 100.f ); - stage.Add( mActorLogo ); + if( mTapDetector ) + { + mTapDetector.Detach( control ); } + } + + /** + * @brief Called when the play button is clicked. + * @details This method is used to start playing the parent image-view of the clicked button. + * @param[in] button The button that has been clicked + * @return We return true to state that we handled the event + */ + bool OnPlayButtonClicked( Toolkit::Button button ) + { + Control control = ( button.GetParent() == mActorDog ) ? mActorDog : mActorLogo; + PlayAnimatedImage( control ); + + button.Unparent(); + return true; } - void OnTap(Dali::Actor actor, const Dali::TapGesture& tap) + /** + * @brief Called when the animated image views are tapped. + * @details This method is used to pause the tapped animated image view. + * @param[in] actor The actor that's tapped + */ + void OnTap( Dali::Actor actor, const Dali::TapGesture& /* tap */ ) { - if( actor.GetParent() == mActorDog ) // "Animate Pixel Area" button is clicked - { - Animation animation = Animation::New( 3.f ); - animation.AnimateTo( Property( mActorDog, ImageView::Property::PIXEL_AREA ), Vector4( -1.0, 0.0, 3.f, 1.f ), AlphaFunction::SIN ); - animation.AnimateTo( Property( mActorDog, Actor::Property::SCALE_X ), 3.f, AlphaFunction::SIN ); - animation.Play(); - } - else if( actor.GetParent() == mActorLogo ) // "Animate Pixel Area" button is clicked - { - Animation animation = Animation::New( 3.f ); - animation.AnimateTo( Property( mActorLogo, ImageView::Property::PIXEL_AREA ), Vector4( 0.0, 1.0, 1.f, 1.f ), AlphaFunction::SIN ); - animation.Play(); - } - else if( actor == mActorDog ) // stop the animated gif, switch to static view - { - Stage stage = Stage::GetCurrent(); - stage.Remove( mActorDog ); + Control control = ( actor == mActorDog ) ? mActorDog : mActorLogo; + PauseAnimatedImage( control ); + } - mActorDog = CreateGifViewWithOverlayPlayButton( STATIC_GIF_DOG ); - mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); - mActorDog.SetY( -100.f ); - stage.Add( mActorDog ); - } - else if( actor == mActorLogo ) // stop the animated gif, switch to static view - { - Stage stage = Stage::GetCurrent(); - stage.Remove( mActorLogo ); + /** + * @brief Called when a radio button is clicked. + * @details This method is used to change between the different image types. + * @param[in] button The clicked radio-button + * @return We return true to state that we handled the event. + * + */ + bool OnRadioButtonClicked( Toolkit::Button button ) + { + mImageType = ( button == mAnimatedImageButton ) ? ImageType::ANIMATED_IMAGE : ImageType::IMAGE_ARRAY; - mActorLogo = CreateGifViewWithOverlayPlayButton( STATIC_GIF_LOGO ); - mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mActorLogo.SetY( 100.f ); - stage.Add( mActorLogo ); - } + CreateAnimatedImageViews(mApplication.GetWindow()); + return true; } + /** + * @brief Called when any key event is received. + * + * Will use this to quit the application if Back or the Escape key is received + * @param[in] event The key event information + */ void OnKeyEvent(const KeyEvent& event) { - if(event.state == KeyEvent::Down) + if(event.GetState() == KeyEvent::DOWN) { if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) ) { @@ -209,15 +300,82 @@ public: } } + /** + * @brief Sets up the view properties appropriately. + * @param[in] type The Image type + * @param[in] index The index + * @return The set up property value + */ + Property::Value SetupViewProperties( ImageType type, int index ) + { + Property::Map map; + + AddUrl( map, type, index ); + AddCache( map, type, index ); + return Property::Value(map); + } + + /** + * @brief Adds the URL to the given map appropriately. + * @param[in/out] map The map to add the URL details to + * @param[in] type The Image type + * @param[in] index The index + */ + void AddUrl( Property::Map& map, ImageType type, int index ) + { + if( type == ImageType::ANIMATED_IMAGE ) + { + map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( ANIMATED_IMAGE_URLS[ index ] ) ); + } + else + { + Property::Array frameUrls; + for( int i = 1; i <= ANIMATED_ARRAY_NUMBER_OF_FRAMES[ index ]; ++i ) + { + char* buffer; + int len = asprintf( &buffer, ANIMATED_ARRAY_URL_FORMATS[ index ], i ); + if( len > 0 ) + { + std::string frameUrl( buffer ); + free( buffer ); + frameUrls.Add( Property::Value( frameUrl ) ); + } + } + map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) ); + } + } + + /** + * @brief Adds the cache properties, if required to the map. + * @param[in/out] map The map to add the URL details to + * @param[in] type The Image type + * @param[in] index The index + */ + void AddCache( Property::Map& map, ImageType type, int index ) + { + if( type == ImageType::IMAGE_ARRAY ) + { + map + .Add( Toolkit::ImageVisual::Property::BATCH_SIZE, 4 ) + .Add( Toolkit::ImageVisual::Property::CACHE_SIZE, 10 ) + .Add( Toolkit::ImageVisual::Property::FRAME_DELAY, 150 ); + } + } + private: - Application& mApplication; - Toolkit::ImageView mActorDog; - Toolkit::ImageView mActorLogo; - TapGestureDetector mTapDetector; + Application& mApplication; ///< A reference to the application. + + Toolkit::ImageView mActorDog; ///< The current dog image view. + Toolkit::ImageView mActorLogo; ///< The current logo image view. + + Toolkit::RadioButton mAnimatedImageButton; ///< The Animated Image Radio Button. + Toolkit::RadioButton mArrayButton; ///< The Array Radio Button. + + TapGestureDetector mTapDetector; ///< The tap detector. + + ImageType mImageType; ///< The current Image type. }; -// Entry point for Linux & Tizen applications -// int DALI_EXPORT_API main( int argc, char **argv ) { Application application = Application::New( &argc, &argv );