GCS/PFDqml: split the world view to smaller parts

Ground and sky is rendered as QML Rectangle with gradients;
Pitch scale and center line are rendered separately from the world
element, so they always fit the maximum texture size.

ground/openpilotgcs/share/openpilotgcs/pfd/default/PfdWorldView.qml

@@ -3,14 +3,21 @@ import Qt 4.7
 Item {
     id: worldView
 
-    SvgElementImage {
+    Rectangle {
         id: world
-        elementName: "world"
-        //worldView is loaded with Loader, so background element is visible
-        sceneSize: background.sceneSize
-
         smooth: true
 
+        property variant scaledBounds: svgRenderer.scaledElementBounds("pfd.svg", "world")
+        width: sceneItem.width*scaledBounds.width
+        height: sceneItem.height*scaledBounds.height
+
+        gradient: Gradient {
+            GradientStop { position: 0.3;    color: "#6589E2" }
+            GradientStop { position: 0.4999; color: "#AFC2F0" }
+            GradientStop { position: 0.5;    color: "#A46933" }
+            GradientStop { position: 0.8;    color: "black" }
+        }
+
         transform: [
             Translate {
                 id: pitchTranslate
@@ -23,5 +30,26 @@ Item {
                 origin.y : world.parent.height/2
             }
         ]
+
+        SvgElementImage {
+            id: pitch_scale
+            elementName: "pitch_scale"
+            //worldView is loaded with Loader, so background element is visible
+            sceneSize: background.sceneSize
+            anchors.centerIn: parent
+            border: 64 //sometimes numbers are excluded from bounding rect
+
+            smooth: true
+        }
+
+        SvgElementImage {
+            id: horizont_line
+            elementName: "world-centerline"
+            //worldView is loaded with Loader, so background element is visible
+            sceneSize: background.sceneSize
+            anchors.centerIn: parent
+            border: 1
+            smooth: true
+        }
     }
 }

ground/openpilotgcs/share/openpilotgcs/pfd/default/SvgElementImage.qml

@@ -9,6 +9,9 @@ Image {
     property int vSliceCount: 0
     property int hSlice: 0
     property int hSliceCount: 0
+    //border property is useful to extent the area of image e bit,
+    //so it looks well antialiased when rotated
+    property int border: 0
     property variant scaledBounds: svgRenderer.scaledElementBounds(svgFileName, elementName)
 
     sourceSize.width: Math.round(sceneSize.width*scaledBounds.width)
@@ -17,9 +20,11 @@ Image {
     Component.onCompleted: {
         var params = ""
         if (hSliceCount > 1)
-            params += "hslice="+hSlice+":"+hSliceCount
+            params += "hslice="+hSlice+":"+hSliceCount+";"
         if (vSliceCount > 1)
-            params += "vslice="+vSlice+":"+vSliceCount
+            params += "vslice="+vSlice+":"+vSliceCount+";"
+        if (border > 0)
+            params += "border="+border+";"
 
         if (params != "")
             params = "?" + params