Doc: Update Accelerate Bubble example to use the Swipe wizard

Change-Id: I6f3d88788707c4ecd18c327c9145529ec0bd8fc6
Reviewed-by: Tim Jenssen's avatarTim Jenssen <tim.jenssen@qt.io>
parent a1a47242
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
......@@ -48,9 +48,8 @@
**
****************************************************************************/
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick 2.9
import QtQuick.Controls 2.2
Image {
source: "Bluebubble.svg"
......
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
......@@ -47,14 +47,21 @@
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Item {
property alias mainWindow: mainWindow
Page {
width: 600
height: 400
property alias bubble: bubble
property alias mainWindow: mainWindow
header: Label {
text: qsTr("Page 1")
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Rectangle {
id: mainWindow
color: "#ffffff"
......
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
......@@ -47,9 +47,21 @@
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick 2.7
Page {
width: 600
height: 400
Page1Form {
header: Label {
text: qsTr("Page 2")
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Label {
text: qsTr("You are on Page 2.")
anchors.centerIn: parent
}
}
QT += qml quick sensors svg xml
QT += quick sensors svg xml
CONFIG += c++11
SOURCES += main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
......@@ -23,7 +13,25 @@ DEFINES += QT_DEPRECATED_WARNINGS
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
ios {
QTPLUGIN += qsvg qsvgicon qtsensors_ios
QMAKE_INFO_PLIST = Info.plist
}
DISTFILES += \
Bluebubble.svg
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
......@@ -54,10 +54,13 @@
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
......@@ -48,10 +48,9 @@
**
****************************************************************************/
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtSensors 5.7
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtSensors 5.9
ApplicationWindow {
visible: true
......@@ -59,64 +58,84 @@ ApplicationWindow {
height: 480
title: qsTr("Accelerate Bubble")
Page1 {
SwipeView {
id: swipeView
anchors.fill: parent
bubble {
id: bubble
centerX: mainWindow.width / 2
centerY: mainWindow.height / 2
bubbleCenter: bubble.width / 2
x: bubble.centerX - bubble.bubbleCenter
y: bubble.centerY - bubble.bubbleCenter
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
currentIndex: tabBar.currentIndex
Page1Form {
bubble {
id: bubble
centerX: mainWindow.width / 2
centerY: mainWindow.height / 2
bubbleCenter: bubble.width / 2
x: bubble.centerX - bubble.bubbleCenter
y: bubble.centerY - bubble.bubbleCenter
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
}
Behavior on x {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
Behavior on x {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
}
}
Page2Form {
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("Page 1")
}
TabButton {
text: qsTr("Page 2")
}
}
Accelerometer {
id: accel
dataRate: 100
active: true
id: accel
dataRate: 100
active: true
onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
if (isNaN(newX) || isNaN(newY))
return;
if (isNaN(newX) || isNaN(newY))
return;
if (newX < 0)
newX = 0
if (newX < 0)
newX = 0
if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width
if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width
if (newY < 18)
newY = 18
if (newY < 18)
newY = 18
if (newY > mainWindow.height - bubble.height)
newY = mainWindow.height - bubble.height
if (newY > mainWindow.height - bubble.height)
newY = mainWindow.height - bubble.height
bubble.x = newX
bubble.y = newY
}
bubble.x = newX
bubble.y = newY
}
}
function calcPitch(x, y, z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
}
function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
}
function calcPitch(x, y, z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
}
function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
}
}
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>Page1.qml</file>
<file>Page1Form.ui.qml</file>
<file>Page2Form.ui.qml</file>
<file>qtquickcontrols2.conf</file>
<file>Bubble.qml</file>
<file>Bluebubble.svg</file>
<file>main.qml</file>
</qresource>
</RCC>
; This file can be edited to change the style of the application
; See Styling Qt Quick Controls 2 in the documentation for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html
; Read "Qt Quick Controls 2 Configuration File" for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
[Controls]
Style=Default
[Universal]
Theme=Light
;Accent=Steel
[Material]
Theme=Light
;Accent=BlueGrey
;Primary=BlueGray
......@@ -82,14 +82,14 @@
\list 1
\li In the \uicontrol Projects view, double-click the Page1Form.ui.qml
\li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml
file to open it in \QMLD.
\li In the \uicontrol Navigator, select \uicontrol RowLayout and press
\li In the \uicontrol Navigator, select \uicontrol Label and press
\key Delete to delete it.
\li In \uicontrol Library > \uicontrol {QML Types}, select
\uicontrol Rectangle and drag and drop it to the \uicontrol Item in
\uicontrol Rectangle and drag and drop it to the \uicontrol Page in
the navigator.
\li Select the rectangle in the navigator to edit its properties:
......@@ -137,39 +137,32 @@
\endlist
\QC creates a reference to the Bubble type in Page1Form.ui.qml.
\QC creates a reference to the Bubble type in \e Page1Form.ui.qml.
To check your code, you can compare Page1Form.ui.qml with the
To check your code, you can compare \e Page1Form.ui.qml with the
\l{accelbubble/Page1Form.ui.qml}{Page1Form.ui.qml} example file and
Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
\e Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
The UI is now ready and you can switch to editing the Page1.qml and
Bubble.qml files in the \uicontrol {Text Editor}, as described in the
The UI is now ready and you can switch to editing the \e Bubble.qml and
\e main.qml files in the \uicontrol {Text Editor}, as described in the
following section.
\section1 Moving the Bubble
The new project wizard adds boilerplate code to the main.qml file to create
menu items and push buttons. Modify the boilerplate code by removing
obsolete code and by adding new code. You removed the push buttons from the
UI Form, so you also need to remove the corresponding code from Page1.qml
(or the application cannot be built).
In the \uicontrol {Text Editor}, edit Bubble.qml to add properties that we
use to will position the image:
In the \uicontrol {Text Editor}, edit \e Bubble.qml to add properties that we
will use to position the image:
\quotefromfile accelbubble/Bubble.qml
\skipto Image
\printuntil }
In the \uicontrol {Text Editor}, edit main.qml to specify the application
In the \uicontrol {Text Editor}, edit \e main.qml to specify the application
title, as illustrated by the following code snippet:
\quotefromfile accelbubble/main.qml
\skipto ApplicationWindow
\printuntil title
Remove the rest of the boilerplate code in main.qml, except the Page1 type.
Specify bubble properties to position the image:
\printuntil bubbleCenter
......@@ -183,10 +176,10 @@
Then add code to move the bubble based on Accelerometer sensor values:
\list 1
\li Add the following import statement to main.qml:
\li Add the following import statement to \e main.qml:
\code
import QtSensors 5.7
import QtSensors 5.9
\endcode
\li Add the \l{Accelerometer} type with the necessary properties:
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment