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 to common computer graphics coordinate 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 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="GeoSector" d="M860,160L1380,100L1660,400L1380,740L1440,960L920,920L680,800L640,560L860,160Z"/>
    <rect id="LeftPanel" x="0" y="0" width="350" height="1080"/>
    <circle id="CircularWidget" cx="1800" cy="120" r="80"/>
</svg>
```

Here are some common SVG file features needed to describe AOI:  

* *id* attribute indicates an 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*, *circle* and *ellipse* allow, respectively, to describe rectangular, circular and elliptic AOI.

### Edit JSON file description

JSON file format allows describing AOI.

``` json
{
    "GeoSector": [[860, 160], [1380, 100], [1660, 400], [1380, 740], [1440, 960], [920, 920], [680, 800], [640, 560]],
    "LeftPanel": {
        "Rectangle": {
            "x": 0,
            "y": 0,
            "width": 350,
            "height": 1080
        }
    },
    "CircularWidget": {
        "Circle": {
            "cx": 1800,
            "cy": 120,
            "radius": 80
        }
    }
}
```