Colorizer shader

main.qml

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {

    id: background
    height: 480
    width: 854

    color: "brown"

    Rectangle {
        id: myItem
        anchors.fill: parent
        color: "blue"

        Rectangle {
            height: 100
            width: 100
            anchors.top: parent.top
            color: "red"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Mouse clicked")
                }
            }
        }


        WebView {
            id: webView
            url: "http://www.google.com/"
            anchors.centerIn: parent
            width: 400
            height: 400

        }
        Rectangle {
            height: 100
            width: 100
            anchors.bottom: parent.bottom
            color: "green"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Mouse clicked")
                }
            }
        }

    }

    ShaderEffectSource {
        id: theSource
        sourceItem: myItem
        smooth: true
        live: constantlyRefresh
        hideSource: true
    }

    ShaderEffect {
        id: shaderTest
        width: myItem.width
        height: myItem.height
        property variant source: theSource
        property real fade: 1
        fragmentShader: "
        uniform sampler2D source;
        uniform lowp float qt_Opacity;
        uniform highp float fade;
        varying highp vec2 qt_TexCoord0;
        void main() {
            lowp vec4 c = texture2D(source, qt_TexCoord0);
            lowp float v = 0.3 * c.r + 0.11 * c.b + 0.59 * c.g;
            lowp vec4 gray = vec4(v, v, v, c.a);
            gl_FragColor = (fade * gray + (1.0 - fade) * c) * qt_Opacity;
        }"
    }

    SequentialAnimation{

        id: anim
        loops: Animation.Infinite

        NumberAnimation {
            target: shaderTest
            property: "fade"
            to: 1.0
            duration: 1000
        }
        NumberAnimation {
            target: shaderTest
            property: "fade"
            to: 0.0
            duration: 1000
        }
    }

    Component.onCompleted: {
        anim.start()
    }
}