From 9381a9e5c6c907ba05643b0789123d2dac00bb3b Mon Sep 17 00:00:00 2001 From: Samuli Piippo Date: Mon, 2 Nov 2020 11:15:52 +0200 Subject: 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/]*>//g' -e 's|||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 Reviewed-by: Tarja Sundqvist --- startupscreen/GuideView.qml | 114 ++++++++++++++++++++++ startupscreen/MainView.qml | 6 ++ startupscreen/StartupScreen.qml | 4 +- startupscreen/TextButton.qml | 11 +++ startupscreen/UsbButton.qml | 11 +-- startupscreen/assets/b2qt-device-in-kit.png | Bin 0 -> 25518 bytes startupscreen/assets/b2qt-edit-mode-pro-file.png | Bin 0 -> 12752 bytes startupscreen/assets/b2qt-run-button.png | Bin 0 -> 6031 bytes startupscreen/assets/b2qt-select-kit.png | Bin 0 -> 16053 bytes startupscreen/assets/b2qt-tutorial-deploying.html | 27 +++++ startupscreen/qml.qrc | 31 +++--- startupscreen/settingsmanager.cpp | 10 ++ startupscreen/settingsmanager.h | 2 + 13 files changed, 194 insertions(+), 22 deletions(-) create mode 100644 startupscreen/GuideView.qml create mode 100644 startupscreen/assets/b2qt-device-in-kit.png create mode 100644 startupscreen/assets/b2qt-edit-mode-pro-file.png create mode 100644 startupscreen/assets/b2qt-run-button.png create mode 100644 startupscreen/assets/b2qt-select-kit.png create mode 100644 startupscreen/assets/b2qt-tutorial-deploying.html 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 Binary files /dev/null and b/startupscreen/assets/b2qt-device-in-kit.png 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 Binary files /dev/null and b/startupscreen/assets/b2qt-edit-mode-pro-file.png differ diff --git a/startupscreen/assets/b2qt-run-button.png b/startupscreen/assets/b2qt-run-button.png new file mode 100644 index 0000000..f0c1a8e Binary files /dev/null and b/startupscreen/assets/b2qt-run-button.png differ diff --git a/startupscreen/assets/b2qt-select-kit.png b/startupscreen/assets/b2qt-select-kit.png new file mode 100644 index 0000000..b5b900f Binary files /dev/null and b/startupscreen/assets/b2qt-select-kit.png 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 @@ +
+

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.

+

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.

+

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 Boot to Qt Startup Screen appears on the device screen when you power on the device.

+

Note: In Linux, ensure that you have access to plugged in devices. For more information, see Setting Up USB Access to Embedded Devices.

+ +

Preparation of Qt Kit

+

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.

+

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:

+
  1. Select Tools > Options > Kits.
    2. +
  2. Select one of the predefined kits starting with Boot to Qt... that matches the type of your device (1).
    3. +
  3. Select the appropriate device in the Device field (2).
    4. +
  4. Select OK.
    5. +
+

+

Troubleshooting: Device Is Not Found

+

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 Device field. If it does not appear, you can try if replugging the device or rebooting the host platform helps.

+ +

Creating New Qt Quick Project

+

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 Kit Selection 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:

+

After you complete the steps in the project wizard, the generated Qt Quick project is automatically opened in the Edit mode (1).

+

You can see the project's structure by selecting Projects in the sidebar (2). If you select the .pro 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.

+ +

Building, Running, and Deploying Project

+

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 Run button (1) in Qt Creator.

+

Your project should now be running on the target device.

+
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 @@ + AnalogClock.qml + GuideView.qml + MainView.qml + RebootDialog.qml + SplashView.ui.qml + StartupScreen.qml + TextButton.qml + UsbButton.qml + UsbModeDialog.qml + WifiButton.qml + assets/b2qt-device-in-kit.png + assets/b2qt-edit-mode-pro-file.png + assets/b2qt-run-button.png + assets/b2qt-select-kit.png + assets/b2qt-tutorial-deploying.html assets/background.png assets/builtwithQt.png assets/clockFace.png assets/headerBackgroundLeft.png assets/headerBackgroundRight.png + assets/icon_SDcard.png assets/icon_error.png assets/icon_markerBackground.png - assets/icon_ok.png assets/icon_nok.png - assets/icon_SDcard.png + assets/icon_ok.png assets/icon_usb.png assets/icon_wifi_0.png assets/icon_wifi_1.png assets/icon_wifi_2.png assets/icon_wifi_3.png assets/icon_working.png - AnalogClock.qml - StartupScreen.qml - MainView.qml - qtquickcontrols2.conf - SplashView.ui.qml - UsbButton.qml - WifiButton.qml - TextButton.qml - UsbModeDialog.qml fonts/TitilliumWeb-Bold.ttf fonts/TitilliumWeb-Light.ttf fonts/TitilliumWeb-Regular.ttf - RebootDialog.qml + imports/StartupScreen/qmldir + qtquickcontrols2.conf 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; -- cgit v1.2.3