From: Ferran Sole <ferran.sole@samsung.com>
Date: Fri, 21 Oct 2016 14:59:29 +0000 (+0100)
Subject: Added position and size to Visuals
X-Git-Tag: dali_1.2.13~10
X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=243e57768d13ec8152fb2b2f6c3b1eae1b91b338;hp=a1e6ba9ce55ab38ec56cbd718cb62624a8c656a3

Added position and size to Visuals

Added properties and modified shaders to allow positioning and
sizing visuals inside Controls.

Supported visuals: border, color, gradient, image, nine-patch, primitive and mesh

Change-Id: I4addf71a344df0b18c288d0e0afc4d1a8a8595ad
---

diff --git a/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp b/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp
index 270b304..23311e2 100644
--- a/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp
+++ b/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp
@@ -24,6 +24,7 @@
 #include <dali/public-api/rendering/shader.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
 #include <dali-toolkit/devel-api/visual-factory/devel-visual-properties.h>
+#include <dali-toolkit/devel-api/align-enums.h>
 #include <dali-toolkit/dali-toolkit.h>
 #include "dummy-control.h"
 
@@ -32,7 +33,7 @@ using namespace Dali::Toolkit;
 
 namespace
 {
-const char* TEST_IMAGE_FILE_NAME =  "gallery_image_01.jpg";
+const char* TEST_IMAGE_FILE_NAME =  TEST_RESOURCE_DIR "/gallery-small-1.jpg";
 const char* TEST_NPATCH_FILE_NAME =  "gallery_image_01.9.jpg";
 const char* TEST_SVG_FILE_NAME = TEST_RESOURCE_DIR "/svg1.svg";
 const char* TEST_OBJ_FILE_NAME = TEST_RESOURCE_DIR "/Cube.obj";
@@ -1275,3 +1276,288 @@ int UtcDaliVisualWireframeVisual(void)
 
   END_TEST;
 }
