Doc: Update QQEM parts in doc

Task-number: QDS-9588
Change-Id: I3ae76bf708549e18e8024122d809bd15cb63de05
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Mats Honkamaa
2023-05-10 09:46:35 +03:00
parent f3fcce9f4f
commit 239d8882a9
7 changed files with 48 additions and 179 deletions

View File

@@ -27,6 +27,7 @@ macro.QC = "$IDE_DISPLAY_NAME"
macro.QCE = "$IDE_DISPLAY_NAME Enterprise"
macro.QD = "Qt Designer"
macro.QDS = "Qt Design Studio"
macro.QQEM = "Qt Quick Effect Maker"
macro.QDV = "Qt Design Viewer"
macro.QL = "Qt Linguist"
macro.QMCU = "Qt for MCUs"

View File

@@ -4,7 +4,7 @@
/*!
\page creator-exporting-qml.html
\previouspage studio-importing-3d.html
\nextpage qt-effect-maker-files.html
\nextpage qt-using-effect-maker-effects.html
\title Exporting Components

View File

@@ -3,7 +3,7 @@
/*!
\page qtquick-motion-design.html
\previouspage qt-effect-maker.html
\previouspage qt-using-effect-maker-effects.html
\nextpage quick-animation-overview.html
\title Motion Design

View File

@@ -1,93 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio 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 qt-effect-maker.html
\previouspage qt-effect-maker-files.html
\nextpage qtquick-motion-design.html
\sa {Creating Qt Quick Effect Maker Files}
\title Working with Effects in Qt Quick Effect Maker
The Qt Quick Effect Maker is a tool to create high-performance
shader effects for Qt Quick.
You can import these effects to \QDS and you can run Qt Quick Effect Maker
from \QDS.
\section1 Creating Effects
When you run Qt Quick Effect Maker, it starts with an empty project. To
create your effect, add nodes to the node tree.
\image qt-quick-effect-maker.webp
Consider the following things when creating effects:
\list
\li Some nodes do not function alone, they need a helper node. For
example, the \uicontrol FastBlur node needs a \uicontrol BlurHelper node
and the \uicontrol Noise node needs a \uicontrol NoiseHelper node. If the
node needs another node, it is mentioned in the node description.
\li If your effect appears cropped, you need to go to \uicontrol Edit >
\uicontrol {Project Settings} and increase the item padding.
\endlist
\section2 Creating a Blur Effect
To create a blur effect:
\list 1
\li Add a \uicontrol FastBlur node to the node tree.
\li Add a \uicontrol BlurHelper node to the node tree. You need the
\uicontrol BlurHelper node for all effects that contains a blur effect.
\endlist
\image blur-effect-nodes.png
You can now select the \uicontrol FastBlur node and in the settings, change
the \uicontrol fastBlurAmount value to control the amount of blur.
\image blur-effect-step-1.webp
\section3 Adjusting Item Borders
The effect appears cropped. You need to adjust item borders:
\list 1
\li Select \inlineimage effect-item-borders-icon.png
to display item borders.
\image blur-effect-step-2.webp
\li Go to \uicontrol Edit > \uicontrol {Project Settings}.
\li Set the item padding for all sides to 100.
\image effect-item-padding-dialog.png
\endlist
Now, you can see the complete blur effect.
\image blur-effect-step-3.webp
*/

View File

@@ -1,79 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio 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 qt-effect-maker-files.html
\nextpage qt-effect-maker.html
\previouspage creator-exporting-qml.html
\sa {Working with Effects in Qt Quick Effect Maker}
\title Creating Qt Quick Effect Maker Files
\section1 Creating an Effect File
You can create Qt Quick Effect Maker effect (.qep) files in \QDS and
then edit them in Qt Quick Effect Maker.
To create an effect file:
\list 1
\li In \QDS, right-click in the \uicontrol Assets view and
select \uicontrol {New Effect}.
\QDS creates an effect file and opens it in Qt Quick Effect Maker.
\image qt-quick-effect-maker.webp
\li Edit the effect.
\li In Qt Quick Effect Maker, go to \uicontrol File > \uicontrol Save.
\li Select \uicontrol File > \uicontrol Export.
\li With the default settings, select \uicontrol OK.
\image effect-maker-export.png
\endlist
Now, you can close Qt Quick Effect Maker and return to \QDS and apply the
effect.
\section1 Applying an Effect
You can apply effects to components in \QDS. To do so, drag the effect
from the \uicontrol Assets view to the component in the \uicontrol 2D or
\uicontrol Navigator view.
\image apply-effect-maker-effect.webp
\section1 Animated Effect
When you import an animated effect, you need to turn on the animation for it
to see the animation in your \QDS application.
To turn on animation for an effect, first apply the effect to a component,
and then:
\list 1
\li Select the effect in \uicontrol Navigator.
\li In \uicontrol Properties, go to the
\uicontrol {Exposed Custom Properties} section and set
\uicontrol timeRunning to true.
\endlist
*/

View File

@@ -180,11 +180,7 @@
\li \l{Importing 3D Assets}
\endlist
\li \l{Exporting Components}
\li Qt Quick Effect Maker
\list
\li \l{Creating Qt Quick Effect Maker Files}
\li \l{Working with Effects in Qt Quick Effect Maker}
\endlist
\li \l{Using Qt Quick Effect Maker Effects}
\endlist
\endlist
\li \l{Motion Design}

View File

@@ -0,0 +1,44 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page qt-using-effect-maker-effects.html
\nextpage qtquick-motion-design.html
\previouspage creator-exporting-qml.html
\title Using Qt Quick Effect Maker Effects
\QQEM is integrated into \QDS for creating shader effects. To create an
effect, you first create the effect file in \QDS, and then you edit it in \QQEM.
For more information about \QQEM, see the
\l{https://doc.qt.io/qt-6/qtquickeffectmaker-index.html}{Qt Quick Effect Maker Manual}.
\section1 Creating an Effect File
To create an effect file in \QDS:
\list 1
\li Right-click in the \uicontrol Assets view and
select \uicontrol {New Effect}.
\QDS creates an effect file and opens it in \QQEM.
\image qt-quick-effect-maker.webp
\li Edit the effect.
\li In \QQEM, go to \uicontrol File > \uicontrol Save.
\li With the default settings, select \uicontrol OK.
\image effect-maker-export.png
\endlist
Now, you can close \QQEM and return to \QDS and apply the
effect.
\section1 Applying an Effect
You can apply effects to components in \QDS. To do so, drag the effect
from the \uicontrol Assets view to the component in the \uicontrol 2D or
\uicontrol Navigator view.
\image apply-effect-maker-effect.webp
*/