DALi provides the following renderers:
+ [Color](@ref color-renderer)
+ [Gradient](@ref gradient-renderer)
- + [Image](@ref image-renderer)
- + [N-Patch](@ref n-patch-renderer)
- + [SVG](@ref svg-renderer)
+ + [Image](@ref image-renderers)
+ [Border](@ref border-renderer)
+ + [Mesh](@ref mesh-renderer)
Controls can provide properties that allow users to specify the renderer type.
Setting renderer properties are done via a property map.
### Properties Supported
-**RendererType:** "color"
+**RendererType:** "COLOR"
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|---------------------------|
-| blendColor | VECTOR4 | Yes | The solid color required. |
+| mixColor | VECTOR4 | Yes | The solid color required. |
### Usage
Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
-map[ "rendererType" ] = "color";
-map[ "blendColor" ] = Color::RED;
+map[ "rendererType" ] = "COLOR";
+map[ "mixColor" ] = Color::RED;
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
control.background =
{
- rendererType : "color",
- blendColor : dali.COLOR_RED
+ rendererType : "COLOR",
+ mixColor : dali.COLOR_RED
};
~~~
___________________________________________________________________________________________________
### Properties Supported
-**RendererType:** "gradient"
+**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* |
+| Property Name | Type | Required | Description |
+|------------------------------------------------------|:----------------:|:----------:|--------------------------------------------------------------------------|
+| startPosition | VECTOR2 | For Linear | The start position of the linear gradient. |
+| endPosition | VECTOR2 | For Linear | The end position of the linear gradient. |
+| center | VECTOR2 | For Radial | The center point of the gradient. |
+| radius | FLOAT | For Radial | The size of the radius. |
+| stopOffset | ARRAY of FLOAT | No | All the stop offsets. If not supplied default is 0.0 and 1.0. |
+| stopColor | ARRAY of VECTOR4 | Yes | The color at those stop offsets. At least 2 required to show a gradient. |
+| [units](@ref gradient-renderer-units) | STRING | No | *OBJECT_BOUNDING_BOX* or *USER_SPACE*. Default: *OBJECT_BOUNDING_BOX*. |
+| [spreadMethod](@ref gradient-renderer-spread-method) | STRING | No | *PAD*, *REFLECT* or *REPEAT*. 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.
+If the *stopOffset* and *stopColor* 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}
+ 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). |
+| Value | Description |
+|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
+| OBJECT_BOUNDING_BOX | *Default*. Uses the normals for the start, end & center points, i.e. top-left is (-0.5, -0.5) and bottom-right is (0.5, 0.5). |
+| USER_SPACE | 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}
| 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. |
+| 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 etc. until the quad is filled. |
### Usage
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 );
+map[ "rendererType" ] = "GRADIENT";
+map[ "startPosition" ] = Vector2( 0.5f, 0.5f );
+map[ "endPosition" ] = Vector2( -0.5f, -0.5f );
Dali::Property::Array stopOffsets;
stopOffsets.PushBack( 0.0f );
stopOffsets.PushBack( 0.6f );
stopOffsets.PushBack( 0.8f );
stopOffsets.PushBack( 1.f );
-map[ "gradientStopOffset" ] = stopOffsets;
+map[ "stopOffset" ] = stopOffsets;
Dali::Property::Array stopColors;
stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.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;
+map[ "stopColor" ] = stopColors;
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
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 : [
+ rendererType : "GRADIENT",
+ startPosition : [ 0.5, 0.5 ],
+ endPosition : [ -0.5, -0.5 ],
+ stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
+ stopColor : [
[ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
[ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
[ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
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;
+map[ "rendererType" ] = "GRADIENT";
+map[ "center" ] = Vector2( 0.5f, 0.5f );
+map[ "radius" ] = 1.414f;
Dali::Property::Array stopOffsets;
stopOffsets.PushBack( 0.0f );
stopOffsets.PushBack( 0.6f );
stopOffsets.PushBack( 0.8f );
stopOffsets.PushBack( 1.f );
-map[ "gradientStopOffset" ] = stopOffsets;
+map[ "stopOffset" ] = stopOffsets;
Dali::Property::Array stopColors;
stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.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;
+map[ "stopColor" ] = stopColors;
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
control.background =
{
- rendererType : "gradient",
- gradientCenter : [ 0.5, 0.5 ],
- gradientRadius : 1.414,
- gradientStopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
- gradientStopColor : [
+ rendererType : "GRADIENT",
+ center : [ 0.5, 0.5 ],
+ radius : 1.414,
+ stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
+ stopColor : [
[ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
[ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
[ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
~~~
___________________________________________________________________________________________________
-## Image Renderer {#image-renderer}
+## Image Renderers {#image-renderers}
Renders an image into the control's quad.
+Depending on the extension of the image, different renderer is provided to render the image onto the screen.
+
+ + [Normal](@ref image-renderer)
+ + [N-Patch](@ref n-patch-renderer)
+ + [SVG](@ref svg-renderer)
+
+___________________________
+
+### Normal {#image-renderer}
+
+Renders a raster image ( jpg, png etc.) into the control's quad.
+
-### Properties Supported
+#### Properties Supported
-**RendererType:** "image"
+**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. |
+| Property Name | Type | Required | Description |
+|------------------------------------------------------|:--------:|:--------:|----------------------------------------------------------------------------------------------------------------|
+| url | STRING | Yes | The URL of the image. |
+| [fittingMode](@ref resourceimagescaling-fittingmode) | STRING | No | *SHRINK_TO_FIT*, *SCALE_TO_FILL*, *FIT_WIDTH* or *FIT_HEIGHT*. Default: *SHRINK_TO_FIT*. |
+| [samplingMode](@ref resourceimagescaling-scaling) | STRING | No | *BOX*, *NEAREST*, *LINEAR*, *BOX_THEN_NEAREST*, *BOX_THEN_LINEAR*, *NO_FILTER* or *DONT_CARE*. Default: *BOX*. |
+| desiredWidth | INT | No | The desired image width. Will use actual image width if not specified. |
+| desiredHeight | INT | No | The desired image height. Will use actual image height if not specified. |
-### Usage
+#### Usage
~~~{.cpp}
// C++
Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
Dali::Property::Map map;
-map[ "rendererType" ] = "image";
-map[ "imageUrl" ] = "path-to-image.jpg";
+map[ "rendererType" ] = "IMAGE";
+map[ "url" ] = "path-to-image.jpg";
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
control.background =
{
- rendererType : "image",
- imageUrl : "path-to-image.jpg"
+ rendererType : "IMAGE",
+ url : "path-to-image.jpg"
};
~~~
___________________________________________________________________________________________________
-## N-Patch Renderer {#n-patch-renderer}
+### N-Patch {#n-patch-renderer}
Renders an n-patch or a 9-patch image into the control's quad.
-### Properties Supported
+#### Properties Supported
-**RendererType:** "nPatch"
+**RendererType:** "IMAGE"
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|----------------------------------|
-| imageUrl | STRING | Yes | The URL of the n-patch image. |
+| url | STRING | Yes | The URL of the n-patch image. |
| borderOnly | BOOLEAN | No | If true, only draws the borders. |
-### Usage
+#### Usage
~~~{.cpp}
// C++
Dali::Property::Map map;
-map[ "rendererType" ] = "nPatch";
-map[ "imageUrl" ] = "path-to-image.9.png";
+map[ "rendererType" ] = "IMAGE";
+map[ "url" ] = "path-to-image.9.png";
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
~~~
control.background =
{
- rendererType : "nPatch",
- imageUrl : "path-to-image.9.png"
+ rendererType : "IMAGE",
+ url : "path-to-image.9.png"
};
~~~
___________________________________________________________________________________________________
-## SVG Renderer {#svg-renderer}
+### SVG {#svg-renderer}
Renders a svg image into the control's quad.
+#### Features: SVG Tiny 1.2 specification
+
+**supported:**
+
+ * basic shapes
+ * paths
+ * solid color fill
+ * gradient color fill
+ * solid color stroke
+
+**not supported:**
+
+ * gradient color stroke
+ * dash array stroke
+ * view box
+ * text
+ * clip path
+
<div style="width:300px">
</div>
+
-### Properties Supported
+#### Properties Supported
-**RendererType:** "svg"
+**RendererType:** "IMAGE"
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|----------------------------------|
-| imageUrl | STRING | Yes | The URL of the SVG image. |
+| url | STRING | Yes | The URL of the SVG image. |
-### Usage
+#### Usage
~~~{.cpp}
// C++
Dali::Property::Map map;
-map[ "rendererType" ] = "svg";
-map[ "imageUrl" ] = "path-to-image.svg";
+map[ "rendererType" ] = "IMAGE";
+map[ "url" ] = "path-to-image.svg";
control.SetSize( 200.f, 200.f );
control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
control.background =
{
- rendererType : "svg",
- imageUrl : "path-to-image.svg"
+ rendererType : "IMAGE",
+ url : "path-to-image.svg"
};
~~~
___________________________________________________________________________________________________
### Properties Supported
-**RendererType:** "border"
+**RendererType:** "BORDER"
| Property Name | Type | Required | Description |
|---------------|:-------:|:--------:|--------------------------------------------------|
Dali::Property::Map map;
-map[ "rendererType" ] = "border";
+map[ "rendererType" ] = "BORDER";
map[ "borderColor" ] = Color::BLUE;
map[ "borderSize" ] = 5.0f;
control.background =
{
- rendererType : "border",
+ rendererType : "BORDER",
borderColor : dali.COLOR_BLUE,
borderSize = 5
};
~~~
+___________________________________________________________________________________________________
+
+## Mesh Renderer {#mesh-renderer}
+
+Renders a mesh using a .obj file, optionally with textures provided by a mtl file. Scaled to fit the control.
+
+
+
+
+### Properties Supported
+
+**RendererType** "MESH"
+
+| Property Name | Type | Required | Description |
+|----------------------------------------------|:-------:|:------------------:|--------------------------------------------------------------------------------|
+| objectUrl | STRING | Yes | The location of the ".obj" file. |
+| materialUrl | STRING | No | The location of the ".mtl" file. Leave blank for a textureless object. |
+| texturesPath | STRING | If using material | Path to the directory the textures (including gloss and normal) are stored in. |
+| [shaderType](@ref mesh-renderer-shader-type) | STRING | No | Sets the type of shader to be used with the mesh. |
+
+### Shader Type {#mesh-renderer-shader-type}
+
+When specifying the shader type, if anything the shader requires is missing, a simpler type that can be handled with what has been supplied will be used instead.
+
+**Possible values:**
+
+| String Value | Description |
+|-----------------|------------------------------------------------|
+| TEXTURELESS | *Simplest*. A flat color with shading is used. |
+| DIFFUSE_TEXTURE | Textured. |
+| ALL_TEXTURES | Has a gloss, normal map and texture map. |
+
+### Usage
+
+~~~{.cpp}
+// C++
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+
+Dali::Property::Map map;
+
+map[ "rendererType" ] = "MESH";
+map[ "objectUrl" ] = "home/models/Dino.obj";
+map[ "materialUrl" ] = "home/models/Dino.mtl";
+map[ "texturesPath" ] = "home/images/";
+
+control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+~~~
+
@class _Guide_Control_Renderers
*/
projects / platform / core / uifw / dali-toolkit.git / blobdiff