From 890553dd1ad0e1a6339e62310d4d26d3c6b1f360 Mon Sep 17 00:00:00 2001 From: Tom Robinson Date: Fri, 16 Sep 2016 14:50:11 +0100 Subject: [PATCH] Fixed dali-demo keyboard focus and updated appearance Change-Id: I771ca7bb8b22d26efabccc35db8aca2956689516 --- demo/dali-table-view.cpp | 77 ++++++++++++++++++++++++++++++++++---- demo/dali-table-view.h | 11 ++++++ resources/images/tile-focus.9.png | Bin 0 -> 2348 bytes 3 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 resources/images/tile-focus.9.png diff --git a/demo/dali-table-view.cpp b/demo/dali-table-view.cpp index 827b665..d3e422e 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 f7785d5..749bf4b 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. diff --git a/resources/images/tile-focus.9.png b/resources/images/tile-focus.9.png new file mode 100644 index 0000000000000000000000000000000000000000..5d7d91f58dc39757908f421f48facc9443800474 GIT binary patch literal 2348 zcmcguc{mhm7k_7AkQroaqA?ZMQkQPF(wG_hOmmZ#%j4Q5OxEmT7WtHtk0g}!4nA&@ z%2Gx$9wAROp^MKpqhyysHO4Z&aqnOEzwe*!AMbO1&pGEgzw^H5dCxgFoE#mHa(m?f z07x>)_ACGp34{O{X^C);sPvZz*>I9;BmldVcMb&HFW3Ws%sAQB>U`Yr;us;!Z5mBn zUd_y9*XiXO^zM(m_HT4L3f-q>e}WxY!7^Pa+joK|dWtHBanbD%276^f zkYR|r)WzoaF^3F~1; zM8N{LN6R#ep0vZIMYF{=_-X{LJNc8m@2nh=U8zcJDEY-&jhypt4&ff;46lBuJAM2y zx21t$x;c3lk~gX~%HnPWo4Rev`N|!?rfC&K=(00`5#rk-ZOH+8~qhH&^^A&3Xs!ufjywu4Z9GEc~447xGb$HiAZJ!bz`Hx>64+M<*> zkSNd^kyBKiH0g>rE_}wk8k_MJ%qe{1uwG7aah}mL=3kq022Kh;O+(1%tuW(kUTDXr z0kFyl_7`8?T^m=JpXe@2nzvYOIVPTW`=FP{w z2y2Ww4s%+Mq2w9^58kEO2x;#(&s^CBknpKoLn;_urR16b6n!>Jn$v3J(FdMS@2GK$ zxn>psV!K<3XvULxnt4E#WR)tUy{+E;2YJSROExJbfj+x^L7=N*m19-svbz334|L`6 z_v$=G;t&riYbW@*X204RpH1i)4BYvOlp-(~IG83{cuz@r9X2X`Y_0s1KCub?q^EN^ zqE#6y$9x#4x$C7vlcRMu@%EAFi&a3l*=H{={ujzmomHv3`Vgyz!@EP^;e}{|Pt)(O zLWxqxujXxY4LJ9_hD(|m3&bxO_Mw_Ye|r5e^h>CMR{Az>PrKO(l^)Lt;46I?s#eu+ zgJ`MKzr#3mUv}RR)jq)*b7XETetl*}9(cdCncB?$v7{g81J(3vMv^3+R0<=8g&$fn z;niRbFc^HWDsyI;X-R)=s3Ya@sgg-MImKB?|BTFxQi2g!7=cSErftlB$eDvFwaY+M zUDslKUi-{X9-8>8&3DJ4aLIX`m7r9E{prlQoa7dn=hl|KghOO2DNUzN?~^pru}BKmV`#yvqjw*@ z{Yj0<;6_E}1#xea@#caKGQM$ntQB!akhajDai>_r9n?-$9Rjn~&Omob;6_Dlu3)$O zHfClCEwc`ZrCTjXcD25_{&OX_FZ%Jz#mbij6m^Xx8_H|_KS#d0CB}VA6u!