Peter M. Groen / dali-demo

Commit 9cfb6b893585d671921fac5ab1130037e31ca3a4

Authored by Tom Robinson
1 parent bf96ef03

Added bubble effect back in dali-demo (+visual changes) 

Change-Id: I1a32d8ce89ea465f4eefee9ce117d0c46b621f79
Inline Side-by-side
Showing 5 changed files with 460 additions and 99 deletions
demo/dali-table-view.cpp
  View file @9cfb6b8
... ... @@ -25,9 +25,12 @@
25 25 #include <dali/devel-api/images/distance-field.h>
26 26 #include <dali-toolkit/devel-api/shader-effects/alpha-discard-effect.h>
27 27 #include <dali-toolkit/devel-api/shader-effects/distance-field-effect.h>
  28 +#include <dali-toolkit/dali-toolkit.h>
  29 +#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
28 30  
29 31 // INTERNAL INCLUDES
30 32 #include "shared/view.h"
  33 +#include "shared/utility.h"
31 34  
32 35 using namespace Dali;
33 36 using namespace Dali::Toolkit;
... ... @@ -38,14 +41,11 @@ namespace
38 41 {
39 42  
40 43 const std::string LOGO_PATH( DEMO_IMAGE_DIR "Logo-for-demo.png" );
41   -const std::string DEFAULT_TOOLBAR_IMAGE_PATH( DEMO_IMAGE_DIR "top-bar.png" );
42 44 const std::string TILE_BACKGROUND(DEMO_IMAGE_DIR "item-background.9.png");
43   -const std::string TILE_BACKGROUND_ALPHA(DEMO_IMAGE_DIR "item-background-alpha.9.png");
  45 +const std::string TILE_BACKGROUND_ALPHA( DEMO_IMAGE_DIR "demo-tile-texture.9.png" );
44 46  
45   -const char * const DEFAULT_TOOLBAR_TEXT( "TOUCH TO LAUNCH EXAMPLE" );
46   -
47   -const Vector4 TILE_COLOR( 0.5f, 0.6f, 0.8f, 0.23f ); ///< Color (including alpha) of tile contents.
48   -const float BUTTON_PRESS_ANIMATION_TIME = 0.25f; ///< Time to perform button scale effect.
  47 +const float TILE_LABEL_PADDING = 8.0f; ///< Border between edge of tile and the example text
  48 +const float BUTTON_PRESS_ANIMATION_TIME = 0.35f; ///< Time to perform button scale effect.
49 49 const float ROTATE_ANIMATION_TIME = 0.5f; ///< Time to perform rotate effect.
50 50 const int MAX_PAGES = 256; ///< Maximum pages (arbitrary safety limit)
51 51 const int EXAMPLES_PER_ROW = 3;
... ... @@ -53,8 +53,62 @@ const int ROWS_PER_PAGE = 3;
53 53 const int EXAMPLES_PER_PAGE = EXAMPLES_PER_ROW * ROWS_PER_PAGE;
54 54 const float LOGO_MARGIN_RATIO = 0.1f / 0.3f;
55 55 const float BOTTOM_PADDING_RATIO = 0.4f / 0.9f;
56   -const Vector3 SCROLLVIEW_RELATIVE_SIZE(0.9f, 1.0f, 0.8f ); ///< ScrollView's relative size to its parent
  56 +const Vector3 SCROLLVIEW_RELATIVE_SIZE(0.9f, 1.0f, 0.8f ); ///< ScrollView's relative size to its parent
57 57 const Vector3 TABLE_RELATIVE_SIZE(0.95f, 0.9f, 0.8f ); ///< TableView's relative size to the entire stage. The Y value means sum of the logo and table relative heights.
  58 +const float STENCIL_RELATIVE_SIZE = 1.0f;
  59 +
  60 +const float EFFECT_SNAP_DURATION = 0.66f; ///< Scroll Snap Duration for Effects
  61 +const float EFFECT_FLICK_DURATION = 0.5f; ///< Scroll Flick Duration for Effects
  62 +const Vector3 ANGLE_CUBE_PAGE_ROTATE(Math::PI * 0.5f, Math::PI * 0.5f, 0.0f);
  63 +const Vector4 TILE_COLOR( 0.4f, 0.6f, 0.9f, 0.6f );
  64 +
  65 +const Vector4 BUBBLE_COLOR[] =
  66 +{
  67 + Vector4( 0.3255f, 0.3412f, 0.6353f, 0.32f ),
  68 + Vector4( 0.3647f, 0.7569f, 0.8157f, 0.32f ),
  69 + Vector4( 0.3804f, 0.7412f, 0.6510f, 0.32f ),
  70 + Vector4( 1.f, 1.f, 1.f, 0.13f )
  71 +};
  72 +const int NUMBER_OF_BUBBLE_COLOR( sizeof(BUBBLE_COLOR) / sizeof(BUBBLE_COLOR[0]) );
  73 +
  74 +const int NUM_BACKGROUND_IMAGES = 18;
  75 +const float BACKGROUND_SWIPE_SCALE = 0.025f;
  76 +const float BACKGROUND_SPREAD_SCALE = 1.5f;
  77 +const float SCALE_MOD = 1000.0f * Math::PI * 2.0f;
  78 +const float SCALE_SPEED = 10.0f;
  79 +const float SCALE_SPEED_SIN = 0.1f;
  80 +
  81 +const unsigned int BACKGROUND_ANIMATION_DURATION = 15000; // 15 secs
  82 +
  83 +const Vector4 BACKGROUND_COLOR( 0.3569f, 0.5451f, 0.7294f, 1.0f );
  84 +
  85 +const float BUBBLE_MIN_Z = -1.0;
  86 +const float BUBBLE_MAX_Z = 0.0f;
  87 +
  88 +// This shader takes a texture.
  89 +// An alpha discard is performed.
  90 +// The shader uses the tiles position within the scroll-view page and the scroll-views rotation position to create a parallax effect.
  91 +const char* FRAGMENT_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
  92 + varying mediump vec2 vTexCoord;
  93 + varying mediump vec3 vIllumination;
  94 + uniform lowp vec4 uColor;
  95 + uniform sampler2D sTexture;
  96 + uniform mediump vec3 uCustomPosition;
  97 +
  98 + void main()
  99 + {
  100 + if( texture2D( sTexture, vTexCoord ).a <= 0.0001 )
  101 + {
  102 + discard;
  103 + }
  104 +
  105 + mediump vec2 wrapTexCoord = vec2( ( vTexCoord.x / 4.0 ) + ( uCustomPosition.x / 4.0 ) + ( uCustomPosition.z / 2.0 ), vTexCoord.y / 4.0 );
  106 + mediump vec4 color = texture2D( sTexture, wrapTexCoord );
  107 + mediump float positionWeight = ( uCustomPosition.y + 0.3 ) * color.r * 2.0;
  108 +
  109 + gl_FragColor = vec4( positionWeight, positionWeight, positionWeight, 0.9 ) * uColor + vec4( uColor.xyz, 0.0 );
  110 + }
  111 +);
