QmlDesigner: Create the documentation for Qt UI Viewer

This patch creates the documentation for the
Android app Qt UI Viewer.

Fixes: QDS-11807
Change-Id: Ieabc7f986fa6470bf3c674062e10d3b3e4c10d42
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/config/macros.qdocconf

@@ -35,6 +35,7 @@ macro.QMLD              = "Qt Quick Designer"
 macro.QQV               = "Qt QML Viewer"
 macro.QSDK              = "Qt"
 macro.QUL               = "Qt Quick Ultralite"
+macro.QUV               = "Qt UI Viewer"
 macro.QOI               = "Qt Online Installer"
 macro.QMT               = "Qt Maintenance Tool"
 macro.qtcversion        = $QTC_VERSION

doc/qtcreator/src/qtquick/qtquick-live-preview-devices.qdoc

@@ -4,11 +4,8 @@
 /*!
     \previouspage creator-live-preview-desktop.html
     \page creator-live-preview-devices.html
-    \if defined(qtdesignstudio)
-    \nextpage creator-live-preview-android.html
-    \else
     \nextpage qt-design-viewer.html
-    \endif
+
     \title Previewing on Devices
 
     To preview UIs on Android devices, you need to enable USB debugging on them
@@ -47,6 +44,7 @@
 
     \section2 Previewing on Android Devices
 
+    \if defined(qtcreator)
     The USB debugging feature on Android devices enables creating connections
     to the devices from \QDS and running the preview utility on them.
 
@@ -63,6 +61,12 @@
     is copied to them. This might take some time. Thereafter, previewing will
     get faster because only the UI files need to be copied to the
     device.
+    \else
+    Preview your \QDS projects with \QUV. It is an application
+    that runs on your Android device.
+    Learn more about \l{Viewing Applications on Android}.
+    \endif
+
 
     \section2 Previewing on Boot2Qt Devices
 

doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc

@@ -15,10 +15,7 @@
     You can use the live preview feature to preview a UI file or the entire
     UI on the desktop, as well as on embedded Linux
     devices. The changes you make to the UI are instantly visible
-    to you in the preview. While the preview is available on Android devices,
+    to you in the preview.
-    it does not instantly reflect the changes made to the UI in the editor. It
-    shows the snapshot of your project from the moment you start the preview on
-    the device.
 
     In addition, you can use \QDV to run
     \if defined(qtcreator)
@@ -52,15 +49,15 @@
             \endif
 
         \if defined(qtdesignstudio)
-        \li \l{Previewing Android applications}
-
-            You can preview Android applications live using an Android
-            emulator.
 
         \li \l{Sharing Applications Online}
 
             You can share applications online and view them in a web browser.
 
+        \li \l{Viewing Applications on Android}
+
+           Preview your \QDS projects with \QUV. It is an application
+           that runs on your Android device.
         \else
         \li \l{Previewing in Browsers}
 

doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc

@@ -3,9 +3,9 @@
 
 /*!
 
-    \page design-viewer-single-page-navigation.html
     \previouspage qt-design-viewer.html
-    \nextpage studio-exporting-and-importing.html
+    \page design-viewer-single-page-navigation.html
+    \nextpage qt-ui-viewer.html
 
 
     \title Creating a Single Page Navigation Web Application

doc/qtdesignstudio/src/overviews/qt-design-viewer.qdoc

@@ -3,7 +3,7 @@
 
 /*!
     \page qt-design-viewer.html
-    \previouspage creator-live-preview-android.html
+    \previouspage creator-live-preview-devices.html
     \nextpage design-viewer-single-page-navigation.html
 
     \title Sharing Applications Online

doc/qtdesignstudio/src/prototyping/qtquick-live-preview-android.qdoc

@@ -1,179 +0,0 @@
-// Copyright (C) 2021 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
-
-/*!
-    \previouspage creator-live-preview-devices.html
-    \page creator-live-preview-android.html
-    \nextpage qt-design-viewer.html
-
-    \title Previewing Android Applications
-
-    In \QDS, you can preview Android applications live using an Android emulator.
-
-    \section1 Prerequisites
-
-    \section2 Install OpenJDK 11
-
-    You need to install OpenJDK 11 as described in \l{Getting Started with Qt for Android},
-    to do this:
-
-    \list
-      \li On Linux:
-        \list 1
-          \li In the command line, run:
-          \code
-          sudo apt-get install openjdk-11-jdk
-          \endcode
-        \endlist
-      \li On macOS:
-        \list 1
-          \li Download OpenJDK 11 from \l{Download OpenJDK}.
-          \li In the command line, run:
-          \code
-          cd ~/Downloads
-          tar xf microsoft-jdk-11.0.13.8.1-macos-x64.tar.gz
-          \endcode
-          \li Copy the unzipped folder to a location where macOS searches for Java by default:
-          \code
-          sudo cp -Rv jdk-11.0.13+8 /Library/Java/JavaVirtualMachines/
-          \endcode
-          \li Check if Java was correctly installed:
-          \code
-          java -version
-          \endcode
-          The Java installation is correct if the command returns something like:
-          \code
-          openjdk version "11.0.13" 2021-10-19 LTS
-          OpenJDK Runtime Environment Microsoft-27990 (build 11.0.13+8-LTS)
-          OpenJDK 64-Bit Server VM Microsoft-27990 (build 11.0.13+8-LTS, mixed mode)
-          \endcode
-        \endlist
-      \li On Windows:
-        \list
-          \li OpenJDK 11 is automatically installed with Android Studio.
-        \endlist
-    \endlist
-
-    \section2 Install Android Studio and SDK Tools
-
-    You need to install Android Studio:
-
-    \list 1
-      \li Download Android Studio from \l{Download Android Studio}.
-      \li Install Android Studio according to the
-      \l{Android Studio Installation Guide}.
-    \endlist
-
-    Next, you need to install Android SDK command-line tools:
-
-    \list 1
-      \li Run Android Studio and on the welcome page, select \uicontrol{More Actions} >
-      \uicontrol{SDK Manager}.
-      \image android-studio-sdk-manager.png
-      \li Select \uicontrol{Android SDK Build-Tools 32-rc1}, \uicontrol{NDK (Side by side)}, and
-      \uicontrol{Android SDK Command-line Tools (latest)}.
-      \image android-studio-sdk-tools.png
-      \li Select \uicontrol{Apply} and follow the instructions in the wizard to finalize the
-      installation.
-    \endlist
-
-    \section2 Install Android SDK Packages in \QDS
-
-    You need to install Android SDK packages in \QDS:
-    \list 1
-      \li Run \QDS.
-      \li Go to \uicontrol Edit > \uicontrol Preferences > \uicontrol{Devices}.
-      \li Select \uicontrol Yes on the \uicontrol{Missing Android SDK Packages} dialog.
-      \image qtds-options-dialog-missing-packages.png
-      \li Select \uicontrol OK on the \uicontrol{Android SDK Changes} dialog.
-      \image qtds-android-sdk-changes-dialog.png
-      \li Select \uicontrol Yes on the \uicontrol{Android SDK Licenses} dialog.
-      \image qtds-android-sdk-licenses-dialog.png
-    \endlist
-
-    \note The installation can take a while. If the installation process seems to
-    have stopped working, try to restart \QDS and run the installation again.
-
-    After completing these steps, you should no longer have any errors on the
-    \uicontrol Edit > \uicontrol Preferences > \uicontrol Devices page.
-    \image qtds-options-accept-licenses.png
-
-    \section2 Create Android Virtual Devices
-
-    Next, you need to create an Android Virtual Device (AVD):
-
-    \note You might need to download a system image depending on your setup.
-
-    \list 1
-      \li Run Android Studio and on the welcome page, select \uicontrol{More Actions} >
-      \uicontrol{AVD Manager}.
-      \image android-studio-avd-manager.png
-      \li Select \uicontrol{Create Virtual Device} and follow the instructions in the wizard to
-      finalize the creation.
-    \endlist
-
-    \QDS has a AVD manager where you can create AVDs as well but it is recommended to use Android
-    Studio because then you can directly install the needed system package for the selected device
-    configuration.
-
-    To create an AVD in \QDS:
-    \list 1
-      \li Go to \uicontrol Edit > \uicontrol Preferences.
-      \li On the \uicontrol Devices tab, select \uicontrol Add and follow the wizard to finalize
-      the creation. If there is no entry for \e{Android Device} in the
-     \uicontrol{Available device types} list, try restarting \QDS.
-    \endlist
-
-    \note Many device images require Intel HAXM to work on Windows 10 and later, you can
-    download and install the drivers from
-    \l{https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows}{here}.
-
-    \image qtds-options-devices.png
-
-    \section2 Set the AVD as the Device in the Android Kit
-
-    Next, you need to set the AVD as the Android device kit. You do this under the
-    \uicontrol Kits tab. If the \uicontrol Kits list is empty, restart \QDS.
-
-    \image qtds-options-kits.png
-
-    \section1 Create a Project and Run the Emulator
-
-    Now, you are set up and can create a project in \QDS. In the project, configure it to run on the
-    Android device:
-    \list 1
-      \li Select the \uicontrol Projects mode tab.
-      \li Under \uicontrol{Build & Run}, select the Android device.
-    \endlist
-
-    \image qtds-run-settings.png
-
-    Next, to run the emulator, do one of the following:
-    \list
-      \li Select \uicontrol{Live Preview} in the top toolbar.
-      \image toolbar-show-live-preview.png
-      \li Select \uicontrol Build > \uicontrol{QML Preview}.
-      \note The \uicontrol Build menu option is not visible by default. To show
-      it, go to \uicontrol Edit > \uicontrol Preferences > \uicontrol Environment
-      > \uicontrol {Qt Design Studio Configuration}.
-      \image menu-build-qml-preview.png
-      \li Select \key Alt + \key P.
-    \endlist
-
-    Now the emulator runs, the qtdesignviewer APK delivered with the \QDS installation
-    is uploaded, and the project is uploaded and shown in the emulator.
-    \image qtds-running-emulator.webp
-
-    Note the following:
-    \list
-      \li The qtdesignviewer for Android currently has no live preview. You have to restart
-      the preview to see updates.
-      \li Android typically has very high DPI and it is good to familiarize yourself with how
-      \l{https://doc-snapshots.qt.io/qt6-dev/highdpi.html}{high DPI works in Qt 6}. You can,
-      for example, use QT_SCALE_FACTOR or QT_USE_PHYSICAL_DPI. You can define those in the
-      \e .qmlproject file.
-      \li The qtdesignviewer for Android is currently built with Qt 6.2 and comes with all
-      QML modules shipped with \QDS 2.3.
-    \endlist
-
-*/

