<ui-application appid="tooltip.example" exec="/usr/apps/com.samsung.dali-demo/bin/tooltip.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
<label>Tooltip</label>
</ui-application>
+ <ui-application appid="clipping.example" exec="/usr/apps/com.samsung.dali-demo/bin/clipping.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+ <label>Clipping</label>
+ </ui-application>
</manifest>
/*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 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.
demo.AddExample(Example("flex-container.example", DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND));
demo.AddExample(Example("fpp-game.example", DALI_DEMO_STR_TITLE_FPP_GAME));
demo.AddExample(Example("tooltip.example", DALI_DEMO_STR_TITLE_TOOLTIP));
+ demo.AddExample(Example("clipping.example", DALI_DEMO_STR_TITLE_CLIPPING));
demo.SortAlphabetically( true );
--- /dev/null
+/*
+ * Copyright (c) 2017 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali/devel-api/actors/actor-devel.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
+
+// INTERNAL INCLUDES
+#include "clipping-item-factory.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const char * const APPLICATION_TITLE( "Clipping Controls" );
+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).
+const Vector3 ITEM_VIEW_LAYOUT_SIZE_SCALE( 0.75f, 0.5f, 0.75f );
+const float ITEM_VIEW_BORDER_SIZE = 2.0f;
+const char * const BUTTON_LABEL( "Toggle Clipping Mode" );
+} // unnamed namespace
+
+/**
+ * @brief Demonstrates the control clipping of a UI Control.
+ *
+ * When an Actor is set to clip its children, the renderers have to be added manually in order to specify what its children
+ * need to clip to. UI Controls automate the creation of the renderers/visuals when they are set to clip their children.
+ *
+ * This example displays an item-view whose clipping mode is toggled without the need for adding any renderers to it.
+ */
+class ClippingExample : public ConnectionTracker
+{
+public:
+
+ /**
+ * @brief Constructor.
+ * @param[in] application A reference to the Application class.
+ */
+ ClippingExample( Application& application )
+ : mApplication( application )
+ {
+ // Connect to the Application's Init signal
+ mApplication.InitSignal().Connect( this, &ClippingExample::Create );
+ }
+
+private:
+
+ /**
+ * @brief Called to initialise the application content.
+ * @param[in] application A reference to the Application class.
+ */
+ void Create( Application& application )
+ {
+ // Hide the indicator bar
+ application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+ // Connect to the stage's key signal to allow Back and Escape to exit.
+ Stage stage = Dali::Stage::GetCurrent();
+ stage.KeyEventSignal().Connect( this, &ClippingExample::OnKeyEvent );
+
+ // Create a TextLabel for the application title.
+ Toolkit::TextLabel label = Toolkit::TextLabel::New( APPLICATION_TITLE );
+ label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+ label.SetParentOrigin( APPLICATION_TITLE_PARENT_ORIGIN );
+ label.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+ label.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+ label.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
+ stage.Add( label );
+
+ // Create an item-view which clips its children.
+ mItemView = ItemView::New( mClippingItemFactory );
+ mItemView.SetParentOrigin( ParentOrigin::CENTER );
+ mItemView.SetAnchorPoint( AnchorPoint::CENTER );
+ mItemView.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN ); // Enable clipping. No need to create any renderers.
+ stage.Add( mItemView );
+
+ // Create a Spiral Layout and add it to the Item View.
+ mItemView.AddLayout( * DefaultItemLayout::New( DefaultItemLayout::SPIRAL ) );
+ stage.GetRootLayer().SetBehavior( Layer::LAYER_3D ); // The item-view spiral layout requires Layer 3D behaviour.
+
+ // Calculate the size we would like our item-view layout to be, and then activate the layout.
+ const Vector2 stageSize = stage.GetSize();
+ 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 );
+ mItemView.ActivateLayout( 0, itemViewLayoutSize, 0.0f );
+
+ // Create a border around item-view (as item-view is clipping its children, we should NOT add this as a child of item-view).
+ Control border = Control::New();
+ border.SetParentOrigin( ParentOrigin::CENTER );
+ border.SetAnchorPoint( AnchorPoint::CENTER );
+ border.SetProperty( Control::Property::BACKGROUND,
+ Property::Map().Add( Visual::Property::TYPE, Visual::BORDER )
+ .Add( BorderVisual::Property::COLOR, Color::WHITE )
+ .Add( BorderVisual::Property::SIZE, 2.0f ) );
+ 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 ) );
+ stage.Add( border );
+
+ // Create a button to toggle the clipping mode
+ PushButton button = Toolkit::PushButton::New();
+ button.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+ button.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+ button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+ button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+ button.SetProperty( Actor::Property::DRAW_MODE, DrawMode::OVERLAY_2D );
+ button.SetProperty( Button::Property::LABEL,
+ Property::Map().Add( Toolkit::Visual::Property::TYPE, Toolkit::DevelVisual::TEXT )
+ .Add( Toolkit::TextVisual::Property::TEXT, BUTTON_LABEL ) );
+ button.ClickedSignal().Connect( this, &ClippingExample::OnButtonClicked );
+ stage.Add( button );
+ }
+
+ /**
+ * @brief Called when any key event is received
+ *
+ * Will use this to quit the application if Back or the Escape key is received
+ * @param[in] event The key event information
+ */
+ void OnKeyEvent( const KeyEvent& event )
+ {
+ if( event.state == KeyEvent::Down )
+ {
+ if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
+ {
+ mApplication.Quit();
+ }
+ }
+ }
+
+ /**
+ * @brief Called when the button is clicked.
+ *
+ * Will use this to toggle between the clipping modes.
+ * @param[in] button The button that has been clicked.
+ */
+ bool OnButtonClicked( Toolkit::Button button )
+ {
+ if( mItemView )
+ {
+ ClippingMode::Type currentMode = static_cast< ClippingMode::Type >( mItemView.GetProperty( Actor::Property::CLIPPING_MODE ).Get< int >() );
+ mItemView.SetProperty( Actor::Property::CLIPPING_MODE, ( currentMode == ClippingMode::CLIP_CHILDREN ) ? ClippingMode::DISABLED : ClippingMode::CLIP_CHILDREN );
+ }
+ return true;
+ }
+
+ // Data
+
+ Application& mApplication; ///< Reference to the application class.
+ ItemView mItemView; ///< The item view which whose children we would like to clip.
+ ClippingItemFactory mClippingItemFactory; ///< The ItemFactory used to create our items.
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+ Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
+ ClippingExample test(app);
+ app.MainLoop();
+ return 0;
+}
--- /dev/null
+/*
+ * Copyright (c) 2017 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.
+ *
+ */
+
+// CLASS HEADER
+#include "clipping-item-factory.h"
+
+// EXTERNAL INCLUDES
+#include <dali/public-api/object/property-map.h>
+#include <dali-toolkit/public-api/controls/image-view/image-view.h>
+#include <dali-toolkit/public-api/visuals/border-visual-properties.h>
+#include <dali-toolkit/public-api/visuals/visual-properties.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const char * IMAGE_PATHS[] = {
+ DEMO_IMAGE_DIR "gallery-medium-1.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-2.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-3.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-4.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-5.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-6.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-7.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-8.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-9.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-10.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-11.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-12.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-13.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-14.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-15.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-16.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-17.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-18.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-19.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-20.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-21.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-22.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-23.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-24.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-25.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-26.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-27.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-28.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-29.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-30.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-31.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-32.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-33.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-34.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-35.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-36.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-37.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-38.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-39.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-40.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-41.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-42.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-43.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-44.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-45.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-46.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-47.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-48.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-49.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-50.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-51.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-52.jpg",
+ DEMO_IMAGE_DIR "gallery-medium-53.jpg",
+};
+const unsigned int NUM_IMAGES = sizeof( IMAGE_PATHS ) / sizeof( char * );
+const unsigned int NUM_IMAGES_MULTIPLIER = 10;
+
+const float ITEM_BORDER_SIZE = 2.0f;
+} // unnamed namespace
+
+ClippingItemFactory::ClippingItemFactory()
+{
+}
+
+unsigned int ClippingItemFactory::GetNumberOfItems()
+{
+ return NUM_IMAGES * NUM_IMAGES_MULTIPLIER;
+}
+
+Actor ClippingItemFactory::NewItem( unsigned int itemId )
+{
+ // Create an image view for this item
+ ImageView actor = ImageView::New( IMAGE_PATHS[ itemId % NUM_IMAGES ] );
+
+ // Add a border image child actor
+ ImageView borderActor = ImageView::New();
+ borderActor.SetParentOrigin( ParentOrigin::CENTER );
+ borderActor.SetAnchorPoint( AnchorPoint::CENTER );
+ borderActor.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+ borderActor.SetSizeModeFactor( Vector3( 2.0f * ITEM_BORDER_SIZE, 2.0f * ITEM_BORDER_SIZE, 0.0f ) );
+ borderActor.SetColorMode( USE_PARENT_COLOR );
+ borderActor.SetProperty( ImageView::Property::IMAGE,
+ Property::Map().Add( Visual::Property::TYPE, Visual::BORDER )
+ .Add( BorderVisual::Property::COLOR, Color::WHITE )
+ .Add( BorderVisual::Property::SIZE, ITEM_BORDER_SIZE )
+ .Add( BorderVisual::Property::ANTI_ALIASING, true ) );
+ actor.Add(borderActor);
+
+ return actor;
+}
--- /dev/null
+#ifndef CLIPPING_ITEM_FACTORY_H
+#define CLIPPING_ITEM_FACTORY_H
+
+/*
+ * Copyright (c) 2017 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 <dali-toolkit/public-api/controls/scrollable/item-view/item-factory.h>
+
+/**
+ * @brief Factory used to create the items required in the item-view used by this example.
+ */
+class ClippingItemFactory : public Dali::Toolkit::ItemFactory
+{
+public:
+
+ /**
+ * @brief Constructor
+ */
+ ClippingItemFactory();
+
+private: // From ItemFactory
+
+ /**
+ * Query the number of items available from the factory.
+ * The maximum available item has an ID of GetNumberOfItems() - 1.
+ */
+ virtual unsigned int GetNumberOfItems();
+
+ /**
+ * Create an Actor to represent a visible item.
+ * @param itemId
+ * @return the created actor.
+ */
+ virtual Dali::Actor NewItem( unsigned int itemId );
+
+private:
+
+ ClippingItemFactory( const ClippingItemFactory& ); ///< Undefined
+ ClippingItemFactory& operator=( const ClippingItemFactory& ); ///< Undefined
+};
+
+#endif // CLIPPING_ITEM_FACTORY_H
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "ক্লিক্"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "ঝুৰ্"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "Tasten"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "Farbverlauf"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "Buttons"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "Colour Gradient"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "Buttons"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "Color Gradient"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "Botones"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Recorte"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "Gradiente de color"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "Painikkeet"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Leikkaaminen"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "Liukuväri"
msgid "DALI_DEMO_STR_TITLE_ANIMATED_IMAGES"
msgstr "애니메이션 이미지"
-
msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
msgstr "애니메이션 모양"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "버튼"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "깎는"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "색상 그라디언트"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "ബട്ടണുകൾ"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "ക്ലിപ്പിംഗ്"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "വർണ്ണ ഗ്രേഡിയന്റ്"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "بٹنوں"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "کاٹنا"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "رنگ میلان"
msgid "DALI_DEMO_STR_TITLE_BUTTONS"
msgstr "按钮"
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "剪裁"
+
msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
msgstr "颜色梯度"
/*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 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.
#define DALI_DEMO_STR_TITLE_BLOCKS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BLOCKS")
#define DALI_DEMO_STR_TITLE_BUBBLES dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUBBLES")
#define DALI_DEMO_STR_TITLE_BUTTONS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUTTONS")
+#define DALI_DEMO_STR_TITLE_CLIPPING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING")
#define DALI_DEMO_STR_TITLE_COLOR_GRADIENT dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COLOR_GRADIENT")
#define DALI_DEMO_STR_TITLE_CONTACT_CARDS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CONTACT_CARDS")
#define DALI_DEMO_STR_TITLE_CUBE_TRANSITION dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CUBE_TRANSITION")
#define DALI_DEMO_STR_TITLE_BLOCKS "Blocks"
#define DALI_DEMO_STR_TITLE_BUBBLES "Bubbles"
#define DALI_DEMO_STR_TITLE_BUTTONS "Buttons"
+#define DALI_DEMO_STR_TITLE_CLIPPING "Clipping"
#define DALI_DEMO_STR_TITLE_COLOR_GRADIENT "Color Gradient"
#define DALI_DEMO_STR_TITLE_CONTACT_CARDS "Contact Cards"
#define DALI_DEMO_STR_TITLE_CUBE_TRANSITION "Cube Effect"