Peter M. Groen / dali-demo

Commit 924ffe8fead8c95748015d4f6d0f2be3f2a3ebba

Authored by adam.b
Committed by Paul Wisbey
1 parent 38d875c9

Rendering of radial progress indicator 

Tutorial shows rendering of radial progress bar with
use of stencil buffer and two renderers attached
to single actor.

Change-Id: Ia1005524ec3cd27147bb2a40ddf87c7284ad7731
Inline Side-by-side
Showing 15 changed files with 345 additions and 0 deletions
com.samsung.dali-demo.xml
  View file @924ffe8
... ... @@ -212,4 +212,7 @@
212 212 <ui-application appid="rendering-triangle.example" exec="/usr/apps/com.samsung.dali-demo/bin/rendering-triangle.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
213 213 <label>Rendering Triangle</label>
214 214 </ui-application>
  215 + <ui-application appid="rendering-radial-progress.example" exec="/usr/apps/com.samsung.dali-demo/bin/rendering-radial-progress.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
  216 + <label>Rendering Radial Progress</label>
  217 + </ui-application>
215 218 </manifest>
... ...
examples-reel/dali-examples-reel.cpp
  View file @924ffe8
... ... @@ -67,6 +67,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
67 67 demo.AddExample(Example("rendering-triangle.example", DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE));
68 68 demo.AddExample(Example("rendering-cube.example", DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE));
69 69 demo.AddExample(Example("rendering-textured-cube.example", DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE));
  70 + demo.AddExample(Example("rendering-radial-progress.example", DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS));
