Merge pull request #5653 from bluerobotics/pr-pip-resize

Allow resizing pip window

qgcresources.qrc

@@ -107,6 +107,7 @@
         <file alias="compassInstrumentDial.svg">src/FlightMap/Images/compassInstrumentDial.svg</file>
         <file alias="crossHair.svg">src/FlightMap/Images/crossHair.svg</file>
         <file alias="PiP.svg">src/FlightMap/Images/PiP.svg</file>
+        <file alias="pipResize.svg">src/FlightMap/Images/pipResize.svg</file>
         <file alias="rollDialWhite.svg">src/FlightMap/Images/rollDialWhite.svg</file>
         <file alias="rollPointerWhite.svg">src/FlightMap/Images/rollPointerWhite.svg</file>
         <file alias="scale.png">src/FlightMap/Images/scale.png</file>

src/FlightDisplay/FlightDisplayView.qml

@@ -49,7 +49,7 @@ QGCView {
     property bool   _isPipVisible:          QGroundControl.videoManager.hasVideo ? QGroundControl.loadBoolGlobalSetting(_PIPVisibleKey, true) : false
     property real   _savedZoomLevel:        0
     property real   _margins:               ScreenTools.defaultFontPixelWidth / 2
-    property real   _pipSize:               mainWindow.width * 0.2
+    property real   _pipSize:               flightView.width * 0.2
     property alias  _guidedController:      guidedActionsController
     property alias  _altitudeSlider:        altitudeSlider
 
@@ -285,6 +285,9 @@ QGCView {
             onHideIt: {
                 setPipVisibility(!state)
             }
+            onNewWidth: {
+                _pipSize = newWidth
+            }
         }
 
         Row {

src/QmlControls/QGCPipable.qml

@@ -22,17 +22,100 @@ Item {
     property bool isHidden:  false
     property bool isDark:    false
 
+    // As a percentage of the window width
+    property real maxSize: 0.75
+    property real minSize: 0.10
+
     signal  activated()
     signal  hideIt(bool state)
+    signal  newWidth(real newWidth)
 
     MouseArea {
+        id: pipMouseArea
         anchors.fill: parent
         enabled:      !isHidden
+        hoverEnabled: true
         onClicked: {
             pip.activated()
         }
     }
 
+    // MouseArea to drag in order to resize the PiP area
+    MouseArea {
+        id: pipResize
+        anchors.top: parent.top
+        anchors.right: parent.right
+        height: ScreenTools.minTouchPixels
+        width: height
+        property var initialX: 0
+        property var initialWidth: 0
+
+        onClicked: {
+            // TODO propagate
+        }
+
+        // When we push the mouse button down, we un-anchor the mouse area to prevent a resizing loop
+        onPressed: {
+            pipResize.anchors.top = undefined // Top doesn't seem to 'detach'
+            pipResize.anchors.right = undefined // This one works right, which is what we really need
+            pipResize.initialX = mouse.x
+            pipResize.initialWidth = pip.width
+        }
+
+        // When we let go of the mouse button, we re-anchor the mouse area in the correct position
+        onReleased: {
+            pipResize.anchors.top = pip.top
+            pipResize.anchors.right = pip.right
+        }
+
+        // Drag
+        onPositionChanged: {
+            if (pipResize.pressed) {
+                var parentW = pip.parent.width // flightView
+                var newW = pipResize.initialWidth + mouse.x - pipResize.initialX
+                if (newW < parentW * maxSize && newW > parentW * minSize) {
+                    newWidth(newW)
+                }
+            }
+        }
+    }
+
+    // Resize icon
+    Image {
+        source:         "/qmlimages/pipResize.svg"
+        fillMode:       Image.PreserveAspectFit
+        mipmap: true
+        anchors.right:  parent.right
+        anchors.top:    parent.top
+        visible:        !isHidden && (ScreenTools.isMobile || pipMouseArea.containsMouse)
+        height:         ScreenTools.defaultFontPixelHeight * 2.5
+        width:          ScreenTools.defaultFontPixelHeight * 2.5
+        sourceSize.height:  height
+    }
+
+    // Resize pip window if necessary when main window is resized
+    property var pipLock: 2
+
+    Connections {
+        target: pip.parent
+        onWidthChanged: {
+            // hackity hack...
+            // don't fire this while app is loading/initializing (it happens twice)
+            if (pipLock) {
+                pipLock--
+                return
+            }
+
+            var parentW = pip.parent.width
+
+            if (pip.width > parentW * maxSize) {
+                newWidth(parentW * maxSize)
+            } else if (pip.width < parentW * minSize) {
+                newWidth(parentW * minSize)
+            }
+        }
+    }
+
     //-- PIP Corner Indicator
     Image {
         id:             closePIP
@@ -41,7 +124,7 @@ Item {
         fillMode:       Image.PreserveAspectFit
         anchors.left:   parent.left
         anchors.bottom: parent.bottom
-        visible:        !isHidden
+        visible:        !isHidden && (ScreenTools.isMobile || pipMouseArea.containsMouse)
         height:         ScreenTools.defaultFontPixelHeight * 2.5
         width:          ScreenTools.defaultFontPixelHeight * 2.5
         sourceSize.height:  height