ui/components/TouchDPad.qml

0001 /*
0002  * Copyright 2019 Eike Hein <hein@kde.org>
0003  *
0004  * This program is free software; you can redistribute it and/or
0005  * modify it under the terms of the GNU General Public License as
0006  * published by the Free Software Foundation; either version 2 of
0007  * the License or (at your option) version 3 or any later version
0008  * accepted by the membership of KDE e.V. (or its successor approved
0009  * by the membership of KDE e.V.), which shall act as a proxy
0010  * defined in Section 14 of version 3 of the license.
0011  *
0012  * This program 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
0015  * GNU General Public License for more details.
0016  *
0017  * You should have received a copy of the GNU General Public License
0018  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
0019  */
0020
0021 import QtQuick 2.12
0022 import QtQuick.Window 2.12
0023 import QtQuick.Controls 2.12 as QQC2
0024
0025 import org.kde.kirigami 2.6 as Kirigami
0026
0027 Item {
0028     id: pad
0029
0030     readonly property real axisX: Math.round((((nub.x + (nub.width / 2)) - (width / 2))
0031         / (plate.radius - (nub.width / 2) - border.border.width)) * 100)
0032     readonly property real axisY: {
0033         var axisY = Math.round((((nub.y + (nub.height / 2)) - (height / 2))
0034         / (plate.radius - (nub.height / 2) - border.border.width)) * 100);
0035
0036         if (axisY < 0) {
0037             return Math.abs(axisY);
0038         }
0039
0040         return -axisY;
0041     }
0042
0043     property bool aboutToMove: false
0044     property bool moved: false
0045     property var touchPos: null
0046
0047     property string leftToolTipText: leftToolTip.text
0048     property string rightToolTipText: rightToolTip.text
0049     property string topToolTipText: topToolTip.text
0050     property string bottomToolTipText: bottomToolTip.text
0051
0052     property alias background: blurredBackground.sourceItem
0053     property alias backgroundOpacity: plate.opacity
0054     property alias leftIcon: leftIcon.source
0055     property alias rightIcon: rightIcon.source
0056     property alias topIcon: topIcon.source
0057     property alias bottomIcon: bottomIcon.source
0058
0059     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0060
0061     onTouchPosChanged: {
0062         if (touchPos) {
0063             var padCenter = width / 2;
0064             var nubCenter = nub.width / 2;
0065             var maxDistance = plate.radius - nubCenter - border.border.width;
0066
0067             if ((touchPos.x - (padCenter)) * (touchPos.x - (padCenter))
0068                 + (touchPos.y - (padCenter)) * (touchPos.y - (padCenter))
0069                 <= maxDistance * maxDistance) {
0070                 nub.x = touchPos.x - nubCenter;
0071                 nub.y = touchPos.y - nubCenter;
0072             } else {
0073                 var angle = Math.atan2(touchPos.y - padCenter, touchPos.x - padCenter);
0074                 nub.x = Math.round(Math.cos(angle) * maxDistance + padCenter) - nubCenter;
0075                 nub.y = Math.round(Math.sin(angle) * maxDistance + padCenter) - nubCenter;
0076             }
0077         } else {
0078             nub.x = Qt.binding(function() { return width / 2 - nub.width / 2; });
0079             nub.y = Qt.binding(function() { return width / 2 - nub.width / 2; });
0080         }
0081     }
0082
0083     BlurredBackground { id: blurredBackground; mask: plate }
0084
0085     Rectangle {
0086         id: plate
0087
0088         anchors.fill: parent
0089
0090         radius: width / 2
0091
0092         color: "black"
0093         opacity: 0.15
0094     }
0095
0096     Rectangle {
0097         id: border
0098
0099         anchors.fill: parent
0100
0101         radius: width / 2
0102
0103         color: "transparent"
0104         opacity: 0.6
0105
0106         border.width: 1
0107         border.color: "white"
0108     }
0109
0110     Rectangle {
0111         id: nub
0112
0113         width: 2 * Math.round((parent.width / 4.3) / 2);
0114         height: width
0115
0116         radius: width / 2
0117
0118         color: touchPos ? Kirigami.Theme.highlightColor : "white"
0119         opacity: 0.4
0120
0121         Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0122     }
0123
0124     Rectangle {
0125         anchors.centerIn: nub
0126
0127         width: 2 * Math.round((parent.width / 5) / 2)
0128         height: width
0129
0130         radius: width / 2
0131
0132         color: "white"
0133         opacity: 0.74
0134     }
0135
0136     Kirigami.Icon {
0137         id: leftIcon
0138
0139         anchors.verticalCenter: parent.verticalCenter
0140         anchors.left: parent.left
0141         anchors.leftMargin: parent.height * 0.06
0142
0143         width: parent.height * 0.2
0144         height: width
0145
0146         property alias hovered: leftHoverHandler.hovered
0147
0148         color: "white"
0149         smooth: true
0150
0151         HoverHandler {
0152             id: leftHoverHandler
0153         }
0154
0155         QQC2.ToolTip.visible: leftHoverHandler.hovered && !page.touched
0156         QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0157         QQC2.ToolTip.text: leftToolTipText
0158     }
0159
0160     Kirigami.Icon {
0161         id: rightIcon
0162
0163         anchors.verticalCenter: parent.verticalCenter
0164         anchors.right: parent.right
0165         anchors.rightMargin: parent.height * 0.06
0166
0167         width: parent.height * 0.2
0168         height: width
0169
0170         property alias hovered: rightHoverHandler.hovered
0171
0172         color: "white"
0173         smooth: true
0174
0175         HoverHandler {
0176             id: rightHoverHandler
0177         }
0178
0179         QQC2.ToolTip.visible: rightHoverHandler.hovered && !page.touched
0180         QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0181         QQC2.ToolTip.text: rightToolTipText
0182     }
0183
0184     Kirigami.Icon {
0185         id: topIcon
0186
0187         anchors.horizontalCenter: parent.horizontalCenter
0188         anchors.top: parent.top
0189         anchors.topMargin: parent.height * 0.06
0190
0191         width: parent.height * 0.2
0192         height: width
0193
0194         property alias hovered: topHoverHandler.hovered
0195
0196         color: "white"
0197         smooth: true
0198
0199         HoverHandler {
0200             id: topHoverHandler
0201         }
0202
0203         QQC2.ToolTip.visible: topHoverHandler.hovered && !page.touched
0204         QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0205         QQC2.ToolTip.text: topToolTipText
0206     }
0207
0208     Kirigami.Icon {
0209         id: bottomIcon
0210
0211         anchors.horizontalCenter: parent.horizontalCenter
0212         anchors.bottom: parent.bottom
0213         anchors.bottomMargin: parent.height * 0.06
0214
0215         width: parent.height * 0.2
0216         height: width
0217
0218         property alias hovered: bottomHoverHandler.hovered
0219
0220         color: "white"
0221         smooth: true
0222
0223         HoverHandler {
0224             id: bottomHoverHandler
0225         }
0226
0227         QQC2.ToolTip.visible: bottomHoverHandler.hovered && !page.touched
0228         QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0229         QQC2.ToolTip.text: bottomToolTipText
0230     }
0231 }