58 112  
59 113 /**
60 114 * Creates the background image
... ... @@ -63,15 +117,81 @@ Control CreateBackground( std::string stylename )
63 117 {
64 118 Control background = Control::New();
65 119 Stage::GetCurrent().Add( background );
66   - background.SetStyleName( stylename);
  120 + background.SetStyleName( stylename );
67 121 background.SetName( "BACKGROUND" );
68 122 background.SetAnchorPoint( AnchorPoint::CENTER );
69 123 background.SetParentOrigin( ParentOrigin::CENTER );
70 124 background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
71   -
72 125 return background;
73 126 }
74 127  
  128 +/**
  129 + * Constraint to return a position for a bubble based on the scroll value and vertical wrapping
  130 + */
  131 +struct AnimateBubbleConstraint
  132 +{
  133 +public:
  134 + AnimateBubbleConstraint( const Vector3& initialPos, float scale )
  135 + : mInitialX( initialPos.x ),
  136 + mScale( scale )
  137 + {
  138 + }
  139 +
  140 + void operator()( Vector3& position, const PropertyInputContainer& inputs )
  141 + {
  142 + const Vector3& parentSize = inputs[1]->GetVector3();
  143 + const Vector3& childSize = inputs[2]->GetVector3();
  144 +
  145 + // Wrap bubbles vertically.
  146 + float range = parentSize.y + childSize.y;
  147 + // This performs a float mod (we don't use fmod as we want the arithmetic modulus as opposed to the remainder).
  148 + position.y -= range * ( floor( position.y / range ) + 0.5f );
  149 +
  150 + // Bubbles X position moves parallax to horizontal
  151 + // panning by a scale factor unique to each bubble.
  152 + position.x = mInitialX + ( inputs[0]->GetVector2().x * mScale );
  153 + }
  154 +
  155 +private:
  156 + float mInitialX;
  157 + float mScale;
  158 +};
  159 +
  160 +/**
  161 + * Constraint to precalculate values from the scroll-view
  162 + * and tile positions to pass to the tile shader.
  163 + */
  164 +struct TileShaderPositionConstraint
  165 +{
  166 + TileShaderPositionConstraint( float pageWidth, float tileXOffset )
  167 + : mPageWidth( pageWidth ),
  168 + mTileXOffset( tileXOffset )
  169 + {
  170 + }
  171 +
  172 + void operator()( Vector3& position, const PropertyInputContainer& inputs )
  173 + {
  174 + // Set up position.x as the tiles X offset (0.0 -> 1.0).
  175 + position.x = mTileXOffset;
  176 + // Set up position.z as the linear scroll-view X offset (0.0 -> 1.0).
  177 + position.z = 1.0f * ( -fmod( inputs[0]->GetVector2().x, mPageWidth ) / mPageWidth );
  178 + // Set up position.y as a rectified version of the scroll-views X offset.
  179 + // IE. instead of 0.0 -> 1.0, it moves between 0.0 -> 0.5 -> 0.0 within the same span.
  180 + if( position.z > 0.5f )
  181 + {
  182 + position.y = 1.0f - position.z;
  183 + }
  184 + else
  185 + {
  186 + position.y = position.z;
  187 + }
  188 + }
  189 +
  190 +private:
  191 + float mPageWidth;
  192 + float mTileXOffset;
  193 +};
  194 +
