diff --git a/site/content/en/docs/manual/advanced/context-images.md b/site/content/en/docs/manual/advanced/context-images.md index 79277aee..ecb689e1 100644 --- a/site/content/en/docs/manual/advanced/context-images.md +++ b/site/content/en/docs/manual/advanced/context-images.md @@ -1,38 +1,107 @@ --- -title: 'Context images for 2d task' +title: 'Context images' linkTitle: 'Context images' weight: 26 -description: 'Adding additional contextual images to a task.' +description: 'Context images of the task' --- -When you create a task, you can provide the images with additional contextual images. -To do this, create a folder related_images and place a folder with a contextual image in it -(make sure the folder has the same name as the image to which it should be tied). -An example of the structure: - -- root_directory - - image_1_to_be_annotated.jpg - - image_2_to_be_annotated.jpg - - related_images/ - - image_1_to_be_annotated_jpg/ - - context_image_for_image_1.jpg - - image_2_to_be_annotated_jpg/ - - context_image_for_image_2.jpg - - subdirectory_example/ - - image_3_to_be_annotated.jpg - - related_images/ - - image_3_to_be_annotated_jpg/ - - context_image_for_image_3.jpg - -The contextual image is displayed in the upper right corner of the workspace. -You can hide it by clicking on the corresponding button or maximize the image by clicking on it. - -![contex_images_1](/images/image212_mapillary_vistas.jpg) - -When the image is maximized, you can rotate it clockwise/counterclockwise and zoom in/out. -You can also move the image by moving the mouse while holding down the LMB -and zoom in/out by scrolling the mouse wheel. -To close the image, just click the `X`. - -![contex_images_2](/images/image213_mapillary_vistas.jpg) +Context images are additional images that provide +context or additional information related to the primary image. +Use them to add extra context about the object to improve the accuracy of annotation. + +Context images are available for 2D and 3D tasks. + +See: + +- [Folder structure](#folder-structure) +- [Data format](#data-format) +- [Context images](#context-images) + +## Folder structure + +To add contextual images to the task, you need to organize +the images folder. + +Before uploading the archive to CVAT, do the following: + +1. In the folder with the images for annotation, create a folder: `related_images`. +2. Add to the `related_images` a subfolder with the same name + as the primary image to which it should be linked. +3. Place the context image(s) within the subfolder created in step 2. +4. Add folder to the archive. +5. [Create task](/docs/manual/basics/create_an_annotation_task/#create-a-task). + +## Data format + +Example file structure for 2D and 3D tasks: + +{{< tabpane >}} +{{< tab header="2D task" >}} + root_directory + image_1_to_be_annotated.jpg + image_2_to_be_annotated.jpg + related_images/ + image_1_to_be_annotated_jpg/ + context_image_for_image_1.jpg + image_2_to_be_annotated_jpg/ + context_image_for_image_2.jpg + subdirectory_example/ + image_3_to_be_annotated.jpg + related_images/ + image_3_to_be_annotated_jpg/ + context_image_for_image_3.jpg +{{< /tab >}} +{{< tab header="3D task" >}} + root_directory + image_1_to_be_annotated.pcd + image_2_to_be_annotated.pcd + related_images/ + image_1_to_be_annotated_pcd/ + context_image_for_image_1.jpg + image_2_to_be_annotated_pcd/ + context_image_for_image_2.jpg +{{< /tab >}} +{{< /tabpane >}} + +For more general information about 3D data formats, +see [3D data formats](/docs/manual/basics/create_an_annotation_task/#data-formats-for-a-3d-task). + +## Context images + +The maximum amount of context images is twelve. + +By default they will be positioned on the right side of the main image. + +> **Note:** By default, only three context images will be visible. + +![contex_images_1](/images/context_img_01.jpg) + +When you add context images to the set, small toolbar will appear on the top of the screen, with the following elements: + + + +| Element | Description | +| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![contex_images_4](/images/context_img_04.jpg) | **Fit views**. Click to restore the layout to its original appearance.

If you've expanded any images in the layout, they will returned to their original size.

This won't affect the number of context images on the screen. | +| ![contex_images_5](/images/context_img_05.jpg) | **Add new image**. Click to add context image to the layout. | +| ![contex_images_6](/images/context_img_06.jpg) | **Reload layout**. Click to reload layout to the default view.

Note, that this action can change the number of context images reseting them back to three. | + + + +Each context image has the following elements: + +![contex_images_2](/images/context_img_02.jpg) + + + +| Element | Description | +| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| 1 | **Full screen**. Click to expand the context image in to the full screen mode.

Click again to revert context image to windowed mode. | +| 2 | **Move context image**. Hold and move context image to the other place on the screen.

![contex_images_3](/images/context_img_03.gif) | +| 3 | **Name**. Unique context image name | +| 4 | **Select context image**. Click to open a horisontal listview of all available context images.

Click on one to select. | +| 5 | **Close**. Click to remove image from context images menu. | +| 6 | **Extend** Hold and pull to extend the image. | + + diff --git a/site/content/en/images/context_img_01.jpg b/site/content/en/images/context_img_01.jpg new file mode 100644 index 00000000..5a7d2d8f Binary files /dev/null and b/site/content/en/images/context_img_01.jpg differ diff --git a/site/content/en/images/context_img_02.jpg b/site/content/en/images/context_img_02.jpg new file mode 100644 index 00000000..c1d958f4 Binary files /dev/null and b/site/content/en/images/context_img_02.jpg differ diff --git a/site/content/en/images/context_img_03.gif b/site/content/en/images/context_img_03.gif new file mode 100644 index 00000000..3f9451de Binary files /dev/null and b/site/content/en/images/context_img_03.gif differ diff --git a/site/content/en/images/context_img_04.jpg b/site/content/en/images/context_img_04.jpg new file mode 100644 index 00000000..93190181 Binary files /dev/null and b/site/content/en/images/context_img_04.jpg differ diff --git a/site/content/en/images/context_img_05.jpg b/site/content/en/images/context_img_05.jpg new file mode 100644 index 00000000..42f8f76d Binary files /dev/null and b/site/content/en/images/context_img_05.jpg differ diff --git a/site/content/en/images/context_img_06.jpg b/site/content/en/images/context_img_06.jpg new file mode 100644 index 00000000..a07873b3 Binary files /dev/null and b/site/content/en/images/context_img_06.jpg differ diff --git a/site/content/en/images/image212_mapillary_vistas.jpg b/site/content/en/images/image212_mapillary_vistas.jpg deleted file mode 100644 index 57446956..00000000 Binary files a/site/content/en/images/image212_mapillary_vistas.jpg and /dev/null differ diff --git a/site/content/en/images/image213_mapillary_vistas.jpg b/site/content/en/images/image213_mapillary_vistas.jpg deleted file mode 100644 index 08174d22..00000000 Binary files a/site/content/en/images/image213_mapillary_vistas.jpg and /dev/null differ