RollerWidget

From Apertis
Jump to: navigation, search

Contents

Introduction

This page describes the work needed to implement a roller widget on top of MX with the desired performance goals and with some specific issues resolved.

The user experience calls for advanced kinetic scrolling features, varied layouts and effects and challenging scalability requirements. The Mx toolkit and recent releases of Clutter provide classes and interfaces that make this kind of UIs easier to develop without sacrificing performance. The class diagram below shows how Mx will be leveraged and will serve to understand the deliverables discussed later in this document:

Roller-mx-class-diagram.png

See the implementation plan.

1. Scrolling

A subclass of MxKineticScrollView will be delivered. It will contain new API for enabling the optional features and for tuning thresholds. For the global scrollbar, will be probably delivered in a separate class because the generic scroll view shouldn't be interacting outside its bounds.

1.1. Basic kinetic scrolling

  • vertical kinetic scrolling (deceleration) (see video)
  • responsible at any time (e.g. during scroll, during lock-in effect, etc)
  • video elements should keep playing during scrolling

1.2. Overshoot effect

1.3. Global scrollbar

  • a scrollbar can appear temporarily during scrolling, always on the right edge of the screen, relating to the currently focused roller (see mockup)
  • optional

1.4. Blur effect

  • vertical blurring
  • applied only during scrolling
  • increases in intensity as scrolling speeds up
  • optional

1.5. Stopping and reaccelerating

  • scrolling should only start after the pointer has moved a configurable (at runtime) threshold, otherwise is considered a click
  • tap-and-hold should stop the scrolling animation
  • a flick gesture should re-accelerate
  • the scroll animation shouldn't visibly stop when re-accelerating

1.6. Forwarding of horizontal slides

  • if a slide gesture is starting closer to the X axis than to the Y axis, scrolling won't start
  • contained events should receive all events needed to recognize the horizontal slide gesture

2. Roller container

We'll deliver !MmdRoller, a !ClutterContainer implementation with some added API for setting a background actor, enabling optional features, placing an actor in the footer and changing the width with an animation.

About 2.4, actors are responsible for their own rendering, so we'll deliver an example actor with the features specified: !MmdSampleGlowActor.

2.1. Fixed-height list layout

  • each item takes a whole line (see mockup)
  • all items have the same height
  • one item can be expanded at a time
  • highly scalable

2.2. Roll over

  • optionally and only for lists that don't fit wholly in the screen, the list rolls over (loops) so the first item follows the last one, with a special separator between the last and the first entry (see mockup, SETTINGS is the last item and MUSIC the first)
  • when rolling over is enabled, should have an increased kinetic force to lock at the first entry during usage

2.3. Focus management

  • lock-in effect when a line becomes focused (the view scrolls for a while around the new position until it settles) (see video)
  • focus-on-click (initiate the lock-in effect on the clicked line)
  • focus-on-click should work as well when the list is scrolling
  • clicking on an item in the currently focused line should activate it
  • when more items are added, the focus should stay on the same line
  • adding new items or updating the content of already available items shall be done during usage and shall not have any impact of the usability
  • the elements that lose and gain the focus should be given the opportunity to perform an animation

Use existing API in MxFocusable

