Peter M. Groen / dali-demo

Commit 890553dd1ad0e1a6339e62310d4d26d3c6b1f360

Authored by Tom Robinson
1 parent 8857b035

Fixed dali-demo keyboard focus and updated appearance 

Change-Id: I771ca7bb8b22d26efabccc35db8aca2956689516
Inline Side-by-side
Showing 3 changed files with 81 additions and 7 deletions
demo/dali-table-view.cpp
  View file @890553d
... ... @@ -43,6 +43,14 @@ namespace
43 43 const std::string LOGO_PATH( DEMO_IMAGE_DIR "Logo-for-demo.png" );
44 44 const std::string TILE_BACKGROUND(DEMO_IMAGE_DIR "item-background.9.png");
45 45 const std::string TILE_BACKGROUND_ALPHA( DEMO_IMAGE_DIR "demo-tile-texture.9.png" );
  46 +const std::string TILE_FOCUS( DEMO_IMAGE_DIR "tile-focus.9.png" );
  47 +
  48 +// Keyboard focus constants.
  49 +const float KEYBOARD_FOCUS_ANIMATION_DURATION = 1.0f; ///< The total duration of the keyboard focus animation
  50 +const float KEYBOARD_FOCUS_START_SCALE = 1.05f; ///< The starting scale of the focus highlight
  51 +const float KEYBOARD_FOCUS_END_SCALE = 1.18f; ///< The end scale of the focus highlight
  52 +const float KEYBOARD_FOCUS_END_ALPHA = 0.7f; ///< The end alpha of the focus highlight
  53 +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.
