Doc: Add Effect Maker documentation

Task-number: QDS-7669
Change-Id: I49f77d61b018516bd3b460fd92c8fa620ec10d81
Reviewed-by: <amr.elsayed@qt.io>
Reviewed-by: Kaj Grönholm <kaj.gronholm@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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 f3042336bb..361765890d 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-export.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-export.qdoc
@@ -26,7 +26,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 91f842e08e..956ed00d5c 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc
@@ -25,7 +25,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 edd27446d5..b255a6eeb4 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -196,6 +196,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}