Doc: Update docs related to Library, Assets, and Components view
The Library view has been removed and replaced by the Assets and Components view. Task-number: QDS-6216 Change-Id: Iad2454196898ca0d6631a6bd6261c02d1bad98ac Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
@@ -158,10 +158,9 @@
|
||||
\l{https://fonts.google.com/specimen/Titillium+Web#standard-styles}
|
||||
{Titillium Web ExtraLight font} or use Arial as a substitute.
|
||||
|
||||
To add the assets to \l Library:
|
||||
To add the assets:
|
||||
\list 1
|
||||
\li Select \uicontrol Library > \uicontrol Assets
|
||||
> \inlineimage icons/plus.png
|
||||
\li Select \uicontrol Assets > \inlineimage icons/plus.png
|
||||
.
|
||||
\li Select the asset files, and then select \uicontrol Open.
|
||||
\li Select the location where the files will be saved in the
|
||||
@@ -181,8 +180,8 @@
|
||||
To modify the \e Screen01 component in \uicontrol {Form Editor}:
|
||||
|
||||
\list 1
|
||||
\li Drag-and-drop the background image from \uicontrol Library >
|
||||
\uicontrol Assets to the rectangle in \l Navigator.
|
||||
\li Drag-and-drop the background image from \uicontrol Assets to the
|
||||
rectangle in \l Navigator.
|
||||
\image loginui1-library-assets.jpg "Library view Assets tab"
|
||||
\li \QDS automatically creates an instance of the \l{Images}{Image}
|
||||
component for you with the path to the image file set as the
|
||||
@@ -237,11 +236,10 @@
|
||||
|
||||
You can view the import statements in the \uicontrol {Text Editor} view.
|
||||
|
||||
The \l Library view lists the components in each module that are
|
||||
The \l Components view lists the components in each module that are
|
||||
supported by \QDS. You can use the basic components to create your own
|
||||
components, and they will be listed in \uicontrol Components >
|
||||
\uicontrol {My Components}. This section is only visible if you have created
|
||||
custom components.
|
||||
components, and they will be listed in \uicontrol {My Components}.
|
||||
This section is only visible if you have created custom components.
|
||||
|
||||
The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image}
|
||||
components used in this tutorial are based on the \l Item component.
|
||||
@@ -264,7 +262,7 @@
|
||||
If you want to specify the radius of each corner separately, you can use the
|
||||
\l{studio-rectangle}{Rectangle} component from the
|
||||
\uicontrol {Qt Quick Studio Components} module instead of the basic rectangle
|
||||
component. It is available in \uicontrol Library > \uicontrol Components
|
||||
component. It is available in \uicontrol Components
|
||||
> \uicontrol {Qt Quick Studio Components}.
|
||||
|
||||
\section3 Text Properties
|
||||
@@ -281,25 +279,25 @@
|
||||
|
||||
The \l {Images}{Image} component is used for adding images to the UI in several
|
||||
supported formats, including bitmap formats such as PNG and JPEG and vector
|
||||
graphics formats such as SVG. To add an image to \uicontrol Library, select
|
||||
\uicontrol Assets > \inlineimage icons/plus.png
|
||||
graphics formats such as SVG. To add an image to \uicontrol Assets, select
|
||||
\inlineimage icons/plus.png
|
||||
, and then select the image file.
|
||||
|
||||
If you need to display animated images, use the \l {Animated Image}
|
||||
component, also available in \uicontrol Library > \uicontrol Components >
|
||||
component, also available in \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Basic.
|
||||
|
||||
\section1 Creating a Push Button
|
||||
|
||||
You can use another wizard template to create a push button and to add it to
|
||||
the project. The wizard template creates a reusable button component that
|
||||
appears in \uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {My Components}. You can drag-and-drop it to \l Navigator
|
||||
to create button instances and modify their properties in the
|
||||
\uicontrol Properties view to change their appearance and functionality.
|
||||
appears in \uicontrol Components > \uicontrol {My Components}.
|
||||
You can drag-and-drop it to \l Navigator to create button instances and
|
||||
modify their properties in the \uicontrol Properties view to change their
|
||||
appearance and functionality.
|
||||
|
||||
If you cannot use the wizard template nor the preset
|
||||
button controls available in \uicontrol Library > \uicontrol Components >
|
||||
button controls available in \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} to create the kind of push button that you
|
||||
want, you can create your button from scratch using default components. For
|
||||
more information, see \l {Creating Buttons} and
|
||||
@@ -409,8 +407,8 @@
|
||||
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
|
||||
to open it in \uicontrol {Form Editor}.
|
||||
\li Drag-and-drop two instances of the EntryField component from
|
||||
\uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {My Components} to the rectangle in \uicontrol Navigator.
|
||||
\uicontrol Components > \uicontrol {My Components} to the rectangle
|
||||
in \uicontrol Navigator.
|
||||
\image loginui1-library.jpg "My Components tab of Library view"
|
||||
\li Select the first EntryField instance in \uicontrol Navigator
|
||||
to modify its ID and text in \uicontrol Properties.
|
||||
@@ -482,8 +480,8 @@
|
||||
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
|
||||
to open it in \uicontrol {Form Editor}.
|
||||
\li Drag-and-drop two instances of the PushButton component from
|
||||
\uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {My Components} to the rectangle in \uicontrol Navigator.
|
||||
\uicontrol Components > \uicontrol {My Components} to the rectangle
|
||||
in \uicontrol Navigator.
|
||||
\li Drag the button instances to the bottom of the background image in
|
||||
\uicontrol {Form Editor}. Use the guidelines to align the button
|
||||
instances horizontally with the entry fields.
|
||||
|
@@ -74,8 +74,8 @@
|
||||
\li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
|
||||
in \uicontrol {Form Editor}.
|
||||
\li Drag-and-drop an instance of the EntryField component from
|
||||
\uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {My Components} to \e fields in \l Navigator.
|
||||
\uicontrol Components > \uicontrol {My Components} to \e fields in
|
||||
\l Navigator.
|
||||
\li Select the EntryField instance in \uicontrol Navigator to modify
|
||||
its ID and text in \uicontrol Properties.
|
||||
\li In \uicontrol Component > \uicontrol ID, enter
|
||||
|
@@ -43,18 +43,18 @@
|
||||
\l{basic-rectangle}{Rectangle} component and an instance of the preset
|
||||
\l{Text} component to create the progress bar. There is also a preset
|
||||
\l {progress-bar-control}{Progress Bar} component available in
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick Controls}.
|
||||
\uicontrol Components > \uicontrol {Qt Quick Controls}.
|
||||
|
||||
In the \uicontrol Design mode, we drag-and-drop a \uicontrol Rectangle from
|
||||
\l Library > \uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Basic to \l {Form Editor} and modify its size to create the
|
||||
background for the progress bar. We change its ID to \e pb_back in
|
||||
\l Properties.
|
||||
|
||||
We want to be able to control the background rectangle and the text label
|
||||
that was added by the project wizard, so we will use an \uicontrol Item
|
||||
component for that. We drag-and-drop the Item from \uicontrol Library >
|
||||
\uicontrol Components > \uicontrol {Default Components} > \uicontrol Basic
|
||||
component for that. We drag-and-drop the Item from \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Basic
|
||||
to \uicontrol {Form Editor} and change its ID to \e root in
|
||||
\uicontrol Properties.
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
change for the animation.
|
||||
|
||||
For more information about creating and positioning components, see
|
||||
\l {Components} and \l {Scalable Layouts}.
|
||||
\l {Using Components} and \l {Scalable Layouts}.
|
||||
|
||||
\section1 Animating Progress Bar Elements
|
||||
|
||||
|
@@ -53,11 +53,10 @@
|
||||
module to your project:
|
||||
|
||||
\list 1
|
||||
\li In the \uicontrol Library view, select
|
||||
\inlineimage icons/plus.png
|
||||
next to \uicontrol Components.
|
||||
\li In the \uicontrol Component view, select \inlineimage icons/plus.png
|
||||
.
|
||||
\li Find QtQuick3D.Particles3D and select it to add it to your project.
|
||||
\li From \uicontrol Library > \uicontrol Components, drag a
|
||||
\li From \uicontrol Components, drag a
|
||||
\uicontrol{Particle System} to \uicontrol scene in \uicontrol Navigator.
|
||||
\endlist
|
||||
|
||||
@@ -74,7 +73,7 @@
|
||||
In \uicontrol Navigator, select \e particleSystem and in
|
||||
\uicontrol Properties, set \uicontrol Translation > \uicontrol Y to 193.
|
||||
\li Set the \e rain-drop-white-square.png as texture for the particles.
|
||||
From \uicontrol Library > \uicontrol Assets, drag
|
||||
From \uicontrol Assets, drag
|
||||
\e {rain-drop-white-square.png} to \e spriteParticle.
|
||||
\li Adjust the apperance and behavior of the sprite further. In \uicontrol
|
||||
Properties, set:
|
||||
|
@@ -103,7 +103,7 @@
|
||||
|
||||
We construct the menu bar in the \e {MainFile.ui.qml} file using the
|
||||
\l {Form Editor}. The CustomButton component is listed in
|
||||
\l Library > \uicontrol Components > \uicontrol {My Components}.
|
||||
\uicontrol Components > \uicontrol {My Components}.
|
||||
We drag-and-drop several instances of the component to \uicontrol Navigator
|
||||
or \uicontrol {Form Editor} and enclose them in a \uicontrol {Row Layout}
|
||||
component instance to lay them out as a menu bar.
|
||||
@@ -127,7 +127,7 @@
|
||||
|
||||
We can now continue to create a side menu that slides open when users
|
||||
click the burger menu. We drag-and-drop a \l Text component from
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {Default Components}
|
||||
\uicontrol Components > \uicontrol {Default Components}
|
||||
> \uicontrol Basic and a \l {slider-control}{Slider} component from
|
||||
\uicontrol {Qt Quick Controls} to \uicontrol Navigator to create separate
|
||||
submenus for each set of effects we want to apply to the images. We use
|
||||
@@ -232,9 +232,8 @@
|
||||
\uicontrol Properties > \uicontrol Slider.
|
||||
|
||||
We open the \e {EffectStack.qml} file, and drag-and-drop components from
|
||||
\uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {Qt Quick Studio Effects} to \uicontrol Navigator to create the
|
||||
effect stack.
|
||||
\uicontrol Components > \uicontrol {Qt Quick Studio Effects} to
|
||||
\uicontrol Navigator to create the effect stack.
|
||||
|
||||
\image sidemenu-effects-stack.png "Effects stack in the Navigator"
|
||||
|
||||
|
@@ -68,7 +68,7 @@
|
||||
project.
|
||||
|
||||
This way, only the components and properties supported on MCUs are visible
|
||||
in \l Library and \l Properties, and we won't accidentally
|
||||
in \l Components and \l Properties, and we won't accidentally
|
||||
add unsupported components to our UI or specify unsupported properties for
|
||||
supported components. For more information, see \l{Creating Projects}.
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
by selecting \uicontrol File > \uicontrol {New File} >
|
||||
\uicontrol {Qt Quick Files}. While designing the screens, you can
|
||||
move reusable components into separate files. For more information,
|
||||
see \l{Components}.
|
||||
see \l{Using Components}.
|
||||
|
||||
\section1 Creating a Progress Indicator
|
||||
|
||||
@@ -177,7 +177,7 @@
|
||||
In our UI, we use connections and states to move between screens. First,
|
||||
we specify the application workflow in \e ApplicationFlow.qml. When the
|
||||
file is open in \uicontrol {Form Editor}, we drag-and-drop the components
|
||||
that define the screens in the application from \uicontrol Library to
|
||||
that define the screens in the application from \uicontrol Components to
|
||||
\uicontrol Navigator or \uicontrol {Form Editor}: \e StartScreen,
|
||||
\e SettingsScreen, \e PresetsScreen, and \e RunningScreen.
|
||||
|
||||
|
@@ -169,7 +169,7 @@
|
||||
The \e {LayoutReference.ui.qml} file contains a reference image of
|
||||
the UI we will create. We use the imported components to create the
|
||||
UI in the \e {MainApp.ui.qml} file. The imported components are
|
||||
listed in \l Library > \uicontrol Components > \uicontrol {My Components},
|
||||
listed in \uicontrol Components > \uicontrol {My Components},
|
||||
and we can drag-and-drop them to \l {Form Editor}.
|
||||
|
||||
\image webinardemo-mainappui.png "Main app UI in Design mode"
|
||||
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 25 KiB |
BIN
doc/qtdesignstudio/images/qtquick-components-context-menu.png
Normal file
After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 11 KiB |
@@ -38,7 +38,7 @@
|
||||
that is to be animated, and apply the animation depending on the type of
|
||||
behavior that is required.
|
||||
|
||||
You can drag-and-drop animation components from \l Library >
|
||||
You can drag-and-drop animation components from
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Animation to \l Navigator or \l {Form Editor} to
|
||||
create instances of them.
|
||||
@@ -206,9 +206,9 @@
|
||||
\section1 Summary of Animation Components
|
||||
|
||||
The following table lists the components that you can use to animate
|
||||
component properties programmatically. They are available in \l Library
|
||||
> \uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Animation
|
||||
component properties programmatically. They are available in
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol {Animation}.
|
||||
|
||||
\table
|
||||
\header
|
||||
|
@@ -49,7 +49,7 @@
|
||||
\uicontrol Choose to create a \l{UI Files}{UI file} called
|
||||
Button.ui.qml (for example).
|
||||
|
||||
\note Components are listed in \l Library > \uicontrol Components >
|
||||
\note Components are listed in \uicontrol Components >
|
||||
\uicontrol {My Components} only if the filename begins with a
|
||||
capital letter.
|
||||
|
||||
@@ -59,11 +59,11 @@
|
||||
(\uicontrol W) and height (\uicontrol H) of the button in
|
||||
\l Properties.
|
||||
|
||||
\li Drag-and-drop a \uicontrol Rectangle from \l Library >
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Basic to the component in \uicontrol Navigator. This
|
||||
creates a nested component where the Item is the parent of the
|
||||
Rectangle. Components are positioned relative to their parents.
|
||||
\li Drag-and-drop a \uicontrol Rectangle from \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Basic to the component
|
||||
in \uicontrol Navigator. This creates a nested component where the
|
||||
Item is the parent of the Rectangle. Components are positioned
|
||||
relative to their parents.
|
||||
|
||||
\li In the \uicontrol Properties view, modify the appearance of the
|
||||
rectangle:
|
||||
@@ -114,7 +114,7 @@
|
||||
To be useful, the button component has to be created in a project.
|
||||
When you work on other files in the project to create screens
|
||||
or other components for the UI, the button component appears in
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {My Components}.
|
||||
\uicontrol Components > \uicontrol {My Components}.
|
||||
You can use it to create button instances and modify their properties
|
||||
to assign them useful IDs, change their appearance, and set the button
|
||||
text for each button instance, for example.
|
||||
@@ -166,7 +166,7 @@
|
||||
\uicontrol Choose to create a \l{UI Files}{UI file} called Button.ui.qml
|
||||
(for example).
|
||||
|
||||
\note Components are listed in \l Library > \uicontrol Components >
|
||||
\note Components are listed in \uicontrol Components >
|
||||
\uicontrol {My Components} only if the filename begins with a
|
||||
capital letter.
|
||||
|
||||
@@ -176,7 +176,7 @@
|
||||
|
||||
\list 1
|
||||
\li Click \uicontrol {Design} to edit the UI file in \l {Form Editor}.
|
||||
\li Select \l Library > \uicontrol Assets > \inlineimage icons/plus.png
|
||||
\li Select \uicontrol Assets > \inlineimage icons/plus.png
|
||||
to copy the image files you want to use to the project folder.
|
||||
\li In \l Navigator, select the root component and set the
|
||||
width (\uicontrol W) and height (\uicontrol H) of the button in the
|
||||
@@ -184,9 +184,8 @@
|
||||
you plan to use. This specifies the initial size of the button
|
||||
component.
|
||||
\li Drag-and-drop two \uicontrol {Border Image} components from
|
||||
\uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Basic to the root
|
||||
component in \uicontrol Navigator.
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Basic to the root component in \uicontrol Navigator.
|
||||
\li Drag-and-drop a \uicontrol Text component to the root component.
|
||||
\li Drag-and-drop a \uicontrol {Mouse Area} to the root component.
|
||||
\li Select a border image to edit the values of its properties:
|
||||
@@ -271,7 +270,7 @@
|
||||
To be useful, the button component has to be created in a project.
|
||||
When you work on other files in the project to create screens
|
||||
or other components for the UI, the button component appears in
|
||||
\l Library > \uicontrol Components > \uicontrol {My Components}.
|
||||
\uicontrol Components > \uicontrol {My Components}.
|
||||
You can drag-and-drop it to \uicontrol {Form Editor} or
|
||||
\uicontrol Navigator to create button instances and modify the values
|
||||
of their properties to assign them useful IDs, change their appearance,
|
||||
|
@@ -38,7 +38,7 @@
|
||||
To create component instances and edit their properties:
|
||||
|
||||
\list 1
|
||||
\li Drag-and-drop components from \uicontrol Library (1) to
|
||||
\li Drag-and-drop components from \uicontrol Components (1) to
|
||||
\l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4).
|
||||
This creates instances of the components in the current
|
||||
component file.
|
||||
|
@@ -37,9 +37,9 @@
|
||||
|
||||
\image qtquick-components-custom.png "Custom components in My Components"
|
||||
|
||||
Custom components are stored in \l Library > \uicontrol Components >
|
||||
Custom components are stored in \uicontrol Components >
|
||||
\uicontrol {My Components}. You can create instances of custom components
|
||||
by dragging-and-dropping them from \uicontrol Library to \l {Form Editor},
|
||||
by dragging-and-dropping them from \uicontrol Components to \l {Form Editor},
|
||||
\l {3D Editor}, or \l Navigator.
|
||||
|
||||
\section1 Creating Components from Scratch
|
||||
@@ -54,12 +54,12 @@
|
||||
\uicontrol {Qt Quick Files} > \uicontrol {Qt Quick UI File} >
|
||||
\endif
|
||||
\uicontrol Choose to create a new \c .ui.qml file.
|
||||
\note Components are listed in \uicontrol Library >
|
||||
\uicontrol Components > \uicontrol {My Components} only
|
||||
if the filename begins with a capital letter.
|
||||
\note Components are listed in \uicontrol Components >
|
||||
\uicontrol {My Components} only if the filename begins with a
|
||||
capital letter.
|
||||
\li Click \uicontrol Design to open the file in
|
||||
\uicontrol {Form Editor}.
|
||||
\li Drag-and-drop a component from \uicontrol Library to
|
||||
\li Drag-and-drop a component from \uicontrol Components to
|
||||
\uicontrol Navigator or \uicontrol {Form Editor}.
|
||||
\li Edit component properties in the \uicontrol Properties view.
|
||||
The available properties depend on the component type. You can
|
||||
@@ -134,7 +134,7 @@
|
||||
\l{Progress Bar}.
|
||||
\endif
|
||||
|
||||
Custom components are listed in \uicontrol Library > \uicontrol Components
|
||||
Custom components are listed in \uicontrol Components
|
||||
> \uicontrol {My Components}, and you can use instances of them to build
|
||||
more components.
|
||||
|
||||
|
@@ -32,7 +32,7 @@
|
||||
\endif
|
||||
\nextpage quick-preset-components.html
|
||||
|
||||
\title Components
|
||||
\title Using Components
|
||||
|
||||
A \e component is a reusable building block for a UI.
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
\l{Turning Component Instances into Custom Components}
|
||||
{move component instances into separate component files}.
|
||||
|
||||
Select \l Library > \uicontrol Components to view the preset components that
|
||||
Select \uicontrol Components to view the preset components that
|
||||
have been added to your project. If you cannot find the components you need,
|
||||
add the relevant modules to your project, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
@@ -32,7 +32,7 @@
|
||||
|
||||
You can create instances of preset UI controls to inform users about
|
||||
the progress of the application or to gather input from users. They are
|
||||
available in \l Library > \uicontrol Components >
|
||||
available in \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls.
|
||||
|
||||
\image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls components in Library"
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
\section2 Button
|
||||
|
||||
You can create an instance of \l Library > \uicontrol Components >
|
||||
You can create an instance of \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Button:
|
||||
|
||||
\image qtquickcontrols2-button.gif "Qt Quick Controls - Button"
|
||||
@@ -178,7 +178,7 @@
|
||||
|
||||
\section2 Check Box
|
||||
|
||||
You can create instances of \l Library > \uicontrol Components >
|
||||
You can create instances of \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls >
|
||||
\uicontrol {Check Box}:
|
||||
|
||||
@@ -272,7 +272,7 @@
|
||||
|
||||
\section2 Switch
|
||||
|
||||
You can create an instance of \l Library > \uicontrol Components >
|
||||
You can create an instance of \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Switch:
|
||||
|
||||
\image qtquickcontrols2-switch.gif "Switch"
|
||||
@@ -458,7 +458,7 @@
|
||||
\target slider-control
|
||||
\section2 Slider and Dial
|
||||
|
||||
You can create an instance of \l Library > \uicontrol Components >
|
||||
You can create an instance of \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Slider:
|
||||
|
||||
\image qtquickcontrols2-slider.gif "Slider"
|
||||
@@ -480,7 +480,7 @@
|
||||
devices such as stereos or industrial equipment. It allows users to
|
||||
specify a value within a range.
|
||||
|
||||
You can create an instance of \l Library > \uicontrol Components >
|
||||
You can create an instance of \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Dial:
|
||||
|
||||
\image qtquickcontrols2-dial-no-wrap.gif "Dial"
|
||||
@@ -530,7 +530,7 @@
|
||||
|
||||
\section2 Spin Box
|
||||
|
||||
You can create an instance of \l Library > \uicontrol Components >
|
||||
You can create an instance of \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls} > \uicontrol Controls >
|
||||
\uicontrol {Spin Box}:
|
||||
|
||||
@@ -711,7 +711,7 @@
|
||||
\section1 Summary of UI Controls
|
||||
|
||||
The following table lists preset UI controls with links to their developer
|
||||
documentation. They are available in \l Library > \uicontrol Components >
|
||||
documentation. They are available in \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls}. The \e MCU column indicates which controls
|
||||
are supported on MCUs.
|
||||
|
||||
|
@@ -58,7 +58,7 @@
|
||||
|
||||
Create instances of \uicontrol {List View} and \uicontrol {Grid View}
|
||||
components to organize other component instances in list or grid format.
|
||||
They are available in \l Library > \uicontrol Components >
|
||||
They are available in \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Views.
|
||||
|
||||
A \uicontrol {List View} organizes other components as a list, whereas a
|
||||
@@ -169,7 +169,7 @@
|
||||
|
||||
\list 1
|
||||
\li Drag-and-drop a \uicontrol {Grid View} or \uicontrol {List View}
|
||||
from \uicontrol Library > \uicontrol Components >
|
||||
from \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Views to
|
||||
\uicontrol Navigator or \uicontrol {Form Editor}.
|
||||
\li Right-click the view in \uicontrol Navigator, and select
|
||||
@@ -185,7 +185,7 @@
|
||||
You can replace the default model and delegate with other,
|
||||
more complex models and delegates in \l {Text Editor}.
|
||||
\l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate}
|
||||
components are also available in \uicontrol Library > \uicontrol Components
|
||||
components are also available in \uicontrol Components
|
||||
> \uicontrol {Qt Quick Controls}.
|
||||
|
||||
\include qtquick-pathview-editor.qdocinc pathview
|
||||
@@ -197,7 +197,7 @@
|
||||
|
||||
The following table lists the components that you can use to add data models
|
||||
to UIs. The \e Location column indicates the location of the component in
|
||||
\l Library > \uicontrol Components. The \e MCU column indicates which
|
||||
\uicontrol Components. The \e MCU column indicates which
|
||||
components are supported on MCUs.
|
||||
|
||||
\table
|
||||
|
@@ -34,9 +34,9 @@
|
||||
The Image component is used for adding images to the UI in several supported
|
||||
formats, including bitmap formats, such as PNG and JPEG, and vector graphics
|
||||
formats, such as SVG. To use any image files in your designs, you need to
|
||||
first add them to \l Library:
|
||||
first add them to \l Assets:
|
||||
\list 1
|
||||
\li Select \uicontrol Library > \uicontrol Assets
|
||||
\li Select \uicontrol Assets
|
||||
> \inlineimage icons/plus.png
|
||||
.
|
||||
\li Select the image file, and then select \uicontrol Open.
|
||||
@@ -45,12 +45,12 @@
|
||||
\li Select \uicontrol OK.
|
||||
\endlist
|
||||
|
||||
Your image is now available in \uicontrol Library > \uicontrol Assets.
|
||||
Your image is now available in \uicontrol Assets.
|
||||
|
||||
\image qtquick-designer-image-type.png "Image component in different views"
|
||||
|
||||
When you drag-and-drop an image file from \uicontrol Library >
|
||||
\uicontrol Assets to \l Navigator or \l {Form Editor}, \QC automatically
|
||||
When you drag-and-drop an image file from \uicontrol Assets to \l Navigator
|
||||
or \l {Form Editor}, \QC automatically
|
||||
creates an instance of the Image component for you with the path to the
|
||||
image file set as the value of the \uicontrol Source field in
|
||||
\uicontrol Properties.
|
||||
@@ -235,7 +235,7 @@
|
||||
|
||||
The following table lists the components that you can use to add images.
|
||||
The \e Location column contains the tab name where you can find the
|
||||
component in \l Library > \uicontrol Components. The \e MCU column
|
||||
component in \uicontrol Components. The \e MCU column
|
||||
indicates which components are supported on MCUs.
|
||||
|
||||
\table
|
||||
|
@@ -309,7 +309,7 @@
|
||||
Positioner components are containers that manage the positions of their
|
||||
child components. For many use cases, the best positioner to use is a simple
|
||||
column, row, flow, or grid. You can use the components available in
|
||||
\l Library > \uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Positioner to position the children of a component in these
|
||||
formations in the most efficient manner possible.
|
||||
|
||||
@@ -382,7 +382,7 @@
|
||||
\section3 Summary of Positioners
|
||||
|
||||
The following table lists the positioners that you can use to arrange
|
||||
components in UIs. They are available in \l Library > \uicontrol Components
|
||||
components in UIs. They are available in \uicontrol Components
|
||||
> \uicontrol {Default Components} > \uicontrol Positioner.
|
||||
|
||||
\table
|
||||
@@ -415,7 +415,7 @@
|
||||
Since Qt 5.1, you can use QML types in the \l{qtquicklayouts-index.html}
|
||||
{Qt Quick Layouts} module to arrange components in UIs.
|
||||
\else
|
||||
You can use the components available in \l Library > \uicontrol Components
|
||||
You can use the components available in \uicontrol Components
|
||||
> \uicontrol {Qt Quick Layouts} to arrange components in UIs.
|
||||
\endif
|
||||
Unlike positioners, layouts manage both the positions and sizes of their
|
||||
@@ -501,7 +501,7 @@
|
||||
\section3 Summary of Layouts
|
||||
|
||||
The following table lists the layout components that you can use to arrange
|
||||
components in UIs. They are available in \l Library > \uicontrol Components
|
||||
components in UIs. They are available in \uicontrol Components
|
||||
> \uicontrol {Qt Quick Layouts}.
|
||||
|
||||
\table
|
||||
@@ -540,7 +540,7 @@
|
||||
|
||||
The following table lists the UI controls that you can use to organize
|
||||
components in UIs (since Qt 5.7). The \e Location column indicates the
|
||||
location of the component in \l Library > \uicontrol Components.
|
||||
location of the component in \uicontrol Components.
|
||||
|
||||
\table
|
||||
\header
|
||||
|
@@ -31,10 +31,10 @@
|
||||
\title Preset Components
|
||||
|
||||
To use preset components, add the modules that contain them to your project
|
||||
by selecting \l Library > \uicontrol Components > \inlineimage icons/plus.png
|
||||
by selecting \uicontrol Components > \inlineimage icons/plus.png
|
||||
. For more information, see \l{Adding and Removing Modules}. You can then
|
||||
create instances of the components by dragging-and-dropping them from
|
||||
\uicontrol Library to \l {Form Editor}, \l {3D Editor}, or \l Navigator.
|
||||
\uicontrol Components to \l {Form Editor}, \l {3D Editor}, or \l Navigator.
|
||||
|
||||
To edit the appearance of a component instance, select it in
|
||||
\uicontrol {Form Editor}, \uicontrol {3D Editor}, or \uicontrol Navigator
|
||||
|
@@ -36,7 +36,7 @@
|
||||
according to your needs. The values of some properties of the controls are
|
||||
specified by using styling, and therefore you cannot change them.
|
||||
|
||||
However, you can use some of the components in \l Library to draw
|
||||
However, you can use some of the components in \l Components to draw
|
||||
basic shapes, such as rectangles. In addition, \QDS comes with a set of
|
||||
more powerful and flexible graphical primitives, that allow creating more
|
||||
complex shapes, such as borders, triangles, arcs, and pies in
|
||||
@@ -50,7 +50,7 @@
|
||||
\image qml-shapes.png "Shapes in Form Editor"
|
||||
\endif
|
||||
|
||||
Most visual components in \uicontrol Library are based on the \l [QtQuick]
|
||||
Most visual components in \uicontrol Components are based on the \l [QtQuick]
|
||||
{Item} component. Even though it has no visual appearance itself (similarly
|
||||
to a mouse area, for example), it defines all the properties that are
|
||||
common across visual components, such as position, size, and visibility. For
|
||||
@@ -102,7 +102,7 @@
|
||||
|
||||
If you want to modify each corner of the rectangle independently
|
||||
or use a dashed border, create an instance of the \uicontrol Rectangle
|
||||
component available in \uicontrol Library > \uicontrol Components >
|
||||
component available in \uicontrol Components >
|
||||
\uicontrol {Qt Quick Studio Components} instead of the basic
|
||||
\uicontrol Rectangle component available in \uicontrol {Default Components}
|
||||
> \uicontrol Basic.
|
||||
@@ -242,7 +242,7 @@
|
||||
|
||||
The following table lists the components that you can use to draw shapes.
|
||||
The \e Location column indicates the location of the component in
|
||||
\l Library > \uicontrol Components. The \e MCU column indicates which
|
||||
\uicontrol Components. The \e MCU column indicates which
|
||||
components are supported on MCUs.
|
||||
|
||||
\table
|
||||
|
@@ -45,7 +45,7 @@
|
||||
\youtube yOUdg1o2KJM
|
||||
|
||||
To create a label with a background, use the \uicontrol Label
|
||||
component available in \l Library > \uicontrol Components >
|
||||
component available in \uicontrol Components >
|
||||
\uicontrol {Qt Quick Controls}. The module also contains components
|
||||
for creating \uicontrol {Text Field} and \uicontrol {Text Area} controls.
|
||||
They differ from the basic components in that a common style is applied
|
||||
@@ -119,10 +119,10 @@
|
||||
\image qtquick-designer-text-properties.png "Character properties"
|
||||
|
||||
To display custom fonts in the list of available fonts in the
|
||||
\uicontrol Font field, you need to first add them to \l Library:
|
||||
\uicontrol Font field, you need to first add them to \l Assets:
|
||||
|
||||
\list 1
|
||||
\li Select \uicontrol Library > \l Assets
|
||||
\li Select \uicontrol Assets
|
||||
> \inlineimage icons/plus.png
|
||||
.
|
||||
\li Select the font file, and then select \uicontrol Open.
|
||||
@@ -422,7 +422,7 @@
|
||||
|
||||
The following table lists the components that you can use to add text to
|
||||
UIs. The \e Location column contains the tab name where you can find the
|
||||
component in \l Library > \uicontrol Components. The \e MCU column
|
||||
component in \uicontrol Components. The \e MCU column
|
||||
indicates which components are supported on MCUs.
|
||||
|
||||
\table
|
||||
|
@@ -33,7 +33,7 @@
|
||||
You can create instances of preset basic components to add interaction
|
||||
methods to UIs, such as performing actions by using a pointing device or
|
||||
the keyboard, or flicking the visible area of the screen horizontally or
|
||||
vertically. They are availabe in \l Library > \uicontrol Components >
|
||||
vertically. They are availabe in \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Basic.
|
||||
|
||||
In addition, you can create instances of preset \l{UI Controls} to inform
|
||||
@@ -318,7 +318,7 @@
|
||||
|
||||
The following table lists the components that you can use to add basic
|
||||
interaction methods to UIs with links to their developer documentation.
|
||||
They are availabe in \l Library > \uicontrol Components >
|
||||
They are availabe in \uicontrol Components >
|
||||
\uicontrol {Default Components} > \uicontrol Basic. The \e MCU column
|
||||
indicates which components are supported on MCUs.
|
||||
|
||||
|
@@ -221,7 +221,7 @@
|
||||
\c complete() functions.
|
||||
|
||||
You can create instances of preset animation components available in
|
||||
\l Library > \uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Components > \uicontrol {Default Components} >
|
||||
\uicontrol Animation to create animations depending on the type of the
|
||||
property and the behavior that you want.
|
||||
|
||||
|
@@ -45,7 +45,7 @@
|
||||
To add fonts:
|
||||
|
||||
\list 1
|
||||
\li Select \uicontrol Library > \l Assets
|
||||
\li Select \uicontrol Assets
|
||||
> \inlineimage icons/plus.png
|
||||
.
|
||||
\li Browse to the folder that contains the font files and select them,
|
||||
|
@@ -51,13 +51,13 @@
|
||||
|
||||
In \QC, you build UIs around the behavior of \l{glossary-component}
|
||||
{components} and how they connect with one another. You can use preset
|
||||
components available in the \l Library view or combine them to create
|
||||
components available in the \l Components view or combine them to create
|
||||
your own components. You can specify values for the \e properties of a
|
||||
component to change its appearance and behavior. All components have a
|
||||
set of predefined properties, some of which control things that are
|
||||
visible to users, while others are used behind the scene.
|
||||
|
||||
You drag-and-drop the preset components from the \uicontrol Library view
|
||||
You drag-and-drop the preset components from the \uicontrol Components view
|
||||
to the \l {Form Editor}, \l{3D Editor}, or \l Navigator view to create
|
||||
instances of them. You then change the instances to your liking by modifying
|
||||
their properties in the \l Properties view. The application code is
|
||||
@@ -76,7 +76,7 @@
|
||||
the user experience of the application.
|
||||
\endif
|
||||
|
||||
\li \l {Components}
|
||||
\li \l {Using Components}
|
||||
|
||||
\QDS comes with \e {preset components} that you can use in
|
||||
wireframes and prototypes by creating instances of them.
|
||||
|
@@ -148,9 +148,8 @@
|
||||
|
||||
You can specify effects, such as a blur effect, to use for a group or layer.
|
||||
|
||||
The QML types supported by \QDS are listed in the \uicontrol {Components}
|
||||
tab in the \l {Library} in the Design mode of \QDS. For more
|
||||
information, see \l{Components}.
|
||||
The QML types supported by \QDS are listed in the \l {Components}
|
||||
view in the Design mode of \QDS.
|
||||
|
||||
You can also specify values for the properties of the component or create
|
||||
\l{Property Aliases}{property aliases} to fetch the values from other
|
||||
|
@@ -68,13 +68,13 @@
|
||||
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 >
|
||||
\uicontrol {Flow Decision} components from
|
||||
\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 >
|
||||
\li Use \uicontrol {Flow Wildcard} components from
|
||||
\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}.
|
||||
@@ -177,20 +177,20 @@
|
||||
If you \l{Importing 2D Assets}{imported} your screen designs from a
|
||||
design tool as individual \l{glossary-component}{components}
|
||||
(\e {.ui.qml} files), you can use them as content for flow items.
|
||||
The imported components are listed in \l Library > \uicontrol Components
|
||||
The imported components are listed in \uicontrol Components
|
||||
> \uicontrol {My Components}.
|
||||
|
||||
If you are building your UI from scratch in \QDS, you must first add
|
||||
components to the flow items to create the screens as you would any
|
||||
components. For more information, see \l {Components}. The
|
||||
components. For more information, see \l {Using Components}. The
|
||||
flow items that you attach the components to are listed under
|
||||
\uicontrol {My Components}.
|
||||
|
||||
\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} module is added to \uicontrol Library
|
||||
> \uicontrol Components. It contains a \uicontrol {Flow Item} component that
|
||||
a flow view, the \uicontrol {Flow View} module is added to
|
||||
\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.
|
||||
|
||||
@@ -203,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 \uicontrol Library to a flow
|
||||
item in \l {Form Editor} or \l Navigator.
|
||||
\li Drag a screen from \uicontrol Library > \uicontrol Components
|
||||
\li Drag-and-drop components from \uicontrol Components to a
|
||||
flow item in \l {Form Editor} or \l Navigator.
|
||||
\li Drag a screen from \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 > \uicontrol Components
|
||||
You can now drag the flow items from \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
|
||||
@@ -573,7 +573,7 @@
|
||||
To simulate conditions:
|
||||
|
||||
\list 1
|
||||
\li Drag a \uicontrol {Flow Decision} component from \l Library >
|
||||
\li Drag a \uicontrol {Flow Decision} component from
|
||||
\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
|
||||
@@ -645,7 +645,7 @@
|
||||
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
|
||||
\uicontrol Components > \uicontrol {Flow View}.
|
||||
|
||||
\list 1
|
||||
@@ -657,7 +657,7 @@
|
||||
{flow view} in \l {Form Editor} and drag the flow item to the
|
||||
flow view in \l Navigator or \l {Form Editor}.
|
||||
\li Drag an empty \uicontrol {Flow Item} component from
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {Flow View}
|
||||
\uicontrol Components > \uicontrol {Flow View}
|
||||
to the flow for each state that you added.
|
||||
\li In \l Properties, in the \uicontrol {State change target}
|
||||
field, select the flow item that you created using the wizard.
|
||||
@@ -694,7 +694,7 @@
|
||||
To use wildcards:
|
||||
|
||||
\list 1
|
||||
\li Drag a \uicontrol {Flow Wildcard} component from \l Library >
|
||||
\li Drag a \uicontrol {Flow Wildcard} component from
|
||||
\uicontrol Components > \uicontrol {Flow View} to an
|
||||
\l{Adding Action Areas and Transitions}{action area} in \l Navigator
|
||||
or \l {Form Editor}.
|
||||
|
@@ -94,7 +94,7 @@
|
||||
Yes, you can create custom components and controls by using wizard templates
|
||||
or move component instances into separate files to turn them into new
|
||||
components that you can create instances of. For more information, see
|
||||
\l {Components}.
|
||||
\l {Using Components}.
|
||||
|
||||
\section2 What are the 3D import formats for \QDS?
|
||||
|
||||
|
@@ -36,18 +36,18 @@
|
||||
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 icons/plus.png
|
||||
\uicontrol Assets > \inlineimage icons/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.
|
||||
The imported images will appear in \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
|
||||
will only appear in \uicontrol Assets, and you can then
|
||||
drag-and-drop them to a suitable view.
|
||||
|
||||
\section1 Importing Designs From Other Design Tools
|
||||
@@ -76,7 +76,7 @@
|
||||
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 icons/plus.png
|
||||
\li Select \uicontrol Assets > \inlineimage icons/plus.png
|
||||
.
|
||||
\li Select the folder where you exported the assets.
|
||||
\li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown
|
||||
@@ -108,12 +108,12 @@
|
||||
might take a little while for complex projects.
|
||||
\endlist
|
||||
|
||||
The imported assets are displayed in \uicontrol Library > \uicontrol Assets
|
||||
The imported assets are displayed in \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.
|
||||
displayed in \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 Components 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
|
||||
|
@@ -153,7 +153,7 @@
|
||||
\li qtquickcontrols2.conf file specifies the preferred style and some
|
||||
style-specific arguments.
|
||||
\li \e fonts folder contains font files that you have added in
|
||||
\l Library > \uicontrol Assets.
|
||||
\uicontrol Assets.
|
||||
\li \e imports folder contains a \e {Constants.qml} file that specifies
|
||||
a font loader for the Arial font and the screen resolution. The size
|
||||
of the default Screen.ui.qml \l{basic-rectangle}{Rectangle} should
|
||||
@@ -163,7 +163,7 @@
|
||||
For more information, see \l {Module Definition qmldir Files}.
|
||||
\endlist
|
||||
|
||||
To use JavaScript and image files in the UI, select \uicontrol Library >
|
||||
To use JavaScript and image files in the UI, select
|
||||
\uicontrol Assets > \inlineimage icons/plus.png
|
||||
.
|
||||
|
||||
|
@@ -145,8 +145,8 @@
|
||||
\section2 Importing the Simulink Connector
|
||||
|
||||
To integrate the Simulink model into \QDS, you first need to add the
|
||||
Simulink connector module to your project. In the \l Library view, select
|
||||
\uicontrol Components > \inlineimage icons/plus.png
|
||||
Simulink connector module to your project. In the \uicontrol Components
|
||||
view, select \inlineimage icons/plus.png
|
||||
> \uicontrol SimulinkConnector. \QDS is now ready to communicate with the
|
||||
Simulink model.
|
||||
|
||||
|
@@ -106,7 +106,7 @@
|
||||
text, or images, while others represent complex UI controls with full
|
||||
functionality, such as spin boxes or sliders. You can also add instances of
|
||||
preset \l {3D Components}{3D components} to your UIs. You can find all
|
||||
the preset components in \l Library.
|
||||
the preset components in \l Components.
|
||||
|
||||
To build \l {Creating Component Instances}{your own components}, you can
|
||||
modify the \l{glossary-property}{properties} of the component instances
|
||||
@@ -191,7 +191,7 @@
|
||||
You use templates to create different types of projects according to your
|
||||
needs. The templates add preset components to the project by default. For
|
||||
example, if you create a 3D project, preset 3D components are added to it.
|
||||
You can add more preset components in \uicontrol Library.
|
||||
You can add more preset components in \uicontrol {Components}.
|
||||
|
||||
\image studio-project-wizards.png "New Project dialog"
|
||||
|
||||
|
@@ -39,7 +39,8 @@
|
||||
\list
|
||||
\li \l{Form Editor}
|
||||
\li \l{3D Editor}
|
||||
\li \l{Library}
|
||||
\li \l{Components}
|
||||
\li \l{Assets}
|
||||
\li \l{Navigator}
|
||||
\li \l{Properties}
|
||||
\li \l{Connection View}
|
||||
@@ -75,7 +76,7 @@
|
||||
\li \l{Applying States in Flows}
|
||||
\li \l{Reacting to External Events}
|
||||
\endlist
|
||||
\li \l {Components}
|
||||
\li \l {Using Components}
|
||||
\list
|
||||
\li \l{Preset Components}
|
||||
\list
|
||||
|
@@ -58,7 +58,7 @@
|
||||
\li \b {\l{Wireframing}}
|
||||
\list
|
||||
\li \l{Designing Application Flows}
|
||||
\li \l{Components}
|
||||
\li \l{Using Components}
|
||||
\li \l{Specifying Component Properties}
|
||||
\li \l{Scalable Layouts}
|
||||
\li \l{Annotating Designs}
|
||||
|
@@ -166,7 +166,7 @@
|
||||
|
||||
\section2 Importing Assets
|
||||
\list 1
|
||||
\li Select \uicontrol Library > \uicontrol Assets > \inlineimage icons/plus.png
|
||||
\li Select \uicontrol Assets > \inlineimage icons/plus.png
|
||||
.
|
||||
\image exporting-from-qt3ds/09-add-new-assets.png
|
||||
|
||||
@@ -178,18 +178,17 @@
|
||||
Close.
|
||||
\image exporting-from-qt3ds/11-import.png "Import the file"
|
||||
|
||||
\li The 2D assets imported from \Q3DS now appear in \uicontrol Library
|
||||
> \uicontrol Assets.
|
||||
\li The 2D assets imported from \Q3DS now appear in > \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
|
||||
as available imports in \uicontrol Library under \uicontrol {QML Types}.
|
||||
as available imports in \uicontrol Components under \uicontrol {QML Types}.
|
||||
Select \uicontrol Quick3DAssets.MyOwnCluster to import them to your
|
||||
project.
|
||||
\image exporting-from-qt3ds/13-myowncluster-in-qml-types.png "Available imports in QML Types"
|
||||
|
||||
\li The imported QML types now appear in \uicontrol Library and can be added
|
||||
to the project.
|
||||
\li The imported QML types now appear in \uicontrol Components and can be
|
||||
added to the project.
|
||||
\image exporting-from-qt3ds/14-add-myowncluster-to-project.png "MyOwnCluster in Library"
|
||||
\endlist
|
||||
|
||||
@@ -197,7 +196,7 @@
|
||||
|
||||
\list 1
|
||||
\li Drag \uicontrol MyOwnCluster from \uicontrol {My Quick3D Components}
|
||||
in \uicontrol Library to \uicontrol {Form Editor}.
|
||||
in \uicontrol Components to \uicontrol {Form Editor}.
|
||||
\image exporting-from-qt3ds/15-drag-to-project.png "Drag MyOwnCluster to Form Editor"
|
||||
|
||||
\li In \uicontrol Navigator, right click on myOwnCluster and select \uicontrol
|
||||
@@ -222,7 +221,7 @@
|
||||
\section2 Converting 3D Elements
|
||||
|
||||
\list 1
|
||||
\li Drag subpresentation_ADAS from \uicontrol Library > \uicontrol Components
|
||||
\li Drag subpresentation_ADAS from \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"
|
||||
|
||||
|
@@ -41,9 +41,9 @@
|
||||
\image studio-qtquick-3d-components.png "Qt Quick 3D components in Library"
|
||||
|
||||
Add a camera by dragging-and-dropping one of the camera components from
|
||||
\l Library > \uicontrol Components > \uicontrol {Qt Quick 3D} > \uicontrol
|
||||
\uicontrol Components > \uicontrol {Qt Quick 3D} > \uicontrol
|
||||
{Qt Quick 3D} to \l {3D Editor} or to a 3D view in \l Navigator.
|
||||
If the cameras are not displayed in \uicontrol Library, add the
|
||||
If the cameras are not displayed in \uicontrol {Components}, add the
|
||||
\uicontrol QtQuick3D module to your project, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
|
@@ -40,7 +40,7 @@
|
||||
implements all the functions needed to calculate the shaded color. The
|
||||
material system also offers ready-made functions to help you implement
|
||||
the material. If the 3D effects and materials are not displayed in
|
||||
\l Library, you should add the \uicontrol QtQuick3D.Effects and
|
||||
\l Components, you should add the \uicontrol QtQuick3D.Effects and
|
||||
\uicontrol QtQuick3D.Materials modules to your project, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
@@ -49,12 +49,12 @@
|
||||
two-sided polygons, index-of-refraction, and fragment cutoff (masking).
|
||||
For more information, see \l {Qt Quick 3D Custom Material Reference}.
|
||||
|
||||
Use the components in \uicontrol Library > \uicontrol Components >
|
||||
Use the components in \uicontrol Components >
|
||||
\uicontrol QtQuick3D > \uicontrol {Qt Quick 3D Custom Shader Utils} to
|
||||
create custom effects and materials. You can find the \uicontrol Effect
|
||||
component in \uicontrol Library > \uicontrol {QtQuick3D Effects} > \uicontrol
|
||||
component in \uicontrol Components > \uicontrol {QtQuick3D Effects} > \uicontrol
|
||||
{Qt Quick 3D Custom Shader Utils}, and the \uicontrol {Custom Material}
|
||||
component in \uicontrol Library > \uicontrol {QtQuick3D Materials} >
|
||||
component in \uicontrol Components> \uicontrol {QtQuick3D Materials} >
|
||||
\uicontrol {Qt Quick 3D Custom Shader Utils}. For more information about the
|
||||
shader utilities and commands and their properties, see
|
||||
\l {Custom Shaders}.
|
||||
@@ -83,7 +83,7 @@
|
||||
\list 1
|
||||
\li Drag-and-drop an \uicontrol {Effect} component from the
|
||||
\uicontrol {Qt Quick 3D Custom Shader Utils} tab of
|
||||
\uicontrol Library to a Model component in \l Navigator.
|
||||
\uicontrol Component to a Model component in \l Navigator.
|
||||
\li Select the custom effect component in \uicontrol Navigator to edit
|
||||
the values of its properties in the \l Properties view.
|
||||
\image studio-qtquick-3d-custom-effect.png "Custom effect properties"
|
||||
@@ -93,7 +93,7 @@
|
||||
for its properties in \uicontrol Properties.
|
||||
\image studio-qtquick-3d-pass.png "Pass properties"
|
||||
\li To execute commands during the pass, drag-and-drop the following
|
||||
command components from \uicontrol Library to the custom material in
|
||||
command components from \uicontrol Component to the custom material in
|
||||
\uicontrol Navigator: \uicontrol Blending, \uicontrol {Buffer Blit},
|
||||
\uicontrol {Buffer Input}, \uicontrol {Cull Mode},
|
||||
\uicontrol {Depth Input}, \uicontrol {Render State}, and
|
||||
@@ -135,7 +135,7 @@
|
||||
\list 1
|
||||
\li Drag-and-drop a \uicontrol {Custom Material} component from the
|
||||
\uicontrol {Qt Quick 3D Custom Shader Utils} tab of
|
||||
\uicontrol Library to a Model component in \uicontrol Navigator.
|
||||
\uicontrol Component to a Model component in \uicontrol Navigator.
|
||||
\li Select the custom material component in \uicontrol Navigator to
|
||||
edit the values of its properties in the \uicontrol Properties view.
|
||||
\image studio-qtquick-3d-custom-material.png "Custom material properties"
|
||||
@@ -160,7 +160,7 @@
|
||||
for its properties in \uicontrol Properties.
|
||||
\image studio-qtquick-3d-pass.png "Pass properties"
|
||||
\li To execute commands during the pass, drag-and-drop the following
|
||||
command components from \uicontrol Library to the pass component in
|
||||
command components from \uicontrol Component to the pass component in
|
||||
\uicontrol Navigator: \uicontrol Blending, \uicontrol {Buffer Blit},
|
||||
\uicontrol {Buffer Input}, \uicontrol {Cull Mode},
|
||||
\uicontrol {Depth Input}, \uicontrol {Render State}, and
|
||||
@@ -171,7 +171,7 @@
|
||||
component to the custom material. Then select the buffer in the
|
||||
\uicontrol Buffer field.
|
||||
\li To add a shader to the pass, drag-and-drop the \uicontrol Shader
|
||||
component from the \uicontrol Library to the pass component in
|
||||
component from the \uicontrol Component to the pass component in
|
||||
\uicontrol Navigator. The shader components are created at the same
|
||||
level as the pass component and automatically added to the
|
||||
\uicontrol Shaders field.
|
||||
|
@@ -32,24 +32,25 @@
|
||||
|
||||
\title Custom Shaders
|
||||
|
||||
You can use the 3D shader utilities and commands available in \l Library
|
||||
You can use the 3D shader utilities and commands available in
|
||||
> \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
\uicontrol {Qt Quick 3D Custom Shader Utilities} to create your own effects
|
||||
and materials.
|
||||
|
||||
If the custom shader utilities are not displayed in \uicontrol Library, add
|
||||
the \uicontrol QtQuick3D module to your project, as described in
|
||||
If the custom shader utilities are not displayed in \uicontrol {Components},
|
||||
add the \uicontrol QtQuick3D module to your project, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
\note If you select \uicontrol {Qt 5} as the \uicontrol {Target Qt Version}
|
||||
when \l {Creating Projects}{creating your project}, the available custom
|
||||
shader utilities and their properties will be slightly different, and some
|
||||
of the components can be found in different locations in \uicontrol Library.
|
||||
of the components can be found in different locations in
|
||||
\uicontrol {Components}.
|
||||
|
||||
\image studio-qtquick-3d-shader-utilities.png "Custom shader utilities in Library"
|
||||
|
||||
You can find additional shader utilities, the \uicontrol Effect and
|
||||
\uicontrol {Custom Material} components, in \uicontrol Library >
|
||||
\uicontrol {Custom Material} components, in
|
||||
\uicontrol Components > \uicontrol {Qt Quick3D} > \uicontrol {Qt Quick 3D}.
|
||||
|
||||
\image studio-qtquick-3d-components.png "Effect and Custom Material Components in Library"
|
||||
|
@@ -44,7 +44,7 @@
|
||||
\l{Lights}{light}, \l{3D Models}{model}, and
|
||||
\l {Materials and Shaders}{materials}. If your scene did not contain
|
||||
them, you can add the corresponding \l {3D Components}{Qt Quick 3D}
|
||||
components from \l Library > \uicontrol Components > \inlineimage icons/plus.png
|
||||
components from \uicontrol Components > \inlineimage icons/plus.png
|
||||
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
|
||||
|
||||
You can use the \l{Summary of the 3D Editor Toolbar Buttons}{toolbar buttons}
|
||||
@@ -120,7 +120,7 @@
|
||||
|
||||
You can use scene cameras (2) to view the \uicontrol View3D component from a
|
||||
specific angle in \l {Form Editor} while editing scenes. Different types of
|
||||
cameras are available in \uicontrol Library > \uicontrol Components
|
||||
cameras are available in \uicontrol Components
|
||||
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}. For more information
|
||||
about using cameras in the scene, the available camera types, and their
|
||||
properties, see \l{Cameras}.
|
||||
|
@@ -33,12 +33,12 @@
|
||||
\title 3D Effects
|
||||
|
||||
\QDS provides a set of 3D effects, which are visible in \l {Form Editor}.
|
||||
To apply a visual effect to a scene, drag-and-drop an effect from \l Library
|
||||
> \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
To apply a visual effect to a scene, drag-and-drop an effect from
|
||||
\uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
\uicontrol {Qt Quick 3D Effects} to a \uicontrol View3D component in
|
||||
\l Navigator.
|
||||
|
||||
You can use the \l Effect component available in \uicontrol Library >
|
||||
You can use the \l Effect component available in \uicontrol Components >
|
||||
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} as the base
|
||||
component for creating custom post-processing effects. For more information,
|
||||
see \l {Custom Effects and Materials} and \l {Custom Shaders}.
|
||||
@@ -51,7 +51,7 @@
|
||||
{Scene Environment} component in \uicontrol Navigator to view the applied
|
||||
effects in \l Properties > \uicontrol {Scene Environment} > \uicontrol Effect.
|
||||
|
||||
If the effects are not displayed in \l Library, you should add the
|
||||
If the effects are not displayed in \l Components, you should add the
|
||||
\uicontrol QtQuick3D.Effects module to your project, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
|
@@ -36,13 +36,13 @@
|
||||
the \l Properties view simultaneously.
|
||||
|
||||
To add a \uicontrol Group component
|
||||
to your scene, drag-and-drop it from \l Library > \uicontrol Components >
|
||||
to your scene, drag-and-drop it from \uicontrol Components >
|
||||
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor}
|
||||
view or to \l Navigator > \uicontrol View3D > \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
|
||||
\uicontrol {Components}, 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
|
||||
|
@@ -59,13 +59,13 @@
|
||||
The 3D asset you dragged-and-dropped to \uicontrol {3D Editor} has now
|
||||
been added to your scene, and you can see it in the \uicontrol {3D Editor}
|
||||
view and in \uicontrol Navigator. It is also available in
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {My 3D Components}.
|
||||
\uicontrol Components > \uicontrol {My 3D Components}.
|
||||
|
||||
Alternatively, you can initiate the import dialog from the
|
||||
\uicontrol Library view:
|
||||
\uicontrol Assets view:
|
||||
|
||||
\list 1
|
||||
\li In the \l{Design Views}{Design mode}, select \l Library >
|
||||
\li In the \l{Design Views}{Design mode}, select
|
||||
\uicontrol Assets > \inlineimage icons/plus.png
|
||||
.
|
||||
\li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D
|
||||
@@ -77,7 +77,7 @@
|
||||
\li When the import is done, select \uicontrol Close.
|
||||
\endlist
|
||||
|
||||
The 3D asset now appears in \uicontrol Library > \uicontrol Components >
|
||||
The 3D asset now appears in \uicontrol Components >
|
||||
\uicontrol {My 3D Components}. You can add it to the scene by
|
||||
drag-and-dropping it to \uicontrol {3D Editor}.
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
or with other 3D graphics tools. See the tooltips in the options dialog
|
||||
for more information about a particular option.
|
||||
|
||||
The 3D asset you added to the project now appears in \uicontrol Library >
|
||||
The 3D asset you added to the project now appears in
|
||||
\uicontrol Components > \uicontrol {My 3D Components}. You can add it to
|
||||
your UI by dragging-and-dropping it to \l {3D Editor}.
|
||||
*/
|
||||
|
@@ -40,8 +40,8 @@
|
||||
instance is modified relative to the base model.
|
||||
|
||||
You can add instancing to your scenes by using the instancing components
|
||||
available in \uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}:
|
||||
available in \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
\uicontrol {Qt Quick 3D}:
|
||||
\list
|
||||
\li \uicontrol {Instancing}
|
||||
\li \uicontrol {Instance List}
|
||||
@@ -70,7 +70,7 @@
|
||||
QML type.
|
||||
|
||||
To use the \uicontrol Instancing component, drag-and-drop it from
|
||||
\uicontrol Library to \uicontrol Scene in \uicontrol Navigator.
|
||||
\uicontrol Components to \uicontrol Scene in \uicontrol Navigator.
|
||||
|
||||
\section2 Instancing Properties
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
To build an instance table:
|
||||
\list 1
|
||||
\li Drag-and-drop an \uicontrol {Instance List} component from
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D}
|
||||
\uicontrol Components > \uicontrol {Qt Quick 3D}
|
||||
> \uicontrol {Qt Quick 3D} to \uicontrol Scene in
|
||||
\uicontrol Navigator.
|
||||
\li Drag-and-drop \uicontrol {Instance List Entry} components to the
|
||||
|
@@ -36,11 +36,11 @@
|
||||
As a secondary light source, you can use \l{Setting the Light Probe}
|
||||
{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
|
||||
To add light components to your UI, drag-and-drop them from
|
||||
\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
|
||||
If you cannot find the light components in \uicontrol {Components}, add the
|
||||
\uicontrol {Qt Quick 3D} module to your project as instructed in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
|
@@ -44,7 +44,7 @@
|
||||
should not be created unnecessarily for performance reasons.
|
||||
|
||||
Add a \uicontrol Loader3D component to your scene by drag-and-dropping it
|
||||
from \uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
from \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
\uicontrol {Qt Quick 3D} to \uicontrol Scene in \uicontrol Navigator.
|
||||
|
||||
For more information, see the \l{https://doc.qt.io/qt/qml-qtquick3d-loader3d.html}
|
||||
|
@@ -221,7 +221,7 @@
|
||||
\section1 Applying Materials to Models
|
||||
|
||||
To apply materials to models, you should first delete the default material,
|
||||
and then drag-and-drop a new material from \l Library to a model component
|
||||
and then drag-and-drop a new material from \l Assets to a model component
|
||||
in \l Navigator.
|
||||
|
||||
You can apply the same material to another component as well. Again,
|
||||
|
@@ -33,7 +33,7 @@
|
||||
\title 3D Materials
|
||||
|
||||
\QDS provides a set of pregenerated \uicontrol {Qt Quick 3D}
|
||||
materials. If the 3D materials are not displayed in \uicontrol Library,
|
||||
materials. If the 3D materials are not displayed in \uicontrol {Components},
|
||||
you can add the \uicontrol QtQuick3D.Materials module to your project,
|
||||
as described in \l {Adding and Removing Modules}. However, since using the
|
||||
pregenerated 3D materials may cause performance issues, we advice you to
|
||||
@@ -47,7 +47,7 @@
|
||||
\uicontrol {Target Qt Version} when \l {Creating Projects}{creating your project}.
|
||||
|
||||
To apply a 3D material to a component, you should first delete the default
|
||||
material and then drag-and-drop a new material from \l Library >
|
||||
material and then drag-and-drop a new material from
|
||||
\uicontrol Components > \uicontrol {Qt Quick 3D Materials} >
|
||||
\uicontrol {Qt Quick 3D Materials} to a model component in \l Navigator.
|
||||
The materials you add to the model are listed in the model component's
|
||||
|
@@ -32,7 +32,7 @@
|
||||
|
||||
\title 3D Models
|
||||
|
||||
The \l Library view features some built-in primitive 3D models. This allows
|
||||
The \l Components view features some built-in primitive 3D models. This allows
|
||||
you to add cubes, cones, cylinders, and planes (rectangles) to your scene.
|
||||
|
||||
\image studio-3d-models.png "Various 3D models in 3D Editor"
|
||||
@@ -41,10 +41,10 @@
|
||||
component is shaded by using materials. For more information, see
|
||||
\l {Materials and Shaders} and \l {Creating Custom Materials}.
|
||||
|
||||
You can drag-and-drop a model from \uicontrol Library > \uicontrol Components
|
||||
You can drag-and-drop a model from \uicontrol Components
|
||||
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to \l {3D Editor} or
|
||||
to \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene. If the
|
||||
models are not displayed in \uicontrol Library, you should add the
|
||||
models are not displayed in \uicontrol {Components}, you should add the
|
||||
\uicontrol QtQuick3D module to your project, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
@@ -79,8 +79,8 @@
|
||||
Set the \uicontrol Instancing property to render a number of instances of
|
||||
the model as defined by an instancing table. The instancing tables can be
|
||||
defined by using one of the \l{Instanced Rendering}{instancing components}
|
||||
available in \uicontrol Library > \uicontrol Components >
|
||||
\uicontrol {Qt Quick 3D} > {Qt Quick 3D}.
|
||||
available in \uicontrol Components > \uicontrol {Qt Quick 3D}
|
||||
> {Qt Quick 3D}.
|
||||
|
||||
Set the \uicontrol {Instance root} property to define the origin of the
|
||||
instance's coordinate system.
|
||||
|
@@ -43,7 +43,7 @@
|
||||
a mesh, which also contains morph targets, and import it to \QDS.
|
||||
|
||||
To add a morph target for a model in \QDS, drag-and-drop a
|
||||
\uicontrol {Morph Target} component from \l Library > \uicontrol Components
|
||||
\uicontrol {Morph Target} component from \uicontrol Components
|
||||
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to \uicontrol Scene in
|
||||
\l Navigator. Then select the model in \uicontrol Navigator, and in
|
||||
\l Properties > \uicontrol Model > \uicontrol {Morph Targets}, select the
|
||||
|
@@ -50,7 +50,7 @@
|
||||
|
||||
\section1 Adding a Particle System
|
||||
|
||||
Preset particle components are available in \l Library >
|
||||
Preset particle components are available in
|
||||
\uicontrol Components > \uicontrol {Qt Quick 3D Particles 3D}
|
||||
after you add the \uicontrol {QtQuick3D.Particles3D} module to
|
||||
your project, as instructed in \l{Adding and Removing Modules}.
|
||||
@@ -86,15 +86,14 @@
|
||||
To add a particle system that emits sprite particles:
|
||||
|
||||
\list 1
|
||||
\li Select \uicontrol Library > \uicontrol Assets > \inlineimage icons/plus.png
|
||||
\li Select \uicontrol Assets > \inlineimage icons/plus.png
|
||||
to add your sprites, 3D models, textures, and other graphical
|
||||
\l{Assets}{assets} to the project.
|
||||
\li Drag-and-drop an instance of the \uicontrol {Particle System}
|
||||
component from \uicontrol Library to a scene component instance
|
||||
component from \uicontrol Components to a scene component instance
|
||||
in \l Navigator.
|
||||
\li Drag-and-drop the sprite image from \uicontrol Library >
|
||||
\uicontrol Assets to the sprite particle instance
|
||||
in \uicontrol Navigator.
|
||||
\li Drag-and-drop the sprite image from \uicontrol Assets to the sprite
|
||||
particle instance in \uicontrol Navigator.
|
||||
\endlist
|
||||
|
||||
Add instances of other components according to your use case. The following
|
||||
|
@@ -47,7 +47,7 @@
|
||||
as the model data relevant to the delegate.
|
||||
|
||||
Add a \uicontrol Repeater3D component to your scene by drag-and-dropping it
|
||||
from \uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
from \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
\uicontrol {Qt Quick 3D} to \uicontrol Scene in \uicontrol Navigator.
|
||||
|
||||
\note \uicontrol Repeater3D owns all items it instantiates. Removing or
|
||||
|
@@ -36,7 +36,7 @@
|
||||
how a scene is rendered globally. You can specify settings for antialiasing,
|
||||
scene background, ambient occlusion, and image-based lighting in the
|
||||
\l Properties view. The \uicontrol {Scene Environment} component is available
|
||||
in \l Library > \uicontrol Components > \uicontrol {Qt Quick 3D}. It is
|
||||
in \uicontrol Components > \uicontrol {Qt Quick 3D}. It is
|
||||
automatically included under the 3D view component in \l{Creating Projects}
|
||||
{projects created} using the \uicontrol {Qt Quick 3D Application} wizard
|
||||
template.
|
||||
|
@@ -113,17 +113,17 @@
|
||||
|
||||
\section1 Applying Textures to Materials
|
||||
|
||||
Drag-and-drop an image from \l Library > \l Assets on a material to
|
||||
Drag-and-drop an image from \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 {Qt Quick 3D} module to your project, as described
|
||||
in \l {Adding and Removing Modules}.
|
||||
\uicontrol Texture component is not displayed in \uicontrol {Components},
|
||||
you 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 \uicontrol Library > \uicontrol Components >
|
||||
Texture component from \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
|
||||
|
@@ -32,8 +32,8 @@
|
||||
|
||||
To create a Qt Quick 3D UI project, we recommend using a \uicontrol
|
||||
{Qt Quick 3D Application} wizard template that adds the
|
||||
\l {3D Components}{Qt Quick 3D} components to \l Library >
|
||||
\uicontrol Components and contains a 3D view. A 3D view component includes a
|
||||
\l {3D Components}{Qt Quick 3D} components to \uicontrol Components
|
||||
and contains a 3D view. A 3D view component includes a
|
||||
\l {Scene Environment}{scene environment} as well as a scene
|
||||
\l {Lights}{light}, \l {Cameras}{camera}, and
|
||||
\l {3D Models}{model}. A default \l {Materials and Shaders}{material}
|
||||
@@ -41,7 +41,7 @@
|
||||
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 first need to add the
|
||||
\uicontrol {Qt Quick 3D} module to \uicontrol Library, as described in
|
||||
\uicontrol {Qt Quick 3D} module to \uicontrol {Components}, as described in
|
||||
\l {Adding and Removing Modules}.
|
||||
|
||||
\image studio-qtquick-3d-components.png "Qt Quick 3D components in Library"
|
||||
|
@@ -40,8 +40,7 @@
|
||||
the skeleton and the skin (this is sometimes also referred to as rigging),
|
||||
and import them to \QDS. You can then create skeletal animations using
|
||||
\uicontrol Skeleton and \uicontrol Joint components available in
|
||||
\uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D} >
|
||||
\uicontrol {Qt Quick 3D}.
|
||||
\uicontrol Components > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
|
||||
|
||||
\section1 Skeleton
|
||||
|
||||
|
@@ -44,11 +44,11 @@
|
||||
|
||||
Logic helpers are invisible components that you can use in connection with
|
||||
controls, such as a \l {slider-control}{Slider} or \l {Check Box}.
|
||||
To use a logic helper, drag-and-drop it from \l Library >
|
||||
\uicontrol Components > \uicontrol {Qt Quick Studio Logic Helper} to
|
||||
\l Navigator. If you cannot find the logic helpers in \uicontrol Library,
|
||||
you need to add the \uicontrol {Qt Quick Studio Logic Helper} module to
|
||||
your project, as described in \l {Adding and Removing Modules}.
|
||||
To use a logic helper, drag-and-drop it from \uicontrol Components >
|
||||
\uicontrol {Qt Quick Studio Logic Helper} to \l Navigator. If you cannot
|
||||
find the logic helpers in \uicontrol {Components}, you need to add the
|
||||
\uicontrol {Qt Quick Studio Logic Helper} module to your project,
|
||||
as described in \l {Adding and Removing Modules}.
|
||||
|
||||
The following sections describe the different types of logic helpers in more
|
||||
detail.
|
||||
|
@@ -31,7 +31,7 @@
|
||||
\title 2D Effects
|
||||
|
||||
\QDS provides a set of effects that you can apply to components by
|
||||
dragging-and-dropping them from \l Library > \uicontrol Components
|
||||
dragging-and-dropping them from \uicontrol Components
|
||||
> \uicontrol {Qt Quick Studio Effects} to the component in \l Navigator.
|
||||
|
||||
\image studio-2d-effects.png "Effects tab in Library"
|
||||
|
70
doc/qtdesignstudio/src/views/qtquick-assets.qdoc
Normal file
@@ -0,0 +1,70 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2022 The Qt Company Ltd.
|
||||
** Contact: https://www.qt.io/licensing/
|
||||
**
|
||||
** This file is part of the Qt Creator 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.
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
/*!
|
||||
\page quick-assets.html
|
||||
\previouspage quick-components-view.html
|
||||
\nextpage qtquick-navigator.html
|
||||
|
||||
\title Assets
|
||||
|
||||
The \uicontrol Assets view lists available assets.
|
||||
|
||||
\uicontrol {Assets} displays the images and other files
|
||||
that you add to the project folder by dragging-and-dropping external asset
|
||||
files to \QDS or by selecting \inlineimage icons/plus.png
|
||||
. For more information about importing assets to \QDS, see
|
||||
\l {Importing 2D Assets} and \l {Importing 3D Assets}.
|
||||
|
||||
To add assets to your UI, drag-and-drop them from
|
||||
\uicontrol Assets to \l Navigator, \l {Form Editor}, or \l {3D Editor}.
|
||||
|
||||
To add multiple assets to your UI simultaneously, multiselect them first by
|
||||
holding \key Ctrl and clicking the asset files you wish to select.
|
||||
|
||||
\image qtquick-assets-tab.png "Assets view"
|
||||
|
||||
When you drag-and-drop assets from \uicontrol Assets to \l Navigator
|
||||
or \l {Form Editor}, component instances with a suitable type are
|
||||
automatically created for you. For example, instances of the
|
||||
\l{Images}{Image} component will be created for graphics files.
|
||||
|
||||
\section1 Context Menu Commands
|
||||
|
||||
\image qtquick-library-context-menu.png "Context menu commands in Assets"
|
||||
|
||||
To use the context menu commands in \uicontrol Assets, right-click the
|
||||
name of a folder and select one of the following commands:
|
||||
|
||||
\list
|
||||
\li \uicontrol {Expand All}: expands all folders.
|
||||
\li \uicontrol {Collapse All}: collapses all folders.
|
||||
\li \uicontrol {Rename Folder}: prompts you to enter a new name
|
||||
for the folder.
|
||||
\li \uicontrol {New Folder}: creates a new folder.
|
||||
\li \uicontrol {Delete Folder}: deletes the folder.
|
||||
\endlist
|
||||
|
||||
*/
|
@@ -24,23 +24,17 @@
|
||||
****************************************************************************/
|
||||
|
||||
/*!
|
||||
\page quick-library.html
|
||||
\if defined(qtdesignstudio)
|
||||
\page quick-components-view.html
|
||||
\previouspage studio-3d-editor.html
|
||||
\else
|
||||
\previouspage creator-using-qt-quick-designer.html
|
||||
\endif
|
||||
\nextpage qtquick-navigator.html
|
||||
\nextpage quick-assets.html
|
||||
|
||||
\title Library
|
||||
\title Components
|
||||
|
||||
The \uicontrol Library view lists the available components and assets.
|
||||
|
||||
\section1 Components
|
||||
The \uicontrol Component view lists the available components.
|
||||
|
||||
\image qtquick-components-tab.png "Library view Components tab"
|
||||
|
||||
\uicontrol Library > \uicontrol Components displays modules that have been
|
||||
\uicontrol Components displays modules that have been
|
||||
added to your project. In many modules the components have been further
|
||||
organized into different categories. The modules contain visual components,
|
||||
such as basic shapes, UI controls, and 3D components, and add functionality
|
||||
@@ -103,7 +97,7 @@
|
||||
alphabetical order. You can search for components and modules by entering
|
||||
search criteria in the \uicontrol Search field.
|
||||
|
||||
Select the module to add it to \uicontrol Library > \uicontrol Components.
|
||||
Select the module to add it to \uicontrol Components.
|
||||
|
||||
\image qtquick-components-tab-add.png "Select Modules to Add"
|
||||
|
||||
@@ -116,38 +110,17 @@
|
||||
final application package, it is recommended that you select
|
||||
\uicontrol {Remove Module} to remove the ones you don't use in the project.
|
||||
|
||||
\section1 Assets
|
||||
|
||||
\uicontrol Library > \uicontrol {Assets} displays the images and other files
|
||||
that you add to the project folder by dragging-and-dropping external asset
|
||||
files to \QDS or by selecting \inlineimage icons/plus.png
|
||||
. For more information about importing assets to \QDS, see
|
||||
\l {Importing 2D Assets} and \l {Importing 3D Assets}.
|
||||
|
||||
To add assets to your UI, drag-and-drop them from \uicontrol Library >
|
||||
\uicontrol Assets to \l Navigator, \l {Form Editor}, or \l {3D Editor}.
|
||||
|
||||
To add multiple assets to your UI simultaneously, multiselect them first by
|
||||
holding \key Ctrl and clicking the asset files you wish to select.
|
||||
|
||||
\image qtquick-assets-tab.png "Library view Assets tab"
|
||||
|
||||
When you drag-and-drop assets from \uicontrol Assets to \l Navigator
|
||||
or \l {Form Editor}, component instances with a suitable type are
|
||||
automatically created for you. For example, instances of the
|
||||
\l{Images}{Image} component will be created for graphics files.
|
||||
|
||||
\section1 Context Menu Commands
|
||||
|
||||
\image qtquick-library-context-menu.png "Context menu commands in Library"
|
||||
\image qtquick-library-context-menu-hide.png "Context menu command Hide Category"
|
||||
\image qtquick-components-context-menu.png "Context menu commands in Components"
|
||||
\image qtquick-components-context-menu-hide.png "Context menu command Hide Category"
|
||||
|
||||
To use the context menu commands in \uicontrol Library, right-click the
|
||||
To use the context menu commands in \uicontrol Components, right-click the
|
||||
name of a module or category and select one of the following commands:
|
||||
|
||||
\list
|
||||
\li \uicontrol {Remove Module}: removes the module and all of its
|
||||
components from \uicontrol Library > \uicontrol Components.
|
||||
components from \uicontrol Components.
|
||||
\li \uicontrol {Expand All}: expands all the modules.
|
||||
\li \uicontrol {Collapse All}: collapses all the modules.
|
||||
\li \uicontrol {Hide Category}: hides the category from the module.
|
||||
@@ -157,7 +130,7 @@
|
||||
categories in all of the modules.
|
||||
\endlist
|
||||
|
||||
\note The context menu commands for the \uicontrol Library categories do not
|
||||
function if you have entered something into the \uicontrol Search field.
|
||||
\note The context menu commands for the \uicontrol Components categories do
|
||||
not function if you have entered something into the \uicontrol Search field.
|
||||
Clear the \uicontrol Search field to resume using the context menu commands.
|
||||
*/
|
@@ -74,11 +74,15 @@
|
||||
applications and stored in one of the supported formats.
|
||||
\li \l{3D Editor}
|
||||
\row
|
||||
\li \l Library
|
||||
\li Contains the building blocks that you can use to design
|
||||
applications: preset components, your own components, and
|
||||
assets.
|
||||
\li \l{Components}
|
||||
\li \l Components
|
||||
\li Contains preset components and your own components, that you can use
|
||||
to design you application.
|
||||
\li \l{Using Components}
|
||||
\row
|
||||
\li \l Assets
|
||||
\li Contains assets such as images and fonts that you can use in your
|
||||
application.
|
||||
\li \l Assets
|
||||
\row
|
||||
\li \l Navigator
|
||||
\li Displays the composition of the current component file as
|
||||
@@ -288,7 +292,7 @@
|
||||
component in the list to open it in \uicontrol {Form Editor} and
|
||||
\uicontrol Navigator.
|
||||
\li
|
||||
\li \l{Components}
|
||||
\li \l{Using Components}
|
||||
\row
|
||||
\li Workspace
|
||||
\li Displays the currently selected workspace. To switch to another
|
||||
|
@@ -25,7 +25,7 @@
|
||||
|
||||
/*!
|
||||
\page qtquick-navigator.html
|
||||
\previouspage quick-library.html
|
||||
\previouspage quick-assets.html
|
||||
\nextpage qtquick-properties-view.html
|
||||
|
||||
\title Navigator
|
||||
|
@@ -412,7 +412,7 @@
|
||||
When layering is enabled, you can use the component directly as a texture,
|
||||
in combination with the component you select in the \uicontrol Effect field.
|
||||
Typically, this component should be a shader effect with a source texture
|
||||
specified. You can use the effects in \l Library > \uicontrol Components >
|
||||
specified. You can use the effects in \uicontrol Components >
|
||||
\uicontrol {Qt Quick Studio Effects} that are based on the components in the
|
||||
\l {Qt Graphical Effects} module.
|
||||
|
||||
|
@@ -49,7 +49,7 @@
|
||||
place or to change the button background or text color. When you use
|
||||
instances of the button in other components, you can define states to
|
||||
create different screens by hiding or showing button component instances.
|
||||
The preset \l Button control in \l Library > \uicontrol Components
|
||||
The preset \l Button control in \uicontrol Components
|
||||
> \uicontrol {Qt Quick Controls} > \uicontrol Controls has predefined
|
||||
\e normal and \e down states.
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
|
||||
\if defined(qtdesignstudio)
|
||||
If you are not familiar with writing expressions, you can use preset
|
||||
\l{Logic Helpers}{logic helpers} from \l Library > \uicontrol Components
|
||||
\l{Logic Helpers}{logic helpers} from \uicontrol Components
|
||||
> \uicontrol {Qt Quick Studio Logic Helper}.
|
||||
\endif
|
||||
|
||||
|