+
+int UtcDaliVisualGetTransform(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualGetTransform: ColorVisual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap.Insert(Visual::Property::TYPE,  Visual::COLOR);
+  propertyMap.Insert(ColorVisual::Property::MIX_COLOR,  Color::BLUE);
+  Visual::Base colorVisual = factory.CreateVisual( propertyMap );
+
+  Dali::Property::Map map;
+  Dali::Property::Value transformProperty = colorVisual.GetProperty( Dali::Toolkit::Visual::DevelProperty::TRANSFORM );
+  transformProperty.Get(map);
+
+  //Test default values
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::OFFSET );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_CHECK( typeValue->Get<Vector2>() == Vector2(0.0f,0.0f) );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::SIZE );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_CHECK( typeValue->Get<Vector2>() == Vector2(1.0f,1.0f) );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::OFFSET_SIZE_MODE );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_CHECK( typeValue->Get<Vector4>() == Vector4(0.0f,0.0f,0.0f,0.0f) );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::ORIGIN );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_CHECK( (Toolkit::Align::Type)typeValue->Get<int>() == Toolkit::Align::CENTER );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::ANCHOR_POINT );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_CHECK( (Toolkit::Align::Type)typeValue->Get<int>() == Toolkit::Align::CENTER );
+  }
+
+  END_TEST;
+}
+
+static void TestTransform( ToolkitTestApplication& application, Visual::Base visual )
+{
+  Property::Map transform;
+  transform.Insert( Visual::DevelProperty::Transform::Property::OFFSET, Vector2(10.0f, 10.0f) );
+  transform.Insert( Visual::DevelProperty::Transform::Property::SIZE, Vector2(0.2f, 0.2f) );
+  transform.Insert( Visual::DevelProperty::Transform::Property::OFFSET_SIZE_MODE, Vector4(1.0f, 1.0f, 0.0f,0.0f) );
+  transform.Insert( Visual::DevelProperty::Transform::Property::ORIGIN, "TOP_BEGIN" );
+  transform.Insert( Visual::DevelProperty::Transform::Property::ANCHOR_POINT, Toolkit::Align::BOTTOM_END );
+
+  visual.SetProperty( Dali::Toolkit::Visual::DevelProperty::TRANSFORM, transform );
+
+  Dali::Property::Map map;
+  Dali::Property::Value transformProperty = visual.GetProperty( Dali::Toolkit::Visual::DevelProperty::TRANSFORM );
+  transformProperty.Get(map);
+
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::OFFSET );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_EQUALS( typeValue->Get<Vector2>(),Vector2(10.0f,10.0f), TEST_LOCATION );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::SIZE );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_EQUALS( typeValue->Get<Vector2>(), Vector2(0.2f,0.2f), TEST_LOCATION );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::OFFSET_SIZE_MODE );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_EQUALS( typeValue->Get<Vector4>(), Vector4(1.0f,1.0f,0.0f,0.0f), TEST_LOCATION );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::ORIGIN );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_EQUALS( (Toolkit::Align::Type)typeValue->Get<int>(), Toolkit::Align::TOP_BEGIN, TEST_LOCATION );
+  }
+  {
+    Property::Value* typeValue = map.Find( Toolkit::Visual::DevelProperty::Transform::Property::ANCHOR_POINT );
+    DALI_TEST_CHECK( typeValue );
+    DALI_TEST_EQUALS( (Toolkit::Align::Type)typeValue->Get<int>(), Toolkit::Align::BOTTOM_END, TEST_LOCATION );
+  }
+
+  //Put the visual on the stage
+  Actor actor = Actor::New();
+  actor.SetSize(200.f, 200.f);
+  Stage::GetCurrent().Add( actor );
+  visual.SetOnStage( actor );
+  application.SendNotification();
+  application.Render(0);
+  Renderer renderer( actor.GetRendererAt(0) );
+
+  //Check that the properties have been registered on the Renderer
+  Vector2 offset = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "offset" ) );
+  DALI_TEST_EQUALS( offset, Vector2(10.0f,10.0f), TEST_LOCATION );
+
+  Vector2 size = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "size" ) );
+  DALI_TEST_EQUALS( size, Vector2(0.2f,0.2f), TEST_LOCATION );
+
+  Vector4 offsetSizeMode = renderer.GetProperty<Vector4>( renderer.GetPropertyIndex( "offsetSizeMode" ) );
+  DALI_TEST_EQUALS( offsetSizeMode, Vector4(1.0f,1.0f,0.0f,0.0f), TEST_LOCATION );
+
+  Vector2 parentOrigin = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "origin" ) );
+  DALI_TEST_EQUALS( parentOrigin, Vector2(-0.5f,-0.5f), TEST_LOCATION );
+
+  Vector2 anchorPoint = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "anchorPoint" ) );
+  DALI_TEST_EQUALS( anchorPoint, Vector2(-0.5f,-0.5f), TEST_LOCATION );
+
+  //Set a new transform
+  transform.Clear();
+  transform.Insert( Visual::DevelProperty::Transform::Property::OFFSET, Vector2(20.0f, 20.0f) );
+  transform.Insert( Visual::DevelProperty::Transform::Property::SIZE, Vector2(100.0f, 100.0f) );
+  transform.Insert( Visual::DevelProperty::Transform::Property::OFFSET_SIZE_MODE, Vector4(0.0f, 0.0f, 1.0f,1.0f) );
+  visual.SetProperty( Dali::Toolkit::Visual::DevelProperty::TRANSFORM, transform );
+  application.SendNotification();
+  application.Render(0);
+
+  //Check that the values have changed in the renderer
+  offset = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "offset" ) );
+  DALI_TEST_EQUALS( offset, Vector2(20.0f,20.0f), TEST_LOCATION );
+
+  size = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "size" ) );
+  DALI_TEST_EQUALS( size, Vector2(100.0f,100.0f), TEST_LOCATION );
+
+  offsetSizeMode = renderer.GetProperty<Vector4>( renderer.GetPropertyIndex( "offsetSizeMode" ) );
+  DALI_TEST_EQUALS( offsetSizeMode, Vector4(0.0f,0.0f,1.0f,1.0f), TEST_LOCATION );
+
+  //Parent origin and anchor point should have default values
+  parentOrigin = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "origin" ) );
+  DALI_TEST_EQUALS( parentOrigin, Vector2(0.0f,0.0f), TEST_LOCATION );
+
+  anchorPoint = renderer.GetProperty<Vector2>( renderer.GetPropertyIndex( "anchorPoint" ) );
+  DALI_TEST_EQUALS( anchorPoint, Vector2(0.0f,0.0f), TEST_LOCATION );
+}
+
+int UtcDaliVisualSetTransform0(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: ColorVisual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap.Insert(Visual::Property::TYPE,  Visual::COLOR);
+  propertyMap.Insert(ColorVisual::Property::MIX_COLOR,  Color::BLUE);
+  Visual::Base visual = factory.CreateVisual( propertyMap );
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform1(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: PrimitiveVisual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap[ Visual::Property::TYPE           ] = Visual::PRIMITIVE;
+  propertyMap[ PrimitiveVisual::Property::MIX_COLOR ] = Vector4(1.0f,1.0f,1.0f,1.0f);
+  propertyMap[ PrimitiveVisual::Property::SHAPE  ] = PrimitiveVisual::Shape::SPHERE;
+  propertyMap[ PrimitiveVisual::Property::SLICES ] = 10;
+  propertyMap[ PrimitiveVisual::Property::STACKS ] = 10;
+  Visual::Base visual = factory.CreateVisual( propertyMap );
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform2(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: GradientVisual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap.Insert( Visual::Property::TYPE,  Visual::GRADIENT );
+  Property::Array stopOffsets;
+  stopOffsets.PushBack( 0.0f );
+  stopOffsets.PushBack( 0.3f );
+  stopOffsets.PushBack( 0.6f );
+  stopOffsets.PushBack( 0.8f );
+  stopOffsets.PushBack( 1.0f );
+  propertyMap.Insert( GradientVisual::Property::STOP_OFFSET, stopOffsets );
+
+  Property::Array stopColors;
+  stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.f )/255.f );
+  stopColors.PushBack( Vector4( 196.f, 198.f, 71.f, 122.f )/255.f );
+  stopColors.PushBack( Vector4( 214.f, 37.f, 139.f, 191.f )/255.f );
+  stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 150.f )/255.f );
+  stopColors.PushBack( Color::YELLOW );
+  propertyMap.Insert( GradientVisual::Property::STOP_COLOR, stopColors );
+  propertyMap.Insert( GradientVisual::Property::CENTER, Vector2( 0.5f, 0.5f ) );
+  propertyMap.Insert( GradientVisual::Property::RADIUS, 1.414f );
+  Visual::Base visual = factory.CreateVisual( propertyMap );
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform3(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: BorderVisual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap.Insert( Visual::Property::TYPE, Visual::BORDER );
+  propertyMap.Insert( BorderVisual::Property::COLOR, Vector4(0.f, 1.f, 0.f, 0.6f) );
+  propertyMap.Insert( BorderVisual::Property::SIZE, 3.0f );
+  Visual::Base visual = factory.CreateVisual( propertyMap );
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform4(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: MeshVisual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap.Insert( Visual::Property::TYPE, Visual::MESH );
+  propertyMap.Insert( MeshVisual::Property::OBJECT_URL, TEST_OBJ_FILE_NAME );
+  propertyMap.Insert( MeshVisual::Property::MATERIAL_URL, TEST_MTL_FILE_NAME );
+  propertyMap.Insert( MeshVisual::Property::TEXTURES_PATH, TEST_RESOURCE_LOCATION );
+  propertyMap.Insert( MeshVisual::Property::SHADING_MODE, MeshVisual::ShadingMode::TEXTURELESS_WITH_DIFFUSE_LIGHTING );
+  propertyMap.Insert( MeshVisual::Property::LIGHT_POSITION, Vector3( 5.0f, 10.0f, 15.0f) );
+  Visual::Base visual = factory.CreateVisual( propertyMap );
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform5(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: ImageVisual from Image" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Image image = ResourceImage::New(TEST_IMAGE_FILE_NAME, ImageDimensions(100, 200));
+  Visual::Base visual = factory.CreateVisual(image);
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform6(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: ImageVisual for URL " );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap[Toolkit::Visual::Property::TYPE] = Toolkit::Visual::IMAGE;
+  propertyMap[Toolkit::ImageVisual::Property::URL] = TEST_IMAGE_FILE_NAME;
+  propertyMap[Toolkit::ImageVisual::Property::DESIRED_WIDTH] = 100.0f;
+  propertyMap[Toolkit::ImageVisual::Property::DESIRED_HEIGHT] = 100.0f;
+  propertyMap[Toolkit::ImageVisual::Property::FITTING_MODE] = FittingMode::SCALE_TO_FILL;
+  propertyMap[Toolkit::ImageVisual::Property::SAMPLING_MODE] = SamplingMode::BOX_THEN_LINEAR;
+  propertyMap[Toolkit::ImageVisual::Property::SYNCHRONOUS_LOADING] = true;
+  Visual::Base visual = factory.CreateVisual(propertyMap);
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+int UtcDaliVisualSetTransform7(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliVisualSetTransform: NPatch visual" );
+
+  VisualFactory factory = VisualFactory::Get();
+  Image image = ResourceImage::New(TEST_NPATCH_FILE_NAME, ImageDimensions(100, 200));
+  Visual::Base visual = factory.CreateVisual(image);
+  TestTransform( application, visual );
+
+  END_TEST;
+}
+
+
diff --git a/dali-toolkit/devel-api/align-enums.h b/dali-toolkit/devel-api/align-enums.h
new file mode 100644
index 0000000..7cba1cd
--- /dev/null
+++ b/dali-toolkit/devel-api/align-enums.h
@@ -0,0 +1,60 @@
+#ifndef __DALI_TOOLKIT_DEVEL_API_ALIGN_ENUMS_H__
+#define __DALI_TOOLKIT_DEVEL_API_ALIGN_ENUMS_H__
+
+/*
+ * 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.
+ *
+ */
+
+
+namespace Dali
+{
+
+namespace Toolkit
+{
+
+namespace Direction
+{
+  enum Type
+  {
+    LEFT_TO_RIGHT = 0,
+    RIGHT_TO_LEFT
+  };
+}
+
+/**
+ * @brief Enum used to describe anchor point and parent origin of visuals
+ */
+namespace Align
+{
+  enum Type
+  {
+    TOP_BEGIN      = 0,
+    TOP_CENTER,
+    TOP_END,
+    CENTER_BEGIN,
+    CENTER,
+    CENTER_END,
+    BOTTOM_BEGIN,
+    BOTTOM_CENTER,
+    BOTTOM_END
+  };
+}
+
+} // namespace Toolkit
+
+} // namespace Dali
+
+#endif // __DALI_TOOLKIT_DEVEL_API_ALIGN_ENUMS_H__
diff --git a/dali-toolkit/devel-api/file.list b/dali-toolkit/devel-api/file.list
index 5bcf750..78e96e5 100755
--- a/dali-toolkit/devel-api/file.list
+++ b/dali-toolkit/devel-api/file.list
@@ -36,6 +36,9 @@ devel_api_src_files = \
 
 # Add devel header files here
 
+devel_api_header_files = \
+  $(devel_api_src_dir)/align-enums.h
+
 devel_api_controls_header_files = \
   $(devel_api_src_dir)/controls/control-depth-index-ranges.h
 
@@ -74,6 +77,7 @@ devel_api_progress_bar_header_files = \
 
 devel_api_visual_factory_header_files = \
   $(devel_api_src_dir)/visual-factory/transition-data.h \
+  $(devel_api_src_dir)/visual-factory/devel-visual-properties.h \
   $(devel_api_src_dir)/visual-factory/visual-factory.h \
   $(devel_api_src_dir)/visual-factory/visual-base.h
 
diff --git a/dali-toolkit/devel-api/visual-factory/devel-visual-properties.h b/dali-toolkit/devel-api/visual-factory/devel-visual-properties.h
index 02e977b..2d76662 100644
--- a/dali-toolkit/devel-api/visual-factory/devel-visual-properties.h
+++ b/dali-toolkit/devel-api/visual-factory/devel-visual-properties.h
@@ -47,11 +47,60 @@ enum Type
    * @details Name "transform", type Property::Map.
 
    * @note Optional.
-   * @see Transform::Property
+   * @see DevelProperty::Transform::Property
    */
   TRANSFORM = SHADER+1//Dali::Toolkit::Visual::Property::SHADER+1
 };
 
+namespace Transform
+{
+
+namespace Property
+{
+
+enum Type
+{
+  /**
+   * @brief Offset of the visual. It can be either relative (percentage of the parent)
+   * or absolute (in world units).
+   * @details Name "offset", type Property::VECTOR2
+   */
+  OFFSET,
+
+  /**
+   * @brief Size of the visual. It can be either relative (percentage of the parent)
+   * or absolute (in world units).
+   * @details Name "size", type Property::VECTOR2
+   */
+  SIZE,
+
+  /**
+   * @brief The origin of the visual within its control area.
+   * @details Name "origin", type Align::Type (Property::INTEGER) or Property::STRING.
+   * @see Toolkit::Align
+   */
+  ORIGIN,
+
+  /**
+   * @brief The anchor-point of the visual
+   * @details Name "anchorPoint", type Align::Type (Property::INTEGER) or Property::STRING.
+   * @see Toolkit::Align
+   */
+  ANCHOR_POINT,
+
+  /**
+   * @brief Indicates which components of the offset and size are relative
+   * (percentage of the parent) or absolute (in world units).
+   * 0 indicates the component is relative, and 1 absolute.
+   * @details Name "offsetSizeMode", type Property::VECTOR4
+   */
+  OFFSET_SIZE_MODE
+};
+
+} //namespace Property
+
+} //namespace Transform
+
 } // namespace DevelProperty
 
 } // namespace Visual
diff --git a/dali-toolkit/internal/visuals/border/border-visual.cpp b/dali-toolkit/internal/visuals/border/border-visual.cpp
index 0203a13..1191683 100644
--- a/dali-toolkit/internal/visuals/border/border-visual.cpp
+++ b/dali-toolkit/internal/visuals/border/border-visual.cpp
@@ -56,9 +56,24 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump vec3 uSize;\n
   uniform mediump float borderSize;\n
   \n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+    return vec4( (aPosition + anchorPoint)*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+  }\n
+
   void main()\n
   {\n
-    vec2 position = aPosition*uSize.xy + aDrift*borderSize;\n
+    vec2 position = ComputeVertexPosition().xy + aDrift*borderSize;\n
     gl_Position = uMvpMatrix * vec4(position, 0.0, 1.0);\n
   }\n
 );
