From 64d6fc79d49ec87dcd5c1311fe3e70533ace394f Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Wed, 18 Apr 2012 18:07:13 +1000 Subject: Improve example documentation Add more detail and snippets to the examples for shadereffects and positioners. Change-Id: I62a257289cbfb6c53ecc092ac898d923f0058248 Reviewed-by: Yann Bodson --- .../positioners/positioners-attachedproperties.qml | 2 ++ .../quick/positioners/positioners-transitions.qml | 4 ++++ examples/quick/positioners/positioners.qml | 7 ++++++ examples/quick/shadereffects/shadereffects.qml | 25 +++++++++++++++++++++- 4 files changed, 37 insertions(+), 1 deletion(-) (limited to 'examples') diff --git a/examples/quick/positioners/positioners-attachedproperties.qml b/examples/quick/positioners/positioners-attachedproperties.qml index af1124368d..4b49165a84 100644 --- a/examples/quick/positioners/positioners-attachedproperties.qml +++ b/examples/quick/positioners/positioners-attachedproperties.qml @@ -48,6 +48,7 @@ Rectangle { Column { id: column + //! [0] Rectangle { id: red color: "red" @@ -69,6 +70,7 @@ Rectangle { onClicked: column.showInfo(red.Positioner) } } + //! [0] Rectangle { id: green diff --git a/examples/quick/positioners/positioners-transitions.qml b/examples/quick/positioners/positioners-transitions.qml index f1b61c1740..e573c94343 100644 --- a/examples/quick/positioners/positioners-transitions.qml +++ b/examples/quick/positioners/positioners-transitions.qml @@ -191,13 +191,17 @@ Rectangle { id: layout4 x: 120; y: 160; width: 150 + //! [move] move: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } } + //! [move] + //! [add] add: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } } + //! [add] Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } diff --git a/examples/quick/positioners/positioners.qml b/examples/quick/positioners/positioners.qml index 373fa28cae..34caea327c 100644 --- a/examples/quick/positioners/positioners.qml +++ b/examples/quick/positioners/positioners.qml @@ -51,8 +51,15 @@ import "../../shared" as Examples a small QML file emphasizing a particular element or feature. Transitions shows animated transistions when showing or hiding items in a positioner. + It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow. + Each positioner has animations described as Transitions. + \snippet examples/quick/positioners/positioners-transitions.qml move + The move transition specifies how items inside the positioner will animate when they are displaced by items appearing or disappearing. + \snippet examples/quick/positioners/positioners-transitions.qml add + The add transition specifies how items will appear when they are added to the positioner. Attached Properties show using the attached property to determine where in a positioner an item is. + \snippet examples/quick/positioners/positioners-attachedproperties.qml 0 */ Item { diff --git a/examples/quick/shadereffects/shadereffects.qml b/examples/quick/shadereffects/shadereffects.qml index 4b3bb2a5e2..de221e95cb 100644 --- a/examples/quick/shadereffects/shadereffects.qml +++ b/examples/quick/shadereffects/shadereffects.qml @@ -54,6 +54,21 @@ Rectangle { This example demonstrates a couple of visual effects that you can perform with shaders in QtQuick 2.0 + + ShaderEffects typically operate on other elements, using a ShaderEffectSource + \snippet examples/quick/shadereffects/shadereffects.qml source + In the above snippet, theItem is the id of a complex QML element in the file. + + ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader. + \snippet examples/quick/shadereffects/shadereffects.qml fragment + + You can use any custom property on the ShaderEffect in your shader. This makes + animated shader code very easy. + \snippet examples/quick/shadereffects/shadereffects.qml properties + + ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect + provides more vertices for you to manipulate, enabling many effects. + \snippet examples/quick/shadereffects/shadereffects.qml vertex */ property color col: "lightsteelblue" gradient: Gradient { @@ -63,11 +78,13 @@ Rectangle { GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") } } + //! [source] ShaderEffectSource { id: theSource sourceItem: theItem smooth: true } + //! [source] function saturate(x) { return Math.min(Math.max(x, 0), 1) @@ -127,6 +144,7 @@ Rectangle { property real frequency: 20 property real time: 0 NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 } + //! [fragment] fragmentShader: "uniform lowp float qt_Opacity;" + "uniform highp float amplitude;" + @@ -138,6 +156,7 @@ Rectangle { " 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 @@ -265,7 +284,7 @@ Rectangle { ShaderEffect { width: 160 height: 160 - mesh: Qt.size(10, 10) + //! [properties] property variant source: theSource property real bend: 0 property real minimize: 0 @@ -285,6 +304,9 @@ Rectangle { NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine } PauseAnimation { duration: 1300 } } + //! [properties] + //! [vertex] + mesh: Qt.size(10, 10) vertexShader: " uniform highp mat4 qt_Matrix; uniform highp float bend; @@ -304,6 +326,7 @@ Rectangle { pos.x = mix(qt_Vertex.x, side * width, t * bend); gl_Position = qt_Matrix * pos; }" + //! [vertex] Slider { id: genieSlider anchors.left: parent.left -- cgit v1.2.3