Peter M. Groen / dali-demo

Commit 2fa69545ba52fa238710839f76352e7bef582f7d

Authored by David Steele
1 parent 2f41a309

Added a stylable transition to styling example. 

Added Enable / Disable transitions to ImageChannelControl which
can be set via the style sheet.

Added a Visibility attribute to ImageChannelControl which
forces the enable / disable transition to be executed when
the visibility changes.

Added 3 different transitions to the style sheet:
1) a cross fade
2) a longer cross fade
3) a scale change.

Change-Id: I82a1f0e4e4c89ae0bdcb1c59ce01a0a918f17afd
Signed-off-by: David Steele <david.steele@samsung.com>
Inline Side-by-side
Showing 12 changed files with 555 additions and 62 deletions
examples/styling/image-channel-control-impl.cpp
  View file @2fa6954
... ... @@ -18,6 +18,7 @@
18 18 #include <dali-toolkit/dali-toolkit.h>
19 19 #include <dali/public-api/object/type-registry-helper.h>
20 20 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
  21 +#include <cstdio>
21 22  
22 23 using namespace Dali; // Needed for macros
23 24  
... ... @@ -53,6 +54,11 @@ DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, &quot;redChannel&quot;, FLOAT, RED_
53 54 DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "greenChannel", FLOAT, GREEN_CHANNEL );
54 55 DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "blueChannel", FLOAT, BLUE_CHANNEL );
55 56  
  57 +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "visibility", BOOLEAN, VISIBILITY );
  58 +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "enableVisibilityTransition", ARRAY, ENABLE_VISIBILITY_TRANSITION );
  59 +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "disableVisibilityTransition", ARRAY, DISABLE_VISIBILITY_TRANSITION );
  60 +
  61 +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "imageVisual", MAP, IMAGE_VISUAL );
56 62 DALI_TYPE_REGISTRATION_END();
57 63  
58 64 } // anonymous namespace
... ... @@ -60,7 +66,9 @@ DALI_TYPE_REGISTRATION_END();
60 66  
61 67 Internal::ImageChannelControl::ImageChannelControl()
62 68 : Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ),
63   - mChannels( 1.0f, 1.0f, 1.0f )
  69 + mChannels( 1.0f, 1.0f, 1.0f ),
  70 + mVisibility(true),
  71 + mTargetVisibility(true)
64 72 {
65 73 }
66 74  
... ... @@ -90,10 +98,60 @@ void ImageChannelControl::SetImage( const std::string&amp; url )
90 98 properties[Dali::Toolkit::ImageVisual::Property::URL] = url;
91 99  
92 100 Dali::Toolkit::InitializeVisual( self, mVisual, properties );
  101 + RegisterVisual( Demo::ImageChannelControl::Property::IMAGE_VISUAL, self, mVisual );
  102 + mVisual.SetName("imageVisual");
93 103  
94 104 RelayoutRequest();
95 105 }
96 106  
  107 +void ImageChannelControl::SetVisibility( bool visibility )
  108 +{
  109 + printf("ImageChannelControl %s: SetVisibility( %s )\n", Self().GetName().c_str(), visibility?"T":"F" );
  110 +
  111 + Animation animation;
  112 +
  113 + if( mAnimation )
  114 + {
  115 + mAnimation.Stop();
  116 + mAnimation.FinishedSignal().Disconnect( this, &ImageChannelControl::OnStateChangeAnimationFinished );
  117 + OnStateChangeAnimationFinished(mAnimation);
  118 + }
  119 +
  120 + if( mVisibility != visibility )
  121 + {
  122 + if( mVisibility )
  123 + {
  124 + if( mDisableVisibilityTransition.Count() > 0 )
  125 + {
  126 + mAnimation = CreateTransition( mDisableVisibilityTransition );
  127 + }
  128 + }
  129 + else
  130 + {
  131 + if( mEnableVisibilityTransition.Count() > 0 )
  132 + {
  133 + mAnimation = CreateTransition( mEnableVisibilityTransition );
  134 + }
  135 + }
  136 + }
  137 +
  138 + if( mAnimation )
  139 + {
  140 + mAnimation.FinishedSignal().Connect( this, &ImageChannelControl::OnStateChangeAnimationFinished );
  141 + mAnimation.Play();
  142 + mTargetVisibility = visibility;
  143 + }
  144 + else
  145 + {
  146 + mVisibility = visibility;
  147 + }
  148 +}
  149 +
  150 +void ImageChannelControl::OnStateChangeAnimationFinished( Animation& src )
  151 +{
  152 + mVisibility = mTargetVisibility;
  153 +}
  154 +
