From 2e9a7bf1c9a17cef275dd9661462767d7ac45124 Mon Sep 17 00:00:00 2001 From: Xiangyin Ma Date: Thu, 21 Apr 2016 19:11:50 +0100 Subject: [PATCH] update the programming guide of ControlRenderer Change-Id: I1b086f330a575da9901fac29690c5bdfb12071cb --- .../transition-effects/cube-transition-effect.h | 2 +- .../public-api/controls/table-view/table-view.h | 4 +- docs/content/programming-guide/image-view.h | 18 ++--- docs/content/programming-guide/shader-intro.h | 18 ++--- .../control-renderers.md | 91 ++++++++++++++-------- 5 files changed, 81 insertions(+), 52 deletions(-) diff --git a/dali-toolkit/devel-api/transition-effects/cube-transition-effect.h b/dali-toolkit/devel-api/transition-effects/cube-transition-effect.h index 9c30573..05546a9 100644 --- a/dali-toolkit/devel-api/transition-effects/cube-transition-effect.h +++ b/dali-toolkit/devel-api/transition-effects/cube-transition-effect.h @@ -190,7 +190,7 @@ public: //Signal * Signal emitted when the transition has completed animation * A callback of the following type may be connected * @code - * void YourCallbackName( CubeTransitionEffect cubeEffect, ImageActor currentImage ); + * void YourCallbackName( CubeTransitionEffect cubeEffect, Image currentImage ); * @endcode * @return The Signal to connect to. */ diff --git a/dali-toolkit/public-api/controls/table-view/table-view.h b/dali-toolkit/public-api/controls/table-view/table-view.h index 9f3db3b..88403ce 100644 --- a/dali-toolkit/public-api/controls/table-view/table-view.h +++ b/dali-toolkit/public-api/controls/table-view/table-view.h @@ -69,9 +69,9 @@ class TableView; * * @code * "name":"gallery1", - * "type":"ImageActor", + * "type":"ImageView", * "image": { - * "filename": "{DALI_IMAGE_DIR}gallery-small-1.jpg" + * "url": "{DALI_IMAGE_DIR}gallery-small-1.jpg" * }, * "customProperties": { * "cellIndex":[1,1], // property to specify the top-left cell this child occupies, if not set, the first available cell is used diff --git a/docs/content/programming-guide/image-view.h b/docs/content/programming-guide/image-view.h index 63a1030..9b18dfc 100644 --- a/docs/content/programming-guide/image-view.h +++ b/docs/content/programming-guide/image-view.h @@ -69,10 +69,10 @@ * * @code * Property::Map imageProperty; - * imageProperty.Insert("imageUrl", "source-image-url.png"); - * imageProperty.Insert("imageFittingMode", "scaleToFill"); - * imageProperty.Insert("fitWidth", 240); - * imageProperty.Insert("fitHeight", 240); + * imageProperty.Insert("url", "source-image-url.png"); + * imageProperty.Insert("fittingMode", "SCALE_TO_FILL"); + * imageProperty.Insert("desiredWidth", 240); + * imageProperty.Insert("desiredHeight", 240); * Dali::Toolkit::ImageView myImageView = Dali::Toolkit::ImageView::New(); * myImageView.SetProperty( Control::Property::IMAGE, imageProperty); @@ -86,10 +86,10 @@ * * The fitting modes and a suggested use-case for each are as follows: *
    - *
  1. "shrinkToFit" Full-screen image display: Limit loaded image resolution to device resolution but show all of image. - *
  2. "scaleToFill" Thumbnail gallery grid: Limit loaded image resolution to screen tile, filling whole tile but losing a few pixels to match the tile shape. - *
  3. "fitWidth" Image columns: Limit loaded image resolution to column. - *
  4. "fitHeight" Image rows: Limit loaded image resolution to row height. + *
  5. "SHRINK_TO_FIT" Full-screen image display: Limit loaded image resolution to device resolution but show all of image. + *
  6. "SCALE_TO_FILL" Thumbnail gallery grid: Limit loaded image resolution to screen tile, filling whole tile but losing a few pixels to match the tile shape. + *
  7. "FIT_WIDTH" Image columns: Limit loaded image resolution to column. + *
  8. "FIT_HEIGHT" Image rows: Limit loaded image resolution to row height. *
* * The dali-demo project contains a full example under @@ -112,7 +112,7 @@ *

Changing the image

