Renders a color to the visual's quad geometry.
-![ ](../assets/img/visuals/color-visual.png)
![ ](visuals/color-visual.png)
### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "COLOR",
- mixColor : dali.COLOR_RED
-};
-~~~
___________________________________________________________________________________________________
## Gradient Visual {#gradient-visual}
| Linear | Radial |
|--------|--------|
-| ![ ](../assets/img/visuals/linear-gradient-visual.png) ![ ](visuals/linear-gradient-visual.png) | ![ ](../assets/img/visuals/radial-gradient-visual.png) ![ ](visuals/radial-gradient-visual.png) |
+| ![ ](visuals/linear-gradient-visual.png) | ![ ](visuals/radial-gradient-visual.png) |
### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "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 ],
- [ 129 / 255, 198 / 255, 193 / 255, 150 / 255 ],
- dali.COLOR_YELLOW
- ]
-};
-~~~
-
**Radial:**
~~~{.cpp}
// C++
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "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 ],
- [ 129 / 255, 198 / 255, 193 / 255, 150 / 255 ],
- dali.COLOR_YELLOW
- ]
-};
-~~~
___________________________________________________________________________________________________
## Image Visual {#image-visuals}
Renders a raster image ( jpg, png etc.) into the visual's quad geometry.
-![ ](../assets/img/visuals/image-visual.png)
![ ](visuals/image-visual.png)
#### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.jpg"
-};
-~~~
___________________________________________________________________________________________________
### N-Patch {#n-patch-visual}
Renders an n-patch or a 9-patch image. Uses non-quad geometry. Both geometry and texture are cached to reduce memory consumption if the same n-patch image is used elsewhere.
-![ ](../assets/img/visuals/n-patch-visual.png)
![ ](visuals/n-patch-visual.png)
#### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.9.png"
-};
-~~~
-
___________________________________________________________________________________________________
### SVG {#svg-visual}
<div style="width:300px">
-![ ](../assets/img/visuals/svg-visual.svg)
</div>
control.SetSize( 200.f, 200.f );
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.svg"
-};
-~~~
-
___________________________________________________________________________________________________
## Animated Image Visual {#animated-image-visual}
Renders an animated image into the visual's quad geometry. Currently, only the GIF format is supported.
-![ ](../assets/img/visuals/animated-image-visual.gif)
![ ](animated-image-visual.gif)
#### Properties Supported
Property::Map().Add( Visual::Property::TYPE, Dali::Toolkit::Visual::IMAGE )
.Add( Dali::Toolkit::ImageVisual::Property::URL, "path-to-image.gif" ) );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.gif"
-};
-~~~
___________________________________________________________________________________________________
## Border Visual {#border-visual}
Renders a color as an internal border to the visual's geometry.
-![ ](../assets/img/visuals/border-visual.png)
![ ](visuals/border-visual.png)
### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "BORDER",
- borderColor : dali.COLOR_BLUE,
- borderSize = 5
-};
-~~~
-
___________________________________________________________________________________________________
## 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/visuals/mesh-visual.png)
![ ](visuals/mesh-visual.png)
### Properties Supported
The shapes are generated with clockwise winding and back-face culling on by default.
-![ ](../assets/img/visuals/cube.png)
![ ](visuals/cube.png)
### Properties Supported
**sphere:**
-![ ](../assets/img/visuals/sphere.png)
![ ](visuals/sphere.png)
**conics:**
| Frustrum | Cone | Cylinder |
|----------|------|----------|
-| ![ ](../assets/img/visuals/conical-frustrum.png) ![ ](visuals/conical-frustrum.png) | ![ ](../assets/img/visuals/cone.png) ![ ](visuals/cone.png) | ![ ](../assets/img/visuals/cylinder.png) ![ ](visuals/cylinder.png) |
+| ![ ](visuals/conical-frustrum.png) | ![ ](visuals/cone.png) | ![ ](visuals/cylinder.png) |
### Bevel {#bevel-details}
| 0.0 ( cube) | 0.3 | 0.7 | 1.0 (octahedron) |
|-------------|-----|-----|------------------|
-| ![ ](../assets/img/visuals/cube.png) ![ ](visuals/cube.png) | ![ ](../assets/img/visuals/bevelled-cube-low.png) ![ ](visuals/bevelled-cube-low.png) | ![ ](../assets/img/visuals/bevelled-cube-high.png) ![ ](visuals/bevelled-cube-high.png) | ![ ](../assets/img/visuals/octahedron.png) ![ ](visuals/octahedron.png) |
+| ![ ](visuals/cube.png) | ![ ](visuals/bevelled-cube-low.png) | ![ ](visuals/bevelled-cube-high.png) | ![ ](visuals/octahedron.png) |
### Slices {#slices-details}
For spheres and conical frustrums, 'slices' determines how many divisions there are as you go around the object.
-![ ](../assets/img/visuals/slices.png)
![ ](visuals/slices.png)
### Stacks {#stacks-details}
For spheres, 'stacks' determines how many layers there are as you go down the object.
-![ ](../assets/img/visuals/stacks.png)
![ ](visuals/stacks.png)
### Usage
Renders text within a control.
-![ ](../assets/img/visuals/HelloWorld.png)
![ ](visuals/HelloWorld.png)
### Properties
Renders a wireframe around a quad geometry.
Is mainly used for debugging and is the visual that replaces all other visuals when [Visual Debug Rendering](@ref debugrendering) is turned on.
-![ ](../assets/img/visuals/wireframe-visual.png)
![ ](visuals/wireframe-visual.png)
### Properties
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "WIREFRAME"
-};
-~~~
-
-@class _Guide_Control_Visuals
*/