Gaussian blur demos

Change-Id: I5339a44b6df5826ba7c9ad8f7ec3ae2328e8c966

Gaussian blur demos
Change-Id: I5339a44b6df5826ba7c9ad8f7ec3ae2328e8c966
Paul Wisbey
1 parent 88009136
Showing 8 changed files with 335 additions and 3 deletions
com.samsung.dali-demo.xml
examples-reel/dali-examples-reel.cpp
examples/gaussian-blur-view/gaussian-blur-view-example.cpp
examples/super-blur-view/super-blur-view-example.cpp
resources/po/en_GB.po
resources/po/en_US.po
resources/scripts/super-blur-view.json
shared/dali-demo-strings.h
@@ -299,6 +299,12 @@
   <ui-application appid="visual-fitting-mode.example" exec="/usr/apps/com.samsung.dali-demo/bin/visual-fitting-mode.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Visual Fitting Mode</label>
 	</ui-application>
+	<ui-application appid="gaussian-blur-view.example" exec="/usr/apps/com.samsung.dali-demo/bin/gaussian-blur-view.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Gaussian Blur</label>
+	</ui-application>
+	<ui-application appid="super-blur-view.example" exec="/usr/apps/com.samsung.dali-demo/bin/super-blur-view.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Super Blur</label>
+	</ui-application>
 	<privileges>
 		<privilege>http://tizen.org/privilege/mediastorage</privilege>
@@ -50,6 +50,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("flex-container.example", DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND));
   demo.AddExample(Example("frame-callback.example", DALI_DEMO_STR_TITLE_FRAME_CALLBACK));
   demo.AddExample(Example("focus-integration.example", DALI_DEMO_STR_TITLE_FOCUS_INTEGRATION));
+  demo.AddExample(Example("gaussian-blur-view.example", DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW));
   demo.AddExample(Example("gestures.example", DALI_DEMO_STR_TITLE_GESTURES));
   demo.AddExample(Example("gradients.example", DALI_DEMO_STR_TITLE_COLOR_GRADIENT));
   demo.AddExample(Example("hello-world.example", DALI_DEMO_STR_TITLE_HELLO_WORLD));
@@ -80,6 +81,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   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));
+  demo.AddExample(Example("super-blur-view.example", DALI_DEMO_STR_TITLE_SUPER_BLUR_VIEW));
   demo.AddExample(Example("text-editor.example", DALI_DEMO_STR_TITLE_TEXT_EDITOR));
   demo.AddExample(Example("text-field.example", DALI_DEMO_STR_TITLE_TEXT_FIELD));
   demo.AddExample(Example("text-label.example", DALI_DEMO_STR_TITLE_TEXT_LABEL));
+/*
+ * Copyright (c) 2019 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 <algorithm>
+
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/gaussian-blur-view/gaussian-blur-view.h>
+
+using namespace Dali;
+using Dali::Toolkit::TextLabel;
+using Dali::Toolkit::GaussianBlurView;
+
+namespace
+{
+
+const char* const BACKGROUND_IMAGE( DEMO_IMAGE_DIR "lake_front.jpg" );
+const float BACKGROUND_IMAGE_WIDTH = 2048.0f;
+
+}
+
+/**
+ * This example shows a scrolling background image which can be blurred (on/off) by tapping the screen
+ */
+class GaussianBlurViewExample : public ConnectionTracker
+{
+public:
+
+  GaussianBlurViewExample( Application& application )
+  : mApplication( application ),
+    mExcessWidth( 0.0f ),
+    mStrength( 1.0f )
+  {
+    mApplication.InitSignal().Connect( this, &GaussianBlurViewExample::Create );
+  }
+
+  ~GaussianBlurViewExample() = default;
+
+private:
+
+  void Create( Application& application )
+  {
+    Stage stage = Stage::GetCurrent();
+    Vector2 stageSize = stage.GetSize();
+    stage.KeyEventSignal().Connect(this, &GaussianBlurViewExample::OnKeyEvent);
+
+    mImageView = Toolkit::ImageView::New( BACKGROUND_IMAGE );
+    mImageView.SetParentOrigin( ParentOrigin::CENTER );
+    mImageView.SetAnchorPoint( AnchorPoint::CENTER );
+
+    stage.Add( mImageView );
+
+    float excessWidth = std::max( 0.0f, (BACKGROUND_IMAGE_WIDTH - stageSize.width) * 0.5f );
+
+    if( excessWidth > 0.0f )
+    {
+      // Move background image to show GaussianBlurView activity
+
+      float pixelsPerSecond = 10.0f;
+      float duration = excessWidth / pixelsPerSecond;
+      float qDuration = duration * 0.25f;
+
+      mAnimation = Animation::New( duration );
+      mAnimation.AnimateTo( Property(mImageView, Actor::Property::POSITION_X),  excessWidth, TimePeriod(0.0f          , qDuration) );
+      mAnimation.AnimateTo( Property(mImageView, Actor::Property::POSITION_X),         0.0f, TimePeriod(qDuration     , qDuration) );
+      mAnimation.AnimateTo( Property(mImageView, Actor::Property::POSITION_X), -excessWidth, TimePeriod(2.0f*qDuration, qDuration) );
+      mAnimation.AnimateTo( Property(mImageView, Actor::Property::POSITION_X),         0.0f, TimePeriod(3.0f*qDuration, qDuration) );
+
+      mAnimation.SetLooping( true );
+      mAnimation.Play();
+    }
+
+    Layer onTop = Layer::New();
+    onTop.SetParentOrigin( ParentOrigin::CENTER );
+    onTop.SetAnchorPoint( AnchorPoint::CENTER );
+    onTop.SetSize( stageSize );
+    stage.Add( onTop );
+    onTop.RaiseToTop();
+
+    mOnLabel = TextLabel::New( "Blur ON" );
+    mOnLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mOnLabel.SetProperty( TextLabel::Property::TEXT_COLOR, Color::GREEN );
+    mOnLabel.SetVisible( false );
+    onTop.Add( mOnLabel );
+
+    mOffLabel = TextLabel::New( "Blur OFF" );
+    mOffLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mOffLabel.SetProperty( TextLabel::Property::TEXT_COLOR, Color::WHITE );
+    mOffLabel.SetVisible( true );
+    onTop.Add( mOffLabel );
+
+    stage.GetRootLayer().TouchSignal().Connect( this, &GaussianBlurViewExample::OnTouch );
+  }
+
+  bool OnTouch( Actor actor, const TouchData& touch )
+  {
+      const PointState::Type state = touch.GetState( 0 );
+
+      if( PointState::DOWN == state )
+      {
+        Stage stage = Stage::GetCurrent();
+
+        // Enable/disable blur effect
+
+        if( !mGaussianBlurView )
+        {
+          mGaussianBlurView = GaussianBlurView::New( 30, 8.0f, Pixel::RGBA8888, 0.5f, 0.5f, false );
+          mGaussianBlurView.SetParentOrigin( ParentOrigin::CENTER );
+          mGaussianBlurView.SetAnchorPoint( AnchorPoint::CENTER );
+          mGaussianBlurView.SetSize( stage.GetSize() );
+          stage.Add( mGaussianBlurView );
+
+          mGaussianBlurView.Add( mImageView );
+          mGaussianBlurView.Activate();
+
+          mGaussianBlurView.SetProperty( mGaussianBlurView.GetBlurStrengthPropertyIndex(), mStrength );
+
+          mOnLabel.SetVisible( true );
+          mOffLabel.SetVisible( false );
+        }
+        else
+        {
+          stage.Add( mImageView );
+
+          UnparentAndReset( mGaussianBlurView );
+
+          mOnLabel.SetVisible( false );
+          mOffLabel.SetVisible( true );
+        }
+
+      }
+
+    return true;
+  }
+
+  void OnKeyEvent(const KeyEvent& event)
+  {
+    if(event.state == KeyEvent::Down)
+    {
+      if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+private:
+
+  Application&  mApplication;
+
+  Toolkit::ImageView mImageView;
+
+  Animation mAnimation;
+
+  TextLabel mOnLabel;
+  TextLabel mOffLabel;
+
+  GaussianBlurView mGaussianBlurView;
+
+  float mExcessWidth;
+  float mStrength;
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv );
+
+  GaussianBlurViewExample test( application );
+
+  application.MainLoop();
+
+  return 0;
+}
+/*
+ * Copyright (c) 2019 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 <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/super-blur-view/super-blur-view.h>
+
+using namespace Dali;
+using Dali::Toolkit::Button;
+using Dali::Toolkit::PushButton;
+using Dali::Toolkit::SuperBlurView;
+
+namespace
+{
+
+const char* const BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-4.jpg" );
+
+const unsigned int DEFAULT_BLUR_LEVEL(5u); ///< The default blur level when creating SuperBlurView from the type registry
+
+}
+
+/**
+ * This example shows a background image which is "super blurred" while the push-button control is pressed.
+ */
+class SuperBlurViewExample : public ConnectionTracker
+{
+public:
+
+  SuperBlurViewExample( Application& application )
+  : mApplication( application )
+  {
+    mApplication.InitSignal().Connect( this, &SuperBlurViewExample::Create );
+  }
+
+  ~SuperBlurViewExample() = default;
+
+private:
+
+  void Create( Application& application )
+  {
+    Stage stage = Stage::GetCurrent();
+    stage.KeyEventSignal().Connect( this, &SuperBlurViewExample::OnKeyEvent );
+
+    mSuperBlurView = SuperBlurView::New( DEFAULT_BLUR_LEVEL );
+    mSuperBlurView.SetParentOrigin( ParentOrigin::CENTER );
+    mSuperBlurView.SetAnchorPoint( AnchorPoint::CENTER );
+    mSuperBlurView.SetSize( 800, 1280 );
+    mSuperBlurView.SetProperty( SuperBlurView::Property::IMAGE_URL, BACKGROUND_IMAGE );
+    stage.Add( mSuperBlurView );
+
+    mBlurAnimation = Animation::New(1.0f);
+    mBlurAnimation.AnimateTo( Property(mSuperBlurView, mSuperBlurView.GetBlurStrengthPropertyIndex()), 1.0f );
+
+    mClearAnimation = Animation::New(1.0f);
+    mClearAnimation.AnimateTo( Property(mSuperBlurView, mSuperBlurView.GetBlurStrengthPropertyIndex()), 0.0f );
+
+    mPushButton = PushButton::New();
+    mPushButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    mPushButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+    mPushButton.SetProperty( Button::Property::LABEL_TEXT, "Blur" );
+    mPushButton.PressedSignal().Connect( this, &SuperBlurViewExample::OnButtonPressed );
+    mPushButton.ReleasedSignal().Connect( this, &SuperBlurViewExample::OnButtonReleased );
+    stage.Add( mPushButton );
+  }
+
+  bool OnButtonPressed( Button button )
+  {
+    mBlurAnimation.Play();
+    return true;
+  }
+
+  bool OnButtonReleased( Button button )
+  {
+    mClearAnimation.Play();
+    return true;
+  }
+
+  void OnKeyEvent( const KeyEvent& event )
+  {
+    if ( event.state == KeyEvent::Down )
+    {
+      if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+private:
+
+  Application&  mApplication;
+
+  SuperBlurView mSuperBlurView;
+
+  PushButton mPushButton;
+
+  Animation mBlurAnimation;
+  Animation mClearAnimation;
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv );
+
+  SuperBlurViewExample test( application );
+
+  application.MainLoop();
+
+  return 0;
+}
@@ -40,6 +40,9 @@ msgstr &quot;Clipping&quot;
 msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER"
 msgstr "Clipping Draw Order"
+msgid "DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW"
+msgstr "Gaussian Blur"
+
 msgid "DALI_DEMO_STR_TITLE_GESTURES"
 msgstr "Gestures"
@@ -181,6 +184,9 @@ msgstr &quot;Sparkle&quot;
 msgid "DALI_DEMO_STR_TITLE_STYLING"
 msgstr "Styling"
+msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_VIEW"
+msgstr "Super Blur"
+
 msgid "DALI_DEMO_STR_TITLE_TEXTURED_MESH"
 msgstr "Mesh Texture"
@@ -40,6 +40,9 @@ msgstr &quot;Clipping&quot;
 msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER"
 msgstr "Clipping Draw Order"
+msgid "DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW"
+msgstr "Gaussian Blur"
+
 msgid "DALI_DEMO_STR_TITLE_GESTURES"
 msgstr "Gestures"
@@ -184,6 +187,9 @@ msgstr &quot;Sparkle&quot;
 msgid "DALI_DEMO_STR_TITLE_STYLING"
 msgstr "Styling"
+msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_VIEW"
+msgstr "Super Blur"
+
 msgid "DALI_DEMO_STR_TITLE_TEXTURED_MESH"
 msgstr "Mesh Texture"
@@ -52,9 +52,7 @@
       "parentOrigin": "TOP_CENTER",
       "anchorPoint": "TOP_CENTER",
       "size": [800, 1280, 0],
-      "image": {
-        "filename": "{DEMO_IMAGE_DIR}background-4.jpg"
-      }
+      "imageUrl": "{DEMO_IMAGE_DIR}background-4.jpg"
     },
     // Button to blur/clear
@@ -46,6 +46,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_CARD_ACTIVE                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CARD_ACTIVE")
 #define DALI_DEMO_STR_TITLE_CLIPPING                    dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING")
 #define DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER         dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER")
+#define DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW          dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW")
 #define DALI_DEMO_STR_TITLE_GESTURES                    dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_GESTURES")
 #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COLOR_GRADIENT")
 #define DALI_DEMO_STR_TITLE_COMPRESSED_TEXTURE_FORMATS  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COMPRESSED_TEXTURE_FORMATS")
@@ -105,6 +106,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_SKYBOX                      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SKYBOX")
 #define DALI_DEMO_STR_TITLE_SPARKLE                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SPARKLE")
 #define DALI_DEMO_STR_TITLE_STYLING                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_STYLING")
+#define DALI_DEMO_STR_TITLE_SUPER_BLUR_VIEW             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SUPER_BLUR_VIEW")
 #define DALI_DEMO_STR_TITLE_TEXTURED_MESH               dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXTURED_MESH")
 #define DALI_DEMO_STR_TITLE_TEXT_EDITOR                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_EDITOR")
 #define DALI_DEMO_STR_TITLE_TEXT_FIELD                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_FIELD")
@@ -139,6 +141,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_CARD_ACTIVE                 "Card Active"
 #define DALI_DEMO_STR_TITLE_CLIPPING                    "Clipping"
 #define DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER         "Clipping Draw Order"
+#define DALI_DEMO_STR_TITLE_GAUSSIAN_BLUR_VIEW          "Gaussian Blur"
 #define DALI_DEMO_STR_TITLE_GESTURES                    "Gestures"
 #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT              "Color Gradient"
 #define DALI_DEMO_STR_TITLE_COMPRESSED_TEXTURE_FORMATS  "Compressed Texture Formats"
@@ -198,6 +201,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_SKYBOX                      "Skybox"
 #define DALI_DEMO_STR_TITLE_SPARKLE                     "Sparkle"
 #define DALI_DEMO_STR_TITLE_STYLING                     "Styling"
+#define DALI_DEMO_STR_TITLE_SUPER_BLUR_VIEW             "Super Blur"
 #define DALI_DEMO_STR_TITLE_TEXTURED_MESH               "Mesh Texture"
 #define DALI_DEMO_STR_TITLE_TEXT_EDITOR                 "Text Editor"
 #define DALI_DEMO_STR_TITLE_TEXT_FIELD                  "Text Field"