97 155 void ImageChannelControl::OnInitialize()
98 156 {
99 157 Actor self = Self();
... ... @@ -144,6 +202,12 @@ Vector3 ImageChannelControl::GetNaturalSize()
144 202 return Vector3::ZERO;
145 203 }
146 204  
  205 +void ImageChannelControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change )
  206 +{
  207 + // Chain up.
  208 + Control::OnStyleChange( styleManager, change );
  209 +}
  210 +
147 211  
148 212 ///////////////////////////////////////////////////////////
149 213 //
... ... @@ -154,12 +218,55 @@ void ImageChannelControl::SetProperty( BaseObject* object, Property::Index index
154 218 {
155 219 Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) );
156 220  
157   - if ( imageChannelControl )
  221 + if( imageChannelControl )
158 222 {
159 223 ImageChannelControl& impl = GetImpl( imageChannelControl );
160 224 Actor self = impl.Self();
161 225 switch ( index )
162 226 {
  227 + case Demo::ImageChannelControl::Property::RESOURCE_URL:
  228 + {
  229 + impl.SetImage( value.Get<std::string>() );
  230 + break;
  231 + }
  232 + case Demo::ImageChannelControl::Property::IMAGE_VISUAL:
  233 + {
  234 + Property::Map* map = value.GetMap();
  235 + if( map )
  236 + {
  237 + Dali::Toolkit::InitializeVisual( self, impl.mVisual, *map );
  238 + }
  239 + break;
  240 + }
  241 + case Demo::ImageChannelControl::Property::VISIBILITY:
  242 + {
  243 + impl.SetVisibility( value.Get<bool>() );
  244 + break;
  245 + }
  246 + case Demo::ImageChannelControl::Property::ENABLE_VISIBILITY_TRANSITION:
  247 + {
  248 + if( value.GetType() == Property::ARRAY )
  249 + {
  250 + impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray());
  251 + }
  252 + else if( value.GetType() == Property::MAP )
  253 + {
  254 + impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() );
  255 + }
  256 + break;
  257 + }
  258 + case Demo::ImageChannelControl::Property::DISABLE_VISIBILITY_TRANSITION:
  259 + {
  260 + if( value.GetType() == Property::ARRAY )
  261 + {
  262 + impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray());
  263 + }
  264 + else if( value.GetType() == Property::MAP )
  265 + {
  266 + impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() );
  267 + }
  268 + break;
  269 + }
163 270 case Demo::ImageChannelControl::Property::RED_CHANNEL:
164 271 {
165 272 impl.mChannels[0] = value.Get<float>();
... ... @@ -208,6 +315,13 @@ Property::Value ImageChannelControl::GetProperty( BaseObject* object, Property::
208 315 value = impl.mChannels[2];
209 316 break;
210 317 }
  318 + case Demo::ImageChannelControl::Property::VISIBILITY:
  319 + {
  320 + value = impl.mVisibility;
  321 + break;
  322 + }
  323 + default:
  324 + break;
211 325 }
212 326 }
213 327  
... ...
examples/styling/image-channel-control-impl.h
  View file @2fa6954
... ... @@ -18,8 +18,10 @@
18 18 */
19 19  
20 20 #include "image-channel-control.h"
  21 +#include <dali/public-api/animation/animation.h>
21 22 #include <dali-toolkit/public-api/controls/control-impl.h>
22 23 #include <dali-toolkit/devel-api/visual-factory/visual-base.h>
  24 +#include <dali-toolkit/devel-api/visual-factory/transition-data.h>
