Add data input documentation

Added documentation on data input. Updated UI screen shots related to
data input.

Task-number: QT3DS-876
Change-Id: I5dbb772bf925e1e435ded5df59a2258b04b0c5a6
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Antti Määttä <antti.maatta@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

16 files changed, 170 insertions, 0 deletions

diff --git a/doc/src/03-studio/5-timeline-palette.qdoc b/doc/src/03-studio/5-timeline-palette.qdoc
index 193ca38d..190aed3b 100644
--- a/doc/src/03-studio/5-timeline-palette.qdoc
+++ b/doc/src/03-studio/5-timeline-palette.qdoc
@@ -227,6 +227,17 @@ To remove a layer, select it in the scene graph, then click the delete layer ico
 \inlineimage Studio-Timeline-DeleteLayer.png
 .
 
+\section2 Data Input
+
+You can \l {Using Data Inputs}{use a data input} to control the timeline animation. You can set up
+a data input to control the timeline by clicking the
+\inlineimage datainput-to-timeline-icon-inactive.png
+icon.
+
+An orange colored icon \inlineimage datainput-to-timeline-icon-active.png
+indicates that a data input is currently connected to the timeline. Click the icon to remove the
+data input.
+
 \section1 Animation Portion
 
 \image Studio-Timeline-Animation.png
diff --git a/doc/src/10-best-practices/95-data-input.qdoc b/doc/src/10-best-practices/95-data-input.qdoc
new file mode 100644
index 00000000..ebba5d9b
--- /dev/null
+++ b/doc/src/10-best-practices/95-data-input.qdoc
@@ -0,0 +1,158 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Using Data Inputs
+\page using-data-inputs.html
+\ingroup using-data-inputs
+
+This is a technology preview of how Qt 3D Studio could support data-driven animations. This makes
+it possible to control timeline animations and slides with data input. Additionally you can control
+the text property of a text object with data input.
+
+The data input value can be set using
+\l{Behavior::setDataInputValue(string name, variant value)}{behavior scripts}
+or the DataInput QML Type.
+
+\section1 Manage Data Inputs
+
+\target add data input
+\section2 Add a Data Input
+To add a new data input, follow the steps below.
+
+\list 1
+  \li Select \uicontrol{Edit > Data Inputs} from the file menu in Studio.
+  \li Click the \inlineimage add-data-input-icon.png
+  icon.
+  \li Enter \uicontrol{Name} for the data input.
+  \li Enter \uicontrol{Input Type} for the data input. If \e{Ranged Number} is selected,
+  it is required to specify \e{Minimum Range} and \e{Maximum Range}.
+  \li Click \uicontrol{OK}.
+\endlist
+
+\image new-data-input.png
+
+\section2 Edit a Data Input
+
+To edit a data input, follow the steps below.
+
+\list 1
+  \li Select \uicontrol{Edit > Data Inputs} from the file menu in Studio.
+  \li Select the data input you want to edit by clicking on it.
+    \raw HTML
+    <p>Or</p>
+    \endraw
+    Double-click the data input you want to edit (then skip to step 4).
+  \li Click the \inlineimage edit-data-input-icon.png
+  icon.
+  \li Make desired changes.
+  \li Click \uicontrol{OK}.
+\endlist
+
+\image data-inputs.png
+
+\section2 Delete a Data Input
+
+To delete a data input, follow the steps below.
+
+\list 1
+  \li Select \uicontrol{Edit > Data Inputs} from the file menu in Studio.
+  \li Select the data input you want to delete by clicking on it.
+  \li Click the \inlineimage delete-data-input-icon.png
+  icon.
+\endlist
+
+\section1 Control the Timeline with Data Input
+
+\image timeline-datainput.png
+
+\note Only data input of \e {Ranged Number} type can be used to control the timeline.
+
+To add a data input to control the timeline animation, follow the instructions below.
+
+\list 1
+  \li Add the data input according to
+  \l {add data input}{instructions above}.
+  \li Click the \inlineimage datainput-to-timeline-icon-inactive.png
+  icon located in the bottom of the scene graph.
+  \li Select the desired data input from the list by clicking it.
+  \li Press \uicontrol{OK}.
+\endlist
+
+The \e{minimum range} value of the data input will correspond to the start of the timeline while
+the \e{maximum range} value will correspond to the end of the timeline.
+
+When you have selected a data input for the timeline the data input will turn orange
+\inlineimage datainput-to-timeline-icon-active.png
+to indicate that the timeline is connected to a data input.
+
+To remove the data input, repeat the steps below but select \uicontrol{[No control]} in step 3.
+
+\section1 Control Slides with Data Input
+
+\image slide-palette-data-input-inactive.png
+
+\note Only data input of \e {String} type can be used to control slides.
+
+\list 1
+  \li Add the data input according to
+  \l {add data input}{instructions above}.
+  \li In the slide palette, click the \inlineimage datainput-to-timeline-icon-inactive.png
+  icon located below the slides.
+  \li Select the desired data input from the list by clicking it.
+  \li Press \uicontrol{OK}.
+\endlist
+
+When you have selected a data input for the slides data input icon in the inspector palette will
+turn orange \inlineimage datainput-to-timeline-icon-active.png
+to indicate that the slides are connected to a data input.
+
+To remove the data input, repeat the steps below but select \uicontrol{[No control]} in step 3.
+
+\section1 Control an Object Property with Data Input
+
+\image datainput-text-property.png
+
+\list 1
+  \li Add the data input according to
+  \l {add data input}{instructions above}.
+  \li Select the desired text object in the scene graph.
+  \li In the inspector palette, click the \inlineimage datainput-to-timeline-icon-inactive.png
+  icon next to the \e{text string} property.
+  \li Select the desired data input from the list by clicking it.
+  \li Press \uicontrol{OK}.
+\endlist
+
+When you have selected a data input for the text object the \e{text string} property and the
+data input icon in the inspector palette will turn orange
+\inlineimage datainput-text-property-active-icon.png
+to indicate that the property is connected to a data input.
+
+To remove the data input, repeat the steps below but select \uicontrol{[No control]} in step 4.
+
+*/
diff --git a/doc/src/10-best-practices/practices-index.qdoc b/doc/src/10-best-practices/practices-index.qdoc
index 231eb236..41eb3303 100644
--- a/doc/src/10-best-practices/practices-index.qdoc
+++ b/doc/src/10-best-practices/practices-index.qdoc
@@ -47,6 +47,7 @@
 \li \l {Working with 3D Content}
 \li \l {Applying Layer Effects}
 \li \l {Using Image-based Lighting}
