I was asked by Jeremy to give one of the talks at the beginning of the hack day, so I chatted a bit about the work we’ve done with astrometry.net to tag Flickr photos with their celestial locations — astrotagging.

Introducing astrotags

At the Royal Observatory, Greenwich, we’ve set up a Flickr group for our photography competition, Astronomy Photographer of the Year. Photos in the group are being scanned by the astrometry.net bot, which identifies stars in a photo then solves for celestial coordinates by comparison with a reference catalogue. Astrometry.net leaves a comment on each photo, listing the coordinates of the image and the names of objects within the field of view. The comments are relatively easy to parse, and I’ve written a small utility to extract information from commented photos. However, this is the sort of problem that’s ideally suited to machine tags so we asked astrometry.net to add tags to photos in our group using the astro: prefix. The tags are:

astro:RA

Right Ascension of the centre of the photo.

astro:dec

Declination of the centre of the photo.

astro:orientation

Orientation of the photo from North, in degrees.

astro:fieldsize

Angular extent of the photo, East-West × North-South.

astro:name

Named objects in the field. One tag per name.

Some good examples of tagged photos are:

• Horsehead Nebula
• Eta Carina Nebula
• Summer Triangle and Milky Way

The simplest way to get at these machine tags and use them in your own applications is with YQL, which allows you to query the flickr search and photo info APIs using a simple, SQL-like syntax. To make life easier, I’ve written a YQL open table, flickr.photos.astro, which can be queried to return a feed of astronomical coordinates and info for a set of Flickr photos.

select * from flickr.photos.astro where astro_name = 'Horsehead Nebula'

That query, for example, returns a feed of photos tagged astro:name=’Horsehead Nebula’. For some other examples, have a look at my post on searching astro:name with YQL.

My hack

Astrometry.net have solved almost 7,000 photos on Flickr, but only around 600 of those have been tagged with astro: machine tags. For my hack, I decided to try making a YQL table based on screen-scraping Flickr for information left by the astrometry.net robot. I took the code from my astrotagging web form and put together flickr.photos.astrometry, a YQL open table that can parse astrometry information from Flickr comments. The input parameter is a Flickr photo page URL, so a query looks like

select * from flickr.photos.astrometry where url = 'http://www.flickr.com/photos/dangerous_astro/4722913544/'

This returns a feed of the coordinates and names found on that page.

To demo this, I hacked together a little javascript astronomy photo search engine. You pass in a search query in the URL:

http://eatyourgreens.org.uk/yql/scihackday.html?text=milky+way

That text is then used to run a Flickr search and grab up to 30 photos, shown as thumbnails. The search is limited to photos which have been solved by astrometry.net, and we also request the photographer’s name so that we can credit them:

select * from flickr.photos.search(30) where text = 'milky way' and extras='owner_name' and machine_tags = 'Astrometrydotnet:status=solved'

If you don’t pass in a search query, we instead return the 30 most recent photos solved by astrometry.net.

select * from flickr.photos.search(30) where extras='owner_name' and machine_tags = 'Astrometrydotnet:status=solved'

When you select a thumbnail, by clicking on it, another YQL query is run against flickr.photos.astrometry to return the coordinates and names for that photo. The coordinates are used to plot the photo on a map of the sky, while the names are listed as links so that you can go on to search for pictures of specific objects in the field of view.

It’s quite a simple little bit of code, but hopefully it shows how useful YQL can be for accessing structured data on the web, even when that data is in HTML or plain text. If anyone does use it to build anything, Astronomy Photographer of the Year has a showcase page for mashups built using the Flickr astrometry data.

If the site user wants to pick the answer ‘Ahead’ to a question, they click this button. With jQuery, I get the value of the button (2) using var answer_id = $(this).val(). Users confirm their answer by pressing a ‘Next’ button to move onto the next question:

<button id="next" value="">Next</button>

I decided to use the ‘Next’ button to store the currently selected answer: $('#next').val(answer_id). I can then look at the value of the ‘Next’ button to decide which question to ask next when they submit an answer. All fairly straightforward HTML and JavaScript, which works in any standards-compliant web browser.

However, after launching the site we started to get strange bug reports on the Solar Stormwatch forum. Buttons were displaying numbers instead of words as their labels. Questions were repeating rather than moving onto the next question for a given answer. It turns out there is a bug in IE6 and IE7, which was being picked up by our users — IE6 and IE7 do not support the value attribute on buttons.

