From ab0d7859496e4c36b8ee83e1cacda83ca4533b59 Mon Sep 17 00:00:00 2001 From: Laszlo Agocs Date: Tue, 12 Jul 2016 17:26:30 +0200 Subject: Add an own copy of RectangularGlow, with OpenGL core and D3D12 as well Change-Id: I0231854ae93cb3f45ea5da13c30c08fdc1b29139 Reviewed-by: J-P Nurmi --- README.md | 2 - src/imports/controls/material/BoxShadow.qml | 3 +- src/imports/controls/material/RectangularGlow.qml | 240 +++++++++++++++++++++ src/imports/controls/material/material.pri | 1 + src/imports/controls/material/qmldir | 1 - .../qtquickcontrols2materialstyleplugin.cpp | 1 + .../qtquickcontrols2materialstyleplugin.qrc | 3 + .../shaders/+glslcore/RectangularGlow.frag | 25 +++ .../material/shaders/+hlsl/RectangularGlow.frag | 21 ++ .../controls/material/shaders/RectangularGlow.frag | 19 ++ sync.profile | 1 - tests/auto/sanity/BLACKLIST | 4 + 12 files changed, 316 insertions(+), 5 deletions(-) create mode 100644 src/imports/controls/material/RectangularGlow.qml create mode 100644 src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag create mode 100644 src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag create mode 100644 src/imports/controls/material/shaders/RectangularGlow.frag diff --git a/README.md b/README.md index d0a7a4c6..c2903a57 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,6 @@ If you have problems or questions, don't hesitate to: The MINIMUM REQUIREMENT for building this project is to use the same branch of Qt 5. The dependencies are *qtbase*, *qtxmlpatterns* and *qtdeclarative*. -Other optional dependencies include *qtgraphicaleffects* for the Material -style. To install the controls into your Qt directory (```QTDIR/qml```): diff --git a/src/imports/controls/material/BoxShadow.qml b/src/imports/controls/material/BoxShadow.qml index b70fcee5..43722b73 100644 --- a/src/imports/controls/material/BoxShadow.qml +++ b/src/imports/controls/material/BoxShadow.qml @@ -35,7 +35,8 @@ ****************************************************************************/ import QtQuick 2.6 -import QtGraphicalEffects 1.0 +import QtQuick.Controls.Material 2.1 +import QtQuick.Controls.Material.impl 2.1 /*! A implementation of CSS's box-shadow, used by ElevationEffect for a Material Design diff --git a/src/imports/controls/material/RectangularGlow.qml b/src/imports/controls/material/RectangularGlow.qml new file mode 100644 index 00000000..7cec7e54 --- /dev/null +++ b/src/imports/controls/material/RectangularGlow.qml @@ -0,0 +1,240 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +/*! + A cross-graphics API implementation of QtGraphicalEffects' RectangularGlow. + */ +Item { + id: rootItem + + /*! + This property defines how many pixels outside the item area are reached + by the glow. + + The value ranges from 0.0 (no glow) to inf (infinite glow). By default, + the property is set to \c 0.0. + + \table + \header + \li Output examples with different glowRadius values + \li + \li + \row + \li \image RectangularGlow_glowRadius1.png + \li \image RectangularGlow_glowRadius2.png + \li \image RectangularGlow_glowRadius3.png + \row + \li \b { glowRadius: 10 } + \li \b { glowRadius: 20 } + \li \b { glowRadius: 40 } + \row + \li \l spread: 0 + \li \l spread: 0 + \li \l spread: 0 + \row + \li \l color: #ffffff + \li \l color: #ffffff + \li \l color: #ffffff + \row + \li \l cornerRadius: 25 + \li \l cornerRadius: 25 + \li \l cornerRadius: 25 + \endtable + + */ + property real glowRadius: 0.0 + + /*! + This property defines how large part of the glow color is strenghtened + near the source edges. + + The value ranges from 0.0 (no strenght increase) to 1.0 (maximum + strenght increase). By default, the property is set to \c 0.0. + + \table + \header + \li Output examples with different spread values + \li + \li + \row + \li \image RectangularGlow_spread1.png + \li \image RectangularGlow_spread2.png + \li \image RectangularGlow_spread3.png + \row + \li \b { spread: 0.0 } + \li \b { spread: 0.5 } + \li \b { spread: 1.0 } + \row + \li \l glowRadius: 20 + \li \l glowRadius: 20 + \li \l glowRadius: 20 + \row + \li \l color: #ffffff + \li \l color: #ffffff + \li \l color: #ffffff + \row + \li \l cornerRadius: 25 + \li \l cornerRadius: 25 + \li \l cornerRadius: 25 + \endtable + */ + property real spread: 0.0 + + /*! + This property defines the RGBA color value which is used for the glow. + + By default, the property is set to \c "white". + + \table + \header + \li Output examples with different color values + \li + \li + \row + \li \image RectangularGlow_color1.png + \li \image RectangularGlow_color2.png + \li \image RectangularGlow_color3.png + \row + \li \b { color: #ffffff } + \li \b { color: #55ff55 } + \li \b { color: #5555ff } + \row + \li \l glowRadius: 20 + \li \l glowRadius: 20 + \li \l glowRadius: 20 + \row + \li \l spread: 0 + \li \l spread: 0 + \li \l spread: 0 + \row + \li \l cornerRadius: 25 + \li \l cornerRadius: 25 + \li \l cornerRadius: 25 + \endtable + */ + property color color: "white" + + /*! + This property defines the corner radius that is used to draw a glow with + rounded corners. + + The value ranges from 0.0 to half of the effective width or height of + the glow, whichever is smaller. This can be calculated with: \c{ + min(width, height) / 2.0 + glowRadius} + + By default, the property is bound to glowRadius property. The glow + behaves as if the rectangle was blurred when adjusting the glowRadius + property. + + \table + \header + \li Output examples with different cornerRadius values + \li + \li + \row + \li \image RectangularGlow_cornerRadius1.png + \li \image RectangularGlow_cornerRadius2.png + \li \image RectangularGlow_cornerRadius3.png + \row + \li \b { cornerRadius: 0 } + \li \b { cornerRadius: 25 } + \li \b { cornerRadius: 50 } + \row + \li \l glowRadius: 20 + \li \l glowRadius: 20 + \li \l glowRadius: 20 + \row + \li \l spread: 0 + \li \l spread: 0 + \li \l spread: 0 + \row + \li \l color: #ffffff + \li \l color: #ffffff + \li \l color: #ffffff + \endtable + */ + property real cornerRadius: glowRadius + + /*! + This property allows the effect output pixels to be cached in order to + improve the rendering performance. + + Every time the source or effect properties are changed, the pixels in + the cache must be updated. Memory consumption is increased, because an + extra buffer of memory is required for storing the effect output. + + It is recommended to disable the cache when the source or the effect + properties are animated. + + By default, the property is set to \c false. + */ + property bool cached: false + + ShaderEffectSource { + id: cacheItem + anchors.fill: shaderItem + visible: rootItem.cached + smooth: true + sourceItem: shaderItem + live: true + hideSource: visible + } + + ShaderEffect { + id: shaderItem + + x: (parent.width - width) / 2.0 + y: (parent.height - height) / 2.0 + width: parent.width + rootItem.glowRadius * 2 + cornerRadius * 2 + height: parent.height + rootItem.glowRadius * 2 + cornerRadius * 2 + + function clampedCornerRadius() { + var maxCornerRadius = Math.min(rootItem.width, rootItem.height) / 2 + glowRadius; + return Math.max(0, Math.min(rootItem.cornerRadius, maxCornerRadius)) + } + + property color color: rootItem.color + property real inverseSpread: 1.0 - rootItem.spread + property real relativeSizeX: ((inverseSpread * inverseSpread) * rootItem.glowRadius + cornerRadius * 2.0) / width + property real relativeSizeY: relativeSizeX * (width / height) + property real spread: rootItem.spread / 2.0 + property real cornerRadius: clampedCornerRadius() + + fragmentShader: "qrc:/qt-project.org/imports/QtQuick/Controls.2/Material/shaders/RectangularGlow.frag" + } +} diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri index 76b865e4..30be1fb2 100644 --- a/src/imports/controls/material/material.pri +++ b/src/imports/controls/material/material.pri @@ -40,6 +40,7 @@ QML_FILES += \ $$PWD/RadioDelegate.qml \ $$PWD/RadioIndicator.qml \ $$PWD/RangeSlider.qml \ + $$PWD/RectangularGlow.qml \ $$PWD/ScrollBar.qml \ $$PWD/ScrollIndicator.qml \ $$PWD/Slider.qml \ diff --git a/src/imports/controls/material/qmldir b/src/imports/controls/material/qmldir index 51dafa08..6125e67d 100644 --- a/src/imports/controls/material/qmldir +++ b/src/imports/controls/material/qmldir @@ -2,4 +2,3 @@ module QtQuick.Controls.Material plugin qtquickcontrols2materialstyleplugin classname QtQuickControls2MaterialStylePlugin depends QtQuick.Controls 2.0 -depends QtGraphicalEffects 1.0 diff --git a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp index 8214d5ac..744d17a0 100644 --- a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp +++ b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp @@ -95,6 +95,7 @@ void QtQuickControls2MaterialStylePlugin::initializeEngine(QQmlEngine *engine, c qmlRegisterType(typeUrl(QStringLiteral("BoxShadow.qml")), import, 2, 1, "BoxShadow"); qmlRegisterType(typeUrl(QStringLiteral("CheckIndicator.qml")), import, 2, 1, "CheckIndicator"); qmlRegisterType(typeUrl(QStringLiteral("ElevationEffect.qml")), import, 2, 1, "ElevationEffect"); + qmlRegisterType(typeUrl(QStringLiteral("RectangularGlow.qml")), import, 2, 1, "RectangularGlow"); qmlRegisterType(typeUrl(QStringLiteral("SliderHandle.qml")), import, 2, 1, "SliderHandle"); qmlRegisterType(typeUrl(QStringLiteral("SwitchIndicator.qml")), import, 2, 1, "SwitchIndicator"); } diff --git a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc index 47257ce4..e2cc90fa 100644 --- a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc +++ b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc @@ -8,5 +8,8 @@ images/drop-indicator@2x.png images/drop-indicator@3x.png images/drop-indicator@4x.png + shaders/RectangularGlow.frag + shaders/+glslcore/RectangularGlow.frag + shaders/+hlsl/RectangularGlow.frag diff --git a/src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag b/src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag new file mode 100644 index 00000000..432d86b5 --- /dev/null +++ b/src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag @@ -0,0 +1,25 @@ +#version 150 + +uniform float qt_Opacity; +uniform float relativeSizeX; +uniform float relativeSizeY; +uniform float spread; +uniform vec4 color; + +in vec2 qt_TexCoord0; +out vec4 fragColor; + +float linearstep(float e0, float e1, float x) +{ + return clamp((x - e0) / (e1 - e0), 0.0, 1.0); +} + +void main() +{ + float alpha = + smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) * + smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y)); + + float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha); + fragColor = color * qt_Opacity * spreadMultiplier * spreadMultiplier; +} diff --git a/src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag b/src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag new file mode 100644 index 00000000..69d9f852 --- /dev/null +++ b/src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag @@ -0,0 +1,21 @@ +cbuffer ConstantBuffer : register(b0) +{ + float4x4 qt_Matrix; + float qt_Opacity; + float relativeSizeX; + float relativeSizeY; + float spread; + float4 color; +} + +float linearstep(float e0, float e1, float x) { return clamp((x - e0) / (e1 - e0), 0.0, 1.0); } + +float4 main(float4 position : SV_POSITION, float2 coord : TEXCOORD0) : SV_TARGET +{ + float alpha = + smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - coord.x)) * + smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - coord.y)); + + float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha); + return color * qt_Opacity * spreadMultiplier * spreadMultiplier; +} diff --git a/src/imports/controls/material/shaders/RectangularGlow.frag b/src/imports/controls/material/shaders/RectangularGlow.frag new file mode 100644 index 00000000..40bab580 --- /dev/null +++ b/src/imports/controls/material/shaders/RectangularGlow.frag @@ -0,0 +1,19 @@ +uniform highp float qt_Opacity; +uniform mediump float relativeSizeX; +uniform mediump float relativeSizeY; +uniform mediump float spread; +uniform lowp vec4 color; +varying highp 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 float alpha = + smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) * + smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y)); + + highp float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha); + gl_FragColor = color * qt_Opacity * spreadMultiplier * spreadMultiplier; +} diff --git a/sync.profile b/sync.profile index 213a944e..8823bf6f 100644 --- a/sync.profile +++ b/sync.profile @@ -15,5 +15,4 @@ "qtbase" => "", "qtxmlpatterns" => "", "qtdeclarative" => "", - "qtgraphicaleffects" => "" ); diff --git a/tests/auto/sanity/BLACKLIST b/tests/auto/sanity/BLACKLIST index 09cc7f3d..768f3985 100644 --- a/tests/auto/sanity/BLACKLIST +++ b/tests/auto/sanity/BLACKLIST @@ -14,3 +14,7 @@ * [attachedObjects:universal/ComboBox.qml] * +[functions:material/RectangularGlow.qml] +* +[anchors:material/RectangularGlow.qml] +* -- cgit v1.2.3