examples/visual-fitting-mode/visual-fitting-mode-example.cpp

   1 /*
   2  * Copyright (c) 2020 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/devel-api/object/handle-devel.h>
  19 #include <dali-toolkit/dali-toolkit.h>
  20 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
  21
  22 using namespace Dali;
  23 using namespace Dali::Toolkit;
  24
  25 namespace
  26 {
  27 const char * const IMAGE_NAME = DEMO_IMAGE_DIR "gallery-medium-1.jpg"; ///< The image to use.
  28 const Vector3 IMAGE_SIZE = Vector3( 300, 200, 0 ); ///< The size of the image-views.
  29
  30 const float BORDER_SIZE = 2.0f; ///< The size of the border.
  31 const Property::Value BORDER ///< The border to use for each image-view.
  32 {
  33   { Visual::Property::TYPE, Visual::BORDER },
  34   { BorderVisual::Property::COLOR, Color::RED },
  35   { BorderVisual::Property::SIZE, BORDER_SIZE }
  36 };
  37 const Extents LARGE_PADDING( 100.0f, 100.0f, 2.0f, 2.0f ); ///< The large padding extents.
  38 const Extents BORDER_ONLY_PADDING( BORDER_SIZE, BORDER_SIZE, BORDER_SIZE, BORDER_SIZE ); ///< The border only padding extents.
  39
  40 const std::string INSTRUCTIONS_TEXT = "\n(Tap or Key Press To Change)"; ///< Instructions on how to change the padding mode.
  41 const std::string LARGE_PADDING_TEXT( "Padding: Left/Right Large" + INSTRUCTIONS_TEXT ); ///< Label to shown when large padding enabled.
  42 const std::string BORDER_ONLY_PADDING_TEXT( "Padding: Border Only" + INSTRUCTIONS_TEXT ); ///< Label to shown when border-only padding enabled.
  43 const std::string FILL_LABEL( "FILL" );
  44 const std::string FIT_KEEP_ASPECT_LABEL( "FIT\nKEEP ASPECT" );
  45
  46 const Property::Map TEXT_LABEL_PROPERTIES ///< All the properties of the Large Text Label shown in the example.
  47 {
  48   { Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER },
  49   { Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER },
  50   { Actor::Property::WIDTH_RESIZE_POLICY, ResizePolicy::FILL_TO_PARENT },
  51   { Actor::Property::HEIGHT_RESIZE_POLICY, ResizePolicy::FILL_TO_PARENT },
  52   { Control::Property::BACKGROUND,
  53     {
  54       { Toolkit::Visual::Property::TYPE, Visual::GRADIENT },
  55       { GradientVisual::Property::STOP_COLOR,  Property::Array{ Vector4( 167.0f, 207.0f, 223.0f, 255.0f ) / 255.0f,
  56                                                                 Vector4(   0.0f,  64.0f, 137.0f, 255.0f ) / 255.0f } },
  57       { GradientVisual::Property::START_POSITION, Vector2( 0.0f, -0.5f ) },
  58       { GradientVisual::Property::END_POSITION,   Vector2( 0.0f,  0.5f ) }
  59     }
  60   },
  61   { TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::CENTER },
  62   { TextLabel::Property::VERTICAL_ALIGNMENT, VerticalAlignment::CENTER },
  63   { TextLabel::Property::MULTI_LINE, true }
  64 };
  65
  66 const Property::Map FILL_IMAGE_PROPERTIES ///< The basic properties of the Fill image view.
  67 {
  68   { Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER },
  69   { Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_CENTER },
  70   { Actor::Property::SIZE, IMAGE_SIZE },
  71   { Control::Property::BACKGROUND, BORDER }
  72 };
  73
  74 const Property::Map FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES ///< The basic properties of the Fit Keep Aspect image view.
  75 {
  76   { Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER },
  77   { Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER },
  78   { Actor::Property::SIZE, IMAGE_SIZE },
  79   { Control::Property::BACKGROUND, BORDER }
  80 };
  81
  82 const Property::Map OVERLAY_LABEL_PROPERTIES ///< The image view overlay label properties
  83 {
  84   { TextLabel::Property::TEXT_COLOR, Color::WHITE },
  85   { TextLabel::Property::OUTLINE, { { "color", Color::BLACK }, { "width", 1.0f } } },
  86   { TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::CENTER },
  87   { TextLabel::Property::VERTICAL_ALIGNMENT, VerticalAlignment::CENTER },
  88   { TextLabel::Property::MULTI_LINE, true },
  89 };
  90 } // unnamed namespace
  91
  92 /**
  93  * @brief This example shows how to use the Dali::Toolkit::DevelVisual::Property::VISUAL_FITTING_MODE property.
  94  */
  95 class VisualFittingModeController : public ConnectionTracker
  96 {
  97 public:
  98
  99   /**
 100    * @brief Constructor.
 101    * @param[in]  application A reference to the Application class.
 102    */
 103   VisualFittingModeController( Application& application )
 104   : mApplication( application ),
 105     mLargePadding( true )
 106   {
 107     // Connect to the Application's Init signal
 108     mApplication.InitSignal().Connect( this, &VisualFittingModeController::Create );
 109   }
 110
 111 private:
 112
 113   /**
 114    * @brief Called to initialise the application content
 115    * @param[in] application A reference to the Application class.
 116    */
 117   void Create( Application& application )
 118   {
 119     // Get a handle to the window
 120     Window window = application.GetWindow();
 121     window.SetBackgroundColor( Color::WHITE );
 122
 123     // Text Label filling the entire screen, with a background
 124     mTextLabel = Handle::New< TextLabel >( TEXT_LABEL_PROPERTIES );
 125     window.Add( mTextLabel );
 126
 127     // We want to change the padding when tapping
 128     mTapDetector = TapGestureDetector::New();
 129     mTapDetector.Attach( mTextLabel );
 130     mTapDetector.DetectedSignal().Connect( this, &VisualFittingModeController::OnTap );
 131
 132     // Create an ImageView with the default behaviour, i.e. image fills to control size
 133     mFillImage = ImageView::New( IMAGE_NAME );
 134     mFillImage.SetProperties( FILL_IMAGE_PROPERTIES );
 135     window.Add( mFillImage );
 136
 137     // Create an ImageView that Keeps the aspect ratio while fitting within the given size
 138     mFitKeepAspectRatioImage = Handle::New< ImageView >( FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES );
 139     mFitKeepAspectRatioImage.SetProperty( ImageView::Property::IMAGE,
 140                                           Property::Map
 141                                           {
 142                                             { Visual::Property::TYPE, Visual::IMAGE },
 143                                             { ImageVisual::Property::URL, IMAGE_NAME },
 144                                             { DevelVisual::Property::VISUAL_FITTING_MODE, DevelVisual::FIT_KEEP_ASPECT_RATIO }
 145                                           } );
 146     window.Add( mFitKeepAspectRatioImage );
 147
 148     // Create an overlay label for fill image
 149     Actor fillLabel = TextLabel::New( FILL_LABEL );
 150     fillLabel.SetProperties( FILL_IMAGE_PROPERTIES );
 151     fillLabel.SetProperties( OVERLAY_LABEL_PROPERTIES );
 152     window.Add( fillLabel );
 153
 154     // Create an overlay label for the Fit/Keep Aspect image
 155     Actor fitLabel = TextLabel::New( FIT_KEEP_ASPECT_LABEL );
 156     fitLabel.SetProperties( FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES );
 157     fitLabel.SetProperties( OVERLAY_LABEL_PROPERTIES );
 158     window.Add( fitLabel );
 159
 160     // Respond to key events, exit if ESC/Back, change the padding if anything else
 161     window.KeyEventSignal().Connect( this, &VisualFittingModeController::OnKeyEvent );
 162
 163     // Set the initial padding
 164     ChangePadding();
 165   }
 166
 167   /**
 168    * @brief Changes the padding of both image-views to show how the VisualFittingMode is applied.
 169    */
 170   void ChangePadding()
 171   {
 172     mLargePadding = !mLargePadding;
 173
 174     const Extents padding( mLargePadding ? LARGE_PADDING : BORDER_ONLY_PADDING );
 175     mFitKeepAspectRatioImage.SetProperty( Control::Property::PADDING, padding );
 176     mFillImage.SetProperty( Control::Property::PADDING, padding );
 177
 178     mTextLabel.SetProperty( TextLabel::Property::TEXT, mLargePadding ? LARGE_PADDING_TEXT : BORDER_ONLY_PADDING_TEXT );
 179   }
 180
 181   /**
 182    * @brief Called when the main text-label is tapped.
 183    *
 184    * We just want to change the padding when this happens.
 185    */
 186   void OnTap( Actor /* actor */, const TapGesture& /* tap */ )
 187   {
 188     ChangePadding();
 189   }
 190
 191   /**
 192    * @brief Called when any key event is received
 193    *
 194    * Will use this to quit the application if we receive the Back or the Escape key & change
 195    * the padding if any other key.
 196    * @param[in] event The key event information
 197    */
 198   void OnKeyEvent( const KeyEvent& event )
 199   {
 200     if( event.GetState() == KeyEvent::Down )
 201     {
 202       if ( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 203       {
 204         mApplication.Quit();
 205       }
 206       else
 207       {
 208         ChangePadding();
 209       }
 210     }
 211   }
 212
 213 private:
 214   Application&  mApplication; ///< Reference to the application class.
 215   Actor mFillImage; ///< An image-view that fills to the control size.
 216   Actor mFitKeepAspectRatioImage; ///< An image-view that fits within the given size & keeps the aspect ratio.
 217   Actor mTextLabel; ///< A text label to show the current padding mode.
 218   TapGestureDetector mTapDetector; ///< A tap detector to change the padding mode.
 219   bool mLargePadding; ///< If true, the large padding values are used. When false, only the border padding is applied.
 220 };
 221
 222 int DALI_EXPORT_API main( int argc, char **argv )
 223 {
 224   Application application = Application::New( &argc, &argv );
 225   VisualFittingModeController visualFittingModeController( application );
 226   application.MainLoop();
 227   return 0;
 228 }