In IE6 and IE7, calling $(this).val() returns the text of a button — ‘Ahead’ in the example given above. Similarly, setting .val() for a button sets the button text, not its value. My first reaction was to change my jQuery code to use .attr('value') to access the value attribute instead. This runs into exactly the same underlying browser bug — .attr('value') gets and sets the button text in IE6 and 7.

To solve this, and get the questions working in IE, I ended up changing the value attribute on buttons to data-value. This is invalid in HTML 4, though it will be valid in HTML 5.

<button data-value="2">Ahead</button>

This works, however, because the default behaviour of HTML parsers in all the major browsers is the same when they encounter an attribute they don’t understand. They simply add it to the DOM as a property of the current node ie. you get something like button.data-value=2. So, wherever I had used .val() in my jQuery code, I now use .attr('data-value') to get and set the value of buttons.

I’m not hugely happy with this solution. It’s invalid HTML and relies on default error-handling behaviour in HTML parsers. It does work cross-browser, and it is robust in that HTML parsers aren’t likely to change the way they handle unrecognised attributes. I wish Internet Explorer supported the standards-compliant, valid solution though.

When the astrometry.net robot solves a photo on Flickr, it leaves a comment identifying the coordinates of the photo and listing the names of objects in the field.

Hello, this is the blind astrometry solver. Your results are:
(RA, Dec) center:(82.4668973542, 6.33857270637) degrees
(RA, Dec) center (H:M:S, D:M:S):(05:29:52.055, +6:20:18.862)
Orientation:161.45 deg E of N

Pixel scale:67.93 arcsec/pixel

Parity:Reverse (“Left-handed”)
Field size :53.14 x 39.85 degrees

Your field contains:
The star Rigel (βOri)
The star Betelgeuse (αOri)
The star Aldebaran (αTau)
The star Bellatrix (γOri)
The star Alnilam (εOri)
The star Alhena (γGem)
The star Alnitak (ζOri)
The star Saiph (κOri)
The star Mintaka (δOri)
The star Cursa (βEri)
IC 2118 / IC 2118 / Witch Head nebula
NGC 1976 / NGC 1976 / Great Nebula in Orion / M 42
NGC 1990 / NGC 1990
IC 434 / IC 434 / Horsehead nebula
IC 443 / IC 443
NGC 2264 / NGC 2264 / Christmas Tree cluster / Cone nebula

View in World Wide Telescope

—–
If you would like to have other images solved, please submit them to the astrometry group.
Posted 3 weeks ago. ( permalink | delete )

These comments are always in the same format, so it’s straightforward to parse them and extract the astrometry metadata as a list of tags. I’ve written a small form which does this, using YQL to grab the comments from a Flickr photo then parsing them using standard DOM traversal and manipulation methods.

If you have a photo which has been solved, generating tags is straightforward. Copy the address of a Flickr photo page into the tagging form and press the big blue ‘Get astrotags’ button. The script should find the comment from astrometry.net and print out the tags for celestial coordinates and names, which you can then paste into the ‘Add a tag’ form on Flickr.

The code to do this is fairly simple, and reproduced below. After initialising the page, we can take advantage of YQL’s HTML parser to fetch all of the comments for a Flickr photo page by selecting all paragraphs inside divs with a class of ‘comment-content’ at that URL.

select * from html where url='http://www.flickr.com/photos/eatyourgreens/4182924966/' and xpath='//div[@class="comment-content"]/p'

We then loop through the results of this query, looking for paragraphs which contain the text ‘blind astrometry solver’. If we have a match, we add this paragraph to the DOM so we can parse it with standard DOM methods. The code then loops through the child nodes of the comment paragraph, running regular expression matches against any text nodes it finds to extract the coordinates of the photo.

Names are slightly more tricky. For those, we grab every line of text between ‘Your field contains:’ and the line ‘—–’ above the signature, strip out whitespace, split each line on ‘/’ to get individual names and store these in an associative array, keyed on name to remove duplicates. That done, we can then just loop through the arrays of coordinates and names and print them out.

