contents/ui/WobbleExample.qml

0001 /*
0002     SPDX-FileCopyrightText: 2013 Sebastian Kügler <sebas@kde.org>
0003
0004     SPDX-License-Identifier: GPL-2.0-or-later
0005 */
0006
0007 import QtQuick
0008 import org.kde.plasma.plasmoid
0009 import org.kde.plasma.components as PlasmaComponents
0010
0011 ShaderExample {
0012
0013     pageName: "Wobble"
0014     pageDescription: "Makes an image wobble"
0015
0016     Grid {
0017         id: cfgrid
0018         columns: 2
0019
0020         anchors.top: parent.top
0021         anchors.right: parent.right
0022         width: parent.width * 0.6
0023         height: 96
0024         spacing: 6
0025         columnSpacing: _m
0026         PlasmaComponents.Label {
0027             text: "Amplitude:";
0028             width: parent.width * 0.5;
0029             horizontalAlignment: Text.AlignRight
0030             elide: Text.ElideRight
0031         }
0032         PlasmaComponents.Slider {
0033             width: parent.width * 0.4
0034             id: amplitudeSlider
0035             stepSize: 0.05
0036             minimumValue: 0
0037             maximumValue: 1.0
0038             value: 0.4
0039         }
0040
0041         PlasmaComponents.Label {
0042             text: "Speed:";
0043             horizontalAlignment: Text.AlignRight
0044             width: parent.width * 0.5;
0045             elide: Text.ElideRight
0046         }
0047         PlasmaComponents.Slider {
0048             width: parent.width * 0.4
0049             id: speedSlider
0050             stepSize: 250
0051             minimumValue: 0
0052             maximumValue: 6000
0053             value: 3000
0054             onValueChanged: {
0055                 if (timeAnimation != null) {
0056                     timeAnimation.duration = maximumValue - value +1;
0057                     timeAnimation.restart();
0058                 }
0059             }
0060         }
0061     }
0062     PlasmaComponents.Button {
0063         anchors { right: parent.right; bottom: parent.bottom; }
0064         text: "Busy"
0065         checked: Plasmoid.busy
0066         onClicked: {
0067             Plasmoid.busy = !Plasmoid.busy
0068         }
0069     }
0070
0071
0072     Item {
0073         id: imageItem
0074         opacity: 0.8
0075         anchors.fill: parent
0076         anchors.topMargin: 48
0077         Image {
0078             source: "../images/elarun-small.png"
0079             anchors.fill: parent
0080             anchors.margins: parent.height / 10
0081         }
0082     }
0083
0084     ShaderEffect {
0085         id: wobbleShader
0086
0087         anchors.fill: imageItem
0088         //property real time
0089         property var mouse
0090         property var resolution
0091
0092         property int fadeDuration: 250
0093         property real amplitude: 0.04 * amplitudeSlider.value
0094         property real frequency: 20
0095         property real time: 10
0096         property int speed: (speedSlider.maximumValue - speedSlider.value + 1)
0097
0098         property ShaderEffectSource source: ShaderEffectSource {
0099             sourceItem: imageItem
0100             hideSource: true
0101         }
0102
0103         NumberAnimation on time { id: timeAnimation; loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 3000 }
0104         Behavior on amplitude { NumberAnimation { duration: wobbleShader.fadeDuration } }
0105
0106         fragmentShader: { //mainItem.opacity = 0;
0107             "uniform lowp float qt_Opacity;" +
0108             "uniform highp float amplitude;" +
0109             "uniform highp float frequency;" +
0110             "uniform highp float time;" +
0111             "uniform sampler2D source;" +
0112             "varying highp vec2 qt_TexCoord0;" +
0113             "void main() {" +
0114             "    highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
0115             "    gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
0116             "}"
0117         }
0118     }
0119
0120 }