2.4. Focus rendering

  • [wiki:Clutter#Gloweffect glow effect] for the focused line (glow disappears during animations)
  • optionally, the unfocused lines are dimmed, with a transition (see in video)
  • when the widget doesn't have the keyboard focus, it should be dimmed with a transition (see mockup)
  • optionally, the focus line gets an "Arrow" which fades in after lock-in and disappears during scrolling (see the MUSIC and ALBUMS entries in mockup)

2.5. Resize transition

  • animate the horizontal shrinking and expanding of the container
  • optional

2.6. Footer

  • one footer shall be rendered at the bottom of the roller (see FRIENDS in this mockup or Buddies in this another)
  • it should slide in and out, provide a property for setting the footer height so it can be animated
  • optional

2.7. !ClutterModel support

2.8. Background elements

  • vertical separators (see mockup)

2.9. Modification of item height

  • not all entries must have the same height, some entries can be expanded taking more vertical space (see mockup)
  • when an item is expanded or shrinked, it should be animated

2.10. Coupling support

  • once the lock-in animation has finished, a signal will be emitted so other rollers can be coupled
  • there will be a method for moving the focus to a specific element
  • for "fast scroll" support, there will be a method for retrieving an element based on its adjustment position

2.11. Flow layout

  • items are placed in rows, allocated from left to right (see the album cover roller, the left-size roller in the album detail view and the picture viewer)
  • all items have the same height and width
  • highly scalable

2.12. Variable-height layout

  • same as 2.1, but each item could have a different height
  • low scalability

3. Model

We'll deliver a !ClutterModel subclass (!MmdModel) that also provides:

  • a property "waiting-for-data" which can be monitored by the view by listening for "notify::waiting-for-data". This will be used to display an idle animation

4. Thumbnail view

We'll deliver !MmdSampleAlbumRoller, a subclass of !MmdContainer with height distortion

4.1. Height distortion

  • view should be [wiki:Clutter#Distortionofheight distorted] as this video shows

5. Transitions

MmdRoller will provide API to access the currently visible items so each transition can be implemented from outside MmdRoller by applying translation and other transformations to the contained items. This section will deliver those API additions and one example application implementing each transition.

  • video elements should keep playing during animation (see video)

5.1. Cover roll to/from detailed view

  • in a roller with more than one item per row (flow layout), the items in the row that contains the focused item will move to a single column and the rest will disappear from the viewable area. The focused item will be placed in the middle of the column.
  • see video

5.2. Detailed view to/from fullscreen view

  • the focused item in the single-column roller will become a Gst video sink which will be initially scaled up to take the whole height. Then it will scale down to take the whole width, and then it will scale up to take the whole screen.
  • see video

5.3. Thumb list to/from detailed view

  • start state
  • end state
  • transition is started by tapping on a roller item
  • the focus of rolls and the lower level headlines disappear
  • start the scaling and position animation of all thumbs and fade out the rest of the list such as the text, the separators, etc
  • once the thumb animation has been finalized, fade in the right handed roller of detailed view (with text and separators)
  • once the right-handed roll is visible slide in the upper and lower headlines and controls

5.4. List to/from detailed view

  • in a roller with one item per row (list layout), the focused item will grow to take the whole height of the container pushing the other visible rows out from the viewable area. Once it has reached the full height, it will fade into another representation of the item (if this item had a text representation, it would fade into an image).
  • see video

5.5. Flip transition

  • transition starts with an horizontal movement and the page turns following the finger's movement
  • when the finger is released, the page turn is undone if the finger was released in the same half as movement started
  • otherwise the page turn is completed
  • see 1, 2, 3, 4, 5, 6

5.6. Sort entries in the list view

  • see video. Note the arrows in that mockup, which first of all notifies the user that a movement is possible (after a longpress on an entry) by indicating the possible directions with grey arrows (Up&down, up only, down only) and changeing the color to white for that arrow which points in the direction of the current movement. Optionally, the movement of entries can be limited to the group which it belongs to.

6. Idle animation

We'll deliver a subclass of !ClutterActor that can be overlaid on top of any roller (or any other actor).

  • if the UI is not usable when loading some content, an animation will appear

7. Album roller in detailed view of media player

We'll deliver a subclass of the container from section 4 that can be used as an example of how to implement this functionality.

  • if the user scroll the albums forward but do not start playing a new track, the roller shall scroll back to the song currently played after it has not been used for a certain period of time

8. Expander widget

9. Performance

The code delivered in the other sections will comply with these requirements.

  • once the list has been pushed and is scrolling freely, the scroll performance should have > 50 FPS with < 40% CPU load
  • scrolling performance doesn't depend on the number of elements
  • startup performance doesn't depend on the number of elements
  • the top speed of the list shall not be limited by the frame rate
  • the thresholds that define what is a flick gesture and not tap-and-hold are 20 pixels and 25 ms
  • during slow scrolling, the text should still be rendered with high quality, staying readable at all times and without any flicker, deformation or other artefacts
  • quick start: no visible delay since the finger starts panning and the list starts scrolling, considering the threshold
  • all thresholds should be configurable at startup so they can be tuned without requiring changes to the source code
  • see this document for details

Standing issues

None

Personal tools
Namespaces

Variants
Actions
Navigation
Tools