From: Adeel Kazmi Date: Mon, 17 Jun 2019 14:11:42 +0000 (+0100) Subject: Added an example that shows the FitKeepAspectRatio Fitting Mode with padding X-Git-Tag: submit/tizen/20190708.073346^2^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=963367dee150e0f85668a884eb809ffa13932956;p=platform%2Fcore%2Fuifw%2Fdali-demo.git Added an example that shows the FitKeepAspectRatio Fitting Mode with padding Change-Id: I0d3440139c7ce6fd8a246ab509c63fa0dc6ca09f --- diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 85fcc28d..cfb0eced 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -296,6 +296,9 @@ + + + http://tizen.org/privilege/mediastorage diff --git a/examples/visual-fitting-mode/visual-fitting-mode-example.cpp b/examples/visual-fitting-mode/visual-fitting-mode-example.cpp new file mode 100644 index 00000000..7873d32e --- /dev/null +++ b/examples/visual-fitting-mode/visual-fitting-mode-example.cpp @@ -0,0 +1,228 @@ +/* + * 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 +#include +#include + +using namespace Dali; +using namespace Dali::Toolkit; + +namespace +{ +const char * const IMAGE_NAME = DEMO_IMAGE_DIR "gallery-medium-1.jpg"; ///< The image to use. +const Vector3 IMAGE_SIZE = Vector3( 300, 200, 0 ); ///< The size of the image-views. + +const float BORDER_SIZE = 2.0f; ///< The size of the border. +const Property::Value BORDER ///< The border to use for each image-view. +{ + { Visual::Property::TYPE, Visual::BORDER }, + { BorderVisual::Property::COLOR, Color::RED }, + { BorderVisual::Property::SIZE, BORDER_SIZE } +}; +const Extents LARGE_PADDING( 100.0f, 100.0f, 2.0f, 2.0f ); ///< The large padding extents. +const Extents BORDER_ONLY_PADDING( BORDER_SIZE, BORDER_SIZE, BORDER_SIZE, BORDER_SIZE ); ///< The border only padding extents. + +const std::string INSTRUCTIONS_TEXT = "\n(Tap or Key Press To Change)"; ///< Instructions on how to change the padding mode. +const std::string LARGE_PADDING_TEXT( "Padding: Left/Right Large" + INSTRUCTIONS_TEXT ); ///< Label to shown when large padding enabled. +const std::string BORDER_ONLY_PADDING_TEXT( "Padding: Border Only" + INSTRUCTIONS_TEXT ); ///< Label to shown when border-only padding enabled. +const std::string FILL_LABEL( "FILL" ); +const std::string FIT_KEEP_ASPECT_LABEL( "FIT\nKEEP ASPECT" ); + +const Property::Map TEXT_LABEL_PROPERTIES ///< All the properties of the Large Text Label shown in the example. +{ + { Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER }, + { Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER }, + { Actor::Property::WIDTH_RESIZE_POLICY, ResizePolicy::FILL_TO_PARENT }, + { Actor::Property::HEIGHT_RESIZE_POLICY, ResizePolicy::FILL_TO_PARENT }, + { Control::Property::BACKGROUND, + { + { Toolkit::Visual::Property::TYPE, Visual::GRADIENT }, + { GradientVisual::Property::STOP_COLOR, Property::Array{ Vector4( 167.0f, 207.0f, 223.0f, 255.0f ) / 255.0f, + Vector4( 0.0f, 64.0f, 137.0f, 255.0f ) / 255.0f } }, + { GradientVisual::Property::START_POSITION, Vector2( 0.0f, -0.5f ) }, + { GradientVisual::Property::END_POSITION, Vector2( 0.0f, 0.5f ) } + } + }, + { TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::CENTER }, + { TextLabel::Property::VERTICAL_ALIGNMENT, VerticalAlignment::CENTER }, + { TextLabel::Property::MULTI_LINE, true } +}; + +const Property::Map FILL_IMAGE_PROPERTIES ///< The basic properties of the Fill image view. +{ + { Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER }, + { Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_CENTER }, + { Actor::Property::SIZE, IMAGE_SIZE }, + { Control::Property::BACKGROUND, BORDER } +}; + +const Property::Map FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES ///< The basic properties of the Fit Keep Aspect image view. +{ + { Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER }, + { Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER }, + { Actor::Property::SIZE, IMAGE_SIZE }, + { Control::Property::BACKGROUND, BORDER } +}; + +const Property::Map OVERLAY_LABEL_PROPERTIES ///< The image view overlay label properties +{ + { TextLabel::Property::TEXT_COLOR, Color::WHITE }, + { TextLabel::Property::OUTLINE, { { "color", Color::BLACK }, { "width", 1.0f } } }, + { TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::CENTER }, + { TextLabel::Property::VERTICAL_ALIGNMENT, VerticalAlignment::CENTER }, + { TextLabel::Property::MULTI_LINE, true }, +}; +} // unnamed namespace + +/** + * @brief This example shows how to use the Dali::Toolkit::DevelVisual::Property::VISUAL_FITTING_MODE property. + */ +class VisualFittingModeController : public ConnectionTracker +{ +public: + + /** + * @brief Constructor. + * @param[in] application A reference to the Application class. + */ + VisualFittingModeController( Application& application ) + : mApplication( application ), + mLargePadding( true ) + { + // Connect to the Application's Init signal + mApplication.InitSignal().Connect( this, &VisualFittingModeController::Create ); + } + +private: + + /** + * @brief Called to initialise the application content + * @param[in] application A reference to the Application class. + */ + void Create( Application& application ) + { + // Get a handle to the stage + Stage stage = Stage::GetCurrent(); + stage.SetBackgroundColor( Color::WHITE ); + + // Text Label filling the entire screen, with a background + mTextLabel = DevelHandle::New< TextLabel >( TEXT_LABEL_PROPERTIES ); + stage.Add( mTextLabel ); + + // We want to change the padding when tapping + mTapDetector = TapGestureDetector::New(); + mTapDetector.Attach( mTextLabel ); + mTapDetector.DetectedSignal().Connect( this, &VisualFittingModeController::OnTap ); + + // Create an ImageView with the default behaviour, i.e. image fills to control size + mFillImage = ImageView::New( IMAGE_NAME ); + DevelHandle::SetProperties( mFillImage, FILL_IMAGE_PROPERTIES ); + stage.Add( mFillImage ); + + // Create an ImageView that Keeps the aspect ratio while fitting within the given size + mFitKeepAspectRatioImage = DevelHandle::New< ImageView >( FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES ); + mFitKeepAspectRatioImage.SetProperty( ImageView::Property::IMAGE, + Property::Map + { + { Visual::Property::TYPE, Visual::IMAGE }, + { ImageVisual::Property::URL, IMAGE_NAME }, + { DevelVisual::Property::VISUAL_FITTING_MODE, DevelVisual::FIT_KEEP_ASPECT_RATIO } + } ); + stage.Add( mFitKeepAspectRatioImage ); + + // Create an overlay label for fill image + Actor fillLabel = TextLabel::New( FILL_LABEL ); + DevelHandle::SetProperties( fillLabel, FILL_IMAGE_PROPERTIES ); + DevelHandle::SetProperties( fillLabel, OVERLAY_LABEL_PROPERTIES ); + stage.Add( fillLabel ); + + // Create an overlay label for the Fit/Keep Aspect image + Actor fitLabel = TextLabel::New( FIT_KEEP_ASPECT_LABEL ); + DevelHandle::SetProperties( fitLabel, FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES ); + DevelHandle::SetProperties( fitLabel, OVERLAY_LABEL_PROPERTIES ); + stage.Add( fitLabel ); + + // Respond to key events, exit if ESC/Back, change the padding if anything else + stage.KeyEventSignal().Connect( this, &VisualFittingModeController::OnKeyEvent ); + + // Set the initial padding + ChangePadding(); + } + + /** + * @brief Changes the padding of both image-views to show how the VisualFittingMode is applied. + */ + void ChangePadding() + { + mLargePadding = !mLargePadding; + + const Extents padding( mLargePadding ? LARGE_PADDING : BORDER_ONLY_PADDING ); + mFitKeepAspectRatioImage.SetProperty( Control::Property::PADDING, padding ); + mFillImage.SetProperty( Control::Property::PADDING, padding ); + + mTextLabel.SetProperty( TextLabel::Property::TEXT, mLargePadding ? LARGE_PADDING_TEXT : BORDER_ONLY_PADDING_TEXT ); + } + + /** + * @brief Called when the main text-label is tapped. + * + * We just want to change the padding when this happens. + */ + void OnTap( Actor /* actor */, const TapGesture& /* tap */ ) + { + ChangePadding(); + } + + /** + * @brief Called when any key event is received + * + * Will use this to quit the application if we receive the Back or the Escape key & change + * the padding if any other key. + * @param[in] event The key event information + */ + 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(); + } + else + { + ChangePadding(); + } + } + } + +private: + Application& mApplication; ///< Reference to the application class. + Actor mFillImage; ///< An image-view that fills to the control size. + Actor mFitKeepAspectRatioImage; ///< An image-view that fits within the given size & keeps the aspect ratio. + Actor mTextLabel; ///< A text label to show the current padding mode. + TapGestureDetector mTapDetector; ///< A tap detector to change the padding mode. + bool mLargePadding; ///< If true, the large padding values are used. When false, only the border padding is applied. +}; + +int DALI_EXPORT_API main( int argc, char **argv ) +{ + Application application = Application::New( &argc, &argv ); + VisualFittingModeController visualFittingModeController( application ); + application.MainLoop(); + return 0; +} diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po index cf46d29b..90acd858 100755 --- a/resources/po/en_GB.po +++ b/resources/po/en_GB.po @@ -217,6 +217,9 @@ msgstr "Tooltip" msgid "DALI_DEMO_STR_TITLE_FPP_GAME" msgstr "FPP Game" +msgid "DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE" +msgstr "Visual Fitting Mode" + msgid "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS" msgstr "Visual Transitions" diff --git a/resources/po/en_US.po b/resources/po/en_US.po index b40c6737..94777fdc 100755 --- a/resources/po/en_US.po +++ b/resources/po/en_US.po @@ -220,6 +220,9 @@ msgstr "Tooltip" msgid "DALI_DEMO_STR_TITLE_FPP_GAME" msgstr "FPP Game" +msgid "DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE" +msgstr "Visual Fitting Mode" + msgid "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS" msgstr "Visual Transitions" diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h index 9dac375d..fa721586 100644 --- a/shared/dali-demo-strings.h +++ b/shared/dali-demo-strings.h @@ -116,6 +116,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_SCROLLING") #define DALI_DEMO_STR_TITLE_TILT_SENSOR dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TILT_SENSOR") #define DALI_DEMO_STR_TITLE_TOOLTIP dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TOOLTIP") +#define DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE") #define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS") #define DALI_DEMO_STR_TITLE_WEB_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_WEB_VIEW") #define DALI_DEMO_STR_TITLE_TEXT_RENDERER dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_RENDERER") @@ -208,6 +209,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING "Text Scrolling" #define DALI_DEMO_STR_TITLE_TILT_SENSOR "Tilt Sensor" #define DALI_DEMO_STR_TITLE_TOOLTIP "Tooltip" +#define DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE "Visual Fitting Mode" #define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS "Visual Transitions" #define DALI_DEMO_STR_TITLE_WEB_VIEW "Web View" #define DALI_DEMO_STR_TITLE_TEXT_RENDERER "Text Renderer" diff --git a/tests-reel/dali-tests-reel.cpp b/tests-reel/dali-tests-reel.cpp index b7f37a5f..8300496c 100644 --- a/tests-reel/dali-tests-reel.cpp +++ b/tests-reel/dali-tests-reel.cpp @@ -47,6 +47,7 @@ int DALI_EXPORT_API main(int argc, char **argv) demo.AddExample(Example("text-fonts.example", DALI_DEMO_STR_TITLE_TEXT_FONTS)); demo.AddExample(Example("text-memory-profiling.example", DALI_DEMO_STR_TITLE_TEXT_MEMORY_PROFILING)); demo.AddExample(Example("text-overlap.example", DALI_DEMO_STR_TITLE_TEXT_OVERLAP)); + demo.AddExample(Example("visual-fitting-mode.example", DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE)); demo.AddExample(Example("visual-transitions.example", DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS)); demo.AddExample(Example("simple-text-label.example", DALI_DEMO_STR_TITLE_TEXT_LABEL)); demo.AddExample(Example("simple-text-field.example", DALI_DEMO_STR_TITLE_TEXT_FIELD));