[Interest] What about a better recommended way to apply effects with QtGraphicalEffects module ?

[Christopher Courtois]

I've recently started to use QtGraphicalEffects module and the effect set
is really nice!

Howerver I think the approach to apply an effect on a qml item is somewhat
cumbersome.



The docs give an example where we need to create an effect as a neighbour
of the original item :



Item {

    width: 300

    height: 300



    Image {

        id: bug

        source: "images/butterfly.png"

        sourceSize: Qt.size(parent.width, parent.height)

        smooth: true

        visible: false

    }



    ColorOverlay {

        anchors.fill: bug

        source: bug

        color: "#80800000"

    }

}



In this case 5 steps are needed to apply an effect:

1-      Create a neighbour Effect element (ColorOverlay here)

2-      Set orginal item as the effect source

3-      Set the effect size (fill original item)

4-      Specificy effect specific properties (color here)

5-      Hide the original item



It actually feels cumbersome and not really natural for me to apply an
effect this way.

But worse than that it breaks two things : hierarchy and visibility logic.

Indeed if you want to apply effects on existing qml code you will need to
rewrite you code because this implies hierarchy changes.

If you use positioners or layouts elements it is a REAL PAIN since you need
to create wrappers for the original item and effect otherwise you will have
"holes" in your layout since those are 2 separates items.

Lastly if you have some logic that takes care of your original item
visibly, the effect will simply ignore it since it renders even invisible
items.



For all those reasons I would really appreciate a better API to apply
effect on on existing code without messing with hiearchy and logic.

I then looked in the QtQuick Item API and found the "layer" attribute which
seems to fill this purpose.



So here the same effect example using the layer property :



Item {

    width: 300

    height: 300



    Image {

        id: bug

        source: "images/butterfly.png"

        sourceSize: Qt.size(parent.width, parent.height)

        smooth: true

        layer {

                effect:   ColorOverlay {

                color: "#80800000"

}

                enabled: true

       }

    }

 }



Here are the needed steps  with this approach:



1-      Set an Effect element (ColorOverlay here) as a value for the item
layer property

2-      Enable the layering with (layer.enabled : true)   => I wonder why it
defaults at "false"

3-      Specificy effect specific properties (color here)



I think this second approach is way more more cleaner/simple/ and
compatible with existing code than the first one so I'm wondering why this
is not the "recommended" way to use effects in documentation.



I'm not saying that the first approach  is useless since in some cases you
will need to have both the original item and the effect (e.g. mirror
effect) displayed,

But in most case for the effects in QtGraphicalEffects the effect is meant
to replace the original item.



This second approach still have some issue :

-          The type of layer property is actually "Component" not "Item" so
that's mean you can't create alias on your effect properties

-          Even is the code doesn't mean it, the engine seems to changes
the hierarchy to render the effect => it creates a neighbour item effect
under the hood

ð  I created a bug report about this :
https://bugreports.qt-project.org/browse/QTBUG-37574

What is your feeling about this ?

Regards,

Christopher
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20140317/1f18ba71/attachment.html>