diff --git a/build/tizen/.gitignore b/build/tizen/.gitignore index 9425618..d9f6684 100644 --- a/build/tizen/.gitignore +++ b/build/tizen/.gitignore @@ -11,3 +11,4 @@ install_manifest.txt /builder/dali-builder /examples/*.demo /mo +compile_commands.json diff --git a/examples/animated-images/animated-images-example.cpp b/examples/animated-images/animated-images-example.cpp index 5587ab9..547bdc2 100644 --- a/examples/animated-images/animated-images-example.cpp +++ b/examples/animated-images/animated-images-example.cpp @@ -34,6 +34,9 @@ const char* const ANIMATE_GIF_DOG( DEMO_IMAGE_DIR "dog-anim.gif" ); const char* const STATIC_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-static.gif" ); const char* const ANIMATE_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-anim.gif" ); +const char* const ANIMATE_PIXEL_AREA( "Animate PixelArea" ); +const char* const ANIMATE_PIXEL_AREA_AND_SCALE( "Animate PixelArea & Scale" ); + const Vector4 DIM_COLOR( 0.85f, 0.85f, 0.85f, 0.85f ); } @@ -67,21 +70,24 @@ public: // Tie-in input event handlers: stage.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent ); - mActorDog = CreateGifViewWithOverlayButton( STATIC_GIF_DOG ); + mActorDog = CreateGifViewWithOverlayPlayButton( STATIC_GIF_DOG ); mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); mActorDog.SetY( -100.f ); stage.Add( mActorDog ); - mActorLogo = CreateGifViewWithOverlayButton( STATIC_GIF_LOGO ); + mActorLogo = CreateGifViewWithOverlayPlayButton( STATIC_GIF_LOGO ); mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); mActorLogo.SetY( 100.f ); stage.Add( mActorLogo ); + + mTapDetector = TapGestureDetector::New(); + mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap ); } /** * Create the gif image view with an overlay play button. */ - Toolkit::ImageView CreateGifViewWithOverlayButton( const std::string& gifUrl ) + Toolkit::ImageView CreateGifViewWithOverlayPlayButton( const std::string& gifUrl ) { Toolkit::ImageView imageView = Toolkit::ImageView::New( gifUrl ); imageView.SetParentOrigin( ParentOrigin::CENTER ); @@ -101,6 +107,32 @@ public: return imageView; } + Toolkit::ImageView CreateGifViewWithAnimatePixelAreaButton( const std::string& gifUrl, WrapMode::Type wrapModeU, WrapMode::Type wrapModeV, const std::string& buttonLabel ) + { + Toolkit::ImageView imageView = Toolkit::ImageView::New(); + imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, + Property::Map().Add( Toolkit::ImageVisual::Property::URL, gifUrl ) + .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, wrapModeU ) + .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, wrapModeV )); + imageView.SetParentOrigin( ParentOrigin::CENTER ); + + // Create a push button, and add it as child of the image view + Toolkit::PushButton animateButton = Toolkit::PushButton::New(); + animateButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel ); + animateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER ); + animateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER ); + animateButton.SetY( 20.f ); + + animateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS ); + animateButton.SetProperty( Actor::Property::INHERIT_SCALE, false ); + imageView.Add( animateButton ); + + mTapDetector.Attach( animateButton ); + mTapDetector.Attach( imageView ); + + return imageView; + } + bool OnPlayButtonClicked( Toolkit::Button button ) { Stage stage = Stage::GetCurrent(); @@ -111,8 +143,7 @@ public: // remove the static gif view, the play button is also removed as its child. stage.Remove( mActorDog ); - mActorDog = Toolkit::ImageView::New( ANIMATE_GIF_DOG ); - mActorDog.SetParentOrigin( ParentOrigin::CENTER ); + mActorDog = CreateGifViewWithAnimatePixelAreaButton( ANIMATE_GIF_DOG, WrapMode::REPEAT, WrapMode::DEFAULT, ANIMATE_PIXEL_AREA_AND_SCALE ); mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); mActorDog.SetY( -100.f ); stage.Add( mActorDog ); @@ -122,8 +153,7 @@ public: // remove the static gif view, the play button is also removed as its child. stage.Remove( mActorLogo ); - mActorLogo = Toolkit::ImageView::New( ANIMATE_GIF_LOGO ); - mActorLogo.SetParentOrigin( ParentOrigin::CENTER ); + mActorLogo = CreateGifViewWithAnimatePixelAreaButton( ANIMATE_GIF_LOGO, WrapMode::DEFAULT, WrapMode::MIRRORED_REPEAT, ANIMATE_PIXEL_AREA ); mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); mActorLogo.SetY( 100.f ); stage.Add( mActorLogo ); @@ -131,6 +161,42 @@ public: return true; } + void OnTap(Dali::Actor actor, const Dali::TapGesture& tap) + { + if( actor.GetParent() == mActorDog ) // "Animate Pixel Area" button is clicked + { + Animation animation = Animation::New( 3.f ); + animation.AnimateTo( Property( mActorDog, ImageView::Property::PIXEL_AREA ), Vector4( -1.0, 0.0, 3.f, 1.f ), AlphaFunction::SIN ); + animation.AnimateTo( Property( mActorDog, Actor::Property::SCALE_X ), 3.f, AlphaFunction::SIN ); + animation.Play(); + } + else if( actor.GetParent() == mActorLogo ) // "Animate Pixel Area" button is clicked + { + Animation animation = Animation::New( 3.f ); + animation.AnimateTo( Property( mActorLogo, ImageView::Property::PIXEL_AREA ), Vector4( 0.0, 1.0, 1.f, 1.f ), AlphaFunction::SIN ); + animation.Play(); + } + else if( actor == mActorDog ) // stop the animated gif, switch to static view + { + Stage stage = Stage::GetCurrent(); + stage.Remove( mActorDog ); + + mActorDog = CreateGifViewWithOverlayPlayButton( STATIC_GIF_DOG ); + mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); + mActorDog.SetY( -100.f ); + stage.Add( mActorDog ); + } + else if( actor == mActorLogo ) // stop the animated gif, switch to static view + { + Stage stage = Stage::GetCurrent(); + stage.Remove( mActorLogo ); + + mActorLogo = CreateGifViewWithOverlayPlayButton( STATIC_GIF_LOGO ); + mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER ); + mActorLogo.SetY( 100.f ); + stage.Add( mActorLogo ); + } + } void OnKeyEvent(const KeyEvent& event) { @@ -147,6 +213,7 @@ private: Application& mApplication; Toolkit::ImageView mActorDog; Toolkit::ImageView mActorLogo; + TapGestureDetector mTapDetector; }; // Entry point for Linux & Tizen applications diff --git a/examples/clipping/clipping-example.cpp b/examples/clipping/clipping-example.cpp index 4db5147..6598b68 100644 --- a/examples/clipping/clipping-example.cpp +++ b/examples/clipping/clipping-example.cpp @@ -24,6 +24,7 @@ // INTERNAL INCLUDES #include "clipping-item-factory.h" +#include "item-view-orientation-constraint.h" using namespace Dali; using namespace Dali::Toolkit; @@ -32,8 +33,13 @@ namespace { const char * const APPLICATION_TITLE( "Clipping Controls" ); const Vector3 APPLICATION_TITLE_PARENT_ORIGIN( 0.5f, 0.03f, 0.5f ); // Set the parent origin to a small percentage below the top (so the demo will scale for different resolutions). + const Vector3 ITEM_VIEW_LAYOUT_SIZE_SCALE( 0.75f, 0.5f, 0.75f ); const float ITEM_VIEW_BORDER_SIZE = 2.0f; +const float ITEM_VIEW_MAXIMUM_ROTATION_IN_DEGREES = 20.0f; +const float ITEM_VIEW_LAYOUT_POSITION_CHANGE_MULTIPLIER = 3.0f; +const float ITEM_VIEW_ROTATION_ANIMATION_TIME = 0.2f; + const char * const BUTTON_LABEL( "Toggle Clipping Mode" ); } // unnamed namespace @@ -44,6 +50,8 @@ const char * const BUTTON_LABEL( "Toggle Clipping Mode" ); * need to clip to. UI Controls automate the creation of the renderers/visuals when they are set to clip their children. * * This example displays an item-view whose clipping mode is toggled without the need for adding any renderers to it. + * + * Additionally, a constraint is used to modify the item-view's orientation. */ class ClippingExample : public ConnectionTracker { @@ -100,6 +108,14 @@ private: const Vector3 itemViewLayoutSize( ITEM_VIEW_LAYOUT_SIZE_SCALE.x * stageSize.x, ITEM_VIEW_LAYOUT_SIZE_SCALE.y * stageSize.y, ITEM_VIEW_LAYOUT_SIZE_SCALE.z * stageSize.x ); mItemView.ActivateLayout( 0, itemViewLayoutSize, 0.0f ); + // Connect to the scroll started and completed signals to apply orientation constraints & animations. + mItemView.ScrollStartedSignal().Connect( this, &ClippingExample::ScrollStarted ); + mItemView.ScrollCompletedSignal().Connect( this, &ClippingExample::ScrollCompleted ); + + // Create a constraint for the item-view which we apply when we start scrolling and remove when we stop. + mItemViewOrientationConstraint = Constraint::New< Quaternion >( mItemView, Actor::Property::ORIENTATION, ItemViewOrientationConstraint( ITEM_VIEW_MAXIMUM_ROTATION_IN_DEGREES, ITEM_VIEW_LAYOUT_POSITION_CHANGE_MULTIPLIER ) ); + mItemViewOrientationConstraint.AddSource( LocalSource( ItemView::Property::LAYOUT_POSITION ) ); + // Create a border around item-view (as item-view is clipping its children, we should NOT add this as a child of item-view). Control border = Control::New(); border.SetParentOrigin( ParentOrigin::CENTER ); @@ -107,10 +123,16 @@ private: border.SetProperty( Control::Property::BACKGROUND, Property::Map().Add( Visual::Property::TYPE, Visual::BORDER ) .Add( BorderVisual::Property::COLOR, Color::WHITE ) - .Add( BorderVisual::Property::SIZE, 2.0f ) ); + .Add( BorderVisual::Property::SIZE, 2.0f ) + .Add( BorderVisual::Property::ANTI_ALIASING, true ) ); border.SetSize( Vector3( itemViewLayoutSize.x + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.y + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.z + ITEM_VIEW_BORDER_SIZE * 2.0f ) ); stage.Add( border ); + // Constrain the border's orientation to the orientation of item-view. + Constraint constraint = Constraint::New< Quaternion >( border, Actor::Property::ORIENTATION, EqualToConstraint() ); + constraint.AddSource( Source( mItemView, Actor::Property::ORIENTATION ) ); + constraint.Apply(); + // Create a button to toggle the clipping mode PushButton button = Toolkit::PushButton::New(); button.SetParentOrigin( ParentOrigin::BOTTOM_CENTER ); @@ -118,14 +140,36 @@ private: button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); button.SetProperty( Actor::Property::DRAW_MODE, DrawMode::OVERLAY_2D ); - button.SetProperty( Button::Property::LABEL, - Property::Map().Add( Toolkit::Visual::Property::TYPE, Toolkit::DevelVisual::TEXT ) - .Add( Toolkit::TextVisual::Property::TEXT, BUTTON_LABEL ) ); + button.SetProperty( Button::Property::LABEL, BUTTON_LABEL ); button.ClickedSignal().Connect( this, &ClippingExample::OnButtonClicked ); stage.Add( button ); } /** + * @brief Called when the item-view starts to scroll. + * + * Here we want to apply the item-view constraint. + */ + void ScrollStarted( const Vector2& /* currentScrollPosition */ ) + { + mItemViewOrientationConstraint.Apply(); + } + + /** + * @brief Called when the item-view scrolling completes. + * + * Here we remove the item-view orientation constraint and perform an animation to return the item-view back to base-rotation. + */ + void ScrollCompleted( const Vector2& /* currentScrollPosition */ ) + { + Animation animation = Animation::New( ITEM_VIEW_ROTATION_ANIMATION_TIME ); + animation.AnimateTo( Property( mItemView, Actor::Property::ORIENTATION ), Quaternion( Degree( 0.0f ), Vector3::XAXIS ), AlphaFunction::EASE_IN_SINE ); + animation.Play(); + + mItemViewOrientationConstraint.Remove(); + } + + /** * @brief Called when any key event is received * * Will use this to quit the application if Back or the Escape key is received @@ -163,6 +207,7 @@ private: Application& mApplication; ///< Reference to the application class. ItemView mItemView; ///< The item view which whose children we would like to clip. ClippingItemFactory mClippingItemFactory; ///< The ItemFactory used to create our items. + Constraint mItemViewOrientationConstraint; ///< The constraint used to control the orientation of item-view. }; int DALI_EXPORT_API main( int argc, char **argv ) diff --git a/examples/clipping/item-view-orientation-constraint.h b/examples/clipping/item-view-orientation-constraint.h new file mode 100644 index 0000000..0ff4bf9 --- /dev/null +++ b/examples/clipping/item-view-orientation-constraint.h @@ -0,0 +1,102 @@ +#ifndef ITEM_VIEW_ORIENTATION_CONSTRAINT_H +#define ITEM_VIEW_ORIENTATION_CONSTRAINT_H + +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +// EXTERNAL INCLUDES +#include +#include +#include +#include +#include +#include + +/** + * @brief Constraint used to constrain the orientation of the item-view depending on the position within the layout. + */ +class ItemViewOrientationConstraint +{ +public: + + /** + * @brief Constructor. + * @param[in] maximumRotationInDegrees The maximum rotation (in degrees) that we should rotate the item-view by. + * @param[in] layoutPositionChangeMultiplier This value is used to multiply the change in layout position + * (in order to exaggerate the amount moved so it's more visible). + */ + ItemViewOrientationConstraint( float maximumRotationInDegrees, float layoutPositionChangeMultiplier ) + : mMaximumRotationInDegrees( maximumRotationInDegrees ), + mLayoutPositionChangeMultiplier( layoutPositionChangeMultiplier ), + mStartingLayoutPosition( 0.0f ), + mStartingAngle( 0.0f ), + mFirstCall( true ) + { + } + + /** + * @brief Will be called by the Constraint. + * + * The first time this operator is called, it uses the values as it's base reference. + * Thereafter, the position in the layout is used to determine the rotation around the X-Axis. + * + * @param[in] rotation The rotation of the item-view. + * @param[in] inputs The constraint inputs: + * [0] ItemView::Property::LAYOUT_POSITION, float + */ + void operator()( Dali::Quaternion& rotation, const Dali::PropertyInputContainer& inputs ) + { + const float& layoutPosition = inputs[ 0 ]->GetFloat(); + + // Store values for base reference when called the first call. + if( mFirstCall ) + { + mStartingLayoutPosition = layoutPosition; + + Dali::Vector3 axis; + Dali::Radian angleInRadians; + rotation.ToAxisAngle( axis, angleInRadians ); + Dali::Degree angleInDegrees( angleInRadians ); // Convert to Degrees + + mStartingAngle = angleInDegrees.degree; + if( axis.x < 0.0f ) // We only rotate round the X-Axis. So if the X-Axis is negative, then the angle is also a negative angle. + { + mStartingAngle = -mStartingAngle; + } + + mFirstCall = false; + } + else + { + // All subsequent calls should tilt the orientation of the item-view around the X-Axis depending on how much our position has changed in the layout. + + Dali::Degree angle( mStartingAngle + mLayoutPositionChangeMultiplier * ( mStartingLayoutPosition - layoutPosition ) ); + Dali::ClampInPlace( angle.degree, -mMaximumRotationInDegrees, mMaximumRotationInDegrees ); // Ensure the angle does not exceed maximum specified (in both directions). + rotation = Dali::Quaternion( angle, Dali::Vector3::XAXIS ); + } + } + +private: + + const float mMaximumRotationInDegrees; ///< The maximum allowable rotation of the item-view. + const float mLayoutPositionChangeMultiplier; ///< This value is used to multiply the change in layout position. + float mStartingLayoutPosition; ///< The starting layout position. + float mStartingAngle; ///< The starting angle (in degrees) of the item-view. + bool mFirstCall; ///< A boolean to state whether this is the first time the operator() is called. Allows us to set the starting values. +}; + +#endif // ITEM_VIEW_ORIENTATION_CONSTRAINT_H diff --git a/examples/styling/image-channel-control-impl.cpp b/examples/styling/image-channel-control-impl.cpp index a6b41c7..c805e39 100644 --- a/examples/styling/image-channel-control-impl.cpp +++ b/examples/styling/image-channel-control-impl.cpp @@ -37,11 +37,12 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER( varying mediump vec2 vTexCoord;\n uniform sampler2D sTexture;\n uniform mediump vec4 uColor;\n + uniform mediump vec4 mixColor;\n uniform mediump vec3 uChannels;\n \n void main()\n {\n - gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * vec4(uChannels, 1.0) ;\n + gl_FragColor = texture2D( sTexture, vTexCoord ) * mixColor * uColor * vec4(uChannels, 1.0) ;\n }\n ); diff --git a/examples/styling/styling-application.cpp b/examples/styling/styling-application.cpp index 19a1411..b5b876e 100644 --- a/examples/styling/styling-application.cpp +++ b/examples/styling/styling-application.cpp @@ -24,8 +24,9 @@ // External includes #include -//#include #include +#include +#include #include "image-channel-control.h" #include #include @@ -212,7 +213,7 @@ void StylingApplication::Create( Application& application ) mIcc1.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO ); mIcc1.SetParentOrigin( ParentOrigin::CENTER ); mIcc1.SetVisibility( true ); - + mImagePlacement.Add( mIcc1 ); mIcc2 = ImageChannelControl::New( BIG_IMAGE_2 ); @@ -484,20 +485,20 @@ bool StylingApplication::OnButtonStateChange( Button button ) // Todo: save / restore slider states per image - if( button.GetProperty( Toolkit::Button::Property::SELECTED ).Get() ) + if( button.GetProperty(Button::Property::SELECTED) ) { ImageChannelControl prevIcc = mImageChannelControl; - if( mRadioButtons[0].GetProperty( Toolkit::Button::Property::SELECTED ).Get() ) + if( mRadioButtons[0].GetProperty(Button::Property::SELECTED) ) { mImageChannelControl = mIcc1; } - else if( mRadioButtons[1].GetProperty( Toolkit::Button::Property::SELECTED ).Get() ) + else if( mRadioButtons[1].GetProperty(Button::Property::SELECTED) ) { mImageChannelControl = mIcc2; } - else if( mRadioButtons[2].GetProperty( Toolkit::Button::Property::SELECTED ).Get() ) + else if( mRadioButtons[2].GetProperty(Button::Property::SELECTED) ) { mImageChannelControl = mIcc3; } @@ -523,7 +524,7 @@ bool StylingApplication::OnCheckButtonChange( Button button ) { int channel = button.GetProperty( index ); float value = mChannelSliders[channel].GetProperty( Slider::Property::VALUE ); - if( !button.IsSelected() ) + if( !button.GetProperty(Button::Property::SELECTED) ) { // "Turn off" the channel's contribution value = 0.0f; @@ -600,7 +601,7 @@ bool StylingApplication::OnSliderChanged( Slider slider, float value ) if( index != Property::INVALID_INDEX ) { int channel = slider.GetProperty( index ); - if( mCheckButtons[channel].IsSelected() ) + if( mCheckButtons[channel].GetProperty(Button::Property::SELECTED) ) { Property::Index channelIndex = GetChannelProperty( channel ); mImageChannelControl.SetProperty(channelIndex, value/100.0f); diff --git a/examples/transitions/beat-control-impl.cpp b/examples/transitions/beat-control-impl.cpp deleted file mode 100644 index 6b0f3e6..0000000 --- a/examples/transitions/beat-control-impl.cpp +++ /dev/null @@ -1,280 +0,0 @@ -/* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -#include "beat-control-impl.h" -#include -#include -#include -#include -#include - -#include - -using namespace Dali; // Needed for macros -using namespace Dali::Toolkit; - -namespace Demo -{ -namespace Internal -{ - -namespace -{ - - -Dali::BaseHandle Create() -{ - return Demo::BeatControl::New(); -} - -DALI_TYPE_REGISTRATION_BEGIN( BeatControl, Dali::Toolkit::Control, Create ); - -DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "bounceTransition", STRING, BOUNCE_TRANSITION ); -DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "leftTransition", STRING, LEFT_TRANSITION ); -DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "upTransition", STRING, UP_TRANSITION ); -DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "beatVisual", MAP, BEAT_VISUAL ); -DALI_TYPE_REGISTRATION_END(); - - -Toolkit::TransitionData ConvertPropertyToTransition( const Property::Value& value ) -{ - Toolkit::TransitionData transitionData; - - if( value.GetType() == Property::ARRAY ) - { - transitionData = Toolkit::TransitionData::New( *value.GetArray()); - } - else if( value.GetType() == Property::MAP ) - { - transitionData = Toolkit::TransitionData::New( *value.GetMap() ); - } - return transitionData; -} - -} // anonymous namespace - - -Internal::BeatControl::BeatControl() -: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ) -{ -} - -Internal::BeatControl::~BeatControl() -{ -} - -Demo::BeatControl Internal::BeatControl::New() -{ - IntrusivePtr impl = new Internal::BeatControl(); - Demo::BeatControl handle = Demo::BeatControl( *impl ); - impl->Initialize(); - return handle; -} - - -void BeatControl::StartBounceAnimation() -{ - if( mAnimation ) - { - mAnimation.Stop(); - mAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnBounceAnimationFinished ); - OnBounceAnimationFinished(mAnimation); - } - - mAnimation = CreateTransition( mBounceTransition ); - mAnimation.FinishedSignal().Connect( this, &BeatControl::OnBounceAnimationFinished ); - mAnimation.Play(); -} - - -void BeatControl::StartXAnimation() -{ - if( mXAnimation ) - { - mXAnimation.Stop(); - mXAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnXAnimationFinished ); - OnXAnimationFinished(mXAnimation); - } - - mXAnimation = CreateTransition( mLeftTransition ); - mXAnimation.FinishedSignal().Connect( this, &BeatControl::OnXAnimationFinished ); - mXAnimation.Play(); -} - -void BeatControl::StartYAnimation() -{ - if( mYAnimation ) - { - mYAnimation.Stop(); - mYAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnYAnimationFinished ); - OnYAnimationFinished(mYAnimation); - } - - mYAnimation = CreateTransition( mUpTransition ); - mYAnimation.FinishedSignal().Connect( this, &BeatControl::OnYAnimationFinished ); - mYAnimation.Play(); -} - - -void BeatControl::OnBounceAnimationFinished( Animation& src ) -{ - // Do stuff -} -void BeatControl::OnXAnimationFinished( Animation& src ) -{ - // Do stuff -} -void BeatControl::OnYAnimationFinished( Animation& src ) -{ - // Do stuff -} - -void BeatControl::OnInitialize() -{ - Actor self = Self(); -} - -void BeatControl::OnStageConnection( int depth ) -{ - Control::OnStageConnection( depth ); -} - -void BeatControl::OnStageDisconnection() -{ - Control::OnStageDisconnection(); -} - -void BeatControl::OnSizeSet( const Vector3& targetSize ) -{ - Control::OnSizeSet( targetSize ); - RelayoutVisuals( Vector2( targetSize ) ); -} - -void BeatControl::OnRelayout( const Vector2& targetSize, RelayoutContainer& container ) -{ - RelayoutVisuals( targetSize ); -} - -void BeatControl::RelayoutVisuals( const Vector2& targetSize ) -{ - if( mVisual ) - { - Vector2 size( targetSize ); - Property::Map transformMap; - // Make the visual half the size of the control, but leave - // origin and anchor point at center, position is relative, but Zer0 - transformMap[ DevelVisual::Transform::Property::SIZE ] = Vector2(0.5, 0.5); - mVisual.SetTransformAndSize( transformMap, size ); - - // @todo We must stop this clashing with a transform animation - } -} - -Vector3 BeatControl::GetNaturalSize() -{ - if( mVisual ) - { - Vector2 naturalSize; - mVisual.GetNaturalSize(naturalSize); - return Vector3(naturalSize); - } - return Vector3::ZERO; -} - -void BeatControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change ) -{ - // Chain up. - Control::OnStyleChange( styleManager, change ); -} - - -/////////////////////////////////////////////////////////// -// -// Properties -// - -void BeatControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value ) -{ - Demo::BeatControl beatControl = Demo::BeatControl::DownCast( Dali::BaseHandle( object ) ); - - if( beatControl ) - { - BeatControl& impl = GetImpl( beatControl ); - Actor self = impl.Self(); - switch ( index ) - { - case Demo::BeatControl::Property::BEAT_VISUAL: - { - Property::Map* map = value.GetMap(); - if( map ) - { - impl.mVisual = Toolkit::VisualFactory::Get().CreateVisual( *map ); - impl.RegisterVisual( Demo::BeatControl::Property::BEAT_VISUAL, impl.mVisual ); - } - break; - } - case Demo::BeatControl::Property::BOUNCE_TRANSITION: - { - impl.mBounceTransition = ConvertPropertyToTransition( value ); - break; - } - case Demo::BeatControl::Property::LEFT_TRANSITION: - { - impl.mLeftTransition = ConvertPropertyToTransition( value ); - break; - } - case Demo::BeatControl::Property::UP_TRANSITION: - { - impl.mUpTransition = ConvertPropertyToTransition( value ); - break; - } - } - } -} - -Property::Value BeatControl::GetProperty( BaseObject* object, Property::Index propertyIndex ) -{ - Property::Value value; - - Demo::BeatControl beatControl = Demo::BeatControl::DownCast( Dali::BaseHandle( object ) ); - - if ( beatControl ) - { - BeatControl& impl = GetImpl( beatControl ); - switch ( propertyIndex ) - { - case Demo::BeatControl::Property::BEAT_VISUAL: - { - if( impl.mVisual ) - { - Property::Map map; - impl.mVisual.CreatePropertyMap(map); - value = map; - } - break; - } - case Demo::BeatControl::Property::BOUNCE_TRANSITION: - default: - break; - } - } - - return value; -} - - -} // Internal -} // Demo diff --git a/examples/transitions/shadow-button-impl.cpp b/examples/transitions/shadow-button-impl.cpp new file mode 100644 index 0000000..8a6ea56 --- /dev/null +++ b/examples/transitions/shadow-button-impl.cpp @@ -0,0 +1,569 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#include "shadow-button-impl.h" +#include +#include +#include +#include +#include +#include + +#include + +using namespace Dali; // Needed for macros +using namespace Dali::Toolkit; + +namespace Demo +{ +namespace Internal +{ + +namespace +{ + + +Dali::BaseHandle Create() +{ + return Demo::ShadowButton::New(); +} + +DALI_TYPE_REGISTRATION_BEGIN( ShadowButton, Dali::Toolkit::Button, Create ); + +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "activeTransition", ARRAY, ACTIVE_TRANSITION ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "inactiveTransition", ARRAY, INACTIVE_TRANSITION ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkTransition", ARRAY, CHECK_TRANSITION ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "uncheckTransition", ARRAY, UNCHECK_TRANSITION ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "backgroundVisual", MAP, BACKGROUND_VISUAL ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkboxBgVisual", MAP, CHECKBOX_BG_VISUAL ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkboxFgVisual", MAP, CHECKBOX_FG_VISUAL ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "labelVisual", MAP, LABEL_VISUAL ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkState", BOOLEAN, ACTIVE_STATE ); +DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkState", BOOLEAN, CHECK_STATE ); + +DALI_TYPE_REGISTRATION_END(); + +DALI_ENUM_TO_STRING_TABLE_BEGIN( VISUAL_PROPERTIES ) +{ "backgroundVisual", Demo::ShadowButton::Property::BACKGROUND_VISUAL }, +{ "checkboxBgVisual", Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL}, +{ "checkboxFgVisual", Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL}, +{ "labelVisual", Demo::ShadowButton::Property::LABEL_VISUAL} +DALI_ENUM_TO_STRING_TABLE_END( VISUAL_PROPERTIES ) + +Toolkit::TransitionData ConvertPropertyToTransition( const Property::Value& value ) +{ + Toolkit::TransitionData transitionData; + + if( value.GetType() == Property::ARRAY ) + { + transitionData = Toolkit::TransitionData::New( *value.GetArray()); + } + else if( value.GetType() == Property::MAP ) + { + transitionData = Toolkit::TransitionData::New( *value.GetMap() ); + } + return transitionData; +} + +} // anonymous namespace + + +Internal::ShadowButton::ShadowButton() +: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ), + mCheckState(false), + mActiveState(false) +{ +} + +Internal::ShadowButton::~ShadowButton() +{ +} + +Demo::ShadowButton Internal::ShadowButton::New() +{ + IntrusivePtr impl = new Internal::ShadowButton(); + Demo::ShadowButton handle = Demo::ShadowButton( *impl ); + impl->Initialize(); + return handle; +} + +void ShadowButton::SetActiveState( bool active ) +{ + if( active != mActiveState ) + { + mActiveState = active; + if( active ) + { + StartTransition( Demo::ShadowButton::Property::ACTIVE_TRANSITION ); + } + else + { + StartTransition( Demo::ShadowButton::Property::INACTIVE_TRANSITION ); + } + } +} + +bool ShadowButton::GetActiveState() +{ + return mActiveState; +} + +void ShadowButton::SetCheckState( bool checkState ) +{ + mCheckState = checkState; + EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, true ); + if( Self().OnStage() ) + { + if( checkState ) + { + StartTransition( Demo::ShadowButton::Property::CHECK_TRANSITION ); + } + else + { + StartTransition( Demo::ShadowButton::Property::UNCHECK_TRANSITION ); + } + } + RelayoutRequest(); +} + +bool ShadowButton::GetCheckState() +{ + return mCheckState; +} + +void ShadowButton::StartTransition( Property::Index transitionId ) +{ + Transitions::iterator iter = FindTransition( transitionId ); + if( iter != mTransitions.end() ) + { + if( iter->mAnimation ) + { + iter->mAnimation.Stop(); + iter->mPlaying = false; + + iter->mAnimation.FinishedSignal().Disconnect( this, &ShadowButton::OnTransitionFinished ); + } + + iter->mAnimation = CreateTransition( iter->mTransitionData ); + StoreTargetLayouts( iter->mTransitionData ); + + iter->mAnimation.FinishedSignal().Connect( this, &ShadowButton::OnTransitionFinished ); + iter->mAnimation.Play(); + iter->mPlaying = true; + } +} + +void ShadowButton::OnTransitionFinished( Animation& src ) +{ + ShadowButton::Transitions::iterator iter = mTransitions.begin(); + for( ; iter != mTransitions.end(); ++iter ) + { + if( iter->mAnimation == src ) + { + iter->mPlaying = false; + iter->mAnimation.Reset(); // Remove the animation when it's finished. + switch( iter->mTransitionId ) + { + case Demo::ShadowButton::Property::ACTIVE_TRANSITION: + { + // Consider relayouting the text. + break; + } + case Demo::ShadowButton::Property::INACTIVE_TRANSITION: + { + // Consider relayouting the text. + break; + } + case Demo::ShadowButton::Property::UNCHECK_TRANSITION: + { + EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, false ); + break; + } + } + break; + } + } +} + +void ShadowButton::OnInitialize() +{ + Actor self = Self(); +} + +void ShadowButton::OnStageConnection( int depth ) +{ + Control::OnStageConnection( depth ); +} + +void ShadowButton::OnStageDisconnection() +{ + Control::OnStageDisconnection(); +} + +void ShadowButton::OnSizeSet( const Vector3& targetSize ) +{ + Control::OnSizeSet( targetSize ); + RelayoutVisuals( Vector2( targetSize ) ); +} + +void ShadowButton::OnRelayout( const Vector2& targetSize, RelayoutContainer& container ) +{ + RelayoutVisuals( targetSize ); +} + +void ShadowButton::RelayoutVisuals( const Vector2& targetSize ) +{ + bool transitioning = false; + ShadowButton::Transitions::iterator iter = mTransitions.begin(); + for( ; iter != mTransitions.end(); ++iter ) + { + if( iter->mPlaying == true ) + { + transitioning = true; + break; + } + } + + if( ! transitioning ) + { + for( ShadowButton::Transforms::iterator iter = mTransforms.begin(); + iter != mTransforms.end(); ++iter ) + { + switch( iter->mTransformId ) + { + case Demo::ShadowButton::Property::BACKGROUND_VISUAL: + { + mBackgroundVisual.SetTransformAndSize( iter->mTransform, targetSize ); + break; + } + case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL: + { + mCheckboxBgVisual.SetTransformAndSize( iter->mTransform, targetSize ); + break; + } + case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL: + { + mCheckboxFgVisual.SetTransformAndSize( iter->mTransform, targetSize ); + break; + } + case Demo::ShadowButton::Property::LABEL_VISUAL: + { + mLabelVisual.SetTransformAndSize( iter->mTransform, targetSize ); + break; + } + } + } + } +} + +Vector3 ShadowButton::GetNaturalSize() +{ + int width; + int height; + + Vector2 checkboxBgSize; + Vector2 checkboxFgSize; + Vector2 labelSize; + mCheckboxBgVisual.GetNaturalSize( checkboxBgSize ); + mCheckboxFgVisual.GetNaturalSize( checkboxFgSize ); + mLabelVisual.GetNaturalSize( labelSize ); + + width = std::max( checkboxBgSize.x, checkboxFgSize.x ) + labelSize.x; + height = std::max( std::max( checkboxFgSize.y, checkboxBgSize.y ), labelSize.y ); + + return Vector3( width, height, height ); +} + +void ShadowButton::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change ) +{ + // Chain up. + Control::OnStyleChange( styleManager, change ); +} + +ShadowButton::Transitions::iterator ShadowButton::FindTransition( Property::Index index ) +{ + bool found = false; + ShadowButton::Transitions::iterator iter = mTransitions.begin(); + for( ; iter != mTransitions.end(); ++iter ) + { + if( iter->mTransitionId == index ) + { + found = true; + break; + } + } + if( ! found ) + { + iter = mTransitions.end(); + } + return iter; +} + +ShadowButton::Transforms::iterator ShadowButton::FindTransform( Property::Index index ) +{ + bool found = false; + ShadowButton::Transforms::iterator iter = mTransforms.begin(); + for( ; iter != mTransforms.end(); ++iter ) + { + if( iter->mTransformId == index ) + { + found = true; + break; + } + } + if( ! found ) + { + iter = mTransforms.end(); + } + return iter; +} + +void ShadowButton::ResetVisual( + Property::Index index, + Visual::Base& visual, + const Property::Value& value ) +{ + if( visual ) + { + // we are replacing an existing visual, so force relayout + RelayoutRequest(); + } + Property::Map* map = value.GetMap(); + if( map ) + { + visual = Toolkit::VisualFactory::Get().CreateVisual( *map ); + + // Set the appropriate depth index. + // @todo Should be able to set this from the style sheet + switch( index ) + { + case Demo::ShadowButton::Property::BACKGROUND_VISUAL: + { + RegisterVisual( index, visual ); + visual.SetDepthIndex(0.0f); + break; + } + case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL: + { + RegisterVisual( index, visual ); + visual.SetDepthIndex(1.0f); + break; + } + case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL: + { + RegisterVisual( index, visual, mCheckState ); + visual.SetDepthIndex(2.0f); + break; + } + case Demo::ShadowButton::Property::LABEL_VISUAL: + { + RegisterVisual( index, visual ); + visual.SetDepthIndex(1.0f); + break; + } + } + + // Extract transform maps out of the visual definition and store them + Property::Value* value = map->Find( DevelVisual::Property::TRANSFORM, "transform"); + if( value ) + { + Property::Map* transformMap = value->GetMap(); + if( transformMap ) + { + ShadowButton::Transforms::iterator iter = FindTransform( index ); + if( iter != mTransforms.end() ) + { + iter->mTransform = *transformMap; + } + else + { + mTransforms.push_back( Transform( index, *transformMap ) ); + } + } + } + } +} + +bool IsTransformProperty( const std::string& property ) +{ + const char* transformProperties[]= { "size", "offset", "origin", "anchorPoint", "offsetSizeMode" }; + const int NUM_TRANSFORM_PROPERTIES = sizeof( transformProperties ) / sizeof( const char * ); + + bool found=false; + for( int i=0; i{animator{"property"}} = animator{"targetValue"} + + + for( unsigned int i=0; i < transitionData.Count(); ++i ) + { + Property::Map animator = transitionData.GetAnimatorAt(i); + Property::Value* target = animator.Find( "target" ); + if( target ) + { + // Convert to index + Property::Index index; + if( Scripting::GetEnumerationProperty( *target, VISUAL_PROPERTIES_TABLE, VISUAL_PROPERTIES_TABLE_COUNT, index ) ) + { + ShadowButton::Transforms::iterator iter = FindTransform( index ); + if( iter != mTransforms.end() ) + { + Property::Value* property = animator.Find( "property" ); + if( property ) + { + std::string propertyString; + property->Get(propertyString); + if( IsTransformProperty( propertyString ) ) + { + Property::Value* targetValue = animator.Find( "targetValue" ); + if( targetValue ) + { + iter->mTransform[ propertyString ] = *targetValue; + } + } + } + } + } + } + } +} + +void ShadowButton::ResetTransition( + Property::Index index, + const Property::Value& value) +{ + ShadowButton::Transitions::iterator iter = FindTransition( index ); + if( iter != mTransitions.end() ) + { + // Already exists + iter->mTransitionData = ConvertPropertyToTransition( value ); + iter->mAnimation.Stop(); + iter->mAnimation.Clear(); + } + else + { + mTransitions.push_back( Transition( index, ConvertPropertyToTransition( value ) ) ); + } +} + + +void ShadowButton::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value ) +{ + Demo::ShadowButton shadowButton = Demo::ShadowButton::DownCast( Dali::BaseHandle( object ) ); + + if( shadowButton ) + { + ShadowButton& impl = GetImpl( shadowButton ); + switch ( index ) + { + case Demo::ShadowButton::Property::BACKGROUND_VISUAL: + { + impl.ResetVisual( index, impl.mBackgroundVisual, value ); + break; + } + case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL: + { + impl.ResetVisual( index, impl.mCheckboxBgVisual, value ); + break; + } + case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL: + { + impl.ResetVisual( index, impl.mCheckboxFgVisual, value ); + impl.EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, impl.mCheckState ); + break; + } + case Demo::ShadowButton::Property::LABEL_VISUAL: + { + impl.ResetVisual( index, impl.mLabelVisual, value ); + break; + } + case Demo::ShadowButton::Property::ACTIVE_TRANSITION: + case Demo::ShadowButton::Property::INACTIVE_TRANSITION: + case Demo::ShadowButton::Property::CHECK_TRANSITION: + case Demo::ShadowButton::Property::UNCHECK_TRANSITION: + { + impl.ResetTransition( index, value ); + break; + } + } + } +} + +Property::Value ShadowButton::GetProperty( BaseObject* object, Property::Index propertyIndex ) +{ + Property::Value value; + + Demo::ShadowButton shadowButton = Demo::ShadowButton::DownCast( Dali::BaseHandle( object ) ); + + if ( shadowButton ) + { + ShadowButton& impl = GetImpl( shadowButton ); + switch ( propertyIndex ) + { + case Demo::ShadowButton::Property::BACKGROUND_VISUAL: + { + Property::Map map; + impl.mBackgroundVisual.CreatePropertyMap(map); + value = map; + break; + } + case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL: + { + Property::Map map; + impl.mCheckboxBgVisual.CreatePropertyMap(map); + value = map; + break; + } + case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL: + { + Property::Map map; + impl.mCheckboxFgVisual.CreatePropertyMap(map); + value = map; + break; + } + case Demo::ShadowButton::Property::LABEL_VISUAL: + { + Property::Map map; + impl.mLabelVisual.CreatePropertyMap(map); + value = map; + break; + } + + default: + break; + } + } + + return value; +} + + +} // Internal +} // Demo diff --git a/examples/transitions/beat-control-impl.h b/examples/transitions/shadow-button-impl.h index e4f9a99..cbf146e 100644 --- a/examples/transitions/beat-control-impl.h +++ b/examples/transitions/shadow-button-impl.h @@ -1,8 +1,8 @@ -#ifndef DALI_DEMO_INTERNAL_BEAT_CONTROL_IMPL_H -#define DALI_DEMO_INTERNAL_BEAT_CONTROL_IMPL_H +#ifndef DALI_DEMO_INTERNAL_SHADOW_BUTTON_IMPL_H +#define DALI_DEMO_INTERNAL_SHADOW_BUTTON_IMPL_H /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2017 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -17,7 +17,7 @@ * limitations under the License. */ -#include "beat-control.h" +#include "shadow-button.h" #include #include #include @@ -29,22 +29,42 @@ namespace Demo namespace Internal // To use TypeRegistry, handle and body classes need the same name { -class BeatControl : public Dali::Toolkit::Internal::Control +class ShadowButton : public Dali::Toolkit::Internal::Control { public: /** - * Instantiate a new BeatControl object + * Instantiate a new ShadowButton object */ - static Demo::BeatControl New(); - BeatControl(); - ~BeatControl(); + static Demo::ShadowButton New(); + ShadowButton(); + ~ShadowButton(); public: // API - void StartBounceAnimation(); + /** + * @brief Set the button to be active or inactive. + * + * The button will perform a transition if there is a state change. + * @param[in] active The active state + */ + void SetActiveState( bool active ); + + /** + * Get the active state + * @return the active state + */ + bool GetActiveState(); - void StartXAnimation(); + /** + * Set the check state + * @param[in] checkState The state of the checkbox + */ + void SetCheckState( bool checkState ); - void StartYAnimation(); + /** + * Get the check state + * @return the check state + */ + bool GetCheckState(); public: // Properties /** @@ -65,81 +85,136 @@ public: // Properties private: // From Control /** - * @copydoc Toolkit::Control::OnInitialize() + * @copydoc Toolkit::Button::OnInitialize() */ virtual void OnInitialize(); /** - * @copydoc Toolkit::Control::OnStageConnect() + * @copydoc Toolkit::Button::OnStageConnect() */ virtual void OnStageConnection( int depth ); /** - * @copydoc Toolkit::Control::OnStageDisconnection() + * @copydoc Toolkit::Button::OnStageDisconnection() */ virtual void OnStageDisconnection(); /** - * @copydoc Toolkit::Control::OnSizeSet() + * @copydoc Toolkit::Button::OnSizeSet() */ virtual void OnSizeSet( const Dali::Vector3& targetSize ); /** - * @copydoc Toolkit::Control::OnRelayout() + * @copydoc Toolkit::Button::OnRelayout() */ virtual void OnRelayout( const Dali::Vector2& targetSize, Dali::RelayoutContainer& container ); /** - * @copydoc Toolkit::Control::GetNaturalSize + * @copydoc Toolkit::Button::GetNaturalSize */ virtual Dali::Vector3 GetNaturalSize(); /** - * @copydoc Toolkit::Control::OnStyleChange + * @copydoc Toolkit::Button::OnStyleChange */ virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change ); private: - void OnBounceAnimationFinished( Dali::Animation& handle ); - void OnXAnimationFinished( Dali::Animation& src ); - void OnYAnimationFinished( Dali::Animation& src ); + struct Transition + { + Dali::Property::Index mTransitionId; + Dali::Toolkit::TransitionData mTransitionData; + Dali::Animation mAnimation; + bool mPlaying; + + Transition( Dali::Property::Index index, Dali::Toolkit::TransitionData transitionData ) + : mTransitionId( index ), + mTransitionData( transitionData ), + mPlaying(false) + { + } + private: + Transition(); + }; + + typedef std::vector Transitions; + + struct Transform + { + Dali::Property::Index mTransformId; + Dali::Property::Map mTransform; + + Transform( Dali::Property::Index index, Dali::Property::Map& map ) + : mTransformId(index), + mTransform( map ) + { + } + }; + typedef std::vector Transforms; + +private: + void StartTransition( Dali::Property::Index transitionId ); + + void OnTransitionFinished( Dali::Animation& handle ); + + Transitions::iterator FindTransition( Dali::Property::Index index ); + + Transforms::iterator FindTransform( Dali::Property::Index index ); /** - * Relayout the visuals as a result of size negotiation + * Relayout the visuals as a result of size negotiation using + * the transforms provided in the stylesheet */ void RelayoutVisuals( const Dali::Vector2& targetSize ); + /** + * Relayout the visuals as a result of size negotiation using + * programmatically generated transforms + */ + void RelayoutVisualsManually( const Dali::Vector2& targetSize ); + + void ResetVisual( Dali::Property::Index index, + Dali::Toolkit::Visual::Base& visual, + const Dali::Property::Value& value ); + + void ResetTransition( Dali::Property::Index index, + const Dali::Property::Value& value ); + + void StoreTargetLayouts( Dali::Toolkit::TransitionData transitionData ); + private: - //undefined - BeatControl( const BeatControl& ); - BeatControl& operator=( const BeatControl& ); + // undefined + ShadowButton( const ShadowButton& ); + ShadowButton& operator=( const ShadowButton& ); private: - // Implementation details - Dali::Toolkit::Visual::Base mVisual; - Dali::Toolkit::TransitionData mBounceTransition; - Dali::Toolkit::TransitionData mLeftTransition; - Dali::Toolkit::TransitionData mUpTransition; - Dali::Animation mAnimation; - Dali::Animation mXAnimation; - Dali::Animation mYAnimation; + // Data + Dali::Toolkit::Visual::Base mBackgroundVisual; + Dali::Toolkit::Visual::Base mCheckboxBgVisual; + Dali::Toolkit::Visual::Base mCheckboxFgVisual; + Dali::Toolkit::Visual::Base mLabelVisual; + + Transitions mTransitions; + Transforms mTransforms; + bool mCheckState; + bool mActiveState; }; } // Internal -inline Internal::BeatControl& GetImpl( Demo::BeatControl& handle ) +inline Internal::ShadowButton& GetImpl( Demo::ShadowButton& handle ) { DALI_ASSERT_ALWAYS( handle ); Dali::RefObject& object = handle.GetImplementation(); - return static_cast(object); + return static_cast(object); } -inline const Internal::BeatControl& GetImpl( const Demo::BeatControl& handle ) +inline const Internal::ShadowButton& GetImpl( const Demo::ShadowButton& handle ) { DALI_ASSERT_ALWAYS( handle ); const Dali::RefObject& object = handle.GetImplementation(); - return static_cast(object); + return static_cast(object); } } // Demo -#endif // DALI_DEMO_BEAT_CONTROL_IMPL_H +#endif // DALI_DEMO_SHADOW_BUTTON_IMPL_H diff --git a/examples/transitions/beat-control.cpp b/examples/transitions/shadow-button.cpp index c145b5e..13de599 100644 --- a/examples/transitions/beat-control.cpp +++ b/examples/transitions/shadow-button.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2017 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,22 +14,22 @@ * limitations under the License. */ -#include "beat-control.h" -#include "beat-control-impl.h" +#include "shadow-button.h" +#include "shadow-button-impl.h" namespace Demo { -BeatControl::BeatControl() +ShadowButton::ShadowButton() { } -BeatControl::BeatControl( const BeatControl& beatControl ) -: Control( beatControl ) +ShadowButton::ShadowButton( const ShadowButton& control ) +: Control( control ) { } -BeatControl& BeatControl::operator= ( const BeatControl& rhs ) +ShadowButton& ShadowButton::operator= ( const ShadowButton& rhs ) { if( &rhs != this ) { @@ -38,51 +38,56 @@ BeatControl& BeatControl::operator= ( const BeatControl& rhs ) return *this; } -BeatControl::~BeatControl() +ShadowButton::~ShadowButton() { } -BeatControl BeatControl::New() +ShadowButton ShadowButton::New() { - BeatControl beatControl = Internal::BeatControl::New(); - return beatControl; + ShadowButton control = Internal::ShadowButton::New(); + return control; } -BeatControl BeatControl::New( const std::string& url ) +ShadowButton ShadowButton::New( const std::string& url ) { - BeatControl beatControl = Internal::BeatControl::New(); - return beatControl; + ShadowButton control = Internal::ShadowButton::New(); + return control; } -BeatControl BeatControl::DownCast( BaseHandle handle ) +ShadowButton ShadowButton::DownCast( BaseHandle handle ) { - return Control::DownCast< BeatControl, Internal::BeatControl > ( handle ); + return Control::DownCast< ShadowButton, Internal::ShadowButton > ( handle ); } -void BeatControl::StartBounceAnimation() +void ShadowButton::SetActiveState( bool active ) { - GetImpl(*this).StartBounceAnimation(); + GetImpl(*this).SetActiveState( active ); } -void BeatControl::StartXAnimation() +bool ShadowButton::GetActiveState() { - GetImpl(*this).StartXAnimation(); + return GetImpl(*this).GetActiveState(); } -void BeatControl::StartYAnimation() + +void ShadowButton::SetCheckState( bool checkState ) { - GetImpl(*this).StartYAnimation(); + GetImpl(*this).SetCheckState( checkState ); } +bool ShadowButton::GetCheckState() +{ + return GetImpl(*this).GetCheckState(); +} -BeatControl::BeatControl( Internal::BeatControl& implementation ) +ShadowButton::ShadowButton( Internal::ShadowButton& implementation ) : Control( implementation ) { } -BeatControl::BeatControl( Dali::Internal::CustomActor* internal ) +ShadowButton::ShadowButton( Dali::Internal::CustomActor* internal ) : Control( internal ) { - VerifyCustomActorPointer< Internal::BeatControl >( internal ) ; + VerifyCustomActorPointer< Internal::ShadowButton >( internal ) ; } diff --git a/examples/transitions/beat-control.h b/examples/transitions/shadow-button.h index c424d89..e06b3db 100644 --- a/examples/transitions/beat-control.h +++ b/examples/transitions/shadow-button.h @@ -1,8 +1,8 @@ -#ifndef DALI_DEMO_BEAT_CONTROL_H -#define DALI_DEMO_BEAT_CONTROL_H +#ifndef DALI_DEMO_SHADOW_BUTTON_H +#define DALI_DEMO_SHADOW_BUTTON_H /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2017 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -23,20 +23,21 @@ namespace Demo { +// All type registered controls need to have the same name for the body +// and the handle namespace Internal { -// All type registered types need to have the same name for the body and the handle -class BeatControl; +class ShadowButton; } /** - * Control that allows the RGB channels of an image to be altered. + * Button that allows the RGB channels of an image to be altered. */ -class BeatControl : public Dali::Toolkit::Control +class ShadowButton : public Dali::Toolkit::Control { public: /** - * The start and end property ranges for this control + * The start and end property ranges for this Control */ enum PropertyRange { @@ -50,10 +51,16 @@ public: { enum { - BOUNCE_TRANSITION = PROPERTY_START_INDEX, - LEFT_TRANSITION, - UP_TRANSITION, - BEAT_VISUAL + ACTIVE_TRANSITION = PROPERTY_START_INDEX, + INACTIVE_TRANSITION, + CHECK_TRANSITION, + UNCHECK_TRANSITION, + BACKGROUND_VISUAL, + CHECKBOX_BG_VISUAL, + CHECKBOX_FG_VISUAL, + LABEL_VISUAL, + ACTIVE_STATE, + CHECK_STATE, }; }; @@ -62,60 +69,81 @@ public: // Construction / destruction /** * Create an uninitialized handle */ - BeatControl(); + ShadowButton(); /** - * Create a new image channel control without an image. Use - * SetImage to give this control an image + * Create a new image channel button without an image. Use + * SetImage to give this button an image */ - static BeatControl New(); + static ShadowButton New(); /** - * Create a new image channel control from a given URL + * Create a new image channel button from a given URL */ - static BeatControl New( const std::string& url ); + static ShadowButton New( const std::string& url ); /** * Destructor. This is non-virtual since derived Handle types must not * contain data or virtual methods */ - ~BeatControl(); + ~ShadowButton(); /** * Copy Constructor */ - BeatControl( const BeatControl& beatControl ); + ShadowButton( const ShadowButton& shadowButton ); /** * Assignment Operator */ - BeatControl& operator=( const BeatControl& beatControl ); + ShadowButton& operator=( const ShadowButton& shadowButton ); /** * Downcast */ - static BeatControl DownCast( BaseHandle handle ); + static ShadowButton DownCast( BaseHandle handle ); public: // API - void StartBounceAnimation(); + /** + * @brief Set the button to be active or inactive. + * + * The button will perform a transition if there is a state change. + * @param[in] active The active state + */ + void SetActiveState( bool active ); - void StartXAnimation(); + /** + * @brief Get the button's active state + * + * @return The active state + */ + bool GetActiveState(); - void StartYAnimation(); + /** + * Set the check state + * @param[in] checkState The state of the checkbox + */ + void SetCheckState( bool checkState ); + + /** + * Get the check state + * @return the check state + */ + bool GetCheckState(); public: // Not for public use /** * Create a handle from an implementation */ - BeatControl( Internal::BeatControl& implementation ); + ShadowButton( Internal::ShadowButton& implementation ); /** - * Allow the creation of an BeatControl handle from an internal CustomActor pointer + * Allow the creation of an ShadowButton handle from an internal CustomActor pointer */ - BeatControl( Dali::Internal::CustomActor* internal ); + ShadowButton( Dali::Internal::CustomActor* internal ); }; } // namespace Demo -#endif // DALI_DEMO_BEAT_CONTROL_H +#endif // DALI_DEMO_SHADOW_BUTTON_H diff --git a/examples/transitions/transition-application.cpp b/examples/transitions/transition-application.cpp index cf4312b..2e90252 100644 --- a/examples/transitions/transition-application.cpp +++ b/examples/transitions/transition-application.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2017 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -24,7 +24,9 @@ // External includes #include -#include "beat-control.h" +#include +#include +#include "shadow-button.h" #include #include @@ -33,16 +35,27 @@ using namespace Dali; using namespace Dali::Toolkit; +namespace +{ + +void SetLabelText( Button button, const char* label ) +{ + button.SetProperty( Toolkit::Button::Property::LABEL, label ); +} + +} + namespace Demo { const char* TransitionApplication::DEMO_THEME_ONE_PATH( DEMO_STYLE_DIR "style-example-theme-one.json" ); +const char* TransitionApplication::DEMO_THEME_TWO_PATH( DEMO_STYLE_DIR "style-example-theme-two.json" ); TransitionApplication::TransitionApplication( Application& application ) : mApplication( application ), mTitle(), - mBeatControl(), + mShadowButton(), mActionButtons(), mActionIndex( Property::INVALID_INDEX ) { @@ -68,8 +81,8 @@ void TransitionApplication::Create( Application& application ) contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); contentLayout.SetAnchorPoint( AnchorPoint::TOP_LEFT ); contentLayout.SetParentOrigin( ParentOrigin::TOP_LEFT ); - contentLayout.SetCellPadding( Size( 10, 10 ) ); - + contentLayout.SetCellPadding( Vector2( 0.0f, 5.0f ) ); + contentLayout.SetBackgroundColor( Vector4(0.949, 0.949, 0.949, 1.0) ); // Assign all rows the size negotiation property of fitting to children stage.Add( contentLayout ); @@ -77,63 +90,58 @@ void TransitionApplication::Create( Application& application ) mTitle = TextLabel::New( "Custom Control Transition Example" ); mTitle.SetName( "Title" ); mTitle.SetStyleName("Title"); - mTitle.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mTitle.SetParentOrigin( ParentOrigin::TOP_CENTER ); mTitle.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); mTitle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); mTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" ); contentLayout.Add( mTitle ); - contentLayout.SetFitHeight(0); - - mBeatControl = BeatControl::New(); - mBeatControl.SetName("BeatControl"); - mBeatControl.SetAnchorPoint( AnchorPoint::CENTER ); - mBeatControl.SetParentOrigin( ParentOrigin::CENTER ); - mBeatControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); - contentLayout.Add( mBeatControl ); - // beat control should fill the tableview cell, so no change to default parameters - - TableView actionButtonLayout = TableView::New( 1, 4 ); + contentLayout.SetFitHeight(0); // Fill width + + // Provide some padding around the center cell + TableView buttonLayout = TableView::New( 3, 3 ); + buttonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + buttonLayout.SetFixedHeight(1, 100 ); + buttonLayout.SetFixedWidth(1, 350 ); + contentLayout.Add( buttonLayout ); + + mShadowButton = ShadowButton::New(); + mShadowButton.SetName("ShadowButton"); + mShadowButton.SetActiveState( false ); + mShadowButton.SetAnchorPoint( AnchorPoint::CENTER ); + mShadowButton.SetParentOrigin( ParentOrigin::CENTER ); + mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) ); + + TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 ); actionButtonLayout.SetName("ThemeButtonsLayout"); - actionButtonLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) ); - - actionButtonLayout.SetAnchorPoint( AnchorPoint::CENTER ); - actionButtonLayout.SetParentOrigin( ParentOrigin::CENTER ); actionButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); actionButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT ); - actionButtonLayout.SetCellPadding( Size( 10, 10 ) ); actionButtonLayout.SetFitHeight( 0 ); TextLabel label = TextLabel::New( "Action: "); label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS ); label.SetStyleName("ActionLabel"); - label.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - label.SetParentOrigin( ParentOrigin::TOP_CENTER ); actionButtonLayout.AddChild( label, TableView::CellPosition( 0, 0 ) ); actionButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER ); - for( int i=0; i<3; ++i ) + for( int i=0; i( mActionIndex ); @@ -141,17 +149,39 @@ bool TransitionApplication::OnActionButtonClicked( Button button ) { case 0: { - mBeatControl.StartBounceAnimation(); + bool activeState = mShadowButton.GetActiveState(); + mShadowButton.SetActiveState( ! activeState ); + if( activeState ) + { + SetLabelText( button, "Activate" ); + } + else + { + SetLabelText( button, "Deactivate" ); + } + mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState ); break; } case 1: { - mBeatControl.StartXAnimation(); + bool checkState = mShadowButton.GetCheckState(); + mShadowButton.SetCheckState( ! checkState ); + if( checkState ) + { + SetLabelText( button, "Check" ); + } + else + { + SetLabelText( button, "Uncheck" ); + } break; } case 2: { - mBeatControl.StartYAnimation(); + break; + } + case 3: + { break; } } diff --git a/examples/transitions/transition-application.h b/examples/transitions/transition-application.h index 9d692db..f694c8d 100644 --- a/examples/transitions/transition-application.h +++ b/examples/transitions/transition-application.h @@ -2,7 +2,7 @@ #define DALI_DEMO_TRANSITION_APPLICATION_H /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2017 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -19,9 +19,7 @@ // External includes #include -//#include -#include -#include "beat-control.h" +#include "shadow-button.h" #include #include @@ -36,6 +34,9 @@ namespace Demo class TransitionApplication : public ConnectionTracker { public: + static const int NUMBER_OF_ACTION_BUTTONS=2; + +public: // Constructor TransitionApplication( Application& application ); @@ -52,15 +53,24 @@ public: // Key event handler void OnKeyEvent( const KeyEvent& event ); - bool OnActionButtonClicked(Button button); + bool OnActionButtonClicked( Button button ); static const char* DEMO_THEME_ONE_PATH; + static const char* DEMO_THEME_TWO_PATH; private: + + /** Create a visual map + * + * @param[in] index The index of the visual to create + * @param[out] map The map to generate + */ + Application& mApplication; TextLabel mTitle; - BeatControl mBeatControl; - PushButton mActionButtons[3]; + ShadowButton mShadowButton; + PushButton mActionButtons[NUMBER_OF_ACTION_BUTTONS]; + Property::Index mVisualIndex; Property::Index mActionIndex; }; diff --git a/examples/transitions/transition-example.cpp b/examples/transitions/transition-example.cpp index adc4563..9bf3cd2 100644 --- a/examples/transitions/transition-example.cpp +++ b/examples/transitions/transition-example.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2017 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/packaging/com.samsung.dali-demo.spec b/packaging/com.samsung.dali-demo.spec index 5d81885..19b2c92 100755 --- a/packaging/com.samsung.dali-demo.spec +++ b/packaging/com.samsung.dali-demo.spec @@ -2,7 +2,7 @@ Name: com.samsung.dali-demo Summary: The OpenGLES Canvas Core Demo -Version: 1.2.22 +Version: 1.2.23 Release: 1 Group: System/Libraries License: Apache-2.0 diff --git a/resources/images/preMultAlpha.png b/resources/images/preMultAlpha.png new file mode 100644 index 0000000..3cf8ab1 --- /dev/null +++ b/resources/images/preMultAlpha.png diff --git a/resources/style/images/CheckBg.png b/resources/style/images/CheckBg.png new file mode 100644 index 0000000..960f947 --- /dev/null +++ b/resources/style/images/CheckBg.png diff --git a/resources/style/images/Tick.png b/resources/style/images/Tick.png new file mode 100644 index 0000000..72bf93e --- /dev/null +++ b/resources/style/images/Tick.png diff --git a/resources/style/images/shadowButtonBg.9.png b/resources/style/images/shadowButtonBg.9.png new file mode 100644 index 0000000..996f965 --- /dev/null +++ b/resources/style/images/shadowButtonBg.9.png diff --git a/resources/style/mobile/images/CheckBg.png b/resources/style/mobile/images/CheckBg.png new file mode 100644 index 0000000..960f947 --- /dev/null +++ b/resources/style/mobile/images/CheckBg.png diff --git a/resources/style/mobile/images/Tick.png b/resources/style/mobile/images/Tick.png new file mode 100644 index 0000000..72bf93e --- /dev/null +++ b/resources/style/mobile/images/Tick.png diff --git a/resources/style/mobile/images/shadowButtonBg.9.png b/resources/style/mobile/images/shadowButtonBg.9.png new file mode 100644 index 0000000..996f965 --- /dev/null +++ b/resources/style/mobile/images/shadowButtonBg.9.png diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in index 20ef793..6d6c7d8 100644 --- a/resources/style/mobile/style-example-theme-one.json.in +++ b/resources/style/mobile/style-example-theme-one.json.in @@ -1,4 +1,8 @@ { + "constants": + { + "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style" + }, "styles": { "Title":{ @@ -69,9 +73,9 @@ [ { "target":"imageVisual", - "property":"colorAlpha", - "initialValue":0, - "targetValue":1, + "property":"mixColor", + "initialValue":[1,1,1,0], + "targetValue":[1,1,1,1], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -84,16 +88,16 @@ }, { "target":"imageVisual", - "property":"scale", - "targetValue":[1,1,1] + "property":"size", + "targetValue":[1,1] } ], "disableVisibilityTransition": [ { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":0, + "property":"mixColor", + "targetValue":[1,1,1,0], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -106,69 +110,269 @@ }, { "target":"imageVisual", - "property":"scale", + "property":"size", "targetValue":[1,1,1] } ] }, - "BeatControl": + "ShadowButton": { - "beatVisual":{ + "backgroundVisual":{ "visualType":"IMAGE", - "url":"{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png" + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png", + "mixColor":[1,1,1,0] }, - - "bounceTransition": + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":8, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0.3, 0.3, 0.3, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } + }, + "activeTransition": + [ + { + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.09, 0.28], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", + "property":"mixColor", + "initialValue":[1,1,1,0], + "targetValue":[1,1,1,1], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", + "property":"size", + "initialValue":[0.9, 0.9], + "targetValue":[1, 1], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.09, 0.28], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"labelVisual", + "property":"mixColor", + "initialValue":[0.2, 0.2, 0.2, 1.0], + "targetValue":[0, 0, 0, 1], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + } + ], + "inactiveTransition": [ { - "target":"beatVisual", + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.12, 0.37], + "targetValue":[0.09, 0.28], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", + "property":"mixColor", + "targetValue":[1,1,1,0], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.12, 0.37], + "targetValue":[0.09, 0.28], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"labelVisual", + "property":"mixColor", + "targetValue":[0.4, 0.4, 0.4, 1.0], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", "property":"size", - "initialValue":[0.5, 0.5], - "targetValue":[0.75, 0.75], + "targetValue":[0.9, 0.9], "animator": { - "alphaFunction":"BOUNCE", + "alphaFunction":"EASE_OUT_BACK", "timePeriod": { - "duration":0.5, + "duration":0.8, "delay":0 } } } ], - - "leftTransition": + "checkTransition": [ { - "target":"beatVisual", - "property":"offset", - "initialValue":[0, 0], - "targetValue":[0.25, 0], + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 0.0, 1.0], + "targetValue":[0.0, 0.0, 1.0, 1.0], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.0, 0.37], + "targetValue":[0.12, 0.37], "animator": { - "alphaFunction":"BOUNCE", + "alphaFunction":"EASE_IN", "timePeriod": { - "duration":0.5, + "duration":0.4, "delay":0 } } } ], - - "upTransition": + "uncheckTransition": [ { - "target":"beatVisual", - "property":"offset", - "initialValue":[0, 0], - "targetValue":[0, 0.25], + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 1.0, 1.0], + "targetValue":[0.0, 0.0, 0.0, 1.0], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "targetValue":[0.0, 0.37], "animator": { - "alphaFunction":"BOUNCE", + "alphaFunction":"EASE_OUT", "timePeriod": { - "duration":0.5, + "duration":0.4, "delay":0 } } diff --git a/resources/style/mobile/style-example-theme-three.json.in b/resources/style/mobile/style-example-theme-three.json.in index 88aad44..f77d957 100644 --- a/resources/style/mobile/style-example-theme-three.json.in +++ b/resources/style/mobile/style-example-theme-three.json.in @@ -53,9 +53,9 @@ [ { "target":"imageVisual", - "property":"scale", - "initialValue":[0.1,0.1,0.1], - "targetValue":[1,1,1], + "property":"size", + "initialValue":[0.1,0.1], + "targetValue":[1,1], "animator": { "alphaFunction":"EASE_IN", @@ -68,17 +68,17 @@ }, { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":1 + "property":"mixColor", + "targetValue":[1,1,1,1] } ], "disableVisibilityTransition": [ { "target":"imageVisual", - "property":"scale", - "initialValue":[1,1,1], - "targetValue":[0.1,0.1,0.1], + "property":"size", + "initialValue":[1,1], + "targetValue":[0.1,0.1], "animator": { "alphaFunction":"EASE_OUT", @@ -91,8 +91,8 @@ }, { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":0, + "property":"mixColor", + "targetValue":[1,1,1,0], "animator": { "alphaFunction":"EASE_OUT", diff --git a/resources/style/mobile/style-example-theme-two.json.in b/resources/style/mobile/style-example-theme-two.json.in index 9a99988..54857ba 100644 --- a/resources/style/mobile/style-example-theme-two.json.in +++ b/resources/style/mobile/style-example-theme-two.json.in @@ -25,10 +25,16 @@ // Change an icon size, see if it gets properly re-sized "RadioButton":{ - "unselectedStateImage":"{STYLE_DIR}/images/radio-button-unselected.png", - "selectedStateImage":"{STYLE_DIR}/images/radio-button-selected.png", - "disabledStateImage":"{STYLE_DIR}/images/radio-button-unselected-disabled.png", - "imageLabelGap":10, + "unselectedVisual": + { + "visualType": "IMAGE", + "url": "{STYLE_DIR}/images/radio-button-unselected.png" + }, + "selectedVisual": + { + "visualType": "IMAGE", + "url": "{STYLE_DIR}/images/radio-button-selected.png" + }, "label":{ "textColor": [0.1,1,1,1] } @@ -99,9 +105,9 @@ [ { "target":"imageVisual", - "property":"colorAlpha", - "initialValue":0, - "targetValue":1, + "property":"mixColor", + "initialValue":[1,1,1,0], + "targetValue":[1,1,1,1], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -111,14 +117,19 @@ "delay":0 } } + }, + { + "target":"imageVisual", + "property":"size", + "targetValue":[1,1] } ], "disableVisibilityTransition": [ { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":0, + "property":"mixColor", + "targetValue":[1,1,1,0], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -131,8 +142,89 @@ }, { "target":"imageVisual", - "property":"scale", - "targetValue":[1,1,1] + "property":"size", + "targetValue":[1,1] + } + ] + }, + "ShadowButton": + { + "backgroundVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png" + }, + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":8, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0.3, 0.3, 0.3, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } + }, + "activeTransition": + [ + { + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.09, 0.28], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + } + ], + "inactiveTransition": + [ + { + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.12, 0.37], + "targetValue":[0.09, 0.28], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } } ] } diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in index 20ef793..a28f842 100644 --- a/resources/style/style-example-theme-one.json.in +++ b/resources/style/style-example-theme-one.json.in @@ -1,4 +1,8 @@ { + "constants": + { + "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style" + }, "styles": { "Title":{ @@ -69,9 +73,9 @@ [ { "target":"imageVisual", - "property":"colorAlpha", - "initialValue":0, - "targetValue":1, + "property":"mixColor", + "initialValue":[1,1,1,0], + "targetValue":[1,1,1,1], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -84,16 +88,16 @@ }, { "target":"imageVisual", - "property":"scale", - "targetValue":[1,1,1] + "property":"size", + "targetValue":[1,1] } ], "disableVisibilityTransition": [ { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":0, + "property":"mixColor", + "targetValue":[1,1,1,0], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -106,69 +110,269 @@ }, { "target":"imageVisual", - "property":"scale", + "property":"size", "targetValue":[1,1,1] } ] }, - "BeatControl": + "ShadowButton": { - "beatVisual":{ + "backgroundVisual":{ "visualType":"IMAGE", - "url":"{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png" + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png", + "mixColor":[1,1,1,0] }, - - "bounceTransition": + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":20, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0.3, 0.3, 0.3, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } + }, + "activeTransition": + [ + { + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.09, 0.28], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", + "property":"mixColor", + "initialValue":[1,1,1,0], + "targetValue":[1,1,1,1], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", + "property":"size", + "initialValue":[0.9, 0.9], + "targetValue":[1, 1], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.09, 0.28], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"labelVisual", + "property":"mixColor", + "initialValue":[0.2, 0.2, 0.2, 1.0], + "targetValue":[0, 0, 0, 1], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + } + ], + "inactiveTransition": [ { - "target":"beatVisual", + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.12, 0.37], + "targetValue":[0.09, 0.28], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", + "property":"mixColor", + "targetValue":[1,1,1,0], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.12, 0.37], + "targetValue":[0.09, 0.28], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"labelVisual", + "property":"mixColor", + "targetValue":[0.4, 0.4, 0.4, 1.0], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + }, + { + "target":"backgroundVisual", "property":"size", - "initialValue":[0.5, 0.5], - "targetValue":[0.75, 0.75], + "targetValue":[0.9, 0.9], "animator": { - "alphaFunction":"BOUNCE", + "alphaFunction":"EASE_OUT_BACK", "timePeriod": { - "duration":0.5, + "duration":0.8, "delay":0 } } } ], - - "leftTransition": + "checkTransition": [ { - "target":"beatVisual", - "property":"offset", - "initialValue":[0, 0], - "targetValue":[0.25, 0], + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 0.0, 1.0], + "targetValue":[0.0, 0.0, 1.0, 1.0], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "initialValue":[0.0, 0.37], + "targetValue":[0.12, 0.37], "animator": { - "alphaFunction":"BOUNCE", + "alphaFunction":"EASE_IN", "timePeriod": { - "duration":0.5, + "duration":0.4, "delay":0 } } } ], - - "upTransition": + "uncheckTransition": [ { - "target":"beatVisual", - "property":"offset", - "initialValue":[0, 0], - "targetValue":[0, 0.25], + "target":"checkboxFgVisual", + "property":"pixelArea", + "initialValue":[0.0, 0.0, 1.0, 1.0], + "targetValue":[0.0, 0.0, 0.0, 1.0], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + }, + { + "target":"checkboxFgVisual", + "property":"size", + "targetValue":[0.0, 0.37], "animator": { - "alphaFunction":"BOUNCE", + "alphaFunction":"EASE_OUT", "timePeriod": { - "duration":0.5, + "duration":0.4, "delay":0 } } diff --git a/resources/style/style-example-theme-three.json.in b/resources/style/style-example-theme-three.json.in index 88aad44..f77d957 100644 --- a/resources/style/style-example-theme-three.json.in +++ b/resources/style/style-example-theme-three.json.in @@ -53,9 +53,9 @@ [ { "target":"imageVisual", - "property":"scale", - "initialValue":[0.1,0.1,0.1], - "targetValue":[1,1,1], + "property":"size", + "initialValue":[0.1,0.1], + "targetValue":[1,1], "animator": { "alphaFunction":"EASE_IN", @@ -68,17 +68,17 @@ }, { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":1 + "property":"mixColor", + "targetValue":[1,1,1,1] } ], "disableVisibilityTransition": [ { "target":"imageVisual", - "property":"scale", - "initialValue":[1,1,1], - "targetValue":[0.1,0.1,0.1], + "property":"size", + "initialValue":[1,1], + "targetValue":[0.1,0.1], "animator": { "alphaFunction":"EASE_OUT", @@ -91,8 +91,8 @@ }, { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":0, + "property":"mixColor", + "targetValue":[1,1,1,0], "animator": { "alphaFunction":"EASE_OUT", diff --git a/resources/style/style-example-theme-two.json.in b/resources/style/style-example-theme-two.json.in index d6e257b..791a79e 100644 --- a/resources/style/style-example-theme-two.json.in +++ b/resources/style/style-example-theme-two.json.in @@ -105,9 +105,9 @@ [ { "target":"imageVisual", - "property":"colorAlpha", - "initialValue":0, - "targetValue":1, + "property":"mixColor", + "initialValue":[1,1,1,0], + "targetValue":[1,1,1,1], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -120,16 +120,16 @@ }, { "target":"imageVisual", - "property":"scale", - "targetValue":[1,1,1] + "property":"size", + "targetValue":[1,1] } ], "disableVisibilityTransition": [ { "target":"imageVisual", - "property":"colorAlpha", - "targetValue":0, + "property":"mixColor", + "targetValue":[1,1,1,0], "animator": { "alphaFunction":"EASE_IN_OUT", @@ -142,8 +142,89 @@ }, { "target":"imageVisual", - "property":"scale", - "targetValue":[1,1,1] + "property":"size", + "targetValue":[1,1] + } + ] + }, + "ShadowButton": + { + "backgroundVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/shadowButtonBg.9.png" + }, + "checkboxBgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/CheckBg.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "checkboxFgVisual":{ + "visualType":"IMAGE", + "url":"{STYLE_DIR}/images/Tick.png", + "transform":{ + "size":[0.09, 0.28], + "offset":[30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_BEGIN", + "anchorPoint":"CENTER_BEGIN" + } + }, + "labelVisual":{ + "visualType":"TEXT", + "text":"Don't show again", + "pointSize":20, + "horizontalAlignment":"END", + "verticalAlignment":"CENTER", + "textColor":[1,1,1,1], + "mixColor":[0.3, 0.3, 0.3, 1], + "transform":{ + "size":[0.9, 0.9], + "offset":[-30,0], + "offsetSizeMode":[1,1,0,0], + "origin":"CENTER_END", + "anchorPoint":"CENTER_END" + } + }, + "activeTransition": + [ + { + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.09, 0.28], + "targetValue":[0.12, 0.37], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } + } + ], + "inactiveTransition": + [ + { + "target":"checkboxBgVisual", + "property":"size", + "initialValue":[0.12, 0.37], + "targetValue":[0.09, 0.28], + "animator": + { + "alphaFunction":"EASE_OUT_BACK", + "timePeriod": + { + "duration":0.8, + "delay":0 + } + } } ] }