23 25  
24 26 namespace Demo
25 27 {
... ... @@ -43,6 +45,11 @@ public: // API
43 45 */
44 46 void SetImage( const std::string& url );
45 47  
  48 + /**
  49 + * @copydoc ImageChannelControl::SetVisibility
  50 + */
  51 + void SetVisibility( bool visibility );
  52 +
46 53 public: // Properties
47 54 /**
48 55 * Called when a property of an object of this type is set.
... ... @@ -86,6 +93,14 @@ private: // From Control
86 93 */
87 94 virtual Dali::Vector3 GetNaturalSize();
88 95  
  96 + /**
  97 + * @copydoc Toolkit::Control::OnStyleChange
  98 + */
  99 + virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change );
  100 +
  101 +private:
  102 + void OnStateChangeAnimationFinished(Dali::Animation& handle);
  103 +
89 104 private:
90 105 //undefined
91 106 ImageChannelControl( const ImageChannelControl& );
... ... @@ -96,7 +111,12 @@ private:
96 111 std::string mUrl;
97 112 Dali::Toolkit::Visual::Base mVisual;
98 113 Dali::Vector3 mChannels;
  114 + Dali::Toolkit::TransitionData mEnableVisibilityTransition;
  115 + Dali::Toolkit::TransitionData mDisableVisibilityTransition;
  116 + Dali::Animation mAnimation;
99 117 Dali::Property::Index mChannelIndex;
  118 + bool mVisibility:1;
  119 + bool mTargetVisibility:1;
100 120 };
101 121  
102 122 } // Internal
... ...
examples/styling/image-channel-control.cpp
  View file @2fa6954
... ... @@ -65,6 +65,11 @@ void ImageChannelControl::SetImage( const std::string&amp; url )
65 65 GetImpl( *this ).SetImage( url );
66 66 }
67 67  
  68 +void ImageChannelControl::SetVisibility( bool visibility )
  69 +{
  70 + GetImpl( *this ).SetVisibility( visibility );
  71 +}
  72 +
