contents/ui/CustomMicIndicator.qml

0001 /* Copyright 2016 Aditya Mehra <aix.m@outlook.com>
0002
0003     This library is free software; you can redistribute it and/or
0004     modify it under the terms of the GNU Lesser General Public
0005     License as published by the Free Software Foundation; either
0006     version 2.1 of the License, or (at your option) version 3, or any
0007     later version accepted by the membership of KDE e.V. (or its
0008     successor approved by the membership of KDE e.V.), which shall
0009     act as a proxy defined in Section 6 of version 3 of the license.
0010
0011     This library is distributed in the hope that it will be useful,
0012     but WITHOUT ANY WARRANTY; without even the implied warranty of
0013     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
0014     Lesser General Public License for more details.
0015
0016     You should have received a copy of the GNU Lesser General Public
0017     License along with this library.  If not, see <http://www.gnu.org/licenses/>.
0018 */
0019
0020
0021 import QtQuick 2.9
0022 import org.kde.plasma.components 2.0 as PlasmaComponents
0023 import QtQuick.Controls 2.2
0024 import QtQuick.Layouts 1.3
0025 import QtGraphicalEffects 1.0
0026
0027 Item {
0028     id: bgrectA
0029
0030     function aniRunWorking(){
0031         animtimer.start()
0032         topCircle.inneranimtopworking.start()
0033         maskItem.inneranimworking.start()
0034     }
0035
0036     function aniRunTransition(){
0037         animtimer.start()
0038         topCircle.inneranimtoptransition.start()
0039         maskItem.inneranimtransition.start()
0040     }
0041
0042
0043     function aniRunHappy (){
0044        animtimer.start()
0045        topCircle.inneranimtophappy.start()
0046        maskItem.inneranimhappy.start()
0047     }
0048
0049     function aniRunError(){
0050         animtimer.start()
0051         topCircle.inneranimtopsad.start()
0052         maskItem.inneranimsad.start()
0053     }
0054
0055 Item{
0056     id: customIndicatorBusy
0057     anchors.fill: parent
0058     visible: true
0059
0060     RotationAnimator {
0061         target:topCircle
0062         id: antoWorking
0063         from: 0;
0064         to: 360;
0065         duration: 500
0066         running: false
0067         alwaysRunToEnd: true
0068     }
0069
0070     RotationAnimator {
0071         target:topCircle
0072         id: antoTransition
0073         from: 0;
0074         to: 0;
0075         duration: 500
0076         running: false
0077         alwaysRunToEnd: true
0078     }
0079
0080     RotationAnimator {
0081         target:topCircle
0082         id: antoSad
0083         from: 0;
0084         to: 180;
0085         duration: 500
0086         direction: RotationAnimator.Counterclockwise
0087         running: false
0088         alwaysRunToEnd: true;
0089
0090     }
0091
0092     RotationAnimator {
0093         target:topCircle
0094         id: antoHappy
0095         from: 0;
0096         to: 360;
0097         duration: 500
0098         running: false
0099         alwaysRunToEnd: true;
0100     }
0101
0102     SequentialAnimation {
0103         id: seqmaskanimworking
0104         running: false
0105         loops: Animation.Infinite
0106         PropertyAction { target: myRot; property: "origin.x"; value: units.gridUnit * 0.78 }
0107         PropertyAction { target: myRot; property: "origin.y"; value: units.gridUnit * 0.78 }
0108        NumberAnimation { target: myRot; property: "angle"; from:0; to: -360; duration: 500}
0109
0110        onStopped: {
0111            myRot.angle = 0
0112        }
0113     }
0114
0115     SequentialAnimation {
0116         id: seqmaskanimtransition
0117         running: false
0118         loops: Animation.Infinite
0119         PropertyAction { target: myRot; property: "origin.x"; value: units.gridUnit * 0.78 }
0120         PropertyAction { target: myRot; property: "origin.y"; value: units.gridUnit * 0.78 }
0121         NumberAnimation { target: myRot; property: "angle"; from: 0; to: 0; duration: 500}
0122     }
0123
0124     SequentialAnimation {
0125         id: colrmeonAnsHappy
0126         ParallelAnimation {
0127         PropertyAnimation { target: innerCircleSurround; property: "color"; from: "#ffffff"; to: "lightgreen"; duration: 500; }
0128         PropertyAnimation { target: circ; property: "color"; from: "#ffffff"; to: "lightgreen"; duration: 500; }
0129         PropertyAnimation { target: topCircle.circle; property: "color"; from: "#ffffff"; to: "lightgreen"; duration: 500; }
0130         }
0131         ParallelAnimation {
0132         PropertyAnimation { target: innerCircleSurround; property: "color"; from: "lightgreen"; to: "#fff"; duration: 500; }
0133         PropertyAnimation { target: circ; property: "color"; from: "lightgreen"; to: "#fff"; duration: 500; }
0134         PropertyAnimation { target: topCircle.circle; property: "color"; from: "lightgreen"; to: "#fff"; duration: 500; }
0135         }
0136     }
0137
0138     SequentialAnimation {
0139         id: colrmeonAnsSad
0140         ParallelAnimation {
0141         PropertyAnimation { target: innerCircleSurround; property: "color"; from: "#ffffff"; to: "red"; duration: 500; }
0142         PropertyAnimation { target: circ; property: "color"; from: "#ffffff"; to: "red"; duration: 1000; }
0143         PropertyAnimation { target: topCircle.circle; property: "color"; from: "#ffffff"; to: "red"; duration: 500; }
0144         }
0145         ParallelAnimation {
0146         PropertyAnimation { target: innerCircleSurround; property: "color"; from: "red"; to: "#fff"; duration: 500; }
0147         PropertyAnimation { target: circ; property: "color"; from: "red"; to: "#fff"; duration: 1000; }
0148         PropertyAnimation { target: topCircle.circle; property: "color"; from: "red"; to: "#fff"; duration: 500; }
0149         }
0150     }
0151
0152     SequentialAnimation {
0153         id: seqmaskanimhappy
0154         running: false
0155         loops: Animation.Infinite
0156         PropertyAction { target: myRot; property: "origin.x"; value: units.gridUnit * 0.74 }
0157         PropertyAction { target: myRot; property: "origin.y"; value: units.gridUnit * 0.76 }
0158         NumberAnimation { target: myRot; property: "angle"; from:0; to: -360; duration: 500 }
0159
0160        onStopped: {
0161            myRot.angle = -90
0162            transtimer.start()
0163        }
0164
0165        onStarted: {
0166            colrmeonAnsHappy.running = true
0167        }
0168     }
0169
0170     SequentialAnimation {
0171         id: seqmaskanimsad
0172         running: false
0173         loops: Animation.Infinite
0174         PropertyAction { target: myRot; property: "origin.x"; value: units.gridUnit * 0.76 }
0175         PropertyAction { target: myRot; property: "origin.y"; value: units.gridUnit * 0.76 }
0176         NumberAnimation { target: myRot; property: "angle"; from:0; to: 360; duration: 500}
0177
0178        onStopped: {
0179            myRot.angle = 90
0180            transtimer.start()
0181        }
0182
0183        onStarted: {
0184            colrmeonAnsSad.running = true
0185        }
0186     }
0187
0188     Item{
0189         anchors.fill: parent
0190
0191     Rectangle {
0192              id: topCircle
0193              anchors.horizontalCenter: parent.horizontalCenter
0194              anchors.verticalCenter: parent.verticalCenter
0195              color: "#00000000"
0196              radius: 1
0197              opacity: 1
0198              implicitWidth: units.gridUnit * 3
0199              implicitHeight: units.gridUnit * 3
0200              property alias inneranimtopworking: antoWorking
0201              property alias inneranimtophappy: antoHappy
0202              property alias inneranimtopsad: antoSad
0203              property alias inneranimtoptransition: antoTransition
0204              property alias circle: innerSqr
0205
0206              Rectangle{
0207                 id: innerSqr
0208                 anchors.top: parent.top
0209                 anchors.horizontalCenter: parent.horizontalCenter
0210                 color: "#fff"
0211                 radius: 100
0212                 width: units.gridUnit * 0.3
0213                 height: units.gridUnit * 0.3
0214              }
0215                     }
0216
0217     Rectangle {
0218          id: innerCircleSurround
0219          anchors.centerIn: parent
0220          color: "#ffffff"
0221          radius: 100
0222          implicitWidth: units.gridUnit * 2
0223          implicitHeight: units.gridUnit * 2
0224          opacity: 1
0225         }
0226
0227     Rectangle {
0228          id: innerCircleSurroundOutterRing
0229          anchors.centerIn: parent
0230          color: theme.linkColor
0231          radius: 100
0232          implicitWidth: units.gridUnit * 1.833
0233          implicitHeight: units.gridUnit * 1.833
0234          opacity: 1
0235         }
0236
0237     Rectangle {
0238         id: maskItem
0239          anchors.verticalCenter: parent.verticalCenter
0240          anchors.left: innerCircleSurroundOutterRing.left
0241          anchors.leftMargin: units.gridUnit * 0.2
0242          color: "#00000000"
0243          radius: 1000
0244          implicitWidth: units.gridUnit * 0.833
0245          implicitHeight: units.gridUnit * 1.6
0246          clip: true
0247          property alias cc: semicirc
0248          property alias inneranimworking: seqmaskanimworking
0249          property alias inneranimtransition: seqmaskanimtransition
0250          property alias inneranimhappy: seqmaskanimhappy
0251          property alias inneranimsad: seqmaskanimsad
0252          opacity: 1
0253
0254          transform: Rotation {
0255                      id: myRot
0256                  }
0257
0258     Item {
0259            id: semicirc
0260            anchors.left: parent.left
0261            anchors.top: parent.top
0262            anchors.bottom: parent.bottom
0263            width: units.gridUnit * 3.133
0264            clip:true
0265            opacity: 1
0266
0267            Rectangle{
0268                id: circ
0269                width: parent.width
0270                height: parent.height
0271                radius:100
0272                color: "white"
0273          }
0274        }
0275       }
0276
0277     Timer {
0278         id: animtimer
0279         interval: 500;
0280         repeat: false
0281         onTriggered: {
0282             maskItem.inneranimworking.stop()
0283             maskItem.inneranimtransition.stop()
0284             maskItem.inneranimhappy.stop()
0285             maskItem.inneranimsad.stop()
0286             topCircle.inneranimtopworking.stop()
0287             topCircle.inneranimtoptransition.stop()
0288             topCircle.inneranimtophappy.stop()
0289             topCircle.inneranimtopsad.stop()
0290             }
0291         }
0292
0293     Timer {
0294         id: transtimer
0295         interval: 500;
0296         repeat: false
0297         onTriggered: {
0298             myRot.angle = 0
0299             antoTransition.running = true
0300                     }
0301                 }
0302             }
0303         }
0304       }