mx3/mx — Issue #50: JS SVG overlay framework [outline]
Author: mjy
Created: 2012-02-27 17:58:22+00:00
State: open
Labels: tasks

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#
1) See http://mx.phenomix.org/index.php/App/figure/annotate and http://mx.phenomix.org/index.php/Create_SVG_in_Illustrator
2) 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#
1. 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"
2. 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
3. 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.
4. Explore refactoring using jQuery