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