75 195 bool CompareByTitle( const Example& lhs, const Example& rhs )
76 196 {
77 197 return lhs.title < rhs.title;
... ... @@ -81,23 +201,24 @@ bool CompareByTitle( const Example&amp; lhs, const Example&amp; rhs )
81 201  
82 202 DaliTableView::DaliTableView( Application& application )
83 203 : mApplication( application ),
84   - mBackgroundLayer(),
85 204 mRootActor(),
86 205 mRotateAnimation(),
87 206 mPressedAnimation(),
88   - mScrollViewLayer(),
89 207 mScrollView(),
90 208 mScrollViewEffect(),
91 209 mScrollRulerX(),
92 210 mScrollRulerY(),
93 211 mPressedActor(),
  212 + mAnimationTimer(),
94 213 mLogoTapDetector(),
95 214 mVersionPopup(),
96 215 mPages(),
  216 + mBackgroundAnimations(),
97 217 mExampleList(),
98 218 mTotalPages(),
99 219 mScrolling( false ),
100   - mSortAlphabetically( false )
  220 + mSortAlphabetically( false ),
  221 + mBackgroundAnimsPlaying( false )
101 222 {
102 223 application.InitSignal().Connect( this, &DaliTableView::Initialize );
103 224 }
... ... @@ -119,60 +240,32 @@ void DaliTableView::SortAlphabetically( bool sortAlphabetically )
119 240 void DaliTableView::Initialize( Application& application )
120 241 {
121 242 Stage::GetCurrent().KeyEventSignal().Connect( this, &DaliTableView::OnKeyEvent );
122   -
123 243 const Vector2 stageSize = Stage::GetCurrent().GetSize();
124 244  
125 245 // Background
126   - Control background = CreateBackground( "LauncherBackground" );
127   - Stage::GetCurrent().Add( background );
128   -
129   - // Add root actor
130   - mRootActor = TableView::New( 4, 1 );
131   - mRootActor.SetAnchorPoint( AnchorPoint::CENTER );
132   - mRootActor.SetParentOrigin( ParentOrigin::CENTER );
133   - mRootActor.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  246 + mRootActor = CreateBackground( "LauncherBackground" );
134 247 Stage::GetCurrent().Add( mRootActor );
135 248  
136   - // Toolbar at top
137   - Dali::Toolkit::ToolBar toolbar;
138   - Dali::Layer toolBarLayer = DemoHelper::CreateToolbar(toolbar,
139   - DEFAULT_TOOLBAR_IMAGE_PATH,
140   - DEFAULT_TOOLBAR_TEXT,
141   - DemoHelper::DEFAULT_VIEW_STYLE);
142   -
143   - mRootActor.AddChild( toolBarLayer, TableView::CellPosition( 0, 0 ) );
144   - mRootActor.SetFitHeight( 0 );
145   -
146 249 // Add logo
147 250 ImageView logo = CreateLogo( LOGO_PATH );
148 251 logo.SetName( "LOGO_IMAGE" );
  252 + logo.SetAnchorPoint( AnchorPoint::TOP_CENTER );
  253 + logo.SetParentOrigin( Vector3( 0.5f, 0.1f, 0.5f ) );
149 254 logo.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
150   - const float paddingHeight = ( ( 1.f-TABLE_RELATIVE_SIZE.y ) * stageSize.y );
151   - const float logoMargin = paddingHeight * LOGO_MARGIN_RATIO;
152 255  
153 256 // Show version in a popup when log is tapped
154 257 mLogoTapDetector = TapGestureDetector::New();
155 258 mLogoTapDetector.Attach( logo );
156 259 mLogoTapDetector.DetectedSignal().Connect( this, &DaliTableView::OnLogoTapped );
157 260  
158   - const float bottomMargin = paddingHeight * BOTTOM_PADDING_RATIO;
159   -
160   - Alignment alignment = Alignment::New();
161   - alignment.SetName( "LOGO_ALIGNMENT" );
162   - alignment.Add( logo );
163   - alignment.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
164   - alignment.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
165   - Actor alignmentActor = alignment;
166   - alignmentActor.SetPadding( Padding( 0.0f, 0.0f, logoMargin, logoMargin ));
167   - mRootActor.AddChild( alignment, TableView::CellPosition( 1, 0 ) );
168   - mRootActor.SetFitHeight( 1 );
169   -
170   - // scrollview occupying the majority of the screen
  261 + // Scrollview occupying the majority of the screen
171 262 mScrollView = ScrollView::New();
  263 + mScrollView.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
  264 + mScrollView.SetParentOrigin( Vector3( 0.5f, 1.0f - 0.05f, 0.5f ) );
  265 + mScrollView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
  266 + mScrollView.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
  267 + mScrollView.SetSizeModeFactor( Vector3( 0.0f, 0.6f, 0.0f ) );
172 268  
173   - mScrollView.SetAnchorPoint( AnchorPoint::CENTER );
174   - mScrollView.SetParentOrigin( ParentOrigin::CENTER );
175   - mScrollView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
176 269 const float buttonsPageMargin = ( 1.0f - TABLE_RELATIVE_SIZE.x ) * 0.5f * stageSize.width;
177 270 mScrollView.SetPadding( Padding( buttonsPageMargin, buttonsPageMargin, 0.0f, 0.0f ) );
178 271  
... ... @@ -181,23 +274,20 @@ void DaliTableView::Initialize( Application&amp; application )
181 274 mScrollView.ScrollStartedSignal().Connect( this, &DaliTableView::OnScrollStart );
182 275 mScrollView.TouchSignal().Connect( this, &DaliTableView::OnScrollTouched );
183 276  
184   - mScrollViewLayer = Layer::New();
  277 + mPageWidth = stageSize.width * TABLE_RELATIVE_SIZE.x * 0.5f;
185 278  
186   - // Disable the depth test for performance
187   - mScrollViewLayer.SetDepthTestDisabled( true );
188   - mScrollViewLayer.SetAnchorPoint( AnchorPoint::CENTER );
189   - mScrollViewLayer.SetParentOrigin( ParentOrigin::CENTER );
190   - mScrollViewLayer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  279 + // Populate background and bubbles - needs to be scrollViewLayer so scroll ends show
  280 + Actor bubbleContainer = Actor::New();
  281 + bubbleContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  282 + bubbleContainer.SetAnchorPoint( AnchorPoint::CENTER );
  283 + bubbleContainer.SetParentOrigin( ParentOrigin::CENTER );
  284 + SetupBackground( bubbleContainer );
191 285  
192   - Alignment buttonsAlignment = Alignment::New();
193   - buttonsAlignment.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
194   - buttonsAlignment.Add( mScrollViewLayer );
195   -
196   - mScrollViewLayer.Add( mScrollView );
197   -
198   - mRootActor.AddChild( buttonsAlignment, TableView::CellPosition( 2, 0 ) );
199   -
200   - mRootActor.SetFixedHeight( 3, bottomMargin );
  286 + mRootActor.Add( logo );
  287 + // We use depth index to bring the logo above the bubbles (as an alternative to creating actors).
  288 + logo.GetRendererAt( 0 ).SetProperty( Renderer::Property::DEPTH_INDEX, 30000 );
  289 + mRootActor.Add( bubbleContainer );
  290 + mRootActor.Add( mScrollView );
201 291  
202 292 // Add scroll view effect and setup constraints on pages
203 293 ApplyScrollViewEffect();
... ... @@ -220,6 +310,12 @@ void DaliTableView::Initialize( Application&amp; application )
220 310  
221 311 winHandle.ShowIndicator( Dali::Window::INVISIBLE );
222 312  
  313 + // Background animation
  314 + mAnimationTimer = Timer::New( BACKGROUND_ANIMATION_DURATION );
  315 + mAnimationTimer.TickSignal().Connect( this, &DaliTableView::PauseBackgroundAnimation );
  316 + mAnimationTimer.Start();
  317 + mBackgroundAnimsPlaying = true;
  318 +
223 319 KeyboardFocusManager::Get().PreFocusChangeSignal().Connect( this, &DaliTableView::OnKeyboardPreFocusChange );
224 320 KeyboardFocusManager::Get().FocusedActorEnterKeySignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
225 321 AccessibilityManager::Get().FocusedActorActivatedSignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
... ... @@ -276,7 +372,9 @@ void DaliTableView::Populate()
276 372 {
277 373 const Example& example = ( *iter );
278 374  
279   - Actor tile = CreateTile( example.name, example.title, Vector3( tileParentMultiplier, tileParentMultiplier, 1.0f ), TILE_COLOR );
  375 + // Calculate the tiles relative position on the page (between 0 & 1 in each dimension).
  376 + Vector2 position( static_cast<float>( column ) / ( EXAMPLES_PER_ROW - 1.0f ), static_cast<float>( row ) / ( EXAMPLES_PER_ROW - 1.0f ) );
  377 + Actor tile = CreateTile( example.name, example.title, Vector3( tileParentMultiplier, tileParentMultiplier, 1.0f ), position );
280 378 AccessibilityManager accessibilityManager = AccessibilityManager::Get();
281 379 accessibilityManager.SetFocusOrder( tile, ++exampleCount );
282 380 accessibilityManager.SetAccessibilityAttribute( tile, Dali::Toolkit::AccessibilityManager::ACCESSIBILITY_LABEL,
... ... @@ -286,7 +384,6 @@ void DaliTableView::Populate()
286 384 "You can run this example" );
287 385  
288 386 tile.SetPadding( Padding( margin, margin, margin, margin ) );
289   -
290 387 page.AddChild( tile, TableView::CellPosition( row, column ) );
291 388  
292 389 iter++;
... ... @@ -317,7 +414,7 @@ void DaliTableView::Populate()
317 414 }
318 415  
319 416 // Update Ruler info.
320   - mScrollRulerX = new FixedRuler( stageSize.width * TABLE_RELATIVE_SIZE.x * 0.5f );
  417 + mScrollRulerX = new FixedRuler( mPageWidth );
321 418 mScrollRulerY = new DefaultRuler();
322 419 mScrollRulerX->SetDomain( RulerDomain( 0.0f, (mTotalPages+1) * stageSize.width * TABLE_RELATIVE_SIZE.x * 0.5f, true ) );
323 420 mScrollRulerY->Disable();
... ... @@ -348,7 +445,7 @@ void DaliTableView::Rotate( unsigned int degrees )
348 445 mRotateAnimation.Play();
349 446 }
350 447  
351   -Actor DaliTableView::CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, const Dali::Vector4& color )
  448 +Actor DaliTableView::CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, Vector2& position )
