Add rotation/tilt/fov sliders to the map viewer example

This patch adds a new qml element, MapSliders, that consist of a
set of sliders to control camera parameters.
This element can be hidden/shown using the included semitransparent
button.

The element can also be ported to the other examples to offer the
same controls.

This element can be positioned on the left or the right of the map,
and for this example it has been moved to the left to not occlude
the minimap.

Change-Id: Icc56d90b181c2481727e73e3d332a66c05352f57
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>
Reviewed-by: Alex Blasche <alexander.blasche@qt.io>

4 files changed, 333 insertions, 15 deletions

diff --git a/examples/location/mapviewer/map/MapComponent.qml b/examples/location/mapviewer/map/MapComponent.qml
index 3525e5f1..c3d5dfd2 100644
--- a/examples/location/mapviewer/map/MapComponent.qml
+++ b/examples/location/mapviewer/map/MapComponent.qml
@@ -364,22 +364,11 @@ Map {
         anchorPoint: Qt.point(-poiTheQtComapny.sourceItem.width * 0.5,poiTheQtComapny.sourceItem.height * 1.5)
     }
 
-
-    Slider {
-        id: zoomSlider;
+    MapSliders {
+        id: sliders
         z: map.z + 3
-        minimumValue: map.minimumZoomLevel;
-        maximumValue: map.maximumZoomLevel;
-        anchors.margins: 10
-        anchors.bottom: scale.top
-        anchors.top: parent.top
-        anchors.right: parent.right
-        orientation : Qt.Vertical
-        value: map.zoomLevel
-        onValueChanged: {
-            if (value >= 0)
-                map.zoomLevel = value
-        }
+        mapSource: map
+        edge: Qt.LeftEdge
     }
 
     Item {
diff --git a/examples/location/mapviewer/map/MapSliders.qml b/examples/location/mapviewer/map/MapSliders.qml
new file mode 100644
index 00000000..75e4f474
--- /dev/null
+++ b/examples/location/mapviewer/map/MapSliders.qml
@@ -0,0 +1,327 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+Row {
+    id: containerRow
+
+    property var mapSource
+    property real fontSize : 14
+    property color labelBackground : "transparent"
+    property int edge: Qt.RightEdge
+
+    function rightEdge() {
+        return (containerRow.edge === Qt.RightEdge);
+    }
+
+    layoutDirection: rightEdge() ? Qt.LeftToRight : Qt.RightToLeft
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    anchors.right: rightEdge() ? parent.right : undefined
+    anchors.left: rightEdge() ? undefined : parent.left
+
+    Button {
+        id: sliderToggler
+        width: 32
+        height: 96
+        checkable: true
+        checked: false
+        anchors.verticalCenter: parent.verticalCenter
+
+        transform:  Scale {
+                        origin.x: rightEdge() ? 0 : sliderToggler.width / 2
+                        xScale: rightEdge() ? 1 : -1
+                    }
+
+        style:  ButtonStyle {
+                    background: Rectangle {
+                        color: "transparent"
+                    }
+                }
+
+        property real shear: 0.333
+        property real buttonOpacity: 0.5
+        property real mirror : rightEdge() ? 1.0 : -1.0
+
+        Rectangle {
+            width: 16
+            height: 48
+            color: "seagreen"
+            antialiasing: true
+            opacity: sliderToggler.buttonOpacity
+            anchors.top: parent.top
+            anchors.left: sliderToggler.checked ?  parent.left : parent.horizontalCenter
+            transform: Matrix4x4 {
+                property real d : sliderToggler.checked ? 1.0 : -1.0
+                matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
+                                        0.0,    1.0,    0.0,    0.0,
+                                        0.0,    0.0,    1.0,    0.0,
+                                        0.0,    0.0,    0.0,    1.0)
+            }
+        }
+
+        Rectangle {
+            width: 16
+            height: 48
+            color: "seagreen"
+            antialiasing: true
+            opacity: sliderToggler.buttonOpacity
+            anchors.top: parent.verticalCenter
+            anchors.right: sliderToggler.checked ?  parent.right : parent.horizontalCenter
+            transform: Matrix4x4 {
+                property real d : sliderToggler.checked ? -1.0 : 1.0
+                matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
+                                        0.0,    1.0,    0.0,    0.0,
+                                        0.0,    0.0,    1.0,    0.0,
+                                        0.0,    0.0,    0.0,    1.0)
+            }
+        }
+    }
+
+    Rectangle {
+        id: sliderContainer
+        height: parent.height
+        width: sliderRow.width + 10
+        visible: sliderToggler.checked
+        color: Qt.rgba( 0, 191 / 255.0, 255 / 255.0, 0.07)
+
+        property var labelBorderColor: "transparent"
+        property var slidersHeight : sliderContainer.height
+                                     - rowSliderValues.height
+                                     - rowSliderLabels.height
+                                     - sliderColumn.spacing * 2
+                                     - sliderColumn.topPadding
+                                     - sliderColumn.bottomPadding
+
+        Column {
+            id: sliderColumn
+            spacing: 10
+            topPadding: 16
+            bottomPadding: 48
+            anchors.centerIn: parent
+
+            // the sliders value labels
+            Row {
+                id: rowSliderValues
+                spacing: sliderRow.spacing
+                width: sliderRow.width
+                height: 32
+                property real entryWidth: zoomSlider.width
+
+                Rectangle{
+                    color: labelBackground
+                    height: parent.height
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelZoomValue
+                        text: zoomSlider.value.toFixed(3)
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+                Rectangle{
+                    color: labelBackground
+                    height: parent.height
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelBearingValue
+                        text: bearingSlider.value.toFixed(2)
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+                Rectangle{
+                    color: labelBackground
+                    height: parent.height
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelTiltValue
+                        text: tiltSlider.value.toFixed(2)
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+                Rectangle{
+                    color: labelBackground
+                    height: parent.height
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelFovValue
+                        text: fovSlider.value.toFixed(2)
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+            } // rowSliderValues
+
+            // The sliders row
+            Row {
+                spacing: 10
+                id: sliderRow
+                height: sliderContainer.slidersHeight
+
+                Slider {
+                    id: zoomSlider
+                    height: parent.height
+                    orientation : Qt.Vertical
+                    onValueChanged: {
+                            containerRow.mapSource.zoomLevel = value
+                    }
+                    Component.onCompleted: {
+                        minimumValue = Qt.binding(function() { return containerRow.mapSource.minimumZoomLevel; })
+                        maximumValue = Qt.binding(function() { return containerRow.mapSource.maximumZoomLevel; })
+                        value = Qt.binding(function() { return containerRow.mapSource.zoomLevel; })
+                    }
+                }
+                Slider {
+                    id: bearingSlider
+                    height: parent.height
+                    minimumValue: 0
+                    maximumValue: 360
+                    orientation : Qt.Vertical
+                    value: containerRow.mapSource.bearing
+                    onValueChanged: {
+                        containerRow.mapSource.bearing = value;
+                    }
+                }
+                Slider {
+                    id: tiltSlider
+                    height: parent.height
+                    orientation : Qt.Vertical
+                    onValueChanged: {
+                        containerRow.mapSource.tilt = value;
+                    }
+                    Component.onCompleted: {
+                        minimumValue = Qt.binding(function() { return containerRow.mapSource.minimumTilt; })
+                        maximumValue = Qt.binding(function() { return containerRow.mapSource.maximumTilt; })
+                        value = Qt.binding(function() { return containerRow.mapSource.tilt; })
+                    }
+                }
+                Slider {
+                    id: fovSlider
+                    height: parent.height
+                    orientation : Qt.Vertical
+                    onValueChanged: {
+                        containerRow.mapSource.fieldOfView = value;
+                    }
+                    Component.onCompleted: {
+                        minimumValue = Qt.binding(function() { return containerRow.mapSource.minimumFieldOfView; })
+                        maximumValue = Qt.binding(function() { return containerRow.mapSource.maximumFieldOfView; })
+                        value = Qt.binding(function() { return containerRow.mapSource.fieldOfView; })
+                    }
+                }
+            } // Row sliders
+
+            // The labels row
+            Row {
+                id: rowSliderLabels
+                spacing: sliderRow.spacing
+                width: sliderRow.width
+                property real entryWidth: zoomSlider.width
+                property real entryHeight: 64
+
+                Rectangle{
+                    color: labelBackground
+                    height: parent.entryHeight
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelZoom
+                        text: "Zoom"
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+
+                Rectangle{
+                    color: labelBackground
+                    height: parent.entryHeight
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelBearing
+                        text: "Bearing"
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+                Rectangle{
+                    color: labelBackground
+                    height: parent.entryHeight
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelTilt
+                        text: "Tilt"
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+                Rectangle{
+                    color: labelBackground
+                    height: parent.entryHeight
+                    width: parent.entryWidth
+                    border.color: sliderContainer.labelBorderColor
+                    Label {
+                        id: labelFov
+                        text: "FoV"
+                        font.pixelSize: fontSize
+                        rotation: -90
+                        anchors.centerIn: parent
+                    }
+                }
+            } // rowSliderLabels
+        } // Column
+    } // sliderContainer
+} // containerRow
diff --git a/examples/location/mapviewer/mapviewer.pro b/examples/location/mapviewer/mapviewer.pro
index 65ac2d16..0dc4a705 100644
--- a/examples/location/mapviewer/mapviewer.pro
+++ b/examples/location/mapviewer/mapviewer.pro
@@ -10,6 +10,7 @@ RESOURCES += \
 OTHER_FILES +=mapviewer.qml \
     helper.js \
     map/MapComponent.qml \
+    map/MapSliders.qml \
     map/Marker.qml \
     map/CircleItem.qml \
     map/RectangleItem.qml \
diff --git a/examples/location/mapviewer/mapviewer.qrc b/examples/location/mapviewer/mapviewer.qrc
index a84c67da..7a7d1f4c 100644
--- a/examples/location/mapviewer/mapviewer.qrc
+++ b/examples/location/mapviewer/mapviewer.qrc
@@ -2,6 +2,7 @@
     <qresource prefix="/">
         <file>mapviewer.qml</file>
         <file>map/MapComponent.qml</file>
+        <file>map/MapSliders.qml</file>
         <file>map/Marker.qml</file>
         <file>map/PolylineItem.qml</file>
         <file>map/RectangleItem.qml</file>