Skip to content
GitLab
Commit 0a62b224 authored by Gus Grubba's avatar Gus Grubba Committed by Daniel Agar
Browse files

Improve virtual joystick graphics (#6182)

parent e7b6cbb0
Hide whitespace changes
Inline Side-by-side
qgcresources.qrc
View file @ 0a62b224
......@@ -182,6 +182,10 @@
<file alias="buttonLeft.svg">resources/buttonLeft.svg</file>
<file alias="buttonRight.svg">resources/buttonRight.svg</file>
<file alias="cancel.svg">resources/cancel.svg</file>
<file alias="clockwise-arrow.svg">resources/clockwise-arrow.svg</file>
<file alias="counter-clockwise-arrow.svg">resources/counter-clockwise-arrow.svg</file>
<file alias="chevron-down.svg">resources/chevron-down.svg</file>
<file alias="chevron-up.svg">resources/chevron-up.svg</file>
<file alias="gear-black.svg">resources/gear-black.svg</file>
<file alias="gear-white.svg">resources/gear-white.svg</file>
<file alias="helicoptericon.svg">resources/helicoptericon.svg</file>
......
resources/chevron-down.svg 0 → 100644
View file @ 0a62b224
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72px" height="72px" viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css">
.st0{stroke:#000000;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M36,41.877"/>
<polygon class="st0" points="36,40.818 70.2,33.61 36,50.144 1.8,33.61 "/>
<polygon class="st0" points="36,29.063 70.2,21.856 36,38.39 1.8,21.856 "/>
</svg>
resources/chevron-up.svg 0 → 100644
View file @ 0a62b224
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72px" height="72px" viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css">
.st0{stroke:#000000;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M36,30.123"/>
<polygon class="st0" points="36,31.182 70.2,38.39 36,21.856 1.8,38.39 "/>
<polygon class="st0" points="36,42.937 70.2,50.144 36,33.61 1.8,50.144 "/>
</svg>
resources/clockwise-arrow.svg 0 → 100644
View file @ 0a62b224
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72px" height="72px" viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css">
.st0{fill:#010002;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M70.2,33.1c0-8.7-15-15.5-34.2-15.5S1.8,24.4,1.8,33.1c0,0.6,0.5,1.1,1.1,1.1S4,33.7,4,33.1
c0-7.2,14.7-13.3,32-13.3s32,6.1,32,13.3c0,7.1-14.4,13.2-31.6,13.3l3.9-3.9c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.1-0.4-1.6,0
l-6.6,6.6l6.6,6.6c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3c0.4-0.4,0.4-1.1,0-1.6l-3.9-3.9C55.4,48.5,70.2,41.7,70.2,33.1z"
/>
</g>
</svg>
resources/counter-clockwise-arrow.svg 0 → 100644
View file @ 0a62b224
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72px" height="72px" viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css">
.st0{fill:#010002;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M35.63,48.573l-3.947,3.945c-0.43,0.43-0.43,1.132,0,1.56c0.214,0.214,0.496,0.322,0.781,0.322
c0.282,0,0.565-0.104,0.781-0.322l6.602-6.6l-6.602-6.597c-0.43-0.428-1.13-0.428-1.56,0c-0.43,0.43-0.43,1.132,0,1.56l3.93,3.925
C18.443,46.276,4.007,40.235,4.007,33.091c0-7.2,14.653-13.285,31.994-13.285s31.994,6.083,31.994,13.285
c0,0.609,0.494,1.103,1.103,1.103c0.609,0,1.103-0.494,1.103-1.103c0-8.687-15.024-15.491-34.2-15.491S1.8,24.402,1.8,33.091
C1.8,41.72,16.634,48.481,35.63,48.573z"/>
</g>
</svg>
src/FlightDisplay/VirtualJoystick.qml
View file @ 0a62b224
......@@ -40,6 +40,7 @@ Item {
height: parent.height
yAxisThrottle: true
lightColors: useLightColors
throttle: true
}
JoystickThumbPad {
......
src/QmlControls/JoystickThumbPad.qml
View file @ 0a62b224
......@@ -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
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment