Doc: Add Qt Design Studio on MCUs intro topic

Added the Add Qt Design Studio on MCUs intro topic and modified the
related topics (index, toc, and external resources) accordingly.

Task-number: QDS-9284
Change-Id: Ibdf27111170b2931511e2ab349ec07210a02e70b
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>

doc/qtcreator/src/external-resources/external-resources-qds.qdoc

@@ -17,3 +17,43 @@
     \externalpage https://doc.qt.io/qtdesignstudio/studio-optimized-3d-scenes.html
     \title Creating Optimized 3D Scenes
 */
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/
+    \title \QMCU documentation
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-traveoii-designui.html
+    \title Designing a UI for Infineon Traveo II
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-miimxrt1170-designui.html
+    \title Designing a UI for NXP i.MX RT1170
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-ra6m3g-designui.html
+    \title Designing a UI for Renesas RA6M3G
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-rh850-designui.html
+    \title Designing a UI for Renesas RH850-D1M1A
+*/
+/*!
+    \externalpage https://doc.qt.io/qtcreator/creator-developing-mcu.html
+    \title Connecting MCUs
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-infineon-traevoii-qsg.html
+    \title Infineon Traveo II quick start guide
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-nxp-rt1170-qsg.html
+    \title NXP i.MX RT1170 quick start guide
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-renesas-ra6-qsg.html
+    \title Renesas EK-RA6M3G quick start guide
+*/
+/*!
+    \externalpage https://doc.qt.io/QtForMCUs/qtul-renesas-rh850-qsg.html
+    \title Renesas RH850-D1M1A quick start guide
+*/

doc/qtcreator/src/howto/creator-external-tools.qdoc

@@ -11,7 +11,7 @@
     \page creator-editor-external.html
     \if defined(qtdesignstudio)
     \previouspage quick-converting-ui-projects.html
-    \nextpage studio-help.html
+    \nextpage studio-on-mcus.html
     \else
     \previouspage creator-keyboard-shortcuts.html
     \nextpage creator-task-lists.html

doc/qtdesignstudio/src/mcus/qtdesignstudio-on-mcus.qdoc

@@ -0,0 +1,92 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \previouspage creator-editor-external.html
+    \page studio-on-mcus.html
+    \nextpage studio-help.html
+
+    \title \QDS on MCUs
+
+    \QMCU is a comprehensive framework that supports various hardware ecosystems
+    and platforms. One of the most important libraries provided by the \QMCU
+    framework is \QUL (QUL), a lightweight implementation of the Qt Quick
+    framework. \QUL provides a QML API and an efficient graphics rendering engine
+    that has a low memory footprint and is optimized for MCUs and other
+    resource-constrained devices.
+
+    In addition to a lightweight graphics framework, \QMCU offers a toolkit that
+    enables you to design, develop, and deploy graphical user interfaces (GUI)
+    on microcontrollers (MCU). Also, it lets you run the applications either
+    on BareMetal or a real-time operating system (RTOS).
+
+    For more information on \QMCU, see \l {\QMCU documentation}.
+
+    \section1 Designing application UIs for MCU devices with \QDS
+
+    As a technical artist or a designer you can use specialized UI design tools,
+    such as Adobe Photoshop, Sketch, Figma, Blender, or Maya to create the
+    original UI design files for your MCU application. After the initial design
+    work, export your design from the design tools, and import your 2D and 3D UI
+    design assets into \QDS, which can convert them into code for developers.
+    For more information on managing the original assets created with
+    specialized UI design tools, see \l {Asset Creation with Other Tools}.
+
+    Once your UI design assets are in \QDS, use it to \l {Wireframing} {wireframe}
+    your MCU application, to visualize its structure. To modify the look and feel
+    of your UI further, utilize the preset UI components available in \QDS.
+
+    For an example on how to create a UI that runs both on the desktop and
+    on MCUs, see \l {Washing Machine UI}. For step-by-step instructions on how
+    to use \QDS to design a UI for a specific MCU target device, see:
+
+    \list
+        \li \l {Designing a UI for Infineon Traveo II}
+        \li \l {Designing a UI for NXP i.MX RT1170}
+        \li \l {Designing a UI for Renesas RA6M3G}
+        \li \l {Designing a UI for Renesas RH850-D1M1A}
+    \endlist
+
+    \section1 Developing applications for MCU devices with \QDS
+
+    As a GUI/application developer, use \QDS to bring your designs to life. Add
+    further functionality to your applications and utilize the \l {Prototyping}
+    {prototyping} features of \QDS to simulate and validate interactions and
+    their dynamic behavior.
+
+    You can also test, preview, and fine-tune your designs to pixel-perfection
+    live on the desktop or on an actual MCU target device. For more information,
+    see \l {Validating with Target Hardware}.
+
+    \image qds-mcu-target-deployment.png
+
+    \QDS enables designers and developers to work together on common projects to
+    develop applications. Designers can use the views in the Design mode to modify
+    UI files (.ui.qml), whereas developers can use Qt Creator to work on the Qt
+    Quick (.qml) and other files that are needed to implement the application
+    logic and to prepare the application for production. For more information,
+    see \l {Implementing Applications}.
+
+    \section1 Connecting MCUs with Qt Creator
+
+    \l {Connecting MCUs} {Connect MCU boards} to a development host to
+    build applications for them using the GNU Arm Embedded GCC compiler, libraries,
+    and other GNU tools necessary for BareMetal software development on devices
+    based on the Arm Cortex-M processors. Deploy the applications on MCUs to run
+    and debug them using Qt Creator.
+
+    The toolchains are available for cross-compilation on Microsoft Windows,
+    Linux, and macOS. However, the \QMCU SDK is currently only available for
+    Windows and Linux.
+
+    For more information on how to manage the complete cycle of developing \QMCU
+    applications using Qt tools, see:
+
+    \list
+        \li \l {Infineon Traveo II quick start guide}
+        \li \l {NXP i.MX RT1170 quick start guide}
+        \li \l {Renesas EK-RA6M3G quick start guide}
+        \li \l {Renesas RH850-D1M1A quick start guide}
+    \endlist
+
+*/

doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc

@@ -3,7 +3,7 @@
 
 /*!
     \page studio-help.html
-    \previouspage creator-editor-external.html
+    \previouspage studio-on-mcus.html
     \nextpage creator-help.html
 
     \title Help

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -263,6 +263,7 @@
                 \li \l{Converting Qt 5 Projects into Qt 6 Projects}
                 \li \l{Converting UI Projects to Applications}
                 \li \l{Using External Tools}
+                \li \l{\QDS on MCUs}
             \endlist
         \li \l Help
             \list

doc/qtdesignstudio/src/qtdesignstudio.qdoc

@@ -81,6 +81,7 @@
                 \li \l{Converting Qt 5 Projects into Qt 6 Projects}
                 \li \l{Converting UI Projects to Applications}
                 \li \l{Using External Tools}
+                \li \l{\QDS on MCUs}
             \endlist
         \li \b {\l Help}
             \list