Describe 2D AOI
================

Once [ArFrame](../../argaze.md/#argaze.ArFeatures.ArFrame) is [configured](configuration_and_execution.md), [areas of interest (AOI)](../../argaze.md/#argaze.AreaOfInterest.AOIFeatures.AreaOfInterest) need to be described to know what is looked in frame.

![2D AOI description](../../img/aoi_2d_description.png)

According common computer graphics coordinates convention, all AOI need to be described from a top left frame corner origin with a coordinate system where:

* +X is pointing to the right,
* +Y is pointing to the downward.

!!! warning
	All AOI 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="M960,664L1113,971L806,971L960,664Z"/>
    <rect id="RedSquare" x="268" y="203" width="308" height="308"/>
    <circle id="GreenCircle" cx="1497" cy="356" r="153"/>
</svg>
```

Here are common SVG file features needed to describe AOI:  

* *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 AOI.

``` json
{
    "BlueTriangle":[[960, 664], [1113, 971], [806, 971]],
    "RedSquare": {
        "Rectangle": {
            "x": 268,
            "y": 203,
            "width": 308,
            "height": 308
        }
    },
    "GreenCircle": {
        "Circle": {
            "cx": 1497,
            "cy": 356,
            "radius": 153
        }
    }
}
```