Video fit and camera pinch zoom

src/FlightDisplay/FlightDisplayViewVideo.qml

@@ -8,8 +8,8 @@
  ****************************************************************************/
 
 
-import QtQuick                          2.3
-import QtQuick.Controls                 1.2
+import QtQuick                          2.11
+import QtQuick.Controls                 2.4
 
 import QGroundControl                   1.0
 import QGroundControl.FlightDisplay     1.0
@@ -28,6 +28,13 @@ Item {
     property var    _activeVehicle:     QGroundControl.multiVehicleManager.activeVehicle
     property var    _dynamicCameras:    _activeVehicle ? _activeVehicle.dynamicCameras : null
     property bool   _connected:         _activeVehicle ? !_activeVehicle.connectionLost : false
+    property int    _curCameraIndex:    _dynamicCameras ? _dynamicCameras.currentCamera : 0
+    property bool   _isCamera:          _dynamicCameras ? _dynamicCameras.cameras.count > 0 : false
+    property var    _camera:            _isCamera ? _dynamicCameras.cameras.get(_curCameraIndex) : null
+    property bool   _hasCameraZoom:     _camera && _camera.hasZoom
+    property bool   _hasVideoZoom:      QGroundControl.videoManager.hasZoom
+    property bool   _hasZoom:           _hasCameraZoom || _hasVideoZoom
+    property int    _fitMode:           QGroundControl.settingsManager.videoSettings.videoFit.rawValue
     Rectangle {
         id:             noVideo
         anchors.fill:   parent
@@ -51,10 +58,26 @@ Item {
         anchors.fill:   parent
         color:          "black"
         visible:        _videoReceiver && _videoReceiver.videoRunning
+        function getWidth() {
+            //-- Fit Width or Stretch
+            if(_fitMode === 0 || _fitMode === 2) {
+                return parent.width
+            }
+            //-- Fit Height
+            return _ar != 0.0 ? parent.height * _ar : parent.width
+        }
+        function getHeight() {
+            //-- Fit Height or Stretch
+            if(_fitMode === 1 || _fitMode === 2) {
+                return parent.height
+            }
+            //-- Fit Width
+            return _ar != 0.0 ? parent.width * (1 / _ar) : parent.height
+        }
         QGCVideoBackground {
             id:             videoContent
-            height:         parent.height
-            width:          _ar != 0.0 ? height * _ar : parent.width
+            height:         parent.getHeight()
+            width:          parent.getWidth()
             anchors.centerIn: parent
             receiver:       _videoReceiver
             display:        _videoReceiver && _videoReceiver.videoSurface
@@ -104,5 +127,31 @@ Item {
                 QGroundControl.videoManager.fullScreen = !QGroundControl.videoManager.fullScreen
             }
         }
+        PinchArea {
+            id:             pinchZoom
+            enabled:        _hasZoom
+            anchors.fill:   parent
+            onPinchStarted: pinchZoom.zoom = 0
+            onPinchUpdated: {
+                if(_hasZoom) {
+                    var z = 0
+                    if(pinch.scale < 1) {
+                        z = Math.round(pinch.scale * -10)
+                    } else {
+                        z = Math.round(pinch.scale)
+                    }
+                    if(pinchZoom.zoom != z) {
+                        //-- Camera zoom takes predence
+                        if(_hasCameraZoom) {
+                            _camera.stepZoom(z)
+                        } else if (_hasVideoZoom) {
+                            //-- Video zoom is for dumb cameras that only stream (do not present a camera interface)
+                            QGroundControl.videoManager.stepZoom(z)
+                        }
+                    }
+                }
+            }
+            property int zoom: 0
+        }
     }
 }

src/FlightMap/Widgets/VideoPageWidget.qml

@@ -7,10 +7,10 @@
  *
  ****************************************************************************/
 
-import QtQuick                  2.4
+import QtQuick                  2.11
 import QtPositioning            5.2
 import QtQuick.Layouts          1.2
-import QtQuick.Controls         1.4
+import QtQuick.Controls         2.4
 import QtQuick.Dialogs          1.2
 import QtGraphicalEffects       1.0
 
@@ -54,13 +54,14 @@ Item {
         }
         // Enable/Disable Video Streaming
         QGCLabel {
-           text:            qsTr("Enable Stream")
-           font.pointSize:  ScreenTools.smallFontPointSize
+           text:                qsTr("Enable Stream")
+           font.pointSize:      ScreenTools.smallFontPointSize
         }
         QGCSwitch {
-            id:             enableSwitch
-            enabled:        _streamingEnabled
-            checked:        QGroundControl.settingsManager.videoSettings.streamEnabled.rawValue
+            id:                 enableSwitch
+            enabled:            _streamingEnabled
+            checked:            QGroundControl.settingsManager.videoSettings.streamEnabled.rawValue
+            Layout.alignment:   Qt.AlignHCenter
             onClicked: {
                 if(checked) {
                     QGroundControl.settingsManager.videoSettings.streamEnabled.rawValue = 1
@@ -73,14 +74,15 @@ Item {
         }
         // Grid Lines
         QGCLabel {
-           text:            qsTr("Grid Lines")
-           font.pointSize:  ScreenTools.smallFontPointSize
-           visible:         QGroundControl.videoManager.isGStreamer && QGroundControl.settingsManager.videoSettings.gridLines.visible
+           text:                qsTr("Grid Lines")
+           font.pointSize:      ScreenTools.smallFontPointSize
+           visible:             QGroundControl.videoManager.isGStreamer && QGroundControl.settingsManager.videoSettings.gridLines.visible
         }
         QGCSwitch {
-            enabled:        _streamingEnabled && _activeVehicle
-            checked:        QGroundControl.settingsManager.videoSettings.gridLines.rawValue
-            visible:        QGroundControl.videoManager.isGStreamer && QGroundControl.settingsManager.videoSettings.gridLines.visible
+            enabled:            _streamingEnabled && _activeVehicle
+            checked:            QGroundControl.settingsManager.videoSettings.gridLines.rawValue
+            visible:            QGroundControl.videoManager.isGStreamer && QGroundControl.settingsManager.videoSettings.gridLines.visible
+            Layout.alignment:   Qt.AlignHCenter
             onClicked: {
                 if(checked) {
                     QGroundControl.settingsManager.videoSettings.gridLines.rawValue = 1
@@ -89,6 +91,17 @@ Item {
                 }
             }
         }
+        //-- Video Fit
+        QGCLabel {
+            text:               qsTr("Video Screen Fit")
+            font.pointSize:     ScreenTools.smallFontPointSize
+        }
+        FactComboBox {
+            fact:               QGroundControl.settingsManager.videoSettings.videoFit
+            indexModel:         false
+            Layout.alignment:   Qt.AlignHCenter
+        }
+        //-- Video Recording
         QGCLabel {
            text:            _recordingVideo ? qsTr("Stop Recording") : qsTr("Record Stream")
            font.pointSize:  ScreenTools.smallFontPointSize