Here’s the full code:

 var url = "http://www.flickr.com/photos/skiwalker79/4174398309";
 var comment_holder;
 var position_output;
 var names_output;
 
 function init() {
   var url_input = document.getElementById('photoURL');
   var url_button = document.getElementById('updateURL');
   
   comment_holder = document.getElementById('comment');
   position_output = document.getElementById('position');
   names_output = document.getElementById('names');
   
   url_input.disabled = false;
   url_input.value = url;
   url_button.disabled = false;
   position_output.disabled = false;
   names_output.disabled = false;
   
   addEvent(url_button, 'click', function(e) {
     getFlickrPhotoComments(url_input.value);
     return false;
   });
   addEvent(url_input, 'focus', function(e) {
     url_input.select();
   });
   addEvent(position_output, 'focus', function(e) {
     position_output.select();
   });
   addEvent(names_output, 'focus', function(e) {
     names_output.select();
   });
   
   // Mark up nodes which this script updates as
   // ARIA live regions.
   comment_holder.setAttribute('aria-live', 'polite');
   position_output.setAttribute('aria-live', 'polite');
   names_output.setAttribute('aria-live', 'polite');
   
   getFlickrPhotoComments(url);    
 }

 function getFlickrPhotoComments(url) {

   // YQL query to get all comments from a Flickr photo page.
   var yql = "select * from html where url='"+url+"' and xpath='//div[@class=\"comment-content\"]/p'";
   var yql_url = 'http://query.yahooapis.com/v1/public/yql?q='+escape(yql)+'&format=xml&callback=getAstrometryComment&diagnostics=false';
   position_output.value = '';
   names_output.value = '';
   comment_holder.innerHTML = 'Looking up '+url;
   makeYQLRequest(yql_url);
 }
 
 function makeYQLRequest(yql_url) {
   var script=document.getElementById('yqlscript');
   var newscript=document.createElement('script');
   newscript.type = 'text/javascript';
   newscript.src=yql_url;
   newscript.id='yqlscript';
   document.getElementsByTagName("body")[0].removeChild(script);
   document.getElementsByTagName("body")[0].appendChild(newscript);
 }

function getAstrometryComment(data) {
  var results = data.results;
  
  var comment = 'Sorry, that photo has not been solved by <a href="http://astrometry.net">astrometry.net</a>.';
  for (var i in results) {
    var text = results[i];
    // Comments left by the solver contain the text 'blind astrometry solver'.
    if(text.match(/blind astrometry solver/gi)) {
      comment = text;
    }
  }
  parseComment(comment);
  
}

function parseComment(comment) {
  var astro = {};
  var names = {};
  var parsing_names = false;
  
  comment_holder.innerHTML = comment;
  var children = comment_holder.firstChild.childNodes;
  
  for (var i in children) {
    var child = children[i];
    var text = '';
    text = child.data;
    
    if (text) {
      if (text.match(/(RA, Dec)/g) && text.match(/degrees/g)) {
        text=text.match(/[-0-9\.]+/g);
        astro.RA = text[0];
        astro.Dec = text[1];
      } else if (text.match(/Orientation/g)) {
        text = text.match(/[-0-9\.]+/g);
        astro.orientation = text[0];
      } else if (text.match(/Pixel scale/g)) {
        text = text.match(/[0-9\.]+/g);
        astro.pixelScale = text[0];
      } else if(text.match(/Field size/g)) {
        text = text.match(/[0-9\.]+ x [0-9\.]+ (degrees|arcminutes|arcseconds)/g);
        astro.fieldsize = text[0];
      } else if(text.match(/Your field contains:/g)) {
        parsing_names = true;
      } else if (text.match(/-----/g)) {
        parsing_names = false;
      }

      if (parsing_names) {
        names = addNames(names, text);
      }
      
    }
  }

  renderPositionTags(astro);
  
  renderNameTags(names);
  
  if (astro.RA) {
    position_output.focus();
  }
}

function addNames(names, text) {
  
 text = trim(text);
 text = text.split('/');
 for (var j in text) {
   var name = text[j];
   name = trim(name);
   if (name && name !='Your field contains:'){
     names[name] = name;
   }
 }
 return names;
}

function renderPositionTags(astro) {
  
  position_output.value = '';
   for (var tag in astro) {
     position_output.value += 'astro:'+tag+'="'+astro[tag]+'" ';
   } 
}

function renderNameTags(names) {

  names_output.value = '';
   for (var name in names) {
     names_output.value += 'astro:name="'+name+'" '
   }
}

function trim(text) {
  // Trim leading and trailing whitespace from a string.
  text = text.replace(/^\s+/, '');
  text = text.replace(/\s+$/,'');
  return text;
}

function addEvent(obj, evType, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, false);
    return true;
  } else if (obj.attachEvent) {
    var r = obj.attachEvent("on" + evType, fn);
    return r;
  } else {
    return false;
  }
}

Searching astro:name with YQL, originally uploaded by Eat your greens!.

The YQL team announced personal URLs for queries this week. I’ve used the new feature to set up a shortcut for looking up photos of astronomical objects by name. The URL is:

http://queries.yahooapis.com/v1/public/yql/eatyourgreens/astrolookup?name=M+42

You can set the name parameter in the URL to change the name of the object you are looking for. I’ve also set up a demo page to render results from this query. The URL is:

http://eatyourgreens.org.uk/testapps/yql/astronamesearch.html?name=Horsehead+nebula

Again, change the name parameter in the URL to lookup different objects. Note that it looks for an exact match with the astro:name machine tag, so looking up stars is cumbersome:

http://eatyourgreens.org.uk/testapps/yql/astronamesearch.html?name=the+star+deneb+(αcyg)

Update: it seems Flickr’s machine tag search can match just the first part of a tag, so you can search for stars by supplying the first part of the tag’s value.

http://eatyourgreens.org.uk/testapps/yql/astronamesearch.html?name=the+star+deneb

I’ve also made some changes to flickr.photos.astro in order to enable faster searching by name. Use astro_name in a query to find objects by matching on astro:name:

select * from flickr.photos.astro where astro_name = 'M 31'

or use text to run a Flickr text search across photo descriptions and titles:

select * from flickr.photos.astro where text = 'orion'

If you want to see what values have been used for astro:name on Flickr, I recommend Paul Mison’s excellent machine tag browser.

If you’re interested in the nuts and bolts of the automated astrometry robot, I recommend having a look at astrometry.net and reading Making the sky searchable: Fast geometric hashing for automated astrometry.

Tom Disch: I’m writing a book about what everyone wants most.

Moorcock: Really? Is it about elephants?

Disch: Elephants? No, it’s about becoming more intelligent.

Moorcock: Oh, what I’ve always wanted most is to be an elephant.

Here’s the code, with some explanation in the comments that hopefully shows how to extract the Science Museum data from the query results and do something useful with it. The event handling code seems a little dodgy to me ( I really know very little about SVG or jQuery) but seems to work in Opera, Firefox and Safari. You can try it on the demo page. Click to pick up a photo and move it. Click again to drop it.

A small update: Here’s a second demo using drag-and-drop instead of mouse clicks. I’ve also added the focusable attribute to the SVG rectangles, to make them accessible from the keyboard. This only seems to work in Opera.

// URL of the environment file, which points to the URL
// of the nmsi.cosmosculture YQL table definition.
var env = 'http://eatyourgreens.org.uk/yql/nmsi.env';
// YQL query to select everything from the Cosmic Collections dataset.
// Change this query to change the objects displayed in the page.
var yql = "select * from nmsi.cosmosculture";
// Example alternate query - fetch everything linked to the Moon
// var yql = "select * from nmsi.cosmosculture where LinkedCelestialBodies.CelestialBody.CommonName = 'Moon'";

// Encode the query and env file URL in a call to the YQL web service.
// Specify JSON as the return format.
var url = 'http://query.yahooapis.com/v1/public/yql?q='+ encodeURIComponent(yql) + '&env='+encodeURIComponent(env)+'&diagnostics=false&format=json&callback=?';

// Set a canvas for Raphael to draw on.
var height = 600;
var width = 800;
var paper = Raphael('canvas', width, height);

// Set some global variables to use when we are dragging elements around the canvas.
var startx = 0;
var starty = 0;
var dragging = false;
var draggedSet = null;

// Call the YQL web service and pass the json result to a callback function
$.getJSON(url, function(json){
//  Get the array of museum objects from the query result.
	var items = json.query.results.MuseumObject;
// Loop through the items array
	$.each(items, function(i, item) {
// Ignore items which don't have a photo
		if(item.Image.Source){
			var src = item.Image.Source;
// The smallest available image size is 'Inline'.
			src = src.replace("Medium","Inline");
			src = 'http://www.sciencemuseum.org.uk'+src;
// Generate a random x,y position for the photo
 			var x = 10 + (width-110) * Math.random();
 			var y = 10 + (height-110) * Math.random();
// Generate a random angle between 350 and 10 degrees.
 			var rot = 10*Math.random();
 			if(Math.random() < 0.5) rot = 360-rot;
// Each photo is built from a set consisting of a white rectangle and the photo
 				var s = paper.set();
 				s.push(paper.rect(x,y,110,140).attr('fill','white'),paper.image(src, x+5, y+5, 100, 100));
// Rotate the set by our random angle
 				s.rotate(rot);
// When the set is clicked, if already dragging, drop the photo.
// Otherwise, bring to the front and store the mouse
// coordinates for future use.
 				s.click(function(e) {
 					if (dragging) {
 						dragging=false;
 					}else {
 						dragging = true;
 						startx = e.clientX;
 						starty = e.clientY;
 						s.toFront();
 						draggedSet = s;
 					}
 				});
// Listen for mouse movement on the document.
// If dragging, move the dragged set to the
// x,y coordinates of the mouse.
// Store the current coordinates for the start
// of the next move.
 				document.onmousemove = function(e){
 					if(dragging) {
 						dx = e.clientX - startx;
 						dy = e.clientY - starty;

 						for (var j=0; j < 2; j++) {
 							var node = draggedSet[j];
 							node.attr({x: node.attr('x')+dx, y: node.attr('y')+dy});
 						}

 						startx = e.clientX;
 						starty = e.clientY;
 					}
 				};
 			}
 		});
})

