QmlDesigner: Update the documentation for Run dropdown and Qt UI viewer

The Run dropdown button is a new inclusion which has
changed the way how applications can be run or preview
in Qt Design Studio. This document updates the basic
idea of that across a few documents. It also updates
the old Qt UI viewer document to include the new way
of intracting with the Android app and Qt design studio.

Fixes: QDS-13920
Fixes: QDS-14311
Fixes: QDS-13918
Change-Id: I66d3bdbf147c750f59d5521878015d6a8a7c0c92
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>

doc/qtdesignstudio/config/style/qt5-sidebar.html

@@ -204,6 +204,7 @@
         <li><a>Projects</a>
             <ul>
                 <li><a href="studio-projects.html">Creating projects</a></li>
+                <li><a href="studio-live-preview-desktop.html">Running a Qt Design Studio project</a></li>
                 <li><a href="studio-designer-developer-workflow.html">Designer-developer workflow</a></li>
             </ul>
         </li>

doc/qtdesignstudio/src/how-to/qtdesignstudio-live-preview-desktop.qdoc

@@ -1,35 +1,34 @@
-// Copyright (C) 2024 The Qt Company Ltd.
+// Copyright (C) 2025 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
     \page studio-live-preview-desktop.html
-    \previouspage studio-live-preview.html
+    \previouspage studio-run-project.html
     \nextpage creator-live-preview-devices.html
 
     \title Previewing on desktop
 
     To preview the currently active QML file on the desktop:
 
-    \list
+    \list 1
-        \li Select the \uicontrol {Live Preview} button on the top toolbar.
+        \li Select \uicontrol Run dropdown from the top toolbar and select
-        \li Select \key {Alt+P}.
+          \uicontrol {Live Preview}.
-            \image studio-live-preview.webp
+        \li Select \imagerunproject.
+            \image studio-live-preview.webp Live preview a \QDS project on the desktop
+
+        \note Alternatively, select \key {Alt+P}.
     \endlist
 
     To preview any QML file in the project:
 
-    \list
+    \list 1
-        \li Select the \uicontrol {Live Preview} button on the top toolbar.
+        \li Select \uicontrol Run dropdown from the top toolbar and select
+          \uicontrol {Live Preview}.
+        \li Select \imagerunproject.
         \li Right-click the filename in the \l Projects view, and select
             \uicontrol {Preview File}.
     \endlist
 
-    To preview the whole application, select \uicontrol {Live Preview}
-    when viewing the main QML file of the project.
-
-    To preview the application in a different zoom level, right-click the \uicontrol {Live Preview}
-    button and select the zoom level.
-
     \section1 Overriding the preview tool
 
     By default, the QML runtime is used for previewing.
@@ -39,7 +38,7 @@
     \list 1
         \li Select \imagesettings to go to
             \uicontrol {Run Settings}.
-            \image studio-run-settings.webp {Run Settings}
+            \image studio-run-settings.webp Run Settings
         \li In \uicontrol {Override device QML viewer}, select the folder where
             the preview tool executable is located.
     \endlist

doc/qtdesignstudio/src/how-to/qtdesignstudio-run-project.qdoc

@@ -0,0 +1,25 @@
+// Copyright (C) 2025 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page studio-run-project.html
+    \previouspage studio-live-preview.html
+    \nextpage studio-live-preview-desktop.html
+
+    \title Running a \QDS project
+
+    To run a project created with \QDS:
+
+    \list 1
+        \li Open the project with \QDS.
+        \li Select \uicontrol Run dropdown from the top toolbar and select
+          \uicontrol {Run App}.
+        \li Select \imagerunproject.
+            \image studio-run-project.webp {Run a \QDS project}
+
+        \note Alternatively, select \key {Ctrl+R}.
+    \endlist
+
+
+
+*/

doc/qtdesignstudio/src/overviews/qtquick-live-preview.qdoc

@@ -13,26 +13,27 @@
     devices, the preview shows the snapshot of your project from the moment
     you start the preview on the device, not your changes.
 
