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 + "%" } }

© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.