@@ -177,6 +192,14 @@ Dali::Property::Value BorderVisual::DoGetProperty( Dali::Property::Index index )
   return Dali::Property::Value();
 }
 
+void BorderVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
 void BorderVisual::InitializeRenderer()
 {
   Geometry geometry = mFactoryCache.GetGeometry( VisualFactoryCache::BORDER_GEOMETRY );
@@ -190,6 +213,9 @@ void BorderVisual::InitializeRenderer()
   Shader shader = GetBorderShader();
   mImpl->mRenderer = Renderer::New( geometry, shader  );
 
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+
 }
 
 void BorderVisual::SetBorderColor(const Vector4& color)
diff --git a/dali-toolkit/internal/visuals/border/border-visual.h b/dali-toolkit/internal/visuals/border/border-visual.h
index 4f999b4..f982561 100644
--- a/dali-toolkit/internal/visuals/border/border-visual.h
+++ b/dali-toolkit/internal/visuals/border/border-visual.h
@@ -99,6 +99,11 @@ protected:
    */
   virtual Dali::Property::Value DoGetProperty( Dali::Property::Index index );
 
+  /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
 public:
 
   /**
diff --git a/dali-toolkit/internal/visuals/color/color-visual.cpp b/dali-toolkit/internal/visuals/color/color-visual.cpp
index 9ceed38..4dca2be 100644
--- a/dali-toolkit/internal/visuals/color/color-visual.cpp
+++ b/dali-toolkit/internal/visuals/color/color-visual.cpp
@@ -47,11 +47,24 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump mat4 uMvpMatrix;\n
   uniform mediump vec3 uSize;\n
   \n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+    return vec4( (aPosition + anchorPoint)*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+  }\n
+
   void main()\n
   {\n
-    mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
-    vertexPosition.xyz *= uSize;\n
-    gl_Position = uMvpMatrix * vertexPosition;\n
+    gl_Position = uMvpMatrix * ComputeVertexPosition();\n
   }\n
 );
 
@@ -61,7 +74,7 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   \n
   void main()\n
   {\n
-    gl_FragColor = mixColor*uColor;\n
+    gl_FragColor = mixColor;\n
   }\n
 );
 }
@@ -132,6 +145,14 @@ Dali::Property::Value ColorVisual::DoGetProperty( Dali::Property::Index index )
   return Dali::Property::Value();
 }
 
+void ColorVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
 void ColorVisual::InitializeRenderer()
 {
   Geometry geometry = mFactoryCache.GetGeometry( VisualFactoryCache::QUAD_GEOMETRY );
@@ -155,6 +176,9 @@ void ColorVisual::InitializeRenderer()
   {
     mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
   }
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 void ColorVisual::SetColor(const Vector4& color)
diff --git a/dali-toolkit/internal/visuals/color/color-visual.h b/dali-toolkit/internal/visuals/color/color-visual.h
index cf2b057..d2f3ebe 100644
--- a/dali-toolkit/internal/visuals/color/color-visual.h
+++ b/dali-toolkit/internal/visuals/color/color-visual.h
@@ -103,6 +103,11 @@ protected:
    */
   virtual void DoSetOnStage( Actor& actor );
 
