main.qml Example File

qmlmultigraph/qml/qmlmultigraph/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 QtDataVisualization 1.0
  import "."

  Rectangle {
      id: mainView
      width: 800
      height: 600

      Data {
          id: data
      }

      GridLayout {
          id: gridLayout
          columns: 2
          Layout.fillHeight: true
          Layout.fillWidth: true
          anchors.top: mainView.top
          anchors.bottom: mainView.bottom
          anchors.left: mainView.left
          anchors.right: mainView.right

          Rectangle {
              Layout.fillHeight: true
              Layout.fillWidth: true
              border.color: surfaceGraph.theme.gridLineColor
              border.width: 2

              Surface3D {
                  id: surfaceGraph
                  anchors.fill: parent
                  anchors.margins: parent.border.width
                  theme: Theme3D {
                      type: Theme3D.ThemePrimaryColors
                      font.pointSize: 60
                  }
                  scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh

                  Surface3DSeries {
                      itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel"
                      ItemModelSurfaceDataProxy {
                          itemModel: data.sharedData
                          // The surface data points are not neatly lined up in rows and columns,
                          // so we define explicit row and column roles.
                          rowRole: "row"
                          columnRole: "col"
                          xPosRole: "latitude"
                          zPosRole: "longitude"
                          yPosRole: "pop_density"
                      }
                  }
              }
          }

          // We'll use one grid cell for buttons
          Rectangle {
              Layout.fillHeight: true
              Layout.fillWidth: true

              GridLayout {
                  anchors.right: parent.right
                  anchors.left: parent.left
                  anchors.top: parent.top
                  anchors.bottom: parent.bottom
                  columns: 2

                  NewButton {
                      Layout.minimumWidth: parent.width / 2
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                      text: "Clear Selections"
                      onClicked: clearSelections() // call a helper function to keep button itself simpler
                  }

                  NewButton {
                      Layout.minimumWidth: parent.width / 2
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                      text: "Quit"
                      onClicked: Qt.quit(0);
                  }

                  NewButton {
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                      text: "Reset Cameras"
                      onClicked: resetCameras() // call a helper function to keep button itself simpler
                  }

                  NewButton {
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                      text: "Toggle Mesh Styles"
                      onClicked: toggleMeshStyle() // call a helper function to keep button itself simpler
                  }
              }
          }

          Rectangle {
              Layout.fillHeight: true
              Layout.fillWidth: true
              border.color: scatterGraph.theme.gridLineColor
              border.width: 2

              Scatter3D {
                  id: scatterGraph
                  anchors.fill: parent
                  anchors.margins: parent.border.width
                  theme: Theme3D {
                      type: Theme3D.ThemeDigia
                      font.pointSize: 60
                  }
                  scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh

                  Scatter3DSeries {
                      itemLabelFormat: "Pop density at (@xLabel N, @zLabel E): @yLabel"
                      ItemModelScatterDataProxy {
                          itemModel: data.sharedData
                          // Mapping model roles to scatter series item coordinates.
                          xPosRole: "latitude"
                          zPosRole: "longitude"
                          yPosRole: "pop_density"
                      }
                  }
              }
          }

          Rectangle {
              Layout.fillHeight: true
              Layout.fillWidth: true
              border.color: barGraph.theme.gridLineColor
              border.width: 2

              Bars3D {
                  id: barGraph
                  anchors.fill: parent
                  anchors.margins: parent.border.width
                  theme: Theme3D {
                      type: Theme3D.ThemeQt
                      font.pointSize: 60
                  }
                  selectionMode: AbstractGraph3D.SelectionItemAndRow | AbstractGraph3D.SelectionSlice
                  scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh

                  Bar3DSeries {
                      itemLabelFormat: "@seriesName: @valueLabel"
                      name: "Population density"

                      ItemModelBarDataProxy {
                          itemModel: data.sharedData
                          // Mapping model roles to bar series rows, columns, and values.
                          rowRole: "row"
                          columnRole: "col"
                          valueRole: "pop_density"
                      }
                  }
              }
          }
      }

      function clearSelections() {
          barGraph.clearSelection()
          scatterGraph.clearSelection()
          surfaceGraph.clearSelection()
      }

      function resetCameras() {
          surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
          scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
          barGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricLeftHigh
          surfaceGraph.scene.activeCamera.zoomLevel = 100.0
          scatterGraph.scene.activeCamera.zoomLevel = 100.0
          barGraph.scene.activeCamera.zoomLevel = 100.0
      }

      function toggleMeshStyle() {
          if (barGraph.seriesList[0].meshSmooth === true) {
              barGraph.seriesList[0].meshSmooth = false
              if (surfaceGraph.seriesList[0].flatShadingSupported)
                  surfaceGraph.seriesList[0].flatShadingEnabled = true
              scatterGraph.seriesList[0].meshSmooth = false
          } else {
              barGraph.seriesList[0].meshSmooth = true
              surfaceGraph.seriesList[0].flatShadingEnabled = false
              scatterGraph.seriesList[0].meshSmooth = true
          }
      }
  }