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

   1 /*
   2  * Copyright (c) 2019 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 stage background color and connect to the stage's key signal to allow Back and Escape to exit.
 111     Stage stage = Stage::GetCurrent();
 112     stage.SetBackgroundColor( Color::WHITE );
 113     stage.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent );
 114
 115     // Create the animated image-views
 116     CreateAnimatedImageViews();
 117
 118     // Create radio buttons to change between Animated images and Image Arrays
 119     CreateRadioButtonLayout();
 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()
 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     Stage::GetCurrent().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()
 172   {
 173     for( unsigned int index = 0; index < ANIMATED_IMAGE_COUNT; ++index )
 174     {
 175       Stage stage = Stage::GetCurrent();
 176
 177       Control& control = ( index == 0 ) ? mActorDog : mActorLogo;
 178       if( control )
 179       {
 180         // Remove the previous control from the stage, it's resources (and children) will be deleted automatically
 181         control.Unparent();
 182       }
 183
 184       // Create and lay out the image view according to the index
 185       control = Toolkit::ImageView::New();
 186       control.SetProperty( Toolkit::ImageView::Property::IMAGE, SetupViewProperties( mImageType, index ) );
 187       control.SetProperty( Actor::Property::ANCHOR_POINT, IMAGE_LAYOUT_INFO[ index ].anchorPoint );
 188       control.SetProperty( Actor::Property::PARENT_ORIGIN, IMAGE_LAYOUT_INFO[ index ].parentOrigin );
 189       control.SetProperty( Actor::Property::POSITION_Y,  IMAGE_LAYOUT_INFO[ index ].yPosition );
 190
 191       control.SetProperty( Actor::Property::SIZE, Vector2(300, 300) );
 192
 193       // We do not want the animated image playing when it's added to the stage.
 194       PauseAnimatedImage( control );
 195
 196       stage.Add( control );
 197     }
 198   }
 199
 200   /**
 201    * @brief Plays the passed in animated image.
 202    * @details Also sets up the control so it can be paused when tapped.
 203    * @param[in]  control  The animated image to play
 204    */
 205   void PlayAnimatedImage( Control& control )
 206   {
 207     DevelControl::DoAction( control,
 208                             ImageView::Property::IMAGE,
 209                             DevelAnimatedImageVisual::Action::PLAY,
 210                             Property::Value() );
 211
 212     if( mTapDetector )
 213     {
 214       mTapDetector.Attach( control );
 215     }
 216   }
 217
 218   /**
 219    * @brief Pauses the animated image.
 220    * @details Adds a Play button to the control and sets both up so that the animated image can be played again when
 221    *          the button is tapped.
 222    * @param[in]  control  The animated image to pause
 223    */
 224   void PauseAnimatedImage( Control& control )
 225   {
 226     DevelControl::DoAction( control,
 227                             ImageView::Property::IMAGE,
 228                             DevelAnimatedImageVisual::Action::PAUSE,
 229                             Property::Value() );
 230
 231     // Create a push button, and add it as child of the control
 232     Toolkit::PushButton animateButton = Toolkit::PushButton::New();
 233     animateButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON_UNSELECTED );
 234     animateButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED );
 235     animateButton.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 236     animateButton.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 237     animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked );
 238     control.Add( animateButton );
 239
 240     if( mTapDetector )
 241     {
 242       mTapDetector.Detach( control );
 243     }
 244   }
 245
 246   /**
 247    * @brief Called when the play button is clicked.
 248    * @details This method is used to start playing the parent image-view of the clicked button.
 249    * @param[in]  button  The button that has been clicked
 250    * @return We return true to state that we handled the event
 251    */
 252   bool OnPlayButtonClicked( Toolkit::Button button )
 253   {
 254     Control control = ( button.GetParent() == mActorDog ) ? mActorDog : mActorLogo;
 255     PlayAnimatedImage( control );
 256
 257     button.Unparent();
 258
 259     return true;
 260   }
 261
 262   /**
 263    * @brief Called when the animated image views are tapped.
 264    * @details This method is used to pause the tapped animated image view.
 265    * @param[in]  actor  The actor that's tapped
 266    */
 267   void OnTap( Dali::Actor actor, const Dali::TapGesture& /* tap */ )
 268   {
 269     Control control = ( actor == mActorDog ) ? mActorDog : mActorLogo;
 270     PauseAnimatedImage( control );
 271   }
 272
 273   /**
 274    * @brief Called when a radio button is clicked.
 275    * @details This method is used to change between the different image types.
 276    * @param[in]  button  The clicked radio-button
 277    * @return We return true to state that we handled the event.
 278    *
 279    */
 280   bool OnRadioButtonClicked( Toolkit::Button button )
 281   {
 282     mImageType = ( button == mAnimatedImageButton ) ? ImageType::ANIMATED_IMAGE : ImageType::IMAGE_ARRAY;
 283
 284     CreateAnimatedImageViews();
 285     return true;
 286   }
 287
 288   /**
 289    * @brief Called when any key event is received.
 290    *
 291    * Will use this to quit the application if Back or the Escape key is received
 292    * @param[in] event The key event information
 293    */
 294   void OnKeyEvent(const KeyEvent& event)
 295   {
 296     if(event.state == KeyEvent::Down)
 297     {
 298       if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 299       {
 300         mApplication.Quit();
 301       }
 302     }
 303   }
 304
 305   /**
 306    * @brief Sets up the view properties appropriately.
 307    * @param[in]  type   The Image type
 308    * @param[in]  index  The index
 309    * @return The set up property value
 310    */
 311   Property::Value SetupViewProperties( ImageType type, int index )
 312   {
 313     Property::Map map;
 314
 315     AddUrl( map, type, index );
 316     AddCache( map, type, index );
 317     return Property::Value(map);
 318   }
 319
 320   /**
 321    * @brief Adds the URL to the given map appropriately.
 322    * @param[in/out]  map    The map to add the URL details to
 323    * @param[in]      type   The Image type
 324    * @param[in]      index  The index
 325    */
 326   void AddUrl( Property::Map& map, ImageType type, int index )
 327   {
 328     if( type == ImageType::ANIMATED_IMAGE )
 329     {
 330       map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( ANIMATED_IMAGE_URLS[ index ] ) );
 331     }
 332     else
 333     {
 334       Property::Array frameUrls;
 335       for( int i = 1; i <= ANIMATED_ARRAY_NUMBER_OF_FRAMES[ index ]; ++i )
 336       {
 337         char* buffer;
 338         int len = asprintf( &buffer, ANIMATED_ARRAY_URL_FORMATS[ index ], i );
 339         if( len > 0 )
 340         {
 341           std::string frameUrl( buffer );
 342           free( buffer );
 343           frameUrls.Add( Property::Value( frameUrl ) );
 344         }
 345       }
 346       map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) );
 347     }
 348   }
 349
 350   /**
 351    * @brief Adds the cache properties, if required to the map.
 352    * @param[in/out]  map    The map to add the URL details to
 353    * @param[in]      type   The Image type
 354    * @param[in]      index  The index
 355    */
 356   void AddCache( Property::Map& map, ImageType type, int index )
 357   {
 358     if( type == ImageType::IMAGE_ARRAY )
 359     {
 360       map
 361         .Add( Toolkit::ImageVisual::Property::BATCH_SIZE, 4 )
 362         .Add( Toolkit::ImageVisual::Property::CACHE_SIZE, 10 )
 363         .Add( Toolkit::ImageVisual::Property::FRAME_DELAY, 150 );
 364     }
 365   }
 366
 367 private:
 368   Application&  mApplication; ///< A reference to the application.
 369
 370   Toolkit::ImageView mActorDog;  ///< The current dog image view.
 371   Toolkit::ImageView mActorLogo; ///< The current logo image view.
 372
 373   Toolkit::RadioButton mAnimatedImageButton;   ///< The Animated Image Radio Button.
 374   Toolkit::RadioButton mArrayButton; ///< The Array Radio Button.
 375
 376   TapGestureDetector mTapDetector; ///< The tap detector.
 377
 378   ImageType mImageType; ///< The current Image type.
 379 };
 380
 381 int DALI_EXPORT_API main( int argc, char **argv )
 382 {
 383   Application application = Application::New( &argc, &argv );
 384
 385   AnimatedImageController test( application );
 386
 387   application.MainLoop();
 388
 389   return 0;
 390 }