68 73 ImageChannelControl::ImageChannelControl( Internal::ImageChannelControl& implementation )
69 74 : Control( implementation )
70 75 {
... ...
examples/styling/image-channel-control.h
  View file @2fa6954
... ... @@ -42,7 +42,6 @@ public:
42 42 {
43 43 PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1,
44 44 PROPERTY_END_INDEX = PROPERTY_START_INDEX + 1000,
45   -
46 45 ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX,
47 46 ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000
48 47 };
... ... @@ -51,11 +50,14 @@ public:
51 50 {
52 51 enum
53 52 {
54   -
55 53 RESOURCE_URL = PROPERTY_START_INDEX,
56 54 RED_CHANNEL,
57 55 GREEN_CHANNEL,
58   - BLUE_CHANNEL
  56 + BLUE_CHANNEL,
  57 + VISIBILITY,
  58 + ENABLE_VISIBILITY_TRANSITION,
  59 + DISABLE_VISIBILITY_TRANSITION,
  60 + IMAGE_VISUAL
59 61 };
60 62 };
61 63  
... ... @@ -106,6 +108,11 @@ public: // API
106 108 */
107 109 void SetImage( const std::string& url );
108 110  
  111 + /**
  112 + * Set the visibility of this control
  113 + */
  114 + void SetVisibility( bool visibility );
  115 +
109 116 public: // Not for public use
110 117 /**
111 118 * Create a handle from an implementation
... ...
examples/styling/styling-application.cpp
  View file @2fa6954
... ... @@ -198,14 +198,41 @@ void StylingApplication::Create( Application&amp; application )
198 198  
199 199 mRadioButtons[0].SetSelected( true );
200 200  
201   - mImageChannelControl = ImageChannelControl::New( BIG_IMAGE_1 );
202   - mImageChannelControl.SetName("ImageChannelControl");
203   - mImageChannelControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
204   - mImageChannelControl.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
205   - imageSelectLayout.AddChild( mImageChannelControl, TableView::CellPosition( 0, 1 ) );
206   -
  201 + mImagePlacement = Actor::New();
  202 + mImagePlacement.SetParentOrigin( ParentOrigin::CENTER );
  203 + mImagePlacement.SetAnchorPoint( AnchorPoint::CENTER );
  204 + mImagePlacement.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  205 + imageSelectLayout.AddChild( mImagePlacement, TableView::CellPosition( 0, 1 ) );
207 206 imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER );
208 207  
  208 + mIcc1 = ImageChannelControl::New( BIG_IMAGE_1 );
  209 + mIcc1.SetName("ICC1");
  210 + mIcc1.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
  211 + mIcc1.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
  212 + mIcc1.SetParentOrigin( ParentOrigin::CENTER );
  213 + mIcc1.SetVisibility( true );
  214 +
  215 + mImagePlacement.Add( mIcc1 );
  216 +
  217 + mIcc2 = ImageChannelControl::New( BIG_IMAGE_2 );
  218 + mIcc2.SetName("ICC2");
  219 + mIcc2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
  220 + mIcc2.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
  221 + mIcc2.SetParentOrigin( ParentOrigin::CENTER );
  222 + mIcc2.SetVisibility( false );
  223 +
  224 + mImagePlacement.Add( mIcc2 );
  225 +
  226 + mIcc3 = ImageChannelControl::New( BIG_IMAGE_3 );
  227 + mIcc3.SetName("ICC3");
  228 + mIcc3.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
  229 + mIcc3.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
  230 + mIcc3.SetParentOrigin( ParentOrigin::CENTER );
  231 + mIcc3.SetVisibility( false );
  232 +
  233 + mImagePlacement.Add( mIcc3 );
  234 +
  235 + mImageChannelControl = mIcc1;
209 236  
210 237 TableView channelSliderLayout = TableView::New( 3, 3 );
211 238 channelSliderLayout.SetName("ChannelSliderLayout");
... ... @@ -451,23 +478,40 @@ TextLabel StylingApplication::CreateTitle( std::string title )
451 478  
452 479 bool StylingApplication::OnButtonStateChange( Button button )
453 480 {
454   - // Todo: save / restore slider states per image
  481 + // On button press, called twice, once to tell new button it's selected,
  482 + // once to tell old button it isn't selected?
  483 +
  484 +// Todo: save / restore slider states per image
455 485  
456   - if( mImageChannelControl )
  486 + if( button.IsSelected() )
457 487 {
  488 +
  489 + ImageChannelControl prevIcc = mImageChannelControl;
  490 +
458 491 if( mRadioButtons[0].IsSelected() )
459 492 {
460   - mImageChannelControl.SetImage( BIG_IMAGE_1 );
  493 + mImageChannelControl = mIcc1;
461 494 }
462 495 else if( mRadioButtons[1].IsSelected() )
463 496 {
464   - mImageChannelControl.SetImage( BIG_IMAGE_2 );
  497 + mImageChannelControl = mIcc2;
465 498 }
466 499 else if( mRadioButtons[2].IsSelected() )
467 500 {
468   - mImageChannelControl.SetImage( BIG_IMAGE_3 );
  501 + mImageChannelControl = mIcc3;
  502 + }
  503 +
  504 + if( prevIcc )
  505 + {
  506 + prevIcc.SetVisibility( false );
  507 + }
  508 +
  509 + if( mImageChannelControl )
  510 + {
  511 + mImageChannelControl.SetVisibility( true );
469 512 }
470 513 }
  514 +
471 515 return true;
472 516 }
473 517  
... ... @@ -512,6 +556,7 @@ bool StylingApplication::OnThemeButtonClicked( Button button )
512 556 break;
513 557 }
514 558 }
  559 +
515 560 StyleManager::Get().ApplyTheme( themePath );
516 561  
517 562 return true;
... ...
examples/styling/styling-application.h
  View file @2fa6954
... ... @@ -87,6 +87,10 @@ private:
87 87 PushButton mThemeButtons[3];
88 88 PushButton mResetButton;
89 89 ImageChannelControl mImageChannelControl;
  90 + ImageChannelControl mIcc1;
  91 + ImageChannelControl mIcc2;
  92 + ImageChannelControl mIcc3;
  93 + Actor mImagePlacement;
90 94 Popup mResetPopup;
91 95 PanGestureDetector mPanGestureDetector;
92 96 };
... ...
resources/style/mobile/style-example-theme-one.json.in
  View file @2fa6954
1 1 {
2 2 "styles":
3 3 {
4   - "title":{
  4 + "Title":{
5 5 "textColor":"#0000ff",
6 6 "background":
7 7 {
... ... @@ -9,59 +9,107 @@
9 9 "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
10 10 }
11 11 },
12   - "tableview":{
  12 + "TableView":{
13 13 "background":
14 14 {
15 15 "visualType":"COLOR",
16 16 "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
17 17 }
18 18 },
19   - "flexcontainer":{
  19 + "FlexContainer":{
20 20 "background":
21 21 {
22 22 "visualType":"COLOR",
23 23 "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
24 24 }
25 25 },
26   - "radiobutton":{
  26 + "RadioButton":{
27 27 "label":{
28 28 "textColor": [1,1,1,1]
29 29 }
30 30 },
31   - "checkboxbutton":{
  31 + "CheckBoxButton":{
32 32 "label":{
33 33 "textColor": [1,1,1,1]
34 34 }
35 35 },
36   - "colorLabel1":{
  36 + "ColorLabel1":{
37 37 "textColor": [1,0,0,1]
38 38 },
39   - "colorLabel2":{
  39 + "ColorLabel2":{
40 40 "textColor": [0,1,0,1]
41 41 },
42   - "colorLabel3":{
  42 + "ColorLabel3":{
43 43 "textColor": [0.3,0.3,1,1]
44 44 },
45   - "themelabel":{
  45 + "ThemeLabel":{
46 46 "textColor":[0,1,1,1]
47 47 },
48   - "popupTitle":{
  48 + "PopupTitle":{
49 49 "textColor":[1,1,1,1]
50 50 },
51   - "popupBody":{
  51 + "PopupBody":{
52 52 "textColor":[1,1,0,1]
53 53 },
54   - "textlabel":{
  54 + "TextLabel":{
55 55 "textColor":[0,0,0,1]
56 56 },
57   - "colorSlider1":{
58   - "styles":["slider"]
  57 + "ColorSlider1":{
  58 + "styles":["Slider"]
59 59 },
60   - "colorSlider2":{
  60 + "ColorSlider2":{
61 61 "styles":["slider"]
62 62 },
63   - "colorSlider3":{
  63 + "ColorSlider3":{
64 64 "styles":["slider"]
  65 + },
  66 + "ImageChannelControl":
  67 + {
  68 + "enableVisibilityTransition":
  69 + [
  70 + {
  71 + "target":"imageVisual",
  72 + "property":"colorAlpha",
  73 + "initialValue":0,
  74 + "targetValue":1,
  75 + "animator":
  76 + {
  77 + "alphaFunction":"EASE_IN_OUT",
  78 + "timePeriod":
  79 + {
  80 + "duration":0.25,
  81 + "delay":0
  82 + }
  83 + }
  84 + },
  85 + {
  86 + "target":"imageVisual",
  87 + "property":"scale",
  88 + "targetValue":[1,1,1]
  89 + }
  90 + ],
  91 + "disableVisibilityTransition":
  92 + [
  93 + {
  94 + "target":"imageVisual",
  95 + "property":"colorAlpha",
  96 + "targetValue":0,
  97 + "animator":
  98 + {
  99 + "alphaFunction":"EASE_IN_OUT",
  100 + "timePeriod":
  101 + {
  102 + "duration":0.25,
  103 + "delay":0
  104 + }
  105 + }
  106 + },
  107 + {
  108 + "target":"imageVisual",
  109 + "property":"scale",
  110 + "targetValue":[1,1,1]
  111 + }
  112 + ]
65 113 }
66 114 }
67 115 }
... ...
resources/style/mobile/style-example-theme-three.json.in
  View file @2fa6954
1 1 {
2 2 "styles":
3 3 {
4   - "title":{
  4 + "Title":{
5 5 "textColor":"#0000ff",
6 6 "background":
7 7 {
8   - "rendererType":"color",
  8 + "visualType":"COLOR",
9 9 "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
10 10 }
11 11 },
12   - "tableview":{
  12 + "TableView":{
13 13 "background":
14 14 {
15   - "rendererType":"color",
  15 + "visualType":"COLOR",
16 16 "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
17 17 }
18 18 },
19   - "radiobutton":{
  19 + "RadioButton":{
20 20 "label":{
21 21 "textColor": [1,1,1,1]
22 22 }
23 23 },
24   - "checkboxbutton":{
  24 + "CheckboxButton":{
25 25 "label":{
26 26 "textColor": [1,1,1,1]
27 27 }
28 28 },
29   - "colorLabel1":{
  29 + "ColorLabel1":{
30 30 "textColor": [1,0,0,1]
31 31 },
32   - "colorLabel2":{
  32 + "ColorLabel2":{
33 33 "textColor": [0,1,0,1]
34 34 },
35   - "colorLabel3":{
  35 + "ColorLabel3":{
36 36 "textColor": [0.3,0.3,1,1]
37 37 },
38   - "themelabel":{
  38 + "ThemeLabel":{
39 39 "textColor":[0,1,1,1]
40 40 },
41   - "popupTitle":{
  41 + "PopupTitle":{
42 42 "textColor":[1,1,1,1]
43 43 },
44   - "popupBody":{
  44 + "PopupBody":{
45 45 "textColor":[1,1,0,1]
46 46 },
47   - "textlabel":{
  47 + "TextLabel":{
48 48 "textColor":[0,0,0,1]
  49 + },
  50 + "ImageChannelControl":
  51 + {
  52 + "enableVisibilityTransition":
  53 + [
  54 + {
  55 + "target":"imageVisual",
  56 + "property":"scale",
  57 + "initialValue":[0.1,0.1,0.1],
  58 + "targetValue":[1,1,1],
  59 + "animator":
  60 + {
  61 + "alphaFunction":"EASE_IN",
  62 + "timePeriod":
  63 + {
  64 + "duration":0.3,
  65 + "delay":0.1
  66 + }
  67 + }
  68 + },
  69 + {
  70 + "target":"imageVisual",
  71 + "property":"colorAlpha",
  72 + "targetValue":1
  73 + }
  74 + ],
  75 + "disableVisibilityTransition":
  76 + [
  77 + {
  78 + "target":"imageVisual",
  79 + "property":"scale",
  80 + "initialValue":[1,1,1],
  81 + "targetValue":[0.1,0.1,0.1],
  82 + "animator":
  83 + {
  84 + "alphaFunction":"EASE_OUT",
  85 + "timePeriod":
  86 + {
  87 + "duration":0.3,
  88 + "delay":0.0
  89 + }
  90 + }
  91 + },
  92 + {
  93 + "target":"imageVisual",
  94 + "property":"colorAlpha",
  95 + "targetValue":0,
  96 + "animator":
  97 + {
  98 + "alphaFunction":"EASE_OUT",
  99 + "timePeriod":
  100 + {
  101 + "duration":0.3,
  102 + "delay":0.0
  103 + }
  104 + }
  105 + }
  106 + ]
49 107 }
50 108 }
51 109 }
... ...
resources/style/mobile/style-example-theme-two.json.in
  View file @2fa6954
1 1 {
2 2 "constants":
3 3 {
4   - "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@"
  4 + "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
5 5 },
6 6 "styles":
7 7 {
8   - "title":{
  8 + "Title":{
9 9 "textColor":"#0000ff",
10 10 "background":
11 11 {
... ... @@ -13,7 +13,7 @@
13 13 "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
14 14 }
15 15 },
16   - "tableview":{
  16 + "TableView":{
17 17 "background":
18 18 {
19 19 "visualType":"GRADIENT",
... ... @@ -24,10 +24,10 @@
24 24 },
25 25  
26 26 // Change an icon size, see if it gets properly re-sized
27   - "radiobutton":{
28   - "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png",
29   - "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png",
30   - "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png",
  27 + "RadioButton":{
  28 + "unselectedStateImage":"{STYLE_DIR}/images/radio-button-unselected.png",
  29 + "selectedStateImage":"{STYLE_DIR}/images/radio-button-selected.png",
  30 + "disabledStateImage":"{STYLE_DIR}/images/radio-button-unselected-disabled.png",
31 31 "imageLabelGap":10,
32 32 "label":{
33 33 "textColor": [0.1,1,1,1]
... ... @@ -58,11 +58,11 @@
58 58 },
59 59  
60 60 // Note, this overrides any non-renamed label styles, e.g. those in a button.
61   - "textlabel":{
  61 + "TextLabel":{
62 62 //"textColor":[0,0,0,1]
63 63 },
64 64  
65   - "thinslider":{
  65 + "ThinSlider":{
66 66 "styles": ["slider"],
67 67 "showPopup":true,
68 68 "showValue":false,
... ... @@ -75,23 +75,66 @@
75 75 },
76 76 "enabled":true
77 77 },
78   - "colorSlider1":{
79   - "styles":["thinslider"],
  78 + "ColorSlider1":{
  79 + "styles":["ThinSlider"],
80 80 "progressVisual":{
81   - "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png"
  81 + "url":"{STYLE_DIR}/images/slider-skin-progress-red.9.png"
82 82 }
83 83 },
84   - "colorSlider2":{
85   - "styles":["thinslider"],
  84 + "ColorSlider2":{
  85 + "styles":["ThinSlider"],
86 86 "progressVisual":{
87   - "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png"
  87 + "url":"{STYLE_DIR}/images/slider-skin-progress-green.9.png"
88 88 }
89 89 },
90   - "colorSlider3":{
  90 + "ColorSlider3":{
91 91 "styles":["thinslider"],
92 92 "progressVisual":{
93   - "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png"
  93 + "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png"
94 94 }
  95 + },
  96 + "ImageChannelControl":
  97 + {
  98 + "enableVisibilityTransition":
  99 + [
  100 + {
  101 + "target":"imageVisual",
  102 + "property":"colorAlpha",
  103 + "initialValue":0,
  104 + "targetValue":1,
  105 + "animator":
  106 + {
  107 + "alphaFunction":"EASE_IN_OUT",
  108 + "timePeriod":
  109 + {
  110 + "duration":0.4,
  111 + "delay":0
  112 + }
  113 + }
  114 + }
  115 + ],
  116 + "disableVisibilityTransition":
  117 + [
  118 + {
  119 + "target":"imageVisual",
  120 + "property":"colorAlpha",
  121 + "targetValue":0,
  122 + "animator":
  123 + {
  124 + "alphaFunction":"EASE_IN_OUT",
  125 + "timePeriod":
  126 + {
  127 + "duration":0.4,
  128 + "delay":0.2
  129 + }
  130 + }
  131 + },
  132 + {
  133 + "target":"imageVisual",
  134 + "property":"scale",
  135 + "targetValue":[1,1,1]
  136 + }
  137 + ]
95 138 }
96 139 }
97 140 }
... ...
resources/style/style-example-theme-one.json.in
  View file @2fa6954
... ... @@ -62,6 +62,54 @@
62 62 },
63 63 "ColorSlider3":{
64 64 "styles":["slider"]
  65 + },
  66 + "ImageChannelControl":
  67 + {
  68 + "enableVisibilityTransition":
  69 + [
  70 + {
  71 + "target":"imageVisual",
  72 + "property":"colorAlpha",
  73 + "initialValue":0,
  74 + "targetValue":1,
  75 + "animator":
  76 + {
  77 + "alphaFunction":"EASE_IN_OUT",
  78 + "timePeriod":
  79 + {
  80 + "duration":0.25,
  81 + "delay":0
  82 + }
  83 + }
  84 + },
  85 + {
  86 + "target":"imageVisual",
  87 + "property":"scale",
  88 + "targetValue":[1,1,1]
  89 + }
  90 + ],
  91 + "disableVisibilityTransition":
  92 + [
  93 + {
  94 + "target":"imageVisual",
  95 + "property":"colorAlpha",
  96 + "targetValue":0,
  97 + "animator":
  98 + {
  99 + "alphaFunction":"EASE_IN_OUT",
  100 + "timePeriod":
  101 + {
  102 + "duration":0.25,
  103 + "delay":0
  104 + }
  105 + }
  106 + },
  107 + {
  108 + "target":"imageVisual",
  109 + "property":"scale",
  110 + "targetValue":[1,1,1]
  111 + }
  112 + ]
65 113 }
66 114 }
67 115 }
... ...
resources/style/style-example-theme-three.json.in
  View file @2fa6954
... ... @@ -46,6 +46,64 @@
46 46 },
47 47 "TextLabel":{
48 48 "textColor":[0,0,0,1]
  49 + },
  50 + "ImageChannelControl":
  51 + {
  52 + "enableVisibilityTransition":
  53 + [
  54 + {
  55 + "target":"imageVisual",
  56 + "property":"scale",
  57 + "initialValue":[0.1,0.1,0.1],
  58 + "targetValue":[1,1,1],
  59 + "animator":
  60 + {
  61 + "alphaFunction":"EASE_IN",
  62 + "timePeriod":
  63 + {
  64 + "duration":0.3,
  65 + "delay":0.1
  66 + }
  67 + }
  68 + },
  69 + {
  70 + "target":"imageVisual",
  71 + "property":"colorAlpha",
  72 + "targetValue":1
  73 + }
  74 + ],
  75 + "disableVisibilityTransition":
  76 + [
  77 + {
  78 + "target":"imageVisual",
  79 + "property":"scale",
  80 + "initialValue":[1,1,1],
  81 + "targetValue":[0.1,0.1,0.1],
  82 + "animator":
  83 + {
  84 + "alphaFunction":"EASE_OUT",
  85 + "timePeriod":
  86 + {
  87 + "duration":0.3,
  88 + "delay":0.0
  89 + }
  90 + }
  91 + },
  92 + {
  93 + "target":"imageVisual",
  94 + "property":"colorAlpha",
  95 + "targetValue":0,
  96 + "animator":
  97 + {
  98 + "alphaFunction":"EASE_OUT",
  99 + "timePeriod":
  100 + {
  101 + "duration":0.3,
  102 + "delay":0.0
  103 + }
  104 + }
  105 + }
  106 + ]
49 107 }
50 108 }
51 109 }
... ...
resources/style/style-example-theme-two.json.in
  View file @2fa6954
... ... @@ -92,6 +92,49 @@
92 92 "progressVisual":{
93 93 "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png"
94 94 }
  95 + },
  96 + "ImageChannelControl":
  97 + {
  98 + "enableVisibilityTransition":
  99 + [
  100 + {
  101 + "target":"imageVisual",
  102 + "property":"colorAlpha",
  103 + "initialValue":0,
  104 + "targetValue":1,
  105 + "animator":
  106 + {
  107 + "alphaFunction":"EASE_IN_OUT",
  108 + "timePeriod":
  109 + {
  110 + "duration":0.4,
  111 + "delay":0
  112 + }
  113 + }
  114 + }
  115 + ],
  116 + "disableVisibilityTransition":
  117 + [
  118 + {
  119 + "target":"imageVisual",
  120 + "property":"colorAlpha",
  121 + "targetValue":0,
  122 + "animator":
  123 + {
  124 + "alphaFunction":"EASE_IN_OUT",
  125 + "timePeriod":
  126 + {
  127 + "duration":0.4,
  128 + "delay":0.2
  129 + }
  130 + }
  131 + },
  132 + {
  133 + "target":"imageVisual",
  134 + "property":"scale",
  135 + "targetValue":[1,1,1]
  136 + }
  137 + ]
95 138 }
96 139 }
97 140 }
... ...