70 71 demo.AddExample(Example("scroll-view.example", DALI_DEMO_STR_TITLE_SCROLL_VIEW));
71 72 demo.AddExample(Example("size-negotiation.example", DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE));
72 73 demo.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING));
... ...
examples/rendering-radial-progress/radial-progress.cpp 0 → 100644
  View file @924ffe8
  1 +/*
  2 + * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + *
  16 + */
  17 +
  18 +#include <dali/dali.h>
  19 +#include <dali-toolkit/dali-toolkit.h>
  20 +
  21 +using namespace Dali;
  22 +
  23 +namespace // unnamed namespace
  24 +{
  25 +
  26 +const char* TEXTURE_URL = DEMO_IMAGE_DIR "RadialEffect-280x280.png";
  27 +const unsigned int TEXTURE_WIDTH = 280;
  28 +const unsigned int TEXTURE_HEIGHT = 280;
  29 +
  30 +const int NUMBER_OF_SIDES( 64 ); // number of sides of the polygon used as a stencil
  31 +const float INITIAL_DELAY( 2.0f ); // initial delay before showing the circle
  32 +const float PROGRESS_DURATION( 0.5f ); // number of seconds to fully show the circle
  33 +
  34 +
  35 +/*
  36 + * Vertex shader for textured quad
  37 + */
  38 +const char* VERTEX_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
  39 +attribute mediump vec2 aPosition;\n
  40 +uniform mediump mat4 uMvpMatrix;\n // DALi shader builtin
  41 +uniform mediump vec3 uSize;\n // DALi shader builtin
  42 +\n
  43 +varying mediump vec2 vTexCoord;\n
  44 +void main()\n
  45 +{\n
  46 + mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
  47 + vertexPosition.xyz *= uSize;\n
  48 + vTexCoord = vec2(1.0, 1.0)*(aPosition + vec2(0.5) );\n
  49 + gl_Position = uMvpMatrix * vertexPosition;\n
  50 +}\n
  51 +);
  52 +
  53 +/*
  54 + * Fragment shaderfor textured quad
  55 + */
  56 +const char* FRAGMENT_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
  57 +uniform sampler2D uTexture;\n
  58 +\n
  59 +varying mediump vec2 vTexCoord;\n
  60 +void main()\n
  61 +{\n
  62 + mediump vec4 texColor = texture2D( uTexture, vTexCoord );\n
  63 + gl_FragColor = texColor;\n
  64 +}\n
  65 +);
  66 +
  67 +/*
  68 + * Vertex shader for polygon
  69 + */
  70 +const char* VERTEX_SHADER_BASIC = DALI_COMPOSE_SHADER(
  71 +attribute mediump vec3 aPosition;\n
  72 +uniform mediump mat4 uMvpMatrix;\n // DALi shader builtin
  73 +uniform mediump vec3 uSize;\n // DALi shader builtin
  74 +uniform mediump float uProgress;\n
  75 +\n
  76 +varying mediump vec2 vTexCoord;\n
  77 +void main()\n
  78 +{\n
  79 + mediump vec4 vertexPosition = vec4(aPosition.x, aPosition.y, 0.0, 1.0);\n
  80 +\n
  81 + float index = aPosition.z;\n
  82 + if( uProgress < index )\n
  83 + {\n
  84 + vertexPosition = vec4(0.0, 0.0, 0.0, 1.0);\n
  85 + }\n
  86 +\n
  87 + vertexPosition.xyz *= uSize;\n
  88 + gl_Position = uMvpMatrix * vertexPosition;\n
  89 +}\n
  90 +);
  91 +
  92 +/*
  93 + * Fragment shader for polygon
  94 + */
  95 +const char* FRAGMENT_SHADER_BASIC = DALI_COMPOSE_SHADER(
  96 +
  97 +void main()\n
  98 +{\n
  99 + gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );\n
  100 +}\n
  101 +);
  102 +
  103 +} // unnamed namespace
  104 +
  105 +
  106 +// This example shows how to render a radial progress indicator
  107 +//
  108 +class RadialProgressController : public ConnectionTracker
  109 +{
  110 +public:
  111 +
  112 + RadialProgressController( Application& application )
  113 + : mApplication( application )
  114 + {
  115 + // Connect to the Application's Init signal
  116 + mApplication.InitSignal().Connect( this, &RadialProgressController::Create );
  117 + }
  118 +
  119 + ~RadialProgressController()
  120 + {
  121 + // Nothing to do here
  122 + }
  123 +
  124 + // The Init signal is received once (only) during the Application lifetime
  125 + void Create( Application& application )
  126 + {
  127 + Stage stage = Stage::GetCurrent();
  128 + stage.SetBackgroundColor( Color::BLACK );
  129 +
  130 + // 1. Create actor to show the effect
  131 + mActor = Actor::New();
  132 + mActor.SetAnchorPoint( AnchorPoint::CENTER );
  133 + mActor.SetParentOrigin( ParentOrigin::CENTER );
  134 + mActor.SetSize( Vector2( TEXTURE_WIDTH, TEXTURE_HEIGHT ) );
  135 + mActor.RegisterProperty("uProgress", float(1.0f) );
  136 + stage.Add( mActor );
  137 +
  138 + // 1. Create stencil renderer i.e. a triangle fan in the shape of a circle
  139 + Renderer stencilRenderer = CreatePolygon( NUMBER_OF_SIDES );
  140 + mActor.AddRenderer( stencilRenderer );
  141 +
  142 + // 2. Create textured quad renderer
  143 + Renderer texturedQuad = CreateTexturedQuad( TEXTURE_URL );
  144 + mActor.AddRenderer( texturedQuad );
  145 +
  146 + // 5. Animate the progress uniform
  147 + Animation animation = Animation::New( PROGRESS_DURATION + INITIAL_DELAY );
  148 + animation.AnimateTo( Property(mActor,"uProgress"), float(NUMBER_OF_SIDES+1), TimePeriod(INITIAL_DELAY, PROGRESS_DURATION) );
  149 + animation.Play();
  150 +
  151 + // 6. Exit the application when touched
  152 + stage.GetRootLayer().TouchSignal().Connect( this, &RadialProgressController::OnTouch );
  153 + }
  154 +
  155 + bool OnTouch( Actor actor, const TouchData& touch )
  156 + {
  157 + // quit the application
  158 + mApplication.Quit();
  159 + return true;
  160 + }
  161 +
  162 + /**
  163 + * Generates stencil mask geometry. Geometry is rendered as
  164 + * a triangle fan and occupies square 2.0x2.0.
  165 + * @param[in] numberOfSides The more subdivisions the more smooth mask animation.
  166 + */
  167 + Renderer CreatePolygon( unsigned int numberOfSides )
  168 + {
  169 + float count( numberOfSides );
  170 +
  171 + // compute radial step in radians
  172 + const float STEP( (2.0f * M_PI) / count );
  173 + float angle( 0.0f );
  174 +
  175 + std::vector< Vector3 > vertices;
  176 + vertices.push_back( Vector3::ZERO );
  177 +
  178 + for( size_t i = 0; i <= numberOfSides; ++i )
  179 + {
  180 + vertices.push_back( Vector3( -0.5f * cos( angle ), -0.5f * sin( angle ), i+1 ) );
  181 + angle += STEP;
  182 + }
  183 +
  184 + Property::Map vertexFormat;
  185 + vertexFormat[ "aPosition" ] = Property::VECTOR3;
  186 +
  187 + // describe vertex format ( only 2-dimensional positions )
  188 + PropertyBuffer vertexBuffer = PropertyBuffer::New( vertexFormat );
  189 + vertexBuffer.SetData( vertices.data(), vertices.size() );
  190 +
  191 + // create geometry
  192 + Geometry geometry = Geometry::New();
  193 + geometry.AddVertexBuffer( vertexBuffer );
  194 + geometry.SetType( Geometry::TRIANGLE_FAN );
  195 +
  196 + Shader shader = Shader::New( VERTEX_SHADER_BASIC, FRAGMENT_SHADER_BASIC );
  197 + Renderer renderer = Renderer::New( geometry, shader );
  198 +
  199 + // Setting stencil data. We don't want to render to the color buffer so
  200 + // with use of RenderMode property we specify that only stencil buffer will
  201 + // be affected.
  202 + renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::STENCIL );
  203 +
  204 + // Set stencil function
  205 + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION, StencilFunction::ALWAYS );
  206 +
  207 + // Stencil function reference
  208 + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_REFERENCE, 1 );
  209 +
  210 + // Stencil function mask
  211 + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_MASK, 0xFF );
  212 +
  213 + // Set stencil operations
  214 + renderer.SetProperty( Renderer::Property::STENCIL_OPERATION_ON_FAIL, StencilOperation::KEEP );
  215 + renderer.SetProperty( Renderer::Property::STENCIL_OPERATION_ON_Z_FAIL, StencilOperation::KEEP );
  216 + renderer.SetProperty( Renderer::Property::STENCIL_OPERATION_ON_Z_PASS, StencilOperation::REPLACE );
  217 +
  218 + // Stencil mask to write
  219 + renderer.SetProperty( Renderer::Property::STENCIL_MASK, 0xFF );
  220 +
  221 + // Set depth index lower than textured quad renderer, so stencil will render first
  222 + renderer.SetProperty( Renderer::Property::DEPTH_INDEX, 1 );
  223 +
  224 + return renderer;
  225 + }
  226 +
  227 + /**
  228 + * Creates textured quad renderer
  229 + */
  230 + Renderer CreateTexturedQuad( const char* url )
  231 + {
  232 + // Create shader & geometry needed by Renderer
  233 +
  234 + Shader shader = Shader::New( VERTEX_SHADER_TEXTURED, FRAGMENT_SHADER_TEXTURED );
  235 +
  236 + Property::Map vertexFormat;
  237 + vertexFormat["aPosition"] = Property::VECTOR2;
  238 + PropertyBuffer vertexBuffer = PropertyBuffer::New( vertexFormat );
  239 +
  240 + const float P( 0.5f );
  241 + const Vector2 vertices[] = {
  242 + Vector2( -P, -P ),
  243 + Vector2( +P, -P ),
  244 + Vector2( -P, +P ),
  245 + Vector2( +P, +P )
  246 + };
  247 +
  248 + vertexBuffer.SetData( vertices, 4 );
  249 +
  250 + // Instantiate quad geometry
  251 + Geometry geometry = Geometry::New();
  252 + geometry.AddVertexBuffer( vertexBuffer );
  253 + geometry.SetType( Geometry::TRIANGLE_STRIP );
  254 +
  255 + // Load texture
  256 + PixelData pixelData = Toolkit::SyncImageLoader::Load( url );
  257 + Texture texture = Texture::New( TextureType::TEXTURE_2D, pixelData.GetPixelFormat(), pixelData.GetWidth(), pixelData.GetHeight() );
  258 + texture.Upload( pixelData );
  259 + texture.GenerateMipmaps();
  260 +
  261 + // Create texture set
  262 + TextureSet textureSet = TextureSet::New();
  263 + textureSet.SetTexture( 0, texture );
  264 +
  265 + // Create renderer
  266 + Renderer renderer = Renderer::New( geometry, shader );
  267 + renderer.SetTextures( textureSet );
  268 +
  269 + // Set mode indicating we will use both stencil and color buffers
  270 + renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::COLOR_STENCIL );
  271 +
  272 + // Stencil function - expecing drawing only when function mask matches exactly
  273 + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION, StencilFunction::EQUAL );
  274 + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_REFERENCE, 1 );
  275 + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_MASK, 0xFF );
  276 +
  277 + // We don't want to draw to the stencil, so setting stencil draw mask to 0
  278 + renderer.SetProperty( Renderer::Property::STENCIL_MASK, 0x00 );
  279 +
  280 + // Make sure the quad will render after drawing to stencil buffer
  281 + renderer.SetProperty( Renderer::Property::DEPTH_INDEX, 2 );
  282 +
  283 + return renderer;
  284 + }
  285 +
  286 +private:
  287 +
  288 + Application& mApplication;
  289 +
  290 + Actor mActor;
  291 +};
  292 +
  293 +void RunTest( Application& application )
  294 +{
  295 + RadialProgressController test( application );
  296 +
  297 + application.MainLoop();
  298 +}
  299 +
  300 +// Entry point for Linux & Tizen applications
  301 +//
  302 +int DALI_EXPORT_API main( int argc, char **argv )
  303 +{
  304 + Application application = Application::New( &argc, &argv );
  305 +
  306 + RunTest( application );
  307 +
  308 + return 0;
  309 +}
