examples/clipping/clipping-example.cpp

   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 // EXTERNAL INCLUDES
  19 #include <dali/dali.h>
  20 #include <dali-toolkit/dali-toolkit.h>
  21 #include <dali/devel-api/actors/actor-devel.h>
  22 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
  23 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
  24
  25 // INTERNAL INCLUDES
  26 #include "clipping-item-factory.h"
  27
  28 using namespace Dali;
  29 using namespace Dali::Toolkit;
  30
  31 namespace
  32 {
  33 const char * const APPLICATION_TITLE( "Clipping Controls" );
  34 const Vector3 APPLICATION_TITLE_PARENT_ORIGIN( 0.5f, 0.03f, 0.5f ); // Set the parent origin to a small percentage below the top (so the demo will scale for different resolutions).
  35 const Vector3 ITEM_VIEW_LAYOUT_SIZE_SCALE( 0.75f, 0.5f, 0.75f );
  36 const float ITEM_VIEW_BORDER_SIZE = 2.0f;
  37 const char * const BUTTON_LABEL( "Toggle Clipping Mode" );
  38 } // unnamed namespace
  39
  40 /**
  41  * @brief Demonstrates the control clipping of a UI Control.
  42  *
  43  * When an Actor is set to clip its children, the renderers have to be added manually in order to specify what its children
  44  * need to clip to. UI Controls automate the creation of the renderers/visuals when they are set to clip their children.
  45  *
  46  * This example displays an item-view whose clipping mode is toggled without the need for adding any renderers to it.
  47  */
  48 class ClippingExample : public ConnectionTracker
  49 {
  50 public:
  51
  52   /**
  53    * @brief Constructor.
  54    * @param[in] application A reference to the Application class.
  55    */
  56   ClippingExample( Application& application )
  57   : mApplication( application )
  58   {
  59     // Connect to the Application's Init signal
  60     mApplication.InitSignal().Connect( this, &ClippingExample::Create );
  61   }
  62
  63 private:
  64
  65   /**
  66    * @brief Called to initialise the application content.
  67    * @param[in] application A reference to the Application class.
  68    */
  69   void Create( Application& application )
  70   {
  71     // Hide the indicator bar
  72     application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
  73
  74     // Connect to the stage's key signal to allow Back and Escape to exit.
  75     Stage stage = Dali::Stage::GetCurrent();
  76     stage.KeyEventSignal().Connect( this, &ClippingExample::OnKeyEvent );
  77
  78     // Create a TextLabel for the application title.
  79     Toolkit::TextLabel label = Toolkit::TextLabel::New( APPLICATION_TITLE );
  80     label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
  81     label.SetParentOrigin( APPLICATION_TITLE_PARENT_ORIGIN );
  82     label.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
  83     label.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
  84     label.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
  85     stage.Add( label );
  86
  87     // Create an item-view which clips its children.
  88     mItemView = ItemView::New( mClippingItemFactory );
  89     mItemView.SetParentOrigin( ParentOrigin::CENTER );
  90     mItemView.SetAnchorPoint( AnchorPoint::CENTER );
  91     mItemView.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN ); // Enable clipping. No need to create any renderers.
  92     stage.Add( mItemView );
  93
  94     // Create a Spiral Layout and add it to the Item View.
  95     mItemView.AddLayout( * DefaultItemLayout::New( DefaultItemLayout::SPIRAL ) );
  96     stage.GetRootLayer().SetBehavior( Layer::LAYER_3D ); // The item-view spiral layout requires Layer 3D behaviour.
  97
  98     // Calculate the size we would like our item-view layout to be, and then activate the layout.
  99     const Vector2 stageSize = stage.GetSize();
 100     const Vector3 itemViewLayoutSize( ITEM_VIEW_LAYOUT_SIZE_SCALE.x * stageSize.x, ITEM_VIEW_LAYOUT_SIZE_SCALE.y * stageSize.y, ITEM_VIEW_LAYOUT_SIZE_SCALE.z * stageSize.x );
 101     mItemView.ActivateLayout( 0, itemViewLayoutSize, 0.0f );
 102
 103     // Create a border around item-view (as item-view is clipping its children, we should NOT add this as a child of item-view).
 104     Control border = Control::New();
 105     border.SetParentOrigin( ParentOrigin::CENTER );
 106     border.SetAnchorPoint( AnchorPoint::CENTER );
 107     border.SetProperty( Control::Property::BACKGROUND,
 108                         Property::Map().Add( Visual::Property::TYPE, Visual::BORDER )
 109                                        .Add( BorderVisual::Property::COLOR, Color::WHITE )
 110                                        .Add( BorderVisual::Property::SIZE, 2.0f ) );
 111     border.SetSize( Vector3( itemViewLayoutSize.x + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.y + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.z + ITEM_VIEW_BORDER_SIZE * 2.0f ) );
 112     stage.Add( border );
 113
 114     // Create a button to toggle the clipping mode
 115     PushButton button = Toolkit::PushButton::New();
 116     button.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 117     button.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 118     button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 119     button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
 120     button.SetProperty( Actor::Property::DRAW_MODE, DrawMode::OVERLAY_2D );
 121     button.SetProperty( Button::Property::LABEL,
 122                         Property::Map().Add( Toolkit::Visual::Property::TYPE, Toolkit::DevelVisual::TEXT )
 123                                        .Add( Toolkit::TextVisual::Property::TEXT, BUTTON_LABEL ) );
 124     button.ClickedSignal().Connect( this, &ClippingExample::OnButtonClicked );
 125     stage.Add( button );
 126   }
 127
 128   /**
 129    * @brief Called when any key event is received
 130    *
 131    * Will use this to quit the application if Back or the Escape key is received
 132    * @param[in] event The key event information
 133    */
 134   void OnKeyEvent( const KeyEvent& event )
 135   {
 136     if( event.state == KeyEvent::Down )
 137     {
 138       if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
 139       {
 140         mApplication.Quit();
 141       }
 142     }
 143   }
 144
 145   /**
 146    * @brief Called when the button is clicked.
 147    *
 148    * Will use this to toggle between the clipping modes.
 149    * @param[in] button The button that has been clicked.
 150    */
 151   bool OnButtonClicked( Toolkit::Button button )
 152   {
 153     if( mItemView )
 154     {
 155       ClippingMode::Type currentMode = static_cast< ClippingMode::Type >( mItemView.GetProperty( Actor::Property::CLIPPING_MODE ).Get< int >() );
 156       mItemView.SetProperty( Actor::Property::CLIPPING_MODE, ( currentMode == ClippingMode::CLIP_CHILDREN ) ? ClippingMode::DISABLED : ClippingMode::CLIP_CHILDREN );
 157     }
 158     return true;
 159   }
 160
 161   // Data
 162
 163   Application& mApplication; ///< Reference to the application class.
 164   ItemView mItemView; ///< The item view which whose children we would like to clip.
 165   ClippingItemFactory mClippingItemFactory; ///< The ItemFactory used to create our items.
 166 };
 167
 168 int DALI_EXPORT_API main( int argc, char **argv )
 169 {
 170   Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
 171   ClippingExample test(app);
 172   app.MainLoop();
 173   return 0;
 174 }