Shader Effect meets Marquee [SOLVED]

[wickwire]

Hi,

I'm trying to combine shader and marquee effect and having trouble with it.

I started off with a simple project:

@
Rectangle {
id: master
width: 800
height: 480

Image {
 id: bgpic
 source: "images/bg.jpg"
}
                    Rectangle {
                        anchors.centerIn: parent
                        width: 300
                        height: 30
                        color: "transparent"
                        clip: true

                        Text {
                            id: label
                            color: "white"
                            font.pointSize: 24;
                            text: "hello world1 hello world2 hello world3 hello world4 hello world5 hello world6"
                            x: parent.width

                            PropertyAnimation on x { running: true; from: label.x ; to: -label.width; duration: 50000; loops: Animation.Infinite }
                        }
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                Qt.quit();
                            }
                        }
                    }

}
@

This example runs a simple marquee effect: the text rotates inside the shorter rectangle box, using transparency.

Then I tried to use shaders in order to stretch the text box from nil to full height - and that works

But when I try to combine both elements - the shader dropdown effect and the marquee rotating effect - it won't work.

I found out that the marquee effect is obtained mainly through the clip:true property in the rectangle outside the text element, I have tried applying that to my ShaderEffect, or ShaderEffectSource or even just leave the Text/Rectangle element dealing with it, but the shader resulting from those won't add the dropdown stretch effect to the supposedly already running marquee effect.

Do any of you know if what I'm trying is possible with Qt5 and if so, how could I do it? I will try to supply more visual elements to better relay my objective, in case this is just too confusing.

Thanks in advance!

[wickwire]

Ok I managed to solve the issue:

• define the Item element with the Text element inside
• define the ShaderEffectSource pointing to the Item and set hideSource to true so that the actual Item doesn't show
• define the ShaderEffect which uses the ShaderEffectSource (and with it the Text element)
• in the ShaderEffect, set a scrolling animation for the Item/Text element to slide horizontally
  and set the traditional animation for the shader (wobbly edges for the letters)
• encapsulate the ShaderEffect in a rectangle with clip:true, shorter width and transparent color

Result:

the encapsulated rectangle shows sliding text inside, which is being animated with shaders for the wobbly effect.

I managed to get there by using one of the examples:

/Qt5/Qt5.0.0/5.0.0/Src/qtdeclarative/examples/quick/shadereffects

The example shows a grid 3x2 with shader examples and the 1x1 element drags with the mouse to rotate between the Text "Qt" or the images of the Qt Logo and a Smiley Face - the mouse drag and box clipping were the elements to get me there!

@

import QtQuick 2.0
import "content"

Rectangle {
id: root
width: 1280
height: 600

Image {

 anchors.fill: parent
 source: "content/bg.jpg"
}



//! [source]
ShaderEffectSource {
    id: theSource
    sourceItem: theItem

hideSource: true
}
//! [source]

    Item {
        id: theItem
        width: 3000
        height: 160
                Text {
                    width: 3000
                    height: 140
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 120
                    font.family: "Times"
                    color: "blue"
                    text: "1234567890 abcdefghijklmnopqrstuvwxyz ABCDEF"
                }
    }

Rectangle {
id: marquee
clip:true
width: 400
height: 140
anchors.centerIn: parent
color: "transparent"

ShaderEffect {
id: teste
width: 3000
height: 160
property variant source: theSource
property real amplitude: 0.04 * wobbleSlider.value
property real frequency: 20
property real time: 0
NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
PropertyAnimation on x {running: true; loops: Animation.Infinite; from: marquee.width; to: -teste.width; duration: 100000; }
//! [fragment]
fragmentShader:
"uniform lowp float qt_Opacity;" +
"uniform highp float amplitude;" +
"uniform highp float frequency;" +
"uniform highp float time;" +
"uniform sampler2D source;" +
"varying highp vec2 qt_TexCoord0;" +
"void main() {" +
" highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
" gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
"}"
//! [fragment]
Slider {
id: wobbleSlider
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 40
}
}

 }

}
@