A very simple scroll-view example 72/218572/4
authorAdeel Kazmi <adeel.kazmi@samsung.com>
Mon, 25 Nov 2019 17:34:45 +0000 (17:34 +0000)
committerAdeel Kazmi <adeel.kazmi@samsung.com>
Tue, 26 Nov 2019 16:30:31 +0000 (16:30 +0000)
Change-Id: I49298a830fd6faaf20325ef1f0339d012140b88e

com.samsung.dali-demo.xml
examples/simple-scroll-view/simple-scroll-view-example.cpp [new file with mode: 0644]
resources/po/en_GB.po
resources/po/en_US.po
shared/dali-demo-strings.h
tests-reel/dali-tests-reel.cpp

index d9821bd..5751ee1 100644 (file)
        <ui-application appid="simple-layout.example" exec="/usr/apps/com.samsung.dali-demo/bin/simple-layout.example" nodisplay="true" multiple="false" taskmanage="true" type="c++app">
                <label>Simple Layout</label>
        </ui-application>
+       <ui-application appid="simple-scroll-view.example" exec="/usr/apps/com.samsung.dali-demo/bin/simple-scroll-view.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+               <label>Simple Scroll View</label>
+       </ui-application>
        <ui-application appid="simple-text-field.example" exec="/usr/apps/com.samsung.dali-demo/bin/simple-text-field.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
                <label>Simple Text Field</label>
        </ui-application>
diff --git a/examples/simple-scroll-view/simple-scroll-view-example.cpp b/examples/simple-scroll-view/simple-scroll-view-example.cpp
new file mode 100644 (file)
index 0000000..a19d795
--- /dev/null
@@ -0,0 +1,171 @@
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const int NUMBER_OF_PAGES = 9; ///< Number of Pages going across
+const int ROWS_PER_PAGE   = 5; ///< Number of Images going down (rows) within a Page
+
+const float DISTANCE_BETWEEN_IMAGES = 6.0f; ///< The distance between the images
+
+} // unnamed namespace
+
+/**
+ * An example showing how to create a very simple scroll view
+ */
+class ExampleController : public ConnectionTracker
+{
+public:
+
+  /**
+   * Constructor
+   * @param application class, stored as reference
+   */
+  ExampleController( Application& application )
+  : mApplication( application )
+  {
+    // Connect to the Application's Init and orientation changed signal
+    mApplication.InitSignal().Connect(this, &ExampleController::OnInit);
+  }
+
+  ~ExampleController() = default;
+
+private:
+
+  /**
+   * This method gets called once the main loop of application is up and running
+   */
+  void OnInit(Application& app)
+  {
+    Stage stage = Dali::Stage::GetCurrent();
+    stage.SetBackgroundColor( Color::WHITE );
+    stage.KeyEventSignal().Connect(this, &ExampleController::OnKeyEvent);
+
+    // Make the scroll view's size a certain percentage of the stage
+    const Vector2 pageSize = stage.GetSize() * 0.75f;
+
+    // Create a scroll view and set our desired properties
+    ScrollView scrollView = ScrollView::New();
+    scrollView.SetAnchorPoint( AnchorPoint::CENTER );
+    scrollView.SetParentOrigin( ParentOrigin::CENTER );
+    scrollView.SetSize( pageSize );
+    scrollView.SetAxisAutoLock( true );
+    stage.Add( scrollView );
+
+    // We want to the scroll-view so only one page is shown
+    scrollView.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_TO_BOUNDING_BOX );
+
+    // Create rulers for the X and Y domains, we want to disable vertical scrolling but enable horizontal scrolling
+    RulerPtr rulerX = new FixedRuler( pageSize.width ); // Snaps to a multiple of this when flicking
+    RulerPtr rulerY = new DefaultRuler;
+    rulerX->SetDomain( RulerDomain( 0.0f, pageSize.width * NUMBER_OF_PAGES, true ) ); // Set the domain to equal the number of pages used
+    rulerY->Disable();
+
+    scrollView.SetRulerX( rulerX );
+    scrollView.SetRulerY( rulerY );
+
+    // Populate the Pages
+    for( int column = 0, textNumber = 0; column < NUMBER_OF_PAGES; column++ )
+    {
+      Actor page = CreatePage( pageSize, textNumber );
+      page.SetPosition( column * pageSize.x, 0.0f );
+      scrollView.Add( page );
+    }
+
+    // Do a little animation from the last page to the first page on load
+    scrollView.ScrollTo( NUMBER_OF_PAGES - 1, 0.0f );
+    scrollView.ScrollTo( 0 );
+  }
+
+  /**
+   * Creates a page using a source of images.
+   */
+  Actor CreatePage( const Vector2& pageSize, int& textNumber )
+  {
+    Actor page = Actor::New();
+    page.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+    page.SetParentOrigin( ParentOrigin::CENTER );
+    page.SetAnchorPoint( AnchorPoint::CENTER );
+
+    Stage stage = Stage::GetCurrent();
+
+    // Calculate the number of images going across (columns) within a page, the image size and the size of the text
+    const int imageColumns = round( ROWS_PER_PAGE * ( pageSize.width ) / ( pageSize.height ) );
+    const Vector3 imageSize( ( pageSize.width  / imageColumns ) - DISTANCE_BETWEEN_IMAGES,
+                             ( pageSize.height / ROWS_PER_PAGE) - DISTANCE_BETWEEN_IMAGES,
+                             0.0f);
+    const float textPixelSize = imageSize.width / 3.0f;
+
+    // Populate the page
+    for( int row = 0; row < ROWS_PER_PAGE; row++ )
+    {
+      for( int column = 0; column < imageColumns; column++ )
+      {
+        const Vector3 position( DISTANCE_BETWEEN_IMAGES * 0.5f + ( imageSize.x + DISTANCE_BETWEEN_IMAGES ) * column - pageSize.width  * 0.5f,
+                                DISTANCE_BETWEEN_IMAGES * 0.5f + ( imageSize.y + DISTANCE_BETWEEN_IMAGES ) * row    - pageSize.height * 0.5f,
+                                0.0f);
+
+        Control item = TextLabel::New( std::to_string( textNumber++ ) );
+        item.SetProperty( Actor::Property::POSITION, position + imageSize * 0.5f );
+        item.SetProperty( Actor::Property::SIZE, imageSize );
+        item.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
+        item.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
+        item.SetProperty( TextLabel::Property::TEXT_COLOR, Color::BLACK );
+        item.SetProperty( TextLabel::Property::PIXEL_SIZE, textPixelSize );
+        item.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::CENTER );
+        item.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, VerticalAlignment::CENTER );
+        item.SetProperty( TextLabel::Property::OUTLINE, Property::Map{ { "width", 2 }, { "color", Color::WHITE } } );
+        item.SetProperty( Control::Property::BACKGROUND, Vector4( Random::Range( 0.0f, 1.0f ), Random::Range( 0.0f, 1.0f ), Random::Range( 0.0f, 1.0f ), 0.7f ) );
+        page.Add(item);
+      }
+    }
+
+    return page;
+  }
+
+  /**
+   * Main key event handler
+   */
+  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();
+      }
+    }
+  }
+
+private:
+  Application& mApplication; ///< Application instance
+};
+
+int DALI_EXPORT_API main(int argc, char **argv)
+{
+  Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
+  ExampleController test(app);
+  app.MainLoop();
+  return 0;
+}
index dc284c4..b520b9d 100755 (executable)
@@ -184,6 +184,9 @@ msgstr "Script-based UI"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll View"
 
