Add circular ProgressBar style 01/235301/7
authorJiyun Yang <ji.yang@samsung.com>
Tue, 9 Jun 2020 07:55:30 +0000 (16:55 +0900)
committerJiyun Yang <ji.yang@samsung.com>
Tue, 16 Jun 2020 05:29:22 +0000 (14:29 +0900)
* The style implements UX requirements for wearable, but it can be used in other devices too.
* The style uses arc visuals for track, secondary progress, progress and indeterminate visual.
* The progress value will change sweepAngle of the track visual.
* The indeterminate animation in the style uses visuals (e.g. track, progress) including indeterminate visual.
* Add ProgressBar::NEW(Style) to easy use of style.

Change-Id: I74c227ad2716bc829180f002abe22a28ffdef959
Signed-off-by: Jiyun Yang <ji.yang@samsung.com>
12 files changed:
automated-tests/src/dali-toolkit/utc-Dali-ProgressBar.cpp
dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.cpp [new file with mode: 0644]
dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.h [new file with mode: 0644]
dali-toolkit/devel-api/file.list
dali-toolkit/internal/controls/progress-bar/progress-bar-impl.cpp
dali-toolkit/internal/controls/progress-bar/progress-bar-impl.h
dali-toolkit/public-api/controls/progress-bar/progress-bar.h
dali-toolkit/styles/1920x1080/dali-toolkit-default-theme.json
dali-toolkit/styles/2048x1080/dali-toolkit-default-theme.json
dali-toolkit/styles/360x360/dali-toolkit-default-theme.json
dali-toolkit/styles/480x800/dali-toolkit-default-theme.json
dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json

index 916fb13..d6f125d 100644 (file)
@@ -17,6 +17,9 @@
 
 #include <dali-toolkit-test-suite-utils.h>
 #include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.h>
+#include <dali-toolkit/devel-api/visuals/arc-visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include <dali/devel-api/actors/actor-devel.h>
 
 using namespace Dali;
@@ -85,6 +88,22 @@ int UtcDaliProgressBarNew(void)
   END_TEST;
 }
 
+int UtcDaliProgressBarNew2(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline(" UtcDaliProgressBarNew2");
+
+  ProgressBar progressBar1 = DevelProgressBar::New( DevelProgressBar::Style::LINEAR );
+  DALI_TEST_CHECK( progressBar1 );
+
+  ProgressBar progressBar2 = DevelProgressBar::New( DevelProgressBar::Style::CIRCULAR );
+  DALI_TEST_CHECK( progressBar2 );
+
+  DALI_TEST_CHECK( progressBar1.GetStyleName() != progressBar2.GetStyleName() );
+
+  END_TEST;
+}
+
 int UtcDaliProgressBarDestructor(void)
 {
   ToolkitTestApplication application;
@@ -410,3 +429,104 @@ int UtcDaliProgressBarSetPropertyP2(void)
 
   END_TEST;
 }
