diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml
index 55c7471..bbbd944 100644
--- a/com.samsung.dali-demo.xml
+++ b/com.samsung.dali-demo.xml
@@ -58,6 +58,9 @@
+
+
+
diff --git a/examples-reel/dali-examples-reel.cpp b/examples-reel/dali-examples-reel.cpp
index cc9872c..63b782b 100644
--- a/examples-reel/dali-examples-reel.cpp
+++ b/examples-reel/dali-examples-reel.cpp
@@ -47,6 +47,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
demo.AddExample(Example("buttons.example", DALI_DEMO_STR_TITLE_BUTTONS));
demo.AddExample(Example("clipping.example", DALI_DEMO_STR_TITLE_CLIPPING));
demo.AddExample(Example("clipping-draw-order.example", DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER));
+ demo.AddExample(Example("color-visual.example", DALI_DEMO_STR_TITLE_COLOR_VISUAL));
demo.AddExample(Example("deferred-shading.example", DALI_DEMO_STR_TITLE_DEFERRED_SHADING));
demo.AddExample(Example("dissolve-effect.example", DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION));
demo.AddExample(Example("drag-and-drop.example", DALI_DEMO_STR_TITLE_DRAG_AND_DROP));
diff --git a/examples/color-visual/color-visual-example.cpp b/examples/color-visual/color-visual-example.cpp
new file mode 100644
index 0000000..616e3f6
--- /dev/null
+++ b/examples/color-visual/color-visual-example.cpp
@@ -0,0 +1,141 @@
+/*
+ * Copyright (c) 2020 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
+#include
+#include
+#include
+#include
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+const char* IMAGE_FILE( DEMO_IMAGE_DIR "gallery-medium-1.jpg" );
+
+const float BLUR_RADIUS_VALUE( 10.0f );
+const float NO_BLUR_VALUE( 0.0f );
+const float ANIMATION_DURATION( 2.0f );
+
+const Property::Value SHADOW
+{
+ { Visual::Property::TYPE, Visual::COLOR },
+ { Visual::Property::MIX_COLOR, Vector4( 0.0f, 0.0f, 0.0f, 0.5f ) },
+ { Visual::Property::TRANSFORM, Property::Map{ { Visual::Transform::Property::OFFSET, Vector2( 0.05f, 0.05f ) },
+ { Visual::Transform::Property::SIZE, Vector2( 1.05f, 1.05f ) },
+ { Visual::Transform::Property::ORIGIN, Align::CENTER },
+ { Visual::Transform::Property::ANCHOR_POINT, Align::CENTER } } },
+ { DevelColorVisual::Property::BLUR_RADIUS, BLUR_RADIUS_VALUE }
+};
+
+} // namespace
+
+// This example shows the blur radius property of the color visual and animates it.
+//
+class ColorVisualExample : public ConnectionTracker
+{
+public:
+
+ ColorVisualExample( Application& application )
+ : mApplication( application ),
+ mShadowVisible( true )
+ {
+ // Connect to the Application's Init signal
+ mApplication.InitSignal().Connect( this, &ColorVisualExample::Create );
+ }
+
+ ~ColorVisualExample()
+ {
+ // Nothing to do here;
+ }
+
+ // The Init signal is received once (only) during the Application lifetime
+ void Create( Application& application )
+ {
+ // Get a handle to the stage
+ Stage stage = Stage::GetCurrent();
+ stage.SetBackgroundColor( Color::WHITE );
+
+ mImageView = ImageView::New( IMAGE_FILE );
+ mImageView.SetParentOrigin( ParentOrigin::CENTER );
+ mImageView.SetSize( 200.0f, 200.0f );
+ mImageView.SetProperty( DevelControl::Property::SHADOW, SHADOW );
+
+ stage.Add( mImageView );
+
+ // Respond to a click anywhere on the stage
+ stage.GetRootLayer().TouchSignal().Connect( this, &ColorVisualExample::OnTouch );
+
+ // Respond to key events
+ stage.KeyEventSignal().Connect( this, &ColorVisualExample::OnKeyEvent );
+ }
+
+ bool OnTouch( Actor actor, const TouchData& touch )
+ {
+ if( touch.GetState( 0 ) == PointState::UP )
+ {
+ float initialValue, targetValue;
+ if( !mShadowVisible )
+ {
+ initialValue = NO_BLUR_VALUE;
+ targetValue = BLUR_RADIUS_VALUE;
+ }
+ else
+ {
+ initialValue = BLUR_RADIUS_VALUE;
+ targetValue = NO_BLUR_VALUE;
+ }
+
+ mShadowVisible = !mShadowVisible;
+
+ TransitionData transitionData = TransitionData::New( Property::Map().Add( "target", "shadow" )
+ .Add( "property", "blurRadius" )
+ .Add( "initialValue", initialValue )
+ .Add( "targetValue", targetValue )
+ .Add( "animator", Property::Map().Add( "duration", ANIMATION_DURATION ) ) );
+ Animation animation = DevelControl::CreateTransition( Toolkit::Internal::GetImplementation( mImageView ), transitionData );
+ animation.Play();
+ }
+ return true;
+ }
+
+ void OnKeyEvent( const KeyEvent& event )
+ {
+ if( event.state == KeyEvent::Down )
+ {
+ if ( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
+ {
+ mApplication.Quit();
+ }
+ }
+ }
+
+private:
+ Application& mApplication;
+ ImageView mImageView;
+ bool mShadowVisible;
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+ Application application = Application::New( &argc, &argv );
+ ColorVisualExample test( application );
+ application.MainLoop();
+ return 0;
+}
diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po
index d36222d..44cc774 100755
--- a/resources/po/en_GB.po
+++ b/resources/po/en_GB.po
@@ -43,6 +43,9 @@ msgstr "Clipping"
msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER"
msgstr "Clipping Draw Order"
+msgid "DALI_DEMO_STR_TITLE_COLOR_VISUAL"
+msgstr "Colour Visual"
+
msgid "DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW"
msgstr "Gaussian Blur"
diff --git a/resources/po/en_US.po b/resources/po/en_US.po
index 6058031..f715b30 100755
--- a/resources/po/en_US.po
+++ b/resources/po/en_US.po
@@ -43,6 +43,9 @@ msgstr "Clipping"
msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER"
msgstr "Clipping Draw Order"
+msgid "DALI_DEMO_STR_TITLE_COLOR_VISUAL"
+msgstr "Color Visual"
+
msgid "DALI_DEMO_STR_TITLE_DEFERRED_SHADING"
msgstr "Deferred Shading"
diff --git a/resources/po/ko.po b/resources/po/ko.po
index 6f6d61a..6f7a847 100755
--- a/resources/po/ko.po
+++ b/resources/po/ko.po
@@ -5,7 +5,7 @@ msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
msgstr "애니메이션 모양"
msgid "DALI_DEMO_STR_TITLE_BASIC_LIGHT"
-msgstr "기본 표시 등"
+msgstr "기본 조명"
msgid "DALI_DEMO_STR_TITLE_BLOCKS"
msgstr "블록"
@@ -23,16 +23,19 @@ msgid "DALI_DEMO_STR_TITLE_CARD_ACTIVE"
msgstr "NFC 카드 태깅"
msgid "DALI_DEMO_STR_TITLE_CLIPPING"
-msgstr "깎는"
+msgstr "클리핑"
msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER"
msgstr "드로잉 순서를 클리핑"
+msgid "DALI_DEMO_STR_TITLE_COLOR_VISUAL"
+msgstr "색상 비주얼"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "색상 그라디언트"
msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
-msgstr "접촉"
+msgstr "연락처"
msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
msgstr "입방체 전환"
diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h
index 8d62660..c35f6be 100644
--- a/shared/dali-demo-strings.h
+++ b/shared/dali-demo-strings.h
@@ -49,6 +49,7 @@ extern "C"
#define DALI_DEMO_STR_TITLE_CARD_ACTIVE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CARD_ACTIVE")
#define DALI_DEMO_STR_TITLE_CLIPPING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING")
#define DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER")
+#define DALI_DEMO_STR_TITLE_COLOR_VISUAL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COLOR_VISUAL")
#define DALI_DEMO_STR_TITLE_DEFERRED_SHADING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_DEFERRED_SHADING")
#define DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW")
#define DALI_DEMO_STR_TITLE_GESTURES dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_GESTURES")
@@ -149,6 +150,7 @@ extern "C"
#define DALI_DEMO_STR_TITLE_CARD_ACTIVE "Card Active"
#define DALI_DEMO_STR_TITLE_CLIPPING "Clipping"
#define DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER "Clipping Draw Order"
+#define DALI_DEMO_STR_TITLE_COLOR_VISUAL "Color Visual"
#define DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW "Gaussian Blur"
#define DALI_DEMO_STR_TITLE_GESTURES "Gestures"
#define DALI_DEMO_STR_TITLE_COLOR_GRADIENT "Color Gradient"