From 749b7e98aaef0ae0f7484814d2516eea5fea53ea Mon Sep 17 00:00:00 2001 From: Tomi Korpipaa Date: Thu, 2 Feb 2023 10:21:57 +0200 Subject: Update qmlscatter example doc to use imperative mood MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pick-to: 6.5 Change-Id: Icf20a3418154a7d591052f043844ce8c2625fc71 Reviewed-by: Sami Varanka Reviewed-by: Tomi Korpipää --- .../qmlscatter/doc/src/qmlscatter.qdoc | 76 +++++++++++----------- 1 file changed, 38 insertions(+), 38 deletions(-) (limited to 'examples/datavisualization/qmlscatter') diff --git a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc index aa2029d2..8d2800e6 100644 --- a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc +++ b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc @@ -9,12 +9,13 @@ \ingroup qtdatavisualization_qmlexamples \brief Using Scatter3D in a QML application. - The scatter graph example shows how to make a simple scatter graph visualization using + \e {Simple Scatter Graph} shows how to make a simple scatter graph visualization using Scatter3D and QML. - For instructions about how to interact with the graph, see \l{Qt Data Visualization Interacting with Data}{this page}. + For instructions about how to interact with the graph, see + \l{Qt Data Visualization Interacting with Data}{this page}. - For instructions how to create a new Qt Quick application of your own, see Qt Creator help. + For instructions on how to create a new Qt Quick application of your own, see Qt Creator help. \image qmlscatter-example.png @@ -22,14 +23,14 @@ \section1 Application Basics - Before diving into the QML code, let's take a look at the application \c main.cpp. + Before diving into the QML code, take a look at the application \c main.cpp. - This application implements a 'Quit' button in the UI, so we want to connect the QQmlEngine::quit() - signal to our application's QWindow::close() slot: + This application implements a 'Quit' button in the UI, so you want to connect the QQmlEngine::quit() + signal to the application's QWindow::close() slot: \snippet qmlscatter/main.cpp 4 - To make deployment little simpler, we gather all of the application's \c .qml files to a resource + To make deployment a little simpler, gather all of the application's \c .qml files to a resource file (\c qmlscatter.qrc): \badcode @@ -41,7 +42,7 @@ \endcode - This also requires us to set the \c main.qml to be read from the resource (\c{qrc:}): + This also requires setting the \c main.qml to be read from the resource (\c{qrc:}): \snippet qmlscatter/main.cpp 3 @@ -59,106 +60,105 @@ ) \endcode - Lastly, we want the application to run in a maximized window: + Finally, make the application run in a maximized window: \snippet qmlscatter/main.cpp 2 \section1 Setting up the Graph - First we'll import all the QML modules we need: + First, import all the needed QML modules: \snippet qmlscatter/qml/qmlscatter/main.qml 0 - Then we create our main \c Item and call it \c mainView: + Then, create the main \c Item and call it \c mainView: \snippet qmlscatter/qml/qmlscatter/main.qml 1 - Then we'll add another \c Item inside the main \c Item, and call it \c dataView. - This will be the item to hold the Scatter3D graph. We'll anchor it to the parent bottom: + Then, add another \c Item inside the main \c Item, and call it \c {dataView}. + This will be the item to hold the Scatter3D graph. Anchor it to the parent bottom: \snippet qmlscatter/qml/qmlscatter/main.qml 9 - Next we're ready to add the Scatter3D graph itself. We'll add it inside the \c dataView and - name it \c {scatterGraph}. Let's make it fill the \c {dataView}: + Next, add the Scatter3D graph itself. Add it inside the \c dataView and + name it \c {scatterGraph}. Make it fill the \c {dataView}: \snippet qmlscatter/qml/qmlscatter/main.qml 2 Now the graph is ready for use, but has no data. It also has the default axes and visual properties. - Let's modify some visual properties first by adding the following inside \c {scatterGraph}: + Next, modify some visual properties first by adding the following inside \c {scatterGraph}: \snippet qmlscatter/qml/qmlscatter/main.qml 3 - We added a customized theme, changed the shadow quality, and adjusted the camera position. - We're happy with the other visual properties, so we won't change them. + A customized theme was added, the shadow quality changed, and the camera position adjusted. + The other visual properties are fine, so there is no need to change them. - The custom theme is based on a predefined theme \c {Theme3D.ThemeQt}, but we change the font - in it: + The custom theme is based on a predefined theme, \c {Theme3D.ThemeQt}, but the font in it + is changed: \snippet qmlscatter/qml/qmlscatter/main.qml 13 - Then it's time to start feeding the graph some data. + Then, start feeding the graph some data. \section1 Adding Data to the Graph - Let's create a \c Data item inside the \c mainView and name it \c seriesData: + Create a \c Data item inside the \c mainView and name it \c seriesData: \snippet qmlscatter/qml/qmlscatter/main.qml 4 - The \c seriesData item contains the data models for all three series we use in this example. + The \c seriesData item contains the data models for all three series used in this example. - This is the component that holds our data in \c {Data.qml}. It has an \c Item as the main + This is the component that holds the data in \c {Data.qml}. It has an \c Item as the main component. - In the main component we'll add the data itself in a \c ListModel and name it - \c {dataModel}: + In the main component, add the data itself to a \c ListModel and name it \c {dataModel}: \snippet qmlscatter/qml/qmlscatter/Data.qml 0 \dots - We'll add two more of these for the other two series, and name them \c dataModelTwo and + Add two more of these to the other two series, and name them \c dataModelTwo and \c {dataModelThree}. - Then we need to expose the data models to be usable from \c {main.qml}. We do this by defining + Then, expose the data models to be usable from \c {main.qml}. Do this by defining them as aliases in the main data component: \snippet qmlscatter/qml/qmlscatter/Data.qml 1 - Now we can use the data from \c Data.qml with \c scatterGraph in \c {main.qml}. First we'll add + Now you can use the data from \c Data.qml with \c scatterGraph in \c {main.qml}. First, add a Scatter3DSeries and call it \c {scatterSeries}: \snippet qmlscatter/qml/qmlscatter/main.qml 5 - Then we'll set up selection label format for the series: + Then, set up selection label format for the series: \snippet qmlscatter/qml/qmlscatter/main.qml 10 - And finally the data for series one in a ItemModelScatterDataProxy. We set the data itself as - \c itemModel for the proxy: + And finally, add the data for series one in a ItemModelScatterDataProxy. Set the data itself as + the \c itemModel for the proxy: \snippet qmlscatter/qml/qmlscatter/main.qml 11 - We'll add the other two series in the same way, but modify some series-specific details a bit: + Add the other two series in the same way, but modify some series-specific details a bit: \snippet qmlscatter/qml/qmlscatter/main.qml 12 \dots - Then we'll modify the properties of the default axes in \c scatterGraph a bit: + Then, modify the properties of the default axes in \c scatterGraph a bit: \snippet qmlscatter/qml/qmlscatter/main.qml 6 - After that we'll just add a few buttons to the \c mainView to control the graph. We'll only - show one as an example: + After that, add a few buttons to the \c mainView to control the graph, one of which is shown as + an example: \snippet qmlscatter/qml/qmlscatter/main.qml 7 - Then we'll modify \c dataView to make room for the buttons at the top: + Then, modify \c dataView to make some room for the buttons at the top: \snippet qmlscatter/qml/qmlscatter/main.qml 8 \dots - And we're done! + And you're done! \section1 Example Contents */ -- cgit v1.2.3