Update item Side panel in User guide (#1513)

* Update item Side panel in User guide

* Removed trailing spaces in an Object sidebar item

* Update cvat/apps/documentation/user_guide.md

* fix typo

* missing image correction

Co-authored-by: Nikita Manovich <40690625+nmanovic@users.noreply.github.com>
main
TOsmanov 6 years ago committed by GitHub
parent 380be58edc
commit 42fb305d67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

@ -16,8 +16,9 @@
- [Vocabulary](#vocabulary)
- [Workspace](#workspace)
- [Settings](#settings)
- [Bottom Panel](#bottom-panel)
- [Side panel](#side-panel)
- [Top Panel](#top-panel)
- [Controls sidebar](#controls-sidebar)
- [Objects sidebar](#objects-sidebar)
- [Objects](#objects)
- [Labels](#labels)
- [Bottom side panel](#bottom-side-panel)
@ -780,106 +781,170 @@ Switching between user interface modes.
![](static/documentation/images/image145.jpg)
---
### Side panel
### Objects sidebar
``Hide`` - the button hides the object's sidebar.
![](static/documentation/images/image146.jpg)
#### Objects
In the side panel you can see the list of available objects on the current
frame. The following figure is an example of how a list might look like:
| Annotation mode | Interpolation mode |
|-- |-- |
| ![](static/documentation/images/image044.jpg) | ![](static/documentation/images/image045.jpg) |
**Filter** input box
#### Labels
You can also see all labels that were used on this frame and highlight them clicking on a label you need
![](static/documentation/images/image059.jpg)
![](static/documentation/images/image062.jpg)
The way how to use filters is described in the advanced guide [here](#filter).
**List of objects**
![](static/documentation/images/image147.jpg)
- Switch lock property for all - switches lock property of all objects in the frame.
- Switch hidden property for all - switches hide property of all objects in the frame.
- Expand/collapse all - collapses/expands the details field of all objects in the frame.
- Sorting - sort the list of objects: updated time, ID - accent, ID - descent
In the objects sidebar you can see the list of available objects on the current
frame. The following figure is an example of how the list might look like:
| Shape mode | Track mode |
|-- |-- |
| ![](static/documentation/images/image044.jpg) | ![](static/documentation/images/image045.jpg) |
---
**Objects** on the side bar
A shape can be removed. Shortcut: ``Delete``. You can delete a locked shape using the ``Shift+Delete`` shortcut.
The type of a shape can be changed by selecting **Label** property. For instance, it can look like shown on the figure below:
![](static/documentation/images/image047.jpg)
![](static/documentation/images/image050.jpg)
**Object action menu**
The action menu calls up the button:
![](static/documentation/images/image047.jpg)
The action menu contains:
- ``Create object URL`` - puts a link to an object on the clipboard. After you open the link, this object will be filtered.
- ``Make a copy``- copies an object. The keyboard shortcut is ``Ctrl + C`` ``Ctrl + V``.
- ``Propagate`` - Сopies the form to several frames,
invokes a dialog box in which you can specify the number of copies
or the frame onto which you want to copy the object. The keyboard shortcut ``Ctrl + B``.
![](static/documentation/images/image053.jpg)
- ``To background`` - moves the object to the background. The keyboard shortcut ``-``,``_``.
- ``To foreground`` - moves the object to the foreground. The keyboard shortcut ``+``,``=``.
- ``Remove`` - removes the object. The keyboard shortcut ``Del``,``Shift+Del``.
---
A shape can be locked to prevent its modification or moving by an accident. Shortcut to lock an object: ``L``.
![](static/documentation/images/image046.jpg)
---
A shape can be **Occluded**. Shortcut: ``Q``. Such shapes have dashed boundaries.
![](static/documentation/images/image048.jpg)
![](static/documentation/images/image049.jpg)
![](static/documentation/images/image049_DETRAC.jpg)
---
You can copy and paste an object in a particular frame. The keyboard
shortcuts ``Ctrl + C`` / ``Ctrl + V`` work when you hover over an object
You can change the way an object is displayed on a frame (show or hide).
![](static/documentation/images/image055.jpg)
``Switch pinned property`` - when enabled, a shape cannot be moved by dragging or dropping.
![](static/documentation/images/image052.jpg)
---
You can propagate an object in the following X frames. The keyboard
shortcut ``Ctrl + B`` works when you hover the mouse over an object. You can
change the number of propagating frames in the bottom panel.
You can change an object's color.
To do so, click on the color bar of the object and select a color from the palette that appears.
![](static/documentation/images/image153.jpg)
By clicking on the ``Details`` button you can collapse or expand the field with all the attributes of the object.
![](static/documentation/images/image053.jpg)
![](static/documentation/images/image154.jpg)
---
You can change the way an object is displayed on a frame.
It could be hide, shows only box, shows box and title. ``H`` is for this
object, ``T+H`` for all objects on this frame.
![](static/documentation/images/image055.jpg)
#### Labels
You can also change the color of any object to random, to do so just hover
the mouse over the object on the frame and highlight them by clicking on a label you need.
In this tab, you can lock or hide objects of a certain label.
![](static/documentation/images/image062.jpg)
---
The type of a shape can be changed selecting **Label** property. For instance, it can look like on the figure below:
![](static/documentation/images/image050.jpg)
#### Appearance
To change a type of a highlighted shape using keyboard, you need to press ``Shift+<number>``.
**Color By** options
### Bottom side panel
Change the color scheme of annotation:
- ``Instance`` — every shape has random color
- ``Create Shape`` (``N``) — start/stop drawing new shape mode
- ``Merge Shapes`` (``M``) — start/stop merging shapes mode
- ``Group Shapes`` (``G``) — start/stop grouping shapes mode
- ``Label Type`` — (e.g. face, person, vehicle)
- ``Working Mode`` — Annotation or Interpolation modes. You can't interpolate
polygons/polylines/points, but you can propagate them using ``Ctrl+B`` or
merge into a track
- ``Shape Type`` — (e.g. box, polygon, polyline, points)
- ``Poly Shape Size`` — (optional) hard number of dots for creating polygon, polyline and points shapes
![](static/documentation/images/image095_DETRAC.jpg)
![](static/documentation/images/image082.jpg)
- ``Group`` — every group of shape has its own random color, ungrouped shapes are white
### Fullscreen player mode
![](static/documentation/images/image094_DETRAC.jpg)
Go to ``Open Menu`` —> ``Fullscreen Player``
Exit with ``F11`` or ``Ecs``.
- ``Label`` — every label (e.g. car, person) has its own random color
This is how it looks like.
![](static/documentation/images/image093_DETRAC.jpg)
![](static/documentation/images/image043.jpg)
You can change any random color pointing to a needed box on a frame or on an
object sidebar.
## Annotation mode (advanced)
**Fill Opacity** slider
Basic operations in the mode were described above.
Change the opacity of every shape in the annotation.
![](static/documentation/images/image086_DETRAC.jpg)
**Selected Fill Opacity** slider
Change the opacity of the selected object's fill.
![](static/documentation/images/image089_DETRAC.jpg)
**Black Stroke** checkbox
Changes the shape border from colored to black.
![](static/documentation/images/image088_DETRAC.jpg)
**Show bitmap** checkbox
If enabled all shapes are displayed in white and the background is black.
![](static/documentation/images/image087_DETRAC.jpg)
**Show projections** checkbox
Enables / disables the display of auxiliary perspective lines. Only relevant for cuboids
![](static/documentation/images/image090_DETRAC.jpg)
---
## Shape mode (advanced)
Basic operations in the mode were described in section [shape mode (basics)](#shape-mode-basics).
**Occluded** attribute is used if an object is occluded by another object or
**Occluded**
Occlusion is an attribute used if an object is occluded by another object or
isn't fully visible on the frame. Use ``Q`` shortcut to set the property
quickly.
![](static/documentation/images/image065.jpg)
Example: both cars on the figure below should be labeled as **occluded**.
Example: the three cars on the figure below should be labeled as **occluded**.
![](static/documentation/images/image054.jpg)
![](static/documentation/images/image054_mapillary_vistas.jpg)
If a frame contains too many objects and it is difficult to annotate them
due to many shapes that are placed mostly in the same place, it makes sense
due to many shapes placed mostly in the same place, it makes sense
to lock them. Shapes for locked objects are transparent, and it is easy to
annotate new objects. Besides, you can't change previously annotated objects
by accident. Shortcut: ``L``.

Loading…
Cancel
Save