Several improvements to the label video page.

[lizlooney]

Fixed issue 160 Ghosting With Bounding Boxes

Fixed issue 161 Differentiating Bounding Boxes Differentitate bounding boxes by using different colors. Show label above the bounding box.

Fixed issue 162 Bounding Box Deselects When Cursor Goes Off Screen Cursor may go out of the window while creating or resizing a bounding box.

Fixed issue 180 Able to Create Invalid Bounding Box Don't let user make invalid boxes. Correct invalid boxes created by tracker.

Fixed issue 181 Problem with counting unlabeled and labeled frames Don't save a box if it doesn't have a label.

Added code to show vertical and horizontal lines as the mouse moves above the image.

[uvidyadharan]

Fixed issue 160 Ghosting With Bounding Boxes:

• Works great

Fixed issue 161 Differentiating Bounding Boxes:

• Works well generally

• Has trouble dealing with long labels (lack of limit on labels though that is not necessarily supposed to be addressed by this PR)

  • Can go offscreen especially when close to edges

  • Overlapping labels are a bit wonky

  • Minor but consider rounding the edges label boxes on image

Fixed issue 162 Bounding Box Deselects When Cursor Goes Off Screen

• For normal use case works great
• Possibly has bug in which a new bounding box is created when coming back onto the screen. It only happens in certain cases but may be my mouse having issues.
• If the mouse is moved too fast off the screen it will leave the corner not at the edge of the screen but a bit before. As you move the mouse slower it gets closer to the screen. This is perhaps something to do with the refresh rate.

https://user-images.githubusercontent.com/55924756/141238786-3181affd-c13d-4b26-882d-64b027f762f9.mp4

Fixed issue 180 Able to Create Invalid Bounding Box

• Works perfectly

Fixed issue 181 Problem with counting unlabeled and labeled frames

• Works well for the most part
• Was able to find bug where negative unlabeled frames were found. Still working on replication.

Added code to show vertical and horizontal lines as the mouse moves above the image.

• What purpose do the lines serve?

[lizlooney]

What purpose do the lines serve?

Someone (maybe Danny) saw them here and asked if I could add them.

[lizlooney]

Minor but consider rounding the edges label boxes on image

I've changed the code to use beveled corners (instead of rounded) on the bounding box. Because it gets scaled down, sometimes the rounded corners disappear and look like normal corners. When beveled corners are scaled down, they look round.

I've also updated the rectangle round the label text to have beveled corners (which look rounded).

[lizlooney]

If the mouse is moved too fast off the screen it will leave the corner not at the edge of the screen but a bit before.

I've fixed that.

[uvidyadharan]

The new chamfered edges work perfectly. However I have found a new problem at low resolutions. The edges of the bounding box become translucent and the label becomes illegible. In addition the sides of bounding box and the vertical and horizontal lines become very wide. This is probably due to them being set at a static pixel width regardless of image resolution. This was mentioned in issue #160 .

- Image at 320 x 240

[github-actions[bot]]

Terraform plan Succeeded for Workspace: default

Show Output

