diff --git a/doc/qtdesignstudio/config/style/qt5-sidebar.html b/doc/qtdesignstudio/config/style/qt5-sidebar.html index c568fd15408..c6f664c4069 100644 --- a/doc/qtdesignstudio/config/style/qt5-sidebar.html +++ b/doc/qtdesignstudio/config/style/qt5-sidebar.html @@ -204,6 +204,7 @@
  • Projects
    • diff --git a/doc/qtdesignstudio/images/menu-share-application-online.webp b/doc/qtdesignstudio/images/menu-share-application-online.webp deleted file mode 100644 index 9cd5c3789e1..00000000000 Binary files a/doc/qtdesignstudio/images/menu-share-application-online.webp and /dev/null differ diff --git a/doc/qtdesignstudio/images/qtuiviewer-appstore.webp b/doc/qtdesignstudio/images/qtuiviewer-appstore.webp index fc9ca430a55..ccdfbeb1052 100644 Binary files a/doc/qtdesignstudio/images/qtuiviewer-appstore.webp and b/doc/qtdesignstudio/images/qtuiviewer-appstore.webp differ diff --git a/doc/qtdesignstudio/images/qtuiviewer-examples.webp b/doc/qtdesignstudio/images/qtuiviewer-examples.webp deleted file mode 100644 index a9196e0da1c..00000000000 Binary files a/doc/qtdesignstudio/images/qtuiviewer-examples.webp and /dev/null differ diff --git a/doc/qtdesignstudio/images/qtuiviewer-live-project.webp b/doc/qtdesignstudio/images/qtuiviewer-live-project.webp deleted file mode 100644 index f92c60fd701..00000000000 Binary files a/doc/qtdesignstudio/images/qtuiviewer-live-project.webp and /dev/null differ diff --git a/doc/qtdesignstudio/images/qtuiviewer-network.webp b/doc/qtdesignstudio/images/qtuiviewer-network.webp deleted file mode 100644 index 7017a4a154b..00000000000 Binary files a/doc/qtdesignstudio/images/qtuiviewer-network.webp and /dev/null differ diff --git a/doc/qtdesignstudio/images/qtuiviewer-scan-qr-code.webp b/doc/qtdesignstudio/images/qtuiviewer-scan-qr-code.webp deleted file mode 100644 index 77f01f7aefe..00000000000 Binary files a/doc/qtdesignstudio/images/qtuiviewer-scan-qr-code.webp and /dev/null differ diff --git a/doc/qtdesignstudio/images/qtuiviewer-settings.webp b/doc/qtdesignstudio/images/qtuiviewer-settings.webp index ab90f178019..23e37eeea61 100644 Binary files a/doc/qtdesignstudio/images/qtuiviewer-settings.webp and b/doc/qtdesignstudio/images/qtuiviewer-settings.webp differ diff --git a/doc/qtdesignstudio/images/studio-deploy-project-to-android.webp b/doc/qtdesignstudio/images/studio-deploy-project-to-android.webp deleted file mode 100644 index acfe53693a5..00000000000 Binary files a/doc/qtdesignstudio/images/studio-deploy-project-to-android.webp and /dev/null differ diff --git a/doc/qtdesignstudio/images/studio-devicemanager-add-device.webp b/doc/qtdesignstudio/images/studio-devicemanager-add-device.webp new file mode 100644 index 00000000000..f05a572ce30 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-devicemanager-add-device.webp differ diff --git a/doc/qtdesignstudio/images/studio-devicemanager-remove-device.webp b/doc/qtdesignstudio/images/studio-devicemanager-remove-device.webp new file mode 100644 index 00000000000..ac3e6fed816 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-devicemanager-remove-device.webp differ diff --git a/doc/qtdesignstudio/images/studio-live-preview.webp b/doc/qtdesignstudio/images/studio-live-preview.webp index 0dff1a411b8..86e9c53e865 100644 Binary files a/doc/qtdesignstudio/images/studio-live-preview.webp and b/doc/qtdesignstudio/images/studio-live-preview.webp differ diff --git a/doc/qtdesignstudio/images/studio-run-dropdown-with-added-device.webp b/doc/qtdesignstudio/images/studio-run-dropdown-with-added-device.webp new file mode 100644 index 00000000000..e4b705619bc Binary files /dev/null and b/doc/qtdesignstudio/images/studio-run-dropdown-with-added-device.webp differ diff --git a/doc/qtdesignstudio/images/studio-run-dropdown.webp b/doc/qtdesignstudio/images/studio-run-dropdown.webp new file mode 100644 index 00000000000..b9e97db8332 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-run-dropdown.webp differ diff --git a/doc/qtdesignstudio/images/studio-run-project.webp b/doc/qtdesignstudio/images/studio-run-project.webp new file mode 100644 index 00000000000..befaf34188a Binary files /dev/null and b/doc/qtdesignstudio/images/studio-run-project.webp differ diff --git a/doc/qtdesignstudio/images/studio-share-application-online.webp b/doc/qtdesignstudio/images/studio-share-application-online.webp deleted file mode 100644 index c65dc9c931c..00000000000 Binary files a/doc/qtdesignstudio/images/studio-share-application-online.webp and /dev/null differ diff --git a/doc/qtdesignstudio/src/how-to/qtdesignstudio-live-preview-desktop.qdoc b/doc/qtdesignstudio/src/how-to/qtdesignstudio-live-preview-desktop.qdoc index aa20427bc9e..809377d7527 100644 --- a/doc/qtdesignstudio/src/how-to/qtdesignstudio-live-preview-desktop.qdoc +++ b/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 - \li Select the \uicontrol {Live Preview} button on the top toolbar. - \li Select \key {Alt+P}. - \image studio-live-preview.webp + \list 1 + \li Select \uicontrol Run dropdown from the top toolbar and select + \uicontrol {Live Preview}. + \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 - \li Select the \uicontrol {Live Preview} button on the top toolbar. + \list 1 + \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 diff --git a/doc/qtdesignstudio/src/how-to/qtdesignstudio-run-project.qdoc b/doc/qtdesignstudio/src/how-to/qtdesignstudio-run-project.qdoc new file mode 100644 index 00000000000..3ce54852e74 --- /dev/null +++ b/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 + + + +*/ diff --git a/doc/qtdesignstudio/src/overviews/qtquick-live-preview.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-live-preview.qdoc index eabfe99bc6b..5ebd389f9f7 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-live-preview.qdoc +++ b/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 */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-qt-ui-viewer.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-qt-ui-viewer.qdoc index cc345cc5b60..ae3ef6c0342 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-qt-ui-viewer.qdoc +++ b/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. - 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. - - \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. + Run and preview your \QDS projects in \QUV with a + direct network connection in real-time. \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: - \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 + \image qtuiviewer-appstore.webp Qt UI Viewer in the Google Play Store \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. + \note Use the same network to connect both \QDS and your + Android device where you have installed \QUV. + \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 Note the \e {Local IP} of your Android device. - \image qtuiviewer-network.webp + \li Open or create a project in \QDS. + \li Open \QUV on your Android device. + \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 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. + \li Open or create a project in \QDS. + \li Select \uicontrol Run dropdown from the top toolbar and select + \uicontrol {Device Manager}. + \li Select the device you want to remove from the list of devices and + select \imageminus. + \image studio-devicemanager-remove-device.webp Remove a device from the Device Manager \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. - */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 348a7161d17..2170bce3327 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/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}