Qt 5.11 | Qt Data Visualization | Qt Quick 2 Spectrogram Example | main.qml Example File

Qt Data Visualization | Commercial or GPLv3

# main.qml Example File

qmlspectrogram/qml/qmlspectrogram/main.qml

      /****************************************************************************
      **
      ** Copyright (C) 2016 The Qt Company Ltd.
      ** Contact: https://www.qt.io/licensing/
      **
      ** This file is part of the Qt Data Visualization module of the Qt Toolkit.
      **
      ** $QT_BEGIN_LICENSE:GPL$
      ** 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.
      **
      ** GNU General Public License Usage
      ** Alternatively, this file may be used under the terms of the GNU
      ** General Public License version 3 or (at your option) any later version
      ** approved by the KDE Free Qt Foundation. The licenses are as published by
      ** the Free Software Foundation and appearing in the file LICENSE.GPL3
      ** included in the packaging of this file. Please review the following
      ** information to ensure the GNU General Public License requirements will
      ** be met: https://www.gnu.org/licenses/gpl-3.0.html.
      **
      ** $QT_END_LICENSE$
      **
      ****************************************************************************/

      import QtQuick 2.1
      import QtQuick.Layouts 1.0
      import QtQuick.Window 2.1
      import QtDataVisualization 1.2
      import "."

      Window {
          id: mainview
          title: "Qt Quick 2 Spectrogram Example"
          visible: true
          width: 1024
          height: 768
          color: surfaceGraph.theme.windowColor

          Data {
              id: surfaceData
          }

          Item {
              id: surfaceView
              width: mainview.width
              height: mainview.height
              anchors.top: mainview.top
              anchors.left: mainview.left

              ColorGradient {
                  id: surfaceGradient
                  ColorGradientStop { position: 0.0; color: "black" }
                  ColorGradientStop { position: 0.2; color: "red" }
                  ColorGradientStop { position: 0.5; color: "blue" }
                  ColorGradientStop { position: 0.8; color: "yellow" }
                  ColorGradientStop { position: 1.0; color: "white" }
              }

              ValueAxis3D {
                  id: xAxis
                  segmentCount: 8
                  labelFormat: "%i\u00B0"
                  title: "Angle"
                  titleVisible: true
                  titleFixed: false
              }

              ValueAxis3D {
                  id: yAxis
                  segmentCount: 8
                  labelFormat: "%i \%"
                  title: "Value"
                  titleVisible: true
                  labelAutoRotation: 0
                  titleFixed: false
              }

              ValueAxis3D {
                  id: zAxis
                  segmentCount: 5
                  labelFormat: "%i nm"
                  title: "Radius"
                  titleVisible: true
                  titleFixed: false
              }

              Theme3D {
                  id: customTheme
                  type: Theme3D.ThemeQt
                  // Don't show specular spotlight as we don't want it to distort the colors
                  lightStrength: 0.0
                  ambientLightStrength: 1.0
                  backgroundEnabled: false
                  gridLineColor: "#AAAAAA"
                  windowColor: "#EEEEEE"
              }

              TouchInputHandler3D {
                  id: customInputHandler
                  rotationEnabled: false
              }

              Surface3D {
                  id: surfaceGraph
                  width: surfaceView.width
                  height: surfaceView.height

                  shadowQuality: AbstractGraph3D.ShadowQualityNone
                  selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndColumn
                  axisX: xAxis
                  axisY: yAxis
                  axisZ: zAxis

                  theme: customTheme
                  inputHandler: customInputHandler

                  // Remove the perspective and view the graph from top down to achieve 2D effect
                  orthoProjection: true
                  scene.activeCamera.cameraPreset: Camera3D.CameraPresetDirectlyAbove

                  flipHorizontalGrid: true

                  radialLabelOffset: 0.01

                  horizontalAspectRatio: 1
                  scene.activeCamera.zoomLevel: 85

                  Surface3DSeries {
                      id: surfaceSeries
                      flatShadingEnabled: false
                      drawMode: Surface3DSeries.DrawSurface
                      baseGradient: surfaceGradient
                      colorStyle: Theme3D.ColorStyleRangeGradient
                      itemLabelFormat: "(@xLabel, @zLabel): @yLabel"

                      ItemModelSurfaceDataProxy {
                          itemModel: surfaceData.model
                          rowRole: "radius"
                          columnRole: "angle"
                          yPosRole: "value"
                      }
                  }
              }
          }

          RowLayout {
              id: buttonLayout
              anchors.top: parent.top
              anchors.left: parent.left
              anchors.right: parent.right
              opacity: 0.5

              NewButton {
                  id: polarToggle
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  text: "Switch to polar"
                  onClicked: {
                      if (surfaceGraph.polar === false) {
                          surfaceGraph.polar = true
                          text = "Switch to cartesian"
                      } else {
                          surfaceGraph.polar = false
                          text = "Switch to polar"
                      }
                  }
              }

              NewButton {
                  id: orthoToggle
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  text: "Switch to perspective"
                  onClicked: {
                      if (surfaceGraph.orthoProjection === true) {
                          surfaceGraph.orthoProjection = false;
                          xAxis.labelAutoRotation = 30
                          yAxis.labelAutoRotation = 30
                          zAxis.labelAutoRotation = 30
                          customInputHandler.rotationEnabled = true
                          text = "Switch to orthographic"
                      } else {
                          surfaceGraph.orthoProjection = true;
                          surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetDirectlyAbove
                          surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
                          xAxis.labelAutoRotation = 0
                          yAxis.labelAutoRotation = 0
                          zAxis.labelAutoRotation = 0
                          customInputHandler.rotationEnabled = false
                          text = "Switch to perspective"
                      }
                  }
              }

              NewButton {
                  id: flipGridToggle
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  text: "Toggle axis grid on top"
                  onClicked: {
                      onClicked: {
                          if (surfaceGraph.flipHorizontalGrid === true) {
                              surfaceGraph.flipHorizontalGrid = false;
                          } else {
                              surfaceGraph.flipHorizontalGrid = true;
                          }
                      }
                  }
              }

              NewButton {
                  id: labelOffsetToggle
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  text: "Toggle radial label position"
                  visible: surfaceGraph.polar
                  onClicked: {
                      if (surfaceGraph.radialLabelOffset >= 1.0) {
                          surfaceGraph.radialLabelOffset = 0.01
                      } else {
                          surfaceGraph.radialLabelOffset = 1.0
                      }
                  }
              }

              NewButton {
                  id: surfaceGridToggle
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  text: "Toggle surface grid"
                  visible: !surfaceGraph.orthoProjection
                  onClicked: {
                      if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
                          surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
                      } else {
                          surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe;
                      }
                  }
              }

          }

          Rectangle {
              id: legend
              anchors.margins: 20
              anchors.bottom: parent.bottom
              anchors.top: buttonLayout.bottom
              anchors.right: parent.right
              border.color: "black"
              border.width: 1
              width: 50
              rotation: 180
              gradient: Gradient {
                  GradientStop { position: 0.0; color: "black" }
                  GradientStop { position: 0.2; color: "red" }
                  GradientStop { position: 0.5; color: "blue" }
                  GradientStop { position: 0.8; color: "yellow" }
                  GradientStop { position: 1.0; color: "white" }
              }
          }

          Text {
              anchors.verticalCenter: legend.bottom
              anchors.right: legend.left
              anchors.margins: 2
              text: surfaceGraph.axisY.min  + "%"
          }

          Text {
              anchors.verticalCenter: legend.verticalCenter
              anchors.right: legend.left
              anchors.margins: 2
              text: (surfaceGraph.axisY.max + surfaceGraph.axisY.min) / 2  + "%"
          }

          Text {
              anchors.verticalCenter: legend.top
              anchors.right: legend.left
              anchors.margins: 2
              text: surfaceGraph.axisY.max + "%"
          }
      }