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