```diff An execution plan has been generated and is shown below. Resource actions are indicated with the following symbols: ! update in-place -/+ destroy and then create replacement Terraform will perform the following actions: # module.dev.google_app_engine_standard_app_version.fmltc-app-v1 will be updated in-place ! resource "google_app_engine_standard_app_version" "fmltc-app-v1" { id = "apps/ftc-ml-firstinspires-dev/services/default/versions/v1" name = "apps/ftc-ml-firstinspires-dev/services/default/versions/v1" # (9 unchanged attributes hidden) ! deployment { ! zip { ! source_url = "https://storage.googleapis.com/ftc-ml-firstinspires-dev-gae-source/4032562990f461dff8db14a8380b4c71.zip" -> "https://storage.googleapis.com/ftc-ml-firstinspires-dev-gae-source/26e6a3990b1e3d14484fa5e49f85e596.zip" # (1 unchanged attribute hidden) } } - handlers { - auth_fail_action = "AUTH_FAIL_ACTION_REDIRECT" -> null - login = "LOGIN_OPTIONAL" -> null - security_level = "SECURE_OPTIONAL" -> null - url_regex = ".*" -> null - script { - script_path = "auto" -> null } } # (9 unchanged blocks hidden) } # module.dev.google_cloudfunctions_function.perform-action will be updated in-place ! resource "google_cloudfunctions_function" "perform-action" { id = "projects/ftc-ml-firstinspires-dev/locations/us-central1/functions/perform_action" name = "perform_action" ! source_archive_object = "32cb43d94dad24abe092b3d47046d762.zip" -> "f600d9afb83b0b526f015b8c195aca2e.zip" # (13 unchanged attributes hidden) # (2 unchanged blocks hidden) } # module.dev.google_storage_bucket_object.app-server-archive must be replaced -/+ resource "google_storage_bucket_object" "app-server-archive" { ! content_type = "application/zip" -> (known after apply) ! crc32c = "3qyTOA==" -> (known after apply) ! detect_md5hash = "QDJWKZD0Yd/42xSoOAtMcQ==" -> "different hash" # forces replacement - event_based_hold = false -> null ! id = "ftc-ml-firstinspires-dev-gae-source-4032562990f461dff8db14a8380b4c71.zip" -> (known after apply) + kms_key_name = (known after apply) ! md5hash = "QDJWKZD0Yd/42xSoOAtMcQ==" -> (known after apply) ! media_link = "https://storage.googleapis.com/download/storage/v1/b/ftc-ml-firstinspires-dev-gae-source/o/4032562990f461dff8db14a8380b4c71.zip?generation=1636567919170965&alt=media" -> (known after apply) - metadata = {} -> null ! name = "4032562990f461dff8db14a8380b4c71.zip" -> "26e6a3990b1e3d14484fa5e49f85e596.zip" # forces replacement ! output_name = "4032562990f461dff8db14a8380b4c71.zip" -> (known after apply) ! self_link = "https://www.googleapis.com/storage/v1/b/ftc-ml-firstinspires-dev-gae-source/o/4032562990f461dff8db14a8380b4c71.zip" -> (known after apply) ! storage_class = "STANDARD" -> (known after apply) - temporary_hold = false -> null # (2 unchanged attributes hidden) } # module.dev.google_storage_bucket_object.closure_js must be replaced -/+ resource "google_storage_bucket_object" "closure_js" { ! crc32c = "yCOgRQ==" -> (known after apply) ! detect_md5hash = "fkdjQP6RQ84MW2sxPrap9w==" -> "different hash" # forces replacement - event_based_hold = false -> null ! id = "ftc-ml-firstinspires-dev-compiled/js/fmltc.js" -> (known after apply) + kms_key_name = (known after apply) ! md5hash = "fkdjQP6RQ84MW2sxPrap9w==" -> (known after apply) ! media_link = "https://storage.googleapis.com/download/storage/v1/b/ftc-ml-firstinspires-dev/o/compiled%2Fjs%2Ffmltc.js?generation=1636567919125026&alt=media" -> (known after apply) - metadata = {} -> null name = "compiled/js/fmltc.js" ! output_name = "compiled/js/fmltc.js" -> (known after apply) ! self_link = "https://www.googleapis.com/storage/v1/b/ftc-ml-firstinspires-dev/o/compiled%2Fjs%2Ffmltc.js" -> (known after apply) ! storage_class = "STANDARD" -> (known after apply) - temporary_hold = false -> null # (3 unchanged attributes hidden) } # module.dev.google_storage_bucket_object.cloud-function-archive must be replaced -/+ resource "google_storage_bucket_object" "cloud-function-archive" { ! content_type = "application/zip" -> (known after apply) ! crc32c = "b+fK1g==" -> (known after apply) ! detect_md5hash = "MstD2U2tJKvgkrPUcEbXYg==" -> "different hash" # forces replacement - event_based_hold = false -> null ! id = "ftc-ml-firstinspires-dev-gcf-source-32cb43d94dad24abe092b3d47046d762.zip" -> (known after apply) + kms_key_name = (known after apply) ! md5hash = "MstD2U2tJKvgkrPUcEbXYg==" -> (known after apply) ! media_link = "https://storage.googleapis.com/download/storage/v1/b/ftc-ml-firstinspires-dev-gcf-source/o/32cb43d94dad24abe092b3d47046d762.zip?generation=1636567919087314&alt=media" -> (known after apply) - metadata = {} -> null ! name = "32cb43d94dad24abe092b3d47046d762.zip" -> "f600d9afb83b0b526f015b8c195aca2e.zip" # forces replacement ! output_name = "32cb43d94dad24abe092b3d47046d762.zip" -> (known after apply) ! self_link = "https://www.googleapis.com/storage/v1/b/ftc-ml-firstinspires-dev-gcf-source/o/32cb43d94dad24abe092b3d47046d762.zip" -> (known after apply) ! storage_class = "STANDARD" -> (known after apply) - temporary_hold = false -> null # (2 unchanged attributes hidden) } # module.dev.google_storage_bucket_object.styles must be replaced -/+ resource "google_storage_bucket_object" "styles" { ! crc32c = "ukkonA==" -> (known after apply) ! detect_md5hash = "eKhBURJBR7t39pIlC4MDfQ==" -> "different hash" # forces replacement - event_based_hold = false -> null ! id = "ftc-ml-firstinspires-dev-static/css/styles.css" -> (known after apply) + kms_key_name = (known after apply) ! md5hash = "eKhBURJBR7t39pIlC4MDfQ==" -> (known after apply) ! media_link = "https://storage.googleapis.com/download/storage/v1/b/ftc-ml-firstinspires-dev/o/static%2Fcss%2Fstyles.css?generation=1634776319797602&alt=media" -> (known after apply) - metadata = {} -> null name = "static/css/styles.css" ! output_name = "static/css/styles.css" -> (known after apply) ! self_link = "https://www.googleapis.com/storage/v1/b/ftc-ml-firstinspires-dev/o/static%2Fcss%2Fstyles.css" -> (known after apply) ! storage_class = "STANDARD" -> (known after apply) - temporary_hold = false -> null # (3 unchanged attributes hidden) } Plan: 4 to add, 2 to change, 4 to destroy. ```