Merge pull request #4730 from DonLakeFlyer/TouchStuff

New mechanism for better "touch-ability" of controls on mobile

qgroundcontrol.qrc

@@ -85,6 +85,7 @@
         <file alias="QGroundControl/Controls/QGCMapLabel.qml">src/QmlControls/QGCMapLabel.qml</file>
         <file alias="QGroundControl/Controls/QGCMobileFileOpenDialog.qml">src/QmlControls/QGCMobileFileOpenDialog.qml</file>
         <file alias="QGroundControl/Controls/QGCMobileFileSaveDialog.qml">src/QmlControls/QGCMobileFileSaveDialog.qml</file>
+        <file alias="QGroundControl/Controls/QGCMouseArea.qml">src/QmlControls/QGCMouseArea.qml</file>
         <file alias="QGroundControl/Controls/QGCMovableItem.qml">src/QmlControls/QGCMovableItem.qml</file>
         <file alias="QGroundControl/Controls/QGCPipable.qml">src/QmlControls/QGCPipable.qml</file>
         <file alias="QGroundControl/Controls/QGCRadioButton.qml">src/QmlControls/QGCRadioButton.qml</file>

src/FlightMap/MapItems/MissionItemIndicatorDrag.qml

@@ -17,30 +17,31 @@ import QGroundControl.Controls      1.0
 /// Use the drag a MissionItemIndicator
 Rectangle {
     id:             itemDragger
-    x:              itemIndicator.x - _expandMargin
-    y:              itemIndicator.y - _expandMargin
-    width:          itemIndicator.width + (_expandMargin * 2)
-    height:         itemIndicator.height + (_expandMargin * 2)
+    x:              itemIndicator.x - _touchMarginHorizontal
+    y:              itemIndicator.y - _touchMarginVertical
+    width:          itemIndicator.width + (_touchMarginHorizontal * 2)
+    height:         itemIndicator.height + (_touchMarginVertical * 2)
     color:          "transparent"
     z:              QGroundControl.zOrderMapItems + 1    // Above item icons
 
-    // These are handy for debugging so left in for now
-    //border.width:   1
-    //border.color:   "white"
-
     // Properties which must be specific by consumer
     property var itemIndicator  ///< The mission item indicator to drag around
     property var itemCoordinate ///< Coordinate we are updating during drag
 
     property bool   _preventCoordinateBindingLoop:  false
-    property real   _expandMargin:                  ScreenTools.isMobile ? ScreenTools.defaultFontPixelWidth : 0
+
+    property bool _mobile:                  true//ScreenTools.isMobile
+    property real _touchWidth:              Math.max(itemIndicator.width, ScreenTools.minTouchPixels)
+    property real _touchHeight:             Math.max(itemIndicator.height, ScreenTools.minTouchPixels)
+    property real _touchMarginHorizontal:   _mobile ? (_touchWidth - itemIndicator.width) / 2 : 0
+    property real _touchMarginVertical:     _mobile ? (_touchHeight - itemIndicator.height) / 2 : 0
 
     onXChanged: liveDrag()
     onYChanged: liveDrag()
 
     function liveDrag() {
         if (!itemDragger._preventCoordinateBindingLoop && Drag.active) {
-            var point = Qt.point(itemDragger.x + _expandMargin + itemIndicator.anchorPoint.x, itemDragger.y + _expandMargin + itemIndicator.anchorPoint.y)
+            var point = Qt.point(itemDragger.x + _touchMarginHorizontal + itemIndicator.anchorPoint.x, itemDragger.y + _touchMarginVertical + itemIndicator.anchorPoint.y)
             var coordinate = map.toCoordinate(point)
             itemDragger._preventCoordinateBindingLoop = true
             coordinate.altitude = itemCoordinate.altitude
@@ -51,13 +52,14 @@ Rectangle {
 
     Drag.active: itemDrag.drag.active
 
-    MouseArea {
-        id:             itemDrag
-        anchors.fill:   parent
-        drag.target:    parent
-        drag.minimumX:  0
-        drag.minimumY:  0
-        drag.maximumX:  itemDragger.parent.width - parent.width
-        drag.maximumY:  itemDragger.parent.height - parent.height
+    QGCMouseArea {
+        id:                 itemDrag
+        anchors.fill:       parent
+        drag.target:        parent
+        drag.minimumX:      0
+        drag.minimumY:      0
+        drag.maximumX:      itemDragger.parent.width - parent.width
+        drag.maximumY:      itemDragger.parent.height - parent.height
+        preventStealing:    true
     }
 }

src/MissionEditor/MissionItemEditor.qml

@@ -68,15 +68,21 @@ Rectangle {
 
     }
 
-    MouseArea {
+    QGCMouseArea {
         // The MouseArea for the hamburger is larger than the hamburger image itself in order to provide a larger
         // touch area on mobile
-        anchors.top:        parent.top
-        anchors.bottom:     editorLoader.top
-        anchors.leftMargin: -hamburger.anchors.rightMargin
-        anchors.left:       hamburger.left
-        anchors.right:      parent.right
-        onClicked:          hamburgerMenu.popup()
+        anchors.leftMargin:     -_touchMarginHorizontal
+        anchors.rightMargin:    -_touchMarginHorizontal
+        anchors.topMargin:      -_touchMarginVertical
+        anchors.bottomMargin:   -_touchMarginVertical
+        anchors.fill:           hamburger
+        visible:                hamburger.visible
+        onClicked:              hamburgerMenu.popup()
+
+        property real _touchWidth:              Math.max(hamburger.width, ScreenTools.minTouchPixels)
+        property real _touchHeight:             Math.max(hamburger.height, ScreenTools.minTouchPixels)
+        property real _touchMarginHorizontal:   ScreenTools.isMobile ? (_touchWidth - hamburger.width) / 2 : 0
+        property real _touchMarginVertical:     ScreenTools.isMobile ? (_touchHeight - hamburger.height) / 2 : 0
 
         Menu {
             id: hamburgerMenu

src/QmlControls/QGCMouseArea.qml

+import QtQuick 2.3
+
+import QGroundControl 1.0
+
+MouseArea {
+    Rectangle {
+        anchors.fill:   parent
+        border.color:   "red"
+        border.width:   QGroundControl.showTouchAreas ? 1 : 0
+        color:          "transparent"
+    }
+}

src/QmlControls/QGroundControl.Controls.qmldir

@@ -37,6 +37,7 @@ QGCListView             1.0 QGCListView.qml
 QGCMapLabel             1.0 QGCMapLabel.qml
 QGCMobileFileOpenDialog 1.0 QGCMobileFileOpenDialog.qml
 QGCMobileFileSaveDialog 1.0 QGCMobileFileSaveDialog.qml
+QGCMouseArea            1.0 QGCMouseArea.qml
 QGCMovableItem          1.0 QGCMovableItem.qml
 QGCPipable              1.0 QGCPipable.qml
 QGCRadioButton          1.0 QGCRadioButton.qml

src/QmlControls/QGroundControlQmlGlobal.cc

@@ -32,6 +32,8 @@ QGroundControlQmlGlobal::QGroundControlQmlGlobal(QGCApplication* app)
     , _corePlugin(NULL)
     , _firmwarePluginManager(NULL)
     , _settingsManager(NULL)
+    , _showTouchAreas(false)
+    , _showAdvancedUI(false)
 {
     // We clear the parent on this object since we run into shutdown problems caused by hybrid qml app. Instead we let it leak on shutdown.
     setParent(NULL);

src/QmlControls/QGroundControlQmlGlobal.h

@@ -73,6 +73,9 @@ public:
 
     Q_PROPERTY(QString qgcVersion READ qgcVersion CONSTANT)
 
+    Q_PROPERTY(bool showTouchAreas MEMBER _showTouchAreas NOTIFY showTouchAreasChanged)
+    Q_PROPERTY(bool showAdvancedUI MEMBER _showAdvancedUI NOTIFY showAdvancedUIChanged)
+
     Q_INVOKABLE void    saveGlobalSetting       (const QString& key, const QString& value);
     Q_INVOKABLE QString loadGlobalSetting       (const QString& key, const QString& defaultValue);
     Q_INVOKABLE void    saveBoolGlobalSetting   (const QString& key, bool value);
@@ -153,6 +156,9 @@ public:
 
     QString qgcVersion(void) const { return qgcApp()->applicationVersion(); }
 
+    bool showTouchAreas(void) const { return _showTouchAreas; } ///< Show visible extents of touch areas
+    bool showAdvancedUI(void) const { return _showAdvancedUI; } ///< Show hidden advanced UI
+
     // Overrides from QGCTool
     virtual void setToolbox(QGCToolbox* toolbox);
 
@@ -162,6 +168,8 @@ signals:
     void mavlinkSystemIDChanged         (int id);
     void flightMapPositionChanged       (QGeoCoordinate flightMapPosition);
     void flightMapZoomChanged           (double flightMapZoom);
+    void showTouchAreasChanged          (bool showTouchAreas);
+    void showAdvancedUIChanged          (bool showAdvancedUI);
 
 private:
     FlightMapSettings*      _flightMapSettings;
@@ -178,6 +186,9 @@ private:
 
     QGeoCoordinate          _flightMapPosition;
     double                  _flightMapZoom;
+
+    bool                    _showTouchAreas;
+    bool                    _showAdvancedUI;
 };
 
 #endif

src/QmlControls/ScreenTools.qml

@@ -60,6 +60,9 @@ Item {
     property bool isTinyScreen:     (Screen.width / Screen.pixelDensity) < 120 // 120mm
     property bool isShortScreen:    ScreenToolsController.isMobile && ((Screen.height / Screen.width) < 0.6) // Nexus 7 for example
 
+    readonly property real minTouchMillimeters: 10      ///< Minimum touch size in millimeters
+    property real minTouchPixels:               0       ///< Minimum touch size in pixels
+
     // The implicit heights/widths for our custom control set
     property real implicitButtonWidth:      Math.round(defaultFontPixelWidth *  (isMobile ? 7.0 : 5.0))
     property real implicitButtonHeight:     Math.round(defaultFontPixelHeight * (isMobile ? 2.0 : 1.6))
@@ -101,7 +104,8 @@ Item {
         smallFontPointSize      = defaultFontPointSize  * _screenTools.smallFontPointRatio
         mediumFontPointSize     = defaultFontPointSize  * _screenTools.mediumFontPointRatio
         largeFontPointSize      = defaultFontPointSize  * _screenTools.largeFontPointRatio
-        toolbarHeight           = defaultFontPixelHeight * 3 * QGroundControl.corePlugin.options.toolbarHeightMultiplier
+        minTouchPixels          = Math.round(minTouchMillimeters * Screen.pixelDensity)
+        toolbarHeight           = isMobile ? minTouchPixels : defaultFontPixelHeight * 3
     }
 
     Text {

src/QmlControls/ToolStrip.qml

@@ -16,7 +16,7 @@ import QGroundControl.Palette       1.0
 Rectangle {
     id:         _root
     color:      qgcPal.window
-    width:      ScreenTools.defaultFontPixelWidth * 6
+    width:      ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 6
     height:     buttonStripColumn.height + (buttonStripColumn.anchors.margins * 2)
     radius:     _radius
 
@@ -172,10 +172,10 @@ Rectangle {
 
                     }
 
-                    MouseArea {
+                    QGCMouseArea {
                         // Size of mouse area is expanded to make touch easier
-                        anchors.leftMargin:     buttonStripColumn.margins
-                        anchors.rightMargin:    buttonStripColumn.margins
+                        anchors.leftMargin:     -buttonStripColumn.anchors.margins
+                        anchors.rightMargin:    -buttonStripColumn.anchors.margins
                         anchors.left:           parent.left
                         anchors.right:          parent.right
                         anchors.top:            parent.top

src/ui/toolbar/MainToolBar.qml

@@ -67,6 +67,28 @@ Rectangle {
         flyButton.checked = true
     }
 
+    // Easter egg mechanism
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log("easter egg click", ++_clickCount)
+            eggTimer.restart()
+            if (_clickCount == 5) {
+                QGroundControl.showAdvancedUI = true
+            } else if (_clickCount == 7) {
+                QGroundControl.showTouchAreas = true
+            }
+        }
+
+        property int _clickCount: 0
+
+        Timer {
+            id:             eggTimer
+            interval:       1000
+            onTriggered:    parent._clickCount = 0
+        }
+    }
+
     /// Bottom single pixel divider
     Rectangle {
         anchors.left:   parent.left