Merge lp:~unity-team/unity8/carousel-shader into lp:unity8

[Andrea Cimitan]

Use a shader to improve the look of the carousel when the preview is opened

Use a shader to improve the look of the carousel when the preview is opened

[lp:~unity-team/unity8/carousel-shader]

530. By Andrea Cimitan on 2013-11-27

Moved to new API for Carousel signals

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:530
http://jenkins.qa.ubuntu.com/job/unity8-ci/1759/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/1208/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/1187/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-trusty/449
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-amd64-ci/282
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/283
        deb: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/283/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-i386-ci/282
    FAILURE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/1073/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1208
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1208/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1187
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1187/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-mako/3743/console
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/1860

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/1759/rebuild

review: Needs Fixing (continuous-integration)

[Michał Sawicz (saviq)]

Failed due to bug #1255578.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:530
http://jenkins.qa.ubuntu.com/job/unity8-ci/1776/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/1259
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/1233/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-trusty/467
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-amd64-ci/299
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/300
        deb: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/300/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-i386-ci/299
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/1116
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1259
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1259/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1233
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1233/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-mako/3785/console
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/1905

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/1776/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:530
http://jenkins.qa.ubuntu.com/job/unity8-ci/1783/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/1280
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/1254/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-trusty/480
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-amd64-ci/306
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/307
        deb: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/307/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-i386-ci/306
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/1135
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1280
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1280/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1254
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1254/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-mako/3802/console
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/1922

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/1783/rebuild

review: Needs Fixing (continuous-integration)

[Albert Astals Cid (aacid)]

Have you talked to design about this?

review: Needs Information

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:530
http://jenkins.qa.ubuntu.com/job/unity8-ci/1799/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/1339
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/1313/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-trusty/523
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-amd64-ci/322
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/323
        deb: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/323/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-i386-ci/322
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/1190
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1339
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1339/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1313
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1313/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-mako/3857/console
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/1980

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/1799/rebuild

review: Needs Fixing (continuous-integration)

[Andrea Cimitan (cimi)]

> Have you talked to design about this?

Nope but of course they will agree on that

[Albert Astals Cid (aacid)]

