some more work on the station qml

data/qml/CoverImage.qml

@@ -20,12 +20,17 @@ Item {
     property double itemBrightness: 1
     property double mirrorBrightness: .5
 
+    // will be emitted when the on hower play button is clicked
+    signal playClicked()
 
     MouseArea {
+        id: mouseArea
         anchors.fill: parent
-        onClicked: print("cover clicked")
-    }
+        hoverEnabled: true
 
+        onClicked: print("cover clicked")
+
+    }
 
     Component {
         id: coverImage
@@ -80,7 +85,6 @@ Item {
     Loader {
         id: mirroredCover
         sourceComponent: coverImage
-        opacity: parent.mirrorOpacity
         anchors.fill: parent
         transform : [
             Rotation {
@@ -101,7 +105,11 @@ Item {
         anchors.rightMargin: -2
         anchors.topMargin: -2
 
-        opacity: 1 - itemBrightness
+        opacity: 1 - itemBrightness + (mouseArea.containsMouse ? .2 : 0)
+
+        Behavior on opacity {
+            NumberAnimation { easing: Easing.Linear; duration: 300 }
+        }
     }
 
     Rectangle {
@@ -119,4 +127,18 @@ Item {
             GradientStop { position: 0.5; color: backgroundColor }
         }
     }
+
+    Image {
+        id: playButton
+        source: "../images/play-rest.png"
+        anchors.centerIn: parent
+//        width:
+//        height: 32
+        visible: mouseArea.containsMouse
+        MouseArea {
+            anchors.fill: parent
+            onClicked: root.playClicked();
+        }
+    }
+
 }

data/qml/StationScene.qml

@@ -9,23 +9,37 @@ Rectangle {
 
     property int coverSize: 230
 
+    onWidthChanged: {
+        print("width changed to", width)
+        coverView.model = dynamicModel
+    }
+
     states: [
         State {
-            name: "configure" //; when: scene.state === "configure"
-            PropertyChanges { target: coverView; anchors.leftMargin: scene.width + scene.coverSize + 20 }
+            name: "configure"
             PropertyChanges { target: styleCloud; anchors.leftMargin: 0 }
+            PropertyChanges { target: configureButton; opacity: 1 }
+        },
+        State {
+            name: "finetune"
+            PropertyChanges { target: fineTuneView; anchors.rightMargin: 0 }
+            PropertyChanges { target: configureButton; opacity: 1 }
         }
     ]
 
     transitions: [
         Transition {
             NumberAnimation {
-                target: coverView
+                target: styleCloud
                 properties: "anchors.leftMargin"; easing.type: Easing.InOutQuad; duration: 500
             }
             NumberAnimation {
-                target: styleCloud
-                properties: "anchors.leftMargin"; easing.type: Easing.InOutQuad; duration: 500
+                target: fineTuneView
+                properties: "anchors.rightMargin"; easing.type: Easing.InOutQuad; duration: 500
+            }
+            NumberAnimation {
+                target: configureButton
+                properties: "opacity"; easing.type: Easing.InOutQuad; duration: 500
             }
         }
     ]
@@ -35,51 +49,88 @@ Rectangle {
         id: coverView
         anchors.fill: parent
 
+        Component.onCompleted: {
+            print("pathview created:", scene.width)
+        }
 
-        preferredHighlightBegin: 0.07 // scene.width / 11000
+        preferredHighlightBegin: 0.1 // scene.width / 11000
         preferredHighlightEnd: preferredHighlightBegin
-        pathItemCount: 4
-        highlightMoveDuration: 500
+        pathItemCount: 5
+        //highlightMoveDuration: 500
 
         model: dynamicModel
         currentIndex: currentlyPlayedIndex
 
+        property int pathStartX: width - scene.coverSize
+        property int pathStartY: height / 2
+
         delegate: CoverImage {
             height: scene.coverSize
             width: scene.coverSize
 
-            scale: PathView.itemScale
-
             artistName: model.artistName
             trackName: model.trackName
             artworkId: index
 
+            scale: PathView.itemScale
             itemBrightness: PathView.itemBrightness
+            opacity: PathView.itemOpacity
             z: x
+
+            onPlayClicked: echonestStation.playItem( index )
         }
 
         path: Path {
-            startX: coverView.width / 2 + 20
-            startY: 155
+            startX: coverView.pathStartX
+            startY: coverView.pathStartY
 
             PathAttribute { name: "itemOpacity"; value: 0 }
             PathAttribute { name: "itemBrightness"; value: 0 }
             PathAttribute { name: "itemScale"; value: 1.5 }
-            PathLine { x: coverView.width / 2; y: 150 }
+            PathLine { x: coverView.pathStartX * 9/10 ; y: coverView.pathStartY * 9/10 }
+            PathPercent { value: .1 }
             PathAttribute { name: "itemOpacity"; value: 1 }
             PathAttribute { name: "itemBrightness"; value: 1 }
             PathAttribute { name: "itemScale"; value: 1.0 }
-            PathLine { x: coverView.width / 2 - 100; y: 180;}
+            PathLine { x: coverView.pathStartX * .5; y: coverView.pathStartY * .7}
+            PathPercent { value: .4 }
             PathAttribute { name: "itemOpacity"; value: 1 }
             PathAttribute { name: "itemBrightness"; value: 1 }
             PathAttribute { name: "itemScale"; value: 0.6 }
-            PathLine { x: 100; y: 100;}
+            PathLine { x: coverView.pathStartX * .25 ; y: coverView.pathStartY * .25 }
+            PathPercent { value: .75 }
             PathAttribute { name: "itemOpacity"; value: 1 }
-            PathAttribute { name: "itemBrighness"; value: 0.4 }
+            PathAttribute { name: "itemBrightness"; value: .5 }
             PathAttribute { name: "itemScale"; value: 0.4 }
+            PathLine { x: 0; y: 0 }
+            PathPercent { value: 1 }
+            PathAttribute { name: "itemOpacity"; value: 1 }
+            PathAttribute { name: "itemBrightness"; value: 0 }
+            PathAttribute { name: "itemScale"; value: 0.2 }
         }
+
+        states: [
+            State {
+                name: "normal"
+                PropertyChanges { target: coverView; anchors.rightMargin: 0 }
+            },
+            State {
+                name: "shrinked"
+                PropertyChanges { target: coverView; anchors.rightMargin: scene.width / 3 }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                NumberAnimation {
+                    target: coverView
+                    properties: "anchors.rightMargin"; easing.type: Easing.InOutQuad; duration: 500
+                }
+            }
+        ]
     }
 
+
     Item {
         id: styleCloud
         anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
@@ -88,7 +139,7 @@ Rectangle {
 
         function randomNumber(min, max) {
             var date = new Date();
-            return Math.floor((max - min) * Math.random(date.getSeconds())) + min
+            return (max - min) * Math.random(date.getSeconds()) + min
         }
 
         Flow {
@@ -96,27 +147,126 @@ Rectangle {
             width: parent.width - 100
             //model: controlModel
             spacing: 3
+
+            Timer {
+                interval: 5000
+                running: false
+                repeat: true
+
+                onTriggered: {
+                    for(var i = 0; i < cloudRepeater.count; i++) {
+                        var item = cloudRepeater.itemAt(i);
+                        if(item.itemScale > 0.6) {
+                            item.itemScale = Math.random();
+                        } else {
+                            item.itemScale = Math.random();
+                        }
+                    }
+                }
+            }
+
             Repeater {
+                id: cloudRepeater
                 model: generator.styles()
 
                 delegate: Item {
-                    width: delegateText.width
+                    id: cloudItem
+                    width: delegateText.width * scale
                     height: 28
+                    property double itemScale: Math.random()
+                    scale: itemScale
                     Text {
                         id: delegateText
                         color: "white"
                         //text: controlModel.controlAt( index ).summary
                         text: modelData
-                        font.pixelSize: styleCloud.randomNumber(11, 28)
+                        font.pixelSize: 28
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.verticalCenterOffset: styleCloud.randomNumber(0, 15)
-                        MouseArea {
-                            anchors.fill: parent
-                            onClicked: echonestStation.setMainControl(modelData);
+                    }
+                    MouseArea {
+                        hoverEnabled: true
+                        anchors.fill: parent
+                        onClicked: echonestStation.setMainControl(modelData);
+
+                        onMousePositionChanged: {
+                            cloudItem.scale = 1;
+                            delegateTimer.restart();
                         }
                     }
+                    Timer {
+                        id: delegateTimer
+                        interval: 3000
+                        repeat: false
+                        onTriggered: cloudItem.scale = cloudItem.itemScale
+                    }
+
+                    Behavior on scale {
+                        NumberAnimation { easing: Easing.Linear; duration: 1000 }
+                    }
                 }
             }
         }
     }
+
+    Item {
+        id: fineTuneView
+        anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
+        anchors.rightMargin: -width
+        width: scene.width / 2
+
+        property color textColor: "white"
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: 30
+            color: "gray"
+            border.width: 2
+            border.color: "white"
+            radius: 20
+        }
+
+        Grid {
+            Text {
+                color: fineTuneView.textColor
+                text: "Name"
+
+            }
+            TextInput {
+                id: stationName
+                //onTextChanged: echonestStation.
+            }
+        }
+    }
+    Rectangle {
+        id: configureButton
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        anchors.verticalCenter: parent.verticalCenter
+        color: "gray"
+        height: 50
+        width: 50
+        radius: 25
+        //opacity: 0
+
+        Text {
+            anchors.centerIn: parent
+            text: "configure"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                print("changing scene state to", scene.state)
+                if( scene.state === "list" ) {
+                    scene.state = "finetune";
+                    coverView.state = "shrinked"
+                } else {
+                    scene.state = "list";
+                    coverView.state = "normal"
+                }
+                print("changed scene state to", scene.state)
+            }
+        }
+    }
 }