+  /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
 public:
 
   /**
diff --git a/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp b/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp
index d6d90cb..e0ae085c 100644
--- a/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp
+++ b/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp
@@ -108,13 +108,27 @@ const char* VERTEX_SHADER[] =
   uniform mediump mat3 uAlignmentMatrix;\n
   varying mediump vec2 vTexCoord;\n
   \n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+    return vec4( (aPosition + anchorPoint)*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+  }\n
+
   void main()\n
   {\n
     mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
     vTexCoord = (uAlignmentMatrix*vertexPosition.xyw).xy;\n
     \n
-    vertexPosition.xyz *= uSize;\n
-    gl_Position = uMvpMatrix * vertexPosition;\n
+    gl_Position = uMvpMatrix * ComputeVertexPosition();\n
   }\n
 ),
 
@@ -126,11 +140,26 @@ DALI_COMPOSE_SHADER(
   uniform mediump mat3 uAlignmentMatrix;\n
   varying mediump vec2 vTexCoord;\n
   \n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+    return vec4( (aPosition + anchorPoint)*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+  }\n
+
   void main()\n
   {\n
     mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
     vertexPosition.xyz *= uSize;\n
-    gl_Position = uMvpMatrix * vertexPosition;\n
+    gl_Position = uMvpMatrix * ComputeVertexPosition();\n
     \n
     vTexCoord = (uAlignmentMatrix*vertexPosition.xyw).xy;\n
   }\n
@@ -229,6 +258,14 @@ void GradientVisual::DoSetProperties( const Property::Map& propertyMap )
   }
 }
 
+void GradientVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
 void GradientVisual::SetSize( const Vector2& size )
 {
   Visual::Base::SetSize( size );
@@ -326,6 +363,9 @@ void GradientVisual::InitializeRenderer()
   mImpl->mRenderer.SetTextures( textureSet );
 
   mImpl->mRenderer.RegisterProperty( UNIFORM_ALIGNMENT_MATRIX_NAME, mGradientTransform );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 bool GradientVisual::NewGradient(Type gradientType, const Property::Map& propertyMap)
diff --git a/dali-toolkit/internal/visuals/gradient/gradient-visual.h b/dali-toolkit/internal/visuals/gradient/gradient-visual.h
index f7f47ee..e4920d1 100644
--- a/dali-toolkit/internal/visuals/gradient/gradient-visual.h
+++ b/dali-toolkit/internal/visuals/gradient/gradient-visual.h
@@ -134,6 +134,11 @@ protected:
   virtual void DoSetProperties( const Property::Map& propertyMap );
 
   /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
+  /**
    * @copydoc Visual::Base::DoSetOnStage
    */
   virtual void DoSetOnStage( Actor& actor );
diff --git a/dali-toolkit/internal/visuals/image/image-visual.cpp b/dali-toolkit/internal/visuals/image/image-visual.cpp
index cbfa445..723afb6 100644
--- a/dali-toolkit/internal/visuals/image/image-visual.cpp
+++ b/dali-toolkit/internal/visuals/image/image-visual.cpp
@@ -105,12 +105,24 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump vec4 pixelArea;
   varying mediump vec2 vTexCoord;\n
   \n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+    return vec4( (aPosition + anchorPoint)*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+  }\n
+
   void main()\n
   {\n
-    mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
-    vertexPosition.xyz *= uSize;\n
-    vertexPosition = uMvpMatrix * vertexPosition;\n
-    \n
+    mediump vec4 vertexPosition = uMvpMatrix *ComputeVertexPosition();\n
     vTexCoord = pixelArea.xy+pixelArea.zw*(aPosition + vec2(0.5) );\n
     gl_Position = vertexPosition;\n
   }\n
@@ -409,6 +421,9 @@ void ImageVisual::CreateRenderer( TextureSet& textures )
   mImpl->mRenderer = Renderer::New( geometry, shader );
   DALI_ASSERT_DEBUG( textures );
   mImpl->mRenderer.SetTextures( textures );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 void ImageVisual::CreateNativeImageRenderer( NativeImage& nativeImage )
@@ -457,6 +472,9 @@ void ImageVisual::CreateNativeImageRenderer( NativeImage& nativeImage )
   }
 
   mImpl->mRenderer = Renderer::New( geometry, shader );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 
@@ -547,7 +565,14 @@ void ImageVisual::InitializeRenderer( const std::string& imageUrl )
       ( strncasecmp( imageUrl.c_str(), HTTPS_URL, sizeof(HTTPS_URL) -1 ) != 0 ) )
   {
     bool defaultWrapMode = mWrapModeU <= WrapMode::CLAMP_TO_EDGE && mWrapModeV <= WrapMode::CLAMP_TO_EDGE;
-    bool cacheable =  defaultWrapMode &&  mPixelArea == FULL_TEXTURE_RECT;
+    bool defaultTransform = mImpl->mTransform.mSize == Vector2::ONE &&
+                            mImpl->mTransform.mOffset == Vector2::ZERO &&
+                            mImpl->mTransform.mOffsetSizeMode == Vector4::ZERO &&
+                            mImpl->mTransform.mOrigin == Toolkit::Align::CENTER &&
+                            mImpl->mTransform.mAnchorPoint == Toolkit::Align::CENTER;
+
+    bool cacheable =  defaultWrapMode && defaultTransform &&  mPixelArea == FULL_TEXTURE_RECT;
+
 
     mImpl->mFlags &= ~Impl::IS_FROM_CACHE;
     if( cacheable ) // fetch the renderer from cache if exist
@@ -716,6 +741,14 @@ Dali::Property::Value ImageVisual::DoGetProperty( Dali::Property::Index index )
   return Dali::Property::Value();
 }
 
+void ImageVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
 Shader ImageVisual::GetImageShader( VisualFactoryCache& factoryCache, bool atlasing, bool defaultTextureWrapping )
 {
   Shader shader;
diff --git a/dali-toolkit/internal/visuals/image/image-visual.h b/dali-toolkit/internal/visuals/image/image-visual.h
index c2eca0e..bedb56d 100644
--- a/dali-toolkit/internal/visuals/image/image-visual.h
+++ b/dali-toolkit/internal/visuals/image/image-visual.h
@@ -188,6 +188,11 @@ protected:
    */
   virtual void DoSetOffStage( Actor& actor );
 
+  /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
 public:
 
   /**
diff --git a/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp b/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp
index 761f1e0..3384976 100644
--- a/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp
+++ b/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp
@@ -30,6 +30,7 @@
 //INTERNAL INCLUDES
 #include <dali-toolkit/devel-api/visual-factory/devel-visual-properties.h>
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
+#include <dali-toolkit/internal/visuals/visual-string-constants.h>
 
 namespace Dali
 {
@@ -120,9 +121,26 @@ const char* SIMPLE_VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump vec3 lightPosition;\n
   uniform mediump vec2 uStageOffset;\n
 
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    float scaleFactor = min( visualSize.x, visualSize.y );\n
+    vec3 originFlipY =  vec3(origin.x, -origin.y, 0.0);
+    vec3 anchorPointFlipY = vec3( anchorPoint.x, -anchorPoint.y, 0.0);
+    vec3 offset = vec3( ( offset / uSize.xy ) * offsetSizeMode.xy + offset * (1.0-offsetSizeMode.xy), 0.0) * vec3(1.0,-1.0,1.0);\n
+    return vec4( (aPosition + anchorPointFlipY)*scaleFactor + (offset + originFlipY)*uSize, 1.0 );\n
+  }\n
+
   void main()\n
   {\n
-    vec4 normalisedVertexPosition = vec4( aPosition * min( uSize.x, uSize.y ), 1.0 );\n
+    vec4 normalisedVertexPosition = ComputeVertexPosition();\n
     vec4 vertexPosition = uObjectMatrix * normalisedVertexPosition;\n
     vertexPosition = uMvpMatrix * vertexPosition;\n
 
@@ -170,9 +188,26 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump vec3 lightPosition;\n
   uniform mediump vec2 uStageOffset;\n
 
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    float scaleFactor = min( visualSize.x, visualSize.y );\n
+    vec3 originFlipY =  vec3(origin.x, -origin.y, 0.0);
+    vec3 anchorPointFlipY = vec3( anchorPoint.x, -anchorPoint.y, 0.0);
+    vec3 offset = vec3( ( offset / uSize.xy ) * offsetSizeMode.xy + offset * (1.0-offsetSizeMode.xy), 0.0) * vec3(1.0,-1.0,1.0);\n
+    return vec4( (aPosition + anchorPointFlipY)*scaleFactor + (offset + originFlipY)*uSize, 1.0 );\n
+  }\n
+
   void main()
   {\n
-    vec4 normalisedVertexPosition = vec4( aPosition * min( uSize.x, uSize.y ), 1.0 );\n
+    vec4 normalisedVertexPosition = ComputeVertexPosition();\n
     vec4 vertexPosition = uObjectMatrix * normalisedVertexPosition;\n
     vertexPosition = uMvpMatrix * vertexPosition;\n
 
@@ -233,9 +268,27 @@ const char* NORMAL_MAP_VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump mat4 uObjectMatrix;\n
   uniform mediump vec3 lightPosition;\n
   uniform mediump vec2 uStageOffset;\n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
+  {\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    float scaleFactor = min( visualSize.x, visualSize.y );\n
+    vec3 originFlipY =  vec3(origin.x, -origin.y, 0.0);
+    vec3 anchorPointFlipY = vec3( anchorPoint.x, -anchorPoint.y, 0.0);
+    vec3 offset = vec3( ( offset / uSize.xy ) * offsetSizeMode.xy + offset * (1.0-offsetSizeMode.xy), 0.0) * vec3(1.0,-1.0,1.0);\n
+    return vec4( (aPosition + anchorPointFlipY)*scaleFactor + (offset + originFlipY)*uSize, 1.0 );\n
+  }\n
+
   void main()
   {\n
-    vec4 normalisedVertexPosition = vec4( aPosition * min( uSize.x, uSize.y ), 1.0 );\n
+    vec4 normalisedVertexPosition = ComputeVertexPosition();\n
     vec4 vertexPosition = uObjectMatrix * normalisedVertexPosition;\n
     vertexPosition = uMvpMatrix * vertexPosition;\n
 
@@ -368,6 +421,14 @@ void MeshVisual::DoSetProperties( const Property::Map& propertyMap )
   }
 }
 
+void MeshVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
 void MeshVisual::SetSize( const Vector2& size )
 {
   Visual::Base::SetSize( size );
@@ -445,6 +506,9 @@ void MeshVisual::InitializeRenderer()
   mImpl->mRenderer.SetTextures( mTextureSet );
   mImpl->mRenderer.SetProperty( Renderer::Property::DEPTH_WRITE_MODE, DepthWriteMode::ON );
   mImpl->mRenderer.SetProperty( Renderer::Property::DEPTH_TEST_MODE, DepthTestMode::ON );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 void MeshVisual::SupplyEmptyGeometry()
diff --git a/dali-toolkit/internal/visuals/mesh/mesh-visual.h b/dali-toolkit/internal/visuals/mesh/mesh-visual.h
index 4c0441a..2e3772c 100644
--- a/dali-toolkit/internal/visuals/mesh/mesh-visual.h
+++ b/dali-toolkit/internal/visuals/mesh/mesh-visual.h
@@ -109,6 +109,11 @@ protected:
   virtual void DoSetProperties( const Property::Map& propertyMap );
 
   /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
+  /**
    * @copydoc Visual::Base::DoSetOnStage
    */
   virtual void DoSetOnStage( Actor& actor );
diff --git a/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp b/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp
index b67fb18..4cba737 100644
--- a/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp
+++ b/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp
@@ -24,7 +24,7 @@
 #include <dali/public-api/images/resource-image.h>
 #include <dali/devel-api/images/texture-set-image.h>
 
-// INTERNAL IINCLUDES
+// INTERNAL INCLUDES
 #include <dali-toolkit/public-api/visuals/image-visual-properties.h>
 #include <dali-toolkit/devel-api/visual-factory/devel-visual-properties.h>
 #include <dali-toolkit/internal/visuals/visual-factory-impl.h>
@@ -55,6 +55,14 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform mediump vec2 uNinePatchFactorsX[ FACTOR_SIZE_X ];\n
   uniform mediump vec2 uNinePatchFactorsY[ FACTOR_SIZE_Y ];\n
   \n
+
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
   void main()\n
   {\n
     mediump vec2 fixedFactor  = vec2( uNinePatchFactorsX[ int( ( aPosition.x + 1.0 ) * 0.5 ) ].x, uNinePatchFactorsY[ int( ( aPosition.y + 1.0 ) * 0.5 ) ].x );\n
@@ -63,8 +71,13 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
     mediump vec2 fixedTotal   = vec2( uNinePatchFactorsX[ FACTOR_SIZE_X - 1 ].x, uNinePatchFactorsY[ FACTOR_SIZE_Y - 1 ].x );\n
     mediump vec2 stretchTotal = vec2( uNinePatchFactorsX[ FACTOR_SIZE_X - 1 ].y, uNinePatchFactorsY[ FACTOR_SIZE_Y - 1 ].y );\n
     \n
-    mediump vec4 vertexPosition = vec4( ( fixedFactor + ( uSize.xy - fixedTotal ) * stretch / stretchTotal ), 0.0, 1.0 );\n
-    vertexPosition.xy -= uSize.xy * vec2( 0.5, 0.5 );\n
+
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+
+    mediump vec4 vertexPosition = vec4( ( fixedFactor + ( visualSize.xy - fixedTotal ) * stretch / stretchTotal ) +  anchorPoint*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+    vertexPosition.xy -= visualSize.xy * vec2( 0.5, 0.5 );\n
+
     vertexPosition = uMvpMatrix * vertexPosition;\n
     \n
     vTexCoord = ( fixedFactor + stretch ) / ( fixedTotal + stretchTotal );\n
@@ -82,17 +95,28 @@ const char* VERTEX_SHADER_3X3 = DALI_COMPOSE_SHADER(
     uniform mediump vec2 uFixed[ 3 ];\n
     uniform mediump vec2 uStretchTotal;\n
     \n
+
+    //Visual size and offset
+    uniform mediump vec2 offset;\n
+    uniform mediump vec2 size;\n
+    uniform mediump vec4 offsetSizeMode;\n
+    uniform mediump vec2 origin;\n
+    uniform mediump vec2 anchorPoint;\n
+
     void main()\n
     {\n
+      vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+      vec2 visualOffset = mix( offset, offset/uSize.xy, offsetSizeMode.xy);\n
+
       mediump vec2 scale        = vec2( length( uModelMatrix[ 0 ].xyz ), length( uModelMatrix[ 1 ].xyz ) );\n
-      mediump vec2 size         = uSize.xy * scale;\n
+      mediump vec2 size         = visualSize.xy * scale;\n
       \n
       mediump vec2 fixedFactor  = vec2( uFixed[ int( ( aPosition.x + 1.0 ) * 0.5 ) ].x, uFixed[ int( ( aPosition.y  + 1.0 ) * 0.5 ) ].y );\n
       mediump vec2 stretch      = floor( aPosition * 0.5 );\n
       mediump vec2 fixedTotal   = uFixed[ 2 ];\n
       \n
-      mediump vec4 vertexPosition = vec4( fixedFactor + ( size - fixedTotal ) * stretch, 0.0, 1.0 );\n
-      vertexPosition.xy -= size * vec2( 0.5, 0.5 );\n
+      mediump vec4 vertexPosition = vec4( fixedFactor + ( size - fixedTotal ) * stretch + anchorPoint*visualSize + (visualOffset + origin)*uSize.xy, 0.0, 1.0 );\n
+      vertexPosition.xy -= visualSize * vec2( 0.5, 0.5 );\n
       vertexPosition.xy =  vertexPosition.xy / scale;\n
       \n
       vertexPosition = uMvpMatrix * vertexPosition;\n
@@ -387,6 +411,9 @@ void NPatchVisual::InitializeRenderer()
   TextureSet textureSet = TextureSet::New();
   mImpl->mRenderer = Renderer::New( geometry, shader );
   mImpl->mRenderer.SetTextures( textureSet );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 
@@ -449,6 +476,15 @@ Dali::Property::Value NPatchVisual::DoGetProperty( Dali::Property::Index index )
   return Dali::Property::Value();
 }
 
+void NPatchVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
+
 void NPatchVisual::ChangeRenderer( bool oldBorderOnly, size_t oldGridX, size_t oldGridY )
 {
   //check to see if the border style has changed
diff --git a/dali-toolkit/internal/visuals/npatch/npatch-visual.h b/dali-toolkit/internal/visuals/npatch/npatch-visual.h
index b3210b9..506087a 100644
--- a/dali-toolkit/internal/visuals/npatch/npatch-visual.h
+++ b/dali-toolkit/internal/visuals/npatch/npatch-visual.h
@@ -137,6 +137,11 @@ protected:
    */
   virtual void DoSetOffStage( Actor& actor );
 
+  /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
 private:
 
   /**
diff --git a/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp b/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp
index bc60560..8285561 100644
--- a/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp
+++ b/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp
@@ -28,6 +28,7 @@
 // INTERNAL INCLUDES
 #include <dali-toolkit/devel-api/visual-factory/devel-visual-properties.h>
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
+#include <dali-toolkit/internal/visuals/visual-string-constants.h>
 
 namespace Dali
 {
@@ -122,13 +123,26 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   uniform   mediump vec3 lightPosition;\n
   uniform   mediump vec2 uStageOffset;\n
 
-  void main()\n
+  //Visual size and offset
+  uniform mediump vec2 offset;\n
+  uniform mediump vec2 size;\n
+  uniform mediump vec4 offsetSizeMode;\n
+  uniform mediump vec2 origin;\n
+  uniform mediump vec2 anchorPoint;\n
+
+  vec4 ComputeVertexPosition()\n
   {\n
-    float xRatio = uSize.x / uObjectDimensions.x;\n
-    float yRatio = uSize.y / uObjectDimensions.y;\n
-    float scaleFactor = min( xRatio, yRatio );\n
+    vec2 visualSize = mix(uSize.xy*size, size, offsetSizeMode.zw );\n
+    float scaleFactor = min( visualSize.x / uObjectDimensions.x, visualSize.y / uObjectDimensions.y );\n
+    vec3 originFlipY =  vec3(origin.x, -origin.y, 0.0);
+    vec3 anchorPointFlipY = vec3( anchorPoint.x, -anchorPoint.y, 0.0);
+    vec3 offset = vec3( ( offset / uSize.xy ) * offsetSizeMode.xy + offset * (1.0-offsetSizeMode.xy), 0.0) * vec3(1.0,-1.0,1.0);\n
+    return vec4( (aPosition + anchorPointFlipY)*scaleFactor + (offset + originFlipY)*uSize, 1.0 );\n
+  }\n
 
-    vec4 normalisedVertexPosition = vec4( aPosition * scaleFactor, 1.0 );\n
+  void main()\n
+  {\n
+    vec4 normalisedVertexPosition = ComputeVertexPosition();\n
     vec4 vertexPosition = uObjectMatrix * normalisedVertexPosition;\n
     vertexPosition = uMvpMatrix * vertexPosition;\n
 
@@ -422,6 +436,14 @@ Dali::Property::Value PrimitiveVisual::DoGetProperty( Dali::Property::Index inde
   return Dali::Property::Value();
 }
 
+void PrimitiveVisual::OnSetTransform()
+{
+  if( mImpl->mRenderer )
+  {
+    mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
+  }
+}
+
 void PrimitiveVisual::InitializeRenderer()
 {
   if( !mGeometry )
@@ -436,6 +458,9 @@ void PrimitiveVisual::InitializeRenderer()
 
   mImpl->mRenderer = Renderer::New( mGeometry, mShader );
   mImpl->mRenderer.SetProperty( Renderer::Property::FACE_CULLING_MODE, FaceCullingMode::BACK );
+
+  //Register transform properties
+  mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 }
 
 void PrimitiveVisual::UpdateShaderUniforms()
diff --git a/dali-toolkit/internal/visuals/primitive/primitive-visual.h b/dali-toolkit/internal/visuals/primitive/primitive-visual.h
index c06d55c..c039fe3 100644
--- a/dali-toolkit/internal/visuals/primitive/primitive-visual.h
+++ b/dali-toolkit/internal/visuals/primitive/primitive-visual.h
@@ -160,6 +160,11 @@ protected:
    */
   virtual void DoSetOnStage( Actor& actor );
 
+  /**
+   * @copydoc Visual::Base::OnSetTransform
+   */
+  virtual void OnSetTransform();
+
 private:
 
   //Simple struct to store the position and normal of a single vertex.
diff --git a/dali-toolkit/internal/visuals/visual-base-data-impl.cpp b/dali-toolkit/internal/visuals/visual-base-data-impl.cpp
index 21e146f..1826196 100644
--- a/dali-toolkit/internal/visuals/visual-base-data-impl.cpp
+++ b/dali-toolkit/internal/visuals/visual-base-data-impl.cpp
@@ -46,10 +46,44 @@ DALI_ENUM_TO_STRING_WITH_SCOPE( Shader::Hint, OUTPUT_IS_TRANSPARENT )
 DALI_ENUM_TO_STRING_WITH_SCOPE( Shader::Hint, MODIFIES_GEOMETRY )
 DALI_ENUM_TO_STRING_TABLE_END( SHADER_HINT )
 
+DALI_ENUM_TO_STRING_TABLE_BEGIN( ALIGN )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, TOP_BEGIN )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, TOP_CENTER )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, TOP_END )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, CENTER_BEGIN )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, CENTER )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, CENTER_END )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, BOTTOM_BEGIN )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, BOTTOM_CENTER )
+DALI_ENUM_TO_STRING_WITH_SCOPE( Toolkit::Align, BOTTOM_END )
+DALI_ENUM_TO_STRING_TABLE_END( ALIGN )
+
+Dali::Vector2 PointToVector2( Toolkit::Align::Type point, Toolkit::Direction::Type direction )
+{
+  static const float pointToVector2[] = { 0.0f,0.0f,
+                                          0.5f,0.0f,
+                                          1.0f,0.0f,
+                                          0.0f,0.5f,
+                                          0.5f,0.5f,
+                                          1.0f,0.5f,
+                                          0.0f,1.0f,
+                                          0.5f,1.0f,
+                                          1.0f,1.0f };
+
+  Vector2 result( &pointToVector2[point*2] );
+  if( direction == Direction::RIGHT_TO_LEFT )
+  {
+    result.x = 1.0f - result.x;
+  }
+
+  return result;
+}
+
 } // unnamed namespace
 
 Internal::Visual::Base::Impl::Impl()
 : mCustomShader(NULL),
