summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSamuli Piippo <samuli.piippo@qt.io>2020-11-02 11:15:52 +0200
committerSamuli Piippo <samuli.piippo@qt.io>2020-11-18 09:52:02 +0000
commit9381a9e5c6c907ba05643b0789123d2dac00bb3b (patch)
treefe96df4c023a3b6f68aefee2e83c7cb0f006af49
parenta15beba02f95e56d1fe50eaf13b59b95b23d0e2c (diff)
startupscreen: Add deployment guide
Use the html text from Boot to Qt documentation for the guide. Some modification needed for the html file to remove header and footer, use correct path to images and remove links: sed -i -e '0,/$$$b2qt/d' -e '/@@@b2qt/,$d' -e 's|images/|assets/|' \ -e 's/<a [^>]*>//g' -e 's|</a>||g' assets/b2qt-tutorial-deploying.html Since TextArea doesn't work correcly in Flickable with touch event, use Text element with styling from dummy TextArea. Task-number: QTBUG-87029 Change-Id: I5835fc684ad01d69e1bce7f6920dd5f561fbe56c Reviewed-by: Rami Potinkara <rami.potinkara@qt.io> Reviewed-by: Tarja Sundqvist <tarja.sundqvist@qt.io>
-rw-r--r--startupscreen/GuideView.qml114
-rw-r--r--startupscreen/MainView.qml6
-rw-r--r--startupscreen/StartupScreen.qml4
-rw-r--r--startupscreen/TextButton.qml11
-rw-r--r--startupscreen/UsbButton.qml11
-rw-r--r--startupscreen/assets/b2qt-device-in-kit.pngbin0 -> 25518 bytes
-rw-r--r--startupscreen/assets/b2qt-edit-mode-pro-file.pngbin0 -> 12752 bytes
-rw-r--r--startupscreen/assets/b2qt-run-button.pngbin0 -> 6031 bytes
-rw-r--r--startupscreen/assets/b2qt-select-kit.pngbin0 -> 16053 bytes
-rw-r--r--startupscreen/assets/b2qt-tutorial-deploying.html27
-rw-r--r--startupscreen/qml.qrc31
-rw-r--r--startupscreen/settingsmanager.cpp10
-rw-r--r--startupscreen/settingsmanager.h2
13 files changed, 194 insertions, 22 deletions
diff --git a/startupscreen/GuideView.qml b/startupscreen/GuideView.qml
new file mode 100644
index 0000000..0170e1b
--- /dev/null
+++ b/startupscreen/GuideView.qml
@@ -0,0 +1,114 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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
+import QtQuick.Layouts
+import QtQuick.Controls
+import StartupScreen
+
+Item {
+ id: root
+ width: parent.width
+ height: parent.height
+ anchors.horizontalCenter: parent.horizontalCenter
+
+ Flickable {
+ id: flick
+ anchors.fill: parent
+ contentHeight: guide.height
+ flickableDirection: Flickable.VerticalFlick
+
+ // dummy component to access current style
+ TextArea {
+ id: textarea
+ visible: false
+ readOnly: true
+ }
+
+ // Get background from TextArea
+ Rectangle {
+ anchors.fill: parent
+ border.width: textarea.background.border.width
+ border.color: textarea.background.border.color
+ color: textarea.background.color
+ }
+
+ Text {
+ id: guide
+ width: root.width
+ text: SettingsManager.guideText
+ textFormat: Text.RichText
+ wrapMode: Text.WordWrap
+
+ // Get style from TextArea
+ font: textarea.font
+ color: textarea.color
+ padding: textarea.padding
+ topPadding: textarea.topPadding
+ rightPadding: textarea.rightPadding
+ bottomPadding: textarea.bottomPadding
+ }
+ }
+
+ Image {
+ id: backButton
+ source: "assets/icon_nok.png"
+ anchors.top: parent.top
+ anchors.right: parent.right
+ scale: 0.5
+ opacity: 0.5
+ MouseArea {
+ anchors.fill: parent
+ onPressed: backButton.scale = 0.4
+ onReleased: backButton.scale = 0.5
+ onClicked: root.visible = false
+ }
+ }
+}
diff --git a/startupscreen/MainView.qml b/startupscreen/MainView.qml
index fb79df3..c297f41 100644
--- a/startupscreen/MainView.qml
+++ b/startupscreen/MainView.qml
@@ -147,6 +147,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: height / 4
+ onPressed: guide.visible = true
}
}
}
@@ -229,6 +230,11 @@ Item {
id: usbModeDialog
}
+ GuideView {
+ id: guide
+ visible: false
+ }
+
// base state = landscape
states: [
State {
diff --git a/startupscreen/StartupScreen.qml b/startupscreen/StartupScreen.qml
index 254dba2..36730bf 100644
--- a/startupscreen/StartupScreen.qml
+++ b/startupscreen/StartupScreen.qml
@@ -58,8 +58,8 @@ ApplicationWindow {
property bool isPortrait: height > width ? true : false
- width: 640
- height: 480
+ width: 960
+ height: 540
Timer {
interval: 1000
diff --git a/startupscreen/TextButton.qml b/startupscreen/TextButton.qml
index e5f11fc..1eb8303 100644
--- a/startupscreen/TextButton.qml
+++ b/startupscreen/TextButton.qml
@@ -52,11 +52,22 @@ import QtQuick
import StartupScreen
Rectangle {
+ id: root
+
property alias fontSize: buttonLabel.font.pixelSize
+ signal pressed()
+
color: "#3a4055"
radius: 0
+ MouseArea {
+ anchors.fill: parent
+ onPressed: root.scale = 0.9
+ onReleased: root.scale = 1.0
+ onClicked: root.pressed()
+ }
+
Text {
id: buttonLabel
color: "white"
diff --git a/startupscreen/UsbButton.qml b/startupscreen/UsbButton.qml
index 355ab0c..315f9c8 100644
--- a/startupscreen/UsbButton.qml
+++ b/startupscreen/UsbButton.qml
@@ -70,14 +70,9 @@ Item {
// changing button state
MouseArea {
anchors.fill: parent
-
- onPressed: {
- root.scale = 0.9
- }
- onReleased: {
- root.scale = 1.0
- if (available) root.pressed()
- }
+ onPressed: root.scale = 0.9
+ onReleased: root.scale = 1.0
+ onClicked: if (available) root.pressed()
}
// button icon
diff --git a/startupscreen/assets/b2qt-device-in-kit.png b/startupscreen/assets/b2qt-device-in-kit.png
new file mode 100644
index 0000000..9462a3a
--- /dev/null
+++ b/startupscreen/assets/b2qt-device-in-kit.png
Binary files differ
diff --git a/startupscreen/assets/b2qt-edit-mode-pro-file.png b/startupscreen/assets/b2qt-edit-mode-pro-file.png
new file mode 100644
index 0000000..79dc4e5
--- /dev/null
+++ b/startupscreen/assets/b2qt-edit-mode-pro-file.png
Binary files differ
diff --git a/startupscreen/assets/b2qt-run-button.png b/startupscreen/assets/b2qt-run-button.png
new file mode 100644
index 0000000..f0c1a8e
--- /dev/null
+++ b/startupscreen/assets/b2qt-run-button.png
Binary files differ
diff --git a/startupscreen/assets/b2qt-select-kit.png b/startupscreen/assets/b2qt-select-kit.png
new file mode 100644
index 0000000..b5b900f
--- /dev/null
+++ b/startupscreen/assets/b2qt-select-kit.png
Binary files differ
diff --git a/startupscreen/assets/b2qt-tutorial-deploying.html b/startupscreen/assets/b2qt-tutorial-deploying.html
new file mode 100644
index 0000000..be626b8
--- /dev/null
+++ b/startupscreen/assets/b2qt-tutorial-deploying.html
@@ -0,0 +1,27 @@
+<div class="descr">
+<p>You can deploy all kinds of Qt projects to your target device: Qt Examples and projects that you have created yourself. In this tutorial, we use Qt Creator's project wizard and create a new Qt Quick project. We build and run the project, and deploy it to a target device.</p>
+<p>This tutorial guides how you deploy a project to one of the reference target devices with pre-built images (see Reference Target Devices and Development Hosts). However, you should follow similar steps when you deploy to a target device where you have built an image yourself.</p>
+<p>The tutorial assumes that you have installed the Boot to Qt software stack to your host platform and flashed it to your target device. That is, the <i>Boot to Qt Startup Screen</i> appears on the device screen when you power on the device.</p>
+<p><b>Note: </b>In Linux, ensure that you have access to plugged in devices. For more information, see Setting Up USB Access to Embedded Devices.</p>
+
+<h2 id="preparation-of-qt-kit">Preparation of Qt Kit</h2>
+<p>Qt Creator groups build and run specific settings as kits. Each kit consists of a set of values that define one environment, such as a target device, tool chain, Qt version, and debugger command to use.</p>
+<p>Before deploying, make sure that your kit contains the target device. Connect your target device to the host platform, open Qt Creator, and execute the following steps:</p>
+<ol class="1" type="1"><li>Select <b>Tools &gt; Options &gt; Kits</b>.</li>
+<li>Select one of the predefined kits starting with <i>Boot to Qt..&#x2e;</i> that matches the type of your device (1).</li>
+<li>Select the appropriate device in the <b>Device</b> field (2).</li>
+<li>Select <b>OK</b>.</li>
+</ol>
+<p class="centerAlign"><img src="assets/b2qt-device-in-kit.png" alt="" /></p>
+<h3 id="troubleshooting-device-is-not-found">Troubleshooting: Device Is Not Found</h3>
+<p>When your target device is connected to the host platform, Qt Creator should automatically detect it and the device should appear in the kit's <b>Device</b> field. If it does not appear, you can try if replugging the device or rebooting the host platform helps.</p>
+
+<h2 id="creating-new-qt-quick-project">Creating New Qt Quick Project</h2>
+<p>Create a new Qt Quick project with the steps in Creating Qt Quick Applications. When creating the project, you can use the default values defined in the wizard pages. In the <b>Kit Selection</b> page, select the Boot to Qt software stack kit that matches the type of your target device. The following picture illustrates how to select the kit where the device was added in Preparation of Qt Kit:</p>
+<p class="centerAlign"><img src="assets/b2qt-select-kit.png" alt="" /></p><p>After you complete the steps in the project wizard, the generated Qt Quick project is automatically opened in the <b>Edit</b> mode (1).</p>
+<p class="centerAlign"><img src="assets/b2qt-edit-mode-pro-file.png" alt="" /></p><p>You can see the project's structure by selecting <b>Projects</b> in the sidebar (2). If you select the <i>.pro</i> file (3) under your project, you see its content in the editor view. The last lines in the .pro file (4) define the path where your project is deployed. Qt's project wizard generates the path automatically for Qt Quick projects. For other projects, you need to define the path manually in the project file. For more information, see Deploying Qt Projects with Boot to Qt.</p>
+
+<h2 id="building-running-and-deploying-project">Building, Running, and Deploying Project</h2>
+<p>Now it is time to build and run your project, and deploy it to the target device. When you run the project, Qt Creator automatically both builds it and deploys it to the device. Thus, you just need to select the <b>Run</b> button (1) in Qt Creator.</p>
+<p class="centerAlign"><img src="assets/b2qt-run-button.png" alt="" /></p><p>Your project should now be running on the target device.</p>
+</div>
diff --git a/startupscreen/qml.qrc b/startupscreen/qml.qrc
index 1e22972..d7291bd 100644
--- a/startupscreen/qml.qrc
+++ b/startupscreen/qml.qrc
@@ -1,33 +1,40 @@
<RCC>
<qresource prefix="/">
+ <file>AnalogClock.qml</file>
+ <file>GuideView.qml</file>
+ <file>MainView.qml</file>
+ <file>RebootDialog.qml</file>
+ <file>SplashView.ui.qml</file>
+ <file>StartupScreen.qml</file>
+ <file>TextButton.qml</file>
+ <file>UsbButton.qml</file>
+ <file>UsbModeDialog.qml</file>
+ <file>WifiButton.qml</file>
+ <file>assets/b2qt-device-in-kit.png</file>
+ <file>assets/b2qt-edit-mode-pro-file.png</file>
+ <file>assets/b2qt-run-button.png</file>
+ <file>assets/b2qt-select-kit.png</file>
+ <file>assets/b2qt-tutorial-deploying.html</file>
<file>assets/background.png</file>
<file>assets/builtwithQt.png</file>
<file>assets/clockFace.png</file>
<file>assets/headerBackgroundLeft.png</file>
<file>assets/headerBackgroundRight.png</file>
+ <file>assets/icon_SDcard.png</file>
<file>assets/icon_error.png</file>
<file>assets/icon_markerBackground.png</file>
- <file>assets/icon_ok.png</file>
<file>assets/icon_nok.png</file>
- <file>assets/icon_SDcard.png</file>
+ <file>assets/icon_ok.png</file>
<file>assets/icon_usb.png</file>
<file>assets/icon_wifi_0.png</file>
<file>assets/icon_wifi_1.png</file>
<file>assets/icon_wifi_2.png</file>
<file>assets/icon_wifi_3.png</file>
<file>assets/icon_working.png</file>
- <file>AnalogClock.qml</file>
- <file>StartupScreen.qml</file>
- <file>MainView.qml</file>
- <file>qtquickcontrols2.conf</file>
- <file>SplashView.ui.qml</file>
- <file>UsbButton.qml</file>
- <file>WifiButton.qml</file>
- <file>TextButton.qml</file>
- <file>UsbModeDialog.qml</file>
<file>fonts/TitilliumWeb-Bold.ttf</file>
<file>fonts/TitilliumWeb-Light.ttf</file>
<file>fonts/TitilliumWeb-Regular.ttf</file>
- <file>RebootDialog.qml</file>
+ <file>imports/StartupScreen/qmldir</file>
+ <file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
diff --git a/startupscreen/settingsmanager.cpp b/startupscreen/settingsmanager.cpp
index 0608f86..e732734 100644
--- a/startupscreen/settingsmanager.cpp
+++ b/startupscreen/settingsmanager.cpp
@@ -151,3 +151,13 @@ QString SettingsManager::networks()
}
return networks;
}
+
+QByteArray SettingsManager::guideText()
+{
+ QFile file(":/assets/b2qt-tutorial-deploying.html");
+ if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
+ return file.readAll();
+ } else {
+ return QByteArrayLiteral("Guide not found");
+ }
+}
diff --git a/startupscreen/settingsmanager.h b/startupscreen/settingsmanager.h
index fa6c066..fe254d7 100644
--- a/startupscreen/settingsmanager.h
+++ b/startupscreen/settingsmanager.h
@@ -61,6 +61,7 @@ class SettingsManager : public QObject
Q_PROPERTY(QString usbMode READ usbMode WRITE setUsbMode)
Q_PROPERTY(bool hasQdb READ hasQdb CONSTANT)
Q_PROPERTY(QString networks READ networks CONSTANT)
+ Q_PROPERTY(QByteArray guideText READ guideText CONSTANT)
public:
explicit SettingsManager(QObject *parent = nullptr);
@@ -71,6 +72,7 @@ public:
Q_INVOKABLE void reboot();
QString networks();
+ QByteArray guideText();
private:
QString m_usbMode;