From a204a40b3fa44526e701f6c9caacc315d5f66770 Mon Sep 17 00:00:00 2001
From: Don Gagne <don@thegagnes.com>
Date: Fri, 9 Oct 2015 19:32:10 -0700
Subject: [PATCH] MissionEditor usability changes

---
 qgroundcontrol.qrc                  |   4 +
 resources/Sync.png                  | Bin 0 -> 3561 bytes
 src/MissionEditor/MissionEditor.qml | 428 ++++++++++++++++++++++------
 src/QmlControls/DropButton.qml      |  57 ++--
 4 files changed, 379 insertions(+), 110 deletions(-)
 create mode 100644 resources/Sync.png

diff --git a/qgroundcontrol.qrc b/qgroundcontrol.qrc
index f304cc54b..25650be9f 100644
--- a/qgroundcontrol.qrc
+++ b/qgroundcontrol.qrc
@@ -3,6 +3,7 @@
         <file alias="MockLink.params">src/comm/MockLink.params</file>
         <file alias="FactSystemTest.qml">src/FactSystem/FactSystemTest.qml</file>
     </qresource>
+
     <qresource prefix="/qmlimages">
         <file alias="SafetyComponentTree.svg">src/AutoPilotPlugins/PX4/Images/SafetyComponentTree.svg</file>
         <file alias="SafetyComponentHome.png">src/AutoPilotPlugins/PX4/Images/SafetyComponentHome.png</file>
@@ -66,6 +67,9 @@
         <file alias="MapCenter.svg">src/FlightMap/Images/MapCenter.svg</file>
         <file alias="ZoomPlus.svg">src/FlightMap/Images/ZoomPlus.svg</file>
         <file alias="ZoomMinus.svg">src/FlightMap/Images/ZoomMinus.svg</file>
+
+        <!-- Map Buttons -->
+        <file alias="Sync.png">resources/Sync.png</file>
     </qresource>
     <qresource prefix="/qml">
         <file alias="test.qml">src/test.qml</file>
diff --git a/resources/Sync.png b/resources/Sync.png
new file mode 100644
index 0000000000000000000000000000000000000000..646999afcfcb6077ac2b0a6a253dd2fb55b7018a
GIT binary patch
literal 3561
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

literal 0
HcmV?d00001

diff --git a/src/MissionEditor/MissionEditor.qml b/src/MissionEditor/MissionEditor.qml
index 2293d2740..f648e9a25 100644
--- a/src/MissionEditor/MissionEditor.qml
+++ b/src/MissionEditor/MissionEditor.qml
@@ -46,6 +46,7 @@ QGCView {
 
     property var    _missionItems:              controller.missionItems
     property bool   _showHomePositionManager:   false
+    property bool   _addMissionItems:           false
 
     property var    _homePositionManager:       QGroundControl.homePositionManager
     property string _homePositionName:          _homePositionManager.homePositions.get(0).name
@@ -53,6 +54,14 @@ QGCView {
 
     QGCPalette { id: _qgcPal; colorGroupEnabled: enabled }
 
+    ExclusiveGroup {
+        id: _mapTypeButtonsExclusiveGroup
+    }
+
+    ExclusiveGroup {
+        id: _dropButtonsExclusiveGroup
+    }
+
     function setCurrentItem(index) {
         for (var i=0; i<_missionItems.count; i++) {
             _missionItems.get(i).isCurrentItem = (i == index)
@@ -73,8 +82,11 @@ QGCView {
                 anchors.top:    parent.top
                 anchors.bottom: parent.bottom
                 mapName:        "MissionEditor"
-                latitude:       _homePositionCoordinate.latitude
-                longitude:      _homePositionCoordinate.longitude
+
+                Component.onCompleted: {
+                    latitude = _homePositionCoordinate.latitude
+                    longitude = _homePositionCoordinate.longitude
+                }
 
                 QGCLabel {
                     anchors.bottom: parent.bottom
@@ -91,21 +103,106 @@ QGCView {
                         coordinate.altitude = coordinate.altitude.toFixed(_decimalPlaces)
                         if (_showHomePositionManager) {
                             _homePositionCoordinate = coordinate
-                        } else {
+                        } else if (_addMissionItems) {
                             var index = controller.addMissionItem(coordinate)
                             setCurrentItem(index)
                         }
                     }
                 }
 
+                Rectangle {
+                    id:                     addMissionItemsButton
+                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
+                    anchors.right:          homePositionManagerButton.left
+                    anchors.top:            homePositionManagerButton.top
+                    radius:                 (ScreenTools.defaultFontPixelHeight * 3) / 2
+                    width:                  radius * 2
+                    height:                 radius * 2
+                    border.width:           2
+                    border.color:           "white"
+                    color:                  _addMissionItems ? _qgcPal.buttonHighlight : "black"
+                    opacity:                _addMissionItems ? 0.75 : 1.0
+
+                    MouseArea {
+                        anchors.fill: parent
+
+                        onClicked: {
+                            _addMissionItems = !_addMissionItems
+                            _showHomePositionManager = false
+                        }
+                    }
+
+                    Rectangle {
+                        anchors.verticalCenter:     parent.verticalCenter
+                        anchors.horizontalCenter:   parent.horizontalCenter
+                        width:                      ScreenTools.defaultFontPixelHeight * 1.5
+                        height:                     width
+                        radius:                     width / 2
+                        border.width:               2
+                        border.color:               "white"
+                        color:                      "transparent"
+
+                        QGCLabel {
+                            anchors.fill:           parent
+                            horizontalAlignment:    Text.AlignHCenter
+                            verticalAlignment:      Text.AlignVCenter
+                            color:                  "white"
+                            text:                   "1"
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id:                     homePositionManagerButton
+                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
+                    anchors.right:          centerMapButton.left
+                    anchors.top:            centerMapButton.top
+                    radius:                 (ScreenTools.defaultFontPixelHeight * 3) / 2
+                    width:                  radius * 2
+                    height:                 radius * 2
+                    border.width:           2
+                    border.color:           "white"
+                    color:                  _showHomePositionManager ? _qgcPal.buttonHighlight : "black"
+                    opacity:                _showHomePositionManager ? 0.75 : 1.0
+
+                    MouseArea {
+                        anchors.fill: parent
+
+                        onClicked: {
+                            _showHomePositionManager = !_showHomePositionManager
+                            _addMissionItems = false
+                        }
+                    }
+
+                    Rectangle {
+                        anchors.verticalCenter:     parent.verticalCenter
+                        anchors.horizontalCenter:   parent.horizontalCenter
+                        width:                      ScreenTools.defaultFontPixelHeight * 1.5
+                        height:                     width
+                        radius:                     width / 2
+                        border.width:               2
+                        border.color:               "white"
+                        color:                      "transparent"
+
+                        QGCLabel {
+                            anchors.fill:           parent
+                            horizontalAlignment:    Text.AlignHCenter
+                            verticalAlignment:      Text.AlignVCenter
+                            color:                  "white"
+                            text:                   "H"
+                        }
+                    }
+                }
+
                 DropButton {
                     id:                     centerMapButton
                     anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
-                    anchors.right:          mapTypeButton.left
-                    anchors.top:            mapTypeButton.top
+                    anchors.right:          syncButton.left
+                    anchors.top:            syncButton.top
                     dropDirection:          dropDown
                     buttonImage:            "/qmlimages/MapCenter.svg"
                     viewportMargins:        ScreenTools.defaultFontPixelWidth / 2
+                    exclusiveGroup:         _dropButtonsExclusiveGroup
 
                     dropDownComponent: Component {
                         Row {
@@ -121,6 +218,19 @@ QGCView {
                                 }
                             }
 
+                            QGCButton {
+                                text:       "Vehicle"
+                                enabled:    activeVehicle && activeVehicle.latitude != 0 && activeVehicle.longitude != 0
+
+                                property var activeVehicle: multiVehicleManager.activeVehicle
+
+                                onClicked: {
+                                    centerMapButton.hideDropDown()
+                                    editorMap.latitude = activeVehicle.latitude
+                                    editorMap.longitude = activeVehicle.longitude
+                                }
+                            }
+
 /*
 
 This code will need to wait for Qml 5.5 support since Map.visibleRegion is only in Qt 5.5
@@ -160,6 +270,61 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                     }
                 }
 
+                DropButton {
+                    id:                     syncButton
+                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
+                    anchors.right:          mapTypeButton.left
+                    anchors.top:            mapTypeButton.top
+                    dropDirection:          dropDown
+                    buttonImage:            "/qmlimages/Sync.png"
+                    viewportMargins:        ScreenTools.defaultFontPixelWidth / 2
+                    exclusiveGroup:         _dropButtonsExclusiveGroup
+
+                    dropDownComponent: Component {
+                        Row {
+                            spacing: ScreenTools.defaultFontPixelWidth
+
+                            QGCButton {
+                                text:       "Load from vehicle"
+                                enabled:    _activeVehicle && !_activeVehicle.missionManager.inProgress
+
+                                onClicked: {
+                                    syncButton.hideDropDown()
+                                    controller.getMissionItems()
+                                }
+                            }
+
+                            QGCButton {
+                                text:       "Save to vehicle"
+                                enabled:    _activeVehicle && !_activeVehicle.missionManager.inProgress
+
+                                onClicked: {
+                                    syncButton.hideDropDown()
+                                    controller.setMissionItems()
+                                }
+                            }
+
+                            QGCButton {
+                                text:       "Load from file..."
+
+                                onClicked: {
+                                    syncButton.hideDropDown()
+                                    controller.loadMissionFromFile()
+                                }
+                            }
+
+                            QGCButton {
+                                text:       "Save to file..."
+
+                                onClicked: {
+                                    syncButton.hideDropDown()
+                                    controller.saveMissionToFile()
+                                }
+                            }
+                        }
+                    }
+                }
+
                 DropButton {
                     id:                 mapTypeButton
                     anchors.margins:    ScreenTools.defaultFontPixelHeight
@@ -168,6 +333,7 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                     dropDirection:      dropDown
                     buttonImage:        "/qmlimages/MapType.svg"
                     viewportMargins:    ScreenTools.defaultFontPixelWidth / 2
+                    exclusiveGroup:         _dropButtonsExclusiveGroup
 
                     dropDownComponent: Component {
                         Row {
@@ -177,12 +343,14 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                                 model: QGroundControl.flightMapSettings.mapTypes
 
                                 QGCButton {
-                                    checkable:  true
-                                    checked:    editorMap.mapType == text
-                                    text:       modelData
+                                    checkable:      true
+                                    checked:        editorMap.mapType == text
+                                    text:           modelData
+                                    exclusiveGroup: _mapTypeButtonsExclusiveGroup
 
                                     onClicked: {
                                         editorMap.mapType = text
+                                        checked = true
                                         mapTypeButton.hideDropDown()
                                     }
                                 }
@@ -245,76 +413,10 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                     anchors.margins:    _verticalMargin
                     anchors.fill:       parent
 
-                    QGCButton {
-                        id:     toolsButton
-                        text:   "Tools"
-                        menu :  toolMenu
-
-                        Menu {
-                            id: toolMenu
-
-                            MenuItem {
-                                text:       "Manage Home Position"
-                                checkable:  true
-                                checked:    _showHomePositionManager
-
-                                onTriggered: _showHomePositionManager = checked
-                            }
-
-                            MenuSeparator { }
-
-                            MenuItem {
-                                text:       "Get mission items from vehicle"
-                                enabled:    _activeVehicle && !_activeVehicle.missionManager.inProgress
-
-                                onTriggered: controller.getMissionItems()
-                            }
-
-                            MenuItem {
-                                text:       "Send mission items to vehicle"
-                                enabled:    _activeVehicle && !_activeVehicle.missionManager.inProgress
-
-                                onTriggered: controller.setMissionItems()
-                            }
-
-                            MenuSeparator { }
-
-                            MenuItem {
-                                text:       "Load mission from file..."
-
-                                onTriggered: controller.loadMissionFromFile()
-                            }
-
-                            MenuItem {
-                                text:       "Save mission to file..."
-
-                                onTriggered: controller.saveMissionToFile()
-                            }
-
-                            MenuSeparator { }
-
-                            MenuItem {
-                                text:       "Move to current vehicle position"
-                                enabled:    activeVehicle && activeVehicle.latitude != 0 && activeVehicle.longitude != 0
-
-                                property var activeVehicle: multiVehicleManager.activeVehicle
-
-                                onTriggered: {
-                                    editorMap.latitude = activeVehicle.latitude
-                                    editorMap.longitude = activeVehicle.longitude
-                                }
-                            }
-                        }
-                    }
-
                     // Mission Item Editor
                     Item {
-                        anchors.topMargin:  _verticalMargin
-                        anchors.left:       parent.left
-                        anchors.right:      parent.right
-                        anchors.top:        toolsButton.bottom
-                        anchors.bottom:     parent.bottom
-                        visible:            !_showHomePositionManager
+                        anchors.fill:   parent
+                        visible:        !_showHomePositionManager && controller.missionItems.count != 0
 
                         ListView {
                             id:             missionItemSummaryList
@@ -346,13 +448,6 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                                 }
                         } // ListView
 
-                        QGCLabel {
-                            anchors.fill:   parent
-                            visible:        controller.missionItems.count == 0
-                            wrapMode:       Text.WordWrap
-                            text:           "Click in the map to add Mission Items"
-                        }
-
                         QGCLabel {
                             anchors.fill:   parent
                             visible:        !controller.canEdit
@@ -364,12 +459,8 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
 
                     // Home Position Manager
                     Item {
-                        anchors.topMargin:  _verticalMargin
-                        anchors.left:       parent.left
-                        anchors.right:      parent.right
-                        anchors.top:        toolsButton.bottom
-                        anchors.bottom:     parent.bottom
-                        visible:            _showHomePositionManager
+                        anchors.fill:   parent
+                        visible:        _showHomePositionManager
 
                         Column {
                             anchors.fill: parent
@@ -399,6 +490,8 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                                         var homePos = _homePositionManager.homePositions.get(currentIndex)
                                         _homePositionName = homePos.name
                                         _homePositionCoordinate = homePos.coordinate
+                                        editorMap.latitude = _homePositionCoordinate.latitude
+                                        editorMap.longitude = _homePositionCoordinate.longitude
                                     }
                                 }
                             }
@@ -411,7 +504,10 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                             QGCLabel {
                                 width:      parent.width
                                 wrapMode:   Text.WordWrap
-                                text:       "To add a new home position, click in the Map to set the position. Then give it a name and click Add."
+                                text:       "To add a new home position, click in the Map to set the position. " +
+                                            "Then give it a new name and click Add/Update. " +
+                                            "To change the current  home position, click in the Map to set the new position. " +
+                                            "Then click Add/Update without changing the name."
                             }
 
                             Item {
@@ -535,6 +631,158 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                         } // Column
                     } // Item - Home Position Manager
 
+                    // Help Panel
+                    Item {
+                        anchors.fill:   parent
+                        visible:        !_showHomePositionManager && controller.missionItems.count == 0
+
+                        QGCLabel {
+                            id:             helpTitle
+                            font.pixelSize: ScreenTools.mediumFontPixelSize
+                            text:           "Mission Planner"
+                        }
+
+                        QGCLabel {
+                            id:                 helpIconLabel
+                            anchors.topMargin:  ScreenTools.defaultFontPixelHeight
+                            anchors.top:        helpTitle.bottom
+                            width:              parent.width
+                            wrapMode:           Text.WordWrap
+                            text:               "In the upper right corner of the map you will see the Mission Planner tools:"
+                        }
+
+                        Rectangle {
+                            id:                         addMissionItemsHelpIcon
+                            anchors.topMargin:          ScreenTools.defaultFontPixelHeight
+                            anchors.top:                helpIconLabel.bottom
+                            anchors.horizontalCenter:   mapTypeHelpIcon.horizontalCenter
+                            width:                      ScreenTools.defaultFontPixelHeight * 1.5
+                            height:                     width
+                            radius:                     width / 2
+                            border.width:               2
+                            border.color:               "white"
+                            color:                      _qgcPal.window
+
+                            QGCLabel {
+                                anchors.fill:           parent
+                                horizontalAlignment:    Text.AlignHCenter
+                                verticalAlignment:      Text.AlignVCenter
+                                color:                  "white"
+                                text:                   "1"
+                            }
+                        }
+
+                        QGCLabel {
+                            id:                 addMissionItemsHelpText
+                            anchors.leftMargin: ScreenTools.defaultFontPixelHeight
+                            anchors.left:       mapTypeHelpIcon.right
+                            anchors.right:      parent.right
+                            anchors.top:        addMissionItemsHelpIcon.top
+                            wrapMode:           Text.WordWrap
+                            text:               "This is the Add Mission Items tool. " +
+                                                "Click it to turn on the ability to add mission items by clicking in the map. " +
+                                                "Click it again to turn it off."
+                        }
+
+                        Rectangle {
+                            id:                         homePositionManagerHelpIcon
+                            anchors.topMargin:          ScreenTools.defaultFontPixelHeight
+                            anchors.top:                addMissionItemsHelpText.bottom
+                            anchors.horizontalCenter:   mapTypeHelpIcon.horizontalCenter
+                            width:                      ScreenTools.defaultFontPixelHeight * 1.5
+                            height:                     width
+                            radius:                     width / 2
+                            border.width:               2
+                            border.color:               "white"
+                            color:                      _qgcPal.window
+
+                            QGCLabel {
+                                anchors.fill:           parent
+                                horizontalAlignment:    Text.AlignHCenter
+                                verticalAlignment:      Text.AlignVCenter
+                                color:                  "white"
+                                text:                   "H"
+                            }
+                        }
+
+                        QGCLabel {
+                            id:                 homePositionManagerHelpText
+                            anchors.leftMargin: ScreenTools.defaultFontPixelHeight
+                            anchors.left:       mapTypeHelpIcon.right
+                            anchors.right:      parent.right
+                            anchors.top:        homePositionManagerHelpIcon.top
+                            wrapMode:           Text.WordWrap
+                            text:               "This is the Home Position Manager tool. " +
+                                                "This tool allows you to select/add/update home positions. " +
+                                                "You can save multiple home position to represent multiple flying areas."
+                        }
+
+                        Image {
+                            id:                 mapCenterHelpIcon
+                            anchors.topMargin:  ScreenTools.defaultFontPixelHeight
+                            anchors.top:        homePositionManagerHelpText.bottom
+                            width:              ScreenTools.defaultFontPixelHeight * 3
+                            fillMode:           Image.PreserveAspectFit
+                            mipmap:             true
+                            smooth:             true
+                            source:             "/qmlimages/MapCenter.svg"
+                        }
+
+                        QGCLabel {
+                            id:                 mapCenterHelpText
+                            anchors.leftMargin: ScreenTools.defaultFontPixelHeight
+                            anchors.left:       mapTypeHelpIcon.right
+                            anchors.right:      parent.right
+                            anchors.top:        mapCenterHelpIcon.top
+                            wrapMode:           Text.WordWrap
+                            text:               "This is the Map Center tool. " +
+                                                "It will show a set of options which will center the map."
+                        }
+
+                        Image {
+                            id:                 syncHelpIcon
+                            anchors.topMargin:  ScreenTools.defaultFontPixelHeight
+                            anchors.top:        mapCenterHelpText.bottom
+                            width:              ScreenTools.defaultFontPixelHeight * 3
+                            fillMode:           Image.PreserveAspectFit
+                            mipmap:             true
+                            smooth:             true
+                            source:             "/qmlimages/Sync.png"
+                        }
+
+                        QGCLabel {
+                            id:                 syncHelpText
+                            anchors.leftMargin: ScreenTools.defaultFontPixelHeight
+                            anchors.left:       mapTypeHelpIcon.right
+                            anchors.right:      parent.right
+                            anchors.top:        syncHelpIcon.top
+                            wrapMode:           Text.WordWrap
+                            text:               "This is the Sync tool. " +
+                                                "It will show a set of options for saving/loading mission items."
+                        }
+
+                        Image {
+                            id:                 mapTypeHelpIcon
+                            anchors.topMargin:  ScreenTools.defaultFontPixelHeight
+                            anchors.top:        syncHelpText.bottom
+                            width:              ScreenTools.defaultFontPixelHeight * 3
+                            fillMode:           Image.PreserveAspectFit
+                            mipmap:             true
+                            smooth:             true
+                            source:             "/qmlimages/MapType.svg"
+                        }
+
+                        QGCLabel {
+                            id:                 mapTypeHelpText
+                            anchors.leftMargin: ScreenTools.defaultFontPixelHeight
+                            anchors.left:       mapTypeHelpIcon.right
+                            anchors.right:      parent.right
+                            anchors.top:        mapTypeHelpIcon.top
+                            wrapMode:           Text.WordWrap
+                            text:               "This is the Map Type tool. " +
+                                                "It will show a set of options for selecting map types."
+                        }
+                    } // Item - Help Panel
                 } // Item
             } // Rectangle - mission item list
         } // Item - split view container
diff --git a/src/QmlControls/DropButton.qml b/src/QmlControls/DropButton.qml
index 2943cae3c..06a5d8c0a 100644
--- a/src/QmlControls/DropButton.qml
+++ b/src/QmlControls/DropButton.qml
@@ -23,10 +23,6 @@ Item {
     readonly property int dropUp:       3
     readonly property int dropDown:     4
 
-    function hideDropDown() {
-        _showDropDown = false
-    }
-
     readonly property real _arrowBaseWidth:     (radius * 2) / 2    // Width of long side of arrow
     readonly property real _arrowPointHeight:   (radius * 2) / 3    // Height is long side to point
     readonly property real _dropCornerRadius:   ScreenTools.defaultFontPixelWidth / 2
@@ -39,7 +35,20 @@ Item {
     property real   _viewportMaxTop:    -y + viewportMargins
     property real   _viewportMaxBottom: parent.height - (viewportMargins * 2) - y
 
-    property bool _showDropDown: false
+    // Set up ExclusiveGroup support. We use the checked property to drive visibility of drop down.
+
+    property bool checked: false
+    property ExclusiveGroup exclusiveGroup: null
+
+    onExclusiveGroupChanged: {
+        if (exclusiveGroup) {
+            exclusiveGroup.bindCheckable(_root)
+        }
+    }
+
+    function hideDropDown() {
+        checked = false
+    }
 
     Component.onCompleted: _calcPositions()
 
@@ -138,29 +147,37 @@ Item {
         y:          _viewportMaxTop
         width:      _viewportMaxRight -_viewportMaxLeft
         height:     _viewportMaxBottom - _viewportMaxTop
-        visible:    _showDropDown
+        visible:    checked
 
-        onClicked: _showDropDown = false
+        onClicked: checked = false
     }
 
     // Button
-    Image {
-        id:             button
+    Rectangle {
         anchors.fill:   parent
-        fillMode:       Image.PreserveAspectFit
-        opacity:        _showDropDown ? 1.0 : 0.75
-        mipmap:         true
-        smooth:         true
-        MouseArea {
-            anchors.fill: parent
-
-            onClicked: _showDropDown = !_showDropDown
-        }
-    } // Image - button
+        radius:         width / 2
+        border.width:   2
+        border.color:   "white"
+        color:          "transparent"
+
+        Image {
+            id:             button
+            anchors.fill:   parent
+            fillMode:       Image.PreserveAspectFit
+            opacity:        checked ? 1.0 : 0.75
+            mipmap:         true
+            smooth:         true
+            MouseArea {
+                anchors.fill: parent
+
+                onClicked: checked = !checked
+            }
+        } // Image - button
+    }
 
     Item {
         id:         dropDownItem
-        visible:    _showDropDown
+        visible:    checked
 
         QGCCanvas {
             id:             arrowCanvas
-- 
2.22.0