+  mTransform(),
   mDepthIndex( 0.0f ),
   mFlags( 0 )
 {
@@ -162,6 +196,77 @@ void Internal::Visual::Base::Impl::CustomShader::CreatePropertyMap( Property::Ma
   }
 }
 
+Internal::Visual::Base::Impl::Transform::Transform()
+: mOffset(0.0f,0.0f),
+  mSize(1.0f,1.0f),
+  mOffsetSizeMode(0.0f,0.0f,0.0f,0.0f),
+  mOrigin(Toolkit::Align::CENTER),
+  mAnchorPoint(Toolkit::Align::CENTER)
+{
+}
+
+void Internal::Visual::Base::Impl::Transform::SetPropertyMap( const Property::Map& map )
+{
+  //Set default values
+  mOffset = Vector2(0.0f,0.0f);
+  mSize = Vector2(1.0f,1.0f);
+  mOffsetSizeMode = Vector4(0.0f,0.0f,0.0f,0.0f);
+  mOrigin = Toolkit::Align::CENTER;
+  mAnchorPoint = Toolkit::Align::CENTER;
+
+  for( Property::Map::SizeType i(0); i<map.Count(); ++i )
+  {
+    KeyValuePair keyValue = map.GetKeyValue( i );
+    if( keyValue.first == Toolkit::Visual::DevelProperty::Transform::Property::OFFSET )
+    {
+      keyValue.second.Get( mOffset );
+    }
+    else if( keyValue.first == Toolkit::Visual::DevelProperty::Transform::Property::SIZE )
+    {
+      keyValue.second.Get( mSize );
+    }
+    else if( keyValue.first == Toolkit::Visual::DevelProperty::Transform::Property::ORIGIN )
+    {
+      Toolkit::Align::Type align(Toolkit::Align::CENTER);
+      if( Scripting::GetEnumerationProperty< Toolkit::Align::Type >( keyValue.second, ALIGN_TABLE, ALIGN_TABLE_COUNT, align ) )
+      {
+        mOrigin = align;
+      }
+    }
+    else if( keyValue.first == Toolkit::Visual::DevelProperty::Transform::Property::ANCHOR_POINT )
+    {
+      Toolkit::Align::Type align(Toolkit::Align::CENTER);
+      if( Scripting::GetEnumerationProperty< Toolkit::Align::Type >( keyValue.second, ALIGN_TABLE, ALIGN_TABLE_COUNT, align ) )
+      {
+        mAnchorPoint = align;
+      }
+    }
+    else if( keyValue.first == Toolkit::Visual::DevelProperty::Transform::Property::OFFSET_SIZE_MODE )
+    {
+      keyValue.second.Get( mOffsetSizeMode );
+    }
+  }
+}
+
+void Internal::Visual::Base::Impl::Transform::GetPropertyMap( Property::Map& map ) const
+{
+  map.Clear();
+  map.Add( Toolkit::Visual::DevelProperty::Transform::Property::OFFSET, mOffset )
+     .Add( Toolkit::Visual::DevelProperty::Transform::Property::SIZE, mSize )
+     .Add( Toolkit::Visual::DevelProperty::Transform::Property::ORIGIN, mOrigin )
+     .Add( Toolkit::Visual::DevelProperty::Transform::Property::ANCHOR_POINT, mAnchorPoint )
+     .Add( Toolkit::Visual::DevelProperty::Transform::Property::OFFSET_SIZE_MODE, mOffsetSizeMode );
+}
+
+void Internal::Visual::Base::Impl::Transform::RegisterUniforms( Dali::Renderer renderer, Toolkit::Direction::Type direction )
+{
+  renderer.RegisterProperty( SIZE, mSize );
+  renderer.RegisterProperty( OFFSET, direction == Toolkit::Direction::LEFT_TO_RIGHT ? mOffset : mOffset * Vector2(-1.0f,1.0f));
+  renderer.RegisterProperty( OFFSET_SIZE_MODE, mOffsetSizeMode );
+  renderer.RegisterProperty( ORIGIN, PointToVector2( mOrigin, direction ) - Vector2(0.5,0.5) );
+  renderer.RegisterProperty( ANCHOR_POINT, Vector2(0.5,0.5) - PointToVector2( mAnchorPoint, direction ) );
+}
+
 } // namespace Internal
 
 } // namespace Toolkit