doc/qtdesignstudio/src/qtdesignstudio-exporting-and-importing.qdoc

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
 /*!
-    \previouspage design-viewer-single-page-navigation.html
+    \previouspage qt-ui-viewer.html
     \page studio-exporting-and-importing.html
     \nextpage qtbridge-overview.html
 

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

@@ -0,0 +1,104 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+
+    \previouspage design-viewer-single-page-navigation.html
+    \page qt-ui-viewer.html
+    \nextpage studio-exporting-and-importing.html
+
+    \title Viewing Applications on Android
+
+    View \QDS projects that you have shared online in \QUV.
+    Bring all the projects from a \QDS ID to \QUV, or establish a direct
+    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.
+
+    \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
+
+    \section1 Connecting a \QDS ID with \QUV
+
+    Connect your \QDS ID to \QUV to access all your shared \QDS projects in \QUV.
+
+    To do that:
+    \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
+      \QDS ID, first, get your Android device's \e {Local IP} from \QUV.
+      Then, use the \e {Local IP} in \QDS.
+
+      To get the \e {Local IP} from \QUV:
+      \list 1
+        \li Go to \uicontrol Menu > \uicontrol Network.
+        \li Note the \e {Local IP} of your Android device.
+          \image qtuiviewer-network.webp
+      \endlist
+
+      To establish a direct connection between \QUV and \QDS:
+      \list 1
+        \li Open \QDS on your computer.
+        \li Open the project you want to connect directly.
+        \li Go to \uicontrol File > \uicontrol {Deploy Project to Android}.
+        \li Enter the \e {Local IP} you got from \QUV into \uicontrol {Device IP}.
+        \li Select \uicontrol Connect.
+          \image studio-deploy-project-to-android.webp
+
+        \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

@@ -134,11 +134,11 @@
                     \list
                         \li \l{Previewing on Desktop}
                         \li \l{Previewing on Devices}
-                        \li \l{Previewing Android Applications}
                         \li \l{Sharing Applications Online}
                           \list
                             \li \l{Creating a Single Page Navigation Web Application}
                           \endlist
+                        \li \l {Viewing Applications on Android}
                     \endlist
                 \li \l {Asset Creation with Other Tools}
                     \list