352 449 {
353 450 Actor content = Actor::New();
354 451 content.SetName( name );
... ... @@ -357,33 +454,53 @@ Actor DaliTableView::CreateTile( const std::string&amp; name, const std::string&amp; tit
357 454 content.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
358 455 content.SetSizeModeFactor( sizeMultiplier );
359 456  
360   - // Create background image.
  457 + Toolkit::ImageView tileContent = ImageView::New();
  458 + tileContent.SetParentOrigin( ParentOrigin::CENTER );
  459 + tileContent.SetAnchorPoint( AnchorPoint::CENTER );
  460 + tileContent.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  461 +
  462 + // Add the image via the property first.
  463 + tileContent.SetProperty( Toolkit::ImageView::Property::IMAGE, TILE_BACKGROUND_ALPHA );
  464 + // Register a property with the ImageView. This allows us to inject the scroll-view position into the shader.
  465 + Property::Value value = Vector3( 0.0f, 0.0f, 0.0f );
  466 + Property::Index propertyIndex = tileContent.RegisterProperty( "uCustomPosition", value );
  467 +
  468 + // Add a shader to the image (details in shader source).
  469 + Property::Map map;
  470 + Property::Map customShader;
  471 + customShader[ Visual::Shader::Property::FRAGMENT_SHADER ] = FRAGMENT_SHADER_TEXTURED;
  472 + map[ Visual::Property::SHADER ] = customShader;
  473 + tileContent.SetProperty( Toolkit::ImageView::Property::IMAGE, map );
  474 + tileContent.SetColor( TILE_COLOR );
  475 +
  476 + // We create a constraint to perform a precalculation on the scroll-view X offset
  477 + // and pass it to the shader uniform, along with the tile's position.
  478 + Constraint shaderPosition = Constraint::New < Vector3 > ( tileContent, propertyIndex, TileShaderPositionConstraint( mPageWidth, position.x ) );
  479 + shaderPosition.AddSource( Source( mScrollView, ScrollView::Property::SCROLL_POSITION ) );
  480 + shaderPosition.SetRemoveAction( Constraint::Discard );
  481 + shaderPosition.Apply();
  482 + content.Add( tileContent );
  483 +
  484 + // Create an ImageView for the 9-patch border around the tile.
361 485 ImageView image = ImageView::New( TILE_BACKGROUND );
362 486 image.SetAnchorPoint( AnchorPoint::CENTER );
363 487 image.SetParentOrigin( ParentOrigin::CENTER );
364   - // Make the image 100% of tile.
365 488 image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
366   - content.Add( image );
367   -
368   - // Create the tile background.
369   - Actor tileBackground = ImageView::New( TILE_BACKGROUND_ALPHA );
370   - tileBackground.SetParentOrigin( ParentOrigin::CENTER );
371   - tileBackground.SetAnchorPoint( AnchorPoint::CENTER );
372   - tileBackground.SetProperty( Actor::Property::COLOR, color );
373   - Property::Map shaderEffect = CreateAlphaDiscardEffect();
374   - tileBackground.SetProperty( Toolkit::ImageView::Property::IMAGE, shaderEffect );
375   - tileBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
376   - image.Add( tileBackground );
377   -
378   - // Create the tile label.
  489 + image.SetOpacity( 0.8f );
  490 + tileContent.Add( image );
  491 +
379 492 TextLabel label = TextLabel::New();
380   - label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
  493 + label.SetAnchorPoint( AnchorPoint::CENTER );
  494 + label.SetParentOrigin( ParentOrigin::CENTER );
381 495 label.SetStyleName( "LauncherLabel" );
382 496 label.SetProperty( TextLabel::Property::MULTI_LINE, true );
383 497 label.SetProperty( TextLabel::Property::TEXT, title );
384 498 label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
385 499 label.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
386 500 label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
  501 +
  502 + // Pad around the label as its size is the same as the 9-patch border. It will overlap it without padding.
  503 + label.SetPadding( Padding( TILE_LABEL_PADDING, TILE_LABEL_PADDING, TILE_LABEL_PADDING, TILE_LABEL_PADDING ) );
387 504 content.Add( label );
388 505  
389 506 // Set the tile to be keyboard focusable
... ... @@ -439,10 +556,14 @@ bool DaliTableView::DoTilePress( Actor actor, PointState::Type pointState )
439 556  
440 557 // scale the content actor within the Tile, as to not affect the placement within the Table.
441 558 Actor content = actor.GetChildAt(0);
442   - mPressedAnimation.AnimateTo( Property( content, Actor::Property::SCALE ), Vector3( 0.9f, 0.9f, 1.0f ), AlphaFunction::EASE_IN_OUT,
  559 + mPressedAnimation.AnimateTo( Property( content, Actor::Property::SCALE ), Vector3( 0.7f, 0.7f, 1.0f ), AlphaFunction::EASE_IN_OUT,
443 560 TimePeriod( 0.0f, BUTTON_PRESS_ANIMATION_TIME * 0.5f ) );
444 561 mPressedAnimation.AnimateTo( Property( content, Actor::Property::SCALE ), Vector3::ONE, AlphaFunction::EASE_IN_OUT,
445 562 TimePeriod( BUTTON_PRESS_ANIMATION_TIME * 0.5f, BUTTON_PRESS_ANIMATION_TIME * 0.5f ) );
  563 +
  564 + // Rotate button on the Y axis when pressed.
  565 + mPressedAnimation.AnimateBy( Property( content, Actor::Property::ORIENTATION ), Quaternion( Degree( 0.0f ), Degree( 180.0f ), Degree( 0.0f ) ) );
  566 +
446 567 mPressedAnimation.Play();
447 568 mPressedAnimation.FinishedSignal().Connect( this, &DaliTableView::OnPressedAnimationFinished );
448 569 }
... ... @@ -472,6 +593,8 @@ void DaliTableView::OnPressedAnimationFinished( Dali::Animation&amp; source )
472 593 void DaliTableView::OnScrollStart( const Dali::Vector2& position )
473 594 {
474 595 mScrolling = true;
  596 +
  597 + PlayAnimation();
475 598 }
476 599  
477 600 void DaliTableView::OnScrollComplete( const Dali::Vector2& position )
... ... @@ -555,6 +678,128 @@ void DaliTableView::OnKeyEvent( const KeyEvent&amp; event )
555 678 }
556 679 }
557 680  
  681 +void DaliTableView::SetupBackground( Actor bubbleContainer )
  682 +{
  683 + // Create distance field shapes.
  684 + BufferImage distanceFields[2];
  685 + Size imageSize( 512, 512 );
  686 +
  687 + CreateShapeImage( CIRCLE, imageSize, distanceFields[0] );
  688 + CreateShapeImage( BUBBLE, imageSize, distanceFields[1] );
  689 +
  690 + // Add bubbles to the bubbleContainer.
  691 + // Note: The bubbleContainer is parented externally to this function.
  692 + AddBackgroundActors( bubbleContainer, NUM_BACKGROUND_IMAGES, distanceFields );
  693 +}
  694 +
  695 +void DaliTableView::InitialiseBackgroundActors( Actor actor )
  696 +{
  697 + // Delete current animations
  698 + mBackgroundAnimations.clear();
  699 +
  700 + // Create new animations
  701 + const Vector3 size = actor.GetTargetSize();
  702 +
  703 + for( unsigned int i = 0, childCount = actor.GetChildCount(); i < childCount; ++i )
  704 + {
  705 + Actor child = actor.GetChildAt( i );
  706 +
  707 + // Calculate a random position
  708 + Vector3 childPos( Random::Range( -size.x * 0.5f * BACKGROUND_SPREAD_SCALE, size.x * 0.85f * BACKGROUND_SPREAD_SCALE ),
  709 + Random::Range( -size.y, size.y ),
  710 + Random::Range( BUBBLE_MIN_Z, BUBBLE_MAX_Z ) );
  711 +
  712 + child.SetPosition( childPos );
  713 +
  714 + // Define bubble horizontal parallax and vertical wrapping
  715 + Constraint animConstraint = Constraint::New < Vector3 > ( child, Actor::Property::POSITION, AnimateBubbleConstraint( childPos, Random::Range( -0.85f, 0.25f ) ) );
  716 + animConstraint.AddSource( Source( mScrollView, ScrollView::Property::SCROLL_POSITION ) );
  717 + animConstraint.AddSource( Dali::ParentSource( Dali::Actor::Property::SIZE ) );
  718 + animConstraint.AddSource( Dali::LocalSource( Dali::Actor::Property::SIZE ) );
  719 + animConstraint.SetRemoveAction( Constraint::Discard );
  720 + animConstraint.Apply();
  721 +
  722 + // Kickoff animation
  723 + Animation animation = Animation::New( Random::Range( 30.0f, 160.0f ) );
  724 + animation.AnimateBy( Property( child, Actor::Property::POSITION ), Vector3( 0.0f, -2000.0f, 0.0f ), AlphaFunction::LINEAR );
  725 + animation.SetLooping( true );
  726 + animation.Play();
  727 + mBackgroundAnimations.push_back( animation );
  728 + }
  729 +}
  730 +
  731 +void DaliTableView::AddBackgroundActors( Actor layer, int count, BufferImage* distanceField )
  732 +{
  733 + for( int i = 0; i < count; ++i )
  734 + {
  735 + float randSize = Random::Range( 10.0f, 400.0f );
  736 + int distanceFieldType = static_cast<int>( Random::Range( 0.0f, 1.0f ) + 0.5f );
  737 + ImageView dfActor = ImageView::New( distanceField[ distanceFieldType ] );
  738 + dfActor.SetSize( Vector2( randSize, randSize ) );
  739 + dfActor.SetParentOrigin( ParentOrigin::CENTER );
  740 +
  741 + Dali::Property::Map effect = Toolkit::CreateDistanceFieldEffect();
  742 + dfActor.SetProperty( Toolkit::ImageView::Property::IMAGE, effect );
  743 + dfActor.SetColor( BUBBLE_COLOR[ i%NUMBER_OF_BUBBLE_COLOR ] );
  744 +
  745 + layer.Add( dfActor );
  746 + }
  747 +
  748 + // Positioning will occur when the layer is relaid out
  749 + layer.OnRelayoutSignal().Connect( this, &DaliTableView::InitialiseBackgroundActors );
  750 +}
  751 +
  752 +void DaliTableView::CreateShapeImage( ShapeType shapeType, const Size& size, BufferImage& distanceFieldOut )
  753 +{
  754 + // this bitmap will hold the alpha map for the distance field shader
  755 + distanceFieldOut = BufferImage::New( size.width, size.height, Pixel::A8 );
  756 +
  757 + // Generate bit pattern
  758 + std::vector< unsigned char > imageDataA8;
  759 + imageDataA8.reserve( size.width * size.height ); // A8
  760 +
  761 + switch( shapeType )
  762 + {
  763 + case CIRCLE:
  764 + GenerateCircle( size, imageDataA8 );
  765 + break;
  766 + case BUBBLE:
  767 + GenerateCircle( size, imageDataA8, true );
  768 + break;
  769 + default:
  770 + break;
  771 + }
  772 +
  773 + PixelBuffer* buffer = distanceFieldOut.GetBuffer();
  774 + if( buffer )
  775 + {
  776 + GenerateDistanceFieldMap( &imageDataA8[ 0 ], size, buffer, size, 8.0f, size );
  777 + distanceFieldOut.Update();
  778 + }
  779 +}
  780 +
  781 +void DaliTableView::GenerateCircle( const Size& size, std::vector< unsigned char >& distanceFieldOut, bool hollow )
  782 +{
  783 + const float radius = size.width * 0.5f * size.width * 0.5f;
  784 + Vector2 center( size.width / 2, size.height / 2 );
  785 +
  786 + for( int h = 0; h < size.height; ++h )
  787 + {
  788 + for( int w = 0; w < size.width; ++w )
  789 + {
  790 + Vector2 pos( w, h );
  791 + Vector2 dist = pos - center;
  792 +
  793 + float distance = ( dist.x * dist.x ) + ( dist.y * dist.y );
  794 +
  795 + // If hollow, check the distance against a min & max value, otherwise just use the max value.
  796 + unsigned char fillByte = ( hollow ? ( ( distance <= radius ) && ( distance > ( radius * 0.7f ) ) ) : ( distance <= radius ) ) ? 0xFF : 0x00;
  797 +
  798 + distanceFieldOut.push_back( fillByte );
  799 + }
  800 + }
  801 +}
  802 +
