Workflows - Assets

Utilisation des annotation

Aperçu

Dans Frame.io, les annotation sont représentées sous la forme d’un blob JSON sérialisé d’objets de dessin, avec les couleurs, les coordonnées et les tailles. Dans le blob, tous les guillemets, à l’exception de la paire de délimitation extérieure, sont échappés avec des barres obliques (par exemple, \"key\":\"value\"). Il y a trois formes de base — arrow, rect et line — ainsi que le dessin à main levée, qui sort du cadre de ce Guide, mais suit les mêmes principes de base des données de coordonnées sérialisées.

Le système de coordonnées

Toutes les formes sont placées sur un système de coordonnées cartésien avec une origine en haut à gauche, et une échelle de 0 à 1 sur chaque axe.

<img alt=“coordinate_plane.png” src=“file:docs/pages/v2/images/3ebc4c8-coordinate_plane.png”>

Données de forme de base

Toutes les formes sont placées sur le plan ci-dessus avec une combinaison de coordonnées et de données de style. Chaque forme a quelques attributs communs, puis chacune a une façon légèrement différente d’adresser le système de coordonnées.

Tous les attributs pour la distance/largeur/hauteur utilisent la même échelle de 0 à 1 que la grille de coordonnées principale elle-même, mais sont généralement marqués à partir du point d’origine de la forme.

En d’autres termes, si une vidéo est affichée dans un viewport de 640x480, x=1 équivaudra à 640px absolus dans ce contexte. Cela permet aux annotation de s’adapter de manière transparente tout en conservant leur position relative lorsque l’écran de visualisation, la taille et le contexte changent. Remarque : l’origine d’un rect est toujours le coin supérieur gauche de la forme, quel que soit l’origine du dessin.

Attributs communs

AttributDescription
outilarrow, rect ou line. Indique quelle forme est créée.
colorCouleur hexadécimale à six chiffres pour la forme.
sizeTaille en pixel pour la ligne de la forme. ```json { “trancreatedText”: [ “Pour les flèches, ceci fait uniquement référence au début de la ligne, car la largeur de fin est déterminée par programmation.

Flèche

AttributDescription
xCoordonnée x de l’origine de la flèche.
yCoordonnée y de l’origine de la flèche.
wDifférence de position de la flèche sur l’axe y du début à la fin, par rapport à l’origine de la flèche.
hDifférence de position de la flèche sur l’axe x du début à la fin, par rapport à l’origine de la flèche.

Rectangle

AttributDescription
xCoordonnée x du coin supérieur gauche du rectangle.
yCoordonnée y du coin supérieur gauche du rectangle.
wLargeur du rectangle, par rapport à l’origine du rectangle supérieur gauche.
hHauteur du rectangle, par rapport à l’origine du rectangle supérieur gauche.
ixL’origine x de dessin du rectangle.(Non requis).
iy” ] } ```L’origine y du dessin du rectangle. (Non requis).
RayonRayon de l’arrondi des coins du rectangle. Doit être positif. Les valeurs supérieures à 150 sont visuellement indiscernables.

Ligne

AttributDescription
x1Coordonnée x de l’origine de la ligne.
y1Coordonnée y de l’origine de la ligne.
x2Coordonnée x de l’extrémité de la ligne. Valeur absolue sur le plan de l’image.
y2Coordonnée y de l’extrémité de la ligne. Valeur absolue sur le plan de l’image.

Exemple simple : le plan de coordonnées

<img alt=“plane-example.png” src=“file:docs/pages/v2/images/70fcb27-plane_example.png”>

{"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}

Répartition

<img alt=“blue-plane.png” src=“file:docs/pages/v2/images/7cb29dd-plane_ex_blue.png”>

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}

<img alt=“plane-example-red.png” src=“file:docs/pages/v2/images/192a62c-plane_ex_red.png”>

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}

Exemple complexe : de nombreuses boîtes

<img alt=“lots-of-boxes.png” src=“file:docs/pages/v2/images/2d48957-annotation_boxes.png”>

{"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}

Répartition

Avec tout cela à l’esprit, il est utile de détailler chaque élément de l’image ci-dessus pour développer une vision plus claire du système de coordonnées de l’annotation.Notez que la taille et le Rayon de chacun des rectangles dans cet exemple utilisent les paramètres par défaut de l’interface utilisateur Frame.io.

Rectangle bleu

<img alt=“blue-box.png” src=“file:docs/pages/v2/images/825bd31-box_blue.png”>

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}

Rectangle vert

<img alt=“box-green.png” src=“file:docs/pages/v2/images/d031284-box_green.png”>

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}

Rectangle rouge

<img alt=“red-box.png” src=“file:docs/pages/v2/images/4d40db2-box_red.png”>

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}

Rectangle orange

<img alt=“orange-box.png” src=“file:docs/pages/v2/images/2690187-box_orange.png”>

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}

Flèche rouge

<img alt=“red-arrow.png” src=“file:docs/pages/v2/images/9ac2bb6-arrow_red.png”>

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}