How to use ColorOverlay on item in layout?

AlexP11223

I have a RowLayout with some items

RowLayout {
    anchors.fill: parent
    anchors.leftMargin: 3

    Image {
        id: icon
        source: imgSource
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
    }

    Text {
        id: caption
        height: parent.height
        fontSizeMode: Text.Fit
        font.pointSize: textSize
        verticalAlignment: Text.AlignVCenter
        text: captionText
        color: "white"
    }
}

and I want to apply ColorOverlay on Image inside this layout:

ColorOverlay {
    id: overlay
    anchors.fill: icon
    source: icon
    color: "#ff0000ff"
}

But if I put ColorOverlay outside of the layout, then I can't use anchors.fill: icon. And if I make it a child

    Image {
        id: icon
        source: imgSource
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true  
        ColorOverlay {
            id: overlay
            anchors.fill: icon
            source: icon
            color: "#ff0000ff"
        }
    }

it seems to work but I get warnings in console ShaderEffectSource: 'recursive' must be set to true when rendering recursively.

AlexP11223

@Yaswanth I would also need x and y, but I tried and the position was a bit wrong, probably because of some margins.

Anyway, I solved it using layers: https://stackoverflow.com/a/52811823/964478

Image {
    source: imgSource
    sourceSize: Qt.size(parent.width, parent.height)
    smooth: true  
    layer {
        enabled: true
        effect: ColorOverlay {
            color: "#ff0000ff"
        }
    }
}

6thC

@AlexP11223 said in How to use ColorOverlay on item in layout?:

ColorOverlay

What about an Item containing both as: https://forum.qt.io/topic/72501/coloroverlay-in-gridlayout/7

Looks like that might work for you. I'd fire up a test if I had a little more time... might get you moving though.

Yaswanth

If you want to access the element in the RowLayout, specify an id for RowLayout and create alias for the Image,

RowLayout {
id : rowLayout
property var imageIcon : icon
    anchors.fill: parent
    anchors.leftMargin: 3

    Image {
        id: icon
        source: imgSource
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
    }
//Some code
}
ColorOverlay {
    id: overlay
    anchors.fill: rowLayout.imageIcon 
    source: rowLayout.imageIcon 
    color: "#ff0000ff"
}

AlexP11223

@Yaswanth it's not about accessing, anchors work only for siblings and parent http://doc.qt.io/qt-5/qtquick-positioning-anchors.html#restrictions (and if I make it a child it works but I get that warning about rendering each time I change color).

Yaswanth

@AlexP11223 If you want to use anchors only to fill, you can specify width & height explicitly for the ColorOverlay . I can not run the above code as I don't have latest Qt version.

AlexP11223

@Yaswanth I would also need x and y, but I tried and the position was a bit wrong, probably because of some margins.

Anyway, I solved it using layers: https://stackoverflow.com/a/52811823/964478

Image {
    source: imgSource
    sourceSize: Qt.size(parent.width, parent.height)
    smooth: true  
    layer {
        enabled: true
        effect: ColorOverlay {
            color: "#ff0000ff"
        }
    }
}