Fixed dali-demo keyboard focus and updated appearance

Change-Id: I771ca7bb8b22d26efabccc35db8aca2956689516

2 files changed, 81 insertions, 7 deletions

diff --git a/demo/dali-table-view.cpp b/demo/dali-table-view.cpp
index 827b665f..d3e422e3 100644
--- a/demo/dali-table-view.cpp
+++ b/demo/dali-table-view.cpp
@@ -43,6 +43,14 @@ namespace
 const std::string LOGO_PATH( DEMO_IMAGE_DIR "Logo-for-demo.png" );
 const std::string TILE_BACKGROUND(DEMO_IMAGE_DIR "item-background.9.png");
 const std::string TILE_BACKGROUND_ALPHA( DEMO_IMAGE_DIR "demo-tile-texture.9.png" );
+const std::string TILE_FOCUS( DEMO_IMAGE_DIR "tile-focus.9.png" );
+
+// Keyboard focus constants.
+const float KEYBOARD_FOCUS_ANIMATION_DURATION = 1.0f;           ///< The total duration of the keyboard focus animation
+const float KEYBOARD_FOCUS_START_SCALE = 1.05f;                 ///< The starting scale of the focus highlight
+const float KEYBOARD_FOCUS_END_SCALE = 1.18f;                   ///< The end scale of the focus highlight
+const float KEYBOARD_FOCUS_END_ALPHA = 0.7f;                    ///< The end alpha of the focus highlight
+const float KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE = 0.16f;     ///< The duration of the initial fade (from translucent to the end-alpha) as a percentage of the overal animation duration.
 
 const float TILE_LABEL_PADDING = 8.0f;                          ///< Border between edge of tile and the example text
 const float BUTTON_PRESS_ANIMATION_TIME = 0.35f;                ///< Time to perform button scale effect.
@@ -319,6 +327,61 @@ void DaliTableView::Initialize( Application& application )
   KeyboardFocusManager::Get().PreFocusChangeSignal().Connect( this, &DaliTableView::OnKeyboardPreFocusChange );
   KeyboardFocusManager::Get().FocusedActorEnterKeySignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
   AccessibilityManager::Get().FocusedActorActivatedSignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
+
+  mFocusContainer = ImageView::New( TILE_FOCUS );
+  mFocusContainer.SetParentOrigin( ParentOrigin::CENTER );
+  mFocusContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  mFocusContainer.SetInheritScale( false );
+  mFocusContainer.SetColorMode( USE_OWN_COLOR );
+  mFocusContainer.SetName( "focusActor" );
+  mFocusContainer.OnStageSignal().Connect( this, &DaliTableView::OnStageConnect );
+
+  mFocusInner = ImageView::New( TILE_FOCUS );
+  mFocusInner.SetParentOrigin( ParentOrigin::CENTER );
+  mFocusInner.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  mFocusInner.SetInheritScale( false );
+  mFocusInner.SetColorMode( USE_OWN_COLOR );
+  mFocusInner.SetName( "focusActor" );
+  mFocusInner.OnStageSignal().Connect( this, &DaliTableView::OnStageConnect );
+  mFocusContainer.Add( mFocusInner );
+
+  // Setup the keyboard focus highlight.
+  Vector3 startScale( KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE );
+  Vector3 endScale( KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE );
+  mFocusAnimation = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
+  mFocusAnimationInner = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
+
+  mFocusContainer.SetScale( startScale );
+  mFocusInner.SetScale( startScale );
+  mFocusContainer.SetOpacity( 0.0f );
+  mFocusInner.SetOpacity( 0.0f );
+  const float initialFadeDuration = KEYBOARD_FOCUS_ANIMATION_DURATION * KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE;
+
+  mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
+  mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+  mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+
+  mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
+  mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+  mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+
+  // Play the animation on the 1st glow object.
+  mFocusAnimation.SetLooping( true );
+  mFocusAnimation.Play();
+  // Stagger the animation on the 2st glow object half way through.
+  mFocusAnimationInner.SetLooping( true );
+  mFocusAnimationInner.PlayFrom( KEYBOARD_FOCUS_ANIMATION_DURATION / 2.0f );
+
+  KeyboardFocusManager::Get().SetFocusIndicatorActor( mFocusContainer );
+}
+
+void DaliTableView::OnStageConnect( Dali::Actor actor )
+{
+  // If this is one of the keyboard focus actors, place it behind the object it is focusing.
+  if( actor.GetName() == "focusActor" )
+  {
+    actor.GetRendererAt( 0 ).SetProperty( Dali::Renderer::Property::DEPTH_INDEX, -40000 );
+  }
 }
 
 void DaliTableView::ApplyCubeEffectToPages()
@@ -482,12 +545,12 @@ Actor DaliTableView::CreateTile( const std::string& name, const std::string& tit
   content.Add( tileContent );
 
   // Create an ImageView for the 9-patch border around the tile.
-  ImageView image = ImageView::New( TILE_BACKGROUND );
-  image.SetAnchorPoint( AnchorPoint::CENTER );
-  image.SetParentOrigin( ParentOrigin::CENTER );
-  image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-  image.SetOpacity( 0.8f );
-  tileContent.Add( image );
+  ImageView borderImage = ImageView::New( TILE_BACKGROUND );
+  borderImage.SetAnchorPoint( AnchorPoint::CENTER );
+  borderImage.SetParentOrigin( ParentOrigin::CENTER );
+  borderImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  borderImage.SetOpacity( 0.8f );
+  tileContent.Add( borderImage );
 
   TextLabel label = TextLabel::New();
   label.SetAnchorPoint( AnchorPoint::CENTER );
@@ -504,7 +567,7 @@ Actor DaliTableView::CreateTile( const std::string& name, const std::string& tit
   content.Add( label );
 
   // Set the tile to be keyboard focusable
-  content.SetKeyboardFocusable(true);
+  content.SetKeyboardFocusable( true );
 
   // connect to the touch events
   content.TouchSignal().Connect( this, &DaliTableView::OnTilePressed );
diff --git a/demo/dali-table-view.h b/demo/dali-table-view.h
index f7785d5a..749bf4b9 100644
--- a/demo/dali-table-view.h
+++ b/demo/dali-table-view.h
@@ -357,6 +357,12 @@ private: // Application callbacks & implementation
  void OnButtonsPageRelayout( const Dali::Actor& actor );
 
  /**
+  * @brief The is connected to the keyboard focus highlight actor, and called when it is placed on stage.
+  * @param[in] actor The actor that has been placed on stage.
+  */
+ void OnStageConnect( Dali::Actor actor );
+
+ /**
   * @brief Callback called to set up background actors
   *
   * @param[in] actor The actor raising the callback
@@ -378,6 +384,11 @@ private:
   Dali::TapGestureDetector        mLogoTapDetector;          ///< To detect taps on the logo
   Dali::Toolkit::Popup            mVersionPopup;             ///< Displays DALi library version information
 
+  Dali::Toolkit::ImageView        mFocusContainer;           ///< The parent keyboard focus highlight actor
+  Dali::Toolkit::ImageView        mFocusInner;               ///< The child keyboard focus highlight actor
+  Dali::Animation                 mFocusAnimation;           ///< The animation for the parent keyboard focus highlight actor
+  Dali::Animation                 mFocusAnimationInner;      ///< The animation for the child keyboard focus highlight actor
+
   std::vector< Dali::Actor >      mPages;                    ///< List of pages.
   AnimationList                   mBackgroundAnimations;     ///< List of background bubble animations
   ExampleList                     mExampleList;              ///< List of examples.