SpeciesFileGroup/svg-detailer

Name: svg-detailer

Owner: Species File Group

Description: A native javascript library for annotating images, with results exportable as SVG elements.

Created: 2016-04-01 16:32:53.0

Updated: 2016-05-05 03:37:42.0

Pushed: 2016-06-01 12:20:35.0

Homepage:

Size: 68

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

svg-detailer

A dependency free javascript library for annotating images, with results exportable as SVG elements.

Overview

Svg-detailer provides the basic functionality to annotate a base image with SVG elements, using an editing paradigm similar to that of Google Maps Drawing Manager. The general goal is to enable the user to define shapes, and export the individual elements as SVG elements that will be peristed/handled by external code. The working area and background image for a browser window are specified through data- elements of a containing <div>. Invocation of the library causes DOM elements to be created in two parts: the <svg> itself within the container <div>, and the menu <div> populated by default elements as well as data- elements specifying what shape types are to be available. The image is initially presented at its minimal full extent within the containing <div>, scaled according to aspect ratio and pixel extent to fit the working area description. Dynamic zooming through mouse gestures is continuously available when the mouse is within the working area. When the drawing mode is effectively idle in “MOVE”, dragging any point repositions the base image within the working area.

Currently, the SVG element types supported are: text, polyline, polygon, line, rectangle, circle, and ellipse, as well as pseudo-functions “arrow”, quadratic and cubic Bezier curves, and “draw” freehand sketch. “Draw” is actually realized as a polyline, rather than the SVG element <path>. Additionally, the quadratic and cubic curves are realized as degenerate cases of <path>. For purposes of element organization and editing convenience, group, <g>, elements are used to contain graphic elements

Present limitations exist for element details, where only the “stroke” color attribute is controllable. Other styling attributes such as “fill”, “stroke-opacity”, “fill-opacity”, and “stroke-width” are fixed at this time. When a suitable editing framework is developed, these attributes will be changeable within the library's context.

Element editing is currently continuously active, effected through mouse events.

User interface

SVG elements are created by selecting an element type from the button menu and clicking on the working image area. Some variation in mouse down vs click and double-click exists on an element-type basis:

• A <line> is created by clicking the first point, and dragging to the end point, terminating on mouse up. This paradigm is shared by <rect>angle, <circle>, <ellipse>, “draw”, and “arrow”.
• <polyline> and <polygon> use a “tethered” paradigm where each mouse click registers a new point, terminated by double-click or “Enter”/“Return”.
• <text> elements are created by clicking to specify the baseline point and then typing on the keyboard. Either the native key input handler can be used, or the Mousetrap library can be used, although the latter has not had any testing since the dependency was removed. Text input is terminated by shift-Enter.

Editing is enabled through mouseover events on the <g> groups containing elements. Similarly to map drawing element editing, “bubbles” appear at control points appropriate to the given element. On mouse down on these bubbles, dragging the point relocates it for the element. Due to the definition of rectangle, circle, ellipse, and text, moving their base-point effectively relocates the element. The other line- or poly- based elements have only individually controllable points currently, although functions to move the element as a whole are in the works. Polyline, polygon, and “draw” elements have “insertion” points depicted at the midpoint of each segment to allow refinement of the shape. Each such insertion offers new insertion points, none of which persist unless used.

Hot keys:

• Return/Enter - Double click, except fot text, where it is CR/LF, and shift-Enter is used for element completion)
• Escape - Undo the current point being created. Polylines and polygons benefit most from this feature, in that the entire element can be backtracked to nothing. The intention is to extend this to points being edited as well.
• Shift-Delete - Remove the highlighted element completely
• Control-B - Move the highlighted element to the “bottom” of the stack (aids editing overlapping elements)
• Control-T - Move the highlighted element to the “top” of the stack

Demo

Here.

Funding

This project was funded in part by NSF-ABI-1356381. Any opinions, findings and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.