Colored problem markers for respective category

[SanchitAggarwal]

Implement color markers for each category of problems and ability to remove the marks.

Needs: 1) Addition of collapsable nodes(squared box) for each mark on the canvas. 2) Change in the marker imprint module, instead a box will be added on the clicked pixel. 3) Table/ JSON to store different color for respective problem categories.

I am using JSPlumb to implement this http://jsplumbtoolkit.com/demo/home/dom.html. Any suggestions ?

[pmelchior]

I don't think you need a full-blown graph library for the functionality. I'm thinking of something much lighter, such as http://qtip2.com/demos. If you check out the "Positioning" section, there is a good example. I'm thinking of inserting a SVG shape (say a small "X" or something similar) onto of the image for each problem mark (there is already a canvas to hold these shapes), and then to attach a qtip to it. The color of the "X" would depend on the problem category, so provide a quick visual clue that works even without the tooltip.

The difficulty is to insert & remove the qtips on the loaded page whenever the user marks a problem, or when he loads the previously known problems.

[SanchitAggarwal]

I have added the patch for color markers with qtips on my experimental branch. Kindly review.

[pmelchior]

I will go through your changes, but not before Wednesday.

[pmelchior]

I had a first look at your changes today. That's a good start. I like the way the "x" on the image is linked to the qTip. Also, the different colors are nice. I would like the "x" to be somewhat larger (maybe 150% of what you currently have) and the colors to be somewhat brighter, but this is something we can easily fix later.

I have some comments regarding the general setup and your work here. They're not directly tied to specific aspects of the code, so I'll comment here.

• The ReportCanvas does not work as expected. While it is fully functional, it is shown below the OverlayCanvas, that means the marks are not on top of the image. This is because both divs have disply:block and no absolute positioning, therefore the second div is pushed to the bottom. When I place the div element on top of the image (with position:absolute; top:0px), it also sits on top of the ReportCanvas so that the mouse-over event of any marks in the latter does not trigger anymore. I think that the implementation with the mouse-over does not allow for two layered divs. I suggest that you try to work with one div, namely OverlayCanvas and distinguish between the users marks and the reported problems by assigning class="report" so that you can toggle the display of them. This is also more elegant and lighter than what we have right now because it works with only one extra div.
• You changed several files to 755 file permissions. That should not be necessary at all, please undo.
• Please remove the commented pieces of code that are scattered around in the viewer code if you don't need them any longer.