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
  39 const char * ANIMATED_ARRAY_URL_FORMATS[ ANIMATED_IMAGE_COUNT ] =
  40 {
  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.
  43 };
  44
  45 int ANIMATED_ARRAY_NUMBER_OF_FRAMES[ ANIMATED_IMAGE_COUNT ] =
  46 {
  47   8,
  48   15
  49 };
  50
  51 const char * ANIMATION_RADIO_BUTTON_NAME( "Animation Image" );
  52 const char * ARRAY_RADIO_BUTTON_NAME( "Array" );
  53
  54 /// Structure to specify the layout information for the animated images views.
  55 struct ImageLayoutInfo
  56 {
  57   Vector3 anchorPoint;
  58   Vector3 parentOrigin;
  59   float yPosition;
  60 };
  61
  62 ImageLayoutInfo IMAGE_LAYOUT_INFO[ ANIMATED_IMAGE_COUNT ] =
  63 {
  64   { AnchorPoint::BOTTOM_CENTER, ParentOrigin::CENTER, -80.0f },
  65   { AnchorPoint::TOP_CENTER,    ParentOrigin::CENTER,  80.0f }
  66 };
  67
  68 } // unnamed namespace
  69
  70 /**
  71  * @brief This demonstrates how to display and control Animated Images.
  72  *
  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.
  76  */
  77 class AnimatedImageController : public ConnectionTracker
  78 {
  79 public:
  80
  81   /**
  82    * @brief Constructor.
  83    * @param[in]  application  A reference to the Application class
  84    */
  85   AnimatedImageController( Application& application )
  86   : mApplication( application ),
  87     mImageType( ImageType::ANIMATED_IMAGE )
  88   {
  89     // Connect to the Application's Init signal
  90     mApplication.InitSignal().Connect( this, &AnimatedImageController::Create );
  91   }
  92
  93 private:
  94
  95   /**
  96    * @brief The image types supported by the application.
  97    */
  98   enum class ImageType
  99   {
 100     ANIMATED_IMAGE,          ///< Displays Animated Image Files.
 101     IMAGE_ARRAY              ///< Displays an array of URLs that are used as an animated image.
 102   };
 103
 104   /**
 105    * @brief Called to initialise the application content.
 106    * @param[in]  application  A reference to the Application class
 107    */
 108   void Create( Application& application )
 109   {
 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 );
 114
 115     // Create the animated image-views
 116     CreateAnimatedImageViews(window);
 117
 118     // Create radio buttons to change between Animated images and Image Arrays
 119     CreateRadioButtonLayout(window);
 120
 121     // Create a tap gesture detector to use to pause the animated images
 122     mTapDetector = TapGestureDetector::New();
 123     mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap );
 124   }
 125
 126   /**
 127    * @brief Creates and lays out radio buttons to allow changing between the different image types.
 128    */
 129   void CreateRadioButtonLayout(Window& window)
 130   {
 131     mAnimatedImageButton = CreateRadioButton( ANIMATION_RADIO_BUTTON_NAME, true );
 132     mArrayButton = CreateRadioButton( ARRAY_RADIO_BUTTON_NAME, false );
 133
 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 );
 150
 151     window.Add( radioButtonLayout );
 152   }
 153
 154   /**
 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
 159    */
 160   RadioButton CreateRadioButton( const char * const name, bool selected )
 161   {
 162     RadioButton radioButton = Toolkit::RadioButton::New( name );
 163     radioButton.SetProperty( Button::Property::SELECTED, selected );
 164     radioButton.ClickedSignal().Connect( this, &AnimatedImageController::OnRadioButtonClicked );
 165     return radioButton;
 166   }
 167
 168   /**
 169    * @brief Creates the required animated image views.
 170    */
 171   void CreateAnimatedImageViews(Window window)
 172   {
 173     for( unsigned int index = 0; index < ANIMATED_IMAGE_COUNT; ++index )
 174     {
 175       Control& control = ( index == 0 ) ? mActorDog : mActorLogo;
 176       if( control )
 177       {
 178         // Remove the previous control from the window, it's resources (and children) will be deleted automatically
 179         control.Unparent();
 180       }
 181
 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 );
 188
 189       control.SetProperty( Actor::Property::SIZE, Vector2(300, 300) );
 190
 191       // We do not want the animated image playing when it's added to the window.
 192       PauseAnimatedImage( control );
 193
 194       window.Add( control );
 195     }
 196   }
 197
 198   /**
 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
 202    */
 203   void PlayAnimatedImage( Control& control )
 204   {
 205     DevelControl::DoAction( control,
 206                             ImageView::Property::IMAGE,
 207                             DevelAnimatedImageVisual::Action::PLAY,
 208                             Property::Value() );
 209
 210     if( mTapDetector )
 211     {
 212       mTapDetector.Attach( control );
 213     }
 214   }
 215
 216   /**
 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
 221    */
 222   void PauseAnimatedImage( Control& control )
 223   {
 224     DevelControl::DoAction( control,
 225                             ImageView::Property::IMAGE,
 226                             DevelAnimatedImageVisual::Action::PAUSE,
 227                             Property::Value() );
 228
 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 );
 237
 238     if( mTapDetector )
 239     {
 240       mTapDetector.Detach( control );
 241     }
 242   }
 243
 244   /**
 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
 249    */
 250   bool OnPlayButtonClicked( Toolkit::Button button )
 251   {
 252     Control control = ( button.GetParent() == mActorDog ) ? mActorDog : mActorLogo;
 253     PlayAnimatedImage( control );
 254
 255     button.Unparent();
 256
 257     return true;
 258   }
 259
 260   /**
 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
 264    */
 265   void OnTap( Dali::Actor actor, const Dali::TapGesture& /* tap */ )
 266   {
 267     Control control = ( actor == mActorDog ) ? mActorDog : mActorLogo;
 268     PauseAnimatedImage( control );
 269   }
 270
 271   /**
 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.
 276    *
 277    */
 278   bool OnRadioButtonClicked( Toolkit::Button button )
 279   {
 280     mImageType = ( button == mAnimatedImageButton ) ? ImageType::ANIMATED_IMAGE : ImageType::IMAGE_ARRAY;
 281
 282     CreateAnimatedImageViews(mApplication.GetWindow());
 283     return true;
 284   }
 285
 286   /**
 287    * @brief Called when any key event is received.
 288    *
 289    * Will use this to quit the application if Back or the Escape key is received
 290    * @param[in] event The key event information
 291    */
 292   void OnKeyEvent(const KeyEvent& event)
 293   {
 294     if(event.state == KeyEvent::Down)
 295     {
 296       if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 297       {
 298         mApplication.Quit();
 299       }
 300     }
 301   }
 302
 303   /**
 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
 308    */
 309   Property::Value SetupViewProperties( ImageType type, int index )
 310   {
 311     Property::Map map;
 312
 313     AddUrl( map, type, index );
 314     AddCache( map, type, index );
 315     return Property::Value(map);
 316   }
 317
 318   /**
 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
 323    */
 324   void AddUrl( Property::Map& map, ImageType type, int index )
 325   {
 326     if( type == ImageType::ANIMATED_IMAGE )
 327     {
 328       map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( ANIMATED_IMAGE_URLS[ index ] ) );
 329     }
 330     else
 331     {
 332       Property::Array frameUrls;
 333       for( int i = 1; i <= ANIMATED_ARRAY_NUMBER_OF_FRAMES[ index ]; ++i )
 334       {
 335         char* buffer;
 336         int len = asprintf( &buffer, ANIMATED_ARRAY_URL_FORMATS[ index ], i );
 337         if( len > 0 )
 338         {
 339           std::string frameUrl( buffer );
 340           free( buffer );
 341           frameUrls.Add( Property::Value( frameUrl ) );
 342         }
 343       }
 344       map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) );
 345     }
 346   }
 347
 348   /**
 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
 353    */
 354   void AddCache( Property::Map& map, ImageType type, int index )
 355   {
 356     if( type == ImageType::IMAGE_ARRAY )
 357     {
 358       map
 359         .Add( Toolkit::ImageVisual::Property::BATCH_SIZE, 4 )
 360         .Add( Toolkit::ImageVisual::Property::CACHE_SIZE, 10 )
 361         .Add( Toolkit::ImageVisual::Property::FRAME_DELAY, 150 );
 362     }
 363   }
 364
 365 private:
 366   Application&  mApplication; ///< A reference to the application.
 367
 368   Toolkit::ImageView mActorDog;  ///< The current dog image view.
 369   Toolkit::ImageView mActorLogo; ///< The current logo image view.
 370
 371   Toolkit::RadioButton mAnimatedImageButton;   ///< The Animated Image Radio Button.
 372   Toolkit::RadioButton mArrayButton; ///< The Array Radio Button.
 373
 374   TapGestureDetector mTapDetector; ///< The tap detector.
 375
 376   ImageType mImageType; ///< The current Image type.
 377 };
 378
 379 int DALI_EXPORT_API main( int argc, char **argv )
 380 {
 381   Application application = Application::New( &argc, &argv );
 382
 383   AnimatedImageController test( application );
 384
 385   application.MainLoop();
 386
 387   return 0;
 388 }