46 54  
47 55 const float TILE_LABEL_PADDING = 8.0f; ///< Border between edge of tile and the example text
48 56 const float BUTTON_PRESS_ANIMATION_TIME = 0.35f; ///< Time to perform button scale effect.
... ... @@ -319,6 +327,61 @@ void DaliTableView::Initialize( Application&amp; application )
319 327 KeyboardFocusManager::Get().PreFocusChangeSignal().Connect( this, &DaliTableView::OnKeyboardPreFocusChange );
320 328 KeyboardFocusManager::Get().FocusedActorEnterKeySignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
321 329 AccessibilityManager::Get().FocusedActorActivatedSignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
  330 +
  331 + mFocusContainer = ImageView::New( TILE_FOCUS );
  332 + mFocusContainer.SetParentOrigin( ParentOrigin::CENTER );
  333 + mFocusContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  334 + mFocusContainer.SetInheritScale( false );
  335 + mFocusContainer.SetColorMode( USE_OWN_COLOR );
  336 + mFocusContainer.SetName( "focusActor" );
  337 + mFocusContainer.OnStageSignal().Connect( this, &DaliTableView::OnStageConnect );
  338 +
  339 + mFocusInner = ImageView::New( TILE_FOCUS );
  340 + mFocusInner.SetParentOrigin( ParentOrigin::CENTER );
  341 + mFocusInner.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  342 + mFocusInner.SetInheritScale( false );
  343 + mFocusInner.SetColorMode( USE_OWN_COLOR );
  344 + mFocusInner.SetName( "focusActor" );
  345 + mFocusInner.OnStageSignal().Connect( this, &DaliTableView::OnStageConnect );
  346 + mFocusContainer.Add( mFocusInner );
  347 +
  348 + // Setup the keyboard focus highlight.
  349 + Vector3 startScale( KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE );
  350 + Vector3 endScale( KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE );
  351 + mFocusAnimation = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
  352 + mFocusAnimationInner = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
  353 +
  354 + mFocusContainer.SetScale( startScale );
  355 + mFocusInner.SetScale( startScale );
  356 + mFocusContainer.SetOpacity( 0.0f );
  357 + mFocusInner.SetOpacity( 0.0f );
  358 + const float initialFadeDuration = KEYBOARD_FOCUS_ANIMATION_DURATION * KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE;
  359 +
  360 + mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
  361 + mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
  362 + mFocusAnimation.AnimateTo( Property( mFocusContainer, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
  363 +
  364 + mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
  365 + mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
  366 + mFocusAnimationInner.AnimateTo( Property( mFocusInner, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
  367 +
  368 + // Play the animation on the 1st glow object.
  369 + mFocusAnimation.SetLooping( true );
  370 + mFocusAnimation.Play();
  371 + // Stagger the animation on the 2st glow object half way through.
  372 + mFocusAnimationInner.SetLooping( true );
  373 + mFocusAnimationInner.PlayFrom( KEYBOARD_FOCUS_ANIMATION_DURATION / 2.0f );
  374 +
  375 + KeyboardFocusManager::Get().SetFocusIndicatorActor( mFocusContainer );
  376 +}
  377 +
  378 +void DaliTableView::OnStageConnect( Dali::Actor actor )
  379 +{
  380 + // If this is one of the keyboard focus actors, place it behind the object it is focusing.
  381 + if( actor.GetName() == "focusActor" )
  382 + {
  383 + actor.GetRendererAt( 0 ).SetProperty( Dali::Renderer::Property::DEPTH_INDEX, -40000 );
  384 + }
322 385 }
323 386  
324 387 void DaliTableView::ApplyCubeEffectToPages()
... ... @@ -482,12 +545,12 @@ Actor DaliTableView::CreateTile( const std::string&amp; name, const std::string&amp; tit
482 545 content.Add( tileContent );
483 546  
484 547 // Create an ImageView for the 9-patch border around the tile.
485   - ImageView image = ImageView::New( TILE_BACKGROUND );
486   - image.SetAnchorPoint( AnchorPoint::CENTER );
487   - image.SetParentOrigin( ParentOrigin::CENTER );
488   - image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
489   - image.SetOpacity( 0.8f );
490   - tileContent.Add( image );
  548 + ImageView borderImage = ImageView::New( TILE_BACKGROUND );
  549 + borderImage.SetAnchorPoint( AnchorPoint::CENTER );
  550 + borderImage.SetParentOrigin( ParentOrigin::CENTER );
  551 + borderImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  552 + borderImage.SetOpacity( 0.8f );
  553 + tileContent.Add( borderImage );
491 554  
492 555 TextLabel label = TextLabel::New();
493 556 label.SetAnchorPoint( AnchorPoint::CENTER );
... ... @@ -504,7 +567,7 @@ Actor DaliTableView::CreateTile( const std::string&amp; name, const std::string&amp; tit
504 567 content.Add( label );
505 568  
506 569 // Set the tile to be keyboard focusable
507   - content.SetKeyboardFocusable(true);
  570 + content.SetKeyboardFocusable( true );
508 571  
509 572 // connect to the touch events
510 573 content.TouchSignal().Connect( this, &DaliTableView::OnTilePressed );
... ...
demo/dali-table-view.h
  View file @890553d
... ... @@ -357,6 +357,12 @@ private: // Application callbacks &amp; implementation
357 357 void OnButtonsPageRelayout( const Dali::Actor& actor );
358 358  
359 359 /**
  360 + * @brief The is connected to the keyboard focus highlight actor, and called when it is placed on stage.
  361 + * @param[in] actor The actor that has been placed on stage.
  362 + */
  363 + void OnStageConnect( Dali::Actor actor );
  364 +
  365 + /**
360 366 * @brief Callback called to set up background actors
361 367 *
362 368 * @param[in] actor The actor raising the callback
... ... @@ -378,6 +384,11 @@ private:
378 384 Dali::TapGestureDetector mLogoTapDetector; ///< To detect taps on the logo
379 385 Dali::Toolkit::Popup mVersionPopup; ///< Displays DALi library version information
380 386  
  387 + Dali::Toolkit::ImageView mFocusContainer; ///< The parent keyboard focus highlight actor
  388 + Dali::Toolkit::ImageView mFocusInner; ///< The child keyboard focus highlight actor
  389 + Dali::Animation mFocusAnimation; ///< The animation for the parent keyboard focus highlight actor
  390 + Dali::Animation mFocusAnimationInner; ///< The animation for the child keyboard focus highlight actor
  391 +
381 392 std::vector< Dali::Actor > mPages; ///< List of pages.
382 393 AnimationList mBackgroundAnimations; ///< List of background bubble animations
383 394 ExampleList mExampleList; ///< List of examples.
... ...
resources/images/tile-focus.9.png 0 → 100644
View file @890553d

2.29 KB