edx/edx-platform — pull request #5603 by lduarte1991 (2014-10-16 16:05:07+00:00)
Title: Image Annotation Tool: Border and tag-based coloring

This addresses the Feature Request **[TNL-596]**.
**Affected Courses:** 4 courses are affected (PoetryX, HeroesX, Visualizing Japan, ChinaX) with a total enrollment 47,000 students.
**Ideal Fix Deployment:** Week of November 2nd.

**Background:** This is the last feature request for the Annotation tools before a feature lock to work on reorganizing the code, creating proper and adequate documentation and testing. There is now a working document for testing the tools in a live setting found [here](https://docs.google.com/document/d/10BcGZRlOHTyBiBsk6OreUXzkU3m8Ju2K6hGic6Lw-9k/edit#).

**Studio Changes:** None.

**LMS Changes:** Note the [feature request](https://openedx.atlassian.net/browse/TNL-596). Here are screenshots of things you should now see:
1. In the Image Annotation Tool, you should see a white and black border around selections now. This is to help in black/white images where the dark border might fade into the background.
![Double borders](http://i.imgur.com/Oy5CA1K.jpg)
2. In the Image Annotation Tool, if you put in a tag you should now see the border change to the appropriate color (it takes a second to wait for a response from the annotation server) and it changes the tag to the same color:
![colored borders and tags](http://i.imgur.com/LLYPsNz.jpg)
3. 2 minor CSS changes which will be noted in line comments within the code changes. One to add the missing icon for resizing the text box:
![resize image](http://i.imgur.com/LPHZv4q.png)
And the other one is to make the reply box the same size as the box when you create an annotation, i.e. shorter as it usually goes off the page:
![resize reply editor](http://i.imgur.com/odkDO57.png)
4. These will be noted in the code as well, 2 small oversights causing issues: First, even though TinyMCE is now loaded if you enter and exit full screen mode in the image annotation, apparently hitting ESC is a different call, so I've extended TinyMCE to be reloaded if a user hits escape. Second, our backend developer noted that users would sometimes hit errors when trying to create annotations within text that included tags. I've created a basic stupid check to make sure I'm sending the right information. He's creating a fix on his end to double the stupid check to make sure it doesn't happen even if it slips through a crack from my end.

**Testing:**
1. Install the [tarball](https://www.dropbox.com/s/r684ber7z4ddqtc/2014_T4.DPRfFs.tar.gz) as usual.
2. In the image annotation tool create an annotation. It should contain a black/white double border.
3. Add a predeterminted tag (it should autocomplete if you start typing either "teachingAssistant" or "professor") and it should change the color of the border as well as the tag in the viewer that pops up if you scroll over it.
4. Refresh the page to make sure it still works and is being saved on the backend
5. Hit the reply button. Note that the resize image and the width of the box are as shown in the images above.
6. Open up the image in fullscreen mode (there's a button next to the "Annotate" button). Once there hit escape or select "Exit fullscreen". Try creating an annotation and see if you can type into the editor. Before once you were out of fullscreen mode and tried to create an annotation it would not allow anything to be typed into the editor. Now it should work as intended.