diff --git a/doc/qtdesignstudio/images/studio-preset-for-mcus.png b/doc/qtdesignstudio/images/studio-preset-for-mcus.png new file mode 100644 index 00000000000..0177791ffd2 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-preset-for-mcus.png differ diff --git a/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc b/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc new file mode 100644 index 00000000000..3ca1ff99db3 --- /dev/null +++ b/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc @@ -0,0 +1,148 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +/*! + \previouspage studio-features-on-mcu-projects.html + \page studio-projects-for-mcus.html + \nextpage studio-help.html + + \title Creating Projects for MCUs + + Use the \QMCU preset in the \QDS wizard to set up a new \QMCU project. When + you create a project with the wizard, all the necessary files are created, + you can adjust the project settings, and save custom presets. + + \image studio-preset-for-mcus.png + + Using the \QMCU preset creates an application that uses a subset of the + default components that you can deploy, run, and debug on MCU boards. + + \note For more information on the default components available for MCU + projects, see \l {Qt Design Studio Features on MCU Projects}. + + \section1 Creating an MCU Project + + To create an MCU project: + + \list 1 + \li Select \uicontrol {File} > \uicontrol {New Project}. + \li In the \uicontrol {Presets} tab, select the \uicontrol {\QMCU} preset. + \li In the \uicontrol {Details} tab: + \list + \li Select the path for the project files. You can move the project + folders later. + \li Set the screen size to match the device screen, which also enables + previewing on the desktop. You can change the screen size later in + \l {Properties}. + \endlist + \li Select \uicontrol {Create} to create the project. + \endlist + + \QDS creates the following files and folders: + + \list + \li .qmlproject project file defines that all component and image files + in the project folder belong to the project. All files are added + automatically to their respective Files node based on their + type. + \note \QMCU does not recommend using the directory property to + individually list the files in the project. + \li .qml files define the functionality and appearance of application + components. + \li \e Screen01.ui.qml defines a custom component that you can edit in + the \l {2D} view. For more information, see \l {UI Files}. + + While the custom component is a good starting point for new users, + you don't have to use it. Specifically, if you export and import + designs using \QB, your file is most likely called something + else. For more information, see \l {Exporting from Design Tools}. + + \note For MCU projects you can only import 2D assets. + \li \e CMakeLists.txt project configuration file allowing you to + share your project as a fully working C++ application with + developers. + \li qtquickcontrols2.conf file specifies the preferred style and some + style-specific arguments. + \li \e fonts folder contains font files that you have added in + \uicontrol Assets. + \li \e imports folder contains a \e {Constants.qml} file that specifies + a font loader for the Arial font and the screen resolution. The size + of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should + be set as \c {width: Constants.width} & \c {height: Constants.height} + so that it inherits the global resolution saved here. + \li \e MCUDefaultStyle folder contains the default UI images and + components available for the MCU project. + \endlist + + To use image files in the UI, select \uicontrol Assets > \inlineimage icons/plus.png + . + + \sa {Using Custom Presets} + + \section1 Adding Files to MCU Projects + + You can use wizard templates to add individual files to projects. + + The wizard templates in the \uicontrol {Qt Quick Controls} category create + stylable versions of the components in the \uicontrol {Qt Quick Controls} + module. For more information, see \l{Creating Custom Controls}. + + You can create the following types of files: + + \table + \header + \li Category + \li Wizard Template + \li Purpose + \row + \li {1,5} Qt Quick Files + \row + \li Qt Quick File + \li Generates a component with one of the following default components + or \l{Using Positioners}{positioners} as the root component: + \l {basic-item}{Item}, \l {basic-rectangle}{Rectangle}, \l {Images} + {Image}, \l {Border Image}, \l Flickable, Row, Column, Flow, or + Grid. + \row + \li Qt Quick UI File + \li Generates a UI file with one of the above components as the root + component. + \row + \li Qt Quick Views + \li Generates a List View. For more information, see + \l{List and Grid Views}. + \row + \li Qt Quick UI Form + \li Creates a UI file along with a matching QML file for + implementation purposes. + \row + \li {1,8} Qt Quick Controls + \li Custom Button + \li Creates a \l {Button}{push button} with a text label. + \row + \li Custom \CheckBox + \li Creates a \l {Check Box}{check box}. + \row + \li Custom Dial + \li Creates a \l {Slider and Dial}{dial}. + \row + \li Custom Slider + \li Creates a \l {Slider and Dial}{slider}. + \row + \li Custom \SpinBox + \li Creates a \l {Spin Box}{spin box}. + \row + \li Custom Switch + \li Creates a \l {Switch}{switch} with on and off states. + \row + \li \l Pane + \li Provides a background that matches the UI style and theme. + \row + \li SwipeView + \li Enables users to navigate pages by swiping sideways. + \row + \li QML Files + \li ListModel + \li Adds a \l{Editing List Models}{list model} to the project. + \endtable +*/ diff --git a/doc/qtdesignstudio/src/mcus/qtdesignstudio-features-on-mcu-projects.qdoc b/doc/qtdesignstudio/src/mcus/qtdesignstudio-features-on-mcu-projects.qdoc index 5cec8d690e4..89c1051cf90 100644 --- a/doc/qtdesignstudio/src/mcus/qtdesignstudio-features-on-mcu-projects.qdoc +++ b/doc/qtdesignstudio/src/mcus/qtdesignstudio-features-on-mcu-projects.qdoc @@ -4,7 +4,7 @@ /*! \previouspage studio-compatibility-with-mcu-sdks.html \page studio-features-on-mcu-projects.html - \nextpage studio-help.html + \nextpage studio-projects-for-mcus.html \title \QDS Features on MCU Projects diff --git a/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc index 578129024a9..8fe0627488c 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc @@ -3,7 +3,7 @@ /*! \page studio-help.html - \previouspage studio-features-on-mcu-projects.html + \previouspage studio-projects-for-mcus.html \nextpage creator-help.html \title Help diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc index 1aab65187ab..e43232423f1 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc @@ -51,7 +51,7 @@ \li MCU \li Creates an application that uses a subset of default components (as supported by \QMCU) that you can deploy, run, and debug - on MCU boards. + on MCU boards. For more information, see \l {Creating Projects for MCUs}. \row \li {1,3} Mobile \li Scroll diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index cee8f1fe7ad..0ae755b263d 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -256,6 +256,7 @@ \list \li \l {\QDS Version Compatibility with \QMCU SDKs} \li \l {\QDS Features on MCU Projects} + \li \l {Creating Projects for MCUs} \endlist \endlist \li \l Help