edx/edx-platform — pull request #3727 by lduarte1991 (2014-05-14 19:44:57+00:00)
Title: Adding Annotation Tool for Images

**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."