ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-04-29 10:44:35 +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)
filtering logic.
![image](../../img/hyperdatasets/frames_01.png)
![Dataset page](../../img/hyperdatasets/frames_01.png)
## 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.
![image](../../img/hyperdatasets/web-app/dataset_example_frame_editor.png)
![Frame viewer](../../img/hyperdatasets/web-app/dataset_example_frame_editor.png)
### 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.
![image](../../img/hyperdatasets/framegroup_01.png)
![Frame dropdown menu in FrameGroup](../../img/hyperdatasets/framegroup_01.png)
## Filtering frames
### Simple frame filtering
@ -86,7 +112,7 @@ For example:
<div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_01.png)
![Unfiltered version browser](../../img/hyperdatasets/frame_filtering_01.png)
</div>
@ -99,7 +125,7 @@ For example:
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../../img/hyperdatasets/frame_filtering_02.png)
![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png)
</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">
![image](../../img/hyperdatasets/frame_filtering_03.png)
![Adding an ROI rule](../../img/hyperdatasets/frame_filtering_03.png)
</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">
![image](../../img/hyperdatasets/frame_filtering_04.png)
![Add label to ROI rule](../../img/hyperdatasets/frame_filtering_04.png)
</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">
![image](../../img/hyperdatasets/frame_filtering_05.png)
![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png)
</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">
![image](../../img/hyperdatasets/frame_filtering_08.png)
![Filter by metadata ](../../img/hyperdatasets/frame_filtering_08.png)
</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">
![image](../../img/hyperdatasets/frame_filtering_09.png)
![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png)
</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">
![image](../../img/hyperdatasets/frame_filtering_10.png)
![Filter by source](../../img/hyperdatasets/frame_filtering_10.png)
</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.