diff options
author | Tim Jenssen <tim.jenssen@qt.io> | 2022-11-09 11:28:42 +0100 |
---|---|---|
committer | Tim Jenssen <tim.jenssen@qt.io> | 2022-11-09 11:45:25 +0100 |
commit | 63d3a6bd3d3ffb550eccac8e20a75bc3cdc00a4d (patch) | |
tree | 6d8623374da1faced1cc4616369b9c25db399d33 /doc/qtdesignstudio | |
parent | 06838e3e5e41f1f090fdd016c736bb91241cd5b3 (diff) | |
parent | 85fde5932a136164673af2adc6213b8c6232f6a9 (diff) | |
download | qt-creator-63d3a6bd3d3ffb550eccac8e20a75bc3cdc00a4d.tar.gz |
Merge remote-tracking branch 'origin/8.0' into 9.0
Conflicts:
src/plugins/qmldesigner/components/assetslibrary/assetslibrarywidget.cpp
src/plugins/qmldesigner/components/componentcore/modelnodeoperations.cpp
src/plugins/qmldesigner/qmldesignerplugin.cpp
Change-Id: I24216ae3f83cdde3493b4a6274e24a72f75820fc
Diffstat (limited to 'doc/qtdesignstudio')
16 files changed, 194 insertions, 2 deletions
diff --git a/doc/qtdesignstudio/images/apply-effect-maker-effect.webp b/doc/qtdesignstudio/images/apply-effect-maker-effect.webp Binary files differnew file mode 100644 index 0000000000..64c89bf92b --- /dev/null +++ b/doc/qtdesignstudio/images/apply-effect-maker-effect.webp diff --git a/doc/qtdesignstudio/images/assets-view-effect.png b/doc/qtdesignstudio/images/assets-view-effect.png Binary files differnew file mode 100644 index 0000000000..b229f8ddb6 --- /dev/null +++ b/doc/qtdesignstudio/images/assets-view-effect.png diff --git a/doc/qtdesignstudio/images/blur-effect-nodes.png b/doc/qtdesignstudio/images/blur-effect-nodes.png Binary files differnew file mode 100644 index 0000000000..7c3d57db03 --- /dev/null +++ b/doc/qtdesignstudio/images/blur-effect-nodes.png diff --git a/doc/qtdesignstudio/images/blur-effect-step-1.webp b/doc/qtdesignstudio/images/blur-effect-step-1.webp Binary files differnew file mode 100644 index 0000000000..1c3dc06af1 --- /dev/null +++ b/doc/qtdesignstudio/images/blur-effect-step-1.webp diff --git a/doc/qtdesignstudio/images/blur-effect-step-2.webp b/doc/qtdesignstudio/images/blur-effect-step-2.webp Binary files differnew file mode 100644 index 0000000000..3073411b0a --- /dev/null +++ b/doc/qtdesignstudio/images/blur-effect-step-2.webp diff --git a/doc/qtdesignstudio/images/blur-effect-step-3.webp b/doc/qtdesignstudio/images/blur-effect-step-3.webp Binary files differnew file mode 100644 index 0000000000..c67de042ff --- /dev/null +++ b/doc/qtdesignstudio/images/blur-effect-step-3.webp diff --git a/doc/qtdesignstudio/images/effect-item-borders-icon.png b/doc/qtdesignstudio/images/effect-item-borders-icon.png Binary files differnew file mode 100644 index 0000000000..2739db806d --- /dev/null +++ b/doc/qtdesignstudio/images/effect-item-borders-icon.png diff --git a/doc/qtdesignstudio/images/effect-item-padding-dialog.png b/doc/qtdesignstudio/images/effect-item-padding-dialog.png Binary files differnew file mode 100644 index 0000000000..a6c630714e --- /dev/null +++ b/doc/qtdesignstudio/images/effect-item-padding-dialog.png diff --git a/doc/qtdesignstudio/images/effect-maker-export.png b/doc/qtdesignstudio/images/effect-maker-export.png Binary files differnew file mode 100644 index 0000000000..35d2a6a3c4 --- /dev/null +++ b/doc/qtdesignstudio/images/effect-maker-export.png diff --git a/doc/qtdesignstudio/images/new-effect-file.png b/doc/qtdesignstudio/images/new-effect-file.png Binary files differnew file mode 100644 index 0000000000..521c36152c --- /dev/null +++ b/doc/qtdesignstudio/images/new-effect-file.png diff --git a/doc/qtdesignstudio/images/qt-quick-effect-maker.webp b/doc/qtdesignstudio/images/qt-quick-effect-maker.webp Binary files differnew file mode 100644 index 0000000000..2e98f7b02e --- /dev/null +++ b/doc/qtdesignstudio/images/qt-quick-effect-maker.webp diff --git a/doc/qtdesignstudio/src/overviews/qtquick-export.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-export.qdoc index dd99cc3f49..1d7661fdd3 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-export.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-export.qdoc @@ -4,7 +4,7 @@ /*! \page creator-exporting-qml.html \previouspage studio-importing-3d.html - \nextpage qtquick-motion-design.html + \nextpage qt-effect-maker-files.html \title Exporting Components diff --git a/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc index 5314fe7ef2..aade258132 100644 --- a/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc +++ b/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc @@ -3,7 +3,7 @@ /*! \page qtquick-motion-design.html - \previouspage creator-exporting-qml.html + \previouspage qt-effect-maker.html \nextpage quick-animation-overview.html \title Motion Design diff --git a/doc/qtdesignstudio/src/qt-quick-effect-maker.qdoc b/doc/qtdesignstudio/src/qt-quick-effect-maker.qdoc new file mode 100644 index 0000000000..56dfebfe30 --- /dev/null +++ b/doc/qtdesignstudio/src/qt-quick-effect-maker.qdoc @@ -0,0 +1,93 @@ +/**************************************************************************** +** +** 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 + +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-effect-maker-files.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-effect-maker-files.qdoc new file mode 100644 index 0000000000..e00bb35486 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-effect-maker-files.qdoc @@ -0,0 +1,94 @@ +/**************************************************************************** +** +** 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 empty 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, go to \uicontrol File > \uicontrol {New File}. + \li Go to the \uicontrol Effects tab and select + \uicontrol {Effect file (Effect Maker)}. + \image new-effect-file.png + \li Select \uicontrol Choose and follow the wizard to create the file. + \endlist + + After you have created the effect file, it is available in the + \uicontrol Assets view. + + \image assets-view-effect.png + + \section2 Editing and Re-importing an Effect File + + To edit an effect file in Qt Quick Effect Maker, double-click it in + the \uicontrol Assets view. This opens the effect in Qt Quick Effect + Maker where you can make your changes. + + When you have edited the effect file in Qt Quick Effect Maker, you need + to save and export it: + \list 1 + \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 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 +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index e80d375034..d653205959 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -174,6 +174,11 @@ \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 \endlist \endlist \li \l{Motion Design} |