From: adam.b Date: Fri, 10 Mar 2017 11:40:09 +0000 (+0000) Subject: Rendering of radial progress indicator X-Git-Tag: dali_1.2.34~1 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-demo.git;a=commitdiff_plain;h=924ffe8fead8c95748015d4f6d0f2be3f2a3ebba 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 --- diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 9511db4..e2c2d7f 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -212,4 +212,7 @@ + + + diff --git a/examples-reel/dali-examples-reel.cpp b/examples-reel/dali-examples-reel.cpp index 0576b07..c90a3e6 100644 --- a/examples-reel/dali-examples-reel.cpp +++ b/examples-reel/dali-examples-reel.cpp @@ -67,6 +67,7 @@ int DALI_EXPORT_API main(int argc, char **argv) demo.AddExample(Example("rendering-triangle.example", DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE)); demo.AddExample(Example("rendering-cube.example", DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE)); demo.AddExample(Example("rendering-textured-cube.example", DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE)); + demo.AddExample(Example("rendering-radial-progress.example", DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS)); demo.AddExample(Example("scroll-view.example", DALI_DEMO_STR_TITLE_SCROLL_VIEW)); demo.AddExample(Example("size-negotiation.example", DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE)); demo.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING)); diff --git a/examples/rendering-radial-progress/radial-progress.cpp b/examples/rendering-radial-progress/radial-progress.cpp new file mode 100644 index 0000000..69d6e46 --- /dev/null +++ b/examples/rendering-radial-progress/radial-progress.cpp @@ -0,0 +1,309 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +#include +#include + +using namespace Dali; + +namespace // unnamed namespace +{ + +const char* TEXTURE_URL = DEMO_IMAGE_DIR "RadialEffect-280x280.png"; +const unsigned int TEXTURE_WIDTH = 280; +const unsigned int TEXTURE_HEIGHT = 280; + +const int NUMBER_OF_SIDES( 64 ); // number of sides of the polygon used as a stencil +const float INITIAL_DELAY( 2.0f ); // initial delay before showing the circle +const float PROGRESS_DURATION( 0.5f ); // number of seconds to fully show the circle + + +/* + * Vertex shader for textured quad + */ +const char* VERTEX_SHADER_TEXTURED = DALI_COMPOSE_SHADER( +attribute mediump vec2 aPosition;\n +uniform mediump mat4 uMvpMatrix;\n // DALi shader builtin +uniform mediump vec3 uSize;\n // DALi shader builtin +\n +varying mediump vec2 vTexCoord;\n +void main()\n +{\n + mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n + vertexPosition.xyz *= uSize;\n + vTexCoord = vec2(1.0, 1.0)*(aPosition + vec2(0.5) );\n + gl_Position = uMvpMatrix * vertexPosition;\n +}\n +); + +/* + * Fragment shaderfor textured quad + */ +const char* FRAGMENT_SHADER_TEXTURED = DALI_COMPOSE_SHADER( +uniform sampler2D uTexture;\n +\n +varying mediump vec2 vTexCoord;\n +void main()\n +{\n + mediump vec4 texColor = texture2D( uTexture, vTexCoord );\n + gl_FragColor = texColor;\n +}\n +); + +/* + * Vertex shader for polygon + */ +const char* VERTEX_SHADER_BASIC = DALI_COMPOSE_SHADER( +attribute mediump vec3 aPosition;\n +uniform mediump mat4 uMvpMatrix;\n // DALi shader builtin +uniform mediump vec3 uSize;\n // DALi shader builtin +uniform mediump float uProgress;\n +\n +varying mediump vec2 vTexCoord;\n +void main()\n +{\n + mediump vec4 vertexPosition = vec4(aPosition.x, aPosition.y, 0.0, 1.0);\n +\n + float index = aPosition.z;\n + if( uProgress < index )\n + {\n + vertexPosition = vec4(0.0, 0.0, 0.0, 1.0);\n + }\n +\n + vertexPosition.xyz *= uSize;\n + gl_Position = uMvpMatrix * vertexPosition;\n +}\n +); + +/* + * Fragment shader for polygon + */ +const char* FRAGMENT_SHADER_BASIC = DALI_COMPOSE_SHADER( + +void main()\n +{\n + gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );\n +}\n +); + +} // unnamed namespace + + +// This example shows how to render a radial progress indicator +// +class RadialProgressController : public ConnectionTracker +{ +public: + + RadialProgressController( Application& application ) + : mApplication( application ) + { + // Connect to the Application's Init signal + mApplication.InitSignal().Connect( this, &RadialProgressController::Create ); + } + + ~RadialProgressController() + { + // Nothing to do here + } + + // The Init signal is received once (only) during the Application lifetime + void Create( Application& application ) + { + Stage stage = Stage::GetCurrent(); + stage.SetBackgroundColor( Color::BLACK ); + + // 1. Create actor to show the effect + mActor = Actor::New(); + mActor.SetAnchorPoint( AnchorPoint::CENTER ); + mActor.SetParentOrigin( ParentOrigin::CENTER ); + mActor.SetSize( Vector2( TEXTURE_WIDTH, TEXTURE_HEIGHT ) ); + mActor.RegisterProperty("uProgress", float(1.0f) ); + stage.Add( mActor ); + + // 1. Create stencil renderer i.e. a triangle fan in the shape of a circle + Renderer stencilRenderer = CreatePolygon( NUMBER_OF_SIDES ); + mActor.AddRenderer( stencilRenderer ); + + // 2. Create textured quad renderer + Renderer texturedQuad = CreateTexturedQuad( TEXTURE_URL ); + mActor.AddRenderer( texturedQuad ); + + // 5. Animate the progress uniform + Animation animation = Animation::New( PROGRESS_DURATION + INITIAL_DELAY ); + animation.AnimateTo( Property(mActor,"uProgress"), float(NUMBER_OF_SIDES+1), TimePeriod(INITIAL_DELAY, PROGRESS_DURATION) ); + animation.Play(); + + // 6. Exit the application when touched + stage.GetRootLayer().TouchSignal().Connect( this, &RadialProgressController::OnTouch ); + } + + bool OnTouch( Actor actor, const TouchData& touch ) + { + // quit the application + mApplication.Quit(); + return true; + } + + /** + * Generates stencil mask geometry. Geometry is rendered as + * a triangle fan and occupies square 2.0x2.0. + * @param[in] numberOfSides The more subdivisions the more smooth mask animation. + */ + Renderer CreatePolygon( unsigned int numberOfSides ) + { + float count( numberOfSides ); + + // compute radial step in radians + const float STEP( (2.0f * M_PI) / count ); + float angle( 0.0f ); + + std::vector< Vector3 > vertices; + vertices.push_back( Vector3::ZERO ); + + for( size_t i = 0; i <= numberOfSides; ++i ) + { + vertices.push_back( Vector3( -0.5f * cos( angle ), -0.5f * sin( angle ), i+1 ) ); + angle += STEP; + } + + Property::Map vertexFormat; + vertexFormat[ "aPosition" ] = Property::VECTOR3; + + // describe vertex format ( only 2-dimensional positions ) + PropertyBuffer vertexBuffer = PropertyBuffer::New( vertexFormat ); + vertexBuffer.SetData( vertices.data(), vertices.size() ); + + // create geometry + Geometry geometry = Geometry::New(); + geometry.AddVertexBuffer( vertexBuffer ); + geometry.SetType( Geometry::TRIANGLE_FAN ); + + Shader shader = Shader::New( VERTEX_SHADER_BASIC, FRAGMENT_SHADER_BASIC ); + Renderer renderer = Renderer::New( geometry, shader ); + + // Setting stencil data. We don't want to render to the color buffer so + // with use of RenderMode property we specify that only stencil buffer will + // be affected. + renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::STENCIL ); + + // Set stencil function + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION, StencilFunction::ALWAYS ); + + // Stencil function reference + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_REFERENCE, 1 ); + + // Stencil function mask + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_MASK, 0xFF ); + + // Set stencil operations + renderer.SetProperty( Renderer::Property::STENCIL_OPERATION_ON_FAIL, StencilOperation::KEEP ); + renderer.SetProperty( Renderer::Property::STENCIL_OPERATION_ON_Z_FAIL, StencilOperation::KEEP ); + renderer.SetProperty( Renderer::Property::STENCIL_OPERATION_ON_Z_PASS, StencilOperation::REPLACE ); + + // Stencil mask to write + renderer.SetProperty( Renderer::Property::STENCIL_MASK, 0xFF ); + + // Set depth index lower than textured quad renderer, so stencil will render first + renderer.SetProperty( Renderer::Property::DEPTH_INDEX, 1 ); + + return renderer; + } + + /** + * Creates textured quad renderer + */ + Renderer CreateTexturedQuad( const char* url ) + { + // Create shader & geometry needed by Renderer + + Shader shader = Shader::New( VERTEX_SHADER_TEXTURED, FRAGMENT_SHADER_TEXTURED ); + + Property::Map vertexFormat; + vertexFormat["aPosition"] = Property::VECTOR2; + PropertyBuffer vertexBuffer = PropertyBuffer::New( vertexFormat ); + + const float P( 0.5f ); + const Vector2 vertices[] = { + Vector2( -P, -P ), + Vector2( +P, -P ), + Vector2( -P, +P ), + Vector2( +P, +P ) + }; + + vertexBuffer.SetData( vertices, 4 ); + + // Instantiate quad geometry + Geometry geometry = Geometry::New(); + geometry.AddVertexBuffer( vertexBuffer ); + geometry.SetType( Geometry::TRIANGLE_STRIP ); + + // Load texture + PixelData pixelData = Toolkit::SyncImageLoader::Load( url ); + Texture texture = Texture::New( TextureType::TEXTURE_2D, pixelData.GetPixelFormat(), pixelData.GetWidth(), pixelData.GetHeight() ); + texture.Upload( pixelData ); + texture.GenerateMipmaps(); + + // Create texture set + TextureSet textureSet = TextureSet::New(); + textureSet.SetTexture( 0, texture ); + + // Create renderer + Renderer renderer = Renderer::New( geometry, shader ); + renderer.SetTextures( textureSet ); + + // Set mode indicating we will use both stencil and color buffers + renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::COLOR_STENCIL ); + + // Stencil function - expecing drawing only when function mask matches exactly + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION, StencilFunction::EQUAL ); + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_REFERENCE, 1 ); + renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_MASK, 0xFF ); + + // We don't want to draw to the stencil, so setting stencil draw mask to 0 + renderer.SetProperty( Renderer::Property::STENCIL_MASK, 0x00 ); + + // Make sure the quad will render after drawing to stencil buffer + renderer.SetProperty( Renderer::Property::DEPTH_INDEX, 2 ); + + return renderer; + } + +private: + + Application& mApplication; + + Actor mActor; +}; + +void RunTest( Application& application ) +{ + RadialProgressController test( application ); + + application.MainLoop(); +} + +// Entry point for Linux & Tizen applications +// +int DALI_EXPORT_API main( int argc, char **argv ) +{ + Application application = Application::New( &argc, &argv ); + + RunTest( application ); + + return 0; +} diff --git a/resources/images/RadialEffect-280x280.png b/resources/images/RadialEffect-280x280.png new file mode 100644 index 0000000..b3423da Binary files /dev/null and b/resources/images/RadialEffect-280x280.png differ diff --git a/resources/po/as.po b/resources/po/as.po index 62e9c3f..6362f00 100755 --- a/resources/po/as.po +++ b/resources/po/as.po @@ -159,3 +159,6 @@ msgstr "ৰেণ্ডাৰিং ত্ৰিকোণমিতি" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "ৰেণ্ডাৰিং শাৰী" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "রশ্মীয় অগ্রগতি অঙ্কন" diff --git a/resources/po/de.po b/resources/po/de.po index fb5a408..7a3b2e6 100755 --- a/resources/po/de.po +++ b/resources/po/de.po @@ -159,3 +159,6 @@ msgstr "Dreieck zeichnen" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "Zeichnen" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "Radialer Fortschritt zeichnen" diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po index ed2233a..2666db5 100755 --- a/resources/po/en_GB.po +++ b/resources/po/en_GB.po @@ -171,3 +171,6 @@ msgstr "Draw line" msgid "DALI_DEMO_STR_TITLE_FOCUS_INTEGRATION" msgstr "Focus integration" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "Draw radial progress" diff --git a/resources/po/en_US.po b/resources/po/en_US.po index cc16c77..8ff3daf 100755 --- a/resources/po/en_US.po +++ b/resources/po/en_US.po @@ -171,3 +171,6 @@ msgstr "Draw line" msgid "DALI_DEMO_STR_TITLE_FOCUS_INTEGRATION" msgstr "Focus integration" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "Draw radial progress" diff --git a/resources/po/es.po b/resources/po/es.po index 6f89f16..0599171 100755 --- a/resources/po/es.po +++ b/resources/po/es.po @@ -159,3 +159,6 @@ msgstr "Dibujar triángulo" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "Dibujar linea" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "Dibujo progreso radial" diff --git a/resources/po/fi.po b/resources/po/fi.po index d27c376..a8aee6b 100755 --- a/resources/po/fi.po +++ b/resources/po/fi.po @@ -159,3 +159,6 @@ msgstr "Piirrä kolmio" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "Draw linja" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "Piirustus radial edistyminen" diff --git a/resources/po/ko.po b/resources/po/ko.po index 73c953d..013d159 100755 --- a/resources/po/ko.po +++ b/resources/po/ko.po @@ -159,3 +159,6 @@ msgstr "삼각형 그리기" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "선 그리기" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "방사형 진행 상황 그리기" diff --git a/resources/po/ml.po b/resources/po/ml.po index 2d6be55..2e47b4b 100755 --- a/resources/po/ml.po +++ b/resources/po/ml.po @@ -159,3 +159,6 @@ msgstr "ത്രികോണം വരയ്ക്കുക" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "സമനില ലൈൻ" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "റേഡിയൽ പുരോഗതി ഡ്രോയിംഗ്" diff --git a/resources/po/ur.po b/resources/po/ur.po index 212d7ad..d89d346 100755 --- a/resources/po/ur.po +++ b/resources/po/ur.po @@ -159,3 +159,6 @@ msgstr "ارڈ ثلثم " msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "انچنیھک ریکل " + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "ریڈیل پیش رفت ڈرائنگ" diff --git a/resources/po/zn_CH.po b/resources/po/zn_CH.po index 5664c1d..548987a 100755 --- a/resources/po/zn_CH.po +++ b/resources/po/zn_CH.po @@ -159,3 +159,6 @@ msgstr "绘制三角形" msgid "DALI_DEMO_STR_TITLE_RENDERING_DRAW_LINE" msgstr "画线" + +msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS" +msgstr "绘制径向进度" diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h index fc182de..d6c9da6 100644 --- a/shared/dali-demo-strings.h +++ b/shared/dali-demo-strings.h @@ -73,6 +73,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE") #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE") #define DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE") +#define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS") #define DALI_DEMO_STR_TITLE_REFRACTION dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_REFRACTION") #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL") #define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS") @@ -133,6 +134,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE "Draw Triangle" #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE "Draw Cube" #define DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE "Textured Cube" +#define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS "Radial Progress" #define DALI_DEMO_STR_TITLE_REFRACTION "Refract Effect" #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL "Renderer Stencils" #define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL "Simple Visuals Control"