Rework InstrumentSwipeView

src/FlightMap/Widgets/InstrumentSwipeView.qml

 import QtQuick                  2.5
-import QtQuick.Controls         1.4
+import QtQuick.Controls         2.0
+import QtQuick.Layouts          1.3
 
 import QGroundControl.Palette       1.0
 import QGroundControl.ScreenTools   1.0
@@ -8,7 +9,7 @@ import QGroundControl.FlightMap     1.0
 Item {
     id:     _root
     clip:   true
-    height: valuesPage.height + pageIndicatorRow.anchors.topMargin + pageIndicatorRow.height
+    height: column.height
 
     property var    qgcView         ///< QGCView to use for showing dialogs
     property color  textColor
@@ -18,17 +19,40 @@ Item {
     property real   _margins:       ScreenTools.defaultFontPixelWidth / 2
     property real   _pageWidth:     _root.width
     property int    _currentPage:   0
-    property int    _maxPage:           2
+    property int    _maxPage:       3
+
+    onWidthChanged: showPage(_currentPage)
 
     function showPicker() {
         valuesPage.showPicker()
     }
 
     function showPage(pageIndex) {
-        _root.height = Qt.binding(function() { return _root.children[pageIndex].height + pageIndicatorRow.anchors.topMargin + pageIndicatorRow.height } )
-        _root.children[0].x = -(pageIndex * _pageWidth)
+        pageRow.x = -(pageIndex * _pageWidth)
+    }
+
+    function showNextPage() {
+        if (_currentPage == _maxPage) {
+            _currentPage = 0
+        } else {
+            _currentPage++
+        }
+        showPage(_currentPage)
+    }
+
+    MouseArea {
+        anchors.fill:   parent
+        onClicked:      showNextPage()
     }
 
+    Column {
+        id:             column
+        anchors.left:   parent.left
+        anchors.right:  parent.right
+
+        Row {
+            id: pageRow
+
             ValuesWidget {
                 id:         valuesPage
                 width:      _pageWidth
@@ -36,28 +60,27 @@ Item {
                 textColor:  _root.textColor
                 maxHeight:  _root.maxHeight
             }
-
+            CameraWidget {
+                width:      _pageWidth
+                qgcView:    _root.qgcView
+                textColor:  _root.textColor
+                maxHeight:  _root.maxHeight
+            }
             VehicleHealthWidget {
-        id:             healthPage
-        anchors.left:   valuesPage.right
                 width:      _pageWidth
                 qgcView:    _root.qgcView
                 textColor:  _root.textColor
                 maxHeight:  _root.maxHeight
             }
-
             VibrationWidget {
-        id:                 vibrationPage
-        anchors.left:       healthPage.right
                 width:              _pageWidth
                 textColor:          _root.textColor
                 backgroundColor:    _root.backgroundColor
                 maxHeight:          _root.maxHeight
             }
+        }
 
         Row {
-        id:                         pageIndicatorRow
-        anchors.bottom:             parent.bottom
             anchors.horizontalCenter:   parent.horizontalCenter
             spacing:                    _margins
 
@@ -74,50 +97,5 @@ Item {
                 }
             }
         }
-
-    MouseArea {
-        anchors.fill: parent
-
-        onClicked: {
-            if (_currentPage == _maxPage) {
-                _currentPage = 0
-            } else {
-                _currentPage++
-            }
-            showPage(_currentPage)
-        }
-    }
-
-    /*
-      Switching from swipe to click to change pages. Keeping swipe code for now in case of change back.
-    MouseArea {
-        anchors.fill: parent
-
-        property real xDragStart
-        property real xFirstPageSave
-
-        onPressed: {
-            if (mouse.button == Qt.LeftButton) {
-                mouse.accepted = true
-                xDragStart = mouse.x
-                xFirstPageSave = _root.children[0].x
-            }
-        }
-
-        onPositionChanged: {
-            _root.children[0].x = xFirstPageSave + mouse.x - xDragStart
-        }
-
-        onReleased: {
-            if (mouse.x < xDragStart) {
-                // Swipe left
-                _currentPage = Math.min(_currentPage + 1, _maxPage)
-            } else {
-                // Swipe right
-                _currentPage = Math.max(_currentPage - 1, 0)
-            }
-            showPage(_currentPage)
-        }
     }
-    */
 }

src/FlightMap/Widgets/ValuesWidget.qml

@@ -54,7 +54,7 @@ QGCFlickable {
 
     MouseArea {
         anchors.fill:   parent
-        onClicked:      showPicker()
+        onClicked:      showNextPage()
     }
 
     Column {

src/FlightMap/Widgets/VehicleHealthWidget.qml

@@ -34,6 +34,11 @@ QGCFlickable {
         }
     }
 
+    MouseArea {
+        anchors.fill:   parent
+        onClicked:      showNextPage()
+    }
+
     Column {
         id:     healthColumn
         width:  parent.width

src/FlightMap/Widgets/VibrationWidget.qml

@@ -39,6 +39,11 @@ QGCFlickable {
 
     QGCPalette { id:qgcPal; colorGroupEnabled: true }
 
+    MouseArea {
+        anchors.fill:   parent
+        onClicked:      showNextPage()
+    }
+
     Item {
         id:     innerItem
         width:  parent.width