ColorOverlay in GridLayout

[beecksche]

Hi,
i want to show some images in a grid layout. To override the color of the images i use the ColorOverlay class.

Item {
    id: item1
    GridLayout {
        anchors.fill: parent
        columns: 2

        Image {
            id: im1
            source: "qrc:/images/im1.png"
            sourceSize.width: 75
            sourceSize.height: 75
            smooth: true
            visible: false
        }

        ColorOverlay {
            anchors.fill: im1
            source: im1
            color: "red"
        }

        Image {
            id: im2
            source: "qrc:/images/im2.png"
            sourceSize.width: 75
            sourceSize.height: 75
            smooth: true
            visible: false
        }

        ColorOverlay {
            anchors.fill: im2
            source: im2
            color: "red"
        }
}

The color of the images is changed but unfortunately they all appear in the upper left corner of the window.

Do i need to change some properties?

Thanks!

[raven-worx]

@beecksche
try it this way (overlay is a child of the image):

Image {
            id: im1
            source: "qrc:/images/im1.png"
            sourceSize.width: 75
            sourceSize.height: 75
            smooth: true
            visible: false

            ColorOverlay {
                 anchors.fill: parent
                 source: parent
                 color: "red"
            }
        }

or wrap the image and the overlay inside a new Item element (like in the example)

[beecksche]

@raven-worx said in ColorOverlay in GridLayout:

@beecksche
try it this way (overlay is a child of the image):

Image {
            id: im1
            source: "qrc:/images/im1.png"
            sourceSize.width: 75
            sourceSize.height: 75
            smooth: true
            visible: false // visible: true !

            ColorOverlay {
                 anchors.fill: parent
                 source: parent
                 color: "red"
            }
        }

I need to change visible: true, so it works perfectly for me! Thanks!

[beecksche]

@raven-worx
Now i recognized the following error:

ShaderEffectSource: 'recursive' must be set to true when rendering recursively.

[raven-worx]

@beecksche
then my suggestion (to put ColorOverlay inside the Image) was wrong i guess

[Julien B]

Hello @beecksche ,

What happens if you but both Image and ColorOverlay in an Ìtem as @raven-worx suggested?

[beecksche]

@raven-worx , @Julien-B

Worked!

Thanks!!

        Item {
            width: image.width
            height: image.height

            Image {
                id: image
                fillMode: Image.PreserveAspectFit
                source: "qrc:/images/image.png"
                sourceSize.width: 50
                sourceSize.height: 50
                smooth: true
                visible: false
            }

            ColorOverlay {
                 color: "red"
                 anchors.fill: image
                 source: image
            }
        }