Rename of Control Renderers to Visuals
[platform/core/uifw/dali-toolkit.git] / docs / content / shared-javascript-and-cpp-documentation / visuals.md
@@ -1,34 +1,34 @@
 <!--
 /**-->
 
-# Control Renderers  {#control-renderers}
+# Visuals {#visuals}
 
-Control Renderers provide reusable renderering logic which can be used by all controls.
+Visuals 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.
+Visuals 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-renderers)
- + [Border](@ref border-renderer)
- + [Mesh](@ref mesh-renderer)
- + [Primitive](@ref primitive-renderer)
+ + [Color](@ref color-visual)
+ + [Gradient](@ref gradient-visual)
+ + [Image](@ref image-visuals)
+ + [Border](@ref border-visual)
+ + [Mesh](@ref mesh-visual)
+ + [Primitive](@ref primitive-visual)
  
-Controls can provide properties that allow users to specify the renderer type.
+Controls can provide properties that allow users to specify the visual type ( rendererType ).
 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}
+## Color Visual {#color-visual}
 
 Renders a solid color to the control's quad.
  
-![ ](../assets/img/renderers/color-renderer.png)
-![ ](renderers/color-renderer.png)
+![ ](../assets/img/renderers/color-visual.png)
+![ ](renderers/color-visual.png)
 
 ### Properties Supported
 
@@ -63,7 +63,7 @@ control.background =
 ~~~
 ___________________________________________________________________________________________________
 
-## Gradient Renderer {#gradient-renderer}
+## Gradient Visual {#gradient-visual}
 
 Renders a smooth transition of colors to the control's quad.
  
@@ -71,7 +71,7 @@ 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) |
+| ![ ](../assets/img/renderers/linear-gradient-visual.png) ![ ](renderers/linear-gradient-visual.png) | ![ ](../assets/img/renderers/radial-gradient-visual.png) ![ ](renderers/radial-gradient-visual.png) |
 
 ### Properties Supported
 
@@ -85,12 +85,12 @@ Both Linear and Radial gradients are supported.
 | 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*.                            |
+| [units](@ref gradient-visual-units)                | STRING           | No         | *OBJECT_BOUNDING_BOX* or *USER_SPACE*. Default: *OBJECT_BOUNDING_BOX*.   |
+| [spreadMethod](@ref gradient-visual-spread-method) | STRING           | No         | *PAD*, *REFLECT* or *REPEAT*. Default: *PAD*.                            |
 
 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}
+### Units {#gradient-visual-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.
@@ -101,7 +101,7 @@ Defines the coordinate system for the attributes:
 | 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}
+### Spread Method {#gradient-visual-spread-method}
 
 Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle.
 
@@ -212,24 +212,24 @@ control.background =
 ~~~
 ___________________________________________________________________________________________________
 
-## Image Renderers {#image-renderers}
+## Image Visual {#image-visuals}
 
 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](@ref image-visual)
+ + [N-Patch](@ref n-patch-visual)
+ + [SVG](@ref svg-visual)
  
 ___________________________
  
-### Normal {#image-renderer}
+### Normal {#image-visual}
  
 Renders a raster image ( jpg, png etc.) into the control's quad.
  
-![ ](../assets/img/renderers/image-renderer.png)
-![ ](renderers/image-renderer.png)
+![ ](../assets/img/renderers/image-visual.png)
+![ ](renderers/image-visual.png)
 
 #### Properties Supported
 
@@ -268,7 +268,7 @@ control.background =
 ~~~
 ___________________________________________________________________________________________________
 
-### N-Patch {#n-patch-renderer}
+### N-Patch {#n-patch-visual}
 
 Renders an n-patch or a 9-patch image into the control's quad.
  
@@ -311,7 +311,7 @@ control.background =
 
 ___________________________________________________________________________________________________
 
-### SVG {#svg-renderer}
+### SVG {#svg-visual}
 
 Renders a svg image into the control's quad.
  
@@ -335,13 +335,13 @@ Renders a svg image into the control's quad.
 
 <div style="width:300px">
  
-![ ](../assets/img/renderers/svg-renderer.svg)
+![ ](../assets/img/renderers/svg-visual.svg)
  
 </div>
  
 <div style="width:300px">
  
-![ ](renderers/svg-renderer.svg)
+![ ](renderers/svg-visual.svg)
  
 </div>
 
@@ -381,12 +381,12 @@ control.background =
 ~~~
 ___________________________________________________________________________________________________
 
-## Border Renderer {#border-renderer}
+## Border Visual {#border-visual}
 
 Renders a solid color as an internal border to the control's quad.
  
-![ ](../assets/img/renderers/border-renderer.png)
-![ ](renderers/border-renderer.png)
+![ ](../assets/img/renderers/border-visual.png)
+![ ](renderers/border-visual.png)
 
 ### Properties Supported
 
@@ -427,12 +427,12 @@ control.background =
 
 ___________________________________________________________________________________________________
 
-## Mesh Renderer {#mesh-renderer}
+## Mesh Visual {#mesh-visual}
 
 Renders a mesh using a .obj file, optionally with textures provided by a mtl file. Scaled to fit the control.
 
-![ ](../assets/img/renderers/mesh-renderer.png)
-![ ](renderers/mesh-renderer.png)
+![ ](../assets/img/renderers/mesh-visual.png)
+![ ](renderers/mesh-visual.png)
 
 ### Properties Supported
 
@@ -443,12 +443,13 @@ Renders a mesh using a .obj file, optionally with textures provided by a mtl fil
 | 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.                                          |
+| [shaderType](@ref mesh-visual-shader-type) | STRING  | No                 | Sets the type of shader to be used with the mesh.                                          |
 | useMipmapping                                | BOOLEAN | No                 | Flag for whether to use mipmaps for textures or not. Default true.                         |
 | useSoftNormals                               | BOOLEAN | No                 | Flag for whether to average normals at each point to smooth textures or not. Default true. |
 | lightPosition                                | VECTOR3 | No                 | The position, in stage space, of the point light that applies lighting to the model. This is based off the stage's dimensions, so using the width and height of the stage halved will correspond to the center, and using all zeroes will place the light at the upper left corner. Note that this corresponds to a shader property, so it can be registered and set in the actor as well. |
 
-### Shader Type {#mesh-renderer-shader-type}
+
+### Shader Type {#mesh-visual-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.
  
@@ -479,7 +480,7 @@ control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
 
 ___________________________________________________________________________________________________
 
-## Primitive Renderer {#primitive-renderer}
+## Primitive Visual {#primitive-visual}
 
 Renders a simple 3D shape, such as a cube or sphere. Scaled to fit the control.