<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qmlsurface.qdoc -->
<title>Qt Quick 2 Surface Example | Qt Data Visualization 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtdatavisualization-index.html">Qt Data Visualization</a></td><td >Qt Quick 2 Surface Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtdatavisualization-index.html">Qt Data Visualization | Commercial or GPLv3</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#adding-data-to-the-graph">Adding Data to the Graph</a></li>
<li class="level1"><a href="#showing-data">Showing Data</a></li>
<li class="level1"><a href="#example-contents">Example Contents</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick 2 Surface Example</h1>
<span class="subtitle"></span>
<!-- $$$qmlsurface-brief -->
<p>Using <a href="qml-qtdatavisualization-surface3d.html">Surface3D</a> in a QML application.</p>
<!-- @@@qmlsurface -->
<!-- $$$qmlsurface-description -->
<div class="descr"> <a name="details"></a>
<p>The Qt Quick 2 surface example shows how to make a simple 3D surface plot using <a href="qml-qtdatavisualization-surface3d.html">Surface3D</a> with Qt Quick 2.</p>
<p class="centerAlign"><img src="images/qmlsurface-example.png" alt="" /></p><p>The focus in this example is on generating a surface graph from height data, so in this section we skip explaining the application creation. For more detailed QML example documentation, see <a href="qtdatavisualization-qmlscatter-example.html">Qt Quick 2 Scatter Example</a>.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="adding-data-to-the-graph"></a>
<h2 id="adding-data-to-the-graph">Adding Data to the Graph</h2>
<p>This example shows two methods to set data to surface graph, using the <a href="qml-qtdatavisualization-heightmapsurfacedataproxy.html">HeightMapSurfaceDataProxy</a> and <a href="qml-qtdatavisualization-itemmodelsurfacedataproxy.html">ItemModelSurfaceDataProxy</a>. First we go through setting the data using the height map specific data proxy. It is done with the code snippet below. The proxy itself is contained in a <a href="qml-qtdatavisualization-surface3dseries.html">Surface3DSeries</a>. Inside the <a href="qml-qtdatavisualization-heightmapsurfacedataproxy.html">HeightMapSurfaceDataProxy</a> the <code>heightMapFile</code> specifies the image file containing the height data. The value properties in the proxy define the minimum and maximum values for surface area width and depth. This example shows the terrain around Tycho crater at imaginary position from 67 to 97 and from 30 to 60. Note that on the graph the scale on the Y dimension exaggerates the height.</p>
<pre class="qml">
Surface3DSeries {
id: heightSeries
flatShadingEnabled: false
drawMode: Surface3DSeries.DrawSurface
visible: false
HeightMapSurfaceDataProxy {
heightMapFile: ":/heightmaps/image"
// We don't want the default data values set by heightmap proxy.
minZValue: 30
maxZValue: 60
minXValue: 67
maxXValue: 97
}
onDrawModeChanged: checkState()
}
</pre>
<p>The other method to set surface data used in this example is with model mapping. We do that by first defining a <code>ListModel</code> containing the data for the surface:</p>
<pre class="qml">
ListModel {
id: dataModel
ListElement{ longitude: "0"; latitude: "0"; height: "124"; }
ListElement{ longitude: "0"; latitude: "1"; height: "125"; }
ListElement{ longitude: "0"; latitude: "2"; height: "124"; }
...
</pre>
<p>Then we set up a <a href="qml-qtdatavisualization-surface3dseries.html">Surface3DSeries</a> with a <a href="qml-qtdatavisualization-itemmodelsurfacedataproxy.html">ItemModelSurfaceDataProxy</a>:</p>
<pre class="qml">
Surface3DSeries {
id: surfaceSeries
flatShadingEnabled: false
drawMode: Surface3DSeries.DrawSurface
ItemModelSurfaceDataProxy {
...
</pre>
<p>We add the actual data to the <code>itemModel</code> of the <a href="qml-qtdatavisualization-itemmodelsurfacedataproxy.html">ItemModelSurfaceDataProxy</a>. We also define the roles for columns, rows and values. In this example the row holds values for longitude, column for latitude and the value is for height.</p>
<pre class="cpp">
...
itemModel: surfaceData.model
rowRole: "longitude"
columnRole: "latitude"
yPosRole: "height"
}
</pre>
<a name="showing-data"></a>
<h2 id="showing-data">Showing Data</h2>
<p>In the <code>main.qml</code>, we set up the <a href="qml-qtdatavisualization-surface3d.html">Surface3D</a> element to show the data and various UI elements to illustrate few interesting features.</p>
<p>First is the gradient to be used for the surface, which can be defined as seen in the following snippet. With the <a href="qml-qtdatavisualization-colorgradient.html">ColorGradient</a> we set example colors from position 0.0 to 1.0.</p>
<pre class="qml">
ColorGradient {
id: surfaceGradient
ColorGradientStop { position: 0.0; color: "darkslategray" }
ColorGradientStop { id: middleGradient; position: 0.25; color: "peru" }
ColorGradientStop { position: 1.0; color: "red" }
}
</pre>
<p>This element is set into the <code>baseGradients</code> property in the <code>theme</code> used in <a href="qml-qtdatavisualization-surface3d.html">Surface3D</a>:</p>
<pre class="qml">
theme: Theme3D {
type: Theme3D.ThemeStoneMoss
font.family: "STCaiyun"
font.pointSize: 35
colorStyle: Theme3D.ColorStyleRangeGradient
baseGradients: [surfaceGradient]
}
</pre>
<p>Other interesting features can be controlled with buttons.</p>
<p>The first button is to toggle on and off the surface grid, for which we use the following code:</p>
<pre class="qml">
onClicked: {
if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
heightSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
} else {
surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe;
heightSeries.drawMode |= Surface3DSeries.DrawWireframe;
}
}
</pre>
<p>Second button is for surface shading mode, which is controlled with this code:</p>
<pre class="qml">
onClicked: {
if (surfaceSeries.flatShadingEnabled === true) {
surfaceSeries.flatShadingEnabled = false;
heightSeries.flatShadingEnabled = false;
text = "Show Flat"
} else {
surfaceSeries.flatShadingEnabled = true;
heightSeries.flatShadingEnabled = true;
text = "Show Smooth"
}
}
</pre>
<p>Third button is for series visibility, which is controlled with this code:</p>
<pre class="qml">
onClicked: {
if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface) {
surfaceSeries.drawMode &= ~Surface3DSeries.DrawSurface;
heightSeries.drawMode &= ~Surface3DSeries.DrawSurface;
} else {
surfaceSeries.drawMode |= Surface3DSeries.DrawSurface;
heightSeries.drawMode |= Surface3DSeries.DrawSurface;
}
}
</pre>
<p>Notice that the <code>drawMode</code> and <code>flatShadingEnable</code> properties are set for both series.</p>
<p>Fourth and fifth buttons are for controlling background features.</p>
<p>The last button is for switching between the two series, one of which uses <a href="qml-qtdatavisualization-heightmapsurfacedataproxy.html">HeightMapSurfaceDataProxy</a> and the other one <a href="qml-qtdatavisualization-itemmodelsurfacedataproxy.html">ItemModelSurfaceDataProxy</a>. For this we use the following code:</p>
<pre class="qml">
onClicked: {
if (surfaceSeries.visible === false) {
surfacePlot.axisY.max = 500.0
surfaceSeries.visible = true
heightSeries.visible = false
middleGradient.position = 0.25
text = "Switch to Height Map Series"
} else {
surfacePlot.axisY.max = 250.0
surfaceSeries.visible = false
heightSeries.visible = true
middleGradient.position = 0.50
text = "Switch to Item Model Series"
}
}
</pre>
<p>We also set the maximum value to 500 in model proxy to make the surface flatter and 250 on height map proxy to show exaggerated height. At the same time the middle color position on the gradient is modified to match the value range change.</p>
<a name="example-contents"></a>
<h2 id="example-contents">Example Contents</h2>
<p>Files:</p>
<ul>
<li><a href="qtdatavisualization-qmlsurface-main-cpp.html">qmlsurface/main.cpp</a></li>
<li><a href="qtdatavisualization-qmlsurface-qml-qmlsurface-data-qml.html">qmlsurface/qml/qmlsurface/Data.qml</a></li>
<li><a href="qtdatavisualization-qmlsurface-qml-qmlsurface-newbutton-qml.html">qmlsurface/qml/qmlsurface/NewButton.qml</a></li>
<li><a href="qtdatavisualization-qmlsurface-qml-qmlsurface-main-qml.html">qmlsurface/qml/qmlsurface/main.qml</a></li>
<li><a href="qtdatavisualization-qmlsurface-qmlsurface-pro.html">qmlsurface/qmlsurface.pro</a></li>
<li><a href="qtdatavisualization-qmlsurface-qmlsurface-qrc.html">qmlsurface/qmlsurface.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/qmlsurface/heightmap.png">qmlsurface/heightmap.png</a></li>
</ul>
</div>
<!-- @@@qmlsurface -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> 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. </p>
</div>
</body>
</html>
