Doc: Add Creating Projects for MCUs topic

Added a new Creating Projects for MCUs topic and updated the
related topics, including the ToC, accordingly.

Task-number: QDS-9288
Change-Id: Ia6e3afad48e98f549bdbb210b8ec7d3ebc5687c5
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Yasser Grimes <yasser.grimes@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

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
+*/

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
 

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

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

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