Merge remote-tracking branch 'origin/4.12'
Conflicts: src/plugins/mcusupport/mcusupportsdk.cpp Change-Id: I1583fa81adc0218ad4657baa347c08e9e29f88e6
@@ -17,6 +17,9 @@ macro.note = "\\b{Note:}"
|
||||
macro.oslash.HTML = "ø"
|
||||
macro.ouml.HTML = "ö"
|
||||
macro.QA = "Qt Assistant"
|
||||
macro.QB = "Qt Bridge"
|
||||
macro.QBPS = "Qt Bridge for Adobe Photoshop"
|
||||
macro.QBSK = "Qt Bridge for Sketch"
|
||||
macro.QC = "$IDE_DISPLAY_NAME"
|
||||
macro.QCE = "$IDE_DISPLAY_NAME Enterprise"
|
||||
macro.QD = "Qt Designer"
|
||||
|
||||
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 4.1 KiB |
BIN
doc/qtcreator/images/qmldesigner-editing-components.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 4.7 KiB |
BIN
doc/qtcreator/images/qmldesigner-properties-view.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 6.2 KiB |
@@ -102,18 +102,18 @@
|
||||
\list
|
||||
\li Qt Quick Application - Empty
|
||||
|
||||
Create an empty Qt Quick application that uses Qt Quick 2 types.
|
||||
Create an empty \l{Qt Quick} application that uses Qt Quick 2
|
||||
types.
|
||||
|
||||
You can build the application and deploy it to desktop,
|
||||
embedded, and mobile target platforms.
|
||||
|
||||
\li Qt Quick Application - Scroll, Stack, or Swipe
|
||||
|
||||
Create a Qt Quick application that uses
|
||||
\l{http://doc.qt.io/qt-5/qtquickcontrols2-index.html}
|
||||
{Qt Quick Controls} to implement a scrollable list (requires
|
||||
Qt 5.9 or later) or a set of pages with a stack-based or
|
||||
swipe-based navigation model (requires Qt 5.7 or later).
|
||||
Create a Qt Quick application that uses \l{Qt Quick Controls} to
|
||||
implement a scrollable list (requires Qt 5.9 or later) or a set
|
||||
of pages with a stack-based or swipe-based navigation model
|
||||
(requires Qt 5.7 or later).
|
||||
\endlist
|
||||
|
||||
\li Application (Qt)
|
||||
@@ -150,8 +150,8 @@
|
||||
\list
|
||||
\li MCU Support Application
|
||||
|
||||
Creates an application that uses a subset of QML and
|
||||
Qt Quick Controls (as supported by Qt for MCUs) that
|
||||
Creates an application that uses a subset of Qt QML and
|
||||
Qt Quick Controls types (as supported by Qt for MCUs) that
|
||||
you can deploy, run, and debug on MCU boards. For more
|
||||
information, see \l {Connecting MCUs}.
|
||||
\endlist
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
\endlist
|
||||
\li \l{Importing 3D Assets}
|
||||
\li \l{Editing 3D Assets in Design Mode}
|
||||
\li \l{Working in the 3D Editor}
|
||||
\li \l{Working in 3D Editor}
|
||||
\li \l{Adding 3D Views}
|
||||
\li \l{Using 3D Components}
|
||||
\list
|
||||
|
||||
@@ -26,20 +26,23 @@
|
||||
/*!
|
||||
//! [scxml state machines]
|
||||
|
||||
\section2 Using SCXML State Machines
|
||||
\section1 Using SCXML State Machines
|
||||
|
||||
To use QML together with an SCXML state machine, add states and bind them to
|
||||
the state machine in the \uicontrol Backends tab in the Design mode, as
|
||||
To use QML together with an SCXML state machine, add states and
|
||||
bind them to the state machine in the \uicontrol Backends tab
|
||||
of the \uicontrol Connections view, as
|
||||
described in \l {Managing C++ Backend Objects}.
|
||||
|
||||
In the \uicontrol States view, you can edit the \c when condition of states
|
||||
In the \uicontrol States view, you can select \uicontrol Actions >
|
||||
\uicontrol {Set when Condition} to edit the \c when condition of states
|
||||
to map QML states to the states of the SCXML state machine. For an example,
|
||||
see \l {Qt SCXML Traffic Light QML Example (Dynamic)}.
|
||||
|
||||
\image qmldesigner-states-when-condition.png
|
||||
|
||||
If you add animation to the states, you can run the application to test the
|
||||
animation.
|
||||
If you add animation to the states, you can \l{Previewing}{preview}
|
||||
or \l{Running on Multiple Platforms}{run} the application to test
|
||||
the animation.
|
||||
|
||||
//! [scxml state machines]
|
||||
*/
|
||||
|
||||
@@ -51,14 +51,15 @@
|
||||
|
||||
\image qmldesigner-qml-components.png "QML Components"
|
||||
|
||||
The \uicontrol {QML Types} tab displays the QML types grouped by category:
|
||||
your own QML components, basic types, layouts, positioner types, and views.
|
||||
The \uicontrol {QML Types} tab displays the QML types grouped by category,
|
||||
such as your own QML components, basic types, layouts, positioner types, and
|
||||
views.
|
||||
|
||||
Sets of UI components with the look and feel of a particular mobile device
|
||||
platform have been defined for Qt Quick 1. Since Qt 5.1, ready-made Qt
|
||||
Quick Controls, Dialogs, and Layouts are available for creating user
|
||||
interfaces using Qt Quick 2. The components and controls are based on
|
||||
standard QML types. To view the components and controls in the
|
||||
standard QML types. To view the components and controls in
|
||||
\uicontrol {Library}, import the component sets in \uicontrol {QML Imports}.
|
||||
|
||||
The \uicontrol {Qt Quick Application} wizards for a particular platform add
|
||||
@@ -70,21 +71,23 @@
|
||||
|
||||
\section1 Adding Components to Designs
|
||||
|
||||
\image studio-design-mode.png "Design mode"
|
||||
\image qmldesigner-editing-components.png "Editing QML components in Design mode"
|
||||
|
||||
\list 1
|
||||
\li Drag and drop components from the \uicontrol Library (2) to the
|
||||
\uicontrol Navigator (3) or \uicontrol {Form Editor} (1).
|
||||
\li Select components in the \uicontrol Navigator to edit their
|
||||
properties in the \uicontrol Properties view (4). For more
|
||||
information, see \l {Specifying Item Properties}.
|
||||
\li Drag and drop components from \uicontrol Library (1) to
|
||||
\uicontrol Navigator (2) or \uicontrol {Form Editor} (3).
|
||||
\li Select components in \uicontrol Navigator to edit their
|
||||
properties in \uicontrol Properties.
|
||||
\image qmldesigner-properties-view.png "Properties view"
|
||||
For more information, see \l {Specifying Item Properties}.
|
||||
\li Connect components to signals or create bindings between components
|
||||
in the \uicontrol Connections view (5). For more information, see
|
||||
\l{Adding Connections}.
|
||||
in the \uicontrol Connections view.
|
||||
\image qmldesigner-bindings.png "Connections view Bindings tab"
|
||||
For more information, see \l{Adding Connections}.
|
||||
\li Add states to apply sets of changes to the properties of one or
|
||||
several components in the \uicontrol States view (6). For more
|
||||
information, see \l{Adding States}.
|
||||
\li Animate component properties in the \uicontrol Timeline view (7).
|
||||
several components in the \uicontrol States view.
|
||||
For more information, see \l{Adding States}.
|
||||
\li Animate component properties in the \uicontrol Timeline view.
|
||||
For more information, see \l{Creating Animations}.
|
||||
\endlist
|
||||
|
||||
@@ -136,12 +139,12 @@
|
||||
When you add a \l{GridView}{Grid View}, \l{ListView}{List View}, or
|
||||
\l{PathView}{Path View}, the ListModel and the delegate component that
|
||||
creates an instance for each item in the model are added automatically.
|
||||
You can edit item properties in the \uicontrol Properties view or
|
||||
in the \uicontrol {Text Editor}. You can also replace the default model and
|
||||
delegate with other, more complex models and delegates in the
|
||||
You can edit item properties in \uicontrol Properties or in
|
||||
\uicontrol {Text Editor}. You can also replace the default model and
|
||||
delegate with other, more complex models and delegates in
|
||||
\uicontrol {Text Editor}. \l{ItemDelegate}{Item Delegate} and
|
||||
\l{SwipeDelegate}{Swipe Delegate} delegate components are also available
|
||||
in the \uicontrol Library.
|
||||
in \uicontrol Library.
|
||||
|
||||
\section1 Positioning Items in UIs
|
||||
|
||||
@@ -179,7 +182,7 @@
|
||||
|
||||
\image qmldesigner-set-expression.png "Type properties context menu"
|
||||
|
||||
In the \uicontrol {Binding Editor}, select an item and a property from
|
||||
In \uicontrol {Binding Editor}, select an item and a property from
|
||||
lists of available items and their properties.
|
||||
|
||||
\image qmldesigner-binding-editor.png "Binding Editor"
|
||||
@@ -192,7 +195,7 @@
|
||||
|
||||
When a binding is set, the \uicontrol Actions menu icon changes to
|
||||
\inlineimage icons/action-icon-binding
|
||||
. To remove bindings, select \uicontrol Reset in the \uicontrol Actions menu.
|
||||
. To remove bindings, select \uicontrol Actions > \uicontrol Reset.
|
||||
|
||||
You can set bindings also in the \uicontrol Connections view. For more
|
||||
information, see \l {Adding Bindings Between Properties}.
|
||||
@@ -227,7 +230,7 @@
|
||||
(\uicontrol {Reset Anchors}) button to reset the anchors to their saved
|
||||
state.
|
||||
|
||||
You can specify the baseline anchor in the \uicontrol {Text Editor} in the
|
||||
You can specify the baseline anchor in \uicontrol {Text Editor} in the
|
||||
Design mode.
|
||||
|
||||
For performance reasons, you can only anchor an item to its siblings
|
||||
@@ -340,8 +343,9 @@
|
||||
\endlist
|
||||
|
||||
To position several items in a \uicontrol Column, \uicontrol Row,
|
||||
\uicontrol Grid, or \uicontrol Flow, select the items on the canvas, and
|
||||
then select \uicontrol Position in the context menu.
|
||||
\uicontrol Grid, or \uicontrol Flow, select the items in
|
||||
\uicontrol {Form Editor}, and then select \uicontrol Position in
|
||||
the context menu.
|
||||
|
||||
\section2 Using Layouts
|
||||
|
||||
@@ -353,8 +357,6 @@
|
||||
You can use the following layout types to arrange items in UIs:
|
||||
|
||||
\list
|
||||
\li \l{Layout} provides attached properties for items pushed onto a
|
||||
column, row, or grid layout.
|
||||
\li \l{ColumnLayout}{Column Layout} provides a grid layout with only
|
||||
one column.
|
||||
\li \l{RowLayout}{Row Layout} provides a grid layout with only one row.
|
||||
@@ -365,7 +367,7 @@
|
||||
\endlist
|
||||
|
||||
To lay out several items in a column, row, grid, or
|
||||
\uicontrol {Stack Layout}, select the items in the \uicontrol {Form Editor},
|
||||
\uicontrol {Stack Layout}, select the items in \uicontrol {Form Editor},
|
||||
and then select \uicontrol Layout in the context menu.
|
||||
|
||||
You can also click the \inlineimage column.png
|
||||
@@ -374,9 +376,9 @@
|
||||
(\uicontrol {Grid Layout}) toolbar buttons to apply
|
||||
layouts to the selected items.
|
||||
|
||||
To make an item within a layout as wide as possible while respecting
|
||||
the given constraints, select the item on the canvas and then select
|
||||
\uicontrol Layout > \uicontrol {Fill Width} in the context menu. To
|
||||
To make an item within a layout as wide as possible while respecting the
|
||||
given constraints, select the item in \uicontrol {Form Editor}, and then
|
||||
select \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To
|
||||
make the item as high as possible, select \uicontrol {Fill Height}.
|
||||
|
||||
\section2 Editing Stack Layouts
|
||||
@@ -385,7 +387,7 @@
|
||||
|
||||
To add items to a \uicontrol {Stack Layout}, select the
|
||||
\inlineimage plus.png
|
||||
button next to the type name in the \uicontrol {Form Editor}. To move
|
||||
button next to the type name in \uicontrol {Form Editor}. To move
|
||||
between items, select the \inlineimage prev.png
|
||||
(\uicontrol Previous) and \inlineimage next.png
|
||||
(\uicontrol Next) buttons.
|
||||
@@ -550,22 +552,22 @@
|
||||
\endif
|
||||
\uicontrol Choose to create a new .qml file.
|
||||
|
||||
\note Components are listed in the \uicontrol {QML Components} section of
|
||||
the \uicontrol Library only if the filename begins with a capital
|
||||
letter.
|
||||
\note Components are listed in the \uicontrol {My QML Components}
|
||||
tab in the \uicontrol Library view only if the filename begins with
|
||||
a capital letter.
|
||||
|
||||
\li Click \uicontrol Design to open the .qml file in the Design mode.
|
||||
|
||||
\li Drag and drop a QML type from the \uicontrol Library to the
|
||||
\li Drag and drop a QML type from \uicontrol Library to
|
||||
\uicontrol Navigator or \uicontrol {Form Editor}.
|
||||
|
||||
\li Edit its properties in the \uicontrol Properties view.
|
||||
\li Edit its properties in \uicontrol Properties.
|
||||
|
||||
The available properties depend on the QML type.
|
||||
|
||||
\endlist
|
||||
|
||||
The following sections contain more information about how to use the
|
||||
The following sections contain more information about how to use
|
||||
\uicontrol {Form Editor} to edit 2D content, as well as examples of
|
||||
how to create some common components using basic QML types:
|
||||
|
||||
@@ -582,10 +584,11 @@
|
||||
\section1 Moving Within Components
|
||||
|
||||
Components can consist of several other components. To view the component
|
||||
hierarchy as a bread crumb path when you edit a component on the canvas,
|
||||
select \uicontrol {Go into Component} or press \key F2. Click the component
|
||||
names in the path to navigate to them. You can easily navigate back to the
|
||||
top level when you are done editing the component.
|
||||
hierarchy as a bread crumb path when you edit a component in
|
||||
\uicontrol {Form Editor}, select \uicontrol {Go into Component} or press
|
||||
\key F2. Click the component names in the path to navigate to them. You
|
||||
can easily navigate back to the top level when you are done editing the
|
||||
component.
|
||||
|
||||
\image qmldesigner-breadcrumbs.png "Go into Component command"
|
||||
*/
|
||||
|
||||
@@ -38,44 +38,44 @@
|
||||
|
||||
You can select items in the \uicontrol Navigator to edit their properties
|
||||
in the \uicontrol Properties view. Items can access the properties of their
|
||||
parent item. To select items on the canvas, right-click an item, and select
|
||||
another type in the context menu.
|
||||
parent item. To select items in the \uicontrol {Form Editor}, right-click
|
||||
an item, and select another type in the context menu.
|
||||
|
||||
Typically, child items are located within the parent item on the canvas.
|
||||
However, they do not necessarily have to fit inside the parent item. For
|
||||
example, you might want to make a mouse area larger than the rectangle
|
||||
or image beneath it (1).
|
||||
Typically, child items are located within the parent item in the
|
||||
\uicontrol {Form Editor}. However, they do not necessarily have to
|
||||
fit inside the parent item. For example, you might want to make a
|
||||
mouse area larger than the rectangle or image beneath it (1).
|
||||
|
||||
\image qmldesigner-element-size.png "Mouse area for a button"
|
||||
|
||||
When you copy an item, all its child items are also copied. When
|
||||
you remove an item, the child items are also removed.
|
||||
|
||||
To show and hide items on the canvas when focusing on specific parts of the
|
||||
application, click \inlineimage eye_open.png
|
||||
. To change the visibility of an item in the application code, select the
|
||||
Select context menu commands to reset item size, position, or anchors,
|
||||
and to edit items colors or the annotations attached to it. To change
|
||||
the source of an Image type, select \uicontrol {Change Source URL} in
|
||||
the context menu.
|
||||
|
||||
\section1 Showing and Hiding Items
|
||||
|
||||
To show and hide items in the \uicontrol {Form Editor} when focusing on
|
||||
specific parts of the application, click \inlineimage eye_open.png
|
||||
in the \uicontrol Navigator.
|
||||
|
||||
To change the visibility of an item in the application code, select the
|
||||
\uicontrol Visibility check box in the \uicontrol Properties view or select
|
||||
\uicontrol Edit > \uicontrol Visibility in the context menu.
|
||||
|
||||
You can also set the \uicontrol Opacity field to 0 to hide items that you
|
||||
want to apply animation to.
|
||||
You can also set the \uicontrol Opacity field to 0 in \uicontrol Properties
|
||||
to hide items in the UI that you want to apply animation to.
|
||||
|
||||
As all properties, visibility and opacity are inherited from the parent
|
||||
item. To hide or show child items, edit the properties of the parent item.
|
||||
|
||||
To hide invisible items in the navigator, click \inlineimage filtericon.png
|
||||
To hide invisible items in the \uicontrol Navigator, click
|
||||
\inlineimage filtericon.png
|
||||
(\uicontrol {Filter Tree}) and select \uicontrol {Show only visible items}.
|
||||
|
||||
To reset item size, position, or anchors, select context menu commands. To
|
||||
change the source of an Image type, select \uicontrol {Change Source URL} in
|
||||
the context menu.
|
||||
|
||||
To view lists of files or projects, instead, select \uicontrol {File System},
|
||||
\uicontrol {Open Documents}, or \uicontrol Projects in the menu. To view
|
||||
several types of content at a time, split the sidebars by clicking the
|
||||
\inlineimage splitbutton_horizontal.png
|
||||
(\uicontrol Split) button.
|
||||
|
||||
\section1 Setting the Stacking Order
|
||||
|
||||
The \c z property of an \l Item determines its position in relation to its
|
||||
@@ -85,7 +85,7 @@
|
||||
from the last item up.
|
||||
|
||||
To move an item to the front or back of all its siblings, right-click it in
|
||||
the navigator or the \uicontrol {Form Editor} and select
|
||||
the \uicontrol Navigator or \uicontrol {Form Editor} and select
|
||||
\uicontrol {Stack (z)} > \uicontrol {To Front} or \uicontrol {To Back}.
|
||||
To raise or lower the stack value of an item, select \uicontrol Raise
|
||||
or \uicontrol Lower. To remove the \c z property, select
|
||||
@@ -96,13 +96,14 @@
|
||||
|
||||
\section1 Switching Parent Items
|
||||
|
||||
When you drag and drop instances of QML types to the canvas, the new item is
|
||||
added as a child of the item beneath it. When you move items on the canvas,
|
||||
it is not possible to determine whether you want to adjust their position or
|
||||
attach them to a new parent item. Therefore, the parent item is not
|
||||
automatically changed. To change the parent of the item, press down the
|
||||
\key Shift key before you drag and drop the item into a new position. The
|
||||
topmost item under the cursor becomes the new parent of the item.
|
||||
When you drag and drop instances of QML types to the
|
||||
\uicontrol {Form Editor}, the new item is added as a child of the item
|
||||
beneath it. When you move the items, it is not possible to determine whether
|
||||
you want to adjust their position or attach them to a new parent item.
|
||||
Therefore, the parent item is not automatically changed. To change the
|
||||
parent of the item, press down the \key Shift key before you drag and drop
|
||||
the item into a new position. The topmost item under the cursor becomes the
|
||||
new parent of the item.
|
||||
|
||||
You can change the parent of an item also in the \uicontrol Navigator.
|
||||
Drag and drop the item to another position in the tree or use the arrow
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
The bottom part of the view displays properties that are specific to each
|
||||
QML type. For example, the following image displays the properties you can
|
||||
set for \uicontrol Rectangle (1) and \uicontrol Text (2) items.
|
||||
set for \uicontrol Rectangle and \uicontrol Text items.
|
||||
|
||||
\image qmldesigner-element-properties.png
|
||||
|
||||
|
||||
@@ -55,57 +55,60 @@
|
||||
\list
|
||||
\li Show some UI items and hide others.
|
||||
\li Present different available actions to the user.
|
||||
\li Start, stop or pause animations.
|
||||
\li Start, stop, or pause animations.
|
||||
\li Execute some script required in the new state.
|
||||
\li Change a property value for a particular item.
|
||||
\li Show a different view.
|
||||
\endlist
|
||||
|
||||
\section1 Creating States
|
||||
|
||||
The \uicontrol States view displays the different \l{State}{states}
|
||||
of the component in the Design mode. The \uicontrol States view is
|
||||
collapsed by default to save space. Select \uicontrol Expand in
|
||||
the context menu to view the whole view.
|
||||
of a UI, beginning with a \e {base state}.
|
||||
|
||||
\image qmldesigner-transitions.png "States view"
|
||||
|
||||
To add states, click the \inlineimage plus.png
|
||||
button. Then modify the new state in the editor. For example, to change the
|
||||
appearance of a button, you can hide the button image and show another image
|
||||
in its place. Or, to add movement to the view, you can change the position
|
||||
of an object on the canvas and then add animation to the change between the
|
||||
states.
|
||||
button. Click the new state to switch to it in \uicontrol {Form Editor},
|
||||
and then modify the properties of components in \uicontrol Properties.
|
||||
|
||||
To determine when the state should be applied, select
|
||||
\uicontrol {Set when Condition} in the menu and specify a
|
||||
\l [QtQuick]{State::when}{when} property for the state.
|
||||
Set the value of the property to an expression that
|
||||
evaluates to \c true when you want the state to be applied.
|
||||
In the binding editor, select the component and property to
|
||||
create the expression. For example, to change the state when
|
||||
a button is pressed, you could select a button component and
|
||||
its pressed property.
|
||||
|
||||
\image qtquick-states-binding-editor.png "Binding editor in States view"
|
||||
|
||||
You can preview the states in the \uicontrol States view and click them to
|
||||
switch between states on the canvas.
|
||||
|
||||
\section1 Using States
|
||||
|
||||
QML states typically describe user interface configurations, such as the UI
|
||||
controls, their properties and behavior and the available actions. For
|
||||
example, you can use states to create two views.
|
||||
|
||||
To add states, click the empty slot in the \uicontrol States view.
|
||||
Then modify the new state in the \uicontrol {Form Editor} or the
|
||||
\uicontrol Properties view.
|
||||
|
||||
\image qmldesigner-states.png "States view"
|
||||
For example, to change the appearance of a button, you can hide the button
|
||||
image and show another image in its place. Or, to add movement to the view,
|
||||
you can change the position of an object in \uicontrol {Form Editor}
|
||||
and then add animation to the change between the states.
|
||||
|
||||
The properties that you change in a state are highlighted with blue color.
|
||||
In the \uicontrol {Text Editor}, you can see the changes recorded as changes
|
||||
In \uicontrol {Text Editor}, you can see the changes recorded as changes
|
||||
to the base state.
|
||||
|
||||
\image qmldesigner-states.png "States and Properties views"
|
||||
|
||||
\section1 Setting the Default State
|
||||
|
||||
To determine the startup state of the application,
|
||||
select \inlineimage icons/action-icon.png
|
||||
to open the \uicontrol Actions menu, and then select
|
||||
\uicontrol {Set as Default}.
|
||||
|
||||
To reset the state later, select \uicontrol Actions >
|
||||
\uicontrol {Reset Default}.
|
||||
|
||||
\section1 Applying States
|
||||
|
||||
To determine when a state should be applied, select \uicontrol Actions >
|
||||
\uicontrol {Set when Condition}. In \uicontrol {Binding Editor}, specify
|
||||
a \l [QtQuick]{State::when}{when} property for the state. Set the value of
|
||||
the property to an expression that evaluates to \c true when you want the
|
||||
state to be applied.
|
||||
|
||||
In \uicontrol {Binding Editor}, select the component and property to
|
||||
create the expression. For example, to change the state when a button is
|
||||
pressed, you could select a button component and its pressed property.
|
||||
|
||||
\image qtquick-states-binding-editor.png "Binding Editor in States view"
|
||||
|
||||
\section1 Using States
|
||||
|
||||
To keep the QML code clean, you should create a base state that contains all
|
||||
the types you will need in the application. You can then create states,
|
||||
in which you hide and show a set of items and modify their properties.
|
||||
@@ -124,30 +127,24 @@
|
||||
|
||||
To create views for an application by using states:
|
||||
|
||||
\image qmldesigner-screen-design.png "Designing views"
|
||||
|
||||
\list 1
|
||||
\li In the base state, add all items you will need in the application
|
||||
(1). While you work on one view, you can click the
|
||||
\inlineimage eye_open.png
|
||||
icon to hide items on the canvas that are not part of a view.
|
||||
\li In the \uicontrol States view, click the empty slot to create a
|
||||
\li In \uicontrol States, click the empty slot to create a
|
||||
new state and give it a name. For example, \c Normal.
|
||||
\li In the \uicontrol Properties view (2), deselect the
|
||||
\uicontrol Visibility check box or set \uicontrol Opacity to 0
|
||||
for each item that is not needed in this view. If you specify
|
||||
the setting for the parent item, all child items inherit it and
|
||||
are also hidden.
|
||||
\image qmldesigner-screen-design.png "Designing views"
|
||||
\li In \uicontrol Properties (2), deselect the \uicontrol Visibility
|
||||
check box or set \uicontrol Opacity to 0 for each item that is not
|
||||
needed in this view. If you specify the setting for the parent item,
|
||||
all child items inherit it and are also hidden.
|
||||
\li Create additional states for each view and set the visibility
|
||||
or opacity of the items in the view.
|
||||
\li To determine which view opens when the application starts, use the
|
||||
\uicontrol {Text Editor} to set the state of the root item of the
|
||||
.qml file, as specified by the following code snippet:
|
||||
\qml
|
||||
Item {
|
||||
state: "Normal"
|
||||
}
|
||||
\endqml
|
||||
\endlist
|
||||
\li To determine which state is applied when the application starts,
|
||||
select \uicontrol Actions > \uicontrol {Set as Default}.
|
||||
\endlist
|
||||
|
||||
\if defined(qtcreator)
|
||||
\include qtquick-states-scxml.qdocinc scxml state machines
|
||||
@@ -165,7 +162,7 @@
|
||||
the type of behavior that is required.
|
||||
|
||||
You can drag and drop the following QML types from \uicontrol Library
|
||||
> \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to the
|
||||
> \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to
|
||||
\uicontrol Navigator or \uicontrol {Form Editor}:
|
||||
|
||||
\list
|
||||
@@ -181,10 +178,10 @@
|
||||
sequential animation to create a step where nothing happens, for
|
||||
a specified duration.
|
||||
\li \l [QML] {PropertyAction}{Property Action} immediately changes
|
||||
a propertyvalue during an animation, without animating the property
|
||||
change.
|
||||
a property value during an animation, without animating the
|
||||
property change.
|
||||
\li \l [QML] {PropertyAnimation}{Property Animation} animates
|
||||
changes in thevalue of a property.
|
||||
changes in the value of a property.
|
||||
\li \l [QML] {ScriptAction}{Script Action} defines scripts to be
|
||||
run during an animation.
|
||||
\li \l [QML] {SequentialAnimation}{Sequential Animation} enables
|
||||
|
||||
@@ -110,10 +110,6 @@ qhp.qtdesignstudio.subprojects.manual.type = manual
|
||||
# Doxygen compatibility commands
|
||||
macro.see = "\\sa"
|
||||
macro.function = "\\fn"
|
||||
macro.QB = "Qt Bridge"
|
||||
macro.QBPS = "Qt Bridge for Adobe Photoshop"
|
||||
macro.QBSK = "Qt Bridge for Sketch"
|
||||
macro.QDS = "Qt Design Studio"
|
||||
|
||||
navigation.landingpage = "$IDE_DISPLAY_NAME Manual"
|
||||
buildversion = "$IDE_DISPLAY_NAME Manual $QTC_VERSION"
|
||||
|
||||
@@ -32,7 +32,6 @@
|
||||
\brief Illustrates how to use the timeline and states to animate UI
|
||||
components.
|
||||
\previouspage {Log In UI - Part 3}
|
||||
\nextpage {Log In UI - Part 5}
|
||||
|
||||
\image loginui4.gif "Log In UI"
|
||||
|
||||
|
||||
BIN
doc/qtdesignstudio/images/qt-sketch-bridge-library.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
doc/qtdesignstudio/images/studio-3d-editor-axis-helper.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 15 KiB |
@@ -220,4 +220,24 @@
|
||||
\uicontrol {Export format options} field. You can remove metadata
|
||||
from PNG files, export assets as progressive JPG or compact SVG,
|
||||
and include SVG namespaces in SVG files.
|
||||
|
||||
|
||||
\section1 Exporting Library Symbols
|
||||
|
||||
\QBSK can handle symbols used from a local library. Before you use \QBSK to export a document
|
||||
that contains remote symbols, you must annotate the Sketch document of the local library for
|
||||
QML export.
|
||||
|
||||
For more information about Sketch libraries, see Sketch documentation.
|
||||
|
||||
You can either export the complete library with the document or unlink the symbols.
|
||||
Unlinking the symbols exports the symbols as if the symbols were part of the document as
|
||||
Group layers.
|
||||
Exporting the complete library exports all the layers of the library irrespective of their usage
|
||||
in the document.
|
||||
|
||||
To export a library, select \uicontrol Export. \QBSK asks you whether you want to export the
|
||||
complete library or to unlink the symbols.
|
||||
|
||||
\image qt-sketch-bridge-library.png
|
||||
*/
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
independently of each other.
|
||||
\li \l Flipable provides a surface that can be flipped.
|
||||
\li \l Group provides an item with the size property.
|
||||
\li \l Iso adds a container for an ISO 7000 icon.
|
||||
\li \l {Iso}{Iso Icon} adds a container for an ISO 7000 icon.
|
||||
\li \l Pie adds a pie slice or a pie with a slice missing from it.
|
||||
\li \l Rectangle adds a rectangle with corners that you can shape
|
||||
independently of each other.
|
||||
@@ -60,7 +60,8 @@
|
||||
|
||||
You can use the project wizard to create a starting point for a custom
|
||||
\l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane},
|
||||
\l [QtQuickControls2] {StackView}{Stack View}, or
|
||||
\l [QtQuickControls2] {StackLayout}{Stacked Layout},
|
||||
\l [QtQuickControls2] {SwipeView}{Swipe View}, or
|
||||
\l [QtQuickControls2] {Switch}.
|
||||
|
||||
\list 1
|
||||
@@ -68,8 +69,8 @@
|
||||
\uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls}.
|
||||
\li Select the control to create, and then select \uicontrol Choose.
|
||||
|
||||
\note Components are listed in the \uicontrol {QML Components}
|
||||
section of the \uicontrol Library only if the filename begins
|
||||
\note Components are listed in the \uicontrol {My QML Components}
|
||||
tab of the \uicontrol Library only if the filename begins
|
||||
with a capital letter.
|
||||
\li Edit component properties in the \uicontrol Properties view.
|
||||
|
||||
|
||||
@@ -46,8 +46,7 @@
|
||||
|
||||
You can use wizards to create projects for the desktop or embedded
|
||||
Linux and Android devices. In addition, you can add individual QML
|
||||
files, components, font loaders, and JavaScript files to your
|
||||
projects.
|
||||
files, components, and JavaScript files to your projects.
|
||||
|
||||
\li \l{Using Git}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** Copyright (C) 2019 The Qt Company Ltd.
|
||||
** Copyright (C) 2020 The Qt Company Ltd.
|
||||
** Contact: https://www.qt.io/licensing/
|
||||
**
|
||||
** This file is part of the Qt Design Studio documentation.
|
||||
@@ -63,15 +63,22 @@
|
||||
or create them from scratch using the following wizards:
|
||||
|
||||
\list
|
||||
\li \uicontrol General generates projects that are suitable for all
|
||||
target platforms.
|
||||
\omit
|
||||
\li \uicontrol Embedded generates projects that work well on embedded
|
||||
Linux devices.
|
||||
\endomit
|
||||
\li \uicontrol Mobile generates projects that work well on mobile
|
||||
devices.
|
||||
\li \uicontrol Desktop generates projects that work well on the desktop.
|
||||
\li \uicontrol {MCU Support Application} creates an application that
|
||||
uses a subset of \l{Qt QML} and \l{Qt Quick Controls} types (as
|
||||
supported by Qt for MCUs) that you can deploy, run, and debug on
|
||||
MCU boards.
|
||||
\li \uicontrol {Qt Quick Application - Empty} creates a Qt Quick UI
|
||||
project that uses \l{Qt Quick} types and can be run on all target
|
||||
platforms.
|
||||
\li \uicontrol {Qt Quick 3D Application} creates a Qt Quick UI project
|
||||
that uses Qt Quick and \l{Qt Quick 3D} types.
|
||||
\li \uicontrol {Qt Quick Application - Scroll} and
|
||||
\uicontrol {Qt Quick Application - Stack} create a Qt Quick
|
||||
application that uses Qt Quick Controls to implement a scrollable
|
||||
list or a set of pages with a stack-based navigation model.
|
||||
\li \uicontrol {Qt Quick Application - Launcher} creates a Qt Quick UI
|
||||
project that uses Qt Quick types and defines a QML laucher
|
||||
application.
|
||||
\endlist
|
||||
|
||||
\section1 Using Project Wizards
|
||||
@@ -119,10 +126,12 @@
|
||||
\list
|
||||
\li \uicontrol {Qt Quick Files}
|
||||
\list
|
||||
\li \uicontrol {Flow Item} and \uicontrol {Flow View} generate
|
||||
types that you can use to design the application flow.
|
||||
\li \uicontrol {Qt Quick File} generates a QML type with one
|
||||
of the following types as the root item: \l Item,
|
||||
\l Rectangle, \l Image, \l BorderImage, \l Flickable,
|
||||
\l Row, \l Column, \l Flow, or \li Grid.
|
||||
\l Row, \l Column, \l Flow, or \l Grid.
|
||||
\li \uicontrol {Qt Quick UI File} generates a UI form with one
|
||||
of the above types as the root item.
|
||||
\li \uicontrol {Qt Quick Views} generates a \l GridView or a
|
||||
@@ -141,17 +150,12 @@
|
||||
\li \l [Qt Quick Controls 2] {SwipeView} enables users to
|
||||
navigate pages by swiping sideways.
|
||||
\endlist
|
||||
\li \uicontrol {QML Files}
|
||||
\list
|
||||
\li \l FontLoader imports custom fonts to the project for
|
||||
deployment to devices. For more information, see
|
||||
\l {Using Custom Fonts}.
|
||||
\li \l ListModel adds a list model to the project.
|
||||
\endlist
|
||||
\li \uicontrol ListModel adds a \l{ListModel}{list model} to the
|
||||
project.
|
||||
\li \uicontrol {JavaScript File} generates files that you can use to
|
||||
write the application logic. This is useful for testing the
|
||||
application before the developers implement the application logic
|
||||
in C++, for example. For more information, see
|
||||
\l {Simulating Application Logic}.
|
||||
\endlist
|
||||
\endlist
|
||||
*/
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
\li \l{Editing 3D Scenes}
|
||||
\list
|
||||
\li \l{Editing 3D Assets in Design Mode}
|
||||
\li \l{Working in the 3D Editor}
|
||||
\li \l{Working in 3D Editor}
|
||||
\li \l{Adding 3D Views}
|
||||
\li \l{Using 3D Components}
|
||||
\list
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
\li \b {\l{Editing 3D Scenes}}
|
||||
\list
|
||||
\li \l{Editing 3D Assets in Design Mode}
|
||||
\li \l{Working in the 3D Editor}
|
||||
\li \l{Working in 3D Editor}
|
||||
\li \l{Adding 3D Views}
|
||||
\li \l{Using 3D Components}
|
||||
\endlist
|
||||
|
||||
@@ -35,57 +35,41 @@
|
||||
\title Editing 3D Assets in Design Mode
|
||||
|
||||
\QDS opens QML files that contain 3D scenes in the Design mode and the
|
||||
scenes in the 3D editor. You can add imported 3D assets
|
||||
to projects and edit them to create scenes and states, as well as the
|
||||
transitions between them.
|
||||
scenes in \uicontrol {3D Editor}. You can add imported 3D assets to projects
|
||||
and edit them to create scenes and states, as well as the transitions
|
||||
between them. The other views enable you to select QML types to use in the
|
||||
scene, specify properties for them, and view them in a tree structure,
|
||||
as well as to create connections and browse projects and files.
|
||||
|
||||
\image studio-editing-3d-scenes.png "3D assets in Design mode"
|
||||
|
||||
To edit 3D scenes in the Design mode:
|
||||
To open the following views, select \uicontrol Window > \uicontrol Views:
|
||||
|
||||
\list
|
||||
\li \uicontrol {3D Editor} (1) is the working area where you create the
|
||||
scene, position the model, light and camera, as well as move and
|
||||
scale items.
|
||||
\li \uicontrol {3D View} (2) is where you see the scene projected by the
|
||||
camera.
|
||||
\li The sidebars contain views where you can select QML types to use in
|
||||
the scene, specify properties for them, and view them in a tree
|
||||
structure, as well as to create connections and browse projects and
|
||||
files. You can select the content of the sidebars in the sidebar
|
||||
menu:
|
||||
\list
|
||||
\li \uicontrol {Library} (3) displays the building blocks that you
|
||||
can use to create scenes: predefined Qt Quick 3D Components,
|
||||
Qt Quick Controls, your own 3D assets that you import to the
|
||||
project, and other assets. For more information, see
|
||||
\l {Adding 3D Views}.
|
||||
\li \uicontrol {Navigator} (4) displays the items in the current QML
|
||||
file as a tree structure. For more information, see
|
||||
\l {Managing Item Hierarchy}.
|
||||
\li \uicontrol {Properties} (5) organizes the properties of the
|
||||
selected item. You can change the properties also in the
|
||||
\uicontrol {Text Editor}. For more information, see
|
||||
\l {Specifying Item Properties}.
|
||||
\li \uicontrol Connections enables you to create connections
|
||||
between objects, signals, and object properties. For more
|
||||
information, see \l{Adding Connections}.
|
||||
\li \uicontrol {File System} shows all files in the currently
|
||||
selected directory. For more information, see
|
||||
\l{Viewing the File System}.
|
||||
\li \uicontrol {Open Documents} shows currently open files.
|
||||
\li \uicontrol {Projects} shows a list of projects open in the
|
||||
current session. For more information, see
|
||||
\l{Viewing Project Files}.
|
||||
\endlist
|
||||
\li \uicontrol {States} displays the different states of the
|
||||
item. QML states typically describe user interface configurations,
|
||||
such as the UI controls, their properties and behavior and the
|
||||
available actions. For more information, see \l{Adding States}.
|
||||
\li \uicontrol Timeline (6) provides a timeline and keyframe based
|
||||
scale items. For more information, see \l {Working in 3D Editor}.
|
||||
\li \uicontrol {Form Editor} (2) is where you see the scene projected by
|
||||
the camera.
|
||||
\li \uicontrol {Library} (3) displays the building blocks that you
|
||||
can use to create scenes: predefined Qt Quick 3D Components,
|
||||
Qt Quick Controls, your own 3D assets that you import to the
|
||||
project, and other assets. For more information, see \l {Adding 3D
|
||||
Views}.
|
||||
\li \uicontrol {Navigator} (4) displays the items in the current QML
|
||||
file as a tree structure. For more information, see
|
||||
\l {Managing Item Hierarchy}.
|
||||
\li \uicontrol {Properties} (5) organizes the properties of the
|
||||
selected item. You can change the properties also in the
|
||||
\uicontrol {Text Editor}. For more information, see
|
||||
\l {Specifying Item Properties}.
|
||||
\li \uicontrol Connections (6) enables you to create connections
|
||||
between objects, signals, and object properties. For more
|
||||
information, see \l{Adding Connections}.
|
||||
\li \uicontrol Timeline (7) provides a timeline and keyframe based
|
||||
editor that enables you to animate the properties of components.
|
||||
\endlist
|
||||
|
||||
To close the 3D editor, select \uicontrol 2D in the list on the toolbar (7).
|
||||
To reopen it, select \uicontrol {2D/3D}.
|
||||
For more information on other views, see
|
||||
\l {Editing QML Files in Design Mode}.
|
||||
*/
|
||||
|
||||
@@ -28,75 +28,120 @@
|
||||
\page studio-3d-editor.html
|
||||
\nextpage studio-3d-view.html
|
||||
|
||||
\title Working in the 3D Editor
|
||||
\title Working in 3D Editor
|
||||
|
||||
To project a 3D scene to a 2D viewport, it is necessary to view the scene
|
||||
from a \l{Using Scene Camera}{camera}. Select the \uicontrol {Toggle
|
||||
Perspective/Orthographic Projection} button (1) on the 3D editor toolbar to
|
||||
switch between a \e {perspective camera} and an \e {orthographic camera}.
|
||||
A perspective camera uses field of view and near and far clip planes to
|
||||
specify the projection, whereas an orthographic camera can be thought of
|
||||
as a 2D camera. Both of them are free-form cameras that you can use to
|
||||
orbit around the scene.
|
||||
When editing a 3D scene, you view the scene in \uicontrol {3D Editor} by
|
||||
using the \uicontrol {3D Editor} camera. You can switch between
|
||||
\e {perspective camera} and \e {orthographic camera} modes. When using the
|
||||
perspective camera mode, objects that are far from the camera appear smaller
|
||||
than those nearby. In the orthographic camera mode, all objects appear at
|
||||
the same scale irrespective of their distance from the camera. Both of them
|
||||
are free-form camera modes that you can use to orbit around the scene.
|
||||
|
||||
When you import 3D scenes from files that you exported from 3D graphics
|
||||
tools, you also import the camera, light, model, and materials. If your
|
||||
scene did not contain them, you can add the corresponding Qt Quick 3D
|
||||
types from the \uicontrol Library.
|
||||
tools, you also import a \l{Using Scene Camera}{scene camera},
|
||||
\l{Using Lights}{light}, \l{Adding Models}{model}, and
|
||||
\l {Using Materials and Shaders}{materials}. If your scene did not contain
|
||||
them, you can add the corresponding Qt Quick 3D types from \uicontrol
|
||||
Library.
|
||||
|
||||
You can use the toolbar buttons (2) to show the \e transformation
|
||||
gizmo in the \uicontrol {3D Editor} when an item is selected
|
||||
and to determine what happens when you drag the selected item.
|
||||
Transformation refers to moving, rotating, or scaling of an object.
|
||||
Select the \uicontrol {Toggle Local/Global Orientation} button (3) to
|
||||
determine whether the gizmos affect only the local transformations of the
|
||||
item or whether they transform with respect to the global space.
|
||||
You can use the toolbar buttons to \e transform 3D objects and manipulate
|
||||
the 3D scene. Transformation refers to moving, rotating, or scaling of an
|
||||
object. The \e pivot of the component is used as the origin for
|
||||
transformations. You can set a \l{Setting Transform Properties}{local pivot
|
||||
offset} for an item in \uicontrol Properties to transform the component
|
||||
around a point other than its local origin. A line is drawn in \uicontrol
|
||||
{3D Editor} from the pivot point to the center of the component to provide
|
||||
a visual connection between them.
|
||||
|
||||
Toggle between local and global orientation to determine whether the gizmos
|
||||
affect only the local transformations of the item or whether they transform
|
||||
with respect to the global space.
|
||||
|
||||
Additional helpful features when editing 3D scenes are the \e {edit light},
|
||||
which is a quick way to light the scene, and the grid that helps you to
|
||||
navigate in 3D space. Select the \inlineimage grid_on.png
|
||||
(\uicontrol {Toggle Grid Visibility}) to show or hide the grid.
|
||||
|
||||
\image studio-3d-editor.png "3D Editor"
|
||||
|
||||
The \e pivot of the component is used as the origin for position, scale,
|
||||
and rotation operations. You can set a \l{Setting Transform Properties}
|
||||
{local pivot offset} for an item in the \uicontrol Properties view to
|
||||
manipulate the component around a point other than its local origin. A
|
||||
line is drawn in the 3D editor from the pivot point to the center of the
|
||||
component to provide a visual connection between them.
|
||||
\section1 Controlling the 3D Editor Camera
|
||||
|
||||
\section1 Controlling the Edit View Camera
|
||||
To switch to perspective camera mode, select
|
||||
\inlineimage perspective_camera.png
|
||||
(\uicontrol {Toggle Perspective/Orthographic Edit Camera}).
|
||||
To switch to orthographic camera mode, select
|
||||
\inlineimage orthographic_camera.png
|
||||
.
|
||||
|
||||
You can add 3D camera types to the scene to project the view you see in
|
||||
the View3D type in the application. While editing scenes, you can use
|
||||
a separate \e {edit view camera} (4) to project the scene to the 3D edit
|
||||
view in the Design mode.
|
||||
You can navigate the scene by panning, rotating, and zooming the 3D Editor
|
||||
camera:
|
||||
|
||||
You can navigate the scene by rotating, panning, and zooming the edit view
|
||||
camera.
|
||||
\list
|
||||
\li To pan, press \key Alt and use the middle mouse button to click
|
||||
anywhere in the rendered view to slide the view around.
|
||||
\li To orbit, press \key Alt and click anywhere in the rendered view to
|
||||
rotate the view.
|
||||
\li To zoom, use the mouse wheel or press \key Alt and right-click
|
||||
anywhere in the rendered view to zoom the view in or out as you drag
|
||||
up or down.
|
||||
\endlist
|
||||
|
||||
To zoom, use the mouse wheel or press \key Alt and right-click anywhere in
|
||||
the rendered view to zoom the view in or out as you drag up or down.
|
||||
To zoom and focus the 3D Editor camera on a selected item,
|
||||
select \inlineimage fit_selected.png
|
||||
(\uicontrol {Fit Selected}) or press \key F.
|
||||
|
||||
To pan, press \key Alt and use the middle mouse button to click anywhere in
|
||||
the rendered view to slide the view around.
|
||||
|
||||
To orbit, press \key Alt and click anywhere in the rendered view to rotate
|
||||
the view.
|
||||
|
||||
To scale the edit view camera and to focus it on the selected items, select
|
||||
\uicontrol {Fit Selected} button or press \key F.
|
||||
|
||||
The world axis helper (5) shows the direction of the world axes in respect
|
||||
to the edit view camera. To point the camera at the currently selected
|
||||
The world axis helper (1) shows the direction of the world axes in respect
|
||||
to the 3D Editor camera. To point the camera at the currently selected
|
||||
component in the direction of an axis, click the axis. If no component
|
||||
is selected, the camera is pointed at the world origin. This does not
|
||||
affect the camera zoom level.
|
||||
|
||||
For more information about using the cameras in the scene, the available
|
||||
3D camera types, and their properties, see \l{Using Scene Camera}.
|
||||
\image studio-3d-editor-axis-helper.png "Axis helper in 3D Editor"
|
||||
|
||||
You can use scene cameras (2) to view the the View3D type from a specific
|
||||
angle in \uicontrol {Form Editor} while editing scenes. Different types of
|
||||
cameras are available in \uicontrol Library under \uicontrol
|
||||
{Qt Quick 3D}. For more information about using cameras in the scene,
|
||||
the available camera types, and their properties, see
|
||||
\l{Using Scene Camera}.
|
||||
|
||||
\section1 Using Global and Local Orientation
|
||||
|
||||
To switch between local and global orientation, select
|
||||
\inlineimage local.png
|
||||
or \inlineimage global.png
|
||||
(\uicontrol {Toggle Local/Global Orientation})
|
||||
or press \key Y.
|
||||
|
||||
In global orientation mode, transformation of a selected object is presented
|
||||
with respect to the global space. For example, while the move tool is
|
||||
selected, selecting a cube will show its move gizmo aligned with the axes
|
||||
of global space. Dragging on the red arrow of the gizmo moves the object in
|
||||
the global x direction.
|
||||
|
||||
In local orientation mode, the position of a selected object is shown
|
||||
according to local axes specific to the selected object. For example,
|
||||
selecting a rotated cube will show its axes rotated, and not aligned with
|
||||
the axes of global space. Dragging on the red arrow of the gizmo
|
||||
moves the object in the local x direction in relation to the object.
|
||||
|
||||
\section1 Using Edit Light
|
||||
|
||||
The edit light is an extra point light that follows the edit camera.
|
||||
To switch the edit light on and off, select \inlineimage edit_light_on.png
|
||||
or \inlineimage edit_light_off.png
|
||||
(\uicontrol {Toggle Edit Light})
|
||||
or press \key U.
|
||||
|
||||
For more information about the available scene light types and their
|
||||
properties, see \l{Using Lights}.
|
||||
|
||||
\section1 Selecting Items
|
||||
|
||||
To move, rotate, or scale items in the scene, you need to select them first.
|
||||
The selection mode buttons determine how items are selected when you click
|
||||
them in the 3D editor.
|
||||
them in \uicontrol {3D Editor}:
|
||||
|
||||
\list
|
||||
\li In the \inlineimage select_item.png
|
||||
@@ -111,80 +156,54 @@
|
||||
|
||||
\section1 Moving Items
|
||||
|
||||
\image studio-3d-editor-move.png "3D editor in move mode"
|
||||
\image studio-3d-editor-move.png "3D Editor in move mode"
|
||||
|
||||
You can move items in relation to their coordinate system, along the x, y,
|
||||
or z view axis or on the top, bottom, left, and right clip planes of the
|
||||
render camera.
|
||||
or z axis or on the top, bottom, left, and right clip planes of the
|
||||
\uicontrol {3D Editor} camera.
|
||||
|
||||
To move items, select \inlineimage move_on.png
|
||||
or press \key W.
|
||||
or press \key W:
|
||||
|
||||
To move items along an axis, click the axis and drag the item along the
|
||||
axis.
|
||||
|
||||
To move items on a plane, select the plane handle and drag the item on
|
||||
the plane.
|
||||
|
||||
To move an item freely in the editor, select the handle at the center of
|
||||
the item.
|
||||
\list
|
||||
\li To move items along the axes of the move gizmo, click the axis and
|
||||
drag the item along the axis.
|
||||
\li To move items on a plane, click the plane handle and drag the item
|
||||
on the plane.
|
||||
\li To move an item freely in the editor, click the gray handle at the
|
||||
center of the item.
|
||||
\endlist
|
||||
|
||||
\section1 Rotating Items
|
||||
|
||||
You can rotate items around the view axes of the camera.
|
||||
|
||||
\image studio-3d-editor-rotate.png "3D editor in rotate mode"
|
||||
\image studio-3d-editor-rotate.png "3D Editor in rotate mode"
|
||||
|
||||
To rotate items, select \inlineimage rotate_on.png
|
||||
or press \key E.
|
||||
or press \key E:
|
||||
|
||||
To rotate an item around an axis, select the axis and drag in the direction
|
||||
you want to rotate the item in.
|
||||
|
||||
To freely rotate the item, select the gray circle.
|
||||
|
||||
\section1 Using Global and Local Orientation
|
||||
|
||||
To switch between global and local orientation, select \uicontrol
|
||||
{Toggle Local/Global Orientation}.
|
||||
|
||||
In global orientation mode, transformation of a selected object is presented
|
||||
with respect to the global space. For example, while the move tool is
|
||||
selected, selecting a cube will show its move gizmo aligned with the axes
|
||||
of global space. Dragging on the red arrow of the gizmo moves the object in
|
||||
the global x direction.
|
||||
|
||||
In local orientation mode, the position of a selected object is shown
|
||||
according to local axes specific to the selected object. For example,
|
||||
selecting a rotated cube will show its axes rotated, and not aligned with
|
||||
the axes of global space. Dragging on the red arrow of the gizmo
|
||||
moves the object in the local x direction in relation to the object.
|
||||
\list
|
||||
\li To rotate an item around its rotation gizmo, click the axis and
|
||||
drag in the direction you want to rotate the item in.
|
||||
\li To freely rotate the item, select the gray circle.
|
||||
\endlist
|
||||
|
||||
\section1 Scaling Items
|
||||
|
||||
\image studio-3d-editor-scale.png "3D editor in scale mode"
|
||||
|
||||
To scale items, select \inlineimage scale_on.png
|
||||
or press \key R.
|
||||
\image studio-3d-editor-scale.png "3D Editor in scale mode"
|
||||
|
||||
You can use the scale handles to adjust the local x, y, or z scale of an
|
||||
item. You can adjust the scale across one, two, or three axes, depending
|
||||
on the handle.
|
||||
item. You can adjust the scale across one, two, or three axes, depending on
|
||||
the handle.
|
||||
|
||||
To adjust the scale across one axis, select the scale handle attached to
|
||||
the axis. To uniformly scale an item across all axes, select the handle
|
||||
at the center of the item.
|
||||
To scale items, select \inlineimage scale_on.png
|
||||
or press \key R:
|
||||
|
||||
To adjust the scale across a plane, select the plane handle and drag the
|
||||
item on the plane.
|
||||
|
||||
\section1 Using Edit View Light
|
||||
|
||||
You use 3D light types to light the models in the scene. While editing
|
||||
scenes, you can use a separate \e {edit view light} to illuminate the
|
||||
portions of the scene that the scene lights do not hit. To switch the edit
|
||||
view light on and off, select the \uicontrol {Toggle Edit Light} button (6).
|
||||
|
||||
For more information about the available scene light types and their
|
||||
properties, see \l{Using Lights}.
|
||||
\list
|
||||
\li To adjust the scale across one axis, click and drag the scale handle
|
||||
attached to the axis.
|
||||
\li To adjust the scale across a plane, click the plane handle and drag
|
||||
the item on the plane.
|
||||
\li To uniformly scale an item across all axes, click and drag the
|
||||
handle at the center of the item.
|
||||
\endlist
|
||||
*/
|
||||
|
||||
@@ -80,14 +80,13 @@
|
||||
To clear the background using a color, select \uicontrol Color,
|
||||
and select the color in the \uicontrol {Clear Color} field.
|
||||
|
||||
To render a Skybox or Skydome instead of clearing the scene,
|
||||
select \uicontrol SkyBox. You can specify the image to use as
|
||||
a value of the \l{SceneEnvironment::lightProbe}{lightProbe}
|
||||
property in \uicontrol {Text Editor}.
|
||||
|
||||
To leave the scene uncleared, select \uicontrol {Unspecified}.
|
||||
|
||||
\section1 Blending Scene Colors
|
||||
|
||||
To determine how colors are blended, select a blend mode in the
|
||||
\uicontrol {Blend mode} field. For more information on the options,
|
||||
see \uicontrol {Blending Colors}.
|
||||
|
||||
\section1 Performing Depth Tests
|
||||
|
||||
You can perform depth tests to optimize the scene environment. To skip depth
|
||||
|
||||
@@ -30,32 +30,34 @@
|
||||
|
||||
\title Adding 3D Views
|
||||
|
||||
To display \l {Qt Quick 3D} types in the \uicontrol Library, select
|
||||
\uicontrol Library > \uicontrol {QML Imports} > \uicontrol {Add Import} >
|
||||
\uicontrol QtQuick3D. The types are displayed in the \uicontrol {QML Types}
|
||||
tab.
|
||||
You can use a wizard to create a Qt Quick 3D UI project that imports
|
||||
the \l{Qt Quick 3D} QML types to the \uicontrol {QML Types} tab in
|
||||
\uicontrol Library and contains a 3D view, scene light, camera, and
|
||||
model. A default material is attached to the model. You can attach
|
||||
textures to materials. For more information about creating projects,
|
||||
see \l{Creating Projects}.
|
||||
|
||||
To add a 3D view to some other kind of project and to display the Qt Quick
|
||||
3D QML types in \uicontrol Library, select \uicontrol Library >
|
||||
\uicontrol {QML Imports} > \uicontrol {Add Import} > \uicontrol QtQuick3D.
|
||||
|
||||
\image studio-qtquick-3d-components.png
|
||||
|
||||
To add a 3D view to the scene, drag and drop a \uicontrol {View 3D}
|
||||
component from \uicontrol Library > \uicontrol {QML Types} >
|
||||
\uicontrol {Qt Quick 3D} to the 3D editor or to the \uicontrol Navigator.
|
||||
A 3D view contains a reference node that specifies a scene light, camera,
|
||||
and model. A default material is attached to the model. You can attach
|
||||
textures to materials.
|
||||
To add components to the scene, drag and drop them to \uicontrol Navigator
|
||||
or \uicontrol {Form Editor}.
|
||||
|
||||
\image studio-navigator-view3d.png "View 3D component in the Navigator"
|
||||
|
||||
By default, a directional light and a perspective camera are used.
|
||||
To use other light and camera types, change the type of the component in
|
||||
the \uicontrol Type field in the \uicontrol Properties view. For example,
|
||||
To use other light and camera types, change the type of the component
|
||||
in the \uicontrol Type field in \uicontrol Properties. For example,
|
||||
to use a point light, enter \e {PointLight}.
|
||||
|
||||
\image studio-3d-properties-type.png "Type field in Properties view"
|
||||
|
||||
To edit component properties, select the component in the 3D editor
|
||||
or in the \uicontrol Navigator and modify the property values in the
|
||||
\uicontrol Properties view.
|
||||
To edit component properties, select the component in
|
||||
\uicontrol {Form Editor} or \uicontrol Navigator and
|
||||
modify the property values in \uicontrol Properties.
|
||||
|
||||
\image studio-qtquick-3d-view.png "View 3D component properties"
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
\QDS opens QML files that contain 3D scenes in the Design mode and
|
||||
the scenes in the 3D editor. You can add imported 3D assets
|
||||
to projects as 3D components.
|
||||
\li \l {Working in the 3D Editor}
|
||||
\li \l {Working in 3D Editor}
|
||||
|
||||
You can select 3D components in the 3D editor to move, rotate, and
|
||||
scale them in the scene projected by the camera.
|
||||
|
||||