-    \image studio-live-preview.webp
+    \image studio-live-preview.webp Live preview of the application
 
     Or, use \QDV to run applications in most widely-used web browsers on the
     desktop and in mobile devices and share your designs with reviewers who
-    don't have \QC.
+    don't have \QDS.
 
+    To learn more follow the topics below:
     \list
+        \li \l{Running a \QDS project}
+            {Run a project created with \QDS}.
+
         \li \l{Previewing on desktop}
+            {Preview individual QML files or the whole UI}.
 
-            Preview individual QML files or the whole UI.
         \li \l{Previewing on devices}
-
+            {Connect your devices to your computer}.
-            Connect your devices to your computer.
 
         \li \l{Sharing applications online}
-
+            {Share applications online and view them in a web browser}.
-            Share applications online and view them in a web browser.
 
         \li \l{Viewing applications on Android}
-
+           {Preview \QDS projects with \QUV on an Android device}.
-           Preview \QDS projects with \QUV on an Android device.
     \endlist
 */

doc/qtdesignstudio/src/qtdesignstudio-qt-ui-viewer.qdoc

@@ -1,4 +1,4 @@
-// Copyright (C) 2024 The Qt Company Ltd.
+// Copyright (C) 2025 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
@@ -9,100 +9,84 @@
 
     \title Viewing applications on Android
 