+\li \l {Using Data Inputs}
 \endlist
 //! [toc]
 
diff --git a/doc/src/images/Studio-Timeline-SceneGraph.png b/doc/src/images/Studio-Timeline-SceneGraph.png
index 8d35bba0..bf5f46c7 100644
--- a/doc/src/images/Studio-Timeline-SceneGraph.png
+++ b/doc/src/images/Studio-Timeline-SceneGraph.png
diff --git a/doc/src/images/add-data-input-icon.png b/doc/src/images/add-data-input-icon.png
new file mode 100644
index 00000000..eb705b93
--- /dev/null
+++ b/doc/src/images/add-data-input-icon.png
diff --git a/doc/src/images/addAssets.png b/doc/src/images/addAssets.png
index 7a2c1399..fb7026f3 100644
--- a/doc/src/images/addAssets.png
+++ b/doc/src/images/addAssets.png
diff --git a/doc/src/images/data-inputs.png b/doc/src/images/data-inputs.png
new file mode 100644
index 00000000..b8fdaeb1
--- /dev/null
+++ b/doc/src/images/data-inputs.png
diff --git a/doc/src/images/datainput-text-property-active-icon.png b/doc/src/images/datainput-text-property-active-icon.png
new file mode 100644
index 00000000..95917ec0
--- /dev/null
+++ b/doc/src/images/datainput-text-property-active-icon.png
diff --git a/doc/src/images/datainput-text-property.png b/doc/src/images/datainput-text-property.png
new file mode 100644
index 00000000..b68c9d38
--- /dev/null
+++ b/doc/src/images/datainput-text-property.png
diff --git a/doc/src/images/datainput-to-timeline-icon-active.png b/doc/src/images/datainput-to-timeline-icon-active.png
new file mode 100644
index 00000000..6975253d
--- /dev/null
+++ b/doc/src/images/datainput-to-timeline-icon-active.png
diff --git a/doc/src/images/datainput-to-timeline-icon-inactive.png b/doc/src/images/datainput-to-timeline-icon-inactive.png
new file mode 100644
index 00000000..fe8b78c2
--- /dev/null
+++ b/doc/src/images/datainput-to-timeline-icon-inactive.png
diff --git a/doc/src/images/delete-data-input-icon.png b/doc/src/images/delete-data-input-icon.png
new file mode 100644
index 00000000..7a98126e
--- /dev/null
+++ b/doc/src/images/delete-data-input-icon.png
diff --git a/doc/src/images/edit-data-input-icon.png b/doc/src/images/edit-data-input-icon.png
new file mode 100644
index 00000000..e0e4e873
--- /dev/null
+++ b/doc/src/images/edit-data-input-icon.png
diff --git a/doc/src/images/new-data-input.png b/doc/src/images/new-data-input.png
new file mode 100644
index 00000000..479f1d11
--- /dev/null
+++ b/doc/src/images/new-data-input.png
diff --git a/doc/src/images/slide-palette-data-input-inactive.png b/doc/src/images/slide-palette-data-input-inactive.png
new file mode 100644
index 00000000..c19ce112
--- /dev/null
+++ b/doc/src/images/slide-palette-data-input-inactive.png
diff --git a/doc/src/images/timeline-datainput.png b/doc/src/images/timeline-datainput.png
new file mode 100644
index 00000000..074fd2f3
--- /dev/null
+++ b/doc/src/images/timeline-datainput.png