From 325ba699f06c9ee8a97a992482a295a96cc9d809 Mon Sep 17 00:00:00 2001 From: Topi Reinio Date: Mon, 27 May 2013 10:49:16 +0200 Subject: Doc: Fix errors in Qt Sensors QML example This change fixes the errors in example QML code by replacing the overuse of anchors with Column/Row components, and cleaning up by refactoring reusable code into a new QML type. Task-number: QTBUG-31076 Change-Id: Iade6f98d7db716848c44d4066aa23064929b32f2 Reviewed-by: Lorn Potter --- .../qmlqtsensors/components/ApplicationWindow.qml | 4 +- .../sensors/qmlqtsensors/components/Divider.qml | 61 +++++ examples/sensors/qmlqtsensors/qmlqtsensors.qml | 270 +++++++-------------- examples/sensors/qmlqtsensors/qmlqtsensors.qrc | 1 + 4 files changed, 149 insertions(+), 187 deletions(-) create mode 100644 examples/sensors/qmlqtsensors/components/Divider.qml diff --git a/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml b/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml index 06654e4..bf130dc 100644 --- a/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml +++ b/examples/sensors/qmlqtsensors/components/ApplicationWindow.qml @@ -43,9 +43,7 @@ import QtQuick 2.0 Rectangle { id: appWnd - x: 0 - y: 0 width: 320 height: 480 - color: "#ececec" + color: "#868482" } diff --git a/examples/sensors/qmlqtsensors/components/Divider.qml b/examples/sensors/qmlqtsensors/components/Divider.qml new file mode 100644 index 0000000..225b01f --- /dev/null +++ b/examples/sensors/qmlqtsensors/components/Divider.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the QtSensors module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Column { + spacing: 5 + width: parent.width + property alias label: textLabel.text + + Rectangle { + border.width: 1 + height: 2 + width: parent.width + anchors.margins: 20 + border.color: "#2d2b19" + } + Text { + id: textLabel + width: parent.width + horizontalAlignment: Text.AlignHCenter + font.bold: true + } +} diff --git a/examples/sensors/qmlqtsensors/qmlqtsensors.qml b/examples/sensors/qmlqtsensors/qmlqtsensors.qml index 496aea1..4967f5e 100644 --- a/examples/sensors/qmlqtsensors/qmlqtsensors.qml +++ b/examples/sensors/qmlqtsensors/qmlqtsensors.qml @@ -92,234 +92,138 @@ import QtSensors 5.0 //! [0] ApplicationWindow { - id: appWnd - Rectangle { - id: mainWnd - x: 0 - y: 0 - width: 320 - height: 480 - color: "transparent" + // Sensor types used + //! [1] + TiltSensor { + id: tilt + active: false + } + //! [1] + + AmbientLightSensor { + id: ambientlight + active: false + //! [5] + onReadingChanged: { + if (reading.lightLevel == AmbientLightSensor.Unknown) + ambientlighttext.text = "Ambient light: Unknown"; + else if (reading.lightLevel == AmbientLightSensor.Dark) + ambientlighttext.text = "Ambient light: Dark"; + else if (reading.lightLevel == AmbientLightSensor.Twilight) + ambientlighttext.text = "Ambient light: Twilight"; + else if (reading.lightLevel == AmbientLightSensor.Light) + ambientlighttext.text = "Ambient light: Light"; + else if (reading.lightLevel == AmbientLightSensor.Bright) + ambientlighttext.text = "Ambient light: Bright"; + else if (reading.lightLevel == AmbientLightSensor.Sunny) + ambientlighttext.text = "Ambient light: Sunny"; + } + //! [5] + } + + ProximitySensor { + id: proxi + active: false + } - property string speed: "Slow" + Column { + spacing: 10 + anchors.fill: parent + anchors.margins: 5 Text { id: labelTitle - anchors.top: mainWnd.top - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.right: mainWnd.right - + width: parent.width horizontalAlignment: Text.AlignHCenter font.pixelSize: 30 font.bold: true text: "QML QtSensors" } - //Tile region - - Rectangle { - id: tiltLine - anchors.top: labelTitle.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.leftMargin: 5 - anchors.right: mainWnd.right - anchors.rightMargin: 5 - border.width: 1 - height: 1 - border.color: "#888888" - } + // Tilt region + Divider { label: "TiltSensor" } - Text { - id: labelTilt - anchors.top: tiltLine.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.right: mainWnd.right - - horizontalAlignment: Text.AlignHCenter - font.bold: true - text: "TiltSensor" - } - -//! [1] - TiltSensor { - id: tilt - active: false - } -//! [1] - - Rectangle { + Row { + spacing: 20 + width: parent.width + anchors.margins: 5 Button { id: calibrate - anchors.left: mainWnd.left - anchors.leftMargin: 5 - anchors.top: speedRect.bottom height: 30 width: 80 text: "Calibrate" - - onClicked:{ - tilt.calibrate(); - } + onClicked: tilt.calibrate(); } - + Text { + id: xrottext + height: 30 + verticalAlignment: Text.AlignVCenter + //! [3] + text: "X Rotation: " + tilt.xRotation + "°" + //! [3] + } + } + Row { + spacing: 20 + width: parent.width + anchors.margins: 5 Button { id: tiltStart - anchors.top: calibrate.bottom - anchors.left: mainWnd.left - anchors.leftMargin: 5 height: 30 width: 80 text: tilt.active ? "Stop" : "Start" - - onClicked:{ -//! [2] + onClicked: { + //! [2] tilt.active = (tiltStart.text === "Start"); -//! [2] + //! [2] } } - - Text { - id: xrottext - anchors.right: mainWnd.right - anchors.rightMargin: 5 - anchors.left: useRadian.right - anchors.leftMargin: 15 - anchors.top: useRadian.top - anchors.bottom: useRadian.bottom - verticalAlignment: Text.AlignVCenter -//! [3] - text: "X Rotation: " + tilt.xRotation + "°" -//! [3] - } - Text { id: yrottext - anchors.right: mainWnd.right - anchors.rightMargin: 5 - anchors.left: tiltStart.right - anchors.leftMargin: 15 - anchors.top: tiltStart.top - anchors.bottom: tiltStart.bottom + height: 30 verticalAlignment: Text.AlignVCenter -//! [4] + //! [4] text: "Y Rotation: " + tilt.yRotation + "°" -//! [4] + //! [4] } + } - //Ambient Light region - - Rectangle { - id: ambientlightLine - anchors.top: tiltStart.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.leftMargin: 5 - anchors.right: mainWnd.right - anchors.rightMargin: 5 - border.width: 1 - height: 1 - border.color: "#888888" - } - - Text { - id: labelAmbientLight - anchors.top: ambientlightLine.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.right: mainWnd.right - - horizontalAlignment: Text.AlignHCenter - font.bold: true - text: "AmbientLightSensor" - } + Divider { label: "AmbientLightSensor" } - AmbientLightSensor { - id: ambientlight - active: false -//! [5] - onReadingChanged: { - if (reading.lightLevel == AmbientLightSensor.Unknown) - ambientlighttext.text = "Ambient light: Unknown"; - else if (reading.lightLevel == AmbientLightSensor.Dark) - ambientlighttext.text = "Ambient light: Dark"; - else if (reading.lightLevel == AmbientLightSensor.Twilight) - ambientlighttext.text = "Ambient light: Twilight"; - else if (reading.lightLevel == AmbientLightSensor.Light) - ambientlighttext.text = "Ambient light: Light"; - else if (reading.lightLevel == AmbientLightSensor.Bright) - ambientlighttext.text = "Ambient light: Bright"; - else if (reading.lightLevel == AmbientLightSensor.Sunny) - ambientlighttext.text = "Ambient light: Sunny"; - } -//! [5] - } + Row { + spacing: 20 + width: parent.width + anchors.margins: 5 Button{ id: ambientlightStart - anchors.top: labelAmbientLight.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.leftMargin: 5 height: 30 width: 80 text: ambientlight.active ? "Stop" : "Start" - onClicked: { - ambientlight.active = (ambientlightStart.text === "Start" ? true: false); + ambientlight.active = (ambientlightStart.text === "Start" ? true : false); } } Text { id: ambientlighttext - anchors.left: ambientlightStart.right - anchors.leftMargin: 15 - anchors.top: ambientlightStart.top - anchors.bottom: ambientlightStart.bottom + height: 30 verticalAlignment: Text.AlignVCenter - text: "Ambient light: -" - } - - //Proximity region - - Rectangle { - id: proximityLine - anchors.top: ambientlightStart.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.leftMargin: 5 - anchors.right: mainWnd.right - anchors.rightMargin: 5 - border.width: 1 - height: 1 - border.color: "#888888" + text: "Ambient light: Unknown" } + } - Text { - id: labelProximityLight - anchors.top: proximityLine.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.right: mainWnd.right - horizontalAlignment: Text.AlignHCenter - font.bold: true - text: "ProximitySensor" - } + // Proximity region + Divider { label: "ProximitySensor" } - ProximitySensor { - id: proxi - active: false - } + Row { + spacing: 20 + width: parent.width + anchors.margins: 5 - Button{ + Button { id: proxiStart - anchors.top: labelProximityLight.bottom - anchors.topMargin: 5 - anchors.left: mainWnd.left - anchors.leftMargin: 5 height: 30 width: 80 text: proxi.active ? "Stop" : "Start" @@ -331,14 +235,12 @@ ApplicationWindow { Text { id: proxitext - anchors.left: proxiStart.right - anchors.leftMargin: 15 - anchors.top: proxiStart.top - anchors.bottom: proxiStart.bottom + height: 30 verticalAlignment: Text.AlignVCenter -//! [6] - text: "Proximity: " + (proxi.reading.near ? "near" : "far") -//! [6] + //! [6] + text: "Proximity: " + + (proxi.active ? (proxi.reading.near ? "Near" : "Far") : "Unknown") + //! [6] } } } diff --git a/examples/sensors/qmlqtsensors/qmlqtsensors.qrc b/examples/sensors/qmlqtsensors/qmlqtsensors.qrc index 2f6630b..4ba06da 100644 --- a/examples/sensors/qmlqtsensors/qmlqtsensors.qrc +++ b/examples/sensors/qmlqtsensors/qmlqtsensors.qrc @@ -6,5 +6,6 @@ components/images/button_background_disabled.png components/images/button_background_normal.png components/images/button_background_pressed.png + components/Divider.qml -- cgit v1.2.1