Created new movable/scalable Item type.

qgroundcontrol.qrc

@@ -23,6 +23,7 @@
         <file alias="QGroundControl/Controls/QGCComboBox.qml">src/QmlControls/QGCComboBox.qml</file>
         <file alias="QGroundControl/Controls/QGCColoredImage.qml">src/QmlControls/QGCColoredImage.qml</file>
         <file alias="QGroundControl/Controls/QGCToolBarButton.qml">src/QmlControls/QGCToolBarButton.qml</file>
+        <file alias="QGroundControl/Controls/QGCMovableItem.qml">src/QmlControls/QGCMovableItem.qml</file>
 
         <file alias="QGroundControl/Controls/SubMenuButton.qml">src/QmlControls/SubMenuButton.qml</file>
         <file alias="QGroundControl/Controls/IndicatorButton.qml">src/QmlControls/IndicatorButton.qml</file>

src/QmlControls/QGCMovableItem.qml

+import QtQuick 2.2
+import QtQuick.Controls 1.2
+
+// This item can be dragged around within its parent.
+// Double click issues a signal the parent can use to
+// reset its default position.
+
+Item {
+    id: root
+    property bool   allowDragging:  true
+    property real   minimumWidth:   60
+    property real   minimumHeight:  60
+    property alias  tForm:          tform
+    signal          resetRequested()
+    transform: Scale {
+        id: tform
+    }
+    MouseArea {
+        property double factor: 25
+        enabled:            root.allowDragging
+        cursorShape:        Qt.OpenHandCursor
+        anchors.fill:       parent
+        drag.target:        parent
+        drag.axis:          Drag.XAndYAxis
+        drag.minimumX:      0
+        drag.minimumY:      0
+        drag.maximumX:      root.parent.width  - (root.width  * tform.xScale)
+        drag.maximumY:      root.parent.height - (root.height * tform.yScale)
+        drag.filterChildren: true
+        onPressed: {
+            root.anchors.left  = undefined
+            root.anchors.right = undefined
+        }
+        onDoubleClicked: {
+            root.resetRequested();
+        }
+        onWheel:
+        {
+            var zoomFactor = 1;
+            if(wheel.angleDelta.y > 0)
+                zoomFactor = 1 + (1/factor)
+            else
+                zoomFactor = 1 - (1/factor)
+            var realX = wheel.x * tform.xScale
+            var realY = wheel.y * tform.yScale
+            var tx = root.x + (1-zoomFactor)*realX
+            var ty = root.y + (1-zoomFactor)*realY
+            if(tx < 0) tx = 0
+            if(ty < 0) ty = 0
+            var ts = tform.xScale * zoomFactor
+            if(root.width * ts >= root.minimumWidth) {
+                if(root.height * ts >= root.minimumHeight) {
+                    if(((root.width * ts) + tx) < root.parent.width && ((root.height * ts) + ty) < root.parent.height) {
+                        root.x = tx
+                        root.y = ty
+                        tform.xScale = ts
+                        tform.yScale = ts
+                    }
+                }
+            }
+        }
+    }
+}

src/QmlControls/qmldir

@@ -8,6 +8,7 @@ QGCTextField 1.0 QGCTextField.qml
 QGCComboBox 1.0 QGCComboBox.qml
 QGCColoredImage 1.0 QGCColoredImage.qml
 QGCToolBarButton 1.0 QGCToolBarButton.qml
+QGCMovableItem 1.0 QGCMovableItem.qml
 
 SubMenuButton 1.0 SubMenuButton.qml
 IndicatorButton 1.0 IndicatorButton.qml

src/ui/flightdisplay/FlightDisplay.qml

@@ -52,29 +52,6 @@ Rectangle {
         return value ? "1" : "0";
     }
 
