Doc: Describe the Effect Composer

Fixes: QDS-10528
Change-Id: I46d7ab1977acb7f0af5c0aa790de7fbf2624a449
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>

13 files changed, 97 insertions, 2 deletions

diff --git a/doc/qtcreator/images/icons/save-effect-composer.png b/doc/qtcreator/images/icons/save-effect-composer.png
new file mode 100644
index 0000000000..af81061b6c
--- /dev/null
+++ b/doc/qtcreator/images/icons/save-effect-composer.png
diff --git a/doc/qtdesignstudio/images/icons/assign-effect-composer.png b/doc/qtdesignstudio/images/icons/assign-effect-composer.png
new file mode 100644
index 0000000000..0468ab0662
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/assign-effect-composer.png
diff --git a/doc/qtdesignstudio/images/icons/dragmarks-effect-composer.png b/doc/qtdesignstudio/images/icons/dragmarks-effect-composer.png
new file mode 100644
index 0000000000..4d66b4a946
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/dragmarks-effect-composer.png
diff --git a/doc/qtdesignstudio/images/icons/save-as-effect-composer.png b/doc/qtdesignstudio/images/icons/save-as-effect-composer.png
new file mode 100644
index 0000000000..af1c063559
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/save-as-effect-composer.png
diff --git a/doc/qtdesignstudio/images/icons/save-effect-composer.png b/doc/qtdesignstudio/images/icons/save-effect-composer.png
new file mode 100644
index 0000000000..43d4019674
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/save-effect-composer.png
diff --git a/doc/qtdesignstudio/images/icons/studio-clear-effect-stack.png b/doc/qtdesignstudio/images/icons/studio-clear-effect-stack.png
new file mode 100644
index 0000000000..503d43037b
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/studio-clear-effect-stack.png
diff --git a/doc/qtdesignstudio/images/studio-effect-composer-assets.webp b/doc/qtdesignstudio/images/studio-effect-composer-assets.webp
new file mode 100644
index 0000000000..cb5e1992ce
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-effect-composer-assets.webp
diff --git a/doc/qtdesignstudio/images/studio-effect-composer.webp b/doc/qtdesignstudio/images/studio-effect-composer.webp
new file mode 100644
index 0000000000..0729b59621
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-effect-composer.webp
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
index c79a576c56..b097e86ef0 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -34,6 +34,7 @@
                                 \li \l{Content Library}
                                 \li \l{Texture Editor}
                                 \li \l{Qt Insight}
+                                \li \l{Effect Composer}
                            \endlist
                         \li \l{Managing Workspaces}
                         \li \l{Manage sessions}
diff --git a/doc/qtdesignstudio/src/views/qtquick-designer.qdoc b/doc/qtdesignstudio/src/views/qtquick-designer.qdoc
index 9f706ed014..7d927a628b 100644
--- a/doc/qtdesignstudio/src/views/qtquick-designer.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-designer.qdoc
@@ -153,6 +153,11 @@
         textures.
         \li
         \li \l{Texture Editor}
+    \row
+        \li \l{Effect Composer}
+        \li Use \uicontrol {Effect Composer} to compose custom effects.
+        \li
+        \li \l{Effect Composer}
     \endtable
 
     \section1 Summary of Main Toolbar Actions
