Merge pull request #3026 from DonLakeFlyer/SliderSwitch

Add new SliderSwitch control, use for Guide mode confirmation

qgroundcontrol.qrc

@@ -81,6 +81,7 @@
         <file alias="QGroundControl/Controls/QGCViewPanel.qml">src/QmlControls/QGCViewPanel.qml</file>
         <file alias="QGroundControl/Controls/RoundButton.qml">src/QmlControls/RoundButton.qml</file>
         <file alias="QGroundControl/Controls/SignalStrength.qml">src/ui/toolbar/SignalStrength.qml</file>
+        <file alias="QGroundControl/Controls/SliderSwitch.qml">src/QmlControls/SliderSwitch.qml</file>
         <file alias="QGroundControl/Controls/SubMenuButton.qml">src/QmlControls/SubMenuButton.qml</file>
         <file alias="QGroundControl/Controls/VehicleRotationCal.qml">src/QmlControls/VehicleRotationCal.qml</file>
         <file alias="QGroundControl/Controls/VehicleSummaryRow.qml">src/QmlControls/VehicleSummaryRow.qml</file>

src/FlightDisplay/FlightDisplayViewWidgets.qml

@@ -271,8 +271,8 @@ Item {
         anchors.margins:            _margins
         anchors.bottom:             parent.bottom
         anchors.horizontalCenter:   parent.horizontalCenter
-        width:                      (guidedModeButtons.visible ? guidedModeButtons.width : guidedModeConfirm.width) + (_margins * 2)
-        height:                     (guidedModeButtons.visible ? guidedModeButtons.height : guidedModeConfirm.height) + (_margins * 2)
+        width:                      guidedModeButtons.width + (_margins * 2)
+        height:                     guidedModeButtons.height + (_margins * 2)
         color:                      qgcPal.window
         visible:                    _activeVehicle
         opacity:                    0.9
@@ -289,7 +289,6 @@ Item {
         readonly property int confirmRetask:        9
 
         property int    confirmActionCode
-        property string confirmText
 
         function actionConfirmed() {
             switch (confirmActionCode) {
@@ -335,35 +334,35 @@ Item {
             confirmActionCode = actionCode
             switch (confirmActionCode) {
             case confirmArm:
-                _guidedModeBar.confirmText = "arm"
+                guidedModeConfirm.confirmText = "arm"
                 break;
             case confirmDisarm:
-                _guidedModeBar.confirmText = "disarm"
+                guidedModeConfirm.confirmText = "disarm"
                 break;
             case confirmEmergencyStop:
-                _guidedModeBar.confirmText = "emergency stop"
+                guidedModeConfirm.confirmText = "STOP ALL MOTORS!"
                 break;
             case confirmTakeoff:
                 altitudeSlider.visible = true
                 altitudeSlider.setInitialValueMeters(10)
-                _guidedModeBar.confirmText = "takeoff"
+                guidedModeConfirm.confirmText = "takeoff"
                 break;
             case confirmLand:
-                _guidedModeBar.confirmText = "land"
+                guidedModeConfirm.confirmText = "land"
                 break;
             case confirmChangeAlt:
                 altitudeSlider.visible = true
                 altitudeSlider.setInitialValueAppSettingsDistanceUnits(_activeVehicle.altitudeAMSL.value)
-                _guidedModeBar.confirmText = "altitude change"
+                guidedModeConfirm.confirmText = "change altitude"
                 break;
             case confirmGoTo:
-                _guidedModeBar.confirmText = "move"
+                guidedModeConfirm.confirmText = "move vehicle"
                 break;
             case confirmRetask:
                 _guidedModeBar.confirmText = "active waypoint change"
                 break;
             }
-            guidedModeButtons.visible = false
+            guidedModeBar.visible = false
             guidedModeConfirm.visible = true
         }
 
@@ -404,6 +403,7 @@ Item {
             }
         }
 
+        /*
         Row {
             id:                 guidedModeConfirm
             anchors.margins:    _margins
@@ -436,8 +436,32 @@ Item {
                     _flightMap._gotoHereCoordinate = QtPositioning.coordinate()
                 }
             }
+        }*/
+    } // Rectangle - Guided mode buttons
+
+    // Action confirmation control
+    SliderSwitch {
+        id:                         guidedModeConfirm
+        anchors.top:                _guidedModeBar.top
+        anchors.bottom:             _guidedModeBar.bottom
+        anchors.horizontalCenter:   parent.horizontalCenter
+        visible:                    false
+        z:                          QGroundControl.zOrderWidgets
+
+        onAccept: {
+            guidedModeConfirm.visible = false
+            guidedModeBar.visible = true
+            _guidedModeBar.actionConfirmed()
+            altitudeSlider.visible = false
         }
-    } // Column - Vertical tool buttons
+
+        onReject: {
+            guidedModeConfirm.visible = false
+            guidedModeBar.visible = true
+            altitudeSlider.visible = false
+            _flightMap._gotoHereCoordinate = QtPositioning.coordinate()
+        }
+    }
 
     //-- Altitude slider
     Rectangle {

src/QmlControls/QGroundControl.Controls.qmldir

@@ -32,6 +32,7 @@ QGCViewMessage          1.0 QGCViewMessage.qml
 QGCViewPanel            1.0 QGCViewPanel.qml
 RoundButton             1.0 RoundButton.qml
 SignalStrength          1.0 SignalStrength.qml
+SliderSwitch            1.0 SliderSwitch.qml
 SubMenuButton           1.0 SubMenuButton.qml
 VehicleRotationCal      1.0 VehicleRotationCal.qml
 VehicleSummaryRow       1.0 VehicleSummaryRow.qml

src/QmlControls/SliderSwitch.qml

+import QtQuick                  2.5
+import QtQuick.Controls         1.4
+
+import QGroundControl.ScreenTools   1.0
+import QGroundControl.Palette       1.0
+
+/// The SliderSwitch control implements a sliding switch control similar to the power off
+/// control on an iPhone.
+Rectangle {
+    id:     _root
+    width:  label.contentWidth + (_diameter * 2) + (_border * 4)
+    radius: height /2
+    color:  qgcPal.window
+
+    signal accept   ///< Action confirmed
+    signal reject   ///< Action rejected
+
+    property string confirmText ///< Text for slider
+
+    property real _border: 4
+    property real _diameter: height - (_border * 2)
+
+    QGCPalette { id: qgcPal; colorGroupEnabled: true }
+
+    QGCLabel {
+        id: label
+        anchors.horizontalCenter:   parent.horizontalCenter
+        anchors.verticalCenter:     parent.verticalCenter
+        text:   "Slide to " + confirmText
+    }
+
+    Rectangle {
+        id:         slider
+        x:          _border
+        y:          _border
+        height:     _diameter
+        width:      _diameter
+        radius:     _diameter / 2
+        color:      qgcPal.windowShade
+        opacity:    0.8
+
+        MouseArea {
+            id:             sliderDragArea
+            anchors.fill:   parent
+            onClicked:      _root.accept()
+            drag.target:    slider
+            drag.axis:      Drag.XAxis
+            drag.minimumX:  _border
+            drag.maximumX:  _maxXDrag
+
+            property real _maxXDrag:    _root.width - ((_diameter + _border) * 2)
+            property bool dragActive:   drag.active
+
+            onDragActiveChanged: {
+                if (!sliderDragArea.drag.active) {
+                    if (slider.x > _maxXDrag - _border) {
+                        _root.accept()
+                    }
+                    slider.x = _border
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id:                     cancel
+        anchors.rightMargin:    _border
+        anchors.right:          parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        height:                 _diameter
+        width:                  _diameter
+        radius:                 _diameter / 2
+        color:                  qgcPal.windowShade
+        opacity:                0.8
+
+        MouseArea {
+            anchors.fill:   parent
+            onClicked:      _root.reject()
+        }
+    }
+}