diff --git a/qgcresources.qrc b/qgcresources.qrc
index b27361e6c50cf810c6c1ada2476f850eff476d29..ed60dee50e24e263c21362fe38186359c776d987 100644
--- a/qgcresources.qrc
+++ b/qgcresources.qrc
@@ -107,6 +107,7 @@
src/FlightMap/Images/compassInstrumentDial.svg
src/FlightMap/Images/crossHair.svg
src/FlightMap/Images/PiP.svg
+ src/FlightMap/Images/pipResize.svg
src/FlightMap/Images/rollDialWhite.svg
src/FlightMap/Images/rollPointerWhite.svg
src/FlightMap/Images/scale.png
diff --git a/src/FlightDisplay/FlightDisplayView.qml b/src/FlightDisplay/FlightDisplayView.qml
index 2f7e48ede82fffa5b766285ab5da96c6236ce6b9..3122a22ffc522291d8bbbcabfc99fdbc10b3822f 100644
--- a/src/FlightDisplay/FlightDisplayView.qml
+++ b/src/FlightDisplay/FlightDisplayView.qml
@@ -311,23 +311,8 @@ QGCView {
onHideIt: {
setPipVisibility(!state)
}
- onGrow: {
- if (_pipSize >= 825) {
- return
- }
-
- _pipSize += 50
- _flightVideoPipControl.width = _pipSize
- _flightVideoPipControl.height= _pipSize * (9/16)
- }
- onShrink: {
- if (_pipSize <= 225) {
- return
- }
-
- _pipSize -= 50
- _flightVideoPipControl.width = _pipSize
- _flightVideoPipControl.height= _pipSize * (9/16)
+ onNewWidth: {
+ _pipSize = newWidth
}
}
diff --git a/src/FlightMap/Images/pipResize.svg b/src/FlightMap/Images/pipResize.svg
new file mode 100644
index 0000000000000000000000000000000000000000..94b3284faa4d890d87b474fb0de215217762ca9a
--- /dev/null
+++ b/src/FlightMap/Images/pipResize.svg
@@ -0,0 +1,373 @@
+
+
diff --git a/src/QmlControls/QGCPipable.qml b/src/QmlControls/QGCPipable.qml
index 9c1169c1a04df88483a27c8215bbafe6ed172a58..6efbddbda1c649a79726b70e7a6cc19e6b6837af 100644
--- a/src/QmlControls/QGCPipable.qml
+++ b/src/QmlControls/QGCPipable.qml
@@ -22,43 +22,98 @@ 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 grow()
- signal shrink()
+ signal newWidth(real newWidth)
MouseArea {
+ id: pipMouseArea
anchors.fill: parent
enabled: !isHidden
+ hoverEnabled: true
onClicked: {
pip.activated()
}
}
- QGCButton {
- id: growButton
- visible: !isHidden && !ScreenTools.isShortScreen && !ScreenTools.isTinyScreen
- anchors.left: parent.left
- anchors.bottom: shrinkButton.top
- height: 20
+ // 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
- anchors.margins: 5
- text: "+"
- opacity: 0.5
- onClicked: pip.grow()
+ 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)
+ }
+ }
+ }
}
- QGCButton {
- id: shrinkButton
- visible: !isHidden && !ScreenTools.isShortScreen && !ScreenTools.isTinyScreen
- anchors.left: parent.left
- anchors.bottom: closePIP.top
- height: 20
- width: height
- anchors.margins: 5
- text: "-"
- opacity: 0.5
- onClicked: pip.shrink()
+ // Resize icon
+ Image {
+ source: "/qmlimages/pipResize.svg"
+ fillMode: Image.PreserveAspectFit
+ mipmap: true
+ anchors.right: parent.right
+ anchors.top: parent.top
+ visible: !isHidden && 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