mirror of
https://github.com/clearml/clearml-docs
synced 2025-04-07 14:44:52 +00:00
Add keyboard and mouse annotator shortcuts (#23)
This commit is contained in:
parent
a8802194b9
commit
6fc8c1d175
@ -7,7 +7,7 @@ of frames and enables viewing SingleFrames and FramesGroups, and edit SingleFram
|
||||
Before opening the frame viewer, you can filter the frames by applying [simple](#simple-frame-filtering) or [advanced](#advanced-frame-filtering)
|
||||
filtering logic.
|
||||
|
||||

|
||||

|
||||
|
||||
## Frame viewer
|
||||
|
||||
@ -15,27 +15,53 @@ Frame viewer allows you to view and edit annotations which can be FrameGroup obj
|
||||
labels applied to the entire frame not a region of the frame, the frame details (see [frames](../frames.md)),
|
||||
frame metadata, the raw data source URI, as well as providing navigation and viewing tools.
|
||||
|
||||

|
||||

|
||||
|
||||
### Frame viewer controls
|
||||
|
||||
Use frame viewer controls to navigate between frames in a Dataset Version, and control frame changes and viewing.
|
||||
|
||||
|Control Icon|Actions|
|
||||
|-----|------|
|
||||
|<img src="/docs/latest/icons/ico-skip-backward.svg" className="icon size-md space-sm" />|Jump backwards (CTRL + Left). Jumps backwards by five frames.|
|
||||
|<img src="/docs/latest/icons/ico-skip-previous.svg" className="icon size-md space-sm" />|Go to the previous frame containing a non-filtered annotation. The filter is the minimum confidence level setting. If the confidence level filter is set to zero, any frame containing annotations matches the filter.|
|
||||
|<img src="/docs/latest/icons/ico-arrow-left.svg" className="icon size-md space-sm" />|Go to the previous frame (Left Arrow).|
|
||||
|<img src="/docs/latest/icons/ico-arrow-right.svg" className="icon size-md space-sm" />|Go to the next frame (Right Arrow).|
|
||||
|<img src="/docs/latest/icons/ico-skip-next.svg" className="icon size-md space-sm" />|Go to the next frame containing a non-filtered annotation (same filter as <img src="/docs/latest/icons/ico-skip-previous.svg" className="icon size-md space-sm" />).|
|
||||
|<img src="/docs/latest/icons/ico-skip-forward.svg" className="icon size-md space-sm" />|Jump forwards (CTRL + Right). Jumps 5 frames forwards.|
|
||||
|<img src="/docs/latest/icons/ico-revert.svg" className="icon size-md space-sm" />|Reload the frame.|
|
||||
|<img src="/docs/latest/icons/ico-undo.svg" className="icon size-md space-sm" />|Undo changes.|
|
||||
|<img src="/docs/latest/icons/ico-redo.svg" className="icon size-md space-sm" />|Redo changes.|
|
||||
|<img src="/docs/latest/icons/ico-reset_1.svg" className="icon size-md space-sm" />|Autofit|
|
||||
|<img src="/docs/latest/icons/ico-zoom-in.svg" className="icon size-md space-sm" />|Zoom in|
|
||||
|<img src="/docs/latest/icons/ico-zoom-out.svg" className="icon size-md space-sm" />|Zoom out|
|
||||
|Percentage textbox|Zoom percentage|
|
||||
|Control Icon|Actions|Shortcut|
|
||||
|-----|------|----|
|
||||
|<img src="/docs/latest/icons/ico-skip-backward.svg" alt="Jump backwards icon" className="icon size-md space-sm" />| Jumps backwards ten frames | CTRL + Left arrow |
|
||||
|<img src="/docs/latest/icons/ico-skip-previous.svg" alt="Jump to previous unfiltered annotation" className="icon size-md space-sm" />|Go to the previous frame containing a non-filtered annotation. The filter is the minimum confidence level setting. If the confidence level filter is set to zero, any frame containing annotations matches the filter.| <img src="/docs/latest/icons/ico-optional-no.svg" alt="Not applicable" className="icon size-md center-md" /> |
|
||||
|<img src="/docs/latest/icons/ico-arrow-left.svg" alt="Previous frame icon" className="icon size-md space-sm" />|Go to the previous frame | Left arrow |
|
||||
|<img src="/docs/latest/icons/ico-arrow-right.svg" alt="Next frame icon" className="icon size-md space-sm" />|Go to the next frame | Right arrow |
|
||||
|<img src="/docs/latest/icons/ico-skip-next.svg" alt="Jump to next unfiltered annotation" className="icon size-md space-sm" />|Go to the next frame containing a non-filtered annotation (same filter as <img src="/docs/latest/icons/ico-skip-previous.svg" alt="Jump to previous unfiltered annotation" className="icon size-md space-sm" />).| <img src="/docs/latest/icons/ico-optional-no.svg" alt="Not applicable" className="icon size-md center-md" /> |
|
||||
|<img src="/docs/latest/icons/ico-skip-forward.svg" alt="Jump forwards icon" className="icon size-md space-sm" />|Jump forwards ten frames | CTRL + Right arrow |
|
||||
|<img src="/docs/latest/icons/ico-revert.svg" alt="Reload frame icon" className="icon size-md space-sm" />|Reload the frame.| <img src="/docs/latest/icons/ico-optional-no.svg" alt="Not applicable" className="icon size-md center-md" /> |
|
||||
|<img src="/docs/latest/icons/ico-undo.svg" alt="Undo icon" className="icon size-md space-sm" />|Undo changes.|Ctrl + Z|
|
||||
|<img src="/docs/latest/icons/ico-redo.svg" alt="Redo icon" className="icon size-md space-sm" />|Redo changes.|Ctrl + Y|
|
||||
|<img src="/docs/latest/icons/ico-reset_1.svg" alt="Autofit icon" className="icon size-md space-sm" />|Autofit| <img src="/docs/latest/icons/ico-optional-no.svg" alt="Not applicable" className="icon size-md center-md" /> |
|
||||
|<img src="/docs/latest/icons/ico-zoom-in.svg" alt="Zoom in icon" className="icon size-md space-sm" />|Zoom in| **+** or Ctrl + Mouse wheel|
|
||||
|<img src="/docs/latest/icons/ico-zoom-out.svg" alt="Zoom out icon" className="icon size-md space-sm" />|Zoom out| **-** or Ctrl + Mouse wheel |
|
||||
|Percentage textbox|Zoom percentage| <img src="/docs/latest/icons/ico-optional-no.svg" alt="Not applicable" className="icon size-md center-md" /> |
|
||||
|
||||
#### Additional keyboard shortcuts
|
||||
|
||||
**General controls**
|
||||
|
||||
|Control|Action|
|
||||
|----|-----|
|
||||
|Hold Spacebar + Press and hold image + Drag| Move around image. NOTE: If using a touchpad, this only works if the *Disable touchpad while typing* setting is turned off |
|
||||
|Esc | Escape frame viewer and return to dataset page |
|
||||
|
||||
**General annotation controls**
|
||||
|
||||
|Control|Action|
|
||||
|----|-----|
|
||||
| Delete | Remove annotation |
|
||||
| Alt + ] / [ | Choose a default ROI label by navigating between previous / next labels |
|
||||
| Shift + M | Edit metadata |
|
||||
| Shift + Tab | Previous annotation (use after clicking an annotation) |
|
||||
|
||||
**Mode-specific annotation controls**
|
||||
|
||||
|Control |Mode |Action|
|
||||
|----|-----|----|
|
||||
| Hold Shift | Key points (<img src="/docs/latest/icons/ico-keypoint-icon-purple.svg" alt="Key points mode" className="icon size-md space-sm" />) | While holding Shift, add new points to the ROI by left clicking, and move a single point by dragging it with your mouse |
|
||||
| Enter | Key points (<img src="/docs/latest/icons/ico-keypoint-icon-purple.svg" alt="Key points mode" className="icon size-md space-sm" />) | Complete annotation |
|
||||
| Esc | Key points (<img src="/docs/latest/icons/ico-keypoint-icon-purple.svg" alt="Key points mode" className="icon size-md space-sm" />), Polygon (<img src="/docs/latest/icons/ico-polygon-icon-purple.svg" alt="Polygon mode" className="icon size-md space-sm" />) | Cancel annotation process |
|
||||
|
||||
### Viewing and editing frames
|
||||
|
||||
@ -66,7 +92,7 @@ Viewing and editing frames in a FrameGroup is similar to viewing and editing Sin
|
||||
Click the FrameGroup in the Dataset. In the frame viewer, select SingleFrame to view / modify from
|
||||
a dropdown list in the **Current Source** section.
|
||||
|
||||

|
||||

|
||||
|
||||
## Filtering frames
|
||||
### Simple frame filtering
|
||||
@ -86,7 +112,7 @@ For example:
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||
|
||||

|
||||

|
||||
|
||||
|
||||
</div>
|
||||
@ -99,7 +125,7 @@ For example:
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -138,7 +164,7 @@ where each frame filter can be a combination of ROI, frame, and source rules.
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -149,7 +175,7 @@ where each frame filter can be a combination of ROI, frame, and source rules.
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -161,7 +187,7 @@ where each frame filter can be a combination of ROI, frame, and source rules.
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -178,7 +204,7 @@ Filter by metadata using Lucene queries.
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -190,7 +216,7 @@ Filter by metadata using Lucene queries.
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -207,7 +233,7 @@ Filter by sources using Lucene queries.
|
||||
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
|
||||
<div className="cml-expansion-panel-content">
|
||||
|
||||

|
||||

|
||||
|
||||
</div>
|
||||
</details>
|
||||
@ -227,16 +253,16 @@ You can add annotations by drawing new bounding areas, and copying existing anno
|
||||
|
||||
1. Click one of the following modes and create a bounding area in the frame:
|
||||
|
||||
* <img src="/docs/latest/icons/ico-rectangle-icon-purple.svg" className="icon size-md space-sm" /> - Rectangle mode: Drag a
|
||||
* <img src="/docs/latest/icons/ico-rectangle-icon-purple.svg" alt="Rectangle mode icon" className="icon size-md space-sm" /> - Rectangle mode: Drag a
|
||||
rectangle onto the frame.
|
||||
|
||||
* <img src="/docs/latest/icons/ico-ellipse-icon-purple.svg" className="icon size-md space-sm" /> - Ellipse mode: Drag an ellipse
|
||||
* <img src="/docs/latest/icons/ico-ellipse-icon-purple.svg" alt="Ellipse mode icon" className="icon size-md space-sm" /> - Ellipse mode: Drag an ellipse
|
||||
onto the frame.
|
||||
|
||||
* <img src="/docs/latest/icons/ico-polygon-icon-purple.svg" className="icon size-md space-sm" /> - Polygon mode: Click the polygon
|
||||
* <img src="/docs/latest/icons/ico-polygon-icon-purple.svg" alt="Polygon mode icon" className="icon size-md space-sm" /> - Polygon mode: Click the polygon
|
||||
vertices onto the frame.
|
||||
|
||||
* <img src="/docs/latest/icons/ico-keypoint-icon-purple.svg" className="icon size-md space-sm" /> - Key points mode: Click each
|
||||
* <img src="/docs/latest/icons/ico-keypoint-icon-purple.svg" alt="Key points mode icon" className="icon size-md space-sm" /> - Key points mode: Click each
|
||||
keypoint onto the frame. After the clicking the last keypoint, click the first again to close the bounding area.
|
||||
|
||||
A new annotation is created.
|
||||
@ -250,6 +276,8 @@ You can add annotations by drawing new bounding areas, and copying existing anno
|
||||
**To copy an annotation:**
|
||||
|
||||
1. Click the annotation or bounded area in the image or video clip.
|
||||
1. In the annotation, click <img src="/docs/latest/icons/ico-copy-to-clipboard.svg" alt="Copy annotation icon" className="icon size-md space-sm" />
|
||||
(copy annotation)
|
||||
1. Optionally, navigate to a different frame.
|
||||
1. Click **PASTE**. The new annotation appears in the same location as the one you copied.
|
||||
1. Optionally, to paste the same annotation, click **PASTE** again in the desired frame.
|
||||
|
Loading…
Reference in New Issue
Block a user