CODEWITHSUNDEEP
qtqmlqt5qtquick2
uldall
uldall

Reputation: 2558

CPU usage increases when switching images

I have created a QML component which simulates an "image slider" which displays different images indefinitely.

import QtQuick 2.3

Item {
    id: root

    // Start auto rotating items
    Timer {
        interval: 500; running: true; repeat: true
        onTriggered:{
            itemModel.append(itemModel.get(listView.currentIndex))
            itemModel.remove(listView.currentIndex)
        }
    }

    ListView {
        id: listView

        anchors.fill: parent

        interactive: false

        model: itemModel
        delegate:
            Image {
                id: bg
                width: listView.width
                height: listView.height
                source: bgSource

                asynchronous: true
                cache: false
            }
    }

    ListModel {
        id: itemModel
        ListElement {
            bgSource: "ui_elements/images/slideimage01.png"
        }
        ListElement {
            bgSource: "ui_elements/images/slideimage02.png"
        }
        ListElement {
            bgSource: "ui_elements/images/slideimage03.png"
        }
    }
}

Unfortunately the CPU usage keeps increasing over time until the application halts. If I print the "count" variable of itemModel it stays at 3 as expected.

I run the application like this: qmlscene SlideImageTest.qml.

Qt version: 5.3.2

The three images I use can be found here:

enter image description here

enter image description here

enter image description here

Question

Why does the CPU usage increase?

Upvotes: 3

Views: 265

Answers (1)

jturcotte
jturcotte

Reputation: 1273

A quick profiling shows that most of the CPU cycles are spent in itemModel.get, trying to convert the internal model structure into a JavaScript object that you would right after move back to the model.

Overall modifying the model is also going to involve QtQuick Items creation and removal that don't seem necessary in this case.

A more efficient way to solve this would be to get the ListView to scroll to the next image instead of altering the model at the position currently highlighted in the ListView:

Timer {
    onTriggered:{
        listView.incrementCurrentIndex()
    }
}

ListView {
    id: listView
    keyNavigationWraps: true
    highlightMoveDuration: 0
    ...
}

If you really need to keep the model modification way, a C++ model would probably avoid the costly conversion to JavaScript.

Upvotes: 3

Related Questions