ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-04-20 14:24:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add keyboard and mouse annotator shortcuts (#23)

Browse Source
This commit is contained in:
pollfly 2021-07-25 14:59:37 +03:00 committed by GitHub
parent a8802194b9
commit 6fc8c1d175
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
docs/hyperdatasets/webapp/webapp_datasets_frames.md
View File

@ -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) Before opening the frame viewer, you can filter the frames by applying [simple](#simple-frame-filtering) or [advanced](#advanced-frame-filtering)
filtering logic. filtering logic.
![image](../../img/hyperdatasets/frames_01.png) ![Dataset page](../../img/hyperdatasets/frames_01.png)
## Frame viewer ## 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)), 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 metadata, the raw data source URI, as well as providing navigation and viewing tools.
![image](../../img/hyperdatasets/web-app/dataset_example_frame_editor.png) ![Frame viewer](../../img/hyperdatasets/web-app/dataset_example_frame_editor.png)
### Frame viewer controls ### Frame viewer controls
Use frame viewer controls to navigate between frames in a Dataset Version, and control frame changes and viewing. Use frame viewer controls to navigate between frames in a Dataset Version, and control frame changes and viewing.
|Control Icon|Actions| |Control Icon|Actions|Shortcut|
|-----|------| |-----|------|----|
|<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-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" 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-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" className="icon size-md space-sm" />|Go to the previous frame (Left Arrow).| |<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" className="icon size-md space-sm" />|Go to the next frame (Right 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" 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-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" className="icon size-md space-sm" />|Jump forwards (CTRL + Right). Jumps 5 frames forwards.| |<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" className="icon size-md space-sm" />|Reload the frame.| |<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" className="icon size-md space-sm" />|Undo changes.| |<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" className="icon size-md space-sm" />|Redo changes.| |<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" className="icon size-md space-sm" />|Autofit| |<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" className="icon size-md space-sm" />|Zoom in| |<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" className="icon size-md space-sm" />|Zoom out| |<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| |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 ### 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 Click the FrameGroup in the Dataset. In the frame viewer, select SingleFrame to view / modify from
a dropdown list in the **Current Source** section. a dropdown list in the **Current Source** section.
![image](../../img/hyperdatasets/framegroup_01.png) ![Frame dropdown menu in FrameGroup](../../img/hyperdatasets/framegroup_01.png)
## Filtering frames ## Filtering frames
### Simple frame filtering ### Simple frame filtering
@ -86,7 +112,7 @@ For example:
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_01.png) ![Unfiltered version browser](../../img/hyperdatasets/frame_filtering_01.png)
</div> </div>
@ -99,7 +125,7 @@ For example:
<summary className="cml-expansion-panel-summary">View a screenshot</summary> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_02.png) ![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png)
</div> </div>
</details> </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> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_03.png) ![Adding an ROI rule](../../img/hyperdatasets/frame_filtering_03.png)
</div> </div>
</details> </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> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_04.png) ![Add label to ROI rule](../../img/hyperdatasets/frame_filtering_04.png)
</div> </div>
</details> </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> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_05.png) ![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png)
</div> </div>
</details> </details>
@ -178,7 +204,7 @@ Filter by metadata using Lucene queries.
<summary className="cml-expansion-panel-summary">View a screenshot</summary> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_08.png) ![Filter by metadata ](../../img/hyperdatasets/frame_filtering_08.png)
</div> </div>
</details> </details>
@ -190,7 +216,7 @@ Filter by metadata using Lucene queries.
<summary className="cml-expansion-panel-summary">View a screenshot</summary> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_09.png) ![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png)
</div> </div>
</details> </details>
@ -207,7 +233,7 @@ Filter by sources using Lucene queries.
<summary className="cml-expansion-panel-summary">View a screenshot</summary> <summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content"> <div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_10.png) ![Filter by source](../../img/hyperdatasets/frame_filtering_10.png)
</div> </div>
</details> </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: 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. 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. 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. 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. keypoint onto the frame. After the clicking the last keypoint, click the first again to close the bounding area.
A new annotation is created. 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:** **To copy an annotation:**
1. Click the annotation or bounded area in the image or video clip. 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. Optionally, navigate to a different frame.
1. Click **PASTE**. The new annotation appears in the same location as the one you copied. 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. 1. Optionally, to paste the same annotation, click **PASTE** again in the desired frame.