Surface Graph Gallery
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtGraphs
Rectangle {
id: heightMapView
color: surfacePlot.theme.windowColor
required property bool portraitMode
property real buttonWidth: heightMapView.portraitMode ? (heightMapView.width - 35) / 2
: (heightMapView.width - 40) / 3
Item {
id: surfaceView
anchors.top: buttons.bottom
anchors.bottom: heightMapView.bottom
anchors.left: heightMapView.left
anchors.right: heightMapView.right
ColorGradient {
id: surfaceGradient
ColorGradientStop { position: 0.0; color: "darkgreen"}
ColorGradientStop { position: 0.15; color: "darkslategray" }
ColorGradientStop { position: 0.7; color: "peru" }
ColorGradientStop { position: 1.0; color: "white" }
}
Surface3D {
id: surfacePlot
width: surfaceView.width
height: surfaceView.height
aspectRatio: 3.0
theme: Theme3D {
type: Theme3D.ThemeStoneMoss
font.family: "STCaiyun"
font.pointSize: 35
colorStyle: Theme3D.ColorStyleRangeGradient
baseGradients: [surfaceGradient] // Use the custom gradient
}
shadowQuality: AbstractGraph3D.ShadowQualityMedium
selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndRow
scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeft
axisX.segmentCount: 3
axisX.subSegmentCount: 3
axisX.labelFormat: "%i"
axisZ.segmentCount: 3
axisZ.subSegmentCount: 3
axisZ.labelFormat: "%i"
axisY.segmentCount: 2
axisY.subSegmentCount: 2
axisY.labelFormat: "%i"
axisY.title: "Height (m)"
axisX.title: "Longitude 175.x\"E"
axisZ.title: "Latitude -39.x\"N"
axisY.titleVisible: true
axisX.titleVisible: true
axisZ.titleVisible: true
Surface3DSeries {
id: heightSeries
flatShadingEnabled: false
drawMode: Surface3DSeries.DrawSurface
HeightMapSurfaceDataProxy {
heightMapFile: "://qml/surfacegallery/heightmap.png"
// We don't want the default data values set by heightmap proxy, but use
// actual coordinate and height values instead
autoScaleY: true
minYValue: 740
maxYValue: 2787
minZValue: -374 // ~ -39.374411"N
maxZValue: -116 // ~ -39.115971"N
minXValue: 472 // ~ 175.471767"E
maxXValue: 781 // ~ 175.780758"E
}
onDrawModeChanged: heightMapView.checkState()
}
}
}
Item {
id: buttons
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 10
height: heightMapView.portraitMode ? surfaceGridToggle.implicitHeight * 3 + 20
: surfaceGridToggle.implicitHeight * 2 + 15
opacity: 0.5
Button {
id: surfaceGridToggle
anchors.margins: 5
anchors.left: parent.left
anchors.top: parent.top
width: heightMapView.buttonWidth // Calculated elsewhere based on screen orientation
text: "Show Surface\nGrid"
onClicked: {
if (heightSeries.drawMode & Surface3DSeries.DrawWireframe)
heightSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
else
heightSeries.drawMode |= Surface3DSeries.DrawWireframe;
}
}
Button {
id: surfaceGridColor
anchors.margins: 5
anchors.left: surfaceGridToggle.right
anchors.top: parent.top
width: heightMapView.buttonWidth
text: "Red surface\ngrid color"
onClicked: {
if (Qt.colorEqual(heightSeries.wireframeColor, "#000000")) {
heightSeries.wireframeColor = "red";
text = "Black surface\ngrid color";
} else {
heightSeries.wireframeColor = "black";
text = "Red surface\ngrid color";
}
}
}
Button {
id: surfaceToggle
anchors.margins: 5
anchors.left: heightMapView.portraitMode ? parent.left : surfaceGridColor.right
anchors.top: heightMapView.portraitMode ? surfaceGridColor.bottom : parent.top
width: heightMapView.buttonWidth
text: "Hide\nSurface"
onClicked: {
if (heightSeries.drawMode & Surface3DSeries.DrawSurface)
heightSeries.drawMode &= ~Surface3DSeries.DrawSurface;
else
heightSeries.drawMode |= Surface3DSeries.DrawSurface;
}
}
Button {
id: flatShadingToggle
anchors.margins: 5
anchors.left: heightMapView.portraitMode ? surfaceToggle.right : parent.left
anchors.top: heightMapView.portraitMode ? surfaceGridColor.bottom : surfaceToggle.bottom
width: heightMapView.buttonWidth
text: heightSeries.flatShadingSupported ? "Show\nFlat" : "Flat not\nsupported"
enabled: heightSeries.flatShadingSupported
onClicked: {
if (heightSeries.flatShadingEnabled) {
heightSeries.flatShadingEnabled = false;
text = "Show\nFlat"
} else {
heightSeries.flatShadingEnabled = true;
text = "Show\nSmooth"
}
}
}
Button {
id: backgroundToggle
anchors.margins: 5
anchors.left: heightMapView.portraitMode ? parent.left : flatShadingToggle.right
anchors.top: heightMapView.portraitMode ? flatShadingToggle.bottom
: surfaceToggle.bottom
width: heightMapView.buttonWidth
text: "Hide\nBackground"
onClicked: {
if (surfacePlot.theme.backgroundEnabled) {
surfacePlot.theme.backgroundEnabled = false;
text = "Show\nBackground";
} else {
surfacePlot.theme.backgroundEnabled = true;
text = "Hide\nBackground";
}
}
}
Button {
id: gridToggle
anchors.margins: 5
anchors.left: backgroundToggle.right
anchors.top: heightMapView.portraitMode ? flatShadingToggle.bottom
: surfaceToggle.bottom
width: heightMapView.buttonWidth
text: "Hide\nGrid"
onClicked: {
if (surfacePlot.theme.gridEnabled) {
surfacePlot.theme.gridEnabled = false;
text = "Show\nGrid";
} else {
surfacePlot.theme.gridEnabled = true;
text = "Hide\nGrid";
}
}
}
}
function checkState() {
if (heightSeries.drawMode & Surface3DSeries.DrawSurface)
surfaceToggle.text = "Hide\nSurface";
else
surfaceToggle.text = "Show\nSurface";
if (heightSeries.drawMode & Surface3DSeries.DrawWireframe)
surfaceGridToggle.text = "Hide Surface\nGrid";
else
surfaceGridToggle.text = "Show Surface\nGrid";
}
}