zhaohuwei
/
QG4
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Improve virtual joystick graphics (#6182)

QGC4.4
Gus Grubba 7 years ago committed by Daniel Agar
parent
e7b6cbb080
commit
0a62b2244b
7 changed files with 117 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      qgcresources.qrc
  2. 11
      resources/chevron-down.svg
  3. 11
      resources/chevron-up.svg
  4. 14
      resources/clockwise-arrow.svg
  5. 15
      resources/counter-clockwise-arrow.svg
  6. 1
      src/FlightDisplay/VirtualJoystick.qml
  7. 63
      src/QmlControls/JoystickThumbPad.qml

4
qgcresources.qrc
Unescape View File

@ -182,6 +182,10 @@
<file alias="buttonLeft.svg">resources/buttonLeft.svg</file> <file alias="buttonLeft.svg">resources/buttonLeft.svg</file>
<file alias="buttonRight.svg">resources/buttonRight.svg</file> <file alias="buttonRight.svg">resources/buttonRight.svg</file>
<file alias="cancel.svg">resources/cancel.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-black.svg">resources/gear-black.svg</file>
<file alias="gear-white.svg">resources/gear-white.svg</file> <file alias="gear-white.svg">resources/gear-white.svg</file>
<file alias="helicoptericon.svg">resources/helicoptericon.svg</file> <file alias="helicoptericon.svg">resources/helicoptericon.svg</file>

11
resources/chevron-down.svg
Unescape View File

@ -0,0 +1,11 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 661 B

11
resources/chevron-up.svg
Unescape View File

@ -0,0 +1,11 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 661 B

14
resources/clockwise-arrow.svg
Unescape View File

@ -0,0 +1,14 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

15
resources/counter-clockwise-arrow.svg
Unescape View File

@ -0,0 +1,15 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

1
src/FlightDisplay/VirtualJoystick.qml
Unescape View File

@ -40,6 +40,7 @@ Item {
height: parent.height height: parent.height
yAxisThrottle: true yAxisThrottle: true
lightColors: useLightColors lightColors: useLightColors
throttle: true
} }
JoystickThumbPad { JoystickThumbPad {

63
src/QmlControls/JoystickThumbPad.qml
Unescape View File

@ -13,6 +13,7 @@ Item {
property bool yAxisThrottle: false ///< true: yAxis used for throttle, range [1,0], positive value are stick up 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 xPositionDelta: 0 ///< Amount to move the control on x axis
property real yPositionDelta: 0 ///< Amount to move the control on y axis property real yPositionDelta: 0 ///< Amount to move the control on y axis
property bool throttle: false
property real _centerXY: width / 2 property real _centerXY: width / 2
property bool _processTouchPoints: false property bool _processTouchPoints: false
@ -83,13 +84,69 @@ Item {
smooth: true 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 { Rectangle {
anchors.margins: parent.width / 4 anchors.margins: parent.width / 4
anchors.fill: parent anchors.fill: parent
radius: width / 2 radius: width / 2
border.color: mapPal.thumbJoystick border.color: mapPal.thumbJoystick
border.width: 2 border.width: 2
color: "transparent" color: Qt.rgba(0,0,0,0)
} }
Rectangle { Rectangle {
@ -97,13 +154,15 @@ Item {
radius: width / 2 radius: width / 2
border.color: mapPal.thumbJoystick border.color: mapPal.thumbJoystick
border.width: 2 border.width: 2
color: "transparent" color: Qt.rgba(0,0,0,0)
} }
Rectangle { Rectangle {
width: hatWidth width: hatWidth
height: hatWidth height: hatWidth
radius: hatWidthHalf radius: hatWidthHalf
border.color: lightColors ? "white" : "black"
border.width: 1
color: mapPal.thumbJoystick color: mapPal.thumbJoystick
x: stickPositionX - hatWidthHalf x: stickPositionX - hatWidthHalf
y: stickPositionY - hatWidthHalf y: stickPositionY - hatWidthHalf

Write Preview
Loading…
Cancel
Save