From 88cd10aa7b3559b092cf5575b0a17d002dc100ae Mon Sep 17 00:00:00 2001 From: Miikka Heikkinen Date: Thu, 13 Feb 2014 09:59:52 +0200 Subject: Fix examples installation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Had to add one folder to the examples structure so installation works correctly. Change-Id: Ic92dfe9997413a6243abcf5eeba12744ba9e938c Reviewed-by: Tomi Korpipää --- .../qmlscatter/doc/images/qmlscatter-example.png | Bin 0 -> 98086 bytes .../doc/images/qmlscatter-newproject.png | Bin 0 -> 37045 bytes .../qmlscatter/doc/src/qmlscatter.qdoc | 190 +++++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png create mode 100644 examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png create mode 100644 examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc (limited to 'examples/datavisualization/qmlscatter/doc') diff --git a/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png new file mode 100644 index 00000000..65ec4816 Binary files /dev/null and b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-example.png differ diff --git a/examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png new file mode 100644 index 00000000..7c81cae8 Binary files /dev/null and b/examples/datavisualization/qmlscatter/doc/images/qmlscatter-newproject.png differ diff --git a/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc new file mode 100644 index 00000000..fe86d740 --- /dev/null +++ b/examples/datavisualization/qmlscatter/doc/src/qmlscatter.qdoc @@ -0,0 +1,190 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the QtDataVisualization module. +** +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** +****************************************************************************/ + +/*! + \example qmlscatter + \title Qt Quick 2 Scatter Example + \ingroup qtdatavisualization_examples + \brief Using Scatter3D in a QML application. + + The Qt Quick 2 scatter example shows how to make a simple scatter graph visualization using + Scatter3D and Qt Quick 2. + + For instructions about how to interact with the graph, see \l{Qt Data Visualization Interacting with Data}{this page}. + + \image qmlscatter-example.png + + \section1 Creating the application + + The application main is created by creating a new Qt Quick Application project in QtCreator. + The dialog shown here is from QtCreator 3.0.0, and it may look a bit different in other + versions: + + \image qmlscatter-newproject.png + + We'll modify the generated \c main.cpp a bit, as we want to add our \c main.qml file as a + resource. We do it by replacing + + \code viewer.setMainQmlFile(QStringLiteral("qml/qmlscatter/main.qml")); \endcode + + with + + \snippet ../examples/qmlscatter/main.cpp 0 + + This will make application deployment easier. + + We'll enable anti-aliasing for our application in environments that support it: + + \snippet ../examples/qmlscatter/main.cpp 2 + + We'll also change the application to be shown maximized by replacing + + \code viewer.showExpanded(); \endcode + + with + + \snippet ../examples/qmlscatter/main.cpp 1 + + We won't look into that any closer, as we'll change nothing in the generated + \c qtquick2applicationviewer files. + + Next we'll create new qml files for data (\c Data.qml) and a QtQuick.Controls button + we want to modify a bit (\c NewButton.qml), and add them to the resource file, in addition to + main.qml: + + \code + + + qml/qmlscatter/Data.qml + qml/qmlscatter/main.qml + qml/qmlscatter/NewButton.qml + + + \endcode + + Now the base for our application is done, and we can start setting up the graph. + + \section1 Setting up the graph + + Let's start modifying the generated \c {main.qml}. We can remove all previous content from it, + as it has nothing we need. + + First we'll import all the QML modules we need: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 0 + + The last \c import just imports all the qml files in the same directory as our \c {main.qml}, + because that's where \c NewButton.qml and \c Data.qml are. + + Then we create our main \c Item and call it \c mainView: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 1 + + \note The Qt Creator application wizard will set a \c Rectangle item as the main item, which + is opaque white by default. This doesn't work for us, because the graphs are rendered behind the other + QML elements. We change the main item type to \c Item, which is invisible. This way the graph is + not covered by the main item. + + Then we'll add another \c Item inside it, and call it \c dataView. This will be the item to hold + the Scatter3D graph. We'll anchor it to the parent bottom: + + \snippet ../examples/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}: + + \snippet ../examples/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}: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 3 + + We added a customized theme and changed the shadow quality. + We're happy with the other visual properties, so we won't change them. + + The custom theme is based on a predefined theme, but we change the font in it: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 13 + + Then it's time to 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: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 4 + + The \c seriesData item contains the data models for all three series we use in this example. + + This is the component that holds our 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}: + + \snippet ../examples/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 + \c {dataModelThree}. + + Then we need to expose the data models to be usable from \c {main.qml}. We do this by defining + them as aliases in the main data component: + + \snippet ../examples/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 + a Scatter3DSeries and call it \c {scatterSeries}: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 5 + + Then we'll set up selection label format for the series: + + \snippet ../examples/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: + + \snippet ../examples/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: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 12 + \dots + + Then we'll modify the properties of the default axes in \c scatterGraph a bit: + + \snippet ../examples/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: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 7 + + Then we'll modify \c dataView to make room for the buttons at the top: + + \snippet ../examples/qmlscatter/qml/qmlscatter/main.qml 8 + \dots + + And we're done! + + \section1 Example contents +*/ -- cgit v1.2.3