diff --git a/dali-toolkit/internal/visuals/visual-base-data-impl.h b/dali-toolkit/internal/visuals/visual-base-data-impl.h
index c4877b4..f8ceabf 100644
--- a/dali-toolkit/internal/visuals/visual-base-data-impl.h
+++ b/dali-toolkit/internal/visuals/visual-base-data-impl.h
@@ -24,6 +24,7 @@
 
 // INTERNAL INCLUDES
 #include <dali-toolkit/internal/visuals/visual-base-impl.h>
+#include <dali-toolkit/devel-api/align-enums.h>
 
 namespace Dali
 {
@@ -60,9 +61,24 @@ struct Base::Impl
     void CreatePropertyMap( Property::Map& map ) const;
   };
 
+  struct Transform
+  {
+    Vector2 mOffset;
+    Vector2 mSize;
+    Vector4 mOffsetSizeMode;
+    Toolkit::Align::Type mOrigin;
+    Toolkit::Align::Type mAnchorPoint;
+
+    Transform();
+    void SetPropertyMap( const Property::Map& map );
+    void GetPropertyMap( Property::Map& map ) const;
+    void RegisterUniforms( Renderer renderer, Toolkit::Direction::Type direction );
+  };
+
   Renderer      mRenderer;
   CustomShader* mCustomShader;
   std::string   mName;