-    View \QDS projects that you have shared online in \QUV.
+    Run and preview your \QDS projects in \QUV with a
-    Bring all the projects from a \QDS ID to \QUV, or establish a direct
+    direct network connection in real-time.
-    network connection for a real-time preview of your current \QDS project.
-    These projects then run on your Android device. You can also
-    adjust settings, view logs, and run example projects.
-
-    \note This feature is included in the
-          \l{https://www.qt.io/pricing}{Qt Design Studio Enterprise license}.
-          \uicontrol {Share Application Online} and \uicontrol {Deploy Project to Android}
-          are unavailable in \QDS without the Enterprise license.
 
     \section1 Installing Qt UI Viewer
 
-    \image qtuiviewer-appstore.webp
-
     To install \QUV on your Android device:
     \list 1
       \li Open the Google Play store on your Android device.
       \li Search for \QUV.
       \li Select \uicontrol Install.
-      \li Open \QUV.
     \endlist
-
+    \image qtuiviewer-appstore.webp Qt UI Viewer in the Google Play Store
-    \section1 Connecting a \QDS ID with \QUV
-
-    Connect your \QDS ID to \QUV to access all your shared \QDS projects in \QUV:
-    \list 1
-      \li Open \QDS on your computer.
-      \li Open or create a project in \QDS.
-      \li Go to \uicontrol File > \uicontrol {Share Application Online}.
-
-          \inlineimage menu-share-application-online.webp
-          \inlineimage studio-share-application-online.webp
-
-      \li Open \QUV on your Android device.
-      \li Select \uicontrol {Scan QR Code}.
-          \image qtuiviewer-scan-qr-code.webp
-      \li Scan the QR code from Share Application Online in the \QDS.
-    \endlist
-
-    \note Only one \QDS ID can be connected to the \QUV at a time.
-
-    \section1 Running a \QDS project in \QUV
-
-     Once the projects are in \QUV:
-      \list 1
-            \li Select a project from the drop-down.
-            \li Select \uicontrol {Run Project}.
-              \image qtuiviewer-live-project.webp
-      \endlist
-
-      Control how frequently \QUV updates the projects or make the project
-      fit the device display from \QUV \uicontrol {Settings}.
-
-      To specify these settings:
-      \list 1
-        \li Go to \uicontrol File > \uicontrol {Settings}.
-        \li Toggle the \uicontrol {Update user projects in the background} or
-            the \uicontrol {Auto scale the project} setting.
-        \image qtuiviewer-settings.webp
-
-        \note The setting "Auto scale the project" works independent of the \QDS
-              ID connection.
-      \endlist
 
     \section1 Creating a network connection between \QDS and \QUV
 
-      To create a direct connection with a \QDS project without using a
+    \note Use the same network to connect both \QDS and your
-      \QDS ID, first, get your Android device's \e {Local IP} from \QUV.
+        Android device where you have installed \QUV.
-      Then, use the \e {Local IP} in \QDS.
+    \list 1
+      \li Open \QUV on your Android device. Find the IP address and note it down.
+      \li Open or create a project in \QDS.
+      \li Select \uicontrol Run dropdown from the top toolbar and select
+          \uicontrol {Device Manager}.
+
+          \image studio-run-dropdown.webp Device Manager in the Run dropdown
+
+      \li In \uicontrol {Set target device IP} write the IP address you have
+          noted from \QUV. Then, select \imageplus. Your device is now added
+          to the list of available devices.
+        \list
+            \li To update the device name, edit \uicontrol Alias.
+            \li To show your device in the \uicontrol Run dropdow,
+                always keep \uicontrol Enabled turned on.
+            \li If you are connected to the same network, and \QUV is running on your
+                Android device, the \uicontrol Status is Online.
+        \endlist
+
+        \image studio-devicemanager-add-device.webp {Add an device in the Device Manager}
+    \endlist
+
+
+    \note You can connect multiple Android devices to \QDS. Then, run a \QDS
+          project on any of the devices by selecting them from
+          \uicontrol Run dropdown, and selecting \imagerunproject.
+
+    \section1 Previewing a \QDS project in \QUV
+
+     Once you have created a network connection between \QDS and \QUV:
 
-      To get the \e {Local IP} from \QUV:
       \list 1
-        \li Go to \uicontrol Menu > \uicontrol Network.
+            \li Open or create a project in \QDS.
-        \li Note the \e {Local IP} of your Android device.
+            \li Open \QUV on your Android device.
-          \image qtuiviewer-network.webp
+            \li Select your Android device from the \uicontrol Run dropdown.
+                \image studio-run-dropdown-with-added-device.webp {Android device listed in the Run dropdown}
+
+            \li Select \imagerunproject.
       \endlist
 
-      To establish a direct connection between \QUV and \QDS:
+      Every time you close \QUV or \QDS, you need to follow the above process
+      to preview it again in \QUV.
+
+      To fit the preview on your Android device's screen, select \uicontrol Settings
+      in the \QUV and turn on \uicontrol Auto-scale. \QUV follows the orientation of your
+      Android device.
+
+      To keep your Android device awake, select \uicontrol Settings
+      in the \QUV and turn on \uicontrol {Keep screen on}.
+
+      \image qtuiviewer-settings.webp Settings of the Qt UI Viewer
+
+    \section1 Removing a connected Android device from \QDS
+
       \list 1
-        \li Open \QDS on your computer.
+            \li Open or create a project in \QDS.
-        \li Open the project you want to connect directly.
+            \li Select \uicontrol Run dropdown from the top toolbar and select
-        \li Go to \uicontrol File > \uicontrol {Deploy Project to Android}.
+                \uicontrol {Device Manager}.
-        \li Enter the \e {Local IP} you got from \QUV into \uicontrol {Device IP}.
+            \li Select the device you want to remove from the list of devices and
-        \li Select \uicontrol Connect.
+                select \imageminus.
-          \image studio-deploy-project-to-android.webp
+            \image studio-devicemanager-remove-device.webp Remove a device from the Device Manager
-
-        \li Select \uicontrol {Send Project}.
-        \li In \QUV, select \uicontrol Menu > \uicontrol Network. The \QDS project
-            now runs in \QUV.
       \endlist
 
-      \note The Android device needs to be on the same network as the \QDS
-      workstation for the connection to work. Also, automatic synchronization
-      is not possible. To update your project manually send it again.
-
 */

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -127,6 +127,7 @@
                     \endlist
                 \li \l{Validating with target hardware}
                     \list
+                        \li \l{Running a \QDS project}
                         \li \l{Previewing on desktop}
                         \li \l{Previewing on devices}
                         \li \l{Sharing applications online}