2 * Copyright (c) 2014 Samsung Electronics Co., Ltd.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
19 * @file image-scaling-irregular-grid-example.cpp
20 * @brief Demonstrates how to use image scaling modes when loading images.
22 * If an image is going to be drawn on-screen at a lower resolution than it is
23 * stored at on-disk, the scaling feature of the image loader can be used to
24 * reduce the image to save memory, improve performance, and potentially display
25 * a better small version of the image than if the default size were loaded.
27 * The functions CreateImage and CreateImageActor below show how to build an
28 * image using a scaling mode to have %Dali resize it during loading.
30 * This demo defaults to the ScaleToFill mode of ImageAttributes which makes
31 * sure that every pixel in the loaded image is filled with a source colour
32 * from the image's central region while losing the minimum number of pixels
34 * It is the best option for producing thumbnails of input images that have
35 * diverse aspect ratios.
37 * The other four scaling modes of dali can be cycled-through for the whole
38 * grid using the button in the top-right of the toolbar.
39 * A single image can be cycled by clicking the image directly.
41 * @see CreateImage CreateImageActor
47 #include <dali-toolkit/dali-toolkit.h>
50 #include "grid-flags.h"
51 #include "../../shared/view.h"
54 using namespace Dali::Toolkit;
55 using namespace Dali::Demo;
60 /** Controls the output of application logging. */
61 //#define DEBUG_PRINT_DIAGNOSTICS;
63 const char* BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-gradient.jpg" );
64 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
65 const char* APPLICATION_TITLE( "Image Scaling Modes" );
66 const char* TOGGLE_SCALING_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
68 /** The width of the grid in whole grid cells. */
69 const unsigned GRID_WIDTH = 9;
70 /** Limit the grid to be no higher than this in units of a cell. */
71 const unsigned GRID_MAX_HEIGHT = 600;
73 /** The space between the edge of a grid cell and the image embedded within it. */
74 const unsigned GRID_CELL_PADDING = 4;
76 /** The aspect ratio of cells in the image grid. */
77 const float CELL_ASPECT_RATIO = 1.33333333333333333333f;
79 const ImageAttributes::ScalingMode DEFAULT_SCALING_MODE = ImageAttributes::ScaleToFill;
81 /** The number of times to spin an image on touching, each spin taking a second.*/
82 const float SPIN_DURATION = 1.0f;
84 /** The target image sizes in grid cells. */
85 const Vector2 IMAGE_SIZES[] = {
93 // Large, tall configuration:
94 Vector2( GRID_WIDTH / 2, GRID_WIDTH + GRID_WIDTH / 2 ),
95 // Large, square-ish images to show shrink-to-fit well with wide and tall images:
96 Vector2( GRID_WIDTH / 2, GRID_WIDTH / 2.0f * CELL_ASPECT_RATIO + 0.5f ),
97 Vector2( GRID_WIDTH - 2, (GRID_WIDTH - 2) * CELL_ASPECT_RATIO + 0.5f ),
99 const unsigned NUM_IMAGE_SIZES = sizeof(IMAGE_SIZES) / sizeof(IMAGE_SIZES[0]);
101 /** Images to load into the grid. These are mostly large and non-square to
102 * show the scaling. */
103 const char* IMAGE_PATHS[] = {
105 DALI_IMAGE_DIR "dali-logo.png",
106 DALI_IMAGE_DIR "com.samsung.dali-demo.ico",
107 DALI_IMAGE_DIR "square_primitive_shapes.bmp",
108 DALI_IMAGE_DIR "gallery-large-14.wbmp",
110 // Images that show aspect ratio changes clearly in primitive shapes:
112 DALI_IMAGE_DIR "portrait_screen_primitive_shapes.gif",
113 DALI_IMAGE_DIR "landscape_screen_primitive_shapes.gif",
115 // Images from other demos that are tall, wide or just large:
117 DALI_IMAGE_DIR "gallery-large-1.jpg",
118 DALI_IMAGE_DIR "gallery-large-2.jpg",
119 DALI_IMAGE_DIR "gallery-large-3.jpg",
120 DALI_IMAGE_DIR "gallery-large-4.jpg",
121 DALI_IMAGE_DIR "gallery-large-5.jpg",
122 DALI_IMAGE_DIR "gallery-large-6.jpg",
123 DALI_IMAGE_DIR "gallery-large-7.jpg",
124 DALI_IMAGE_DIR "gallery-large-8.jpg",
125 DALI_IMAGE_DIR "gallery-large-9.jpg",
126 DALI_IMAGE_DIR "gallery-large-10.jpg",
127 DALI_IMAGE_DIR "gallery-large-11.jpg",
128 DALI_IMAGE_DIR "gallery-large-12.jpg",
129 DALI_IMAGE_DIR "gallery-large-13.jpg",
130 DALI_IMAGE_DIR "gallery-large-14.jpg",
131 DALI_IMAGE_DIR "gallery-large-15.jpg",
132 DALI_IMAGE_DIR "gallery-large-16.jpg",
133 DALI_IMAGE_DIR "gallery-large-17.jpg",
134 DALI_IMAGE_DIR "gallery-large-18.jpg",
135 DALI_IMAGE_DIR "gallery-large-19.jpg",
136 DALI_IMAGE_DIR "gallery-large-20.jpg",
137 DALI_IMAGE_DIR "gallery-large-21.jpg",
139 DALI_IMAGE_DIR "background-1.jpg",
140 DALI_IMAGE_DIR "background-2.jpg",
141 DALI_IMAGE_DIR "background-3.jpg",
142 DALI_IMAGE_DIR "background-4.jpg",
143 DALI_IMAGE_DIR "background-5.jpg",
144 DALI_IMAGE_DIR "background-blocks.jpg",
145 DALI_IMAGE_DIR "background-magnifier.jpg",
147 DALI_IMAGE_DIR "background-1.jpg",
148 DALI_IMAGE_DIR "background-2.jpg",
149 DALI_IMAGE_DIR "background-3.jpg",
150 DALI_IMAGE_DIR "background-4.jpg",
151 DALI_IMAGE_DIR "background-5.jpg",
152 DALI_IMAGE_DIR "background-blocks.jpg",
153 DALI_IMAGE_DIR "background-magnifier.jpg",
155 DALI_IMAGE_DIR "book-landscape-cover-back.jpg",
156 DALI_IMAGE_DIR "book-landscape-cover.jpg",
157 DALI_IMAGE_DIR "book-landscape-p1.jpg",
158 DALI_IMAGE_DIR "book-landscape-p2.jpg",
160 DALI_IMAGE_DIR "book-portrait-cover.jpg",
161 DALI_IMAGE_DIR "book-portrait-p1.jpg",
162 DALI_IMAGE_DIR "book-portrait-p2.jpg",
165 const unsigned NUM_IMAGE_PATHS = sizeof(IMAGE_PATHS) / sizeof(IMAGE_PATHS[0]) - 1u;
171 * @param[in] filename The path of the image.
172 * @param[in] width The width of the image in pixels.
173 * @param[in] height The height of the image in pixels.
174 * @param[in] scalingMode The mode to use when scaling the image to fit the desired dimensions.
176 Image CreateImage(const std::string& filename, unsigned int width, unsigned int height, ImageAttributes::ScalingMode scalingMode )
178 #ifdef DEBUG_PRINT_DIAGNOSTICS
179 fprintf( stderr, "CreateImage(%s, %u, %u, scalingMode=%u)\n", filename.c_str(), width, height, unsigned( scalingMode ) );
181 ImageAttributes attributes;
183 attributes.SetSize( width, height );
184 attributes.SetScalingMode( scalingMode );
185 Image image = ResourceImage::New( filename, attributes );
190 * Creates an ImageActor
192 * @param[in] filename The path of the image.
193 * @param[in] width The width of the image in pixels.
194 * @param[in] height The height of the image in pixels.
195 * @param[in] scalingMode The mode to use when scaling the image to fit the desired dimensions.
197 ImageActor CreateImageActor(const std::string& filename, unsigned int width, unsigned int height, ImageAttributes::ScalingMode scalingMode )
199 Image img = CreateImage( filename, width, height, scalingMode );
200 ImageActor actor = ImageActor::New( img );
201 actor.SetName( filename );
202 actor.SetParentOrigin(ParentOrigin::CENTER);
203 actor.SetAnchorPoint(AnchorPoint::CENTER);
208 /** Cycle the scaling mode options. */
209 ImageAttributes::ScalingMode NextMode( const ImageAttributes::ScalingMode oldMode )
211 ImageAttributes::ScalingMode newMode = ImageAttributes::ShrinkToFit;
214 case ImageAttributes::ShrinkToFit:
215 newMode = ImageAttributes::ScaleToFill;
217 case ImageAttributes::ScaleToFill:
218 newMode = ImageAttributes::FitWidth;
220 case ImageAttributes::FitWidth:
221 newMode = ImageAttributes::FitHeight;
223 case ImageAttributes::FitHeight:
224 newMode = ImageAttributes::ShrinkToFit;
231 * Bundle an image path with the rectangle to pack it into.
233 struct ImageConfiguration
235 ImageConfiguration( const char * const path, const Vector2 dimensions ) :
237 dimensions( dimensions )
244 * Post-layout image data.
246 struct PositionedImage
248 PositionedImage(ImageConfiguration& configuration, unsigned cellX, unsigned cellY, Vector2 imageGridDims) :
249 configuration( configuration ),
252 imageGridDims( imageGridDims )
255 ImageConfiguration configuration;
258 Vector2 imageGridDims;
264 * @brief The main class of the demo.
266 class ImageScalingIrregularGridController : public ConnectionTracker
270 ImageScalingIrregularGridController( Application& application )
271 : mApplication( application ),
274 std::cout << "ImageScalingScaleToFillController::ImageScalingScaleToFillController" << std::endl;
276 // Connect to the Application's Init signal
277 mApplication.InitSignal().Connect( this, &ImageScalingIrregularGridController::Create );
280 ~ImageScalingIrregularGridController()
282 // Nothing to do here.
286 * One-time setup in response to Application InitSignal.
288 void Create( Application& application )
290 std::cout << "ImageScalingScaleToFillController::Create" << std::endl;
292 // Get a handle to the stage:
293 Stage stage = Stage::GetCurrent();
295 // Connect to input event signals:
296 stage.KeyEventSignal().Connect(this, &ImageScalingIrregularGridController::OnKeyEvent);
298 // Hide the indicator bar
299 mApplication.GetWindow().ShowIndicator(Dali::Window::INVISIBLE);
301 // Create a default view with a default tool bar:
302 mContentLayer = DemoHelper::CreateView( mApplication,
309 // Create an image scaling toggle button. (right of toolbar)
310 Image toggleScalingImage = ResourceImage::New( TOGGLE_SCALING_IMAGE );
311 Toolkit::PushButton toggleScalingButton = Toolkit::PushButton::New();
312 toggleScalingButton.SetBackgroundImage( toggleScalingImage );
313 toggleScalingButton.ClickedSignal().Connect( this, &ImageScalingIrregularGridController::OnToggleScalingTouched );
314 mToolBar.AddControl( toggleScalingButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
316 SetTitle( APPLICATION_TITLE );
318 // Build the main content of the widow:
319 PopulateContentLayer( DEFAULT_SCALING_MODE );
323 * Build the main part of the application's view.
325 void PopulateContentLayer( const ImageAttributes::ScalingMode scalingMode )
327 Stage stage = Stage::GetCurrent();
328 Vector2 stageSize = stage.GetSize();
331 Actor imageField = BuildImageField( stageSize.x, GRID_WIDTH, GRID_MAX_HEIGHT, scalingMode, fieldHeight );
333 mScrollView = ScrollView::New();
335 mScrollView.ScrollStartedSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollStarted );
336 mScrollView.ScrollCompletedSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollCompleted );
338 mScrollView.EnableScrollComponent( Scrollable::VerticalScrollBar );
339 mScrollView.EnableScrollComponent( Scrollable::HorizontalScrollBar );
341 mScrollView.SetAnchorPoint(AnchorPoint::CENTER);
342 mScrollView.SetParentOrigin(ParentOrigin::CENTER);
344 mScrollView.SetSize( stageSize );//Vector2( stageSize.width, fieldHeight ) );//stageSize );
345 mScrollView.SetAxisAutoLock( true );
346 mScrollView.SetAxisAutoLockGradient( 1.0f );
348 // Restrict scrolling to mostly vertical only, but with some horizontal wiggle-room:
350 RulerPtr rulerX = new FixedRuler( stageSize.width ); //< Pull the view back to the grid's centre-line when touch is release using a snapping ruler.
351 rulerX->SetDomain( RulerDomain( stageSize.width * -0.125f, stageSize.width * 1.125f ) ); //< Scroll slightly left/right of image field.
352 mScrollView.SetRulerX ( rulerX );
354 RulerPtr rulerY = new DefaultRuler(); //stageSize.height ); //< Snap in multiples of a screen / stage height
355 rulerY->SetDomain( RulerDomain( - fieldHeight * 0.5f + stageSize.height * 0.5f - GRID_CELL_PADDING, fieldHeight * 0.5f + stageSize.height * 0.5f + GRID_CELL_PADDING ) );
356 mScrollView.SetRulerY ( rulerY );
358 mContentLayer.Add( mScrollView );
359 mScrollView.Add( imageField );
360 mGridActor = imageField;
364 * Build a field of images scaled into a variety of shapes from very wide,
365 * through square, to very tall. The images are direct children of the Dali::Actor
368 Actor BuildImageField( const float fieldWidth,
369 const unsigned gridWidth,
370 const unsigned maxGridHeight,
371 ImageAttributes::ScalingMode scalingMode,
372 float & outFieldHeight )
374 // Generate the list of image configurations to be fitted into the field:
376 std::vector<ImageConfiguration> configurations;
377 configurations.reserve( NUM_IMAGE_PATHS * NUM_IMAGE_SIZES );
378 for( unsigned imageIndex = 0; imageIndex < NUM_IMAGE_PATHS; ++imageIndex )
380 for( unsigned dimensionsIndex = 0; dimensionsIndex < NUM_IMAGE_SIZES; ++ dimensionsIndex )
382 configurations.push_back( ImageConfiguration( IMAGE_PATHS[imageIndex], IMAGE_SIZES[dimensionsIndex] ) );
385 // Stir-up the list to get some nice irregularity in the generated field:
386 std::random_shuffle( configurations.begin(), configurations.end() );
387 std::random_shuffle( configurations.begin(), configurations.end() );
389 // Place the images in the grid:
391 std::vector<ImageConfiguration>::iterator config, end;
392 GridFlags grid( gridWidth, maxGridHeight );
393 std::vector<PositionedImage> placedImages;
395 for( config = configurations.begin(), end = configurations.end(); config != end; ++config )
397 unsigned cellX, cellY;
398 Vector2 imageGridDims;
400 // Allocate a region of the grid for the image:
401 bool allocated = grid.AllocateRegion( config->dimensions, cellX, cellY, imageGridDims );
404 #ifdef DEBUG_PRINT_DIAGNOSTICS
405 fprintf( stderr, "Failed to allocate image in grid with dims (%f, %f) and path: %s.\n", config->dimensions.x, config->dimensions.y, config->path );
410 placedImages.push_back( PositionedImage( *config, cellX, cellY, imageGridDims ) );
412 DALI_ASSERT_DEBUG( grid.DebugCheckGridValid() && "Cells were set more than once, indicating erroneous overlap in placing images on the grid." );
413 const unsigned actualGridHeight = grid.GetHighestUsedRow() + 1;
415 // Take the images images in the grid and turn their logical locations into
416 // coordinates in a frame defined by a parent actor:
418 Actor gridActor = Actor::New();
419 gridActor.SetSizeMode( SIZE_EQUAL_TO_PARENT );
420 gridActor.SetParentOrigin( ParentOrigin::CENTER );
421 gridActor.SetAnchorPoint( AnchorPoint::CENTER );
423 // Work out the constants of the grid and cell dimensions and positions:
424 const float cellWidth = fieldWidth / gridWidth;
425 const float cellHeight = cellWidth / CELL_ASPECT_RATIO;
426 const Vector2 cellSize = Vector2( cellWidth, cellHeight );
427 outFieldHeight = actualGridHeight * cellHeight;
428 const Vector2 gridOrigin = Vector2( -fieldWidth * 0.5f, -outFieldHeight * 0.5 );
430 // Build the image actors in their right locations in their parent's frame:
431 for( std::vector<PositionedImage>::const_iterator i = placedImages.begin(), end = placedImages.end(); i != end; ++i )
433 const PositionedImage& imageSource = *i;
434 const Vector2 imageSize = imageSource.imageGridDims * cellSize - Vector2( GRID_CELL_PADDING * 2, GRID_CELL_PADDING * 2 );
435 const Vector2 imageRegionCorner = gridOrigin + cellSize * Vector2( imageSource.cellX, imageSource.cellY );
436 const Vector2 imagePosition = imageRegionCorner + Vector2( GRID_CELL_PADDING , GRID_CELL_PADDING ) + imageSize * 0.5f;
438 ImageActor image = CreateImageActor( imageSource.configuration.path, imageSize.x, imageSize.y, scalingMode );
439 image.SetPosition( Vector3( imagePosition.x, imagePosition.y, 0 ) );
440 image.SetSize( imageSize );
441 image.TouchedSignal().Connect( this, &ImageScalingIrregularGridController::OnTouchImage );
442 mScalingModes[image.GetId()] = scalingMode;
443 mSizes[image.GetId()] = imageSize;
445 gridActor.Add( image );
452 * Upon Touching an image (Release), change its scaling mode and make it spin, provided we're not scrolling.
453 * @param[in] actor The actor touched
454 * @param[in] event The TouchEvent.
456 bool OnTouchImage( Actor actor, const TouchEvent& event )
458 if( (event.points.size() > 0) && (!mScrolling) )
460 TouchPoint point = event.points[0];
461 if(point.state == TouchPoint::Up)
463 // Spin the image a few times:
464 Animation animation = Animation::New(SPIN_DURATION);
465 animation.RotateBy( actor, Degree(360.0f * SPIN_DURATION), Vector3::XAXIS, AlphaFunctions::EaseOut);
468 // Change the scaling mode:
469 const unsigned id = actor.GetId();
470 ImageAttributes::ScalingMode newMode = NextMode( mScalingModes[id] );
471 const Vector2 imageSize = mSizes[actor.GetId()];
473 ImageActor imageActor = ImageActor::DownCast( actor );
474 Image oldImage = imageActor.GetImage();
475 Image newImage = CreateImage( ResourceImage::DownCast(oldImage).GetUrl(), imageSize.width + 0.5f, imageSize.height + 0.5f, newMode );
476 imageActor.SetImage( newImage );
477 mScalingModes[id] = newMode;
484 * Main key event handler.
485 * Quit on escape key.
487 void OnKeyEvent(const KeyEvent& event)
489 if( event.state == KeyEvent::Down )
491 if( IsKey( event, Dali::DALI_KEY_ESCAPE )
492 || IsKey( event, Dali::DALI_KEY_BACK ) )
500 * Signal handler, called when the 'Scaling' button has been touched.
502 * @param[in] button The button that was pressed.
504 bool OnToggleScalingTouched( Button button )
506 const unsigned numChildren = mGridActor.GetChildCount();
508 for( unsigned i = 0; i < numChildren; ++i )
510 ImageActor gridImageActor = ImageActor::DownCast( mGridActor.GetChildAt( i ) );
513 // Cycle the scaling mode options:
514 const Vector2 imageSize = mSizes[gridImageActor.GetId()];
515 ImageAttributes::ScalingMode newMode = NextMode( mScalingModes[gridImageActor.GetId()] );
516 Image oldImage = gridImageActor.GetImage();
517 Image newImage = CreateImage(ResourceImage::DownCast(oldImage).GetUrl(), imageSize.width, imageSize.height, newMode );
518 gridImageActor.SetImage( newImage );
520 mScalingModes[gridImageActor.GetId()] = newMode;
522 SetTitle( std::string( newMode == ImageAttributes::ShrinkToFit ? "ShrinkToFit" : newMode == ImageAttributes::ScaleToFill ? "ScaleToFill" : newMode == ImageAttributes::FitWidth ? "FitWidth" : "FitHeight" ) );
529 * Sets/Updates the title of the View
530 * @param[in] title The new title for the view.
532 void SetTitle(const std::string& title)
536 mTitleActor = TextView::New();
537 // Add title to the tool bar.
538 mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
541 Font font = Font::New();
542 mTitleActor.SetText( title );
543 mTitleActor.SetSize( font.MeasureText( title ) );
544 mTitleActor.SetStyleToCurrentText(DemoHelper::GetDefaultTextStyle());
548 * When scroll starts (i.e. user starts to drag scrollview),
549 * note this state (mScrolling = true)
550 * @param[in] position Current Scroll Position
552 void OnScrollStarted( const Vector3& position )
558 * When scroll starts (i.e. user stops dragging scrollview, and scrollview has snapped to destination),
559 * note this state (mScrolling = false).
560 * @param[in] position Current Scroll Position
562 void OnScrollCompleted( const Vector3& position )
568 Application& mApplication;
570 Layer mContentLayer; ///< The content layer (contains non gui chrome actors)
571 Toolkit::View mView; ///< The View instance.
572 Toolkit::ToolBar mToolBar; ///< The View's Toolbar.
573 TextView mTitleActor; ///< The Toolbar's Title.
574 Actor mGridActor; ///< The container for the grid of images
575 ScrollView mScrollView; ///< ScrollView UI Component
576 bool mScrolling; ///< ScrollView scrolling state (true = scrolling, false = stationary)
577 std::map<unsigned, ImageAttributes::ScalingMode> mScalingModes; ///< Stores the current scaling mode of each image, keyed by image actor id.
578 std::map<unsigned, Vector2> mSizes; ///< Stores the current size of each image, keyed by image actor id.
581 void RunTest( Application& application )
583 ImageScalingIrregularGridController test( application );
585 application.MainLoop();
588 /** Entry point for Linux & Tizen applications */
589 int main( int argc, char **argv )
591 Application application = Application::New( &argc, &argv );
593 RunTest( application );