558 803 ImageView DaliTableView::CreateLogo( std::string imagePath )
559 804 {
560 805 ImageView logo = ImageView::New( imagePath );
... ... @@ -565,16 +810,55 @@ ImageView DaliTableView::CreateLogo( std::string imagePath )
565 810 return logo;
566 811 }
567 812  
  813 +bool DaliTableView::PauseBackgroundAnimation()
  814 +{
  815 + PauseAnimation();
  816 +
  817 + return false;
  818 +}
  819 +
  820 +void DaliTableView::PauseAnimation()
  821 +{
  822 + if( mBackgroundAnimsPlaying )
  823 + {
  824 + for( AnimationListIter animIter = mBackgroundAnimations.begin(); animIter != mBackgroundAnimations.end(); ++animIter )
  825 + {
  826 + Animation anim = *animIter;
  827 +
  828 + anim.Stop();
  829 + }
  830 +
  831 + mBackgroundAnimsPlaying = false;
  832 + }
  833 +}
  834 +
  835 +void DaliTableView::PlayAnimation()
  836 +{
  837 + if ( !mBackgroundAnimsPlaying )
  838 + {
  839 + for( AnimationListIter animIter = mBackgroundAnimations.begin(); animIter != mBackgroundAnimations.end(); ++animIter )
  840 + {
  841 + Animation anim = *animIter;
  842 +
  843 + anim.Play();
  844 + }
  845 +
  846 + mBackgroundAnimsPlaying = true;
  847 + }
  848 +
  849 + mAnimationTimer.SetInterval( BACKGROUND_ANIMATION_DURATION );
  850 +}
  851 +