+
+int UtcDaliProgressBarSetPropertyP3(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliProgressBarSetPropertyP3" );
+
+  ProgressBar progressBar = ProgressBar::New();
+  progressBar.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+  progressBar.SetProperty( Actor::Property::ANCHOR_POINT, ParentOrigin::TOP_LEFT);
+  progressBar.SetProperty( Actor::Property::SIZE, Vector2( Stage::GetCurrent().GetSize().x, Stage::GetCurrent().GetSize().y ) );
+  Stage::GetCurrent().Add( progressBar );
+  application.SendNotification();
+  application.Render();
+
+  {
+    // Set arc visual to the SECONDARY_PROGRESS_VISUAL
+    const float expected = 180.0f;
+
+    Property::Map map;
+    map["visualType"] = "ARC";
+    map["thickness"] = 4.0f;
+    map["mixColor"] = Color::BLUE;
+    map["sweepAngle"] = 60;
+    progressBar.SetProperty(ProgressBar::Property::SECONDARY_PROGRESS_VISUAL, map);
+    progressBar.SetProperty(ProgressBar::Property::SECONDARY_PROGRESS_VALUE, 0.5f); // This should change visual's sweep angle.
+
+    Property::Value value = progressBar.GetProperty( ProgressBar::Property::SECONDARY_PROGRESS_VISUAL );
+    Property::Map* resultMap = value.GetMap();
+    DALI_TEST_CHECK( resultMap );
+
+    Property::Value* sweepAngle = resultMap->Find( DevelArcVisual::Property::SWEEP_ANGLE );
+    float result = 0.0f;
+    sweepAngle->Get( result );
+    DALI_TEST_EQUALS( result, expected, TEST_LOCATION );
+  }
+
+  {
+    // Set arc visual to the PROGRESS_VISUAL
+    const float expected = 90.0f;
+
+    Property::Map map;
+    map["visualType"] = "ARC";
+    map["thickness"] = 4.0f;
+    map["mixColor"] = Color::RED;
+    map["sweepAngle"] = 60;
+    progressBar.SetProperty(ProgressBar::Property::PROGRESS_VISUAL, map);
+    progressBar.SetProperty(ProgressBar::Property::PROGRESS_VALUE, 0.25f); // This should change visual's sweep angle.
+
+    Property::Value value = progressBar.GetProperty( ProgressBar::Property::PROGRESS_VISUAL );
+    Property::Map* resultMap = value.GetMap();
+    DALI_TEST_CHECK( resultMap );
+
+    Property::Value* sweepAngle = resultMap->Find( DevelArcVisual::Property::SWEEP_ANGLE );
+    float result = 0.0f;
+    sweepAngle->Get( result );
+    DALI_TEST_EQUALS( result, expected, TEST_LOCATION );
+  }
+
+  {
+    // Set arc visual to the INDETERMINATE_VISUAL
+    const Vector4 expected = Color::GREEN;
+
+    Property::Map map;
+    map["visualType"] = "ARC";
+    map["thickness"] = 4.0f;
+    map["mixColor"] = expected;
+    progressBar.SetProperty(ProgressBar::Property::INDETERMINATE_VISUAL, map);
+
+    Property::Value value = progressBar.GetProperty( ProgressBar::Property::INDETERMINATE_VISUAL );
+    Property::Map* resultMap = value.GetMap();
+    DALI_TEST_CHECK( resultMap );
+
+    Property::Value* mixColor = resultMap->Find( Visual::Property::MIX_COLOR );
+    Vector4 result;
+    mixColor->Get( result );
+    DALI_TEST_EQUALS( result, expected, TEST_LOCATION );
+  }
+
+  {
+    // Set arc visual to the TRACK_VISUAL
+    const Vector4 expected = Color::YELLOW;
+
+    Property::Map map;
+    map["visualType"] = "ARC";
+    map["thickness"] = 0.4f;
+    map["mixColor"] = expected;
+    progressBar.SetProperty( ProgressBar::Property::TRACK_VISUAL, map );
+    progressBar.SetProperty( ProgressBar::Property::INDETERMINATE, true ); // This should not change track visual's properties.
+
+    Property::Value value = progressBar.GetProperty( ProgressBar::Property::TRACK_VISUAL );
+    Property::Map* resultMap = value.GetMap();
+    DALI_TEST_CHECK( resultMap );
+
+    Property::Value* mixColor = resultMap->Find( Visual::Property::MIX_COLOR );
+    Vector4 result;
+    mixColor->Get( result );
+    DALI_TEST_EQUALS( result, expected, TEST_LOCATION );
+  }
+
+  END_TEST;
+}
diff --git a/dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.cpp b/dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.cpp
new file mode 100644 (file)
index 0000000..f3951aa
--- /dev/null
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2020 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.
+ *
+ */
+
+// INTERNAL INCLUDES
+#include <dali-toolkit/internal/controls/progress-bar/progress-bar-impl.h>
+
+namespace Dali
+{
+
+namespace Toolkit
+{
+
+namespace DevelProgressBar
+{
+
+Toolkit::ProgressBar New( Style progressBarStyle )
+{
+  return Internal::ProgressBar::New( progressBarStyle );
+}
+
+} // namespace DevelProgressBar
+
+} // namespace Toolkit
+
+} // namespace Dali
diff --git a/dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.h b/dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.h
new file mode 100644 (file)
index 0000000..b9a04d4
--- /dev/null
@@ -0,0 +1,62 @@
+#ifndef DALI_TOOLKIT_PROGRESS_BAR_DEVEL_H
+#define DALI_TOOLKIT_PROGRESS_BAR_DEVEL_H
+
+/*
+ * Copyright (c) 2020 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.
+ *
+ */
+
+// INTERNAL INCLUDES
+#include <dali-toolkit/public-api/controls/progress-bar/progress-bar.h>
+
+namespace Dali
+{
+
+namespace Toolkit
+{
+
+namespace DevelProgressBar
+{
+
+/**
+ * @brief Enumeration for the style of progress bar.
+ */
+enum class Style
+{
+  /**
+   * @brief Indicates a linear shape of progress bar.
+   */
+  LINEAR,
+
+  /**
+   * @brief Indicates a circular shape of progress bar.
+   */
+  CIRCULAR,
+};
+
+/**
+ * @brief Creates a new ProgressBar with predefined style.
+ * @param[in] progressBarStyle A style value that determines the visual properties for ProgressBar.
+ * @return A handle to the ProgressBar control.
+ */
+DALI_TOOLKIT_API Toolkit::ProgressBar New( Style progressBarStyle );
+
+} // namespace DevelProgressBar
+
+} // namespace Toolkit
+
+} // namespace Dali
+
+#endif // DALI_TOOLKIT_PROGRESS_BAR_DEVEL_H
index 219fb28..48e3579 100755 (executable)
@@ -22,6 +22,7 @@ SET( devel_api_src_files
   ${devel_api_src_dir}/controls/page-turn-view/page-turn-view.cpp
   ${devel_api_src_dir}/controls/popup/confirmation-popup.cpp
   ${devel_api_src_dir}/controls/popup/popup.cpp
+  ${devel_api_src_dir}/controls/progress-bar/progress-bar-devel.cpp
   ${devel_api_src_dir}/controls/scene3d-view/scene3d-view.cpp
   ${devel_api_src_dir}/controls/shadow-view/shadow-view.cpp
   ${devel_api_src_dir}/controls/super-blur-view/super-blur-view.cpp
@@ -115,6 +116,10 @@ SET( devel_api_popup_header_files
   ${devel_api_src_dir}/controls/popup/popup.h
 )
 
+SET( devel_api_progress_bar_header_files
+  ${devel_api_src_dir}/controls/progress-bar/progress-bar-devel.h
+)
+
 SET( devel_api_visual_factory_header_files
   ${devel_api_src_dir}/visual-factory/transition-data.h
   ${devel_api_src_dir}/visual-factory/visual-factory.h
@@ -234,6 +239,7 @@ SET( DEVEL_API_HEADERS ${DEVEL_API_HEADERS}
   ${devel_api_navigation_view_header_files}
   ${devel_api_page_turn_view_header_files}
   ${devel_api_popup_header_files}
+  ${devel_api_progress_bar_header_files}
   ${devel_api_visual_factory_header_files}
   ${devel_api_visuals_header_files}
   ${devel_api_scene3d_view_header_files}
index 2b89fed..4390792 100755 (executable)
@@ -28,6 +28,9 @@
 #include <dali-toolkit/public-api/align-enumerations.h>
 #include <dali-toolkit/devel-api/controls/control-devel.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-base.h>
+#include <dali-toolkit/internal/visuals/visual-base-impl.h>
+#include <dali-toolkit/internal/visuals/visual-string-constants.h>
+#include <dali-toolkit/devel-api/visuals/arc-visual-properties-devel.h>
 #include <dali-toolkit/public-api/visuals/color-visual-properties.h>
 #include <dali-toolkit/public-api/visuals/image-visual-properties.h>
 #include <dali-toolkit/public-api/visuals/text-visual-properties.h>
@@ -86,6 +89,35 @@ float DEFAULT_VALUE = 0.0f;
 float DEFAULT_LOWER_BOUND = 0.0f;
 float DEFAULT_UPPER_BOUND = 1.0f;
 float DEFAULT_FONT_SIZE = 12.0f;
+const char* CIRCULAR_PROGRESS_BAR_STYLE_NAME = "CircularProgressBar";
+
+
+void BackupVisualProperties( const Control* control, Property::Index index, Property::Map& map )
+{
+  Toolkit::Visual::Base visual = DevelControl::GetVisual( *control, index );
+
+  if( visual )
+  {
+    map.Clear();
+    visual.CreatePropertyMap( map );
+  }
+}
+
+void RestoreVisualProperties( Control* control, Property::Index index, Property::Map& map, int depth )
+{
+  if( !map.Empty() )
+  {
+    Toolkit::Visual::Base visual = DevelControl::GetVisual( *control, index );
+
+    Visual::Base& visualImpl = Toolkit::GetImplementation( visual );
+
+    visualImpl.SetProperties( map );
+
+    DevelControl::UnregisterVisual( *control, index );
+
+    DevelControl::RegisterVisual( *control, index, visual, true, depth );
+  }
+}
 
 } // Unnamed namespace
 
@@ -93,14 +125,26 @@ float DEFAULT_FONT_SIZE = 12.0f;
 // ProgressBar
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 
-Dali::Toolkit::ProgressBar ProgressBar::New()
+Dali::Toolkit::ProgressBar ProgressBar::New( DevelProgressBar::Style progressBarStyle )
 {
   // Create the implementation
   ProgressBarPtr progressBar( new ProgressBar() );
 
-  // Pass ownership to CustomActor via derived handle
   Dali::Toolkit::ProgressBar handle( *progressBar );
 
+  switch( progressBarStyle )
+  {
+    case DevelProgressBar::Style::CIRCULAR:
+    {
+      progressBar->SetStyleName( CIRCULAR_PROGRESS_BAR_STYLE_NAME );
+      break;
+    }
+    default:
+    {
+      break;
+    }
+  }
+
   // Second-phase init of the implementation
   // This can only be done after the CustomActor connection has been made...
   progressBar->Initialize();
@@ -133,8 +177,6 @@ void ProgressBar::OnRelayout( const Vector2& size, RelayoutContainer& container
   trackSize.width = std::max( 0.0f, size.width ); // Ensure we don't go negative
 
   Toolkit::Visual::Base trackVisual = DevelControl::GetVisual( *this, Toolkit::ProgressBar::Property::TRACK_VISUAL );
-  Toolkit::Visual::Base secondProgressVisual = DevelControl::GetVisual( *this, Toolkit::ProgressBar::Property::SECONDARY_PROGRESS_VISUAL );
-  Toolkit::Visual::Base progressVisual = DevelControl::GetVisual( *this, Toolkit::ProgressBar::Property::PROGRESS_VISUAL );
   Toolkit::Visual::Base labelVisual = DevelControl::GetVisual( *this, Toolkit::ProgressBar::Property::LABEL_VISUAL );
   Toolkit::Visual::Base indeterminateVisual = DevelControl::GetVisual( *this, Toolkit::ProgressBar::Property::INDETERMINATE_VISUAL );
 
@@ -149,29 +191,9 @@ void ProgressBar::OnRelayout( const Vector2& size, RelayoutContainer& container
     trackVisual.SetTransformAndSize( visualTransform, trackSize );
   }
 
-  if( secondProgressVisual )
-  {
-    Property::Map visualTransform;
-
-    visualTransform.Add( Toolkit::Visual::Transform::Property::SIZE, Vector2( mDomain.from.x + mSecondaryProgressValue * ( mDomain.to.x - mDomain.from.x ), trackSize.height  ) )
-                   .Add( Toolkit::Visual::Transform::Property::OFFSET_POLICY, Vector2( Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE ) )
-                   .Add( Toolkit::Visual::Transform::Property::SIZE_POLICY, Vector2( Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE ) )
-                   .Add( Toolkit::Visual::Transform::Property::ORIGIN, Toolkit::Align::TOP_BEGIN )
-                   .Add( Toolkit::Visual::Transform::Property::ANCHOR_POINT, Toolkit::Align::TOP_BEGIN );
-    secondProgressVisual.SetTransformAndSize( visualTransform, trackSize );
-  }
-
-  if( progressVisual )
-  {
-    Property::Map visualTransform;
+  ApplyProgressToVisualTransform( mSecondaryProgressValue, trackSize, Toolkit::ProgressBar::Property::SECONDARY_PROGRESS_VISUAL );
 
-    visualTransform.Add( Toolkit::Visual::Transform::Property::SIZE, Vector2( mDomain.from.x + mProgressValue * ( mDomain.to.x - mDomain.from.x ), trackSize.height ) )
-                   .Add( Toolkit::Visual::Transform::Property::OFFSET_POLICY, Vector2( Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE ) )
-                   .Add( Toolkit::Visual::Transform::Property::SIZE_POLICY, Vector2( Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE ) )
-                   .Add( Toolkit::Visual::Transform::Property::ORIGIN, Toolkit::Align::TOP_BEGIN )
-                   .Add( Toolkit::Visual::Transform::Property::ANCHOR_POINT, Toolkit::Align::TOP_BEGIN );
-    progressVisual.SetTransformAndSize( visualTransform, trackSize );
-  }
+  ApplyProgressToVisualTransform( mProgressValue, trackSize, Toolkit::ProgressBar::Property::PROGRESS_VISUAL );
 
   if( labelVisual )
   {
@@ -240,6 +262,8 @@ void ProgressBar::SetProgressValue( float value )
   {
     mProgressValue = Clamp( value, DEFAULT_LOWER_BOUND, DEFAULT_UPPER_BOUND );
 
+    ApplyProgressToVisual( mProgressValue, Toolkit::ProgressBar::Property::PROGRESS_VISUAL, ProgressDepthIndex::PROGRESS_VISUAL );
+
     Toolkit::ProgressBar self = Toolkit::ProgressBar::DownCast( Self() );
     mValueChangedSignal.Emit( self, mProgressValue, mSecondaryProgressValue );
     RelayoutRequest();
@@ -261,6 +285,8 @@ void ProgressBar::SetSecondaryProgressValue( float value )
   {
     mSecondaryProgressValue = Clamp( value, DEFAULT_LOWER_BOUND, DEFAULT_UPPER_BOUND );
 
+    ApplyProgressToVisual( mSecondaryProgressValue, Toolkit::ProgressBar::Property::SECONDARY_PROGRESS_VISUAL, ProgressDepthIndex::SECONDARY_PROGRESS_VISUAL );
+
     Toolkit::ProgressBar self = Toolkit::ProgressBar::DownCast( Self() );
     mValueChangedSignal.Emit( self, mProgressValue, mSecondaryProgressValue );
 
@@ -292,6 +318,13 @@ void ProgressBar::SetIndeterminate( bool value )
     {
       mIndeterminateVisualAni.Stop();
     }
+
+    // Restore previous visual data after animation finished.
+    RestoreVisualProperties( this, Toolkit::ProgressBar::Property::TRACK_VISUAL, mTrackVisualMap, ProgressDepthIndex::TRACK_VISUAL );
+    RestoreVisualProperties( this, Toolkit::ProgressBar::Property::SECONDARY_PROGRESS_VISUAL, mSecondaryProgressVisualMap, ProgressDepthIndex::SECONDARY_PROGRESS_VISUAL );
+    RestoreVisualProperties( this, Toolkit::ProgressBar::Property::PROGRESS_VISUAL, mProgressVisualMap, ProgressDepthIndex::PROGRESS_VISUAL );
+
+    RelayoutRequest();
   }
 }
 
@@ -311,6 +344,11 @@ void ProgressBar::SetIndeterminateVisualTransition( Toolkit::TransitionData tran
 
 void ProgressBar::PlayIndeterminateVisualTransition()
 {
+  // Store current visual data before animation changes it.
+  BackupVisualProperties( this, Toolkit::ProgressBar::Property::TRACK_VISUAL, mTrackVisualMap );
+  BackupVisualProperties( this, Toolkit::ProgressBar::Property::SECONDARY_PROGRESS_VISUAL, mSecondaryProgressVisualMap );
+  BackupVisualProperties( this, Toolkit::ProgressBar::Property::PROGRESS_VISUAL, mProgressVisualMap );
+
   if( mIndeterminateVisualAni )
   {
     mIndeterminateVisualAni.Stop();
@@ -404,6 +442,47 @@ bool ProgressBar::GetPropertyMapForVisual( Property::Index visualIndex, Property
   return success;
 }
 
+
+void ProgressBar::ApplyProgressToVisual( float progress, Property::Index index, int depth )
+{
+  Toolkit::Visual::Base visual = DevelControl::GetVisual( *this, index );
+
+  if( visual && static_cast<DevelVisual::Type>( visual.GetType() ) == DevelVisual::ARC && !mIndeterminate )
+  {
+    Visual::Base& visualImpl = Toolkit::GetImplementation( visual );
+
+    Property::Map map;
+
+    map[ Toolkit::DevelArcVisual::Property::SWEEP_ANGLE ] = Property::Value( 360.0f * progress );
+
+    visualImpl.SetProperties( map );
+
+    DevelControl::UnregisterVisual( *this, index );
+    DevelControl::RegisterVisual( *this, index, visual, true, depth );
+  }
+}
+
+void ProgressBar::ApplyProgressToVisualTransform( float progress, Vector2 trackSize, Property::Index index )
+{
+  Toolkit::Visual::Base visual = DevelControl::GetVisual( *this, index );
+
+  if( visual )
+  {
+    Property::Map visualTransform;
+
+    if( static_cast<DevelVisual::Type>( visual.GetType() ) != DevelVisual::ARC )
+    {
+      visualTransform.Add( Toolkit::Visual::Transform::Property::SIZE, Vector2( mDomain.from.x + progress * ( mDomain.to.x - mDomain.from.x ), trackSize.height ) )
+                     .Add( Toolkit::Visual::Transform::Property::OFFSET_POLICY, Vector2( Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE ) )
+                     .Add( Toolkit::Visual::Transform::Property::SIZE_POLICY, Vector2( Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE ) )
+                     .Add( Toolkit::Visual::Transform::Property::ORIGIN, Toolkit::Align::TOP_BEGIN )
+                     .Add( Toolkit::Visual::Transform::Property::ANCHOR_POINT, Toolkit::Align::TOP_BEGIN );
+    }
+
+    visual.SetTransformAndSize( visualTransform, trackSize );
+  }
+}
+
 // Static class method to support script connecting signals
 bool ProgressBar::DoConnectSignal( BaseObject* object, ConnectionTrackerInterface* tracker, const std::string& signalName, FunctorDelegate* functor )
 {
@@ -444,12 +523,14 @@ void ProgressBar::SetProperty( BaseObject* object, Property::Index propertyIndex
       case Toolkit::ProgressBar::Property::SECONDARY_PROGRESS_VISUAL:
       {
         progressBarImpl.CreateVisualsForComponent( propertyIndex, value, ProgressDepthIndex::SECONDARY_PROGRESS_VISUAL );
+        progressBarImpl.ApplyProgressToVisual( progressBarImpl.mSecondaryProgressValue, propertyIndex, ProgressDepthIndex::SECONDARY_PROGRESS_VISUAL );
         break;
       }
 
       case Toolkit::ProgressBar::Property::PROGRESS_VISUAL:
       {
         progressBarImpl.CreateVisualsForComponent( propertyIndex, value, ProgressDepthIndex::PROGRESS_VISUAL );
+        progressBarImpl.ApplyProgressToVisual( progressBarImpl.mProgressValue, propertyIndex, ProgressDepthIndex::PROGRESS_VISUAL );
         break;
       }
 
index 5b0ffd2..31ae483 100755 (executable)
  *
  */
 
-
 // INTERNAL INCLUDES
 #include <dali-toolkit/public-api/controls/control-impl.h>
 #include <dali/public-api/animation/animation.h>
 #include <dali-toolkit/public-api/controls/progress-bar/progress-bar.h>
+#include <dali-toolkit/devel-api/controls/progress-bar/progress-bar-devel.h>
 #include <dali-toolkit/devel-api/visual-factory/transition-data.h>
 
 namespace Dali
@@ -46,11 +46,11 @@ class ProgressBar : public Control
 public:
 
   /**
-   * Create a new ProgressBar.
-   *
+   * Create a new ProgressBar with predefined style.
+   * @param[in] progressBarStyle A style value that determines the shape of the progress bar.
    * @return A public handle to the newly allocated ProgressBar.
    */
-  static Dali::Toolkit::ProgressBar New();
+  static Dali::Toolkit::ProgressBar New( DevelProgressBar::Style progressBarStyle = DevelProgressBar::Style::LINEAR );
 
 public:
 
@@ -233,6 +233,16 @@ private:
   bool GetPropertyMapForVisual( Property::Index visualIndex, Property::Map& retreivedMap ) const;
 
   /**
+   * Apply progress value to visual
+   */
+  void ApplyProgressToVisual( float progress, Property::Index index, int depth );
+
+  /**
+   * Apply progress value to visual transform
+   */
+  void ApplyProgressToVisualTransform( float progress, Vector2 trackSize, Property::Index index );
+
+  /**
    * Check if we should start animating
    */
   virtual void OnStageConnection( int depth );
@@ -256,6 +266,9 @@ private:
   float mProgressValue;                                               ///< Current value of ProgressBar
   float mSecondaryProgressValue;                                      ///< Current loading value of ProgressBar
   bool mIndeterminate;                                                ///< Whether the progress state is determined or not
+  Property::Map mTrackVisualMap;                                      ///< To backup visual properties when switching determinate/indeterminate.
+  Property::Map mProgressVisualMap;                                   ///< To backup visual properties when switching determinate/indeterminate.
+  Property::Map mSecondaryProgressVisualMap;                          ///< To backup visual properties when switching determinate/indeterminate.
 };
 
 } // namespace Internal
index a7b87c2..407e026 100644 (file)
@@ -158,7 +158,7 @@ public:
 public:
 
   /**
-   * @brief Creates the ProgressBar control.
+   * @brief Creates the ProgressBar control. It creates a horizontal linear shape of progress bar.
    * @SINCE_1_2.60
    * @return A handle to the ProgressBar control
    */
index 43bd4e5..35dec78 100755 (executable)
       "secondaryProgressValue":0.0,
       "indeterminate": false
     },
+    "CircularProgressBar":
+    {
+      "size":[64,64],
+      "trackVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.165,0.302,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "progressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "secondaryProgressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,0.3],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.02,0.71,0.525,1.0],
+        "thickness":4.0,
+        "startAngle":267.0,
+        "sweepAngle":75.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisualAnimation":
+      [
+        {
+          "target":"trackVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"secondaryProgressVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"startAngle",
+          "initialValue": 87,
+          "targetValue": 1887,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"startAngle",
+          "initialValue": 267,
+          "targetValue": 2067,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        }
+      ],
+      "labelVisual":{
+        "visualType": "TEXT",
+        "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
+        "pointSize" : 12.0, // Point size must always be provided to Text Visual
+        "horizontalAlignment": "CENTER",
+        "verticalAlignment": "CENTER"
+      },
+      "progressValue": 0.2,
+      "secondaryProgressValue":0.4,
+      "indeterminate": false
+    },
     "Button":
     {
       "styles":["Tooltip"],
index 2028c16..d055427 100755 (executable)
       "secondaryProgressValue":0.0,
       "indeterminate": false
     },
+    "CircularProgressBar":
+    {
+      "size":[64,64],
+      "trackVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.165,0.302,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "progressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "secondaryProgressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,0.3],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.02,0.71,0.525,1.0],
+        "thickness":4.0,
+        "startAngle":267.0,
+        "sweepAngle":75.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisualAnimation":
+      [
+        {
+          "target":"trackVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"secondaryProgressVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"startAngle",
+          "initialValue": 87,
+          "targetValue": 1887,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"startAngle",
+          "initialValue": 267,
+          "targetValue": 2067,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        }
+      ],
+      "labelVisual":{
+        "visualType": "TEXT",
+        "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
+        "pointSize" : 12.0, // Point size must always be provided to Text Visual
+        "horizontalAlignment": "CENTER",
+        "verticalAlignment": "CENTER"
+      },
+      "progressValue": 0.2,
+      "secondaryProgressValue":0.4,
+      "indeterminate": false
+    },
     "Button":
     {
       "styles":["Tooltip"],
index 36db9a1..14fdc1e 100644 (file)
       "secondaryProgressValue":0.0,
       "indeterminate": false
     },
+    "CircularProgressBar":
+    {
+      "size":[64,64],
+      "trackVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.165,0.302,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "progressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "secondaryProgressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,0.3],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.02,0.71,0.525,1.0],
+        "thickness":4.0,
+        "startAngle":267.0,
+        "sweepAngle":75.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisualAnimation":
+      [
+        {
+          "target":"trackVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"secondaryProgressVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"startAngle",
+          "initialValue": 87,
+          "targetValue": 1887,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"startAngle",
+          "initialValue": 267,
+          "targetValue": 2067,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        }
+      ],
+      "labelVisual":{
+        "visualType": "TEXT",
+        "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
+        "pointSize" : 12.0, // Point size must always be provided to Text Visual
+        "horizontalAlignment": "CENTER",
+        "verticalAlignment": "CENTER"
+      },
+      "progressValue": 0.2,
+      "secondaryProgressValue":0.4,
+      "indeterminate": false
+    },
     "Button":
     {
       "initialAutoRepeatingDelay":2.0,
index f35f988..a5d23aa 100644 (file)
       "secondaryProgressValue":0.0,
       "indeterminate": false
     },
+    "CircularProgressBar":
+    {
+      "size":[64,64],
+      "trackVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.165,0.302,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "progressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "secondaryProgressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,0.3],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.02,0.71,0.525,1.0],
+        "thickness":4.0,
+        "startAngle":267.0,
+        "sweepAngle":75.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisualAnimation":
+      [
+        {
+          "target":"trackVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"secondaryProgressVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"startAngle",
+          "initialValue": 87,
+          "targetValue": 1887,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"startAngle",
+          "initialValue": 267,
+          "targetValue": 2067,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        }
+      ],
+      "labelVisual":{
+        "visualType": "TEXT",
+        "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
+        "pointSize" : 12.0, // Point size must always be provided to Text Visual
+        "horizontalAlignment": "CENTER",
+        "verticalAlignment": "CENTER"
+      },
+      "progressValue": 0.2,
+      "secondaryProgressValue":0.4,
+      "indeterminate": false
+    },
     "Button":
     {
       "styles":["Tooltip"],
index 1a9d7ab..3627ef4 100644 (file)
       "secondaryProgressValue":0.0,
       "indeterminate": false
     },
+    "CircularProgressBar":
+    {
+      "size":[64,64],
+      "trackVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.165,0.302,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "progressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,1.0],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "secondaryProgressVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.0,0.549,1.0,0.3],
+        "thickness":4.0,
+        "startAngle":0.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisual":{
+        "visualType":"ARC",
+        "mixColor":[0.02,0.71,0.525,1.0],
+        "thickness":4.0,
+        "startAngle":267.0,
+        "sweepAngle":75.0,
+        "cap":"ROUND"
+      },
+      "indeterminateVisualAnimation":
+      [
+        {
+          "target":"trackVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"secondaryProgressVisual",
+          "property":"opacity",
+          "targetValue": 0,
+          "animator":
+          {
+            "alphaFunction":"DEFAULT",
+            "timePeriod":
+            {
+              "duration":0,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"progressVisual",
+          "property":"startAngle",
+          "initialValue": 87,
+          "targetValue": 1887,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "initialValue": 75,
+          "targetValue": 180,
+          "animator":
+          {
+            "alphaFunction":[0.439, 0.0, 0.718, 0.428],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"sweepAngle",
+          "targetValue": 75,
+          "animator":
+          {
+            "alphaFunction":[0.224, 0.571, 0.53, 1.0],
+            "timePeriod":
+            {
+              "duration":1.0,
+              "delay":2.0
+            }
+          }
+        },
+        {
+          "target":"indeterminateVisual",
+          "property":"startAngle",
+          "initialValue": 267,
+          "targetValue": 2067,
+          "animator":
+          {
+            "alphaFunction":[0.33, 0.0, 0.3, 1.0],
+            "timePeriod":
+            {
+              "duration":3.0,
+              "delay":0.0
+            }
+          }
+        }
+      ],
+      "labelVisual":{
+        "visualType": "TEXT",
+        "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
+        "pointSize" : 12.0, // Point size must always be provided to Text Visual
+        "horizontalAlignment": "CENTER",
+        "verticalAlignment": "CENTER"
+      },
+      "progressValue": 0.2,
+      "secondaryProgressValue":0.4,
+      "indeterminate": false
+    },
     "Button":
     {
       "initialAutoRepeatingDelay":2.0,