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

   1 /*
   2  * Copyright (c) 2017 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/buttons/button-devel.h>
  20 #include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
  21 #include "shared/utility.h"
  22
  23 using namespace Dali;
  24 using namespace Dali::Toolkit;
  25
  26 namespace
  27 {
  28 const char * const PLAY_ICON( DEMO_IMAGE_DIR "icon-play.png" );
  29 const char * const PLAY_ICON_SELECTED( DEMO_IMAGE_DIR "icon-play-selected.png" );
  30
  31 const char* const STATIC_GIF_DOG( DEMO_IMAGE_DIR "dog-static.gif" );
  32 const char* const ANIMATE_GIF_DOG( DEMO_IMAGE_DIR "dog-anim.gif" );
  33
  34 const char* const STATIC_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-static.gif" );
  35 const char* const ANIMATE_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-anim.gif" );
  36
  37 const char* const ANIMATE_PIXEL_AREA( "Animate PixelArea" );
  38 const char* const ANIMATE_PIXEL_AREA_AND_SCALE( "Animate PixelArea & Scale" );
  39
  40 const char* const STATIC_IMAGE_ARRAY_DOG( DEMO_IMAGE_DIR "dog-anim-001.png" );
  41 const char* const ANIMATE_IMAGE_ARRAY_DOG( DEMO_IMAGE_DIR "dog-anim-%03d.png" );
  42
  43 const char* const STATIC_IMAGE_ARRAY_LOGO( DEMO_IMAGE_DIR "dali-logo-anim-001.png" );
  44 const char* const ANIMATE_IMAGE_ARRAY_LOGO( DEMO_IMAGE_DIR "dali-logo-anim-%03d.png" );
  45
  46
  47 const Vector4 DIM_COLOR( 0.85f, 0.85f, 0.85f, 0.85f );
  48 }
  49
  50 /* This example shows how to display a GIF image.
  51  * First a static GIF image is loaded and then when the user presses on the "Play" icon,
  52  * the static image is replaced by an animated one
  53  */
  54
  55 class AnimatedImageController : public ConnectionTracker
  56 {
  57 public:
  58   enum ImageType
  59   {
  60     GIF,
  61     IMAGE_ARRAY
  62   };
  63   enum StateType
  64   {
  65     STATIC,
  66     ANIMATED
  67   };
  68
  69   AnimatedImageController( Application& application )
  70   : mApplication( application ),
  71     mImageType(GIF)
  72   {
  73     // Connect to the Application's Init signal
  74     mApplication.InitSignal().Connect( this, &AnimatedImageController::Create );
  75   }
  76
  77   ~AnimatedImageController()
  78   {
  79     // Nothing to do here;
  80   }
  81
  82   // The Init signal is received once (only) during the Application lifetime
  83   void Create( Application& application )
  84   {
  85     // Get a handle to the stage
  86     Stage stage = Stage::GetCurrent();
  87     stage.SetBackgroundColor( Color::WHITE );
  88     // Tie-in input event handlers:
  89     stage.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent );
  90
  91     CreateStaticImageView( 0 );
  92     CreateStaticImageView( 1 );
  93
  94     mGifButton = Toolkit::RadioButton::New("Gif");
  95     mGifButton.SetProperty( Button::Property::SELECTED, true );
  96     mArrayButton = Toolkit::RadioButton::New("Array");
  97     mGifButton.ClickedSignal().Connect( this, &AnimatedImageController::OnTypeButtonClicked );
  98     mArrayButton.ClickedSignal().Connect( this, &AnimatedImageController::OnTypeButtonClicked );
  99
 100     Toolkit::TableView radioButtonLayout = Toolkit::TableView::New(1, 2);
 101     radioButtonLayout.SetName("RadioButtonsLayout");
 102     radioButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
 103     radioButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 104     radioButtonLayout.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 105     radioButtonLayout.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 106     radioButtonLayout.SetFitHeight(0);
 107     radioButtonLayout.AddChild( mGifButton, TableView::CellPosition(0,0) );
 108     radioButtonLayout.AddChild( mArrayButton, TableView::CellPosition(0,1) );
 109     radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
 110     radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
 111     radioButtonLayout.SetY( -10.0f );
 112
 113     stage.Add( radioButtonLayout );
 114
 115     mTapDetector = TapGestureDetector::New();
 116     mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap );
 117   }
 118
 119   void CreateStaticImageView( int index )
 120   {
 121     Actor& actor = (index==0) ? mActorDog : mActorLogo;
 122
 123     Stage stage = Stage::GetCurrent();
 124     if( actor )
 125     {
 126       stage.Remove( actor );
 127     }
 128
 129     Property::Value viewSetup = SetupViewProperties( mImageType, STATIC, index, false );
 130     actor = CreateImageViewWithPlayButton( viewSetup );
 131     SetLayout(actor, index);
 132     stage.Add( actor );
 133   }
 134
 135
 136   void CreateAnimImageView( int index )
 137   {
 138     Actor& actor = (index==0) ? mActorDog : mActorLogo;
 139
 140     Stage stage = Stage::GetCurrent();
 141     if( actor )
 142     {
 143       stage.Remove( actor );
 144     }
 145
 146     const char* label = (index==0) ? ANIMATE_PIXEL_AREA_AND_SCALE : ANIMATE_PIXEL_AREA;
 147
 148     Property::Value viewSetup = SetupViewProperties( mImageType, ANIMATED, index, true );
 149     actor = CreateImageViewWithAnimatePixelAreaButton( viewSetup, label);
 150     SetLayout(actor, index);
 151
 152     stage.Add( actor );
 153   }
 154
 155   void SetLayout( Actor actor, int index )
 156   {
 157     if( index == 0 )
 158     {
 159       actor.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 160       actor.SetY( -80.f );
 161     }
 162     else
 163     {
 164       actor.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 165       actor.SetY( 80.f );
 166     }
 167   }
 168
 169   /**
 170    * Create the gif image view with an overlay play button.
 171    */
 172   Toolkit::ImageView CreateImageViewWithPlayButton( Property::Value& viewSetup )
 173   {
 174     Toolkit::ImageView imageView = Toolkit::ImageView::New();
 175     imageView.SetProperty( ImageView::Property::IMAGE, viewSetup );
 176     imageView.SetParentOrigin( ParentOrigin::CENTER );
 177
 178     // Create a push button, and add it as child of the image view
 179     Toolkit::PushButton animateButton = Toolkit::PushButton::New();
 180     animateButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON );
 181     animateButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED );
 182     animateButton.SetParentOrigin( ParentOrigin::CENTER );
 183     animateButton.SetAnchorPoint( AnchorPoint::CENTER );
 184     animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked );
 185     imageView.Add( animateButton );
 186
 187     // Apply dim color on the gif view and the play button
 188     imageView.SetColor( DIM_COLOR );
 189
 190     return imageView;
 191   }
 192
 193   Toolkit::ImageView CreateImageViewWithAnimatePixelAreaButton( Property::Value& viewSetup, const std::string& buttonLabel )
 194   {
 195     Toolkit::ImageView imageView = Toolkit::ImageView::New();
 196     imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, viewSetup );
 197     imageView.SetParentOrigin( ParentOrigin::CENTER );
 198
 199     // Create a push button, and add it as child of the image view
 200     Toolkit::PushButton animateButton = Toolkit::PushButton::New();
 201     animateButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
 202     animateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 203     animateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 204     animateButton.SetY( 20.f );
 205
 206     animateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 207     animateButton.SetProperty( Actor::Property::INHERIT_SCALE, false );
 208     imageView.Add( animateButton );
 209
 210     mTapDetector.Attach( animateButton );
 211     mTapDetector.Attach( imageView );
 212
 213     return imageView;
 214   }
 215
 216   bool OnPlayButtonClicked( Toolkit::Button button )
 217   {
 218     Stage stage = Stage::GetCurrent();
 219
 220     // With play button clicked, the static gif is replaced with animated gif.
 221     if( button.GetParent() ==  mActorDog )
 222     {
 223       // remove the static gif view, the play button is also removed as its child.
 224       CreateAnimImageView( 0 );
 225     }
 226     else // button.GetParent() ==  mActorLogo
 227     {
 228       // remove the static gif view, the play button is also removed as its child.
 229       CreateAnimImageView( 1 );
 230     }
 231     return true;
 232   }
 233
 234   void OnTap(Dali::Actor actor, const Dali::TapGesture& tap)
 235   {
 236     if( actor.GetParent() ==  mActorDog ) // "Animate Pixel Area" button is clicked
 237     {
 238       Animation animation = Animation::New( 3.f );
 239       animation.AnimateTo( Property( mActorDog, ImageView::Property::PIXEL_AREA ), Vector4( -1.0, 0.0, 3.f, 1.f ), AlphaFunction::SIN );
 240       animation.AnimateTo( Property( mActorDog, Actor::Property::SCALE_X ), 3.f, AlphaFunction::SIN );
 241       animation.Play();
 242     }
 243     else if( actor.GetParent() ==  mActorLogo ) // "Animate Pixel Area" button is clicked
 244     {
 245       Animation animation = Animation::New( 3.f );
 246       animation.AnimateTo( Property( mActorLogo, ImageView::Property::PIXEL_AREA ), Vector4( 0.0, 1.0, 1.f, 1.f ), AlphaFunction::SIN );
 247       animation.Play();
 248     }
 249     else if( actor == mActorDog ) // stop the animated gif, switch to static view
 250     {
 251       CreateStaticImageView( 0 );
 252     }
 253     else if( actor == mActorLogo ) // stop the animated gif, switch to static view
 254     {
 255       CreateStaticImageView( 1 );
 256     }
 257   }
 258
 259   bool OnTypeButtonClicked( Toolkit::Button button )
 260   {
 261     if( button == mGifButton )
 262     {
 263       mImageType = GIF;
 264     }
 265     else
 266     {
 267       mImageType = IMAGE_ARRAY;
 268     }
 269     Stage stage = Stage::GetCurrent();
 270     CreateStaticImageView( 0 );
 271     CreateStaticImageView( 1 );
 272     return true;
 273   }
 274
 275   void OnKeyEvent(const KeyEvent& event)
 276   {
 277     if(event.state == KeyEvent::Down)
 278     {
 279       if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 280       {
 281         mApplication.Quit();
 282       }
 283     }
 284   }
 285
 286   Property::Value SetupViewProperties( ImageType type, StateType state, int index, bool wrap )
 287   {
 288     Property::Map map;
 289
 290     AddUrl( map, type, state, index );
 291     AddWrap( map, wrap && state != 0, index );
 292     AddCache( map, type, index );
 293     return Property::Value(map);
 294   }
 295
 296   void AddUrl( Property::Map& map, ImageType type, StateType state, int index )
 297   {
 298     const char* urls[2][2] =
 299       { { STATIC_GIF_DOG, STATIC_GIF_LOGO },
 300         { ANIMATE_GIF_DOG, ANIMATE_GIF_LOGO }
 301       };
 302     const char* urlFormats[2][2] =
 303       { { STATIC_IMAGE_ARRAY_DOG, STATIC_IMAGE_ARRAY_LOGO } ,
 304         { ANIMATE_IMAGE_ARRAY_DOG, ANIMATE_IMAGE_ARRAY_LOGO } };
 305
 306     int numFrames[2] = { 8, 15 };
 307
 308     if( type == GIF )
 309     {
 310       map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( urls[state][index] ) );
 311     }
 312     else
 313     {
 314       if( state == STATIC )
 315       {
 316         Property::Array frameUrls;
 317         frameUrls.Add(Property::Value( urlFormats[0][index] ));
 318         map.Add( Toolkit::ImageVisual::Property::URL, frameUrls );
 319       }
 320       else
 321       {
 322         Property::Array frameUrls;
 323         for( int i=1; i<= numFrames[index]; ++i )
 324         {
 325           char* buffer;
 326           int len = asprintf( &buffer, urlFormats[1][index], i);
 327           if( len > 0 )
 328           {
 329             std::string frameUrl(buffer);
 330             free(buffer);
 331             frameUrls.Add( Property::Value( frameUrl ) );
 332           }
 333         }
 334         map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) );
 335       }
 336     }
 337   }
 338
 339   void AddWrap( Property::Map& map, bool wrap, int index )
 340   {
 341     WrapMode::Type wrapModes[2][2] = {
 342       { WrapMode::REPEAT, WrapMode::DEFAULT  },
 343       { WrapMode::DEFAULT, WrapMode::MIRRORED_REPEAT } };
 344
 345     if( wrap )
 346     {
 347       map
 348         .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, wrapModes[index][0] )
 349         .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, wrapModes[index][1] );
 350     }
 351     else
 352     {
 353       map
 354         .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, WrapMode::DEFAULT )
 355         .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, WrapMode::DEFAULT );
 356     }
 357   }
 358
 359   void AddCache( Property::Map& map, ImageType type, int index )
 360   {
 361     if( type == IMAGE_ARRAY )
 362     {
 363       map
 364         .Add( Toolkit::DevelImageVisual::Property::BATCH_SIZE, 4 )
 365         .Add( Toolkit::DevelImageVisual::Property::CACHE_SIZE, 10 )
 366         .Add( Toolkit::DevelImageVisual::Property::FRAME_DELAY, 150 );
 367     }
 368   }
 369
 370 private:
 371   Application&  mApplication;
 372   Toolkit::ImageView mActorDog;
 373   Toolkit::ImageView mActorLogo;
 374   Toolkit::RadioButton mGifButton;
 375   Toolkit::RadioButton mArrayButton;
 376   TapGestureDetector mTapDetector;
 377   ImageType mImageType;
 378 };
 379
 380 // Entry point for Linux & Tizen applications
 381 //
 382 int DALI_EXPORT_API main( int argc, char **argv )
 383 {
 384   Application application = Application::New( &argc, &argv );
 385
 386   AnimatedImageController test( application );
 387
 388   application.MainLoop();
 389
 390   return 0;
 391 }