... ...
resources/images/RadialEffect-280x280.png 0 → 100644
View file @924ffe8

32.4 KB
resources/po/as.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;ৰেণ্ডাৰিং ত্ৰিকোণমিতি&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "ৰেণ্ডাৰিং শাৰী"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "রশ্মীয় অগ্রগতি অঙ্কন"
... ...
resources/po/de.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;Dreieck zeichnen&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "Zeichnen"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "Radialer Fortschritt zeichnen"
... ...
resources/po/en_GB.po
  View file @924ffe8
... ... @@ -171,3 +171,6 @@ msgstr &quot;Draw line&quot;
171 171  
172 172 msgid "DALI_DEMO_STR_TITLE_FOCUS_INTEGRATION"
173 173 msgstr "Focus integration"
  174 +
  175 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  176 +msgstr "Draw radial progress"
... ...
resources/po/en_US.po
  View file @924ffe8
... ... @@ -171,3 +171,6 @@ msgstr &quot;Draw line&quot;
171 171  
172 172 msgid "DALI_DEMO_STR_TITLE_FOCUS_INTEGRATION"
173 173 msgstr "Focus integration"
  174 +
  175 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  176 +msgstr "Draw radial progress"
... ...
resources/po/es.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;Dibujar triángulo&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "Dibujar linea"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "Dibujo progreso radial"
... ...
resources/po/fi.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;Piirrä kolmio&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "Draw linja"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "Piirustus radial edistyminen"
... ...
resources/po/ko.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;삼각형 그리기&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "선 그리기"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "방사형 진행 상황 그리기"
... ...
resources/po/ml.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;ത്രികോണം വരയ്ക്കുക&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "സമനില ലൈൻ"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "റേഡിയൽ പുരോഗതി ഡ്രോയിംഗ്"
... ...
resources/po/ur.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;ارڈ ثلثم &quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "انچنیھک ریکل "
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "ریڈیل پیش رفت ڈرائنگ"
... ...
resources/po/zn_CH.po
  View file @924ffe8
... ... @@ -159,3 +159,6 @@ msgstr &quot;绘制三角形&quot;
159 159  
160 160 msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE"
161 161 msgstr "画线"
  162 +
  163 +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
  164 +msgstr "绘制径向进度"
... ...
shared/dali-demo-strings.h
  View file @924ffe8
... ... @@ -73,6 +73,7 @@ extern &quot;C&quot;
73 73 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE")
74 74 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE")
75 75 #define DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE")
  76 +#define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS")
76 77 #define DALI_DEMO_STR_TITLE_REFRACTION dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_REFRACTION")
77 78 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
78 79 #define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS")
... ... @@ -133,6 +134,7 @@ extern &quot;C&quot;
133 134 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE "Draw Triangle"
134 135 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE "Draw Cube"
135 136 #define DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE "Textured Cube"
  137 +#define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS "Radial Progress"
136 138 #define DALI_DEMO_STR_TITLE_REFRACTION "Refract Effect"
137 139 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL "Renderer Stencils"
138 140 #define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL "Simple Visuals Control"
... ...