Can you make the 200 that is part of this diff to be a property we set from the same place we set the other 200 you are referencing so they stay in sync? (i'm guessing they need to stay in sync otherwise you would have not added the comment)

review: Needs Fixing

[Andrea Cimitan (cimi)]

> Can you make the 200 that is part of this diff to be a property we set from
> the same place we set the other 200 you are referencing so they stay in sync?
> (i'm guessing they need to stay in sync otherwise you would have not added the
> comment)

I think we should tackle all those animation timings into a new different branch that will use Ubuntu Animation and remove custom durations

[Albert Astals Cid (aacid)]

My comment was not about the custom durations vs "standarized" Ubuntu Animation duration, which i agree we should fix and use, let's say UbuntuAnimation.FastDuration (165) instead of 200, and i do agree we can do that later.

But then there is the question i wanted to make (and maybe it did not get through)

"Should the ShaderEffect animation always have exactly the same duration than the OpenEffect one in GenericScopeView.qml?"
Because if they should, switching to UbuntuAnimation.XYZ won't help here (since later someone could change one to UbuntuAnimation.BriskAnimation and forget about the other), if they have to be the same we actually need to make sure there's a property we can bind to each other so they are always in sync.

[Andrea Cimitan (cimi)]

> My comment was not about the custom durations vs "standarized" Ubuntu
> Animation duration, which i agree we should fix and use, let's say
> UbuntuAnimation.FastDuration (165) instead of 200, and i do agree we can do
> that later.
>
> But then there is the question i wanted to make (and maybe it did not get
> through)
>
> "Should the ShaderEffect animation always have exactly the same duration than
> the OpenEffect one in GenericScopeView.qml?"
> Because if they should, switching to UbuntuAnimation.XYZ won't help here
> (since later someone could change one to UbuntuAnimation.BriskAnimation and
> forget about the other), if they have to be the same we actually need to make
> sure there's a property we can bind to each other so they are always in sync.

I don't think it's a requirement... we can have them async

[Albert Astals Cid (aacid)]

Ok, looks reasonable then.

Someone will have to comment on the aesthetics and top approve, and that's not me for sure :D

review: Abstain

[Michał Sawicz (saviq)]

We're missing an animation when switching the focused item - it goes from translucent to opaque in one frame.

And I still need to understand why we need a shader here, and why wouldn't layers work...

review: Needs Fixing

[Andrea Cimitan (cimi)]

> We're missing an animation when switching the focused item - it goes from
> translucent to opaque in one frame.
>
> And I still need to understand why we need a shader here, and why wouldn't
> layers work...
layers didn't work for me...

[Gerry Boland (gerboland)]

How does this perform on nexus10? The carousel is a very large item to copy into its own texture. I'm worried about GPU memory usage and general performance with this approach.

[lp:~unity-team/unity8/carousel-shader]

531. By Andrea Cimitan on 2014-01-06

merged trunk

532. By Andrea Cimitan on 2014-01-06

added behaviour on opacity

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:532
http://jenkins.qa.ubuntu.com/job/unity8-ci/1989/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/2005
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/1918
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-trusty/808
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-amd64-ci/511
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/513
        deb: http://jenkins.qa.ubuntu.com/job/unity8-trusty-armhf-ci/513/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-trusty-i386-ci/511
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/1762
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2005
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2005/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1918
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/1918/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-mako/4394
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/2731

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/1989/rebuild

review: Approve (continuous-integration)

[Andrea Cimitan (cimi)]

> How does this perform on nexus10? The carousel is a very large item to copy
> into its own texture. I'm worried about GPU memory usage and general
> performance with this approach.

testing it soon, nexus 10 battery was so dead this morning

[Andrea Cimitan (cimi)]

> How does this perform on nexus10? The carousel is a very large item to copy
> into its own texture. I'm worried about GPU memory usage and general
> performance with this approach.

It slows down a bit, as expected. I much prefer the visuals with this shader, though.

[Albert Astals Cid (aacid)]

Speaking with Saviq, the concept of highlight seems that will be disappearing soon due to a design change so no need to put more work into this if it's going to vanish

review: Disapprove

Unmerged revisions

532. By Andrea Cimitan on 2014-01-06

added behaviour on opacity

531. By Andrea Cimitan on 2014-01-06

merged trunk

530. By Andrea Cimitan on 2013-11-27

Moved to new API for Carousel signals

529. By Andrea Cimitan on 2013-11-27

Use shader to improve look of Carousel with preview opened

=== modified file 'qml/Components/Carousel.qml'
--- qml/Components/Carousel.qml	2013-11-22 13:53:00 +0000
+++ qml/Components/Carousel.qml	2014-01-06 15:15:42 +0000
@@ -52,6 +52,8 @@
     /// exposes the distance to the next row (only one row in carousel, so it's the topMargins)
     readonly property alias verticalSpacing: listView.verticalMargin
 
+    readonly property bool shaderEnabled: highlightIndex !== -1
+
     /// Emitted when the user clicked on an item
     /// @param index is the index of the clicked item
     /// @param itemY is y of the clicked delegate
@@ -63,277 +65,330 @@
     signal pressAndHold(int index, real itemY)
 
     implicitHeight: listView.tileHeight * selectedItemScaleFactor
-    opacity: listView.highlightIndex === -1 ? 1 : 0.6
-
-    /* Basic idea behind the carousel effect is to move the items of the delegates (compacting /stuffing them).
-       One drawback is, that more delegates have to be drawn than usually. As some items are moved from the
-       invisible to the visible area. Setting the cacheBuffer does not fix this.
-       See https://bugreports.qt-project.org/browse/QTBUG-29173
-       Therefore the ListView has negative left and right anchors margins, and in addition a header
-       and footer item to compensate that.
-
-       The scaling of the items is controlled by the variable continuousIndex, described below. */
-    ListView {
-        id: listView
-
-        property int highlightIndex: -1
-        property real minimumTileWidth: 0
-        property real newContentX: disabledNewContentX
-        property real pathItemCount: referenceWidth / referenceTileWidth
-        property real tileAspectRatio: 1
-
-        /* The positioning and scaling of the items in the carousel is based on the variable
-           'continuousIndex', a continuous real variable between [0, 'carousel.model.count'],
-           roughly representing the index of the item that is prioritised over the others.
-           'continuousIndex' is not linear, but is weighted depending on if it is close
-           to the beginning of the content (beginning phase), in the middle (middle phase)
-           or at the end (end phase).
-           Each tile is scaled and transformed in proportion to the difference between
-           its own index and continuousIndex.
-           To efficiently calculate continuousIndex, we have these values:
-            - 'gapToMiddlePhase' gap in pixels between beginning and middle phase
-            - 'gapToEndPhase' gap in pixels between middle and end phase
-            - 'kGapEnd' constant used to calculate 'continuousIndex' in end phase
-            - 'kMiddleIndex' constant used to calculate 'continuousIndex' in middle phase
-            - 'kXBeginningEnd' constant used to calculate 'continuousIndex' in beginning and end phase
-            - 'realContentWidth' the width of all the delegates only (without header/footer)
-            - 'realContentX' the 'contentX' of the listview ignoring the 'drawBuffer'
-            - 'realWidth' the 'width' of the listview, as it is used as component. */
-
-        readonly property real gapToMiddlePhase: Math.min(realWidth / 2 - tileWidth / 2, (realContentWidth - realWidth) / 2)
-        readonly property real gapToEndPhase: realContentWidth - realWidth - gapToMiddlePhase
-        readonly property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
-        readonly property real kMiddleIndex: (realWidth / 2) / tileWidth - 0.5
-        readonly property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
-        readonly property real maximumItemTranslation: (listView.tileWidth * 3) / listView.scaleFactor
-        readonly property real disabledNewContentX: -carousel.drawBuffer - 1
-        readonly property real realContentWidth: contentWidth - 2 * carousel.drawBuffer
-        readonly property real realContentX: contentX + carousel.drawBuffer
-        readonly property real realPathItemCount: Math.min(realWidth / tileWidth, pathItemCount)
-        readonly property real realWidth: carousel.width
-        readonly property real referenceGapToMiddlePhase: realWidth / 2 - tileWidth / 2
-        readonly property real referencePathItemCount: referenceWidth / referenceTileWidth
-        readonly property real referenceWidth: 848
-        readonly property real referenceTileWidth: 175
-        readonly property real scaleFactor: tileWidth / referenceTileWidth
-        readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
-        readonly property real tileHeight: tileWidth / tileAspectRatio
-        readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
-        readonly property real verticalMargin: (parent.height - tileHeight) / 2
-        readonly property real visibleTilesScaleFactor: realPathItemCount / referencePathItemCount
-
-        anchors {
-            fill: parent
-            topMargin: verticalMargin
-            bottomMargin: verticalMargin
-            // extending the "drawing area"
-            leftMargin: -carousel.drawBuffer
-            rightMargin: -carousel.drawBuffer
-        }
-
-        /* The header and footer help to "extend" the area, the listview draws items.
-           This together with anchors.leftMargin and anchors.rightMargin. */
-        header: Item {
-            width: carousel.drawBuffer
-            height: listView.tileHeight
-        }
-        footer: Item {
-            width: carousel.drawBuffer
-            height: listView.tileHeight
-        }
-
-        boundsBehavior: Flickable.DragOverBounds
-        cacheBuffer: carousel.cacheBuffer
-        flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
-        maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
-        orientation: ListView.Horizontal
-
-        function itemClicked(index, delegateItem) {
-            listView.currentIndex = index
-            var x = CarouselJS.getXFromContinuousIndex(index,
-                                                       realWidth,
-                                                       realContentWidth,
-                                                       tileWidth,
-                                                       gapToMiddlePhase,
-                                                       gapToEndPhase,
-                                                       carousel.drawBuffer)
-
-            if (Math.abs(x - contentX) < 1 && delegateItem !== undefined) {
-                /* We're clicking the selected item and
-                   we're in the neighbourhood of radius 1 pixel from it.
-                   Let's emit the clicked signal. */
-                carousel.clicked(index, delegateItem.y)
-                return
-            }
-
-            stepAnimation.stop()
-            newContentXAnimation.stop()
-
-            newContentX = x
-            newContentXAnimation.start()
-        }
-
-        function itemPressAndHold(index, delegateItem) {
-            var x = CarouselJS.getXFromContinuousIndex(index,
-                                                       realWidth,
-                                                       realContentWidth,
-                                                       tileWidth,
-                                                       gapToMiddlePhase,
-                                                       gapToEndPhase,
-                                                       carousel.drawBuffer);
-
-            if (Math.abs(x - contentX) < 1 && delegateItem !== undefined) {
-                /* We're pressAndHold the selected item and
-                   we're in the neighbourhood of radius 1 pixel from it.
-                   Let's emit the pressAndHold signal. */
-                carousel.pressAndHold(index, delegateItem.y);
-                return;
-            }
-
-            stepAnimation.stop();
-            newContentXAnimation.stop();
-
-            newContentX = x;
-            newContentXAnimation.start();
-        }
-
-        onHighlightIndexChanged: {
-            if (highlightIndex != -1) {
-                itemClicked(highlightIndex)
-            }
-        }
-
-        onMovementStarted: {
-            stepAnimation.stop()
-            newContentXAnimation.stop()
-            newContentX = disabledNewContentX
-        }
-        onMovementEnded: {
-            if (realContentX > 0 && realContentX < realContentWidth - realWidth)
-                stepAnimation.start()
-        }
-
-        SmoothedAnimation {
-            id: stepAnimation
-
-            target: listView
-            property: "contentX"
-            to: CarouselJS.getXFromContinuousIndex(listView.selectedIndex,
-                                                   listView.realWidth,
-                                                   listView.realContentWidth,
-                                                   listView.tileWidth,
-                                                   listView.gapToMiddlePhase,
-                                                   listView.gapToEndPhase,
-                                                   carousel.drawBuffer)
-            duration: 450
-            velocity: 200
-            easing.type: Easing.InOutQuad
-        }
-
-        SequentialAnimation {
-            id: newContentXAnimation
-
-            NumberAnimation {
+
+    Item {
+        id: shaderItem
+        anchors.fill: parent
+
+        /* Basic idea behind the carousel effect is to move the items of the delegates (compacting /stuffing them).
+           One drawback is, that more delegates have to be drawn than usually. As some items are moved from the
+           invisible to the visible area. Setting the cacheBuffer does not fix this.
+           See https://bugreports.qt-project.org/browse/QTBUG-29173
+           Therefore the ListView has negative left and right anchors margins, and in addition a header
+           and footer item to compensate that.
+
+           The scaling of the items is controlled by the variable continuousIndex, described below. */
+        ListView {
+            id: listView
+
+            property int highlightIndex: -1
+            property real minimumTileWidth: 0
+            property real newContentX: disabledNewContentX
+            property real pathItemCount: referenceWidth / referenceTileWidth
+            property real tileAspectRatio: 1
+
+            /* The positioning and scaling of the items in the carousel is based on the variable
+               'continuousIndex', a continuous real variable between [0, 'carousel.model.count'],
+               roughly representing the index of the item that is prioritised over the others.
+               'continuousIndex' is not linear, but is weighted depending on if it is close
+               to the beginning of the content (beginning phase), in the middle (middle phase)
+               or at the end (end phase).
+               Each tile is scaled and transformed in proportion to the difference between
+               its own index and continuousIndex.
+               To efficiently calculate continuousIndex, we have these values:
+                - 'gapToMiddlePhase' gap in pixels between beginning and middle phase
+                - 'gapToEndPhase' gap in pixels between middle and end phase
+                - 'kGapEnd' constant used to calculate 'continuousIndex' in end phase
+                - 'kMiddleIndex' constant used to calculate 'continuousIndex' in middle phase
+                - 'kXBeginningEnd' constant used to calculate 'continuousIndex' in beginning and end phase
+                - 'realContentWidth' the width of all the delegates only (without header/footer)
+                - 'realContentX' the 'contentX' of the listview ignoring the 'drawBuffer'
+                - 'realWidth' the 'width' of the listview, as it is used as component. */
+
+            readonly property real gapToMiddlePhase: Math.min(realWidth / 2 - tileWidth / 2, (realContentWidth - realWidth) / 2)
+            readonly property real gapToEndPhase: realContentWidth - realWidth - gapToMiddlePhase
+            readonly property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
+            readonly property real kMiddleIndex: (realWidth / 2) / tileWidth - 0.5
+            readonly property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
+            readonly property real maximumItemTranslation: (listView.tileWidth * 3) / listView.scaleFactor
+            readonly property real disabledNewContentX: -carousel.drawBuffer - 1
+            readonly property real realContentWidth: contentWidth - 2 * carousel.drawBuffer
+            readonly property real realContentX: contentX + carousel.drawBuffer
+            readonly property real realPathItemCount: Math.min(realWidth / tileWidth, pathItemCount)
+            readonly property real realWidth: carousel.width
+            readonly property real referenceGapToMiddlePhase: realWidth / 2 - tileWidth / 2
+            readonly property real referencePathItemCount: referenceWidth / referenceTileWidth
+            readonly property real referenceWidth: 848
+            readonly property real referenceTileWidth: 175
+            readonly property real scaleFactor: tileWidth / referenceTileWidth
+            readonly property real tileWidth: Math.max(realWidth / pathItemCount, minimumTileWidth)
+            readonly property real tileHeight: tileWidth / tileAspectRatio
+            readonly property real translationXViewFactor: 0.2 * (referenceGapToMiddlePhase / gapToMiddlePhase)
+            readonly property real verticalMargin: (parent.height - tileHeight) / 2
+            readonly property real visibleTilesScaleFactor: realPathItemCount / referencePathItemCount
+
+            anchors {
+                fill: parent
+                topMargin: verticalMargin
+                bottomMargin: verticalMargin
+                // extending the "drawing area"
+                leftMargin: -carousel.drawBuffer
+                rightMargin: -carousel.drawBuffer
+            }
+
+            /* The header and footer help to "extend" the area, the listview draws items.
+               This together with anchors.leftMargin and anchors.rightMargin. */
+            header: Item {
+                width: carousel.drawBuffer
+                height: listView.tileHeight
+            }
+            footer: Item {
+                width: carousel.drawBuffer
+                height: listView.tileHeight
+            }
+
+            boundsBehavior: Flickable.DragOverBounds
+            cacheBuffer: carousel.cacheBuffer
+            flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
+            maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
+            orientation: ListView.Horizontal
+
+            function itemClicked(index, delegateItem) {
+                listView.currentIndex = index
+                var x = CarouselJS.getXFromContinuousIndex(index,
+                                                           realWidth,
+                                                           realContentWidth,
+                                                           tileWidth,
+                                                           gapToMiddlePhase,
+                                                           gapToEndPhase,
+                                                           carousel.drawBuffer)
+
+                if (Math.abs(x - contentX) < 1 && delegateItem !== undefined) {
+                    /* We're clicking the selected item and
+                       we're in the neighbourhood of radius 1 pixel from it.
+                       Let's emit the clicked signal. */
+                    carousel.clicked(index, delegateItem.y)
+                    return
+                }
+
+                stepAnimation.stop()
+                newContentXAnimation.stop()
+
+                newContentX = x
+                newContentXAnimation.start()
+            }
+
+            function itemPressAndHold(index, delegateItem) {
+                var x = CarouselJS.getXFromContinuousIndex(index,
+                                                           realWidth,
+                                                           realContentWidth,
+                                                           tileWidth,
+                                                           gapToMiddlePhase,
+                                                           gapToEndPhase,
+                                                           carousel.drawBuffer);
+
+                if (Math.abs(x - contentX) < 1 && delegateItem !== undefined) {
+                    /* We're pressAndHold the selected item and
+                       we're in the neighbourhood of radius 1 pixel from it.
+                       Let's emit the pressAndHold signal. */
+                    carousel.pressAndHold(index, delegateItem.y);
+                    return;
+                }
+
+                stepAnimation.stop();
+                newContentXAnimation.stop();
+
+                newContentX = x;
+                newContentXAnimation.start();
+            }
+
+            onHighlightIndexChanged: {
+                if (highlightIndex != -1) {
+                    itemClicked(highlightIndex)
+                }
+            }
+
+            onMovementStarted: {
+                stepAnimation.stop()
+                newContentXAnimation.stop()
+                newContentX = disabledNewContentX
+            }
+            onMovementEnded: {
+                if (realContentX > 0 && realContentX < realContentWidth - realWidth)
+                    stepAnimation.start()
+            }
+
+            SmoothedAnimation {
+                id: stepAnimation
+
                 target: listView
                 property: "contentX"
-                from: listView.contentX
-                to: listView.newContentX
-                duration: 300
+                to: CarouselJS.getXFromContinuousIndex(listView.selectedIndex,
+                                                       listView.realWidth,
+                                                       listView.realContentWidth,
+                                                       listView.tileWidth,
+                                                       listView.gapToMiddlePhase,
+                                                       listView.gapToEndPhase,
+                                                       carousel.drawBuffer)
+                duration: 450
+                velocity: 200
                 easing.type: Easing.InOutQuad
             }
-            ScriptAction {
-                script: listView.newContentX = listView.disabledNewContentX
-            }
-        }
-
-        readonly property int selectedIndex: Math.round(continuousIndex)
-        readonly property real continuousIndex: CarouselJS.getContinuousIndex(listView.realContentX,
-                                                                              listView.tileWidth,
-                                                                              listView.gapToMiddlePhase,
-                                                                              listView.gapToEndPhase,
-                                                                              listView.kGapEnd,
-                                                                              listView.kMiddleIndex,
-                                                                              listView.kXBeginningEnd)
-
-        property real viewTranslation: CarouselJS.getViewTranslation(listView.realContentX,
-                                                                     listView.tileWidth,
-                                                                     listView.gapToMiddlePhase,
-                                                                     listView.gapToEndPhase,
-                                                                     listView.translationXViewFactor)
-
-        delegate: Loader {
-            property bool explicitlyScaled: explicitScaleFactor == carousel.selectedItemScaleFactor
-            property real explicitScaleFactor: explicitScale ? carousel.selectedItemScaleFactor : 1.0
-            readonly property bool explicitScale: (!listView.moving ||
-                                                   listView.realContentX <= 0 ||
-                                                   listView.realContentX >= listView.realContentWidth - listView.realWidth) &&
-                                                  listView.newContentX === listView.disabledNewContentX &&
-                                                  index === listView.selectedIndex
-            readonly property real cachedTiles: listView.realPathItemCount + carousel.drawBuffer / listView.tileWidth
-            readonly property real distance: listView.continuousIndex - index
-            readonly property real itemTranslationScale: CarouselJS.getItemScale(0.5,
-                                                                                 (index + 0.5), // good approximation of scale while changing selected item
-                                                                                 listView.count,
-                                                                                 listView.visibleTilesScaleFactor)
-            readonly property real itemScale: CarouselJS.getItemScale(distance,
-                                                                      listView.continuousIndex,
-                                                                      listView.count,
-                                                                      listView.visibleTilesScaleFactor)
-            readonly property real translationX: CarouselJS.getItemTranslation(index,
-                                                                               listView.selectedIndex,
-                                                                               distance,
-                                                                               itemScale,
-                                                                               itemTranslationScale,
-                                                                               listView.maximumItemTranslation)
-
-            readonly property real xTransform: listView.viewTranslation + translationX * listView.scaleFactor
-            readonly property real center: x - listView.contentX + xTransform - drawBuffer + (width/2)
-
-            width: listView.tileWidth
-            height: listView.tileHeight
-            scale: itemScale * explicitScaleFactor
-            sourceComponent: itemComponent
-            z: cachedTiles - Math.abs(index - listView.selectedIndex)
-
-            transform: Translate {
-                x: xTransform
-            }
-
-            Behavior on explicitScaleFactor {
-                SequentialAnimation {
-                    ScriptAction {
-                        script: if (!explicitScale)
-                                    explicitlyScaled = false
-                    }
+
+            SequentialAnimation {
+                id: newContentXAnimation
+
+                NumberAnimation {
+                    target: listView
+                    property: "contentX"
+                    from: listView.contentX
+                    to: listView.newContentX
+                    duration: 300
+                    easing.type: Easing.InOutQuad
+                }
+                ScriptAction {
+                    script: listView.newContentX = listView.disabledNewContentX
+                }
+            }
+
+            readonly property int selectedIndex: Math.round(continuousIndex)
+            readonly property real continuousIndex: CarouselJS.getContinuousIndex(listView.realContentX,
+                                                                                  listView.tileWidth,
+                                                                                  listView.gapToMiddlePhase,
+                                                                                  listView.gapToEndPhase,
+                                                                                  listView.kGapEnd,
+                                                                                  listView.kMiddleIndex,
+                                                                                  listView.kXBeginningEnd)
+
+            property real viewTranslation: CarouselJS.getViewTranslation(listView.realContentX,
+                                                                         listView.tileWidth,
+                                                                         listView.gapToMiddlePhase,
+                                                                         listView.gapToEndPhase,
+                                                                         listView.translationXViewFactor)
+
+            delegate: Loader {
+                property bool explicitlyScaled: explicitScaleFactor == carousel.selectedItemScaleFactor
+                property real explicitScaleFactor: explicitScale ? carousel.selectedItemScaleFactor : 1.0
+                readonly property bool explicitScale: (!listView.moving ||
+                                                       listView.realContentX <= 0 ||
+                                                       listView.realContentX >= listView.realContentWidth - listView.realWidth) &&
+                                                      listView.newContentX === listView.disabledNewContentX &&
+                                                      index === listView.selectedIndex
+                readonly property real cachedTiles: listView.realPathItemCount + carousel.drawBuffer / listView.tileWidth
+                readonly property real distance: listView.continuousIndex - index
+                readonly property real itemTranslationScale: CarouselJS.getItemScale(0.5,
+                                                                                     (index + 0.5), // good approximation of scale while changing selected item
+                                                                                     listView.count,
+                                                                                     listView.visibleTilesScaleFactor)
+                readonly property real itemScale: CarouselJS.getItemScale(distance,
+                                                                          listView.continuousIndex,
+                                                                          listView.count,
+                                                                          listView.visibleTilesScaleFactor)
+                readonly property real translationX: CarouselJS.getItemTranslation(index,
+                                                                                   listView.selectedIndex,
+                                                                                   distance,
+                                                                                   itemScale,
+                                                                                   itemTranslationScale,
+                                                                                   listView.maximumItemTranslation)
+
+                readonly property real xTransform: listView.viewTranslation + translationX * listView.scaleFactor
+                readonly property real center: x - listView.contentX + xTransform - drawBuffer + (width/2)
+
+                width: listView.tileWidth
+                height: listView.tileHeight
+                scale: itemScale * explicitScaleFactor
+                sourceComponent: itemComponent
+                z: cachedTiles - Math.abs(index - listView.selectedIndex)
+                opacity: carousel.shaderEnabled ? (highlightIndex === index ? 1.0 : 0.33) : 1.0
+
+                Behavior on opacity {
                     NumberAnimation {
-                        duration: explicitScaleFactor === 1.0 ? 250 : 150
-                        easing.type: Easing.InOutQuad
-                    }
-                    ScriptAction {
-                        script: if (explicitScale)
-                                    explicitlyScaled = true
-                    }
-                }
-            }
-
-            onLoaded: {
-                item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
-                item.model = Qt.binding(function() { return model; })
-            }
-
-            MouseArea {
-                id: mouseArea
-
-                anchors.fill: parent
-
-                onClicked: {
-                    listView.itemClicked(index, item)
-                }
-
-                onPressAndHold: {
-                    listView.itemPressAndHold(index, item)
-                }
-            }
-        }
+                        duration: UbuntuAnimation.SnapDuration
+                    }
+                }
+
+                transform: Translate {
+                    x: xTransform
+                }
+
+                Behavior on explicitScaleFactor {
+                    SequentialAnimation {
+                        ScriptAction {
+                            script: if (!explicitScale)
+                                        explicitlyScaled = false
+                        }
+                        NumberAnimation {
+                            duration: explicitScaleFactor === 1.0 ? 250 : 150
+                            easing.type: Easing.InOutQuad
+                        }
+                        ScriptAction {
+                            script: if (explicitScale)
+                                        explicitlyScaled = true
+                        }
+                    }
+                }
+
+                onLoaded: {
+                    item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
+                    item.model = Qt.binding(function() { return model; })
+                }
+
+                MouseArea {
+                    id: mouseArea
+
+                    anchors.fill: parent
+
+                    onClicked: {
+                        listView.itemClicked(index, item)
+                    }
+
+                    onPressAndHold: {
+                        listView.itemPressAndHold(index, item)
+                    }
+                }
+            }
+        }
+    }
+
+    ShaderEffectSource {
+        id: shaderSource
+        anchors.centerIn: parent
+        sourceItem: shaderItem
+        visible: carousel.shaderEnabled
+        hideSource: visible
+        width: 1
+        height: 1
+    }
+
+    ShaderEffect {
+        anchors.fill: parent
+        visible: carousel.shaderEnabled
+        opacity: visible ? 0.6 : 1
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 200 // Just like the OpenEffect in GenericScopeView.qml
+            }
+        }
+
+        property var src: shaderSource
+
+        vertexShader: "
+            uniform highp mat4 qt_Matrix;
+            attribute highp vec4 qt_Vertex;
+            attribute highp vec2 qt_MultiTexCoord0;
+            varying highp vec2 coord;
+            void main() {
+                coord = qt_MultiTexCoord0;
+                gl_Position = qt_Matrix * qt_Vertex;
+            }"
+        fragmentShader: "
+            varying highp vec2 coord;
+            uniform sampler2D src;
+            uniform lowp float qt_Opacity;
+            void main() {
+                gl_FragColor = texture2D(src, coord);
+                gl_FragColor.a *= qt_Opacity;
+            }"
     }
 }