listview + shader

**kadet.89** · 30th July 2013, 18:02

I need to merge two programs from qt examples
1) expandingdelegates (listview example)
2) QML + OpenGL shader program

Each cell of listview must contain a shader program:
951af324cd56.jpg

List model:

Qt Code:

Switch view

ListModel {
    ListElement {
        title: "Pancakes"
        picture: "content/pics/pancakes.jpg"
        ingredients: "<html><ul><li> 1 cup (150g) self-raising flour<li> 1 tbs caster sugar<li> 3/4 cup (185ml) milk<li> 1 egg</ul></html>"
        method: "<html><ol><li> Sift flour and sugar together into a bowl. Add a pinch of salt.</ol></html>"
    }
    ListElement {
        title: "Fruit Salad"
        picture: "content/pics/fruit-salad.jpg"
        ingredients: "* Seasonal Fruit"
        method: "* Chop fruit and place in a bowl."
    }
    ListElement {
	...
    }
}

ListModel {
    ListElement {
        title: "Pancakes"
        picture: "content/pics/pancakes.jpg"
        ingredients: "<html><ul><li> 1 cup (150g) self-raising flour<li> 1 tbs caster sugar<li> 3/4 cup (185ml) milk<li> 1 egg</ul></html>"
        method: "<html><ol><li> Sift flour and sugar together into a bowl. Add a pinch of salt.</ol></html>"
    }
    ListElement {
        title: "Fruit Salad"
        picture: "content/pics/fruit-salad.jpg"
        ingredients: "* Seasonal Fruit"
        method: "* Chop fruit and place in a bowl."
    }
    ListElement {
	...
    }
}

To copy to clipboard, switch view to plain text mode

shader program:

Qt Code:

Switch view

Squircle {
                SequentialAnimation on t {
                    NumberAnimation { to: 1; duration: 2500; easing.type: Easing.InQuad }
                    NumberAnimation { to: 0; duration: 2500; easing.type: Easing.OutQuad }
                    loops: Animation.Infinite
                    running: true
                }
            }

Squircle {
                SequentialAnimation on t {
                    NumberAnimation { to: 1; duration: 2500; easing.type: Easing.InQuad }
                    NumberAnimation { to: 0; duration: 2500; easing.type: Easing.OutQuad }
                    loops: Animation.Infinite
                    running: true
                }
            }

To copy to clipboard, switch view to plain text mode

When I add Squircle, it always appears in the background of the program

**wysota** · 30th July 2013, 18:12

Originally Posted by kadet.89

When I add Squircle, it always appears in the background of the program

That's the whole point of the example. Instead, what you want to use is something called ShaderEffect.

**kadet.89** · 30th July 2013, 18:26

But I create the texture for the shader program in QGLWidget. How can I pass the coordinates of the polygon and texture in ShaderEffect ? Or how can I bind ShaderEffect in QGLWidget as QGLShaderProgram?

**wysota** · 30th July 2013, 18:29

If you have a texture then just use Image as your element. There is no need for a shader effect then. However I would say that's a very odd use-case to create a texture in QGLWidget and then use it in QtQuick scene. Why don't you create the texture directly in the scene (e.g. using an FBO).

**kadet.89** · 31st July 2013, 17:56

Qt Code:

Switch view

ListModel {
 
    ListElement {
    }
 
 
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
}

ListModel {

    ListElement {
    }


    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
    ListElement {}
}

To copy to clipboard, switch view to plain text mode

Qt Code:

Switch view

