[Interest] QtGraphicalEffects usage questioning

[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 unfortunately 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 use of effect will sadly bypass 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 {

                enabled: true

                effect:   ColorOverlay {

           color: "#80800000"

     }

       }

    }

 }



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 clean/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 so the documented approach would better
figured as an alternative way to do effects.



This second approach still have some issues:



   -  The type of layer property is actually "Component" not "Item" so
   that's mean you can't create alias on your effect properties
   ð I 'm still wondering why the type is Component by the way
   - 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 do you think about this ?

Regards,

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