Merge pull request #8127 from mavlink/pr-analyze-float

Allow analyze panels to be detached into their own windows

qgcimages.qrc

@@ -80,6 +80,7 @@
         <file alias="FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file>
         <file alias="FollowComponentIcon.png">src/AutoPilotPlugins/Common/Images/FlightModesComponentIcon.png</file>
         <file alias="FlightModesComponentIcon.png">src/AutoPilotPlugins/Common/Images/FlightModesComponentIcon.png</file>
+        <file alias="FloatingWindow.svg">src/AnalyzeView/FloatingWindow.svg</file>
         <file alias="Frames/BlueROV1.png">src/AutoPilotPlugins/APM/Images/bluerov-frame.png</file>
         <file alias="Frames/SimpleROV-3.png">src/AutoPilotPlugins/APM/Images/simple3-frame.png</file>
         <file alias="Frames/SimpleROV-4.png">src/AutoPilotPlugins/APM/Images/simple4-frame.png</file>

src/AnalyzeView/AnalyzePage.qml

@@ -23,36 +23,78 @@ Item {
     property alias  pageComponent:      pageLoader.sourceComponent
     property alias  pageName:           pageNameLabel.text
     property alias  pageDescription:    pageDescriptionLabel.text
+    property alias  headerComponent:    headerLoader.sourceComponent
     property real   availableWidth:     width  - pageLoader.x
-    property real   availableHeight:    height - pageLoader.y
+    property real   availableHeight:    height - mainContent.y
+    property bool   poped:              false
     property real   _margins:           ScreenTools.defaultFontPixelHeight * 0.5
 
-    QGCFlickable {
+    signal popout()
-        anchors.fill:           parent
+
-        contentWidth:           pageLoader.x + pageLoader.item.width
+    Loader {
-        contentHeight:          pageLoader.y + pageLoader.item.height
+        id:                     headerLoader
-        clip:                   true
+        anchors.topMargin:      _margins
+        anchors.top:            parent.top
+        anchors.left:           parent.left
+        anchors.rightMargin:    _margins
+        anchors.right:          floatIcon.left
+        visible:                !ScreenTools.isShortScreen && headerLoader.sourceComponent !== null
+    }
+
     Column {
         id:                     headingColumn
-            width:              parent.width
+        anchors.topMargin:      _margins
+        anchors.top:            parent.top
+        anchors.left:           parent.left
+        anchors.rightMargin:    _margins
+        anchors.right:          floatIcon.left
         spacing:                _margins
+        visible:                !ScreenTools.isShortScreen && headerLoader.sourceComponent === null
         QGCLabel {
             id:                 pageNameLabel
             font.pointSize:     ScreenTools.largeFontPointSize
-                visible:        !ScreenTools.isShortScreen
+            visible:            !poped
         }
         QGCLabel {
             id:                 pageDescriptionLabel
             anchors.left:       parent.left
             anchors.right:      parent.right
             wrapMode:           Text.WordWrap
-                visible:        !ScreenTools.isShortScreen
         }
     }
+
+    QGCFlickable {
+        id:                     mainContent
+        anchors.topMargin:      ScreenTools.defaultFontPixelHeight
+        anchors.top:            headerLoader.sourceComponent === null ? (headingColumn.visible ? headingColumn.bottom : parent.top) : headerLoader.bottom
+        anchors.bottom:         parent.bottom
+        anchors.left:           parent.left
+        anchors.right:          parent.right
+        contentWidth:           pageLoader.x + pageLoader.item.width
+        contentHeight:          pageLoader.y + pageLoader.item.height
+        clip:                   true
         Loader {
             id:                 pageLoader
-            anchors.topMargin:  _margins
-            anchors.top:        headingColumn.bottom
         }
     }
+
+    QGCColoredImage {
+        id:                     floatIcon
+        anchors.verticalCenter: headerLoader.visible ? headerLoader.verticalCenter : headingColumn.verticalCenter
+        anchors.right:          parent.right
+        width:                  ScreenTools.defaultFontPixelHeight * 2
+        height:                 width
+        sourceSize.width:       width
+        source:                 "/qmlimages/FloatingWindow.svg"
+        fillMode:               Image.PreserveAspectFit
+        color:                  qgcPal.text
+        visible:                !poped && !ScreenTools.isMobile
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                popout()
+            }
+        }
+    }
+
 }

src/AnalyzeView/AnalyzeView.qml

@@ -13,6 +13,7 @@
 ///     @author Don Gagne <don@thegagnes.com>
 
 import QtQuick          2.3
+import QtQuick.Window   2.2
 import QtQuick.Controls 1.2
 
 import QGroundControl               1.0