568 852 Dali::Actor DaliTableView::OnKeyboardPreFocusChange( Dali::Actor current, Dali::Actor proposed, Dali::Toolkit::Control::KeyboardFocus::Direction direction )
569 853 {
570 854 Actor nextFocusActor = proposed;
571 855  
572   - if ( !current && !proposed )
  856 + if( !current && !proposed )
573 857 {
574 858 // Set the initial focus to the first tile in the current page should be focused.
575 859 nextFocusActor = mPages[mScrollView.GetCurrentPage()].GetChildAt(0);
576 860 }
577   - else if( !proposed || (proposed && proposed == mScrollViewLayer) )
  861 + else if( !proposed )
578 862 {
579 863 // ScrollView is being focused but nothing in the current page can be focused further
580 864 // in the given direction. We should work out which page to scroll to next.
... ... @@ -658,13 +942,11 @@ void DaliTableView::OnLogoTapped( Dali::Actor actor, const Dali::TapGesture&amp; tap
658 942 Toolkit::TextLabel titleActor = Toolkit::TextLabel::New( "Version information" );
659 943 titleActor.SetName( "titleActor" );
660 944 titleActor.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
661   - titleActor.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
662 945  
663 946 Toolkit::TextLabel contentActor = Toolkit::TextLabel::New( stream.str() );
664 947 contentActor.SetName( "contentActor" );
665 948 contentActor.SetProperty( Toolkit::TextLabel::Property::MULTI_LINE, true );
666 949 contentActor.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
667   - contentActor.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
668 950 contentActor.SetPadding( Padding( 0.0f, 0.0f, 20.0f, 0.0f ) );
669 951  
670 952 mVersionPopup.SetTitle( titleActor );
... ...
demo/dali-table-view.h
  View file @9cfb6b8
1   -#ifndef DALI_DEMO_H
2   -#define DALI_DEMO_H
  1 +#ifndef __DALI_DEMO_H__
  2 +#define __DALI_DEMO_H__
3 3  
4 4 /*
5   - * Copyright (c) 2016 Samsung Electronics Co., Ltd.
  5 + * Copyright (c) 2015 Samsung Electronics Co., Ltd.
6 6 *
7 7 * Licensed under the Apache License, Version 2.0 (the "License");
8 8 * you may not use this file except in compliance with the License.
... ... @@ -98,6 +98,15 @@ public:
98 98 private: // Application callbacks & implementation
99 99  
100 100 /**
  101 + * Shape enum for create function
  102 + */
  103 + enum ShapeType
  104 + {
  105 + CIRCLE,
  106 + BUBBLE
  107 + };
  108 +
  109 + /**
101 110 * Initialize application.
102 111 *
103 112 * @param[in] app Application instance
... ... @@ -126,16 +135,16 @@ private: // Application callbacks &amp; implementation
126 135 void Rotate( unsigned int degrees );
127 136  
128 137 /**
129   - * Creates a tile for the main menu and toolbar.
  138 + * Creates a tile for the main menu.
130 139 *
131 140 * @param[in] name The unique name for this Tile
132 141 * @param[in] title The text caption that appears on the Tile
133 142 * @param[in] parentSize Tile's parent size.
134   - * @param[in] color The color (including alpha) of the tiles contents.
  143 + * @param[in] position The tiles relative position within a page
135 144 *
136 145 * @return The Actor for the created tile.
137 146 */
138   - Dali::Actor CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, const Dali::Vector4& color );
  147 + Dali::Actor CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, Dali::Vector2& position );
139 148  
140 149 // Signal handlers
141 150  
... ... @@ -241,6 +250,50 @@ private: // Application callbacks &amp; implementation
241 250 void OnKeyEvent( const Dali::KeyEvent& event );
242 251  
243 252 /**
  253 + * Create a depth field background
  254 + *
  255 + * @param[in] bubbleLayer Add the graphics to this layer
  256 + */
  257 + void SetupBackground( Dali::Actor bubbleLayer );
  258 +
  259 + /**
  260 + * Create background actors for the given layer
  261 + *
  262 + * @param[in] layer The layer to add the actors to
  263 + * @param[in] count The number of actors to generate
  264 + * @param[in] distanceField A array (pointer) to 2 distance field types to use
  265 + */
  266 + void AddBackgroundActors( Dali::Actor layer, int count, Dali::BufferImage* distanceField );
  267 +
  268 + /**
  269 + * Create a bitmap with the specified shape and also output a distance field
  270 + *
  271 + * @param[in] shapeType The shape to generate
  272 + * @param[in] size The size of the bitmap to create
  273 + * @param[out] distanceFieldOut The return depth field alpha map
  274 + */
  275 + void CreateShapeImage( ShapeType shapeType, const Dali::Size& size, Dali::BufferImage& distanceFieldOut );
  276 +
  277 + /**
  278 + * Generate a square bit pattern and depth field
  279 + *
  280 + * @param[in] size The size of the bitmap to create
  281 + * @param[out] imageOut The return bitmap
  282 + * @param[out] distanceFieldOut The return depth field alpha map
  283 + */
  284 + void GenerateSquare( const Dali::Size& size, std::vector<unsigned char>& distanceFieldOut );
  285 +
  286 + /**
  287 + * Generate a circle bit pattern and depth field
  288 + *
  289 + * @param[in] size The size of the bitmap to create
  290 + * @param[out] imageOut The return bitmap
  291 + * @param[out] distanceFieldOut The return depth field alpha map
  292 + * @param[in] hollow Optional - Set to true for a thick circle outline without fill
  293 + */
  294 + void GenerateCircle( const Dali::Size& size, std::vector<unsigned char>& distanceFieldOut, bool hollow = false );
  295 +
  296 + /**
244 297 * Creates the logo.
245 298 *
246 299 * @param[in] imagePath The path to the image file to load
... ... @@ -250,6 +303,23 @@ private: // Application callbacks &amp; implementation
250 303 Dali::Toolkit::ImageView CreateLogo( std::string imagePath );
251 304  
252 305 /**
  306 + * Timer handler for ending background animation
  307 + *
  308 + * @return Return value for timer handler
  309 + */
  310 + bool PauseBackgroundAnimation();
  311 +
  312 + /**
  313 + * Pause all animations
  314 + */
  315 + void PauseAnimation();
  316 +
  317 + /**
  318 + * Resume all animations
  319 + */
  320 + void PlayAnimation();
  321 +
  322 + /**
253 323 * Callback when the keyboard focus is going to be changed.
254 324 *
255 325 * @param[in] current The current focused actor
... ... @@ -286,30 +356,39 @@ private: // Application callbacks &amp; implementation
286 356 */
287 357 void OnButtonsPageRelayout( const Dali::Actor& actor );
288 358  
  359 + /**
  360 + * @brief Callback called to set up background actors
  361 + *
  362 + * @param[in] actor The actor raising the callback
  363 + */
  364 + void InitialiseBackgroundActors( Dali::Actor actor );
  365 +
289 366 private:
290 367  
291 368 Dali::Application& mApplication; ///< Application instance.
292   - Dali::Layer mBackgroundLayer; ///< Background resides on a separate layer.
293   - Dali::Toolkit::TableView mRootActor; ///< All content (excluding background is anchored to this Actor)
  369 + Dali::Toolkit::Control mRootActor; ///< All content (excluding background is anchored to this Actor)
294 370 Dali::Animation mRotateAnimation; ///< Animation to rotate and resize mRootActor.
295 371 Dali::Animation mPressedAnimation; ///< Button press scaling animation.
296   - Dali::Layer mScrollViewLayer; ///< ScrollView resides on a separate layer.
297 372 Dali::Toolkit::ScrollView mScrollView; ///< ScrollView container (for all Examples)
298 373 Dali::Toolkit::ScrollViewEffect mScrollViewEffect; ///< Effect to be applied to the scroll view
299 374 Dali::Toolkit::RulerPtr mScrollRulerX; ///< ScrollView X (horizontal) ruler
300 375 Dali::Toolkit::RulerPtr mScrollRulerY; ///< ScrollView Y (vertical) ruler
301 376 Dali::Actor mPressedActor; ///< The currently pressed actor.
  377 + Dali::Timer mAnimationTimer; ///< Timer used to turn off animation after a specific time period
302 378 Dali::TapGestureDetector mLogoTapDetector; ///< To detect taps on the logo
303 379 Dali::Toolkit::Popup mVersionPopup; ///< Displays DALi library version information
304 380  
305 381 std::vector< Dali::Actor > mPages; ///< List of pages.
  382 + AnimationList mBackgroundAnimations; ///< List of background bubble animations
306 383 ExampleList mExampleList; ///< List of examples.
307 384  
  385 + float mPageWidth; ///< The width of a page within the scroll-view, used to calculate the domain
308 386 int mTotalPages; ///< Total pages within scrollview.
309 387  
310 388 bool mScrolling:1; ///< Flag indicating whether view is currently being scrolled
311 389 bool mSortAlphabetically:1; ///< Sort examples alphabetically.
  390 + bool mBackgroundAnimsPlaying:1; ///< Are background animations playing
312 391  
313 392 };
314 393  
315   -#endif // DALI_DEMO_H
  394 +#endif // __DALI_DEMO_H__
... ...
resources/images/demo-tile-texture.9.png 0 → 100644
View file @9cfb6b8

21.7 KB
resources/images/item-background-alpha.9.png deleted
View file @bf96ef0

254 Bytes
resources/images/item-background.9.png
View file @9cfb6b8

489 Bytes | W: | H:

672 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin