Region Plotter

Drawing a Polygon

Set the edition mode on (Edit button)
Click to mark the first node
Drag from an extremity node to create a new segment
The polygon is closed when the new segment ends on one of the extremities

Modifying a Polygon

Set the edition mode on (Edit button)
Drag a node to move it
Drag a node onto one of its neighbours to remove it
Drag from a segment to add a node

Buttons

Browse: Mouse event are trapped by Aladin
Edit: Drawing mode, the Aladin view is frozen
Center/Ed. Frame Center the view in the current polygon or on the edition frame
Clear Remove the current polygon
Accept Invoke the user handler with the current state of the Polygon

Using an Edition Frame

Edition frames are polygons, drawn in blue an not editable, marking the area where polygons can be drawn
They are just helper, there is no check whether the current drawing is out
They can only be set by the API
When an edition frame is set, the Center button, renamed as Ed. Frame, centers the view on it

Predefined Polygons:

Predefined Edition Frames:

The following links must be prepended to the HTML page hosting the tool.
There no minified version right now.
The JS code is based on JQuery.

			<link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.js" charset="utf-8"></script>
<script type="text/javascript" src="saadajsbasics/javascript/Segment.js" charset="utf-8"></script>
<script type="text/javascript" src="saadajsbasics/javascript/AstroCoo.js" charset="utf-8"></script>
<script type="text/javascript" src="saadajsbasics/javascript/RegionEditor_m.js" charset="utf-8"></script>
<script type="text/javascript" src="saadajsbasics/javascript/RegionEditor_v.js" charset="utf-8"></script>
<script type="text/javascript" src="saadajsbasics/javascript/RegionEditor_c.js" charset="utf-8"></script>

The region editor must be initialized in the $.ready() JQuery handler.

The first parameter is the id of the host div. Try to resize that div with height = width + 70 in order to have a square view, otherwise, you can run in trouble with the edition frames.
If you are invoking the tool in a popup, make sure not to restart Aladin each time the window is open. It is safer to use the HTML visibility instead of adding an new frame to the DOM.
The second parameter is the user handler. It is invoked when clicking on the Accept button while the polygon is closed. The description of the polygon is passed as a handler parameter.

			$.ready = function() {
    regionEditor = new RegionEditor_mVc("aladin-lite-div"
            , function(data) {
               if (data.userAction)
		          alert(JSON.stringify(data));
               });
    regionEditor.init();
	}

The JSON below show the way polygons are described.
Sometime, the user handler can be called automatically. These possibly spurious events can be filtered by the userAction flag. The size given here is just a indication; the real size is computed by the tool each time it needs it.

			{ "isReady":true,
  "userAction":true,
  "region":{
       "format":"array2dim",
       "points":[[12.88371,-11.182474],[345.964137,-9.737165],[352.89423,10.130681],[12.883716,-11.182474]],
       "size":{"x":19.989480,"y":21.313155}}
   }

A polygon can be drawn by the API:

			regionEditor.setInitialValue(points);

where points has the following form:

			{
type : "array",
value : [ 0, 89, 120, 89, 240, 89 ]
}

Edition frames can also be drawn by the API:

			regionEditor.setEditionFrame(points);

where points can either have the previous form or the following one:

			{
type : "soda",
value : "POLYGON 0 89 120, 89 240 89"
}

Region Editor