Merge pull request #2307 from dogmaphobic/thumbStick

Thumb stick

qgcresources.qrc

@@ -101,16 +101,18 @@
     </qresource>
 
     <qresource prefix="/res">
-        <file alias="Play">resources/Play.svg</file>
-        <file alias="Pause">resources/Pause.svg</file>
-        <file alias="Stop">resources/Stop.svg</file>
-        <file alias="AntennaT">resources/Antenna_T.svg</file>
         <file alias="AntennaRC">resources/Antenna_RC.svg</file>
-        <file alias="SplashScreen">resources/SplashScreen.png</file>
-        <file alias="QGroundControlConnect">resources/QGroundControlConnect.svg</file>
-        <file alias="PowerButton">resources/PowerButton.svg</file>
+        <file alias="AntennaT">resources/Antenna_T.svg</file>
         <file alias="buttonLeft.svg">resources/buttonLeft.svg</file>
         <file alias="buttonRight.svg">resources/buttonRight.svg</file>
+        <file alias="JoystickBezel.png">resources/JoystickBezel.png</file>
+        <file alias="JoystickBezelLight.png">resources/JoystickBezelLight.png</file>
+        <file alias="Pause">resources/Pause.svg</file>
+        <file alias="Play">resources/Play.svg</file>
+        <file alias="PowerButton">resources/PowerButton.svg</file>
+        <file alias="QGroundControlConnect">resources/QGroundControlConnect.svg</file>
+        <file alias="SplashScreen">resources/SplashScreen.png</file>
+        <file alias="Stop">resources/Stop.svg</file>
         <file alias="XDelete.svg">resources/XDelete.svg</file>
         <file alias="XDeleteBlack.svg">resources/XDeleteBlack.svg</file>
     </qresource>

src/FlightDisplay/FlightDisplayView.qml

@@ -128,7 +128,7 @@ Item {
     }
 
     //-- PIP Window
