From b946e889446d615ac7abf985592e01fafee68217 Mon Sep 17 00:00:00 2001 From: Don Gagne Date: Sun, 17 Jan 2016 19:35:34 -0800 Subject: [PATCH] ThumbStick improvements - Positions are bounded to rectangle - No longer re-centers if thumbs go outside bounds - ThumbPad moves to meet first thumb position, this prevents inadvertent movement as you put your thumb down --- src/FlightDisplay/FlightDisplayView.qml | 121 +++++------------------- src/QmlControls/JoystickThumbPad.qml | 79 ++++++++++++---- 2 files changed, 84 insertions(+), 116 deletions(-) diff --git a/src/FlightDisplay/FlightDisplayView.qml b/src/FlightDisplay/FlightDisplayView.qml index 9299d0085..3a92eaa7d 100644 --- a/src/FlightDisplay/FlightDisplayView.qml +++ b/src/FlightDisplay/FlightDisplayView.qml @@ -208,95 +208,18 @@ Item { //-- Virtual Joystick Item { - id: multiTouchItem - width: parent.width - (pip.width / 2) - height: thumbAreaHeight - visible: QGroundControl.virtualTabletJoystick - anchors.bottom: pip.top - anchors.bottomMargin: ScreenTools.defaultFontPixelHeight * 2 - anchors.horizontalCenter: parent.horizontalCenter + id: multiTouchItem + width: parent.width - (pip.width / 2) + height: thumbAreaHeight + visible: QGroundControl.virtualTabletJoystick + anchors.bottom: pip.top + anchors.bottomMargin: ScreenTools.defaultFontPixelHeight * 2 + anchors.horizontalCenter: parent.horizontalCenter readonly property real thumbAreaHeight: Math.min(parent.height * 0.25, ScreenTools.defaultFontPixelWidth * 16) QGCMapPalette { id: mapPal; lightColors: !isBackgroundDark } - MultiPointTouchArea { - anchors.fill: parent - touchPoints: [ - TouchPoint { id: point1 }, - TouchPoint { id: point2 } - ] - - property var leftRect: Qt.rect(0, 0, parent.thumbAreaHeight, parent.thumbAreaHeight) - property var rightRect: Qt.rect(parent.width - parent.thumbAreaHeight, 0, parent.thumbAreaHeight, parent.thumbAreaHeight) - - function pointInRect(rect, point) { - return point.x >= rect.x && - point.y >= rect.y && - point.x <= rect.x + rect.width && - point.y <= rect.y + rect.height - } - - function newTouchPoints(touchPoints) - { - var point1Location = 0 - var point2Location = 0 - - var point1 - if (touchPoints.length > 0) { - point1 = touchPoints[0] - if (pointInRect(leftRect, point1)) { - point1Location = -1 - } else if (pointInRect(rightRect, point1)) { - point1Location = 1 - } - } - - var point2 - if (touchPoints.length == 2) { - point2 = touchPoints[1] - if (pointInRect(leftRect, point2)) { - point2Location = -1 - } else if (pointInRect(rightRect, point2)) { - point2Location = 1 - } - } - - var leftStickSet = false - var rightStickSet = false - - // Make sure points are not both in the same rect - if (point1Location != point2Location) { - if (point1Location != 0) { - if (point1Location == -1) { - leftStick.stickPosition = point1 - leftStickSet = true - } else { - rightStick.stickPosition = Qt.point(point1.x - (multiTouchItem.width - multiTouchItem.thumbAreaHeight), point1.y) - rightStickSet = true - } - } - if (point2Location != 0) { - if (point2Location == -1) { - leftStick.stickPosition = point2 - leftStickSet = true - } else { - rightStick.stickPosition = Qt.point(point2.x - (multiTouchItem.width - multiTouchItem.thumbAreaHeight), point2.y) - rightStickSet = true - } - } - } - if (!leftStickSet) { - leftStick.reCenter() - } - if (!rightStickSet) { - rightStick.reCenter() - } - } - - onTouchUpdated: newTouchPoints(touchPoints) - } - Timer { interval: 40 // 25Hz, same as real joystick rate running: QGroundControl.virtualTabletJoystick && _activeVehicle @@ -309,22 +232,26 @@ Item { } JoystickThumbPad { - id: leftStick - anchors.left: parent.left - anchors.bottom: parent.bottom - width: parent.thumbAreaHeight - height: parent.thumbAreaHeight - yAxisThrottle: true - lightColors: !isBackgroundDark + id: leftStick + anchors.leftMargin: xPositionDelta + anchors.bottomMargin: -yPositionDelta + anchors.left: parent.left + anchors.bottom: parent.bottom + width: parent.thumbAreaHeight + height: parent.thumbAreaHeight + yAxisThrottle: true + lightColors: !isBackgroundDark } JoystickThumbPad { - id: rightStick - anchors.right: parent.right - anchors.bottom: parent.bottom - width: parent.thumbAreaHeight - height: parent.thumbAreaHeight - lightColors: !isBackgroundDark + id: rightStick + anchors.rightMargin: -xPositionDelta + anchors.bottomMargin: -yPositionDelta + anchors.right: parent.right + anchors.bottom: parent.bottom + width: parent.thumbAreaHeight + height: parent.thumbAreaHeight + lightColors: !isBackgroundDark } } } diff --git a/src/QmlControls/JoystickThumbPad.qml b/src/QmlControls/JoystickThumbPad.qml index c702c3111..ea517d631 100644 --- a/src/QmlControls/JoystickThumbPad.qml +++ b/src/QmlControls/JoystickThumbPad.qml @@ -7,29 +7,30 @@ import QGroundControl.ScreenTools 1.0 Item { id: _joyRoot - property alias lightColors: mapPal.lightColors /// true: use light colors from QGCMapPalette for drawing - property var stickPosition: Qt.point(0, 0) - property real xAxis: 0 /// Value range [-1,1], negative values left stick, positive values right stick - property real yAxis: 0 /// Value range [-1,1], negative values up stick, positive values down stick - property bool yAxisThrottle: false /// true: yAxis used for throttle, range [1,0], positive value are stick up + property alias lightColors: mapPal.lightColors ///< true: use light colors from QGCMapPalette for drawing + property real xAxis: 0 ///< Value range [-1,1], negative values left stick, positive values right stick + property real yAxis: 0 ///< Value range [-1,1], negative values up stick, positive values down stick + property bool yAxisThrottle: false ///< true: yAxis used for throttle, range [1,0], positive value are stick up + property real xPositionDelta: 0 ///< Amount to move the control on x axis + property real yPositionDelta: 0 ///< Anount to move the control on y axis - property bool _stickCenteredOnce: false + property real _centerXY: width / 2 + property bool _processTouchPoints: false + property bool _stickCenteredOnce: false + property real stickPositionX: _centerXY + property real stickPositionY: _centerXY QGCMapPalette { id: mapPal } - onWidthChanged: { - if (!_stickCenteredOnce && width != 0) { - reCenter() - } - } - - onStickPositionChanged: { - var xAxisTemp = stickPosition.x / width + onStickPositionXChanged: { + var xAxisTemp = stickPositionX / width xAxisTemp *= 2.0 xAxisTemp -= 1.0 xAxis = xAxisTemp + } - var yAxisTemp = stickPosition.y / width + onStickPositionYChanged: { + var yAxisTemp = stickPositionY / width yAxisTemp *= 2.0 yAxisTemp -= 1.0 if (yAxisThrottle) { @@ -40,11 +41,26 @@ Item { function reCenter() { - stickPosition = Qt.point(width / 2, width / 2) + _processTouchPoints = false + // Move control back to original position + xPositionDelta = 0 + yPositionDelta = 0 + // Center sticks + stickPositionX = _centerXY + stickPositionY = _centerXY + } + + function thumbDown(touchPoints) + { + // Center the control around the initial thumb position + xPositionDelta = touchPoints[0].x - _centerXY + yPositionDelta = touchPoints[0].y - _centerXY + // We need to wait until we move the control to the right position before we process touch points + _processTouchPoints = true } /* - Keep in for debugging + // Keep in for debugging Column { QGCLabel { text: xAxis } QGCLabel { text: yAxis } @@ -72,10 +88,35 @@ Item { height: hatWidth radius: hatWidthHalf color: mapPal.thumbJoystick - x: stickPosition.x - hatWidthHalf - y: stickPosition.y - hatWidthHalf + x: stickPositionX - hatWidthHalf + y: stickPositionY - hatWidthHalf readonly property real hatWidth: ScreenTools.defaultFontPixelHeight readonly property real hatWidthHalf: ScreenTools.defaultFontPixelHeight / 2 } + + Connections { + target: touchPoint + + onXChanged: { + if (_processTouchPoints) { + _joyRoot.stickPositionX = Math.max(Math.min(touchPoint.x, _joyRoot.width), 0) + } + } + onYChanged: { + if (_processTouchPoints) { + _joyRoot.stickPositionY = Math.max(Math.min(touchPoint.y, _joyRoot.height), 0) + } + } + } + + MultiPointTouchArea { + anchors.fill: parent + minimumTouchPoints: 1 + maximumTouchPoints: 1 + touchPoints: [ TouchPoint { id: touchPoint } ] + + onPressed: _joyRoot.thumbDown(touchPoints) + onReleased: _joyRoot.reCenter() + } } -- 2.22.0