Panoramica

Le annotazioni in Frame.io sono rappresentate come un blob JSON serializzato di oggetti di disegno, completi di colori, coordinate e dimensioni. Nel blob, tutte le virgolette tranne la coppia di delimitazione esterna sono precedute da barre oblique (ad esempio \"key\":\"value\"). Esistono tre forme di base (arrow, rect e line), oltre al disegno a mano libera, che esula dall’ambito di questa guida, ma segue gli stessi principi di base dei dati di coordinate serializzati.

Il sistema di coordinate

Tutte le forme sono posizionate su un sistema di coordinate cartesiano con origine in alto a sinistra e una scala da 0 a 1 su ciascun asse.

Dati di forma di base

Tutte le forme sono posizionate sul piano sopra riportato con una combinazione di coordinate e dati di stile. Ogni forma ha alcuni attributi comuni e ognuna ha un modo leggermente diverso di gestire il sistema di coordinate.

Tutti gli attributi per distanza, larghezza e altezza utilizzano la stessa scala da 0 a 1 della griglia di coordinate principale, ma sono generalmente contrassegnati dal punto di origine della forma.

In altre parole, se un video viene mostrato in una finestra di visualizzazione 640x480, x=1 corrisponderà a 640 px assoluti in quel contesto. Questo consente alle annotazioni di adattarsi senza problemi mantenendo la loro posizione relativa quando schermo di visualizzazione, dimensioni e contesto cambiano. Nota: l’origine di un rect è sempre l’angolo superiore sinistro della forma, indipendentemente dall’origine del disegno.

Attributi comuni

Attributo	Descrizione
`tool`	arrow, rect o line. Indica quale forma viene creata.
`color`	Colore esadecimale a sei cifre per la forma.
`size`	Dimensione in pixel per la linea della forma. Per le frecce, si riferisce solo all’inizio della linea, poiché la larghezza finale è determinata programmaticamente.

Freccia

Attributo	Descrizione
`x`	Coordinata x dell’origine della freccia.
`y`	Coordinata y dell’origine della freccia.
`w`	Differenza nella posizione dell’asse y della freccia dall’inizio alla fine, relativa all’origine della freccia.
`h`	Differenza nella posizione dell’asse x della freccia dall’inizio alla fine, relativa all’origine della freccia.

Rettangolo

Attributo	Descrizione
`x`	Coordinata x dell’angolo superiore sinistro del rettangolo.
`y`	Coordinata y dell’angolo superiore sinistro del rettangolo.
`w`	Larghezza del rettangolo, relativa all’origine del rettangolo superiore sinistro.
`h`	Altezza del rettangolo, relativa all’origine del rettangolo superiore sinistro.
`ix`	L’origine x del disegno del rettangolo (non richiesta).
`iy`	L’origine y del disegno del rettangolo (non richiesta).
`radius`	Raggio dell’arrotondamento degli angoli del rettangolo. Deve essere un numero positivo. I valori superiori a 150 sono visivamente indistinguibili.

Linea

Attributo	Descrizione
`x1`	Coordinata x dell’origine della linea.
`y1`	Coordinata y dell’origine della linea.
`x2`	Coordinata x del termine della linea. Valore assoluto sul piano dell’immagine.
`y2`	Coordinata y del termine della linea. Valore assoluto sul piano dell’immagine.

Esempio semplice: il piano delle coordinate

{"annotation": "[{\"tool\":\"line\",\"color\":\"#E74A3C\",\"size\":3,\"x1\":0.0028530670470756064,\"y1\":0.012680297987002695,\"x2\":0.9964336661911555,\"y2\":0.9903312727849104},{\"tool\":\"line\",\"color\":\"#34A3DB\",\"size\":3,\"x1\":0.004992867332382311,\"y1\":0.98779521318751,\"x2\":0.9942938659058488,\"y2\":0.012680297987002695}]}

1 {
2     "annotation": [
3         {
4             "tool": "line",
5             "color": "#E74A3C",
6             "size": 3,
7             "x1": 0.0028530670470756064,
8             "y1": 0.012680297987002695,
9             "x2": 0.9964336661911555,
10             "y2": 0.9903312727849104
11         },
12         {
13             "tool": "line",
14             "color": "#34A3DB",
15             "size": 3,
16             "x1": 0.004992867332382311,
17             "y1": 0.98779521318751,
18             "x2": 0.9942938659058488,
19             "y2": 0.012680297987002695
20         }
21     ]
22 }

Suddivisione

1 {
2    "tool":"line",
3    "color":"#34A3DB",
4    "size":3,
5    "x1":0.004992867332382311,
6    "y1":0.98779521318751,
7    "x2":0.9942938659058488,
8    "y2":0.012680297987002695
9 }

1 {
2    "tool":"line",
3    "color":"#E74A3C",
4    "size":3,
5    "x1":0.0028530670470756064,
6    "y1":0.012680297987002695,
7    "x2":0.9964336661911555,
8    "y2":0.9903312727849104
9 }

Esempio complesso: molte caselle

{"annotation": "[{\"tool\":\"rect\",\"color\":\"#34A3DB\",\"size\":3,\"x\":0.008426966292134831,\"y\":0.02663337494798169,\"w\":0.0702247191011236,\"h\":0.10986267166042447,\"ix\":0.008426966292134831,\"iy\":0.02663337494798169,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#1ABCA1\",\"size\":3,\"x\":0.8932584269662921,\"y\":0.0449438202247191,\"w\":0.08895131086142327,\"h\":0.35122763212650854,\"ix\":0.8932584269662921,\"iy\":0.0449438202247191,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#E67422\",\"size\":3,\"x\":0.023408239700374533,\"y\":0.7873491468997087,\"w\":0.1254681647940075,\"h\":0.2047440699126093,\"ix\":0.023408239700374533,\"iy\":0.7873491468997087,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#E74A3C\",\"size\":3,\"x\":0.6919475655430711,\"y\":0.5409904286308781,\"w\":0.29868913857677903,\"h\":0.4427798585101955,\"ix\":0.6919475655430711,\"iy\":0.5409904286308781,\"radius\":8},{\"tool\":\"arrow\",\"color\":\"#E74A3C\",\"size\":3,\"x\":0.25374531835205993,\"y\":0.23137744486059092,\"w\":0.24250936329588013,\"h\":0}]}"

1 {
2     "annotation": [
3         {
4             "tool": "rect",
5             "color": "#34A3DB",
6             "size": 3,
7             "x": 0.008426966292134831,
8             "y": 0.02663337494798169,
9             "w": 0.0702247191011236,
10             "h": 0.10986267166042447,
11             "ix": 0.008426966292134831,
12             "iy": 0.02663337494798169,
13             "radius": 8
14         },
15         {
16             "tool": "rect",
17             "color": "#1ABCA1",
18             "size": 3,
19             "x": 0.8932584269662921,
20             "y": 0.0449438202247191,
21             "w": 0.08895131086142327,
22             "h": 0.35122763212650854,
23             "ix": 0.8932584269662921,
24             "iy": 0.0449438202247191,
25             "radius": 8
26         },
27         {
28             "tool": "rect",
29             "color": "#E67422",
30             "size": 3,
31             "x": 0.023408239700374533,
32             "y": 0.7873491468997087,
33             "w": 0.1254681647940075,
34             "h": 0.2047440699126093,
35             "ix": 0.023408239700374533,
36             "iy": 0.7873491468997087,
37             "radius": 8
38         },
39         {
40             "tool": "rect",
41             "color": "#E74A3C",
42             "size": 3,
43             "x": 0.6919475655430711,
44             "y": 0.5409904286308781,
45             "w": 0.29868913857677903,
46             "h": 0.4427798585101955,
47             "ix": 0.6919475655430711,
48             "iy": 0.5409904286308781,
49             "radius": 8
50         },
51         {
52             "tool": "arrow",
53             "color": "#E74A3C",
54             "size": 3,
55             "x": 0.25374531835205993,
56             "y": 0.23137744486059092,
57             "w": 0.24250936329588013,
58             "h": 0
59         }
60     ]
61 }

Suddivisione

Tenendo presente tutto questo, è utile stabilire la disposizione di ogni elemento nell’immagine mostrata in alto per sviluppare un quadro più chiaro del sistema di coordinate delle annotazioni. Tieni presente che size e radius per ciascuno dei rettangoli in questo esempio utilizzano le impostazioni predefinite dell’interfaccia utente di Frame.io.

Rettangolo blu

1 {
2    "tool":"rect",
3    "color":"#34A3DB",
4    "size":3,
5    "x":0.008426966292134831,
6    "y":0.02663337494798169,
7    "w":0.0702247191011236,
8    "h":0.10986267166042447,
9    "ix":0.008426966292134831,
10    "iy":0.02663337494798169,
11    "radius":8
12 }

Rettangolo verde

1 {
2    "tool":"rect",
3    "color":"#1ABCA1",
4    "size":3,
5    "x":0.8932584269662921,
6    "y":0.0449438202247191,
7    "w":0.08895131086142327,
8    "h":0.35122763212650854,
9    "ix":0.8932584269662921,
10    "iy":0.0449438202247191,
11    "radius":8
12 }

Rettangolo rosso

1 {
2    "tool":"rect",
3    "color":"#E74A3C",
4    "size":3,
5    "x":0.6919475655430711,
6    "y":0.5409904286308781,
7    "w":0.29868913857677903,
8    "h":0.4427798585101955,
9    "ix":0.6919475655430711,
10    "iy":0.5409904286308781,
11    "radius":8
12 }

Rettangolo arancione

1 {
2    "tool":"rect",
3    "color":"#E67422",
4    "size":3,
5    "x":0.023408239700374533,
6    "y":0.7873491468997087,
7    "w":0.1254681647940075,
8    "h":0.2047440699126093,
9    "ix":0.023408239700374533,
10    "iy":0.7873491468997087,
11    "radius":8
12 }

Freccia rossa

1 {
2    "tool":"arrow",
3    "color":"#E74A3C",
4    "size":3,
5    "x":0.25374531835205993,
6    "y":0.23137744486059092,
7    "w":0.24250936329588013,
8    "h":0
9 }