From 0a62b2244b2cfc4532ae7c4d12fd86b003ab2866 Mon Sep 17 00:00:00 2001 From: Gus Grubba Date: Sat, 4 Aug 2018 10:39:26 -0400 Subject: [PATCH] Improve virtual joystick graphics (#6182) --- qgcresources.qrc | 4 ++ resources/chevron-down.svg | 11 +++++ resources/chevron-up.svg | 11 +++++ resources/clockwise-arrow.svg | 14 ++++++ resources/counter-clockwise-arrow.svg | 15 +++++++ src/FlightDisplay/VirtualJoystick.qml | 1 + src/QmlControls/JoystickThumbPad.qml | 63 ++++++++++++++++++++++++++- 7 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 resources/chevron-down.svg create mode 100644 resources/chevron-up.svg create mode 100644 resources/clockwise-arrow.svg create mode 100644 resources/counter-clockwise-arrow.svg diff --git a/qgcresources.qrc b/qgcresources.qrc index 51d2023c6..b274d33fd 100644 --- a/qgcresources.qrc +++ b/qgcresources.qrc @@ -182,6 +182,10 @@ resources/buttonLeft.svg resources/buttonRight.svg resources/cancel.svg + resources/clockwise-arrow.svg + resources/counter-clockwise-arrow.svg + resources/chevron-down.svg + resources/chevron-up.svg resources/gear-black.svg resources/gear-white.svg resources/helicoptericon.svg diff --git a/resources/chevron-down.svg b/resources/chevron-down.svg new file mode 100644 index 000000000..4ec4206e9 --- /dev/null +++ b/resources/chevron-down.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/resources/chevron-up.svg b/resources/chevron-up.svg new file mode 100644 index 000000000..826df1a51 --- /dev/null +++ b/resources/chevron-up.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/resources/clockwise-arrow.svg b/resources/clockwise-arrow.svg new file mode 100644 index 000000000..d73d080ef --- /dev/null +++ b/resources/clockwise-arrow.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/resources/counter-clockwise-arrow.svg b/resources/counter-clockwise-arrow.svg new file mode 100644 index 000000000..e1e94d855 --- /dev/null +++ b/resources/counter-clockwise-arrow.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/src/FlightDisplay/VirtualJoystick.qml b/src/FlightDisplay/VirtualJoystick.qml index e49cd2122..777f0ca0d 100644 --- a/src/FlightDisplay/VirtualJoystick.qml +++ b/src/FlightDisplay/VirtualJoystick.qml @@ -40,6 +40,7 @@ Item { height: parent.height yAxisThrottle: true lightColors: useLightColors + throttle: true } JoystickThumbPad { diff --git a/src/QmlControls/JoystickThumbPad.qml b/src/QmlControls/JoystickThumbPad.qml index 5b3e81695..de7b54e18 100644 --- a/src/QmlControls/JoystickThumbPad.qml +++ b/src/QmlControls/JoystickThumbPad.qml @@ -13,6 +13,7 @@ Item { 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 ///< Amount to move the control on y axis + property bool throttle: false property real _centerXY: width / 2 property bool _processTouchPoints: false @@ -83,13 +84,69 @@ Item { smooth: true } + QGCColoredImage { + color: lightColors ? "white" : "black" + visible: throttle + height: ScreenTools.defaultFontPixelHeight + width: height + sourceSize.height: height + mipmap: true + fillMode: Image.PreserveAspectFit + source: "/res/clockwise-arrow.svg" + anchors.right: parent.right + anchors.rightMargin: ScreenTools.defaultFontPixelWidth + anchors.verticalCenter: parent.verticalCenter + } + + QGCColoredImage { + color: lightColors ? "white" : "black" + visible: throttle + height: ScreenTools.defaultFontPixelHeight + width: height + sourceSize.height: height + mipmap: true + fillMode: Image.PreserveAspectFit + source: "/res/counter-clockwise-arrow.svg" + anchors.left: parent.left + anchors.leftMargin: ScreenTools.defaultFontPixelWidth + anchors.verticalCenter: parent.verticalCenter + } + + QGCColoredImage { + color: lightColors ? "white" : "black" + visible: throttle + height: ScreenTools.defaultFontPixelHeight + width: height + sourceSize.height: height + mipmap: true + fillMode: Image.PreserveAspectFit + source: "/res/chevron-up.svg" + anchors.top: parent.top + anchors.topMargin: ScreenTools.defaultFontPixelWidth + anchors.horizontalCenter: parent.horizontalCenter + } + + QGCColoredImage { + color: lightColors ? "white" : "black" + visible: throttle + height: ScreenTools.defaultFontPixelHeight + width: height + sourceSize.height: height + mipmap: true + fillMode: Image.PreserveAspectFit + source: "/res/chevron-down.svg" + anchors.bottom: parent.bottom + anchors.bottomMargin: ScreenTools.defaultFontPixelWidth + anchors.horizontalCenter: parent.horizontalCenter + } + Rectangle { anchors.margins: parent.width / 4 anchors.fill: parent radius: width / 2 border.color: mapPal.thumbJoystick border.width: 2 - color: "transparent" + color: Qt.rgba(0,0,0,0) } Rectangle { @@ -97,13 +154,15 @@ Item { radius: width / 2 border.color: mapPal.thumbJoystick border.width: 2 - color: "transparent" + color: Qt.rgba(0,0,0,0) } Rectangle { width: hatWidth height: hatWidth radius: hatWidthHalf + border.color: lightColors ? "white" : "black" + border.width: 1 color: mapPal.thumbJoystick x: stickPositionX - hatWidthHalf y: stickPositionY - hatWidthHalf -- 2.22.0