diff --git a/README b/README deleted file mode 100644 index 05417af..0000000 --- a/README +++ /dev/null @@ -1,90 +0,0 @@ -T.O.C. -====== - - 1. GBS Builds - 1.1. NON-SMACK Targets - 1.2. SMACK enabled Targets - 1.3. DEBUG Builds - 2. Building for Ubuntu desktop - 2.1. Minimum Requirements - 2.2. Building the Repository - 2.3. DEBUG Builds - 3. Creating an example - 4. Installing Emscripten examples - - -1. GBS Builds -============= - -1.1. NON-SMACK Targets ----------------------- - - gbs build -A [TARGET_ARCH] - -1.2. SMACK enabled Targets --------------------------- - - gbs build -A [TARGET_ARCH] --define "%enable_dali_smack_rules 1" - -1.3. DEBUG Builds ------------------ - - gbs build -A [TARGET_ARCH] --define "%enable_debug 1" - - - -2. Building for Ubuntu desktop -============================== - -2.1. Minimum Requirements ------------------------- - - - Ubuntu 14.04 - - Environment created using dali_env script in dali-core repository - -2.2. Building the Repository ----------------------------- - -To build the repository enter the 'build/tizen' folder: - - cd dali-demo/build/tizen - -Then run the following commands: - - cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX . - make install -j8 - -2.3. DEBUG Builds ------------------ - -Specify a debug build when building for desktop by passing the following parameter to cmake: - - cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX -DCMAKE_BUILD_TYPE=Debug . - -Before running make install as normal: - - make install -j8 - - -3. Creating an example -====================== - - - Make a directory in the "examples" directory. Only one example will be created per directory. - - The executable installed will have a ".example" appended to it, e.g. a "blocks" directory produces "blocks.example". - - Add all source files for the required example in this directory. - - Modify "com.samsung.dali-demo.xml" to include your example so that it can be launched on target. - - No changes are required to the make system as long as the above is followed, your example will be automatically built & installed. - - -4. Installing Emscripten Examples -================================= - -Some Emscripten Javascript examples are included in dali-demo. - -They do not require building, to install them run the provided install script. -Note: Your dali-env must be setup as it will install to your dali-env/opt/share/emscripten directory. - -# cd ./emscripten-examples -# ./install.sh - -Run the examples by either opening them in a browser, or, running the browser from the command line with an example as a parameter. diff --git a/README.md b/README.md new file mode 100644 index 0000000..3de790b --- /dev/null +++ b/README.md @@ -0,0 +1,79 @@ + + +# Table of Contents + + * [Build Instructions](#build-instructions) + * [1. Building for Ubuntu desktop](#1-building-for-ubuntu-desktop) + * [Minimum Requirements](#minimum-requirements) + * [Building the Repository](#building-the-repository) + * [DEBUG Builds](#debug-builds) + * [2. GBS Builds](#2-gbs-builds) + * [NON-SMACK Targets](#non-smack-targets) + * [SMACK enabled Targets](#smack-enabled-targets) + * [DEBUG Builds](#debug-builds-1) + * [Creating an example](#creating-an-example) + * [Installing Emscripten Examples](#installing-emscripten-examples) + +# Build Instructions + +## 1. Building for Ubuntu desktop + +### Minimum Requirements + + - Ubuntu 14.04 or later + - Environment created using dali_env script in dali-core repository + +### Building the Repository + +To build the repository enter the 'build/tizen' folder: + + $ cd dali-demo/build/tizen + +Then run the following commands: + + $ cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX . + $ make install -j8 + +### DEBUG Builds + +Specify a debug build when building for desktop by passing the following parameter to cmake: + + $ cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX -DCMAKE_BUILD_TYPE=Debug . + +Before running make install as normal: + + $ make install -j8 + +## 2. GBS Builds + +### NON-SMACK Targets + + $ gbs build -A [TARGET_ARCH] + +### SMACK enabled Targets + + $ gbs build -A [TARGET_ARCH] --define "%enable_dali_smack_rules 1" + +### DEBUG Builds + + $ gbs build -A [TARGET_ARCH] --define "%enable_debug 1" + +# Creating an example + + - Make a directory in the "examples" directory. Only one example will be created per directory. + - The executable installed will have a ".example" appended to it, e.g. a "blocks" directory produces "blocks.example". + - Add all source files for the required example in this directory. + - Modify "com.samsung.dali-demo.xml" to include your example so that it can be launched on target. + - No changes are required to the make system as long as the above is followed, your example will be automatically built & installed. + +# Installing Emscripten Examples + +Some Emscripten Javascript examples are included in dali-demo. + +They do not require building, to install them run the provided install script. +Note: Your dali-env must be setup as it will install to your dali-env/opt/share/emscripten directory. + + $ cd ./emscripten-examples + $ ./install.sh + +Run the examples by either opening them in a browser, or, running the browser from the command line with an example as a parameter. diff --git a/examples/styling/image-channel-control-impl.cpp b/examples/styling/image-channel-control-impl.cpp index dc133d1..aa4f325 100644 --- a/examples/styling/image-channel-control-impl.cpp +++ b/examples/styling/image-channel-control-impl.cpp @@ -18,6 +18,7 @@ #include #include #include +#include using namespace Dali; // Needed for macros @@ -53,6 +54,11 @@ DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "redChannel", FLOAT, RED_ DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "greenChannel", FLOAT, GREEN_CHANNEL ); DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "blueChannel", FLOAT, BLUE_CHANNEL ); +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "visibility", BOOLEAN, VISIBILITY ); +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "enableVisibilityTransition", ARRAY, ENABLE_VISIBILITY_TRANSITION ); +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "disableVisibilityTransition", ARRAY, DISABLE_VISIBILITY_TRANSITION ); + +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "imageVisual", MAP, IMAGE_VISUAL ); DALI_TYPE_REGISTRATION_END(); } // anonymous namespace @@ -60,7 +66,9 @@ DALI_TYPE_REGISTRATION_END(); Internal::ImageChannelControl::ImageChannelControl() : Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ), - mChannels( 1.0f, 1.0f, 1.0f ) + mChannels( 1.0f, 1.0f, 1.0f ), + mVisibility(true), + mTargetVisibility(true) { } @@ -90,10 +98,60 @@ void ImageChannelControl::SetImage( const std::string& url ) properties[Dali::Toolkit::ImageVisual::Property::URL] = url; Dali::Toolkit::InitializeVisual( self, mVisual, properties ); + RegisterVisual( Demo::ImageChannelControl::Property::IMAGE_VISUAL, self, mVisual ); + mVisual.SetName("imageVisual"); RelayoutRequest(); } +void ImageChannelControl::SetVisibility( bool visibility ) +{ + printf("ImageChannelControl %s: SetVisibility( %s )\n", Self().GetName().c_str(), visibility?"T":"F" ); + + Animation animation; + + if( mAnimation ) + { + mAnimation.Stop(); + mAnimation.FinishedSignal().Disconnect( this, &ImageChannelControl::OnStateChangeAnimationFinished ); + OnStateChangeAnimationFinished(mAnimation); + } + + if( mVisibility != visibility ) + { + if( mVisibility ) + { + if( mDisableVisibilityTransition.Count() > 0 ) + { + mAnimation = CreateTransition( mDisableVisibilityTransition ); + } + } + else + { + if( mEnableVisibilityTransition.Count() > 0 ) + { + mAnimation = CreateTransition( mEnableVisibilityTransition ); + } + } + } + + if( mAnimation ) + { + mAnimation.FinishedSignal().Connect( this, &ImageChannelControl::OnStateChangeAnimationFinished ); + mAnimation.Play(); + mTargetVisibility = visibility; + } + else + { + mVisibility = visibility; + } +} + +void ImageChannelControl::OnStateChangeAnimationFinished( Animation& src ) +{ + mVisibility = mTargetVisibility; +} + void ImageChannelControl::OnInitialize() { Actor self = Self(); @@ -144,6 +202,12 @@ Vector3 ImageChannelControl::GetNaturalSize() return Vector3::ZERO; } +void ImageChannelControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change ) +{ + // Chain up. + Control::OnStyleChange( styleManager, change ); +} + /////////////////////////////////////////////////////////// // @@ -154,12 +218,55 @@ void ImageChannelControl::SetProperty( BaseObject* object, Property::Index index { Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) ); - if ( imageChannelControl ) + if( imageChannelControl ) { ImageChannelControl& impl = GetImpl( imageChannelControl ); Actor self = impl.Self(); switch ( index ) { + case Demo::ImageChannelControl::Property::RESOURCE_URL: + { + impl.SetImage( value.Get() ); + break; + } + case Demo::ImageChannelControl::Property::IMAGE_VISUAL: + { + Property::Map* map = value.GetMap(); + if( map ) + { + Dali::Toolkit::InitializeVisual( self, impl.mVisual, *map ); + } + break; + } + case Demo::ImageChannelControl::Property::VISIBILITY: + { + impl.SetVisibility( value.Get() ); + break; + } + case Demo::ImageChannelControl::Property::ENABLE_VISIBILITY_TRANSITION: + { + if( value.GetType() == Property::ARRAY ) + { + impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray()); + } + else if( value.GetType() == Property::MAP ) + { + impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() ); + } + break; + } + case Demo::ImageChannelControl::Property::DISABLE_VISIBILITY_TRANSITION: + { + if( value.GetType() == Property::ARRAY ) + { + impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray()); + } + else if( value.GetType() == Property::MAP ) + { + impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() ); + } + break; + } case Demo::ImageChannelControl::Property::RED_CHANNEL: { impl.mChannels[0] = value.Get(); @@ -208,6 +315,13 @@ Property::Value ImageChannelControl::GetProperty( BaseObject* object, Property:: value = impl.mChannels[2]; break; } + case Demo::ImageChannelControl::Property::VISIBILITY: + { + value = impl.mVisibility; + break; + } + default: + break; } } diff --git a/examples/styling/image-channel-control-impl.h b/examples/styling/image-channel-control-impl.h index a733dfd..bcfa9ea 100644 --- a/examples/styling/image-channel-control-impl.h +++ b/examples/styling/image-channel-control-impl.h @@ -18,8 +18,10 @@ */ #include "image-channel-control.h" +#include #include #include +#include namespace Demo { @@ -43,6 +45,11 @@ public: // API */ void SetImage( const std::string& url ); + /** + * @copydoc ImageChannelControl::SetVisibility + */ + void SetVisibility( bool visibility ); + public: // Properties /** * Called when a property of an object of this type is set. @@ -86,6 +93,14 @@ private: // From Control */ virtual Dali::Vector3 GetNaturalSize(); + /** + * @copydoc Toolkit::Control::OnStyleChange + */ + virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change ); + +private: + void OnStateChangeAnimationFinished(Dali::Animation& handle); + private: //undefined ImageChannelControl( const ImageChannelControl& ); @@ -96,7 +111,12 @@ private: std::string mUrl; Dali::Toolkit::Visual::Base mVisual; Dali::Vector3 mChannels; + Dali::Toolkit::TransitionData mEnableVisibilityTransition; + Dali::Toolkit::TransitionData mDisableVisibilityTransition; + Dali::Animation mAnimation; Dali::Property::Index mChannelIndex; + bool mVisibility:1; + bool mTargetVisibility:1; }; } // Internal diff --git a/examples/styling/image-channel-control.cpp b/examples/styling/image-channel-control.cpp index afe870d..45a0b29 100644 --- a/examples/styling/image-channel-control.cpp +++ b/examples/styling/image-channel-control.cpp @@ -65,6 +65,11 @@ void ImageChannelControl::SetImage( const std::string& url ) GetImpl( *this ).SetImage( url ); } +void ImageChannelControl::SetVisibility( bool visibility ) +{ + GetImpl( *this ).SetVisibility( visibility ); +} + ImageChannelControl::ImageChannelControl( Internal::ImageChannelControl& implementation ) : Control( implementation ) { diff --git a/examples/styling/image-channel-control.h b/examples/styling/image-channel-control.h index 12eb5de..e48c21d 100644 --- a/examples/styling/image-channel-control.h +++ b/examples/styling/image-channel-control.h @@ -42,7 +42,6 @@ public: { PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1, PROPERTY_END_INDEX = PROPERTY_START_INDEX + 1000, - ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX, ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000 }; @@ -51,11 +50,14 @@ public: { enum { - RESOURCE_URL = PROPERTY_START_INDEX, RED_CHANNEL, GREEN_CHANNEL, - BLUE_CHANNEL + BLUE_CHANNEL, + VISIBILITY, + ENABLE_VISIBILITY_TRANSITION, + DISABLE_VISIBILITY_TRANSITION, + IMAGE_VISUAL }; }; @@ -106,6 +108,11 @@ public: // API */ void SetImage( const std::string& url ); + /** + * Set the visibility of this control + */ + void SetVisibility( bool visibility ); + public: // Not for public use /** * Create a handle from an implementation diff --git a/examples/styling/styling-application.cpp b/examples/styling/styling-application.cpp index c885987..a80a97b 100644 --- a/examples/styling/styling-application.cpp +++ b/examples/styling/styling-application.cpp @@ -198,14 +198,41 @@ void StylingApplication::Create( Application& application ) mRadioButtons[0].SetSelected( true ); - mImageChannelControl = ImageChannelControl::New( BIG_IMAGE_1 ); - mImageChannelControl.SetName("ImageChannelControl"); - mImageChannelControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS ); - mImageChannelControl.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO ); - imageSelectLayout.AddChild( mImageChannelControl, TableView::CellPosition( 0, 1 ) ); - + mImagePlacement = Actor::New(); + mImagePlacement.SetParentOrigin( ParentOrigin::CENTER ); + mImagePlacement.SetAnchorPoint( AnchorPoint::CENTER ); + mImagePlacement.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + imageSelectLayout.AddChild( mImagePlacement, TableView::CellPosition( 0, 1 ) ); imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER ); + mIcc1 = ImageChannelControl::New( BIG_IMAGE_1 ); + mIcc1.SetName("ICC1"); + mIcc1.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS ); + mIcc1.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO ); + mIcc1.SetParentOrigin( ParentOrigin::CENTER ); + mIcc1.SetVisibility( true ); + + mImagePlacement.Add( mIcc1 ); + + mIcc2 = ImageChannelControl::New( BIG_IMAGE_2 ); + mIcc2.SetName("ICC2"); + mIcc2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS ); + mIcc2.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO ); + mIcc2.SetParentOrigin( ParentOrigin::CENTER ); + mIcc2.SetVisibility( false ); + + mImagePlacement.Add( mIcc2 ); + + mIcc3 = ImageChannelControl::New( BIG_IMAGE_3 ); + mIcc3.SetName("ICC3"); + mIcc3.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS ); + mIcc3.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO ); + mIcc3.SetParentOrigin( ParentOrigin::CENTER ); + mIcc3.SetVisibility( false ); + + mImagePlacement.Add( mIcc3 ); + + mImageChannelControl = mIcc1; TableView channelSliderLayout = TableView::New( 3, 3 ); channelSliderLayout.SetName("ChannelSliderLayout"); @@ -451,23 +478,40 @@ TextLabel StylingApplication::CreateTitle( std::string title ) bool StylingApplication::OnButtonStateChange( Button button ) { - // Todo: save / restore slider states per image + // On button press, called twice, once to tell new button it's selected, + // once to tell old button it isn't selected? + +// Todo: save / restore slider states per image - if( mImageChannelControl ) + if( button.IsSelected() ) { + + ImageChannelControl prevIcc = mImageChannelControl; + if( mRadioButtons[0].IsSelected() ) { - mImageChannelControl.SetImage( BIG_IMAGE_1 ); + mImageChannelControl = mIcc1; } else if( mRadioButtons[1].IsSelected() ) { - mImageChannelControl.SetImage( BIG_IMAGE_2 ); + mImageChannelControl = mIcc2; } else if( mRadioButtons[2].IsSelected() ) { - mImageChannelControl.SetImage( BIG_IMAGE_3 ); + mImageChannelControl = mIcc3; + } + + if( prevIcc ) + { + prevIcc.SetVisibility( false ); + } + + if( mImageChannelControl ) + { + mImageChannelControl.SetVisibility( true ); } } + return true; } @@ -512,6 +556,7 @@ bool StylingApplication::OnThemeButtonClicked( Button button ) break; } } + StyleManager::Get().ApplyTheme( themePath ); return true; diff --git a/examples/styling/styling-application.h b/examples/styling/styling-application.h index 8dbb395..ad7af1b 100644 --- a/examples/styling/styling-application.h +++ b/examples/styling/styling-application.h @@ -87,6 +87,10 @@ private: PushButton mThemeButtons[3]; PushButton mResetButton; ImageChannelControl mImageChannelControl; + ImageChannelControl mIcc1; + ImageChannelControl mIcc2; + ImageChannelControl mIcc3; + Actor mImagePlacement; Popup mResetPopup; PanGestureDetector mPanGestureDetector; }; diff --git a/packaging/com.samsung.dali-demo.spec b/packaging/com.samsung.dali-demo.spec index e00cb87..237dae1 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.11 +Version: 1.2.12 Release: 1 Group: System/Libraries License: Apache-2.0 diff --git a/resources/po/fi.po b/resources/po/fi.po index 8b8ce7c..1bf812c 100755 --- a/resources/po/fi.po +++ b/resources/po/fi.po @@ -1,3 +1,6 @@ +msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES" +msgstr "Animoidut Muodot" + msgid "DALI_DEMO_STR_TITLE_BLOCKS" msgstr "Lohko Peli" diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in index e84d423..8d18589 100644 --- a/resources/style/mobile/style-example-theme-one.json.in +++ b/resources/style/mobile/style-example-theme-one.json.in @@ -1,7 +1,7 @@ { "styles": { - "title":{ + "Title":{ "textColor":"#0000ff", "background": { @@ -9,59 +9,107 @@ "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] } }, - "tableview":{ + "TableView":{ "background": { "visualType":"COLOR", "mixColor": [ 1.0, 1.0, 1.0, 0.03 ] } }, - "flexcontainer":{ + "FlexContainer":{ "background": { "visualType":"COLOR", "mixColor": [ 1.0, 1.0, 1.0, 0.1 ] } }, - "radiobutton":{ + "RadioButton":{ "label":{ "textColor": [1,1,1,1] } }, - "checkboxbutton":{ + "CheckBoxButton":{ "label":{ "textColor": [1,1,1,1] } }, - "colorLabel1":{ + "ColorLabel1":{ "textColor": [1,0,0,1] }, - "colorLabel2":{ + "ColorLabel2":{ "textColor": [0,1,0,1] }, - "colorLabel3":{ + "ColorLabel3":{ "textColor": [0.3,0.3,1,1] }, - "themelabel":{ + "ThemeLabel":{ "textColor":[0,1,1,1] }, - "popupTitle":{ + "PopupTitle":{ "textColor":[1,1,1,1] }, - "popupBody":{ + "PopupBody":{ "textColor":[1,1,0,1] }, - "textlabel":{ + "TextLabel":{ "textColor":[0,0,0,1] }, - "colorSlider1":{ - "styles":["slider"] + "ColorSlider1":{ + "styles":["Slider"] }, - "colorSlider2":{ + "ColorSlider2":{ "styles":["slider"] }, - "colorSlider3":{ + "ColorSlider3":{ "styles":["slider"] + }, + "ImageChannelControl": + { + "enableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "initialValue":0, + "targetValue":1, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.25, + "delay":0 + } + } + }, + { + "target":"imageVisual", + "property":"scale", + "targetValue":[1,1,1] + } + ], + "disableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":0, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.25, + "delay":0 + } + } + }, + { + "target":"imageVisual", + "property":"scale", + "targetValue":[1,1,1] + } + ] } } } diff --git a/resources/style/mobile/style-example-theme-three.json.in b/resources/style/mobile/style-example-theme-three.json.in index 0326e3d..88aad44 100644 --- a/resources/style/mobile/style-example-theme-three.json.in +++ b/resources/style/mobile/style-example-theme-three.json.in @@ -1,51 +1,109 @@ { "styles": { - "title":{ + "Title":{ "textColor":"#0000ff", "background": { - "rendererType":"color", + "visualType":"COLOR", "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] } }, - "tableview":{ + "TableView":{ "background": { - "rendererType":"color", + "visualType":"COLOR", "mixColor": [ 1.0, 1.0, 1.0, 0.03 ] } }, - "radiobutton":{ + "RadioButton":{ "label":{ "textColor": [1,1,1,1] } }, - "checkboxbutton":{ + "CheckboxButton":{ "label":{ "textColor": [1,1,1,1] } }, - "colorLabel1":{ + "ColorLabel1":{ "textColor": [1,0,0,1] }, - "colorLabel2":{ + "ColorLabel2":{ "textColor": [0,1,0,1] }, - "colorLabel3":{ + "ColorLabel3":{ "textColor": [0.3,0.3,1,1] }, - "themelabel":{ + "ThemeLabel":{ "textColor":[0,1,1,1] }, - "popupTitle":{ + "PopupTitle":{ "textColor":[1,1,1,1] }, - "popupBody":{ + "PopupBody":{ "textColor":[1,1,0,1] }, - "textlabel":{ + "TextLabel":{ "textColor":[0,0,0,1] + }, + "ImageChannelControl": + { + "enableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"scale", + "initialValue":[0.1,0.1,0.1], + "targetValue":[1,1,1], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.3, + "delay":0.1 + } + } + }, + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":1 + } + ], + "disableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"scale", + "initialValue":[1,1,1], + "targetValue":[0.1,0.1,0.1], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.3, + "delay":0.0 + } + } + }, + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":0, + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.3, + "delay":0.0 + } + } + } + ] } } } diff --git a/resources/style/mobile/style-example-theme-two.json.in b/resources/style/mobile/style-example-theme-two.json.in index 884d1ca..9a99988 100644 --- a/resources/style/mobile/style-example-theme-two.json.in +++ b/resources/style/mobile/style-example-theme-two.json.in @@ -1,11 +1,11 @@ { "constants": { - "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@" + "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style" }, "styles": { - "title":{ + "Title":{ "textColor":"#0000ff", "background": { @@ -13,7 +13,7 @@ "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] } }, - "tableview":{ + "TableView":{ "background": { "visualType":"GRADIENT", @@ -24,10 +24,10 @@ }, // Change an icon size, see if it gets properly re-sized - "radiobutton":{ - "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png", - "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png", - "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png", + "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, "label":{ "textColor": [0.1,1,1,1] @@ -58,11 +58,11 @@ }, // Note, this overrides any non-renamed label styles, e.g. those in a button. - "textlabel":{ + "TextLabel":{ //"textColor":[0,0,0,1] }, - "thinslider":{ + "ThinSlider":{ "styles": ["slider"], "showPopup":true, "showValue":false, @@ -75,23 +75,66 @@ }, "enabled":true }, - "colorSlider1":{ - "styles":["thinslider"], + "ColorSlider1":{ + "styles":["ThinSlider"], "progressVisual":{ - "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png" + "url":"{STYLE_DIR}/images/slider-skin-progress-red.9.png" } }, - "colorSlider2":{ - "styles":["thinslider"], + "ColorSlider2":{ + "styles":["ThinSlider"], "progressVisual":{ - "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png" + "url":"{STYLE_DIR}/images/slider-skin-progress-green.9.png" } }, - "colorSlider3":{ + "ColorSlider3":{ "styles":["thinslider"], "progressVisual":{ - "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png" + "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png" } + }, + "ImageChannelControl": + { + "enableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "initialValue":0, + "targetValue":1, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + } + ], + "disableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":0, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0.2 + } + } + }, + { + "target":"imageVisual", + "property":"scale", + "targetValue":[1,1,1] + } + ] } } } diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in index 29b628c..8d18589 100644 --- a/resources/style/style-example-theme-one.json.in +++ b/resources/style/style-example-theme-one.json.in @@ -62,6 +62,54 @@ }, "ColorSlider3":{ "styles":["slider"] + }, + "ImageChannelControl": + { + "enableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "initialValue":0, + "targetValue":1, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.25, + "delay":0 + } + } + }, + { + "target":"imageVisual", + "property":"scale", + "targetValue":[1,1,1] + } + ], + "disableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":0, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.25, + "delay":0 + } + } + }, + { + "target":"imageVisual", + "property":"scale", + "targetValue":[1,1,1] + } + ] } } } diff --git a/resources/style/style-example-theme-three.json.in b/resources/style/style-example-theme-three.json.in index f6feabb..88aad44 100644 --- a/resources/style/style-example-theme-three.json.in +++ b/resources/style/style-example-theme-three.json.in @@ -46,6 +46,64 @@ }, "TextLabel":{ "textColor":[0,0,0,1] + }, + "ImageChannelControl": + { + "enableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"scale", + "initialValue":[0.1,0.1,0.1], + "targetValue":[1,1,1], + "animator": + { + "alphaFunction":"EASE_IN", + "timePeriod": + { + "duration":0.3, + "delay":0.1 + } + } + }, + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":1 + } + ], + "disableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"scale", + "initialValue":[1,1,1], + "targetValue":[0.1,0.1,0.1], + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.3, + "delay":0.0 + } + } + }, + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":0, + "animator": + { + "alphaFunction":"EASE_OUT", + "timePeriod": + { + "duration":0.3, + "delay":0.0 + } + } + } + ] } } } diff --git a/resources/style/style-example-theme-two.json.in b/resources/style/style-example-theme-two.json.in index 77a8586..9a99988 100644 --- a/resources/style/style-example-theme-two.json.in +++ b/resources/style/style-example-theme-two.json.in @@ -92,6 +92,49 @@ "progressVisual":{ "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png" } + }, + "ImageChannelControl": + { + "enableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "initialValue":0, + "targetValue":1, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0 + } + } + } + ], + "disableVisibilityTransition": + [ + { + "target":"imageVisual", + "property":"colorAlpha", + "targetValue":0, + "animator": + { + "alphaFunction":"EASE_IN_OUT", + "timePeriod": + { + "duration":0.4, + "delay":0.2 + } + } + }, + { + "target":"imageVisual", + "property":"scale", + "targetValue":[1,1,1] + } + ] } } }