+msgid "DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW"
+msgstr "Simple Scroll View"
+
 msgid "DALI_DEMO_STR_TITLE_SPARKLE"
 msgstr "Sparkle"
 
index aded425..9647ce0 100755 (executable)
@@ -187,6 +187,9 @@ msgstr "Script-based UI"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll View"
 
+msgid "DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW"
+msgstr "Simple Scroll View"
+
 msgid "DALI_DEMO_STR_TITLE_SPARKLE"
 msgstr "Sparkle"
 
index 48ad510..354338f 100644 (file)
@@ -102,9 +102,10 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS")
 #define DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING")
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
-#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL")
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI")
 #define DALI_DEMO_STR_TITLE_SCROLL_VIEW                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCROLL_VIEW")
+#define DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW          dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW")
+#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL")
 #define DALI_DEMO_STR_TITLE_SKYBOX                      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SKYBOX")
 #define DALI_DEMO_STR_TITLE_SPARKLE                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SPARKLE")
 #define DALI_DEMO_STR_TITLE_STYLING                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_STYLING")
@@ -199,9 +200,10 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING      "Ray Marching"
 #define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS   "Radial Progress"
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            "Renderer Stencils"
-#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      "Simple Visuals Control"
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             "Script Based UI"
 #define DALI_DEMO_STR_TITLE_SCROLL_VIEW                 "Scroll View"
+#define DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW          "Simple Scroll View"
+#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      "Simple Visuals Control"
 #define DALI_DEMO_STR_TITLE_SKYBOX                      "Skybox"
 #define DALI_DEMO_STR_TITLE_SPARKLE                     "Sparkle"
 #define DALI_DEMO_STR_TITLE_STYLING                     "Styling"
index 0b7d19a..18a3fa2 100644 (file)
@@ -49,6 +49,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   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-scroll-view.example", DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW));
   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));
   demo.AddExample(Example("simple-text-renderer.example", DALI_DEMO_STR_TITLE_TEXT_RENDERER));