Improving AOI description documentation.

1 files changed, 70 insertions, 0 deletions

diff --git a/docs/user_guide/gaze_analysis_pipeline/aoi_2d_description.md b/docs/user_guide/gaze_analysis_pipeline/aoi_2d_description.md
new file mode 100644
index 0000000..b2f0b90
--- /dev/null
+++ b/docs/user_guide/gaze_analysis_pipeline/aoi_2d_description.md
@@ -0,0 +1,70 @@
+Describe 2D AOI
+===============
+
+Once [frame is configured](configuration_and_execution.md), areas of interest need to be described into the same 2D referential.
+
+![2D AOI description](../../img/aoi_2d_description.png)
+
+According a common computer graphics coordinates convention, all AOIs need to be described from a top left frame corner origin in a coordinate system where:
+
+* +X is pointing to the right,
+* +Y is pointing to the downward.
+
+!!! warning
+	All AOIs spatial values must be given in **pixels**.
+
+### Edit SVG file description
+
+SVG file format could be exported from most vector graphics editors.
+
+``` xml
+<svg>
+    <path id="Triangle" d="M1288.1,189.466L1991.24,3399.34L584.958,3399.34L1288.1,189.466Z"/>
+    <rect id="BlueRectangle" x="1257" y="1905.18" width="604.169" height="988.564"/>
+    <rect id="RedSquare" x="623.609" y="658.357" width="803.15" height="803.577"/>
+    <circle id="GreenCircle" cx="675.77" cy="2163.5" r="393.109"/>
+    <circle id="PinkCircle" cx="1902.02" cy="879.316" r="195.313"/>
+</svg>
+```
+
+Here are common SVG file features needed to describe AOIs:  
+
+* *id* attribute indicates AOI name.
+* *path* element describes any polygon using only [M, L and Z path intructions](https://www.w3.org/TR/SVG2/paths.html#PathData)
+* *rect* and *circle* allow respectively to describe rectangular and circle AOI.
+
+### Edit JSON file description
+
+JSON file format allows to describe AOIs.
+
+``` json
+{
+    "Triangle" : [[1288.1, 189.466], [1991.24, 3399.34], [584.958, 3399.34]],
+    "BlueRectangle": {
+        "shape": "rectangle",
+        "x": 1257,
+        "y": 1905.18,
+        "width": 604.169,
+        "height": 988.564
+    },
+    "RedSquare": {
+        "shape": "rectangle",
+        "x": 623.609,
+        "y": 658.357,
+        "width": 803.15,
+        "height": 803.15
+    },
+    "GreenCircle": {
+        "shape": "circle",
+        "cx": 675.77,
+        "cy": 2163.5,
+        "radius": 393.109
+    },
+    "PinkCircle": {
+        "shape": "circle",
+        "cx": 1902.02,
+        "cy": 879.316,
+        "radius": 195.313
+    }
+}
+```