@@ -34,6 +35,8 @@ Rectangle {
     readonly property real  _verticalMargin:        _defaultTextHeight / 2
     readonly property real  _buttonWidth:           _defaultTextWidth * 18
 
+    property int _curIndex: 0
+
     GeoTagController {
         id: geoController
     }
@@ -136,11 +139,41 @@ Rectangle {
                 model:                  ScreenTools.isMobile ? mobileModel : desktopModel
                 Component.onCompleted:  itemAt(0).checked = true
                 SubMenuButton {
+                    id:                 subMenu
                     imageResource:      buttonImage
                     setupIndicator:     false
                     exclusiveGroup:     setupButtonGroup
                     text:               buttonText
-                    onClicked:          { panelLoader.source = pageSource; checked = true; }
+                    property var window:    analyzeWidgetWindow
+                    property var loader:    analyzeWidgetLoader
+                    onClicked: {
+                        _curIndex = index
+                        panelLoader.source = pageSource
+                        checked = true
+                    }
+                    Window {
+                        id:             analyzeWidgetWindow
+                        width:          mainWindow.width  * 0.5
+                        height:         mainWindow.height * 0.5
+                        visible:        false
+                        title:          buttonText
+                        Rectangle {
+                            color:      qgcPal.window
+                            anchors.fill:  parent
+                            Loader {
+                                id:             analyzeWidgetLoader
+                                anchors.fill:   parent
+                            }
+                        }
+                        onClosing: {
+                            analyzeWidgetWindow.visible = false
+                            analyzeWidgetLoader.source = ""
+                            _curIndex = index
+                            panelLoader.source = pageSource
+                            subMenu.visible = true
+                            subMenu.checked = true
+                        }
+                    }
                 }
             }
         }
@@ -158,6 +191,18 @@ Rectangle {
         color:                  qgcPal.windowShade
     }
 
+    Connections {
+        target:                 panelLoader.item
+        onPopout: {
+            buttonRepeater.itemAt(_curIndex).window.visible = true
+            var source = panelLoader.source
+            panelLoader.source = ""
+            buttonRepeater.itemAt(_curIndex).loader.source = source
+            buttonRepeater.itemAt(_curIndex).visible = false
+            buttonRepeater.itemAt(_curIndex).loader.item.poped = true
+        }
+    }
+
     Loader {
         id:                     panelLoader
         anchors.topMargin:      _verticalMargin

src/AnalyzeView/FloatingWindow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 288 288" style="enable-background:new 0 0 288 288;" xml:space="preserve">
+<path d="M218.7,16.6H69.3C31,16.6,0,47.6,0,85.9v116.2c0,38.3,31,69.3,69.3,69.3h149.4c38.3,0,69.3-31,69.3-69.3V85.9
+	C288,47.6,257,16.6,218.7,16.6z M139.5,215.9c0,14.7-11.9,26.6-26.6,26.6H55.5c-14.7,0-26.6-11.9-26.6-26.6v-44.7
+	c0-14.7,11.9-26.6,26.6-26.6h57.4c14.7,0,26.6,11.9,26.6,26.6L139.5,215.9L139.5,215.9z M246.9,71.6l-15.7,58.8
+	c-2.8,10.5-11.4,12.8-19.1,5.1l-6.8-6.8l-22.8,22.8c-5.9,5.9-15.6,5.9-21.5,0l-7.9-7.9c-5.9-5.9-5.9-15.5,0-21.5l22.8-22.8l-6.8-6.8
+	c-7.7-7.7-5.4-16.2,5.1-19.1L233,57.7C243.4,54.9,249.7,61.2,246.9,71.6z"/>
+</svg>

src/AnalyzeView/MAVLinkInspectorPage.qml

@@ -18,9 +18,9 @@ import QGroundControl.Controls      1.0
 import QGroundControl.Controllers   1.0
 import QGroundControl.ScreenTools   1.0
 
-Item {
+AnalyzePage {
-    anchors.fill:           parent
+    headerComponent:    headerComponent
-    anchors.margins:        ScreenTools.defaultFontPixelWidth
+    pageComponent:      pageComponent
 
     property var    curVehicle:         controller ? controller.activeVehicle : null
     property int    curMessageIndex:    0
@@ -33,14 +33,11 @@ Item {
         id: controller
     }
 
-    DeadMouseArea {
+    Component {
-        anchors.fill: parent
+        id:  headerComponent
-    }
-
         //-- Header
         RowLayout {
             id:                 header
-        anchors.top:        parent.top
             anchors.left:       parent.left
             anchors.right:      parent.right
             QGCLabel {
@@ -69,15 +66,20 @@ Item {
                 }
             }
         }
+    }
 
+    Component {
+        id:                         pageComponent
+        RowLayout {
+            width:                  availableWidth
+            height:                 availableHeight
             //-- Messages (Buttons)
             QGCFlickable {
                 id:                 buttonGrid
-        anchors.top:        header.bottom
-        anchors.topMargin:  ScreenTools.defaultFontPixelHeight
-        anchors.bottom:     parent.bottom
-        anchors.left:       parent.left
                 width:              maxButtonWidth
+                Layout.maximumWidth:maxButtonWidth
+                Layout.fillHeight:  true
+                Layout.fillWidth:   true
                 contentWidth:       width
                 contentHeight:      buttonCol.height
                 ColumnLayout {
@@ -106,11 +108,8 @@ Item {
             QGCFlickable {
                 id:                 messageGrid
                 visible:            curMessage !== null && selectionValid
-        anchors.top:        buttonGrid.top
+                Layout.fillHeight:  true
-        anchors.bottom:     parent.bottom
+                Layout.fillWidth:   true
-        anchors.left:       buttonGrid.right
-        anchors.leftMargin: ScreenTools.defaultFontPixelWidth * 2
-        anchors.right:      parent.right
                 contentWidth:       messageCol.width
                 contentHeight:      messageCol.height
                 ColumnLayout {
@@ -186,4 +185,6 @@ Item {
                     }
                 }
             }
+        }
+    }
 }