Property::Value propValue = control.GetProperty( Control::Property::BACKGROUND );
Property::Map* resultMap = propValue.GetMap();
DALI_TEST_CHECK( resultMap->Find( "rendererType" ) );
- DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "colorRenderer" );
+ DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "color" );
DALI_TEST_CHECK( resultMap->Find( "blendColor" ) );
DALI_TEST_CHECK( resultMap->Find( "blendColor" )->Get<Vector4>() == Color::RED );
Property::Value propValue = control.GetProperty( Control::Property::BACKGROUND );
Property::Map* resultMap = propValue.GetMap();
DALI_TEST_CHECK( resultMap->Find( "rendererType" ) );
- DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "imageRenderer" );
+ DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "image" );
DALI_TEST_CHECK( resultMap->Find( "imageUrl" ) );
DALI_TEST_CHECK( resultMap->Find( "imageUrl" )->Get<std::string>() == "TestImage" );
Property::Value propValue = control.GetProperty( Control::Property::BACKGROUND );
Property::Map* resultMap = propValue.GetMap();
DALI_TEST_CHECK( resultMap->Find( "rendererType" ) );
- DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "colorRenderer" );
+ DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "color" );
DALI_TEST_CHECK( resultMap->Find( "blendColor" ) );
DALI_TEST_CHECK( resultMap->Find( "blendColor" )->Get<Vector4>() == Color::RED );
propValue = control.GetProperty( Control::Property::BACKGROUND );
resultMap = propValue.GetMap();
DALI_TEST_CHECK( resultMap->Find( "rendererType" ) );
- DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "imageRenderer" );
+ DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "image" );
DALI_TEST_CHECK( resultMap->Find( "imageUrl" ) );
DALI_TEST_CHECK( resultMap->Find( "imageUrl" )->Get<std::string>() == "TestImage" );
Property::Map rendererMap;
- rendererMap["rendererType"] = "colorRenderer";
+ rendererMap["rendererType"] = "color";
rendererMap["blendColor"] = Color::CYAN;
control.SetProperty( Control::Property::BACKGROUND, rendererMap );
propValue = control.GetProperty( Control::Property::BACKGROUND );
resultMap = propValue.GetMap();
DALI_TEST_CHECK( resultMap->Find( "rendererType" ) );
- DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "colorRenderer" );
+ DALI_TEST_CHECK( resultMap->Find( "rendererType" )->Get<std::string>() == "color" );
DALI_TEST_CHECK( resultMap->Find( "blendColor" ) );
DALI_TEST_CHECK( resultMap->Find( "blendColor" )->Get<Vector4>() == Color::CYAN );
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "colorRenderer");
+ propertyMap.Insert("rendererType", "color");
propertyMap.Insert("blendColor", Color::BLUE);
ControlRenderer controlRenderer = factory.GetControlRenderer( propertyMap );
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "colorRenderer");
+ propertyMap.Insert("rendererType", "color");
propertyMap.Insert("blendColor", Color::BLUE);
ControlRenderer controlRenderer = factory.GetControlRenderer( propertyMap );
// gradient renderer
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "gradientRenderer");
+ propertyMap.Insert("rendererType", "gradient");
Vector2 start(-1.f, -1.f);
Vector2 end(1.f, 1.f);
propertyMap.Insert("gradientStartPosition", start);
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "colorRenderer");
+ propertyMap.Insert("rendererType", "color");
propertyMap.Insert("blendColor", Color::BLUE);
ControlRenderer controlRenderer = factory.GetControlRenderer( propertyMap );
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "colorRenderer");
+ propertyMap.Insert("rendererType", "color");
propertyMap.Insert("blendColor", Color::BLUE);
ControlRenderer colorRenderer = factory.GetControlRenderer( propertyMap );
Property::Value* typeValue = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( typeValue );
- DALI_TEST_CHECK( typeValue->Get<std::string>() == "colorRenderer" );
+ DALI_TEST_CHECK( typeValue->Get<std::string>() == "color" );
Property::Value* colorValue = resultMap.Find( "blendColor", Property::VECTOR4 );
DALI_TEST_CHECK( colorValue );
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "borderRenderer");
+ propertyMap.Insert("rendererType", "border");
propertyMap.Insert("borderColor", Color::BLUE);
propertyMap.Insert("borderSize", 5.f);
ControlRenderer borderRenderer = factory.GetControlRenderer( propertyMap );
// check the property values from the returned map from control renderer
Property::Value* typeValue = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( typeValue );
- DALI_TEST_CHECK( typeValue->Get<std::string>() == "borderRenderer" );
+ DALI_TEST_CHECK( typeValue->Get<std::string>() == "border" );
Property::Value* colorValue = resultMap.Find( "borderColor", Property::VECTOR4 );
DALI_TEST_CHECK( colorValue );
typeValue = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( typeValue );
- DALI_TEST_CHECK( typeValue->Get<std::string>() == "borderRenderer" );
+ DALI_TEST_CHECK( typeValue->Get<std::string>() == "border" );
colorValue = resultMap.Find( "borderColor", Property::VECTOR4 );
DALI_TEST_CHECK( colorValue );
DALI_TEST_CHECK( factory );
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "gradientRenderer");
+ propertyMap.Insert("rendererType", "gradient");
Vector2 start(-1.f, -1.f);
Vector2 end(1.f, 1.f);
// check the property values from the returned map from control renderer
Property::Value* value = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( value );
- DALI_TEST_CHECK( value->Get<std::string>() == "gradientRenderer" );
+ DALI_TEST_CHECK( value->Get<std::string>() == "gradient" );
value = resultMap.Find( "gradientUnits", Property::STRING );
DALI_TEST_CHECK( value );
DALI_TEST_CHECK( factory );
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "gradientRenderer");
+ propertyMap.Insert("rendererType", "gradient");
Vector2 center(100.f, 100.f);
float radius = 100.f;
// check the property values from the returned map from control renderer
Property::Value* value = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( value );
- DALI_TEST_CHECK( value->Get<std::string>() == "gradientRenderer" );
+ DALI_TEST_CHECK( value->Get<std::string>() == "gradient" );
value = resultMap.Find( "gradientUnits", Property::STRING );
DALI_TEST_CHECK( value );
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert( "rendererType", "imageRenderer" );
+ propertyMap.Insert( "rendererType", "image" );
propertyMap.Insert( "imageUrl", TEST_IMAGE_FILE_NAME );
propertyMap.Insert( "imageDesiredWidth", 20 );
propertyMap.Insert( "imageDesiredHeight", 30 );
// check the property values from the returned map from control renderer
Property::Value* value = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( value );
- DALI_TEST_CHECK( value->Get<std::string>() == "imageRenderer" );
+ DALI_TEST_CHECK( value->Get<std::string>() == "image" );
value = resultMap.Find( "imageUrl", Property::STRING );
DALI_TEST_CHECK( value );
value = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( value );
- DALI_TEST_CHECK( value->Get<std::string>() == "imageRenderer" );
+ DALI_TEST_CHECK( value->Get<std::string>() == "image" );
value = resultMap.Find( "imageUrl", Property::STRING );
DALI_TEST_CHECK( value );
RendererFactory factory = RendererFactory::Get();
Property::Map propertyMap;
- propertyMap.Insert( "rendererType", "nPatchRenderer" );
+ propertyMap.Insert( "rendererType", "nPatch" );
propertyMap.Insert( "imageUrl", TEST_NPATCH_FILE_NAME );
propertyMap.Insert( "borderOnly", true );
ControlRenderer nPatchRenderer = factory.GetControlRenderer( propertyMap );
// check the property values from the returned map from control renderer
Property::Value* value = resultMap.Find( "rendererType", Property::STRING );
DALI_TEST_CHECK( value );
- DALI_TEST_CHECK( value->Get<std::string>() == "nPatchRenderer" );
+ DALI_TEST_CHECK( value->Get<std::string>() == "nPatch" );
value = resultMap.Find( "imageUrl", Property::STRING );
DALI_TEST_CHECK( value );
Property::Value* typeValue = propertyMap.Find( "rendererType", Property::STRING );
if ( typeValue )
{
- isDebugRendererType = ( typeValue->Get<std::string>() == "debugRenderer" );
+ isDebugRendererType = ( typeValue->Get<std::string>() == "debug" );
}
Actor actor = Actor::New();
// Test that color renderer is replaced with debug renderer
Property::Map propertyMap1;
- propertyMap1.Insert("rendererType", "colorRenderer");
+ propertyMap1.Insert("rendererType", "color");
propertyMap1.Insert("blendColor", Color::BLUE);
ControlRenderer colorRenderer = factory.GetControlRenderer(propertyMap1);
DALI_TEST_CHECK( colorRenderer );
// Test that border renderer is replaced with debug renderer
Property::Map propertyMap2;
- propertyMap2.Insert("rendererType", "borderRenderer");
+ propertyMap2.Insert("rendererType", "border");
propertyMap2.Insert("borderColor", Color::BLUE);
propertyMap2.Insert("borderSize", 2.f);
ControlRenderer borderRenderer = factory.GetControlRenderer(propertyMap2);
// Test that gradient renderer is replaced with debug renderer
Property::Map propertyMap3;
- propertyMap3.Insert("rendererType", "gradientRenderer");
+ propertyMap3.Insert("rendererType", "gradient");
Vector2 start(-1.f, -1.f);
Vector2 end(1.f, 1.f);
propertyMap3.Insert("gradientStartPosition", start);
// Test that image renderer is replaced with debug renderer
Property::Map propertyMap4;
- propertyMap4.Insert( "rendererType", "imageRenderer" );
+ propertyMap4.Insert( "rendererType", "image" );
propertyMap4.Insert( "imageUrl", TEST_IMAGE_FILE_NAME );
ControlRenderer imageRenderer = factory.GetControlRenderer( propertyMap4 );
DALI_TEST_CHECK( imageRenderer );
// Test that n patch renderer is replaced with debug renderer
Property::Map propertyMap5;
- propertyMap5.Insert( "rendererType", "nPatchRenderer" );
+ propertyMap5.Insert( "rendererType", "nPatch" );
propertyMap5.Insert( "imageUrl", TEST_NPATCH_FILE_NAME );
ControlRenderer nPatchRenderer = factory.GetControlRenderer( propertyMap4 );
DALI_TEST_CHECK( nPatchRenderer );
// Reset with a property map of border renderer
// Test that border renderer is replaced with debug renderer
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "borderRenderer");
+ propertyMap.Insert("rendererType", "border");
propertyMap.Insert("borderColor", Color::BLUE);
propertyMap.Insert("borderSize", 2.f);
factory.ResetRenderer( controlRenderer, actor, propertyMap );
customShader.Insert( "hints", shaderHints );
Property::Map map;
- map.Insert( "rendererType", "imageRenderer" );
+ map.Insert( "rendererType", "image" );
map.Insert( "shader", customShader );
TestNativeImagePointer nativeImageInterface = TestNativeImage::New( width, height );
customShader.Insert( "hints", shaderHints );
Property::Map map;
- map.Insert( "rendererType", "imageRenderer" );
+ map.Insert( "rendererType", "image" );
map.Insert( "shader", customShader );
BufferImage image = CreateBufferImage( width, height, Color::WHITE );
Property::Map propertyMap;
Vector4 testColor( 1.f, 0.5f, 0.3f, 0.2f );
- propertyMap.Insert("rendererType", "colorRenderer");
+ propertyMap.Insert("rendererType", "color");
propertyMap.Insert("blendColor", testColor);
ControlRenderer controlRenderer = factory.GetControlRenderer(propertyMap);
Property::Map propertyMap;
Vector4 testColor( 1.f, 0.5f, 0.3f, 0.2f );
float testSize = 5.f;
- propertyMap.Insert("rendererType", "borderRenderer");
+ propertyMap.Insert("rendererType", "border");
propertyMap.Insert("borderColor", testColor);
propertyMap.Insert("borderSize", testSize);
DALI_TEST_CHECK( factory );
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "gradientRenderer");
+ propertyMap.Insert("rendererType", "gradient");
Vector2 start(-1.f, -1.f);
Vector2 end(1.f, 1.f);
DALI_TEST_CHECK( factory );
Property::Map propertyMap;
- propertyMap.Insert("rendererType", "gradientRenderer");
+ propertyMap.Insert("rendererType", "gradient");
Vector2 center(100.f, 100.f);
float radius = 100.f;
DALI_TEST_CHECK( factory );
Property::Map propertyMap;
- propertyMap.Insert( "rendererType", "imageRenderer" );
+ propertyMap.Insert( "rendererType", "image" );
propertyMap.Insert( "imageUrl", TEST_IMAGE_FILE_NAME );
ControlRenderer controlRenderer = factory.GetControlRenderer( propertyMap );
Integration::ResourcePointer ninePatchResource = CustomizeNinePatch( application, ninePatchImageWidth, ninePatchImageHeight, stretchRangesX, stretchRangesY );
Property::Map propertyMap;
- propertyMap.Insert( "rendererType", "nPatchRenderer" );
+ propertyMap.Insert( "rendererType", "nPatch" );
propertyMap.Insert( "imageUrl", TEST_NPATCH_FILE_NAME );
{
tet_infoline( "whole grid" );
Integration::ResourcePointer ninePatchResource = CustomizeNinePatch( application, ninePatchImageWidth, ninePatchImageHeight, stretchRangesX, stretchRangesY );
Property::Map propertyMap;
- propertyMap.Insert( "rendererType", "nPatchRenderer" );
+ propertyMap.Insert( "rendererType", "nPatch" );
propertyMap.Insert( "imageUrl", TEST_NPATCH_FILE_NAME );
{
ControlRenderer controlRenderer = factory.GetControlRenderer( propertyMap );
DALI_TEST_CHECK( factory );
Property::Map propertyMap;
- propertyMap.Insert( "rendererType", "nPatchRenderer" );
+ propertyMap.Insert( "rendererType", "nPatch" );
propertyMap.Insert( "imageUrl", 111 );
ControlRenderer controlRenderer = factory.GetControlRenderer( propertyMap );
Property::Map customShader;
customShader[ "fragmentShader" ] = BLOOM_EXTRACT_FRAGMENT_SOURCE;
Property::Map rendererMap;
- rendererMap.Insert( "rendererType", "imageRenderer" );
+ rendererMap.Insert( "rendererType", "image" );
rendererMap.Insert( "shader", customShader );
mBloomExtractImageActor.SetProperty( Toolkit::ImageView::Property::IMAGE, rendererMap );
Property::Map customShader;
customShader[ "fragmentShader" ] = horizFragmentShaderStringStream.str();
Property::Map rendererMap;
- rendererMap.Insert( "rendererType", "imageRenderer" );
+ rendererMap.Insert( "rendererType", "image" );
rendererMap.Insert( "shader", customShader );
//////////////////////////////////////////////////////
namespace
{
const char * const RENDERER_TYPE("rendererType");
-const char * const RENDERER_TYPE_VALUE("borderRenderer");
+const char * const RENDERER_TYPE_VALUE("border");
const char * const COLOR_NAME("borderColor");
const char * const SIZE_NAME("borderSize");
namespace
{
const char * const RENDERER_TYPE("rendererType");
-const char * const RENDERER_TYPE_VALUE("colorRenderer");
+const char * const RENDERER_TYPE_VALUE("color");
const char * const COLOR_NAME("blendColor");
const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
namespace
{
const char * const RENDERER_TYPE("rendererType");
-const char * const RENDERER_TYPE_VALUE("debugRenderer");
+const char * const RENDERER_TYPE_VALUE("debug");
const char * const POSITION_ATTRIBUTE_NAME("aPosition");
const char * const INDEX_NAME("indices");
namespace
{
const char * const RENDERER_TYPE("rendererType");
-const char * const RENDERER_TYPE_VALUE("gradientRenderer");
+const char * const RENDERER_TYPE_VALUE("gradient");
// properties: linear gradient
const char * const GRADIENT_START_POSITION_NAME("gradientStartPosition"); // Property::VECTOR2
const char HTTPS_URL[] = "https://";
const char * const RENDERER_TYPE("rendererType");
-const char * const RENDERER_TYPE_VALUE("imageRenderer");
+const char * const RENDERER_TYPE_VALUE("image");
// property names
const char * const IMAGE_URL_NAME( "imageUrl" );
namespace
{
const char * const RENDERER_TYPE("rendererType");
-const char * const RENDERER_TYPE_VALUE("nPatchRenderer");
+const char * const RENDERER_TYPE_VALUE("nPatch");
const char * const IMAGE_URL_NAME("imageUrl");
const char * const BORDER_ONLY("borderOnly");
{
const char * const RENDERER_TYPE_NAME( "rendererType" );
-const char * const COLOR_RENDERER("colorRenderer");
-const char * const BORDER_RENDERER("borderRenderer");
-const char * const GRADIENT_RENDERER("gradientRenderer");
-const char * const IMAGE_RENDERER("imageRenderer");
-const char * const N_PATCH_RENDERER("nPatchRenderer");
+const char * const COLOR_RENDERER("color");
+const char * const BORDER_RENDERER("border");
+const char * const GRADIENT_RENDERER("gradient");
+const char * const IMAGE_RENDERER("image");
+const char * const N_PATCH_RENDERER("nPatch");
const std::string TEXTURE_UNIFORM_NAME = "sTexture";
mBlurStrengthPropertyIndex = Self().RegisterProperty( "blurStrength", 0.f );
Property::Map rendererMap;
- rendererMap.Insert( "rendererType", "imageRenderer");
+ rendererMap.Insert( "rendererType", "image");
Property::Map shaderMap;
std::stringstream verterShaderString;
+ [9 Patch Image](@ref resource-9-patch)
+ [Buffer Image](@ref resource-buffer)
-### Control Base Class
+### Control Base Class & Renderers
+ [Background Feature](@ref background)
+ Keyboard Focus
+ [Accessibility](@ref accessibility)
+ + [Control Renderers](@ref control-renderers)
### UI Components
+ Buttons
The background can be set to use a specified renderer, e.g the border renderer
@code
Property::Map renderer;
-renderer.Insert("rendererType","borderRenderer");
+renderer.Insert("rendererType","border");
renderer.Insert("borderColor",COLOR::RED);
renderer.Insert("borderSize",20.f);
*
* @code
* Property::Map renderer;
- * renderer.Insert("rendererType","borderRenderer");
+ * renderer.Insert("rendererType","border");
* renderer.Insert("borderColor",COLOR::RED);
* renderer.Insert("borderSize",20.f);
*
--- /dev/null
+<!--
+/**-->
+
+# Control Renderers {#control-renderers}
+
+Control Renderers provide reusable renderering logic which can be used by all controls.
+This means that custom controls do not have to create actors, they can just reuse the existing renderers which increases performance as well.
+
+Control Renderers reuse geometry, shader etc. across controls and manages the renderer and material to exist only when the control is on-stage.
+Additionaly, they respond to actor size and color change, while also providing clipping at the renderer level.
+
+DALi provides the following renderers:
+ + [Color](@ref color-renderer)
+ + [Gradient](@ref gradient-renderer)
+ + [Image](@ref image-renderer)
+ + [N-Patch](@ref n-patch-renderer)
+ + [Border](@ref border-renderer)
+
+Controls can provide properties that allow users to specify the renderer type.
+Setting renderer properties are done via a property map.
+The **rendererType** field in the property map specifies the renderer to use/create.
+This is required to avoid ambiguity as multiple renderers may be capable of rendering the same contents.
+___________________________________________________________________________________________________
+
+## Color Renderer {#color-renderer}
+
+Renders a solid color to the control's quad.
+
+![ ](../assets/img/renderers/color-renderer.png)
+![ ](renderers/color-renderer.png)
+
+### Properties Supported
+
+**RendererType:** "color"
+
+| Property Name | Type | Required | Description |
+|---------------|:-------:|:--------:|---------------------------|
+| blendColor | VECTOR4 | Yes | The solid color required. |
+
+### Usage
+
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+map[ "rendererType" ] = "color";
+map[ "blendColor" ] = Color::RED;
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "color",
+ blendColor : dali.COLOR_RED
+};
+~~~
+___________________________________________________________________________________________________
+
+## Gradient Renderer {#gradient-renderer}
+
+Renders a smooth transition of colors to the control's quad.
+
+Both Linear and Radial gradients are supported.
+
+| Linear | Radial |
+|--------|--------|
+| ![ ](../assets/img/renderers/linear-gradient-renderer.png) ![ ](renderers/linear-gradient-renderer.png) | ![ ](../assets/img/renderers/radial-gradient-renderer.png) ![ ](renderers/radial-gradient-renderer.png) |
+
+### Properties Supported
+
+**RendererType:** "gradient"
+
+| Property Name | Type | Required | Description |
+|--------------------------------------------------------------|:----------------:|:----------:|-------------------------------------------------------------------|
+| gradientStartPosition | VECTOR2 | For Linear | The start position of the linear gradient. |
+| gradientEndPosition | VECTOR2 | For Linear | The end position of the linear gradient. |
+| gradientCenter | VECTOR2 | For Radial | The center point of the gradient. |
+| gradientRadius | FLOAT | For Radial | The size of the radius. |
+| gradientStopOffset | ARRAY of FLOAT | Yes | All the stop offsets. |
+| gradientStopColor | ARRAY of VECTOR4 | Yes | The color at those stop offsets. |
+| [gradientUnits](@ref gradient-renderer-units) | STRING | No | *objectBoundingBox* or *userSpace*. Default: *objectBoundingBox*. |
+| [gradientSpreadMethod](@ref gradient-renderer-spread-method) | STRING | No | *pad*, *repeat* or *reflect*. Default: *pad* |
+
+If the *gradientStopOffset* and *gradientStopColor* arrays do not have the same number of elements, then the minimum of the two is used as the stop points.
+
+### Units {#gradient-renderer-units}
+
+Defines the coordinate system for the attributes:
+ + Start (x1, y1) and End (x2 and y2) points of a line if using a linear gradient.
+ + Center point (cx, cy) and radius (r) of a circle if using a radial gradient.
+
+| Value | Description |
+|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
+| objectBoundingBox | *Default*. Uses the normals for the start, end & center points, i.e. top-left is (-0.5, -0.5) and bottom-right it (0.5, 0.5). |
+| userSpace | Uses the user coordinates for the start, end & center points, i.e. in a 200 by 200 control, top-left is (0, 0) and bottom-right is (200, 200). |
+
+### Spread Method {#gradient-renderer-spread-method}
+
+Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle.
+
+| Value | Description |
+|---------|------------------------------------------------------------------------------------------------------|
+| pad | *Default*. Uses the terminal colors of the gradient to fill the remainder of the quad. |
+| reflect | Reflect the gradient pattern start-to-end, end-to-start, start-to-end etc. until the quad is filled. |
+| repeat | Repeat the gradient pattern start-to-end, start-to-end, start-to-end until the quad is filled. |
+
+### Usage
+
+**Linear:**
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+map[ "rendererType" ] = "gradient";
+map[ "gradientStartPosition" ] = Vector2( 0.5f, 0.5f );
+map[ "gradientEndPosition" ] = Vector2( -0.5f, -0.5f );
+
+Dali::Property::Array stopOffsets;
+stopOffsets.PushBack( 0.0f );
+stopOffsets.PushBack( 0.3f );
+stopOffsets.PushBack( 0.6f );
+stopOffsets.PushBack( 0.8f );
+stopOffsets.PushBack( 1.f );
+map[ "gradientStopOffset" ] = stopOffsets;
+
+Dali::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 );
+map[ "gradientStopColor" ] = stopColors;
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "gradient",
+ gradientStartPosition : [ 0.5, 0.5 ],
+ gradientEndPosition : [ -0.5, -0.5 ],
+ gradientStopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
+ gradientStopColor : [
+ [ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
+ [ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
+ [ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
+ [ 129 / 255, 198 / 255, 193 / 255, 150 / 255 ],
+ dali.COLOR_YELLOW
+ ]
+};
+~~~
+
+**Radial:**
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+map[ "rendererType" ] = "gradient";
+map[ "gradientCenter" ] = Vector2( 0.5f, 0.5f );
+map[ "gradientRadius" ] = 1.414f;
+
+Dali::Property::Array stopOffsets;
+stopOffsets.PushBack( 0.0f );
+stopOffsets.PushBack( 0.3f );
+stopOffsets.PushBack( 0.6f );
+stopOffsets.PushBack( 0.8f );
+stopOffsets.PushBack( 1.f );
+map[ "gradientStopOffset" ] = stopOffsets;
+
+Dali::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 );
+map[ "gradientStopColor" ] = stopColors;
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "gradient",
+ gradientCenter : [ 0.5, 0.5 ],
+ gradientRadius : 1.414,
+ gradientStopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
+ gradientStopColor : [
+ [ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
+ [ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
+ [ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
+ [ 129 / 255, 198 / 255, 193 / 255, 150 / 255 ],
+ dali.COLOR_YELLOW
+ ]
+};
+~~~
+___________________________________________________________________________________________________
+
+## Image Renderer {#image-renderer}
+
+Renders an image into the control's quad.
+
+![ ](../assets/img/renderers/image-renderer.png)
+![ ](renderers/image-renderer.png)
+
+### Properties Supported
+
+**RendererType:** "image"
+
+| Property Name | Type | Required | Description |
+|--------------------|:--------:|:--------:|-------------------------------------------------------------------------------------------------------------------------------------------------|
+| imageUrl | STRING | Yes | The URL of the image. |
+| [imageFittingMode](@ref resourceimagescaling-fittingmode) | STRING | No | *shrinkToFit*, *scaleToFill*, *fitWidth* or *fitHeight*. Default: *shrinkToFit*. |
+| [imageSamplingMode](@ref resourceimagescaling-scaling) | STRING | No | *box*, *nearest*, *linear*, *boxThenNearest*, *boxThenLinear*, *noFilter* or *dontCare*. Default: *box*. |
+| imageDesiredWidth | INT | No | The desired image width. Will use actual image width if not specified. |
+| imageDesiredHeight | INT | No | The desired image height. Will use actual image height if not specified. |
+
+### Usage
+
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+map[ "rendererType" ] = "image";
+map[ "imageUrl" ] = "path-to-image.jpg";
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "image",
+ imageUrl : "path-to-image.jpg"
+};
+~~~
+___________________________________________________________________________________________________
+
+## N-Patch Renderer {#n-patch-renderer}
+
+Renders an n-patch or a 9-patch image into the control's quad.
+
+![ ](../assets/img/renderers/n-patch-renderer.png)
+![ ](renderers/n-patch-renderer.png)
+
+### Properties Supported
+
+**RendererType:** "nPatch"
+
+| Property Name | Type | Required | Description |
+|---------------|:-------:|:--------:|----------------------------------|
+| imageUrl | STRING | Yes | The URL of the n-patch image. |
+| borderOnly | BOOLEAN | No | If true, only draws the borders. |
+
+### Usage
+
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+
+map[ "rendererType" ] = "nPatch";
+map[ "imageUrl" ] = "path-to-image.9.png";
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "nPatch",
+ imageUrl : "path-to-image.9.png"
+};
+~~~
+___________________________________________________________________________________________________
+
+## Border Renderer {#border-renderer}
+
+Renders a solid color as an internal border to the control's quad.
+
+![ ](../assets/img/renderers/border-renderer.png)
+![ ](renderers/border-renderer.png)
+
+### Properties Supported
+
+**RendererType:** "border"
+
+| Property Name | Type | Required | Description |
+|---------------|:-------:|:--------:|--------------------------------------------------|
+| borderColor | VECTOR4 | Yes | The color of the border. |
+| borderSize | FLOAT | Yes | The width of the border (in pixels). |
+| antiAliasing | BOOLEAN | No | Whether anti-aliasing of the border is required. |
+
+### Usage
+
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+
+map[ "rendererType" ] = "border";
+map[ "borderColor" ] = Color::BLUE;
+map[ "borderSize" ] = 5.0f;
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
+~~~{.js}
+// JavaScript
+var control = new dali.Control( "Control" );
+
+control.background =
+{
+ rendererType : "border",
+ borderColor : dali.COLOR_BLUE,
+ borderSize = 5
+};
+~~~
+
+@class _Guide_Control_Renderers
+
+*/
![ ](../assets/img/image-scaling/workflow-2.png) ![ ](workflow-2.png)
-#### Fitting Mode
+#### Fitting Mode {#resourceimagescaling-fittingmode}
DALi provides a number of strategies for mapping the pixels of an image onto the target box derived above.
It provides a `FittingMode` enumeration to the developer to select a mapping or fitting approach.
"type":"ImageView",
"image":
{
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl": "{icon_path}"
},
"position":[20.0, 0.0, 0.0],
"type":"ImageView",
"image":
{
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl": "{icon_path}"
},
"position":[0.0, -10.0, 0.0],
"type":"ImageView",
"image":
{
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl": "{icon_path}"
},
"position":[20.0, 0.0, 0.0],
"type":"ImageView",
"image":
{
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl": "{icon_path}"
},
"position":[0.0, -10.0, 0.0],
var shader = createColorShiftAndZoomEffect();
var image = {
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl" : getImageDirectory()+"gallery-medium-50.jpg",
"shader" : shader
};
dali.stage.add( imageView );
var image = {
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl" : "myImage.jpg",
"width" : desiredWidth, // The desired image width while loading (optional but preferable to set for efficiency)
"height" : desiredHeight, // The desired image height while loading (optional but preferable to set for efficiency)
"type":"ImageView",
"image":
{
- "rendererType" : "imageRenderer",
+ "rendererType" : "image",
"imageUrl": "{icon_path}"
},
"position":[20.0, 0.0, 0.0],