* The Image View can be changed by calling Dali::Toolkit::ImageView::SetImage methods or by changing the IMAGE property. * @code - * myImageActor.SetImage( newImage ); + * myImageView.SetImage( newImage ); * @endcode * */ diff --git a/docs/content/programming-guide/shader-intro.h b/docs/content/programming-guide/shader-intro.h index 54c8909..9fcb679 100644 --- a/docs/content/programming-guide/shader-intro.h +++ b/docs/content/programming-guide/shader-intro.h @@ -45,8 +45,8 @@ * * Property::Map customShader; * - * customShader.Insert(“vertex-shader”, VERTEX_SHADER); //if this is not set then the default ImageView vertex shader will be used - * customShader.Insert(“fragment-shader”, FRAGMENT_SHADER); //if this is not set then the default ImageView fragment shader will be used + * customShader.Insert(“vertexShader”, VERTEX_SHADER); //if this is not set then the default ImageView vertex shader will be used + * customShader.Insert(“fragmentShader”, FRAGMENT_SHADER); //if this is not set then the default ImageView fragment shader will be used * * Property::Map map; * map.Insert(“shader”, customShader); @@ -59,21 +59,21 @@ * @code * int X_SUB_DIVISIONS = 20; * int Y_SUB_DIVISIONS = 20; - * customShader.Insert(“subdivide-grid-x”, X_SUB_DIVISIONS); //optional number of times to subdivide the grid horizontally, don’t add if you just want to use a quad - * customShader.Insert(“subdivide-grid-y”, Y_SUB_DIVISIONS); //optional number of times to subdivide the grid vertically, don’t add if you just want to use a quad + * customShader.Insert(“subdivideGridX”, X_SUB_DIVISIONS); //optional number of times to subdivide the grid horizontally, don’t add if you just want to use a quad + * customShader.Insert(“subdivideGridY”, Y_SUB_DIVISIONS); //optional number of times to subdivide the grid vertically, don’t add if you just want to use a quad * * //shader hints can be an array or a string * optional array of shader hints * * Property::Array shaderHints; - * shaderHints.PushBack(“requires-self-depth-test”); - * shaderHints.PushBack(“output-is-transparent”); - * shaderHints.PushBack(“output-is-opaque”); - * shaderHints.PushBack(“modifies-geometry”); + * shaderHints.PushBack(“requiresSelfDepthTest”); + * shaderHints.PushBack(“outputIsTransparent”); + * shaderHints.PushBack(“outputIsOpaque”); + * shaderHints.PushBack(“modifiesGeometry”); * customShader.Insert(“hints”, shaderHints); * * //or optional single shader hint as a string - * //customShader.Insert(“hints”, “output-is-transparent”); + * //customShader.Insert(“hints”, “outputIsTransparent”); * @endcode * * The value of a uniform can be set on the imageView diff --git a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md index 2b1c272..8f77b8d 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md +++ b/docs/content/shared-javascript-and-cpp-documentation/control-renderers.md @@ -12,9 +12,7 @@ Additionaly, they respond to actor size and color change, while also providing c 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) Controls can provide properties that allow users to specify the renderer type. @@ -212,26 +210,38 @@ control.background = ~~~ ___________________________________________________________________________________________________ -## 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. + ![ ](../assets/img/renderers/image-renderer.png) ![ ](renderers/image-renderer.png) -### Properties Supported +#### 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. | +| 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_FILTERr* 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++ @@ -239,7 +249,7 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); Dali::Property::Map map; map[ "rendererType" ] = "image"; -map[ "imageUrl" ] = "path-to-image.jpg"; +map[ "url" ] = "path-to-image.jpg"; control.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map ); ~~~ @@ -251,28 +261,28 @@ var control = new dali.Control( "Control" ); control.background = { rendererType : "image", - imageUrl : "path-to-image.jpg" + 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. ![ ](../assets/img/renderers/n-patch-renderer.png) ![ ](renderers/n-patch-renderer.png) -### 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++ @@ -280,8 +290,8 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); 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 ); ~~~ @@ -292,17 +302,35 @@ var control = new dali.Control( "Control" ); 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 +
![ ](../assets/img/renderers/svg-renderer.svg) @@ -314,16 +342,17 @@ Renders a svg image into the control's quad. ![ ](renderers/svg-renderer.svg)
+ -### 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++ @@ -331,8 +360,8 @@ Dali::Toolkit::Control control = Dali::Toolkit::Control::New(); 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 ); @@ -344,8 +373,8 @@ var control = new dali.Control( "Control" ); control.background = { - rendererType : "svg", - imageUrl : "path-to-image.svg" + rendererType : "image", + url : "path-to-image.svg" }; ~~~ ___________________________________________________________________________________________________ -- 2.7.4