X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=examples%2Fanimated-images%2Fanimated-images-example.cpp;h=9db95e44c271427c908f46e00a43847a3687994f;hb=1b19fd140ff139b5854a1a62447faf31b175d8f6;hp=b9ec308cf7109803eab6a169248c337607419e69;hpb=bec7666cee2534e16bf080b9b94ed0ccc9a5f6a5;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 b9ec308..9db95e4 100644 --- a/examples/animated-images/animated-images-example.cpp +++ b/examples/animated-images/animated-images-example.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016 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,145 +16,366 @@ */ #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_SELECTED( DEMO_IMAGE_DIR "icon-play-selected.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 Vector4 DIM_COLOR( 0.85f, 0.85f, 0.85f, 0.85f ); -} +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. +}; -/* 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 - */ +int ANIMATED_ARRAY_NUMBER_OF_FRAMES[ANIMATED_IMAGE_COUNT] = + { + 8, + 15}; + +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: - - AnimatedImageController( Application& application ) - : mApplication( application ) + /** + * @brief Constructor. + * @param[in] application A reference to the Application class + */ + AnimatedImageController(Application& application) + : mApplication(application), + mImageType(ImageType::ANIMATED_IMAGE) { // Connect to the Application's Init signal - mApplication.InitSignal().Connect( this, &AnimatedImageController::Create ); + mApplication.InitSignal().Connect(this, &AnimatedImageController::Create); } - ~AnimatedImageController() +private: + /** + * @brief The image types supported by the application. + */ + enum class ImageType + { + ANIMATED_IMAGE, ///< Displays Animated Image Files. + IMAGE_ARRAY ///< Displays an array of URLs that are used as an animated image. + }; + + /** + * @brief Called to initialise the application content. + * @param[in] application A reference to the Application class + */ + void Create(Application& application) { - // Nothing to do here; + // 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); } - // The Init signal is received once (only) during the Application lifetime - void Create( Application& application ) + /** + * @brief Creates and lays out radio buttons to allow changing between the different image types. + */ + void CreateRadioButtonLayout(Window& window) { - // 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 ); + mAnimatedImageButton = CreateRadioButton(ANIMATION_RADIO_BUTTON_NAME, true); + mArrayButton = CreateRadioButton(ARRAY_RADIO_BUTTON_NAME, false); - mActorDog = CreateGifViewWithOverlayButton( STATIC_GIF_DOG ); - mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); - mActorDog.SetY( -100.f ); - stage.Add( mActorDog ); + 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); - mActorLogo = CreateGifViewWithOverlayButton( STATIC_GIF_LOGO ); - mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mActorLogo.SetY( 100.f ); - stage.Add( mActorLogo ); + window.Add(radioButtonLayout); } /** - * Create the gif image view with an overlay play button. + * @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 */ - Toolkit::ImageView CreateGifViewWithOverlayButton( const std::string& gifUrl ) + RadioButton CreateRadioButton(const char* const name, bool selected) { - Toolkit::ImageView imageView = Toolkit::ImageView::New( gifUrl ); - imageView.SetParentOrigin( ParentOrigin::CENTER ); + RadioButton radioButton = Toolkit::RadioButton::New(name); + radioButton.SetProperty(Button::Property::SELECTED, selected); + radioButton.ClickedSignal().Connect(this, &AnimatedImageController::OnRadioButtonClicked); + return radioButton; + } - // Create a push button, and add it as child of the image view - Toolkit::PushButton animateButton = Toolkit::PushButton::New(); - animateButton.SetUnselectedImage( PLAY_ICON ); - animateButton.SetSelectedImage( PLAY_ICON_SELECTED ); - animateButton.SetParentOrigin( ParentOrigin::CENTER ); - animateButton.SetAnchorPoint( AnchorPoint::CENTER ); - animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked ); - imageView.Add( animateButton ); + /** + * @brief Creates the required animated image views. + */ + void CreateAnimatedImageViews(Window window) + { + 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); + + control.SetProperty(Actor::Property::SIZE, Vector2(300, 300)); - // Apply dim color on the gif view and the play button - imageView.SetColor( DIM_COLOR ); + // 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 = Toolkit::ImageView::New( ANIMATE_GIF_DOG ); - mActorDog.SetParentOrigin( ParentOrigin::CENTER ); - mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); - mActorDog.SetY( -100.f ); - stage.Add( mActorDog ); + mTapDetector.Attach(control); } - else // button.GetParent() == 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); + + if(mTapDetector) { - // remove the static gif view, the play button is also removed as its child. - stage.Remove( mActorLogo ); - - mActorLogo = Toolkit::ImageView::New( ANIMATE_GIF_LOGO ); - mActorLogo.SetParentOrigin( ParentOrigin::CENTER ); - mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mActorLogo.SetY( 100.f ); - stage.Add( mActorLogo ); + 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; } + /** + * @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 */) + { + Control control = (actor == mActorDog) ? mActorDog : mActorLogo; + PauseAnimatedImage(control); + } + /** + * @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; + + 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) ) + if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK)) { mApplication.Quit(); } } } + /** + * @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; + 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 ) +int DALI_EXPORT_API main(int argc, char** argv) { - Application application = Application::New( &argc, &argv ); + Application application = Application::New(&argc, &argv); - AnimatedImageController test( application ); + AnimatedImageController test(application); application.MainLoop();