The data has been released using a fairly simple API, so I’ve drafted a YQL open table definition for it. You can use it to retrieve the full dataset:

use "http://eatyourgreens.org.uk/yql/nmsi.cosmosculture.xml";
select * from nmsi.cosmosculture

Try it

or retrieve an individual item, given the accession number:

use "http://eatyourgreens.org.uk/yql/nmsi.cosmosculture.xml";
select * from nmsi.cosmosculture where AccessionNumber = '1923-668';

Try it

You can also use YQL’s own filtering operators to restrict the result set. For example, get items for a particular place:

use "http://eatyourgreens.org.uk/yql/nmsi.cosmosculture.xml";
select * from nmsi.cosmosculture
where LinkedPlaces.Place.PlaceName like '%Italy%'

Try it

The competition wiki has a page describing the catalogue fields returned by the API.

Firstly, I’ve added a new input parameter, sortby, to nmm.collections.search, which specifies the field used to sort search results. Possible values are objectid, title, maker, year, updated. You can also specify sortby = 'rank' to order results by relevance for free text searches. So, for example, you can get the most recently updated records from the art collection with the following query:

select * from nmm.collections.search
where category = 'art' and searchterm = '' and sortby='updated'

Secondly, I’ve set up an XML feed to look up entries in the authority tables, and a corresponding YQL table nmm.collections.authorities. So, rather than having to know that the Aquitania is entry 21209 in the vessels authority, you can look up its entry with:

select * from nmm.collections.authorities
where authority = 'vessels' and title = 'Aquitania'

This is most useful when doing search for objects linked to a particular authority record, as you can join the two nmm.collections tables. For example, to search for art by the painter Charles Pears, you could try the query:

select * from nmm.collections.search
where searchterm='' and (authority,category) in
(select authority,id from nmm.collections.authorities
where authority = 'people' and title = 'pears')

The new YQL table definitions are available on github, and will hopefully be available to use in the YQL console soon. I’ve set up a javascript demo page where developers can test YQL queries against the NMM collections. There’s also a page of documentation about the NMM’s collections feeds, with some sample YQL queries for developers.

Astro location search with YQL execute, originally uploaded by eat your greens.

I was fortunate enough to win one of the prizes at Open Hack London this weekend. I ported the javascript from my astronomy photo browser to YQL Execute, creating a new open data table which returns celestial coordinates for astrotagged flickr photos. Essentially, my hack extends the flickr API to, hopefully, enable location-based searching in the sky.

Since I only wrote my hack in about an hour, during breakfast on Sunday, I returned to it this evening and finished it off. I’ve defined an open data table at http://eatyourgreens.org.uk/yql/flickr.photos.astro.xml which returns all machine tag info in the astro: namespace for the 50 most recently tagged photos. For convenience, it also returns the photo owner, title, url and root url for thumbnail images.

There is a demo, where you can try searching based on Right Ascension and Declination (both expressed in degrees). Please try it out and leave feedback in the comments here.

Demo URL: http://eatyourgreens.org.uk/testapps/yql/locationsearch.html

Example queries

The Carina Nebula

        select * from flickr.photos.astro
        where ra > 155 and ra < 165
        and dec > -65 and dec < -55

The Orion Nebula and surroundings

        select * from flickr.photos.astro
        where ra > 70 and ra < 100
        and dec > -20 and dec < 10

Get lots of photos of Orion (may be slow)

        select * from flickr.photos.astro(0,200)
        where ra > 70 and ra < 100
        and dec > -20 and dec < 10

Find nebulae from the New General Catalogue (names beginning NGC)

      select * from flickr.photos.astro
      where name like 'NGC%'

Find nebulae from the Messier catalogue (names beginning with M )

     select id, title, url, imgroot, username, ra, dec, fov, orientation, name
      from flickr.photos.astro(40)
      where name like 'M %'

Find all photos of the Rosette nebula

      select * from flickr.photos.astro(0,200)
        where name = 'Rosette nebula'

Explicitly declare all the table columns

      select id, title, url, imgroot, username, ra, dec, fov, orientation, name
      from flickr.photos.astro