Adding Annotation Tool for Images #3727
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Instructions: In order to instantiate the tool head over to Advanced Settings for the course and add "imageannotation" to the advanced_modules key. Then create a new unit. An "Advanced" large green button should show up that when clicked will allow you to select the "Image Annotation" option. It will show a default testing image. Make sure that the annotation_storage_url and annotation_secret_token are filled in with test values in the course's Advanced Settings.
Background: This is a key chunk for the May 20th push. It follows the previous 3 chunks (#3466, #3480, and #3529).
Goal of this PR: This PR introduces the image annotation tool. It follows the exact same format as the text and video annotation tools and reuses some of the same files. The key goal here is to provide the user the ability to select rectangular chunks of an image and add a comment via a tinymce input widget. The rest of the tool works the same way as the text and video ones (e.g. the annotation gets put into a table below which allows for replies and editing, etc.)
Studio Updates: The functionality should follow the one from the text and video annotations. You should be able to go to the module settings and change the image via a json chunk that will be provided to the instructor.
LMS Updates: This PR will allow students to annotate images. Follow the guidelines below for thorough checking.
Testing notes: Studio team should follow the "Instructions" above to instantiate the tool. Then both Studio and LMS should do the following:
1. Does the Image show up? Image should display. You should be able to zoom and pan depending on the resolution and even fullscreen it. There should be a small navigator window that can be used to pan and buttons for zooming in and out.
2. Can you annotate? Hit the "Create annotation" button and there should be a green border signifying that it is editable. The cursor should change to crosshairs. Now click and drag a portion of the image to create an annotation. The annotation widget should pop up with a tinymce editor. Use this to create an annotation and hit "Save." Now whenever you hover over the higlighted block you should see a pop-up that shows the annotation. You can edit or delete on that pop-up viewer.
3. Did it store? You should be able to see the annotation in the table below (even after refreshing). You should be able to click open the row to show more information. Here you should be able to edit or even delete the annotation from here. The other functionality is also being able to reply to it. Once you hit the reply link a pop up should show up that will contain another tinymce editor to which you can type in a reply. After it is created a new link should show up that says "Show/Hide Replies."