endless listview

Bozzo

Hi, I need to create a endless images slideshow with qml

Every image fill the entire screen, and I would like that when I reach the last image the path restart from the first.

Every images is 800x600

My code is:

import QtQuick 2.0

PathView
{
id: pathView
width: 800
height: 600

model: ListModel
{
  ListElement
  {
    name: "001.png"
  }
  ListElement
  {
    name: "002.png"
  }
  ListElement
  {
    name: "003.png"
  }

}

delegate: Image {
  width: pathView.width
  height: pathView.height
  source: "file:///home/user/Images/" + name
}
path: Path {
    startX: 0; startY: pathView.height/2
    PathLine { x: pathView.width*count; y: pathView.height/2}
}

}

The problem is how the images are showed, they start in the middle of the screen

mzimmers

@Bozzo I don't understand why you're using PathView. If you just want a slideshow, a SwipeView should work. See if this page does what you want.

GrecKo

@mzimmers so it can loop from the end to the start

Markkyboy

this should sort it;

PathView {
    //..
    preferredHighlightBegin : 0.5
    preferredHighlightEnd : 0.5
    //..
}

Bozzo

@Markkyboy thanks, but now when I scroll the next image appears only when I reach the middle of the screen

Bozzo

@mzimmers Is possbile to have a circular swipe?

mzimmers

@Bozzo it doesn't appear so. I was thinking you could set a timer that updates the index every so often. This would work, but the animation for going from N back to 1 would look different than going from 1 to 2, etc.

lemons

@Bozzo

I would go with a very simple approach.
Use a ListView and duplicate the first and last entry for a loop simulation.
Then handle the repositioning of the view once the user reaches the duplicated entries:

Window {
    id: app
    width: 640
    height: 480
    visible: true

    ListView {
        id: listView
        anchors.fill: parent
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.StrictlyEnforceRange
        model: ListModel {
            id: listModel
            ListElement {
                color: "red"
                name: "First"
            }
            ListElement {
                color: "purple"
                name: "2"
            }
            ListElement {
                color: "blue"
                name: "3"
            }
            ListElement {
                color: "yellow"
                name: "4"
            }
            ListElement {
                color: "green"
                name: "Last"
            }
        }
        delegate: Rectangle {
            width: listView.width
            height: listView.height
            color: model.color

            Text {
                anchors.centerIn: parent
                font.pointSize: 42
                text: model.name
            }
        }

        Component.onCompleted: {
            // Prepend last element for simulatated backwards loop
            listModel.insert(0, listModel.get(listModel.count - 1))
            // Append first element for simulated forward loop
            listModel.append(listModel.get(1))
        }

        onContentXChanged: {
            // Handle loop simulation by moving view from the
            // duplicated entries to the original entries
            if (listView.contentX >= listView.contentWidth - listView.width) {
                // Move to position of the original first entry
                positionViewAtIndex(1, ListView.Beginning)
            } else if (listView.contentX <= 0) {
                // Move to position of the original last entry
                positionViewAtIndex(model.count - 2, ListView.End)
            }
        }
    }
}

Markkyboy

@Bozzo adjust the numbers, try 0.0 and 1.0 respectively. I use the same thing to centre a scrolling grid.

You can also use "incrementCurrentIndex" on a timer to automate the flow, or "decreaseCurrentIndex". I'm not home right now, typing is awkward. I'll mock something up later and post it here. I use PathView in many personal projects, it's very flexible.

Bozzo

This post is deleted!

Markkyboy

@Bozzo - my bad, I was a bit vague with my idea.

try this;

    PathView {
        id: pathView
        anchors.fill: parent
        path: Path {
            startX: 0
            startY: pathView.height/2
            PathLine {
                x: pathView.width
                y: pathView.height/2
            }
        }
        pathItemCount: 1 // show only one item on path
        preferredHighlightBegin: 0.5 // helps centre image
        preferredHighlightEnd: 0.5 // helps centre image

        model: ListModel {
            ListElement { name: "red.png" }
            ListElement { name: "green.png" }
            ListElement { name: "blue.png" }
        }

        delegate: Image {
            id: wrapper
            width: 800
            height: 600
            source: "../images/" + name // change to your image path

            visible: PathView.onPath

            Text {
                text:  index+1 + " " + name
                color: "white"
                font.pixelSize: 100
                anchors.centerIn: parent
            }
        }
    }

here's a nice example of the flexibility of PathView; https://www.qt.io/product/qt6/qml-book/ch07-modelview-advanced - I've used this a lot and currently use it as a remote control with 8 buttons for my home automation.