Introduce Procession View

qml/basic/Basic.qml

@@ -6,6 +6,10 @@ import ".."
 View {
     id: root
 
+    Component.onCompleted: {
+        globalVars.globalDeathTimer = true
+    }
+
     Settings {
         id: basicSettings
         category: "Basic"

qml/cascade/Cascade.qml

@@ -34,11 +34,7 @@ Item {
         property bool paused: false
         property real columnRatio: globalSettings.useGoldenRatio ? globalVars.goldenRatio : globalSettings.lessGoldenRatio
         property real pace: 1.0/30.0
-        property real columnWidth: root.width*goldenBeast(globalSettings.columnCount)
-
-        function goldenBeast(col) {
-            return (1 - d.columnRatio)/(1 - Math.pow(d.columnRatio, col))
-        }
+        property real columnWidth: root.width*globalUtil.columnWidthRatio(d.columnRatio, globalSettings.columnCount)
     }
 
     Repeater {
@@ -53,7 +49,7 @@ Item {
             id: column
 
             property int stackHeight: 0
-            property int xOffset: d.columnWidth/d.goldenBeast(index)
+            property int xOffset: d.columnWidth/globalUtil.columnWidthRatio(d.columnRatio, index)
             property var pictureArray: []
             property var pictureQueue: []
             property bool full: {

qml/common/ArtImage.qml

@@ -11,7 +11,7 @@ Rectangle {
     color: globalSettings.randomTapestryColour ? Qt.rgba(Math.random(255), Math.random(255), Math.random(255), 1.0) : "black"
 
     height: Math.ceil(width/imageModel.data(modelIndex, PictureModel.RatioRole))
-    width: parent.width
+    width: parent ? parent.width : 0
 
     Image {
         id: image

qml/common/View.qml

@@ -8,15 +8,11 @@ Item {
         ArtImage {}
     }
 
-    function reset() {
-        columnArray = []
-    }
-
     anchors.fill: parent
 
     Timer {
         id: globalDeathTimer
-        running: globalSettings.commonFeed && globalUtil.primed
+        running: globalVars.globalDeathTimer && globalSettings.commonFeed && globalUtil.primed
         repeat: true
         interval: globalUtil.adjustedInterval
         onTriggered: columnArray[globalUtil.columnSelection()].shift()

qml/main.qml

@@ -10,8 +10,7 @@ Window {
     height: 768
 
     onWidthChanged: {
-        loader.source = ""
-        loader.source = globalSettings.view.toLowerCase() + "/" + globalSettings.view + ".qml"
+        globalUtil.reset()
     }
 
     PictureModel {
@@ -20,28 +19,17 @@ Window {
 
     QtObject {
         id: globalVars
-        property real goldenRatio: 1.61803398875
-        property real imageWidthOverride: -1
-    }
-
-    QtObject {
-        id: d
-        property int primedColumns: 0
-        property string timeString
-        property string day
-        property string month
+        property real goldenRatio
+        property real imageWidthOverride
+        property bool globalDeathTimer
 
-        function timeChanged() {
-            var date = new Date;
-            timeString = Qt.formatDateTime(date, "hh:mm")
-            day = Qt.formatDateTime(date, "dd")
-            month = Qt.formatDateTime(date, "MM")
+        function reset() {
+            goldenRatio = 1.61803398875
+            imageWidthOverride = -1
+            globalDeathTimer = false
         }
 
-        property variant timeTimer: Timer {
-            interval: 1000; running: true; repeat: true;
-            onTriggered: d.timeChanged()
-        }
+        Component.onCompleted: reset()
     }
 
     QtObject {
@@ -57,8 +45,12 @@ Window {
         }
 
         function reset() {
-            itemCount = currentColumn = d.primedColumns = 0
-            loader.item.reset()
+            if (d.currentViewFilename) {
+                globalVars.reset()
+                loader.source = ""
+                loader.source = d.currentViewFilename
+                itemCount = currentColumn = d.primedColumns = 0
+            }
         }
 
         function columnSelection() {
@@ -70,6 +62,44 @@ Window {
                 return Math.floor(Math.random()*globalSettings.columnCount)
             }
         }
+
+        function columnWidthRatio(ratio, col) {
+            return (1 - ratio)/(1 - Math.pow(ratio, col))
+        }
+    }
+
+    QtObject {
+        id: d
+        property int primedColumns: 0
+        property string timeString
+        property string day
+        property string month
+        property string currentViewFilename
+        property string overrideViewFilename: "Procession"
+
+        function setView(view) {
+            d.currentViewFilename = deriveViewPath(overrideViewFilename.length ? overrideViewFilename : view)
+        }
+
+        function deriveViewPath(view) {
+            return view.toLowerCase() + "/" + view + ".qml"
+        }
+
+        function timeChanged() {
+            var date = new Date;
+            timeString = Qt.formatDateTime(date, "hh:mm")
+            day = Qt.formatDateTime(date, "dd")
+            month = Qt.formatDateTime(date, "MM")
+        }
+
+        property variant timeTimer: Timer {
+            interval: 1000; running: true; repeat: true;
+            onTriggered: d.timeChanged()
+        }
+
+        onCurrentViewFilenameChanged: {
+            globalUtil.reset()
+        }
     }
 
     Settings {
@@ -98,7 +128,9 @@ Window {
         property real lessGoldenRatio: 1.25
 
         onColumnCountChanged: globalUtil.reset()
-        Component.onCompleted: loader.source = globalSettings.view.toLowerCase() + "/" + globalSettings.view + ".qml"
+        Component.onCompleted: {
+            d.setView(view)
+        }
     }
 
     Rectangle {
@@ -164,26 +196,26 @@ Window {
         }
     }
 
-    Rectangle {
+    Item {
         id: toplevelhandler
         focus: true
-        Keys.onLeftPressed: globalSettings.columnCount = Math.max(globalSettings.columnCount-1,1)
-        Keys.onRightPressed: globalSettings.columnCount++
-        Keys.onEscapePressed: Qt.quit()
-    }
-
-    Rectangle {
-        z: 1
-        visible: imageModel.rowCount > 0
-        color: "red"
-
-        width: childrenRect.width
-        height: childrenRect.height
-        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
-
-        Text {
-            font.pointSize: 40
-            text: "No images found/provided"
+        Keys.onPressed: {
+            switch(event.key) {
+            case Qt.Key_Left:
+                globalSettings.columnCount = Math.max(globalSettings.columnCount - 1, 1);
+                break;
+            case Qt.Key_Right:
+                globalSettings.columnCount++;
+                break;
+            case Qt.Key_Escape:
+                Qt.quit();
+                break;
+            case Qt.Key_F10:
+                globalSettings.showViewItemCount = !globalSettings.showViewItemCount;
+                break;
+            default:
+                console.log('Key not handled')
+            }
         }
     }
 

qml/procession/Procession.qml

@@ -0,0 +1,109 @@
+import QtQuick 2.5
+import Qt.labs.settings 1.0
+
+import ".."
+
+View {
+    id: root
+
+    property var pictureDelegate: Component {
+        ProcessionImage {}
+    }
+
+    QtObject {
+        id: d
+        property bool initialAcceleration: true
+        property int count: 0
+        property real velocity: 0
+        property int imageBuffer: Math.sqrt(globalSettings.columnCount) + 1
+        property real columnRatio: globalSettings.useGoldenRatio ? globalVars.goldenRatio : globalSettings.lessGoldenRatio
+        property real columnWidth: root.width*globalUtil.columnWidthRatio(d.columnRatio, globalSettings.columnCount)
+
+        function animationStep() {
+            columnArray.forEach(function(column) { column.animationStep(); })
+        }
+    }
+
+    Component {
+        id: columnComponent
+
+        Item {
+            id: column
+
+            property int columnIndex: index
+            property var imageArray: []
+            property var imageQueue: []
+
+            function receptive() {
+                return imageQueue.length < d.imageBuffer
+            }
+
+            function addImage(image) {
+                image.parent = column
+                image.y = - image.height
+                imageQueue.push(image)
+            }
+
+            function animationStep() {
+                if (d.initialAcceleration && (++d.count % 10 === 0)) {
+                    d.count = 0
+                    d.velocity += 0.1
+                }
+
+                if (!imageArray.length || imageArray[imageArray.length - 1].y > -1) {
+                    if (imageQueue.length) {
+                        imageArray.push(imageQueue.pop())
+                    } else if (columnIndex === 0) {
+                        globalUtil.itemCount++
+                        addImage(pictureDelegate.createObject())
+                        imageArray.push(imageQueue.pop())
+                    }
+                }
+
+                imageArray.forEach(function(image) {
+                    image.y = image.y + d.velocity
+                    if (image.y > root.height) {
+                        imageArray.shift()
+                        if (columnIndex === (globalSettings.columnCount - 1)) {
+                            if (image.primed) {
+                                image.destroy()
+                                globalUtil.itemCount--
+                            } else {
+                                d.initialAcceleration = false
+                                d.velocity = 1
+                                image.primed = true
+                                column.addImage(image)
+                            }
+                        } else {
+                            var nextColumn = columnArray[columnIndex+1]
+                            if (nextColumn.receptive())
+                                nextColumn.addImage(image)
+                            else
+                                column.addImage(image)
+                        }
+                    }
+                })
+            }
+
+            Component.onCompleted: columnArray.push(this)
+
+            x: d.columnWidth/globalUtil.columnWidthRatio(d.columnRatio, index)
+            width: {
+                var colWidth = d.columnWidth*Math.pow(d.columnRatio, index);
+                (index === (globalSettings.columnCount - 1)) && (globalVars.imageWidthOverride = colWidth)
+                return colWidth
+            }
+            anchors { top: parent.top; bottom: parent.bottom }
+        }
+    }
+
+    Timer {
+        repeat: true
+        running: true
+        interval: 100/6
+        onTriggered: d.animationStep()
+    }
+
+    Keys.onUpPressed: globalSettings.interval++
+    Keys.onDownPressed: globalSettings.interval = Math.max(1, globalSettings.interval - 1)
+}

qml/procession/ProcessionImage.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.6
+
+import ".."
+
+ArtImage {
+    property bool primed: false
+}

qml/qml.qrc

@@ -13,6 +13,9 @@
         <file>cascade/CascadeDelegate.qml</file>
         <file>conveyor/Conveyor.qml</file>
         <file>basic/Basic.qml</file>
+        <file>reel/Reel.qml</file>
+        <file>procession/Procession.qml</file>
+        <file>procession/ProcessionImage.qml</file>
         <file>effects/Effect.qml</file>
         <file>effects/Billboard.qml</file>
         <file>effects/Emboss.qml</file>