/**************************************************************************** ** ** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Bridge documentation. ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see https://www.qt.io/terms-conditions. For further ** information use the contact form at https://www.qt.io/contact-us. ** ** GNU Free Documentation License Usage ** Alternatively, this file may be used under the terms of the GNU Free ** Documentation License version 1.3 as published by the Free Software ** Foundation and appearing in the file included in the packaging of ** this file. Please review the following information to ensure ** the GNU Free Documentation License version 1.3 requirements ** will be met: https://www.gnu.org/licenses/fdl-1.3.html. ** ****************************************************************************/ /*! \previouspage studio-importing-designs.html \page studio-importing-2d.html \nextpage qtquick-fonts.html \title Importing 2D Assets You can import 2D assets, such as images, fonts, and sound files, to \QDS to use them in your projects. To import an asset, drag-and-drop the external file containing the asset from, for example, File Explorer on Windows, to \uicontrol {Form Editor}, \uicontrol Navigator, or \uicontrol {Text Editor}. Alternatively, select \l Library > \uicontrol Assets > \inlineimage plus.png and follow the instructions in the \uicontrol {Asset Import} dialog. You can also multiselect several external asset files to drag-and-drop them to \QDS simultaneously. The imported images will appear in \uicontrol Library > \uicontrol Assets. If you initiate the import by dragging the assets to \uicontrol {Form Editor}, they are also added to your projects as image components, and you can view them in \uicontrol {Form Editor} and \uicontrol Navigator. If you drag an external font file to \uicontrol {Form Editor}, it will be added to your project as a text component. Other imported assets, such as sound files, will only appear in \uicontrol Library > \uicontrol Assets, and you can then drag-and-drop them to a suitable view. \section1 Importing Designs From Other Design Tools \image studio-imported-assets.png "UI imported into Qt Design Studio" \QB enables you to export assets and then import them to a \QDS project as image and QML files for editing in \l {Form Editor}. If you make changes to your design in the design tool that you originally used to create it, you can merge the changes into existing QML files without overwriting the changes you have made in \QDS. For more information, see \l {Exporting from Design Tools}. \note Attempting to import assets exported on another system might fail. The following instructions use an empty project as an example. For more information about the options you have, see \l {Creating Projects}. To import assets exported in \QB to \QDS projects: \list 1 \li Select \uicontrol File > \uicontrol {New File or Project} > \uicontrol General > \uicontrol {Qt Quick Application - Empty} > \uicontrol Choose, and follow the instructions of the wizard to create an empty project. \li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to the Design mode. \li Select \l Library > \uicontrol Assets > \inlineimage plus.png . \li Select the folder where you exported the assets. \li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown menu to filter \e .metadata files. \li Select a \e .metadata file to import, and then select \uicontrol Open. \li Select \uicontrol Details next to the \uicontrol {Metadata Import Paths} field to display the path where the metadata is imported from. \image studio-import-metadata.png "Asset Import dialog" \li Select \uicontrol Details next to the \uicontrol {QML/Asset Export Paths} field to display the paths to copy the assets to. \li In the \uicontrol QML field, you can change the folder to copy the QML files to. \li In the \uicontrol Assets field, you can change the folder to copy the image files to. \li Select the \uicontrol {Create sub directory for each metadata} check box to copy the directory structure from the metadata file to \QDS. \li Deselect the \uicontrol {Import assets} check box if you only want to create QML files. \li Deselect the \uicontrol {Generate QML} check box if you only want to import assets. \li Select the \uicontrol {Merge QML} check box if you have imported the assets before and want to merge the changes into existing QML files instead of overwriting the existing files. \li Select \uicontrol Import to import the QML files and assets. This might take a little while for complex projects. \endlist The imported assets are displayed in \uicontrol Library > \uicontrol Assets as PNG images. The components that you specified in the design tool are displayed in \uicontrol Library > \uicontrol Components > \uicontrol {My Components} as well as in the \uicontrol Projects view as separate QML files. To start using them, drag-and-drop them from \uicontrol Library to \uicontrol {Form Editor} or \l Navigator. \note The layer that was the bottom layer in the design tool becames the top layer in \uicontrol Navigator to reflect the QML code model. You can view the QML code in \l{Text Editor}. After importing the metadata files, wait a few moments to allow all imported assets to appear in your project files before selecting your metadata filename from \uicontrol Assets > \inlineimage plus.png . If asset importer conflicts, warnings, and errors are displayed in the \uicontrol {Asset Import} dialog while importing, fix the issues in design tool and export the assets again. \include qtbridge-tutorial-links.qdocinc qtsketchbridge tutorials */