diff options
author | Jens Bache-Wiig <jens.bache-wiig@digia.com> | 2013-10-25 13:20:38 +0200 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-10-31 13:23:58 +0100 |
commit | fd8d7261cc25a7a2efcf42c59f9f11d0280e4383 (patch) | |
tree | 3017fb73886fa5c6966e65b7d8d484a2cd54732f /src/controls/Private | |
parent | 6c5bcbf23928094338da90be2cd4a2787104cf03 (diff) | |
download | qtquickcontrols-fd8d7261cc25a7a2efcf42c59f9f11d0280e4383.tar.gz |
More styling improvements for Base Style
- Better scalability
- Retina support
- Added glow filter to Private
- Added focus rects
Change-Id: I2ec36a9db546c21e20408429c5e17fde8d67b7c3
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>
Diffstat (limited to 'src/controls/Private')
-rw-r--r-- | src/controls/Private/FastGlow.qml | 393 | ||||
-rw-r--r-- | src/controls/Private/SourceProxy.qml | 137 | ||||
-rw-r--r-- | src/controls/Private/private.pri | 2 | ||||
-rw-r--r-- | src/controls/Private/qmldir | 2 |
4 files changed, 534 insertions, 0 deletions
diff --git a/src/controls/Private/FastGlow.qml b/src/controls/Private/FastGlow.qml new file mode 100644 index 00000000..f4bd2c74 --- /dev/null +++ b/src/controls/Private/FastGlow.qml @@ -0,0 +1,393 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Graphical Effects module. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: rootItem + property variant source + property real spread: 0.0 + property real blur: 0.0 + property color color: "white" + property bool transparentBorder: false + property bool cached: false + + SourceProxy { + id: sourceProxy + input: rootItem.source + } + + ShaderEffectSource { + id: cacheItem + anchors.fill: shaderItem + visible: rootItem.cached + smooth: true + sourceItem: shaderItem + live: true + hideSource: visible + } + + property string __internalBlurVertexShader: " + attribute highp vec4 qt_Vertex; + attribute highp vec2 qt_MultiTexCoord0; + uniform highp mat4 qt_Matrix; + uniform highp float yStep; + uniform highp float xStep; + varying highp vec2 qt_TexCoord0; + varying highp vec2 qt_TexCoord1; + varying highp vec2 qt_TexCoord2; + varying highp vec2 qt_TexCoord3; + + void main() { + qt_TexCoord0 = vec2(qt_MultiTexCoord0.x + xStep, qt_MultiTexCoord0.y + yStep * 0.36); + qt_TexCoord1 = vec2(qt_MultiTexCoord0.x + xStep * 0.36, qt_MultiTexCoord0.y - yStep); + qt_TexCoord2 = vec2(qt_MultiTexCoord0.x - xStep * 0.36, qt_MultiTexCoord0.y + yStep); + qt_TexCoord3 = vec2(qt_MultiTexCoord0.x - xStep, qt_MultiTexCoord0.y - yStep * 0.36); + gl_Position = qt_Matrix * qt_Vertex; + } + " + + property string __internalBlurFragmentShader: " + uniform lowp sampler2D source; + uniform lowp float qt_Opacity; + varying highp vec2 qt_TexCoord0; + varying highp vec2 qt_TexCoord1; + varying highp vec2 qt_TexCoord2; + varying highp vec2 qt_TexCoord3; + + void main() { + highp vec4 sourceColor = (texture2D(source, qt_TexCoord0) + + texture2D(source, qt_TexCoord1) + + texture2D(source, qt_TexCoord2) + + texture2D(source, qt_TexCoord3)) * 0.25; + gl_FragColor = sourceColor * qt_Opacity; + } + " + + ShaderEffect { + id: level0 + property variant source: sourceProxy.output + anchors.fill: parent + visible: false + smooth: true + } + + ShaderEffectSource { + id: level1 + width: Math.ceil(shaderItem.width / 32) * 32 + height: Math.ceil(shaderItem.height / 32) * 32 + sourceItem: level0 + hideSource: rootItem.visible + sourceRect: transparentBorder ? Qt.rect(-64, -64, shaderItem.width, shaderItem.height) : Qt.rect(0,0,0,0) + smooth: true + visible: false + } + + ShaderEffect { + id: effect1 + property variant source: level1 + property real yStep: 1/height + property real xStep: 1/width + anchors.fill: level2 + visible: false + smooth: true + vertexShader: __internalBlurVertexShader + fragmentShader: __internalBlurFragmentShader + } + + ShaderEffectSource { + id: level2 + width: level1.width / 2 + height: level1.height / 2 + sourceItem: effect1 + hideSource: rootItem.visible + visible: false + smooth: true + } + + ShaderEffect { + id: effect2 + property variant source: level2 + property real yStep: 1/height + property real xStep: 1/width + anchors.fill: level3 + visible: false + smooth: true + vertexShader: __internalBlurVertexShader + fragmentShader: __internalBlurFragmentShader + } + + ShaderEffectSource { + id: level3 + width: level2.width / 2 + height: level2.height / 2 + sourceItem: effect2 + hideSource: rootItem.visible + visible: false + smooth: true + } + + ShaderEffect { + id: effect3 + property variant source: level3 + property real yStep: 1/height + property real xStep: 1/width + anchors.fill: level4 + visible: false + smooth: true + vertexShader: __internalBlurVertexShader + fragmentShader: __internalBlurFragmentShader + } + + ShaderEffectSource { + id: level4 + width: level3.width / 2 + height: level3.height / 2 + sourceItem: effect3 + hideSource: rootItem.visible + visible: false + smooth: true + } + + ShaderEffect { + id: effect4 + property variant source: level4 + property real yStep: 1/height + property real xStep: 1/width + anchors.fill: level5 + visible: false + smooth: true + vertexShader: __internalBlurVertexShader + fragmentShader: __internalBlurFragmentShader + } + + ShaderEffectSource { + id: level5 + width: level4.width / 2 + height: level4.height / 2 + sourceItem: effect4 + hideSource: rootItem.visible + visible: false + smooth: true + } + + ShaderEffect { + id: effect5 + property variant source: level5 + property real yStep: 1/height + property real xStep: 1/width + anchors.fill: level6 + visible: false + smooth: true + vertexShader: __internalBlurVertexShader + fragmentShader: __internalBlurFragmentShader + } + + ShaderEffectSource { + id: level6 + width: level5.width / 2 + height: level5.height / 2 + sourceItem: effect5 + hideSource: rootItem.visible + visible: false + smooth: true + } + + Item { + id: dummysource + width: 1 + height: 1 + visible: false + } + + ShaderEffectSource { + id: dummy + width: 1 + height: 1 + sourceItem: dummysource + visible: false + smooth: false + live: false + } + + ShaderEffect { + id: shaderItem + x: transparentBorder ? -64 : 0 + y: transparentBorder ? -64 : 0 + width: transparentBorder ? parent.width + 128 : parent.width + height: transparentBorder ? parent.height + 128 : parent.height + + property variant source1: level1 + property variant source2: level2 + property variant source3: level3 + property variant source4: level4 + property variant source5: level5 + property variant source6: level6 + property real lod: rootItem.blur + + property real weight1; + property real weight2; + property real weight3; + property real weight4; + property real weight5; + property real weight6; + + property real spread: 1.0 - (rootItem.spread * 0.98) + property alias color: rootItem.color + + function weight(v) { + if (v <= 0.0) + return 1 + if (v >= 0.5) + return 0 + + return 1.0 - v / 0.5 + } + + function calculateWeights() { + + var w1 = weight(Math.abs(lod - 0.100)) + var w2 = weight(Math.abs(lod - 0.300)) + var w3 = weight(Math.abs(lod - 0.500)) + var w4 = weight(Math.abs(lod - 0.700)) + var w5 = weight(Math.abs(lod - 0.900)) + var w6 = weight(Math.abs(lod - 1.100)) + + var sum = w1 + w2 + w3 + w4 + w5 + w6; + weight1 = w1 / sum; + weight2 = w2 / sum; + weight3 = w3 / sum; + weight4 = w4 / sum; + weight5 = w5 / sum; + weight6 = w6 / sum; + + upateSources() + } + + function upateSources() { + var sources = new Array(); + var weights = new Array(); + + if (weight1 > 0) { + sources.push(level1) + weights.push(weight1) + } + + if (weight2 > 0) { + sources.push(level2) + weights.push(weight2) + } + + if (weight3 > 0) { + sources.push(level3) + weights.push(weight3) + } + + if (weight4 > 0) { + sources.push(level4) + weights.push(weight4) + } + + if (weight5 > 0) { + sources.push(level5) + weights.push(weight5) + } + + if (weight6 > 0) { + sources.push(level6) + weights.push(weight6) + } + + for (var j = sources.length; j < 6; j++) { + sources.push(dummy) + weights.push(0.0) + } + + source1 = sources[0] + source2 = sources[1] + source3 = sources[2] + source4 = sources[3] + source5 = sources[4] + source6 = sources[5] + + weight1 = weights[0] + weight2 = weights[1] + weight3 = weights[2] + weight4 = weights[3] + weight5 = weights[4] + weight6 = weights[5] + } + + Component.onCompleted: calculateWeights() + + onLodChanged: calculateWeights() + + fragmentShader: " + uniform lowp sampler2D source1; + uniform lowp sampler2D source2; + uniform lowp sampler2D source3; + uniform lowp sampler2D source4; + uniform lowp sampler2D source5; + uniform mediump float weight1; + uniform mediump float weight2; + uniform mediump float weight3; + uniform mediump float weight4; + uniform mediump float weight5; + uniform highp vec4 color; + uniform highp float spread; + uniform lowp float qt_Opacity; + varying mediump vec2 qt_TexCoord0; + + highp float linearstep(highp float e0, highp float e1, highp float x) { + return clamp((x - e0) / (e1 - e0), 0.0, 1.0); + } + + void main() { + lowp vec4 sourceColor = texture2D(source1, qt_TexCoord0) * weight1; + sourceColor += texture2D(source2, qt_TexCoord0) * weight2; + sourceColor += texture2D(source3, qt_TexCoord0) * weight3; + sourceColor += texture2D(source4, qt_TexCoord0) * weight4; + sourceColor += texture2D(source5, qt_TexCoord0) * weight5; + sourceColor = mix(vec4(0), color, linearstep(0.0, spread, sourceColor.a)); + gl_FragColor = sourceColor * qt_Opacity; + } + " + } +} diff --git a/src/controls/Private/SourceProxy.qml b/src/controls/Private/SourceProxy.qml new file mode 100644 index 00000000..1cf03f31 --- /dev/null +++ b/src/controls/Private/SourceProxy.qml @@ -0,0 +1,137 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Graphical Effects module. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: rootItem + property variant input + property variant output + property variant sourceRect + visible: false + + Component.onCompleted: evaluateInput() + + onInputChanged: evaluateInput() + + onSourceRectChanged: evaluateInput() + + function evaluateInput() { + if (input == undefined) { + output = input + } + else if (sourceRect != undefined && sourceRect != Qt.rect(0, 0, 0, 0) && !isQQuickShaderEffectSource(input)) { + proxySource.sourceItem = input + output = proxySource + proxySource.sourceRect = sourceRect + } + else if (isQQuickItemLayerEnabled(input)) { + output = input + } + else if ((isQQuickImage(input) && !hasTileMode(input) && !hasChildren(input))) { + output = input + } + else if (isQQuickShaderEffectSource(input)) { + output = input + } + else { + proxySource.sourceItem = input + output = proxySource + proxySource.sourceRect = Qt.rect(0, 0, 0, 0) + } + } + + function isQQuickItemLayerEnabled(item) { + if (item.hasOwnProperty("layer")) { + var l = item["layer"] + if (l.hasOwnProperty("enabled") && l["enabled"].toString() == "true") + return true + } + return false + } + + function isQQuickImage(item) { + var imageProperties = [ "fillMode", "progress", "asynchronous", "sourceSize", "status", "smooth" ] + return hasProperties(item, imageProperties) + } + + function isQQuickShaderEffectSource(item) { + var shaderEffectSourceProperties = [ "hideSource", "format", "sourceItem", "mipmap", "wrapMode", "live", "recursive", "sourceRect" ] + return hasProperties(item, shaderEffectSourceProperties) + } + + function hasProperties(item, properties) { + var counter = 0 + for (var j = 0; j < properties.length; j++) { + if (item.hasOwnProperty(properties [j])) + counter++ + } + return properties.length == counter + } + + function hasChildren(item) { + if (item.hasOwnProperty("childrenRect")) { + if (item["childrenRect"].toString() != "QRectF(0, 0, 0, 0)") + return true + else + return false + } + return false + } + + function hasTileMode(item) { + if (item.hasOwnProperty("fillMode")) { + if (item["fillMode"].toString() != "0") + return true + else + return false + } + return false + } + + ShaderEffectSource { + id: proxySource + live: rootItem.input != rootItem.output + hideSource: false + smooth: true + visible: false + } +} + diff --git a/src/controls/Private/private.pri b/src/controls/Private/private.pri index f51223cd..30464974 100644 --- a/src/controls/Private/private.pri +++ b/src/controls/Private/private.pri @@ -30,6 +30,8 @@ PRIVATE_QML_FILES += \ $$PWD/TabBar.qml \ $$PWD/BasicButton.qml \ $$PWD/Control.qml \ + $$PWD/FastGlow.qml \ + $$PWD/SourceProxy.qml\ $$PWD/Style.qml \ $$PWD/style.js \ $$PWD/ModalPopupBehavior.qml \ diff --git a/src/controls/Private/qmldir b/src/controls/Private/qmldir index 05d52b19..c8c6f46b 100644 --- a/src/controls/Private/qmldir +++ b/src/controls/Private/qmldir @@ -12,6 +12,8 @@ StackViewSlideDelegate 1.0 StackViewSlideDelegate.qml StyleHelpers 1.0 style.js JSArray 1.0 StackView.js TableViewSelection 1.0 TableViewSelection.qml +FastGlow 1.0 FastGlow.qml +SourceProxy 1.0 SourceProxy.qml GroupBoxStyle 1.0 ../Styles/Base/GroupBoxStyle.qml ToolBarStyle 1.0 ../Styles/Base/ToolBarStyle.qml StatusBarStyle 1.0 ../Styles/Base/StatusBarStyle.qml |