diff options
author | Nico Vertriest <nico.vertriest@qt.io> | 2017-10-03 15:40:01 +0200 |
---|---|---|
committer | Nico Vertriest <nico.vertriest@qt.io> | 2017-10-11 08:49:44 +0000 |
commit | bca35ce54a541991ff1e36a9bb2e0d436c757ed9 (patch) | |
tree | 2035aa2a1a96018907362fff09d71d10f92a1810 | |
parent | f9c410f619c1019fc361e230df0e4d2a2259e8e9 (diff) |
Doc: add documentation to Dashboard examplev5.10.0-beta2
Task-number: QTBUG-60648
Change-Id: I79b9fdfde18041d95b7aa422bfb4d188ed907589
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
3 files changed, 46 insertions, 7 deletions
diff --git a/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml b/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml index b132510eb..c0fb67204 100644 --- a/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml +++ b/examples/quickcontrols/extras/dashboard/qml/TurnIndicator.qml @@ -59,7 +59,7 @@ Item { property bool flashing: false scale: direction === Qt.LeftArrow ? 1 : -1 - +//! [1] Timer { id: flashTimer interval: 500 @@ -67,7 +67,8 @@ Item { repeat: true onTriggered: flashing = !flashing } - +//! [1] +//! [2] function paintOutlinePath(ctx) { ctx.beginPath(); ctx.moveTo(0, height * 0.5); @@ -79,7 +80,7 @@ Item { ctx.lineTo(0.6 * width, height); ctx.lineTo(0, height * 0.5); } - +//! [2] Canvas { id: backgroundCanvas anchors.fill: parent @@ -95,7 +96,7 @@ Item { ctx.stroke(); } } - +//! [3] Canvas { id: foregroundCanvas anchors.fill: parent @@ -111,4 +112,5 @@ Item { ctx.fill(); } } +//! [3] } diff --git a/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml b/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml index 7225be482..44913621a 100644 --- a/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml +++ b/examples/quickcontrols/extras/dashboard/qml/ValueSource.qml @@ -49,7 +49,7 @@ ****************************************************************************/ import QtQuick 2.2 - +//! [0] Item { id: valueSource property real kph: 0 @@ -79,6 +79,7 @@ Item { property int turnSignal: gear == "P" && !start ? randomDirection() : -1 property real temperature: 0.6 property bool start: true +//! [0] function randomDirection() { return Math.random() > 0.5 ? Qt.LeftArrow : Qt.RightArrow; @@ -101,7 +102,7 @@ Item { SequentialAnimation { loops: Animation.Infinite - +//! [1] ParallelAnimation { NumberAnimation { target: valueSource @@ -120,6 +121,7 @@ Item { duration: 3000 } } +//! [1] ParallelAnimation { // We changed gears so we lost a bit of speed. NumberAnimation { diff --git a/src/extras/doc/src/qtquickextras-examples.qdoc b/src/extras/doc/src/qtquickextras-examples.qdoc index f54834fd9..8ae35ef5a 100644 --- a/src/extras/doc/src/qtquickextras-examples.qdoc +++ b/src/extras/doc/src/qtquickextras-examples.qdoc @@ -31,7 +31,7 @@ \title Qt Quick Extras Examples \brief A collection of examples for \l{Qt Quick Extras}. - Below is a listing of the examples for \l{Qt Quick Extras}. + Below you will find a list with examples for \l{Qt Quick Extras}. */ /*! @@ -53,6 +53,41 @@ \image qtquickextras-example-dashboard.png This example project demonstrates the use of \l CircularGauge to create a car dashboard. + + + The ValueSource type generates random data for testing the dashboard. + The data is random but there is a logical link between some of them, + for example, \c kph and \c rpm. + + + \snippet dashboard/qml/ValueSource.qml 0 + + It runs a looping SequentialAnimation that sets the values of + the properties over time. + + The SequentialAnimation object consists of several ParallelAnimation + objects, which in turn consist of two NumberAnimations, one for + \c kph and one for \c rpm. Both let the value develop to a certain + value over a specified \c duration with the Easing type \c Easing.InOutSine + + \snippet dashboard/qml/ValueSource.qml 1 + + The flashTimer object switches the turn signals \c on or \c off. + + \snippet dashboard/qml/TurnIndicator.qml 1 + + The \c paintOutlinePath(ctx) method does the actual painting of the arrow + for the turn signal. + + \snippet dashboard/qml/TurnIndicator.qml 2 + + The screen consists of a \c foregroundCanvas and a \c backgroundCanvas. + \c foregroundCanvas displays the green turn signal if the \c on and + \c flashing booleans are \c true. + + \snippet dashboard/qml/TurnIndicator.qml 3 +*/ + */ /*! |