Doc: Update more info about Library

Task-number: QDS-4007
Change-Id: Iede5ff19c55ea99453ad67b7f1782032779a77af
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Johanna Vanhatapio
2021-04-14 17:31:17 +03:00
parent 6978020156
commit f89b1ff497
26 changed files with 231 additions and 164 deletions
@@ -75,15 +75,16 @@
to replace transition lines with connections to real signals
from UI controls, as described in \l{Simulating Events}.
\li To set up alternative pathways between flow items, use
\uicontrol {Flow Decision} components from \l Library, as
described in \l{Simulating Conditions}.
\uicontrol {Flow Decision} components from \l Library >
\uicontrol Components > \uicontrol {Flow View}, as described in
\l{Simulating Conditions}.
\li Use \l{Adding States}{states} in flows to modify the appearance
of components on screens in response to user interaction, as
described in \l{Applying States in Flows}.
\li Use \uicontrol {Flow Wildcard} components from \uicontrol Library
to prioritize events from other applications and to stop some
screens from appearing on others, as described in
\l{Reacting to External Events}.
\li Use \uicontrol {Flow Wildcard} components from \uicontrol Library >
\uicontrol Components > \uicontrol {Flow View} to prioritize events
from other applications and to stop some screens from appearing on
others, as described in \l{Reacting to External Events}.
\endlist
*/
@@ -188,10 +189,10 @@
\image studio-flow-item.png "Custom Flow Item in Library"
\note You must use the wizard to create the flow items. After you create
a flow view, the \uicontrol {Flow View} section becomes visible in
\uicontrol Library. It contains a \uicontrol {Flow Item} component that
you can use to \l{Applying States in Flows}{apply states to flow items},
and that you should use solely for that purpose.
a flow view, the \uicontrol {Flow View} module is added to \uicontrol Library
> \uicontrol Components. It contains a \uicontrol {Flow Item} component that
you can use to \l{Applying States in Flows}{apply states to flow items}, and
that you should use solely for that purpose.
To add flow items:
@@ -202,16 +203,16 @@
to create flow items for each screen in the UI.
\li Add content to the flow item in one of the following ways:
\list
\li Drag and drop components from \l Library to a flow
\li Drag-and-drop components from \uicontrol Library to a flow
item in \l {Form Editor} or \l Navigator.
\li Drag a screen from \uicontrol Library >
\li Drag a screen from \uicontrol Library > \uicontrol Components
\uicontrol {My Components} to a flow item in
\uicontrol {Form Editor} or \uicontrol Navigator.
\endlist
\li In \l Properties, edit the properties of each flow item.
\endlist
You can now drag the flow items from \uicontrol Library >
You can now drag the flow items from \uicontrol Library > \uicontrol Components
\uicontrol {My Components} to the flow view in \uicontrol {Form Editor}
or \uicontrol Navigator. When you have all the flow items in place, you can
\l{Adding Action Areas and Transitions}{add action areas} to them to create
@@ -354,7 +355,7 @@
\endlist
You can specify the following properties to change the appearance of
transition lines in \l{Form Editor}:
transition lines in \uicontrol {Form Editor}:
\image studio-flow-transition-line-properties.png "Flow Transition Line properties"
@@ -543,9 +544,9 @@
To simulate conditions:
\list 1
\li Drag a \uicontrol {Flow Decision} component from \l Library
to a \l{Adding Flow Views}{flow view} in \l Navigator or
\l {Form Editor}.
\li Drag a \uicontrol {Flow Decision} component from \l Library >
\uicontrol Components \uicontrol {Flow View} to a
\l{Adding Flow Views}{flow view} in \l Navigator or \l {Form Editor}.
\li Select the flow item where you want the application to start in
\uicontrol Navigator or \uicontrol {Form Editor}, and then select
\uicontrol {Flow} > \uicontrol {Set Flow Start} in the context menu.
@@ -612,7 +613,8 @@
You can use \l{Adding States}{states} in flows to modify the appearance
of \l{glossary-component}{components} in flow items in response to user
interaction, for example. For this purpose, you use the
\uicontrol {Flow Item} components available in \l Library.
\uicontrol {Flow Item} components available in \l Library >
\uicontrol Components > \uicontrol {Flow View}.
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
@@ -660,9 +662,10 @@
To use wildcards:
\list 1
\li Drag a \uicontrol {Flow Wildcard} component from \l Library
to an \l{Adding Action Areas and Transitions}{action area} in
\l Navigator or \l {Form Editor}.
\li Drag a \uicontrol {Flow Wildcard} component from \l Library >
\uicontrol Components > \uicontrol {Flow View} to an
\l{Adding Action Areas and Transitions}{action area} in \l Navigator
or \l {Form Editor}.
\li In \l Properties, select flow items to add them to the
positive and negative list of the action area.
\endlist
@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Bridge documentation.
@@ -33,10 +33,11 @@
\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 the \uicontrol {Form Editor}. If you
make changes to your design in the design tool, 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}.
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.
@@ -53,8 +54,8 @@
create an empty project.
\li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to
the Design mode.
\li Select \uicontrol Library > \uicontrol Assets >
\uicontrol {Add New Assets}.
\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.
@@ -85,12 +86,12 @@
might take a little while for complex projects.
\endlist
The imported assets are displayed in the \uicontrol Assets tab in the
\uicontrol Library as PNG images. The components that you specified in
the design tool are displayed in the \uicontrol {My QML Components} tab,
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 \uicontrol Navigator.
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 \uicontrol 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
@@ -98,7 +99,8 @@
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 {QML Imports} > \uicontrol {Add Imports}.
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
@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt 3D Studio.
@@ -161,7 +161,8 @@
\section2 Importing Assets
\list 1
\li In the \uicontrol Library view, select \uicontrol {Add New Assets}.
\li Select \uicontrol Library > \uicontrol Assets > \inlineimage plus.png
.
\image exporting-from-qt3ds/09-add-new-assets.png
\li Select the \c .uia file for the \Q3DS project you wish to import, and
@@ -173,7 +174,7 @@
\image exporting-from-qt3ds/11-import.png "Import the file"
\li The 2D assets imported from \Q3DS now appear in \uicontrol Library
under \uicontrol Assets tab.
> \uicontrol Assets.
\image exporting-from-qt3ds/12-imported-image-assets.png "Imported assets in Library"
\li The QML components generated from the imported \Q3DS project now appear
@@ -216,8 +217,8 @@
\section2 Converting 3D Elements
\list 1
\li Drag subpresentation_ADAS from \uicontrol {My QML Components} in \uicontrol
Library into layer folder in \uicontrol Navigator.
\li Drag subpresentation_ADAS from \uicontrol Library > \uicontrol Components
> {My 3D Components} into layer folder in \uicontrol Navigator.
\image exporting-from-qt3ds/20-drag-subpresentation-adas-into-layer.png "Drag into layer"
\li To delete the old subpresentation rectangle, right-click on the file
@@ -289,10 +290,10 @@
\image exporting-from-qt3ds/32-rename-the-qml-stream-file.png "The QML stream file names should start with a capital letter"
\li Return to \QDS and enter the MyOwnCluster component. The QML stream
component now appears in \uicontrol {My QML Components}.
component now appears in \uicontrol {My 3D Components}.
\image exporting-from-qt3ds/33-see-qml-stream-component-in-myqmlcomponents.png "QML stream in My QML Components"
\li Drag and drop the QML stream component to MyOwnCluster in \uicontrol
\li Drag-and-drop the QML stream component to MyOwnCluster in \uicontrol
Navigator.
\image exporting-from-qt3ds/34-drag-to-myowncluster-in-navigator.png "Drag the QML stream component to MyOwnCluster"
@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Bridge documentation.
@@ -56,8 +56,9 @@
To import 3D assets to \QDS projects:
\list 1
\li In the Design mode, select \uicontrol Library > \uicontrol Assets
> \uicontrol {Add New Assets}.
\li In the \l{Design Views}{Design mode}, select \l Library >
\uicontrol Assets > \inlineimage plus.png
.
\li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D
graphics files.
\li Select a file to import, and then select \uicontrol Open.
@@ -67,6 +68,7 @@
\li When the import is done, select \uicontrol Close.
\endlist
You can open the imported files in the Design mode for editing in the
\l{Editing 3D Scenes}{3D Editor}.
The 3D asset you added to the project now appears in \uicontrol Library >
\uicontrol Components > \uicontrol {My 3D Components}. You can add it to
your UI by dragging-and-dropping it to \l {3D Editor}.
*/
@@ -34,9 +34,15 @@
Light components are the primary source of lighting in a \QDS scene.
As a secondary light source, you can use \l{Using Image-based Lighting}
{image-based lighting}. If the light components are not displayed in
\l Library, you should add the \uicontrol QtQuick3D module to your project,
as described in \l {Adding and Removing Modules}.
{image-based lighting}.
To add light components to your UI, drag-and-drop them from \l Library
> \uicontrol Components > \uicontrol {Qt Quick 3D} to \l {3D Editor} or to
\l Navigator > \uicontrol Scene Environment > \uicontrol Scene.
If you cannot find the light components in \uicontrol Library, add the
\uicontrol {Qt Quick 3D} module to your project as instructed in
\l {Adding and Removing Modules}.
By default, all imported scenes are created with one directional light.
You can use the following components to add lights:
@@ -35,11 +35,11 @@
to transform and set the opacity and visibility of multiple 3D components in
the \l Properties view simultaneously. To add a \uicontrol Group component
to your scene, drag-and-drop it from \l Library > \uicontrol Components >
\uicontrol {QtQuick3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor} view
or to a \uicontrol Scene component in \l Navigator. If the \uicontrol Group
component is not displayed in\uicontrol Library, you should add the
\uicontrol QtQuick3D module to your project, as described in
\l {Adding and Removing Modules}.
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor}
view or to \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene.
If the \uicontrol Group component is not displayed in \uicontrol Library,
you should add the \uicontrol {Qt Quick 3D} module to your project, as
described in \l {Adding and Removing Modules}.
Select the \uicontrol Group component in \uicontrol Navigator to modify its
properties in the \l Properties view.
@@ -113,21 +113,22 @@
\section1 Applying Textures to Materials
Drag-and-drop an image from \l Library > \uicontrol Assets on a material to
Drag-and-drop an image from \l Library > \l Assets on a material to
create a texture component. Dragging an image to a default or principled
material opens a \uicontrol {Select Texture Property} dialog. You can select
the property to attach the texture to in the \uicontrol {Set texture to property}
field. For a custom material, you must assign the texture to a map. If the
\uicontrol Texture component is not displayed in \uicontrol Library, you
should add the \uicontrol QtQuick3D module to your project, as described in
\l {Adding and Removing Modules}.
should add the \uicontrol {Qt Quick 3D} module to your project, as described
in \l {Adding and Removing Modules}.
To use Texture components to apply textures to materials, drag-and-drop a
Texture component from \l Library to a material component in \l Navigator.
The new texture should now be visible in \l {Form Editor} and \l {3D Editor}.
\note If the colors in your texture are not visualized correctly, you should
check the color in the \uicontrol Diffuse property of the material and try
changing it to white (#ffffff).
Texture component from \uicontrol Library > \uicontrol Components >
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to a material component
in \l Navigator. The new texture should now be visible in \l {Form Editor}
and \l {3D Editor}. \note If the colors in your texture are not visualized
correctly, you should check the color in the \uicontrol Diffuse property of
the material and try changing it to white (#ffffff).
\image studio-qtquick-3d-material-texture.png "Material properties"
@@ -32,16 +32,16 @@
To create a Qt Quick 3D UI project, we recommend using a \uicontrol
{Qt Quick 3D Application Template} wizard template that adds the
\l {Using 3D Components}{Qt Quick 3D} components to \l Library and contains
a 3D view. A 3D view component includes a \l {Setting Scene Environment}
{scene environment} as well as a scene \l {Using Lights}{light},
\l {Using Scene Camera}{camera}, and \l {Adding 3D Models}{model}. A default
\l {Using Materials and Shaders}{material} is attached to the model. You can
attach \l {Attaching Textures to Materials}{textures} to materials. For more
information about creating projects, see \l{Creating Projects}.
\l {Using 3D Components}{Qt Quick 3D} components to \l Library >
\uicontrol Components and contains a 3D view. A 3D view component includes a
\l {Setting Scene Environment}{scene environment} as well as a scene
\l {Using Lights}{light}, \l {Using Scene Camera}{camera}, and
\l {Adding 3D Models}{model}. A default \l {Using Materials and Shaders}{material}
is attached to the model. You can attach \l {Attaching Textures to Materials}{textures}
to materials. For more information about creating projects, see \l{Creating Projects}.
To add a 3D view to some other kind of a project, you should first add the
\uicontrol QtQuick3D module to \uicontrol Library, as described in
To add a 3D view to some other kind of a project, you first need to add the
\uicontrol {Qt Quick 3D} module to \uicontrol Library, as described in
\l {Adding and Removing Modules}.
\image studio-qtquick-3d-components.png "Qt Quick 3D components in Library"