JS SVG overlay framework [outline]

[mjy]

We'll likely have to break this down to individual tasks, but I'll do my best to outline things here.

Background

We create SVG elements locally, then load them to mx, and overlay them on images. The general problem is one of dynamically rendering SVG elements on top of an image in the browser.

Model

1. Images have_many Figures have many FigureMarkers
2. FigureMarker#svg contain valid SVG elements, as validated in part by the configuration in evironment.RB

   Implementation Overview

3. See http://mx.phenomix.org/index.php/App/figure/annotate and http://mx.phenomix.org/index.php/Create_SVG_in_Illustrator
4. See also examples in project 32
   • See blue overlays on Figures tab, notice that they scale as the figure expands
   • We can combine SVG: Figures tab, navigate to end of list, then click 'Image' for one of the figures. Click 'Figure markers' to see multiple FigureMarkers rendered on a single image. 3) We use svgweb as implemented in public/old_javascripts/mx_svgweb.js,

     Tasks

5. Get the existing functionality working in mx3 by validating that the existing js library works under the jQuery paradigm
   • Display a Figure (Image + FigureMarkers) by rendering the SVG
   • Add/remove the SVG from a FigureMarker dynamically to an image already on the page (see the form for adding a new FigureMarker)
   • Add multiple SVG elements according to the example in Image->Show->"figure markers"
   • New functionality
   • SVG elements need to have customizable jQuery binds for mouse-over and mouse-click events, we need possible modal popups for both event types
6. Explore refactoring using HTML5 rather than svgweb (which I'm happy to continue to use). It would be awesome if this would work, this is one of the few cases we need to be truly cross-platform compatible.
7. Explore refactoring using jQuery

[caryfitzhugh]

Have you considered just doing the SVG editing inside the browser?

If all you need to do is create an annotation by selecting a color for it - then plotting some points -- I'm pretty sure it'd be straightforward to create the overlays in the browser.

What other things would you need to do ? Draw a line?

Looks like you need to support:

• a point (e.g. an arrow)
• a line (e.g. a measurement)
• an area (e.g. highlighted region)
• a volume (e.g. a 3D model)

I can envision all of those but the 3d model.... I'm going to look around a bit.

[mjy]

Hehe- I almost added that we wouldn't be considering such for the existin task. We have indeed considered such, and in fact used a plugin to do so a while back. We spent a lot of time looking for other plugins that would give use the accuracy we needed, none really do, and the overhead to developing the code ourselves is not worth the power/flexibility we have in the existing approach, at least not at present. So- this is definitely not a priority now, down the road we might reconsider such, but it's very likely not going to happen for a long time.

[caryfitzhugh]

Raphael.js -- we can export it to SVG with this plugin: https://github.com/jspies/raphael.serialize

Here is a simple JS library to draw things: https://gist.github.com/673186

I put this together just now which draws paths, circles, squares, and can export to a JSON blob, or SVG. I can think of adding annotations like text, little arrows, lines with notes, etc. etc. etc. All somewhat simple....

https://gist.github.com/2015072

I believe it is rough - but was pretty darned simple, and I think solves all the issues.

The only one I could come up with next was that you may want to zoom in on an image -- but that is sortof easily done anyway in JS -- but you may not need to.. might be able to just zoom with the browser?

Let me know... thanks. Cary

[caryfitzhugh]

Ha. ok. sounds good.