Rectangle {
    id: page
    width: 400; height: 70*9
    color: "black"
 
    property color col: "lightsteelblue"
    gradient: Gradient {
        GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
        GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") }
        GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") }
        GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
    }
 
 
    function saturate(x) {
        return Math.min(Math.max(x, 0), 1)
    }
 
    function sliderToColor(x) {
        return Qt.rgba(saturate(Math.max(2 - 6 * x, 6 * x - 4)),
                        saturate(Math.min(6 * x, 4 - 6 * x)),
                        saturate(Math.min(6 * x - 2, 6 - 6 * x)))
    }
 
 
 
    Component {
        id: recipeDelegate
 
        Item {
            id: recipe
            property string cc: "green"
 
            property real detailsOpacity : 0
            width: listView.width
            height: 70
 
            MouseArea {
                anchors.fill: parent
                onClicked: recipe.state = 'Details';
            }
 
            ShaderEffectSource {
                id: theSource
                sourceItem: theItem
                hideSource: true
                Image {
                    id: theItem
                    width: 311
                    height: 65
                    source: "content/img.png"
                }
            }
            ShaderEffect {
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                property variant source: theSource
                fragmentShader:
                    "uniform sampler2D source;" +
                    "varying highp vec2 qt_TexCoord0;" +
                    "void main() {" +
                    "    gl_FragColor = texture2D(source, qt_TexCoord0);" +
                    "    gl_FragColor.r = 0.5;" +
                    "}"
            }
            Rectangle {
                id: background
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                color: "#00000000"
                border.color: "orange"
                radius: 5
            }
 
 
            // A button to close the detailed view, i.e. set the state back to default ('').
            TextButton {
                y: 10
                anchors { right: background.right; rightMargin: 10 }
                opacity: recipe.detailsOpacity
                text: "Close"
 
                onClicked: recipe.state = '';
            }
 
            states: State {
                name: "Details"
 
                PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
                PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view
 
                // Move the list so that this item is at the top.
                PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
                PropertyChanges { target: recipe.ListView.view; }
 
                // Disallow flicking while we're in detailed view
                PropertyChanges { target: recipe.ListView.view; interactive: false }
            }
 
            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }
        }
    }
    // The actual list
    ListView {
        id: listView
        anchors.fill: parent
        model: RecipesModel {}
        delegate: recipeDelegate
    }
}

Rectangle {
    id: page
    width: 400; height: 70*9
    color: "black"

    property color col: "lightsteelblue"
    gradient: Gradient {
        GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
        GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") }
        GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") }
        GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
    }


    function saturate(x) {
        return Math.min(Math.max(x, 0), 1)
    }

    function sliderToColor(x) {
        return Qt.rgba(saturate(Math.max(2 - 6 * x, 6 * x - 4)),
                        saturate(Math.min(6 * x, 4 - 6 * x)),
                        saturate(Math.min(6 * x - 2, 6 - 6 * x)))
    }



    Component {
        id: recipeDelegate

        Item {
            id: recipe
            property string cc: "green"

            property real detailsOpacity : 0
            width: listView.width
            height: 70

            MouseArea {
                anchors.fill: parent
                onClicked: recipe.state = 'Details';
            }

            ShaderEffectSource {
                id: theSource
                sourceItem: theItem
                hideSource: true
                Image {
                    id: theItem
                    width: 311
                    height: 65
                    source: "content/img.png"
                }
            }
            ShaderEffect {
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                property variant source: theSource
                fragmentShader:
                    "uniform sampler2D source;" +
                    "varying highp vec2 qt_TexCoord0;" +
                    "void main() {" +
                    "    gl_FragColor = texture2D(source, qt_TexCoord0);" +
                    "    gl_FragColor.r = 0.5;" +
                    "}"
            }
            Rectangle {
                id: background
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                color: "#00000000"
                border.color: "orange"
                radius: 5
            }


            // A button to close the detailed view, i.e. set the state back to default ('').
            TextButton {
                y: 10
                anchors { right: background.right; rightMargin: 10 }
                opacity: recipe.detailsOpacity
                text: "Close"

                onClicked: recipe.state = '';
            }

            states: State {
                name: "Details"

                PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
                PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view

                // Move the list so that this item is at the top.
                PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
                PropertyChanges { target: recipe.ListView.view; }

                // Disallow flicking while we're in detailed view
                PropertyChanges { target: recipe.ListView.view; interactive: false }
            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }
        }
    }
    // The actual list
    ListView {
        id: listView
        anchors.fill: parent
        model: RecipesModel {}
        delegate: recipeDelegate
    }
}

To copy to clipboard, switch view to plain text mode

I have 9 different ShaderEffects, but I can only add one to all cells (code above). How can I assign each cell individual ShaderEffect?

**wysota** · 31st July 2013, 18:51

There are many solutions... For example you could use VisualItemModel.

Thread: listview + shader

Thread Tools

Search Thread

Display

listview + shader

Re: listview + shader

Re: listview + shader

Re: listview + shader

Re: listview + shader

Re: listview + shader

Similar Threads

QGLShader::link: "Fragment shader(s) linked, vertex shader(s) linked.

QPainter and Shader

Geometry shader with QT4.7

Fragment shader with 2d

Node Shader Editor

Bookmarks

Bookmarks

Posting Permissions