-    Rectangle {
+    Item {
         id:                 pip
         visible:            _controller.hasVideo && _isPipVisible
         anchors.margins:    ScreenTools.defaultFontPixelHeight
@@ -136,8 +136,6 @@ Item {
         anchors.bottom:     parent.bottom
         width:              _pipSize
         height:             _pipSize * (9/16)
-        color:              "#000010"
-        border.color:       isBackgroundDark ? Qt.rgba(1,1,1,0.75) : Qt.rgba(0,0,0,0.75)
         Loader {
             id:                 pipLoader
             anchors.fill:       parent
@@ -216,15 +214,17 @@ Item {
         height:             availableHeight
     }
 
+    //-- Virtual Joystick
     Item {
         id:             multiTouchItem
-        anchors.left:   parent.left
-        anchors.right:  parent.right
-        anchors.bottom: parent.bottom
+        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: parent.height / 4
+        readonly property real thumbAreaHeight: Math.min(parent.height * 0.25, ScreenTools.defaultFontPixelWidth * 16)
 
         QGCMapPalette { id: mapPal; lightColors: !isBackgroundDark }
 
@@ -313,7 +313,6 @@ Item {
             interval:   10
             running:    QGroundControl.virtualTabletJoystick
             repeat:     true
-
             onTriggered: {
                 if (_activeVehicle) {
                     _activeVehicle.virtualTabletJoystickValue(rightStick.xAxis, rightStick.yAxis, leftStick.xAxis, leftStick.yAxis)

src/FlightDisplay/FlightDisplayViewVideo.qml

@@ -39,7 +39,7 @@ Item {
     Rectangle {
         id:             noVideo
         anchors.fill:   parent
-        color:          "black"
+        color:          Qt.rgba(0,0,0,0.75)
         visible:        !_controller.videoRunning
         QGCLabel {
             text:               "NO VIDEO"

src/FlightDisplay/FlightDisplayViewWidgets.qml

@@ -92,7 +92,7 @@ Item {
         anchors.margins:        ScreenTools.defaultFontPixelHeight
         anchors.right:          parent.right
         anchors.verticalCenter: parent.verticalCenter
-        visible:                _isInstrumentVisible
+        visible:                _isInstrumentVisible && !QGroundControl.virtualTabletJoystick
         size:                   getGadgetWidth()
         active:                 _activeVehicle != null
         heading:                _heading
@@ -109,6 +109,55 @@ Item {
         }
     }
 
+    //-- Alternate Instrument Panel
+    Rectangle {
+        visible:            QGroundControl.virtualTabletJoystick
+        anchors.margins:    ScreenTools.defaultFontPixelHeight
+        anchors.right:      parent.right
+        anchors.bottom:     parent.bottom
+        width:              _pipSize
+        height:             _pipSize * (9/16)
+        color:              Qt.rgba(0,0,0,0.75)
+        Column {
+            id:                 instruments
+            width:              parent.width
+            spacing:            ScreenTools.defaultFontPixelSize * 0.33
+            anchors.verticalCenter: parent.verticalCenter
+            QGCLabel {
+                text:           "Altitude (m)"
+                font.pixelSize: ScreenTools.defaultFontPixelSize * 0.75
+                width:          parent.width
+                height:         ScreenTools.defaultFontPixelSize * 0.75
+                color:          "white"
+                horizontalAlignment: TextEdit.AlignHCenter
+            }
+            QGCLabel {
+                text:           _altitudeWGS84 < 10000 ? _altitudeWGS84.toFixed(1) : _altitudeWGS84.toFixed(0)
+                font.pixelSize: ScreenTools.defaultFontPixelSize * 1.5
+                font.weight:    Font.DemiBold
+                width:          parent.width
+                color:          "white"
+                horizontalAlignment: TextEdit.AlignHCenter
+            }
+            QGCLabel {
+                text:           "Ground Speed (km/h)"
+                font.pixelSize: ScreenTools.defaultFontPixelSize * 0.75
+                width:          parent.width
+                height:         ScreenTools.defaultFontPixelSize * 0.75
+                color:          "white"
+                horizontalAlignment: TextEdit.AlignHCenter
+            }
+            QGCLabel {
+                text:           (_groundSpeed * 3.6).toFixed(1)
+                font.pixelSize: ScreenTools.defaultFontPixelSize
+                font.weight:    Font.DemiBold
+                width:          parent.width
+                color:          "white"
+                horizontalAlignment: TextEdit.AlignHCenter
+            }
+        }
+    }
+
     //-- Show (Hidden) Instrument Panel
     Rectangle {
         id:                     openButton
@@ -118,7 +167,7 @@ Item {
         height:                 ScreenTools.defaultFontPixelSize * 2
         width:                  ScreenTools.defaultFontPixelSize * 2
         radius:                 ScreenTools.defaultFontPixelSize / 3
-        visible:                !_isInstrumentVisible
+        visible:                !_isInstrumentVisible && !QGroundControl.virtualTabletJoystick
         color:                  isBackgroundDark ? Qt.rgba(0,0,0,0.75) : Qt.rgba(0,0,0,0.5)
         Image {
             width:              parent.width  * 0.75

src/QGCMapPalette.cc

@@ -26,7 +26,7 @@
 #include <QApplication>
 #include <QPalette>
 
-QColor QGCMapPalette::_thumbJoystick[QGCMapPalette::_cColorGroups] = { QColor("#ffffff"), QColor("#f000000") };
+QColor QGCMapPalette::_thumbJoystick[QGCMapPalette::_cColorGroups] = { QColor(255,255,255,127), QColor(0,0,0,127) };
 
 QGCMapPalette::QGCMapPalette(QObject* parent) :
     QObject(parent)

src/QmlControls/JoystickThumbPad.qml

@@ -4,11 +4,8 @@ import QtQuick.Controls         1.2
 import QGroundControl.Palette       1.0
 import QGroundControl.ScreenTools   1.0
 
-Rectangle {
-    radius:         width / 2
-    border.color:   mapPal.thumbJoystick
-    border.width:   2
-    color:          "transparent"
+Item {
+    id:             _joyRoot
 
     property alias  lightColors:            mapPal.lightColors  /// true: use light colors from QGCMapPalette for drawing
     property var    stickPosition:          Qt.point(0, 0)
@@ -54,6 +51,13 @@ Rectangle {
     }
     */
 
+    Image {
+        anchors.fill:       parent
+        source:             lightColors ? "/res/JoystickBezel.png" : "/res/JoystickBezelLight.png"
+        mipmap:             true
+        smooth:             true
+    }
+
     Rectangle {
         anchors.margins:    parent.width / 4
         anchors.fill:       parent