diff --git a/doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc
new file mode 100644
index 0000000000..3d7e046d85
--- /dev/null
+++ b/doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc
@@ -0,0 +1,89 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquick-effect-composer-view.html
+    \previouspage studio-qt-insight.html
+    \nextpage creator-project-managing-workspaces.html
+
+    \title Effect Composer
+
+    Use \uicontrol {Effect Composer} to create post-processing effects that
+    can be applied to 2D or 3D components. The effects created with \uicontrol {Effect Composer}
+    are shader effects, which can be used in any \QDS projects.
+
+    \image studio-effect-composer.webp "The Effect Composer view in Qt Design Studio."
+
+    \section1 Composing a Custom Effect
+
+    \list 1
+        \li To create a new custom effect, do one of the following:
+            \list
+                \li Right-click anywhere in the \uicontrol Assets view (1) and select
+                    \uicontrol {New Effect} in the dialog. Give your new custom
+                    effect a name and select \uicontrol Create.
+                \li Open the \uicontrol {Effect Composer} view (2), select \uicontrol {Add Effect},
+                    and then select the effects you wish to use from the dropdown menu.
+                    The added effects appear in the effect stack (3). You cannot add some of the
+                    effects to the same custom effect.
+            \endlist
+        \li Adjust the effect parameters to modify your custom effect. View the preview panel (4) to
+            see how your effect affects a component before assigning it to one. Use the preview panel
+            toolbar to select the preview image and the preview panel background color.
+        \li Finally, select \inlineimage icons/save-effect-composer.png to save your
+            custom effect. If the custom effect is still \e Untitled, name it, and then select
+            \uicontrol Save. Select \inlineimage icons/save-as-effect-composer.png to save the custom
+            effect under a different name, for example to create variations of the effect you
+            composed.
+    \endlist
+
+    \image studio-effect-composer-assets.webp "Effect Composer and the Assets view"
+
+    The saved custom effects appear in the \uicontrol {Assets} view. Double-click a
+    custom effect in \uicontrol Assets to view and edit it in \uicontrol {Effect Composer}.
+    To delete a custom effect, right-click it in the \uicontrol {Assets} view, and then
+    select \uicontrol {Delete File}.
+
+    \section1 Assigning a Custom Effect to a Component
+
+    To assign your newly created custom effect to a 2D or 3D component,
+    do one of the following:
+
+    \list
+        \li Select a component in the \uicontrol Navigator, \uicontrol 2D, or
+            \uicontrol 3D view, and then select \inlineimage icons/assign-effect-composer.png
+            in \uicontrol {Effect Composer}.
+        \li Drag the custom effect from \uicontrol Assets to the component in
+            \uicontrol Navigator or the \uicontrol {2D} view.
+    \endlist
+
+    \note To assign an effect to a component, you need to save it first.
+
+    \section1 Stacking Effects
+
+    To compose complex custom effects, add multiple effects to your stack in
+    \uicontrol {Effect Composer}. The order of effects in the \uicontrol {Effect Composer}
+    stack determines the order they are rendered, which affects the final output of
+    the custom effects.
+
+    To change the position of an effect in the stack, drag the effect by the handle
+    (\inlineimage icons/dragmarks-effect-composer.png) to the desired position.
+
+    To determine whether or not each of the effects in the stack is rendered, toggle the
+    visibility on (\inlineimage icons/visibilityon.png) and off (\inlineimage icons/visibility-off.png).
+
+    To clear the effect stack, select \inlineimage icons/studio-clear-effect-stack.png.
+
+    \section1 Using Animated Effects
+
+    Some of the effects in \uicontrol {Effect Composer} are animated. Preview the
+    animation in the preview panel using the play, pause, and restart animation
+    buttons.
+
+    When an animated effect has been applied to a component, the animation plays
+    by default in \uicontrol {Live Preview} and when you run the project.
+    To define whether the animation plays or not, select the assigned effect in
+    \uicontrol Navigator, and in \uicontrol Properties >
+    \uicontrol {Exposed Custom Properties}, select or clear the
+    \uicontrol timeRunning checkbox.
+
diff --git a/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc b/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc
index ddcced3afe..6af9b071e1 100644
--- a/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc
+++ b/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc
@@ -4,7 +4,7 @@
 /*!
     \page studio-qt-insight.html
     \previouspage studio-texture-editor.html
-    \nextpage creator-project-managing-workspaces.html
+    \nextpage qtquick-effect-composer-view.html
 
     \title Qt Insight
 
diff --git a/doc/qtdesignstudio/src/views/studio-workspaces.qdoc b/doc/qtdesignstudio/src/views/studio-workspaces.qdoc
index 2b6d2e2e27..407513c40f 100644
--- a/doc/qtdesignstudio/src/views/studio-workspaces.qdoc
+++ b/doc/qtdesignstudio/src/views/studio-workspaces.qdoc
@@ -3,7 +3,7 @@
 
 /*!
     \page creator-project-managing-workspaces.html
-    \previouspage studio-qt-insight.html
+    \previouspage qtquick-effect-composer-view.html
     \nextpage creator-project-managing-sessions.html
 
     \title Managing Workspaces