+  Transform     mTransform;
   Vector2       mSize;
   float         mDepthIndex;
   int           mFlags;
diff --git a/dali-toolkit/internal/visuals/visual-base-impl.cpp b/dali-toolkit/internal/visuals/visual-base-impl.cpp
index 2e1a312..d9da123 100644
--- a/dali-toolkit/internal/visuals/visual-base-impl.cpp
+++ b/dali-toolkit/internal/visuals/visual-base-impl.cpp
@@ -71,6 +71,16 @@ void Visual::Base::SetProperties( const Property::Map& propertyMap )
     }
   }
 
+  Property::Value* transform = propertyMap.Find( Toolkit::Visual::DevelProperty::TRANSFORM, TRANSFORM );
+  if( transform )
+  {
+    Property::Map map;
+    if( transform->Get( map ) )
+    {
+      mImpl->mTransform.SetPropertyMap( map );
+    }
+  }
+
   DoSetProperties( propertyMap );
 }
 
@@ -147,6 +157,10 @@ void Visual::Base::CreatePropertyMap( Property::Map& map ) const
   {
     mImpl->mCustomShader->CreatePropertyMap( map );
   }
+
+  Property::Map transform;
+  mImpl->mTransform.GetPropertyMap( transform );
+  map.Insert( Toolkit::Visual::DevelProperty::TRANSFORM, transform );
 }
 
 void Visual::Base::EnablePreMultipliedAlpha( bool preMultipled )
@@ -195,6 +209,16 @@ void Visual::Base::SetProperty( Dali::Property::Index index, const Dali::Propert
 
   if( index < VISUAL_PROPERTY_START_INDEX )
   {
+    if( index == Dali::Toolkit::Visual::DevelProperty::TRANSFORM )
+    {
+      Property::Map* map = propertyValue.GetMap();
+      if( map )
+      {
+        mImpl->mTransform.SetPropertyMap( *map );
+        OnSetTransform();
+      }
+    }
+
     // TODO set the properties of the visual base.
   }
   else
@@ -213,6 +237,12 @@ Dali::Property::Value Visual::Base::GetProperty( Dali::Property::Index index )
 
   if( index < VISUAL_PROPERTY_START_INDEX )
   {
+    if( index == Dali::Toolkit::Visual::DevelProperty::TRANSFORM )
+    {
+      Property::Map map;
+      mImpl->mTransform.GetPropertyMap( map );
+      return map;
+    }
     // TODO retrieve the properties of the visual base.
   }
   else
diff --git a/dali-toolkit/internal/visuals/visual-base-impl.h b/dali-toolkit/internal/visuals/visual-base-impl.h
index 432a3f2..306f2d9 100644
--- a/dali-toolkit/internal/visuals/visual-base-impl.h
+++ b/dali-toolkit/internal/visuals/visual-base-impl.h
@@ -186,6 +186,11 @@ protected:
    */
   virtual void DoSetProperties( const Property::Map& propertyMap ) = 0;
 
+  /**
+   * @brief Called when transform property changes
+   */
+  virtual void OnSetTransform(){}
+
 protected:
 
   /**
diff --git a/dali-toolkit/internal/visuals/visual-string-constants.cpp b/dali-toolkit/internal/visuals/visual-string-constants.cpp
index b68f27c..6f99904 100644
--- a/dali-toolkit/internal/visuals/visual-string-constants.cpp
+++ b/dali-toolkit/internal/visuals/visual-string-constants.cpp
@@ -35,6 +35,14 @@ const char * const CUSTOM_SUBDIVIDE_GRID_X( "subdivideGridX" );
 const char * const CUSTOM_SUBDIVIDE_GRID_Y( "subdivideGridY" );
 const char * const CUSTOM_SHADER_HINTS( "hints" );
 
+// Transform
+extern const char * const TRANSFORM( "transform" );
+extern const char * const SIZE( "size" );
+extern const char * const OFFSET( "offset" );
+extern const char * const OFFSET_SIZE_MODE( "offsetSizeMode" );
+extern const char * const ORIGIN( "origin" );
+extern const char * const ANCHOR_POINT( "anchorPoint" );
+
 // Image visual
 const char * const IMAGE_URL_NAME( "url" );
 const char * const ATLAS_RECT_UNIFORM_NAME ( "uAtlasRect" );
diff --git a/dali-toolkit/internal/visuals/visual-string-constants.h b/dali-toolkit/internal/visuals/visual-string-constants.h
index efb0354..5ec7e30 100644
--- a/dali-toolkit/internal/visuals/visual-string-constants.h
+++ b/dali-toolkit/internal/visuals/visual-string-constants.h
@@ -35,6 +35,15 @@ extern const char * const CUSTOM_SUBDIVIDE_GRID_X;
 extern const char * const CUSTOM_SUBDIVIDE_GRID_Y;
 extern const char * const CUSTOM_SHADER_HINTS;
 
+//Transform
+extern const char * const TRANSFORM;
+extern const char * const SIZE;
+extern const char * const OFFSET;
+extern const char * const OFFSET_SIZE_MODE;
+extern const char * const ORIGIN;
+extern const char * const ANCHOR_POINT;
+
+
 // Image visual
 extern const char * const IMAGE_URL_NAME;
 extern const char * const ATLAS_RECT_UNIFORM_NAME;