src/ui/FingerprintProgressCircle.qml

0001 /*
0002     Copyright 2020  Devin Lin <espidev@gmail.com>
0003
0004     This library is free software; you can redistribute it and/or
0005     modify it under the terms of the GNU Lesser General Public
0006     License as published by the Free Software Foundation; either
0007     version 2.1 of the License, or (at your option) version 3, or any
0008     later version accepted by the membership of KDE e.V. (or its
0009     successor approved by the membership of KDE e.V.), which shall
0010     act as a proxy defined in Section 6 of version 3 of the license.
0011
0012     This library is distributed in the hope that it will be useful,
0013     but WITHOUT ANY WARRANTY; without even the implied warranty of
0014     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
0015     Lesser General Public License for more details.
0016
0017     You should have received a copy of the GNU Lesser General Public
0018     License along with this library.  If not, see <http://www.gnu.org/licenses/>.
0019 */
0020
0021 import QtQuick 2.12
0022 import QtQuick.Layouts 1.3
0023 import QtQuick.Shapes 1.12
0024
0025 import org.kde.kirigami 2.12 as Kirigami
0026
0027 Item {
0028     width: progressCircle.width
0029     height: progressCircle.height
0030     Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
0031
0032     property alias colorTimer: colorChangeBackTimer
0033
0034     Timer {
0035         id: colorChangeBackTimer
0036         interval: 500
0037         onTriggered: {
0038             iconColorAnimation.to = Kirigami.Theme.textColor
0039             iconColorAnimation.start();
0040             circleColorAnimation.to = Kirigami.Theme.highlightColor
0041             circleColorAnimation.start();
0042         }
0043     }
0044
0045     Connections {
0046         target: fingerprintModel
0047         function onScanSuccess() {
0048             iconColorAnimation.to = Kirigami.Theme.highlightColor
0049             iconColorAnimation.start();
0050             colorChangeBackTimer.restart();
0051         }
0052         function onScanFailure() {
0053             iconColorAnimation.to = Kirigami.Theme.negativeTextColor
0054             iconColorAnimation.start();
0055             colorChangeBackTimer.restart();
0056         }
0057         function onScanComplete() {
0058             iconColorAnimation.to = Kirigami.Theme.positiveTextColor
0059             iconColorAnimation.start();
0060         }
0061     }
0062
0063     Kirigami.Icon {
0064         id: fingerprintEnrollFeedback
0065         source: "fingerprint"
0066         implicitHeight: Kirigami.Units.iconSizes.huge
0067         implicitWidth: implicitHeight
0068         anchors.centerIn: parent
0069
0070         ColorAnimation on color {
0071             id: iconColorAnimation
0072             easing.type: Easing.InOutQuad
0073             duration: 150
0074         }
0075     }
0076
0077     Shape {
0078         id: progressCircle
0079         anchors.horizontalCenter: fingerprintEnrollFeedback.horizontalCenter
0080         anchors.verticalCenter: fingerprintEnrollFeedback.verticalCenter
0081         implicitWidth: Kirigami.Units.iconSizes.huge + Kirigami.Units.gridUnit
0082         implicitHeight: Kirigami.Units.iconSizes.huge + Kirigami.Units.gridUnit
0083         layer.enabled: true
0084         layer.samples: 40
0085         anchors.centerIn: parent
0086
0087         property int rawAngle: fingerprintModel.enrollProgress * 360
0088         property int renderedAngle: 0
0089         NumberAnimation on renderedAngle {
0090             id: elapsedAngleAnimation
0091             easing.type: Easing.InOutQuad
0092             duration: 500
0093         }
0094         onRawAngleChanged: {
0095             elapsedAngleAnimation.to = rawAngle;
0096             elapsedAngleAnimation.start();
0097         }
0098
0099         ShapePath {
0100             strokeColor: "lightgrey"
0101             fillColor: "transparent"
0102             strokeWidth: 3
0103             capStyle: ShapePath.FlatCap
0104             PathAngleArc {
0105                 centerX: progressCircle.implicitWidth / 2; centerY: progressCircle.implicitHeight / 2;
0106                 radiusX: (progressCircle.implicitWidth - Kirigami.Units.gridUnit) / 2; radiusY: radiusX;
0107                 startAngle: 0
0108                 sweepAngle: 360
0109             }
0110         }
0111         ShapePath {
0112             strokeColor: Kirigami.Theme.highlightColor
0113             fillColor: "transparent"
0114             strokeWidth: 3
0115             capStyle: ShapePath.RoundCap
0116
0117             ColorAnimation on strokeColor {
0118                 id: circleColorAnimation
0119                 easing.type: Easing.InOutQuad
0120                 duration: 200
0121             }
0122
0123             PathAngleArc {
0124                 centerX: progressCircle.implicitWidth / 2; centerY: progressCircle.implicitHeight / 2;
0125                 radiusX: (progressCircle.implicitWidth - Kirigami.Units.gridUnit) / 2; radiusY: radiusX;
0126                 startAngle: -90
0127                 sweepAngle: progressCircle.renderedAngle
0128             }
0129         }
0130     }
0131 }