Qt 5.9 | Qt Location | Map Viewer (QML) | MapSliders.qml Example File

Qt 5.9.4 Reference Documentation

# MapSliders.qml Example File

mapviewer/map/MapSliders.qml

      /****************************************************************************
      **
      ** Copyright (C) 2017 The Qt Company Ltd.
      ** Contact: https://www.qt.io/licensing/
      **
      ** This file is part of the examples of the Qt Toolkit.
      **
      ** $QT_BEGIN_LICENSE:BSD$
      ** Commercial License Usage
      ** Licensees holding valid commercial Qt licenses may use this file in
      ** accordance with the commercial license agreement provided with the
      ** Software or, alternatively, in accordance with the terms contained in
      ** a written agreement between you and The Qt Company. For licensing terms
      ** and conditions see https://www.qt.io/terms-conditions. For further
      ** information use the contact form at https://www.qt.io/contact-us.
      **
      ** BSD License Usage
      ** Alternatively, 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
      import QtQuick.Controls 2.0 as C2

      Row {
          id: containerRow

          property var mapSource
          property real fontSize : 14
          property color labelBackground : "transparent"
          property int edge: Qt.RightEdge
          property alias expanded: sliderToggler.checked

          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: true
              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

                      C2.Slider {
                          id: zoomSlider
                          height: parent.height
                          orientation : Qt.Vertical
                          from : containerRow.mapSource.minimumZoomLevel
                          to : containerRow.mapSource.maximumZoomLevel
                          value : containerRow.mapSource.zoomLevel
                          onValueChanged: {
                                  containerRow.mapSource.zoomLevel = value
                          }
                      }
                      C2.Slider {
                          id: bearingSlider
                          height: parent.height
                          from: 0
                          to: 360
                          orientation : Qt.Vertical
                          value: containerRow.mapSource.bearing
                          onValueChanged: {
                              containerRow.mapSource.bearing = value;
                          }
                      }
                      C2.Slider {
                          id: tiltSlider
                          height: parent.height
                          orientation : Qt.Vertical
                          from: containerRow.mapSource.minimumTilt;
                          to: containerRow.mapSource.maximumTilt
                          value: containerRow.mapSource.tilt
                          onValueChanged: {
                              containerRow.mapSource.tilt = value;
                          }
                      }
                      C2.Slider {
                          id: fovSlider
                          height: parent.height
                          orientation : Qt.Vertical
                          from: containerRow.mapSource.minimumFieldOfView
                          to: containerRow.mapSource.maximumFieldOfView
                          value: containerRow.mapSource.fieldOfView
                          onValueChanged: {
                              containerRow.mapSource.fieldOfView = value;
                          }
                      }
                  } // 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