examples/animated-images/animated-images-example.cpp

   1 /*
   2  * Copyright (c) 2020 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 <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>
  22
  23 using namespace Dali;
  24 using namespace Dali::Toolkit;
  25
  26 namespace
  27 {
  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");
  30
  31 const unsigned int ANIMATED_IMAGE_COUNT = 2;
  32
  33 const char* ANIMATED_IMAGE_URLS[ANIMATED_IMAGE_COUNT] =
  34   {
  35     DEMO_IMAGE_DIR "dog-anim.webp",
  36     DEMO_IMAGE_DIR "dali-logo-anim.gif"};
  37
  38 const char* ANIMATED_ARRAY_URL_FORMATS[ANIMATED_IMAGE_COUNT] =
  39   {
  40     DEMO_IMAGE_DIR "dog-anim-%03d.png",      // Images are named dog-anim-001.png, dog-anim-002.png, etc.
  41     DEMO_IMAGE_DIR "dali-logo-anim-%03d.png" // Images are named dali-logo-anim-001.png, dali-logo-anim-002.png, etc.
  42 };
  43
  44 int ANIMATED_ARRAY_NUMBER_OF_FRAMES[ANIMATED_IMAGE_COUNT] =
  45   {
  46     8,
  47     15};
  48
  49 const char* ANIMATION_RADIO_BUTTON_NAME("Animation Image");
  50 const char* ARRAY_RADIO_BUTTON_NAME("Array");
  51
  52 /// Structure to specify the layout information for the animated images views.
  53 struct ImageLayoutInfo
  54 {
  55   Vector3 anchorPoint;
  56   Vector3 parentOrigin;
  57   float   yPosition;
  58 };
  59
  60 ImageLayoutInfo IMAGE_LAYOUT_INFO[ANIMATED_IMAGE_COUNT] =
  61   {
  62     {AnchorPoint::BOTTOM_CENTER, ParentOrigin::CENTER, -80.0f},
  63     {AnchorPoint::TOP_CENTER, ParentOrigin::CENTER, 80.0f}};
  64
  65 } // unnamed namespace
  66
  67 /**
  68  * @brief This demonstrates how to display and control Animated Images.
  69  *
  70  * - It displays two animated images, an animated dog and an animated DALi logo.
  71  * - The images are loaded paused, a play button is overlayed on top of the images to play the animated image.
  72  * - Radio buttons at the bottom allow the user to change between Animated Images and a collection of Image Arrays.
  73  */
  74 class AnimatedImageController : public ConnectionTracker
  75 {
  76 public:
  77   /**
  78    * @brief Constructor.
  79    * @param[in]  application  A reference to the Application class
  80    */
  81   AnimatedImageController(Application& application)
  82   : mApplication(application),
  83     mImageType(ImageType::ANIMATED_IMAGE)
  84   {
  85     // Connect to the Application's Init signal
  86     mApplication.InitSignal().Connect(this, &AnimatedImageController::Create);
  87   }
  88
  89 private:
  90   /**
  91    * @brief The image types supported by the application.
  92    */
  93   enum class ImageType
  94   {
  95     ANIMATED_IMAGE, ///< Displays Animated Image Files.
  96     IMAGE_ARRAY     ///< Displays an array of URLs that are used as an animated image.
  97   };
  98
  99   /**
 100    * @brief Called to initialise the application content.
 101    * @param[in]  application  A reference to the Application class
 102    */
 103   void Create(Application& application)
 104   {
 105     // Set the window background color and connect to the window's key signal to allow Back and Escape to exit.
 106     Window window = application.GetWindow();
 107     window.SetBackgroundColor(Color::WHITE);
 108     window.KeyEventSignal().Connect(this, &AnimatedImageController::OnKeyEvent);
 109
 110     // Create the animated image-views
 111     CreateAnimatedImageViews(window);
 112
 113     // Create radio buttons to change between Animated images and Image Arrays
 114     CreateRadioButtonLayout(window);
 115
 116     // Create a tap gesture detector to use to pause the animated images
 117     mTapDetector = TapGestureDetector::New();
 118     mTapDetector.DetectedSignal().Connect(this, &AnimatedImageController::OnTap);
 119   }
 120
 121   /**
 122    * @brief Creates and lays out radio buttons to allow changing between the different image types.
 123    */
 124   void CreateRadioButtonLayout(Window& window)
 125   {
 126     mAnimatedImageButton = CreateRadioButton(ANIMATION_RADIO_BUTTON_NAME, true);
 127     mArrayButton         = CreateRadioButton(ARRAY_RADIO_BUTTON_NAME, false);
 128
 129     Toolkit::TableView radioButtonLayout = Toolkit::TableView::New(1, 2);
 130     radioButtonLayout.SetProperty(Dali::Actor::Property::NAME, "RadioButtonsLayout");
 131     radioButtonLayout.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);
 132     radioButtonLayout.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
 133     radioButtonLayout.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER);
 134     radioButtonLayout.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER);
 135     radioButtonLayout.SetFitHeight(0);
 136     radioButtonLayout.AddChild(mAnimatedImageButton, TableView::CellPosition(0, 0));
 137     radioButtonLayout.AddChild(mArrayButton, TableView::CellPosition(0, 1));
 138     radioButtonLayout.SetCellAlignment(TableView::CellPosition(0, 0),
 139                                        HorizontalAlignment::CENTER,
 140                                        VerticalAlignment::CENTER);
 141     radioButtonLayout.SetCellAlignment(TableView::CellPosition(0, 1),
 142                                        HorizontalAlignment::CENTER,
 143                                        VerticalAlignment::CENTER);
 144     radioButtonLayout.SetProperty(Actor::Property::POSITION_Y, -10.0f);
 145
 146     window.Add(radioButtonLayout);
 147   }
 148
 149   /**
 150    * @brief Creates a radio button.
 151    * @param[in]  name      The name of the button
 152    * @param[in]  selected  Whether the button is selected
 153    * @return The created radio-button
 154    */
 155   RadioButton CreateRadioButton(const char* const name, bool selected)
 156   {
 157     RadioButton radioButton = Toolkit::RadioButton::New(name);
 158     radioButton.SetProperty(Button::Property::SELECTED, selected);
 159     radioButton.ClickedSignal().Connect(this, &AnimatedImageController::OnRadioButtonClicked);
 160     return radioButton;
 161   }
 162
 163   /**
 164    * @brief Creates the required animated image views.
 165    */
 166   void CreateAnimatedImageViews(Window window)
 167   {
 168     for(unsigned int index = 0; index < ANIMATED_IMAGE_COUNT; ++index)
 169     {
 170       Control& control = (index == 0) ? mActorDog : mActorLogo;
 171       if(control)
 172       {
 173         // Remove the previous control from the window, it's resources (and children) will be deleted automatically
 174         control.Unparent();
 175       }
 176
 177       // Create and lay out the image view according to the index
 178       control = Toolkit::ImageView::New();
 179       control.SetProperty(Toolkit::ImageView::Property::IMAGE, SetupViewProperties(mImageType, index));
 180       control.SetProperty(Actor::Property::ANCHOR_POINT, IMAGE_LAYOUT_INFO[index].anchorPoint);
 181       control.SetProperty(Actor::Property::PARENT_ORIGIN, IMAGE_LAYOUT_INFO[index].parentOrigin);
 182       control.SetProperty(Actor::Property::POSITION_Y, IMAGE_LAYOUT_INFO[index].yPosition);
 183
 184       control.SetProperty(Actor::Property::SIZE, Vector2(300, 300));
 185
 186       // We do not want the animated image playing when it's added to the window.
 187       PauseAnimatedImage(control);
 188
 189       window.Add(control);
 190     }
 191   }
 192
 193   /**
 194    * @brief Plays the passed in animated image.
 195    * @details Also sets up the control so it can be paused when tapped.
 196    * @param[in]  control  The animated image to play
 197    */
 198   void PlayAnimatedImage(Control& control)
 199   {
 200     DevelControl::DoAction(control,
 201                            ImageView::Property::IMAGE,
 202                            DevelAnimatedImageVisual::Action::PLAY,
 203                            Property::Value());
 204
 205     if(mTapDetector)
 206     {
 207       mTapDetector.Attach(control);
 208     }
 209   }
 210
 211   /**
 212    * @brief Pauses the animated image.
 213    * @details Adds a Play button to the control and sets both up so that the animated image can be played again when
 214    *          the button is tapped.
 215    * @param[in]  control  The animated image to pause
 216    */
 217   void PauseAnimatedImage(Control& control)
 218   {
 219     DevelControl::DoAction(control,
 220                            ImageView::Property::IMAGE,
 221                            DevelAnimatedImageVisual::Action::PAUSE,
 222                            Property::Value());
 223
 224     // Create a push button, and add it as child of the control
 225     Toolkit::PushButton animateButton = Toolkit::PushButton::New();
 226     animateButton.SetProperty(Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON_UNSELECTED);
 227     animateButton.SetProperty(Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED);
 228     animateButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER);
 229     animateButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER);
 230     animateButton.ClickedSignal().Connect(this, &AnimatedImageController::OnPlayButtonClicked);
 231     control.Add(animateButton);
 232
 233     if(mTapDetector)
 234     {
 235       mTapDetector.Detach(control);
 236     }
 237   }
 238
 239   /**
 240    * @brief Called when the play button is clicked.
 241    * @details This method is used to start playing the parent image-view of the clicked button.
 242    * @param[in]  button  The button that has been clicked
 243    * @return We return true to state that we handled the event
 244    */
 245   bool OnPlayButtonClicked(Toolkit::Button button)
 246   {
 247     Control control = (button.GetParent() == mActorDog) ? mActorDog : mActorLogo;
 248     PlayAnimatedImage(control);
 249
 250     button.Unparent();
 251
 252     return true;
 253   }
 254
 255   /**
 256    * @brief Called when the animated image views are tapped.
 257    * @details This method is used to pause the tapped animated image view.
 258    * @param[in]  actor  The actor that's tapped
 259    */
 260   void OnTap(Dali::Actor actor, const Dali::TapGesture& /* tap */)
 261   {
 262     Control control = (actor == mActorDog) ? mActorDog : mActorLogo;
 263     PauseAnimatedImage(control);
 264   }
 265
 266   /**
 267    * @brief Called when a radio button is clicked.
 268    * @details This method is used to change between the different image types.
 269    * @param[in]  button  The clicked radio-button
 270    * @return We return true to state that we handled the event.
 271    *
 272    */
 273   bool OnRadioButtonClicked(Toolkit::Button button)
 274   {
 275     mImageType = (button == mAnimatedImageButton) ? ImageType::ANIMATED_IMAGE : ImageType::IMAGE_ARRAY;
 276
 277     CreateAnimatedImageViews(mApplication.GetWindow());
 278     return true;
 279   }
 280
 281   /**
 282    * @brief Called when any key event is received.
 283    *
 284    * Will use this to quit the application if Back or the Escape key is received
 285    * @param[in] event The key event information
 286    */
 287   void OnKeyEvent(const KeyEvent& event)
 288   {
 289     if(event.GetState() == KeyEvent::DOWN)
 290     {
 291       if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK))
 292       {
 293         mApplication.Quit();
 294       }
 295     }
 296   }
 297
 298   /**
 299    * @brief Sets up the view properties appropriately.
 300    * @param[in]  type   The Image type
 301    * @param[in]  index  The index
 302    * @return The set up property value
 303    */
 304   Property::Value SetupViewProperties(ImageType type, int index)
 305   {
 306     Property::Map map;
 307
 308     AddUrl(map, type, index);
 309     AddCache(map, type, index);
 310     return Property::Value(map);
 311   }
 312
 313   /**
 314    * @brief Adds the URL to the given map appropriately.
 315    * @param[in/out]  map    The map to add the URL details to
 316    * @param[in]      type   The Image type
 317    * @param[in]      index  The index
 318    */
 319   void AddUrl(Property::Map& map, ImageType type, int index)
 320   {
 321     if(type == ImageType::ANIMATED_IMAGE)
 322     {
 323       map.Add(Toolkit::ImageVisual::Property::URL, Property::Value(ANIMATED_IMAGE_URLS[index]));
 324     }
 325     else
 326     {
 327       Property::Array frameUrls;
 328       for(int i = 1; i <= ANIMATED_ARRAY_NUMBER_OF_FRAMES[index]; ++i)
 329       {
 330         char* buffer;
 331         int   len = asprintf(&buffer, ANIMATED_ARRAY_URL_FORMATS[index], i);
 332         if(len > 0)
 333         {
 334           std::string frameUrl(buffer);
 335           free(buffer);
 336           frameUrls.Add(Property::Value(frameUrl));
 337         }
 338       }
 339       map.Add(Toolkit::ImageVisual::Property::URL, Property::Value(frameUrls));
 340     }
 341   }
 342
 343   /**
 344    * @brief Adds the cache properties, if required to the map.
 345    * @param[in/out]  map    The map to add the URL details to
 346    * @param[in]      type   The Image type
 347    * @param[in]      index  The index
 348    */
 349   void AddCache(Property::Map& map, ImageType type, int index)
 350   {
 351     if(type == ImageType::IMAGE_ARRAY)
 352     {
 353       map
 354         .Add(Toolkit::ImageVisual::Property::BATCH_SIZE, 4)
 355         .Add(Toolkit::ImageVisual::Property::CACHE_SIZE, 10)
 356         .Add(Toolkit::ImageVisual::Property::FRAME_DELAY, 150);
 357     }
 358   }
 359
 360 private:
 361   Application& mApplication; ///< A reference to the application.
 362
 363   Toolkit::ImageView mActorDog;  ///< The current dog image view.
 364   Toolkit::ImageView mActorLogo; ///< The current logo image view.
 365
 366   Toolkit::RadioButton mAnimatedImageButton; ///< The Animated Image Radio Button.
 367   Toolkit::RadioButton mArrayButton;         ///< The Array Radio Button.
 368
 369   TapGestureDetector mTapDetector; ///< The tap detector.
 370
 371   ImageType mImageType; ///< The current Image type.
 372 };
 373
 374 int DALI_EXPORT_API main(int argc, char** argv)
 375 {
 376   Application application = Application::New(&argc, &argv);
 377
 378   AnimatedImageController test(application);
 379
 380   application.MainLoop();
 381
 382   return 0;
 383 }