[Solved] Image display on PathView in QML

[ad5xj]

I have created a PathView for a list of images to display. It appears similar to the flickable album display in the music player example video.

The problem is that the images have a z-order that is opposite of what I want. I want the largest (current list item) image to be 100% visible and the others behind it. I have tried a number of Image attributes but none seem to make any difference.

Here is a sample of my code:
@
Rectangle {
id: window;
width: 340;
height: 480;

Component {
    id: delegate


    Item {
        id: wrapper;

        scale: PathView.iconScale
        opacity: PathView.iconOpacity
        visible: PathView.onPath

        Column {
            Image {
                anchors.horizontalCenter: captionText.horizontalCenter
                width: 164;
                height: 164;
                source: img_source;
            }  // end image element
            Text {
                id: captionText;

                text: caption;
                font.pointSize: 6;
                color: wrapper.PathView.isCurrentItem ? "red" : "black";
            }  // end text element
        }  // end column element
        MouseArea {
          anchors.fill: parent
          onClicked: delegate.currentIndex = index
       }
    }  // end item element
}  // end component
PathView {
    anchors.fill: parent;
    model: Common.NASAModel{}
    delegate: delegate;

    focus: true;
    Keys.onLeftPressed: decrementCurrentIndex()
    Keys.onRightPressed: incrementCurrentIndex()

    path: Path {
        startX: 150; startY: 220

        PathAttribute { name: "iconScale"; value: 0.1 }
        PathAttribute { name: "iconOpacity"; value: 0.2 }
        PathQuad { x: 180; y: 20; controlX: 340; controlY: 5 }
        PathAttribute { name: "iconScale"; value: 1.0 }
        PathAttribute { name: "iconOpacity"; value: 1.0 }
        PathQuad { x: 280; y: 120; controlX: -100; controlY: -125 }
    } // end path
}  // end pathview

} // end main rectangle
@
The list model is a list of images from the web (via the NASA website) with a text caption for each.
Any idea why the current image is not the top image?

[andre]

Just add something like an iconZorder attribute, and actually set that on your delegate. Currently, you're not actually controlling the z order.

[ad5xj]

I would be glad to do that if I knew what a iconZorder looked like (i.e. syntax, usage, range of values, etc.). Where is the documentation on such a thing? I have searched for a solution in the docs for the Image element and Item elements and have not seen any such attribute. And to what do I assign this iconZorder? Item does not have it. Image does not have it.

I need more information.

[andre]

Do you understand the code that you posted, or did you just copy/paste it and hoped it would be perfect for you needs?

In the code you show, you already have path Attributes called iconScale and iconOpacity. Would it be really hard to add another one called iconZorder, you think? How would that work? Perhaps you can use the others already there as an example?

Then using this value: on line 13 and 14 of your own code, you are using the iconScale and iconOpacity values. Perhaps, just perhaps, you might be able to use a new attribute in much the same way?

Try and see.

[ad5xj]

OK I will ignore the sarcastic patronizing tone for now.

But I do in fact understand that "iconScale" and "iconOpacity" are created by my code. That was not the question. I must assign Z-order to something to change the layering of images on the path. The attribute "iconScale" was assigned to the scale attribute of the Item element, which happens to be a Image with Text. That makes sense. But Neither Item, Image, nor Text has a Z-order attribute to assign a "iconZorder" value to in order to make the current image appear as if it is on top.

To what do I assign my "iconZorder" value?

[ad5xj]

Never mind. I stumbled upon the answer for myself. It turns out that Item element has a "z" attribute that did the trick. Thanks to all.