Peter M. Groen / dali-demo

Commit 963367dee150e0f85668a884eb809ffa13932956

Authored by Adeel Kazmi
1 parent d805682b

Added an example that shows the FitKeepAspectRatio Fitting Mode with padding 

Change-Id: I0d3440139c7ce6fd8a246ab509c63fa0dc6ca09f
Inline Side-by-side
Showing 6 changed files with 240 additions and 0 deletions
com.samsung.dali-demo.xml
  View file @963367d
... ... @@ -296,6 +296,9 @@
296 296 <ui-application appid="gestures.example" exec="/usr/apps/com.samsung.dali-demo/bin/gestures.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
297 297 <label>Gestures</label>
298 298 </ui-application>
  299 + <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">
  300 + <label>Visual Fitting Mode</label>
  301 + </ui-application>
299 302  
300 303 <privileges>
301 304 <privilege>http://tizen.org/privilege/mediastorage</privilege>
... ...
examples/visual-fitting-mode/visual-fitting-mode-example.cpp 0 → 100644
  View file @963367d
  1 +/*
  2 + * Copyright (c) 2019 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 stage
  120 + Stage stage = Stage::GetCurrent();
  121 + stage.SetBackgroundColor( Color::WHITE );
  122 +
  123 + // Text Label filling the entire screen, with a background
  124 + mTextLabel = DevelHandle::New< TextLabel >( TEXT_LABEL_PROPERTIES );
  125 + stage.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 + DevelHandle::SetProperties( mFillImage, FILL_IMAGE_PROPERTIES );
  135 + stage.Add( mFillImage );
  136 +
  137 + // Create an ImageView that Keeps the aspect ratio while fitting within the given size
  138 + mFitKeepAspectRatioImage = DevelHandle::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 + stage.Add( mFitKeepAspectRatioImage );
  147 +
  148 + // Create an overlay label for fill image
  149 + Actor fillLabel = TextLabel::New( FILL_LABEL );
  150 + DevelHandle::SetProperties( fillLabel, FILL_IMAGE_PROPERTIES );
  151 + DevelHandle::SetProperties( fillLabel, OVERLAY_LABEL_PROPERTIES );
  152 + stage.Add( fillLabel );
  153 +
  154 + // Create an overlay label for the Fit/Keep Aspect image
  155 + Actor fitLabel = TextLabel::New( FIT_KEEP_ASPECT_LABEL );
  156 + DevelHandle::SetProperties( fitLabel, FIT_KEEP_ASPECT_RATIO_IMAGE_BASIC_PROPERTIES );
  157 + DevelHandle::SetProperties( fitLabel, OVERLAY_LABEL_PROPERTIES );
  158 + stage.Add( fitLabel );
  159 +
  160 + // Respond to key events, exit if ESC/Back, change the padding if anything else
  161 + stage.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.state == 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 +}
... ...
resources/po/en_GB.po
  View file @963367d
... ... @@ -217,6 +217,9 @@ msgstr &quot;Tooltip&quot;
217 217 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
218 218 msgstr "FPP Game"
219 219  
  220 +msgid "DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE"
  221 +msgstr "Visual Fitting Mode"
  222 +
220 223 msgid "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS"
221 224 msgstr "Visual Transitions"
222 225  
... ...
resources/po/en_US.po
  View file @963367d
... ... @@ -220,6 +220,9 @@ msgstr &quot;Tooltip&quot;
220 220 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
221 221 msgstr "FPP Game"
222 222  
  223 +msgid "DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE"
  224 +msgstr "Visual Fitting Mode"
  225 +
223 226 msgid "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS"
224 227 msgstr "Visual Transitions"
225 228  
... ...
shared/dali-demo-strings.h
  View file @963367d
... ... @@ -116,6 +116,7 @@ extern &quot;C&quot;
116 116 #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_SCROLLING")
117 117 #define DALI_DEMO_STR_TITLE_TILT_SENSOR dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TILT_SENSOR")
118 118 #define DALI_DEMO_STR_TITLE_TOOLTIP dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TOOLTIP")
  119 +#define DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE")
119 120 #define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS")
120 121 #define DALI_DEMO_STR_TITLE_WEB_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_WEB_VIEW")
121 122 #define DALI_DEMO_STR_TITLE_TEXT_RENDERER dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_RENDERER")
... ... @@ -208,6 +209,7 @@ extern &quot;C&quot;
208 209 #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING "Text Scrolling"
209 210 #define DALI_DEMO_STR_TITLE_TILT_SENSOR "Tilt Sensor"
210 211 #define DALI_DEMO_STR_TITLE_TOOLTIP "Tooltip"
  212 +#define DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE "Visual Fitting Mode"
211 213 #define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS "Visual Transitions"
212 214 #define DALI_DEMO_STR_TITLE_WEB_VIEW "Web View"
213 215 #define DALI_DEMO_STR_TITLE_TEXT_RENDERER "Text Renderer"
... ...
tests-reel/dali-tests-reel.cpp
  View file @963367d
... ... @@ -47,6 +47,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
47 47 demo.AddExample(Example("text-fonts.example", DALI_DEMO_STR_TITLE_TEXT_FONTS));
48 48 demo.AddExample(Example("text-memory-profiling.example", DALI_DEMO_STR_TITLE_TEXT_MEMORY_PROFILING));
49 49 demo.AddExample(Example("text-overlap.example", DALI_DEMO_STR_TITLE_TEXT_OVERLAP));
  50 + demo.AddExample(Example("visual-fitting-mode.example", DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE));
50 51 demo.AddExample(Example("visual-transitions.example", DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS));
51 52 demo.AddExample(Example("simple-text-label.example", DALI_DEMO_STR_TITLE_TEXT_LABEL));
52 53 demo.AddExample(Example("simple-text-field.example", DALI_DEMO_STR_TITLE_TEXT_FIELD));
... ...