QML 360° Panorama

Originally posted on QuicKing, the Kingdom of QML Workaround, the blog I kept in 2011 and 2012. Here’s how that kingdom started and ended.

Surprise! A 360° panorama with nothing but a PathView.

Simple workaround

Rectangle {
    id: root
    width: 800
    height: 600
    clip: true

    property Image panorama: Image { source: "imgs/panorama1.png" }
    property int panWidth: panorama.width

    PathView {
        anchors.fill: parent
        model:2
        highlightRangeMode: "NoHighlightRange" // snap false
        flickDeceleration: 10

        delegate: Image{
            source: panorama.source
        }

        path: Path {
            startX: -panWidth/2; startY: root.height/2
            PathLine {x: panWidth + panWidth/2; y:root.height/2 }
        }
    }
}

King of workaround

I couldn’t do exactly what I wanted. Unfortunately PathView has a problem: flicking only works on long drags. So I gave up on making small drags smoother and only added a parallax, which makes the application very sexy.

Rectangle {
    id: root
    width: 800; height: 600
    clip: true

    property Image panorama: Image { source: "imgs/panorama1_frente.png" }
    property int panWidth: panorama.width

    PathView {
        id: pathPano
        anchors.fill: parent
        model:2
        highlightRangeMode: "NoHighlightRange" // snap false
        flickDeceleration: 20

        delegate: Item{
            width: panWidth
            height: panorama.height
            clip: true

            Image{
                source: "imgs/panorama1_bg.png"
                width: panWidth
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: PathView.pos
            }

            Image{
                anchors.horizontalCenter: parent.horizontalCenter
                source: panorama.source
            }

            Item{
                width: parent.width
                height: 50
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: -PathView.pos

                Image{
                    x: 200; y: 100
                    source: "imgs/ballon.png"
                }

                Image{
                    x: 1000; y: 400
                    source: "imgs/boat.png"
                }
            }
        }

        path: Path {
            startX: -panWidth/2; startY: root.height/2
            PathAttribute { name: "pos"; value: 200 }
            PathLine {x: panWidth + panWidth/2; y:root.height/2 }
            PathAttribute { name: "pos"; value: -200 }
        }
    }
}

I had some help from George Tank Tavares, the Queen of QML, hehehehe… I’m kidding, he’s more like a QML Blacksmith.

Ah, in some cases it runs better with -opengl. 🙂

GitHub project

github.com/diegodotta/qml-panorama