-    function adjustSizes() {
-        var dist = 85
-        var wide = 160
-        var minw = 496
-        if(root.width > minw)
-        {
-            attitudeInstrument.size = wide;
-            attitudeInstrument.x    = dist
-            compassInstrument.size  = wide;
-            compassInstrument.x     = root.width - wide - dist
-        } else {
-            var factor = (root.width / minw);
-            var ndist  = dist * factor;
-            var nwide  = wide * factor;
-            if (ndist < 0)
-                ndist = 0;
-            attitudeInstrument.size = nwide;
-            compassInstrument.size  = nwide;
-            attitudeInstrument.x    = ndist;
-            compassInstrument.x     = root.width - nwide - ndist;
-        }
-    }
-
     Component.onCompleted:
     {
         mapBackground.visible               = getBool(flightDisplay.loadSetting("showMapBackground",        "0"));
@@ -89,7 +66,6 @@ Rectangle {
         currentAltitude.showClimbRate       = getBool(flightDisplay.loadSetting("showCurrentClimbRate",     "1"));
         currentAltitude.showAltitude        = getBool(flightDisplay.loadSetting("showCurrentAltitude",      "1"));
         mapTypeMenu.update();
-        adjustSizes();
     }
 
     Menu {
@@ -299,6 +275,44 @@ Rectangle {
         z:                  10
     }
 
+    QGCCompassInstrument {
+        id:                 compassInstrument
+        y:                  5
+        x:                  85
+        size:               160
+        heading:            isNaN(flightDisplay.heading) ? 0 : flightDisplay.heading
+        visible:            mapBackground.visible && showCompass
+        z:                  mapBackground.z + 1
+        onResetRequested: {
+            y               = 5
+            x               = 85
+            size            = 160
+            tForm.xScale    = 1
+            tForm.yScale    = 1
+        }
+    }
+
+    QGCAttitudeInstrument {
+        id:                 attitudeInstrument
+        y:                  5
+        size:               160
+        rollAngle:          roll
+        pitchAngle:         pitch
+        showPitch:          showPitchIndicator
+        visible:            mapBackground.visible && showAttitudeIndicator
+        anchors.right:      root.right
+        anchors.rightMargin: 85
+        z:                  mapBackground.z + 1
+        onResetRequested: {
+            y                   = 5
+            anchors.right       = root.right
+            anchors.rightMargin = 85
+            size                = 160
+            tForm.xScale        = 1
+            tForm.yScale        = 1
+        }
+    }
+
     QGCAttitudeWidget {
         id:                 attitudeWidget
         anchors.centerIn:   parent
@@ -371,28 +385,6 @@ Rectangle {
         z:                  70
     }
 
-    QGCCompassInstrument {
-        id:                 compassInstrument
-        y:                  5
-        x:                  85
-        size:               160
-        heading:            isNaN(flightDisplay.heading) ? 0 : flightDisplay.heading
-        visible:            mapBackground.visible && showCompass
-        z:                  70
-    }
-
-    QGCAttitudeInstrument {
-        id:                 attitudeInstrument
-        y:                  5
-        x:                  root.width - 160 - 85
-        size:               160
-        rollAngle:          roll
-        pitchAngle:         pitch
-        showPitch:          showPitchIndicator
-        visible:            mapBackground.visible && showAttitudeIndicator
-        z:                  80
-    }
-
     // Button at upper left corner
     Item {
         id:             optionsButton
@@ -422,8 +414,4 @@ Rectangle {
             }
         }
     }
-
-    onWidthChanged: {
-        adjustSizes();
-    }
 }

src/ui/qmlcommon/QGCAttitudeInstrument.qml

@@ -28,8 +28,9 @@ This file is part of the QGROUNDCONTROL project
  */
 
 import QtQuick 2.4
+import QGroundControl.Controls 1.0
 
-Item {
+QGCMovableItem {
     id: root
     property real rollAngle :   0
     property real pitchAngle:   0

src/ui/qmlcommon/QGCCompassInstrument.qml

@@ -31,7 +31,7 @@ import QtQuick 2.4
 import QGroundControl.Controls 1.0
 import QGroundControl.ScreenTools 1.0
 
-Item {
+QGCMovableItem {
     property ScreenTools screenTools: ScreenTools { }
     id:                     root
     property real heading:  0

src/ui/qmlcommon/QGCMapBackground.qml

@@ -160,7 +160,7 @@ Rectangle {
         maximum: map.maximumZoomLevel;
         opacity: 1
         visible: parent.visible
-        z: map.z + 3
+        z: map.z + 20
         anchors {
             bottom: parent.bottom;
             bottomMargin: 15; rightMargin: 20; leftMargin: 20
@@ -180,7 +180,7 @@ Rectangle {
         id: scale
         parent: zoomSlider.parent
         visible: scaleText.text !== "0 m"
-        z: map.z + 2
+        z: map.z + 20
         opacity: 1
         anchors {
             bottom: zoomSlider.top;

src/ui/qmlcommon/QGCSlider.qml

@@ -72,6 +72,7 @@ Item {
         radius:             4
         smooth:             true
         color:              Qt.rgba(1,1,1,0.75);
+        border.width:       1
         border.color:       Qt.rgba(0,0,0,0.45);
         anchors.bottom:     handle.top
         anchors.bottomMargin: 4
@@ -85,8 +86,6 @@ Item {
             anchors.horizontalCenter:   labelRect.horizontalCenter
             horizontalAlignment:        Text.AlignHCenter
             anchors.verticalCenter:     labelRect.verticalCenter
-            //anchors.baseline:           parent.bottom
-            //anchors.baselineOffset:     -6
         }
     }