NMA object browser

Success! Everything came together at the end of semester.

I got on the web, got all the data hooked up and and built a simple browser interface that worked.

NMA object browser - displaying drawing (right) in context of all drawings the NMA holds (centre) and all object types (left) 

The idea was to show as much context as possible on the screen at the same time to aid greater understanding of objects in the NMA's varied collections, which is particularly useful where individual item records are sparsely populated, and to encourage browsing to other like or different objects.

On the left is a list of all object types, with counts, ordered by count. Clicking on an object type brings up all of the items of that type in the centre window. These are displayed as a thumbnail grid of images, or where images are not available as catalogue reference numbers (IRN) with truncated titles. Of course the preference would have been to have all images, but I felt it was important to include all items, and the truncated titles are still often informative and visually look ok.

Mousing over an item brings up the title in a popup box in the right corner. This is simply a div with a z-index to ensure it is on top of everything else. Upon mouse out, the popup div is removed using JQuery $.remove(). Easy. This was one issue to note - having to remember to do a mouse out as well as a mouse over function was a little tedious, although I can see it could be useful. It would have been nice if there was similar to in CSS, an additional mouse hover event - which I used to make links underlined when moused over. Using the CSS cursor propoerty, I was also able to make spans and divs look like <links> with the hand pointer.

The objects are sorted chronologically, using provenance date over associated date if both are available. Items without dates are retained, and placed at the end of the list. The year is displayed under the item image/title. Displaying as an inline histogram of sorts adds a rich contextual dimension - otherwise to find out dates one would have to zoom into an individual item record, and even then there would be no way of knowing how many other items were from the same year and what was the spread of years for items of that type. Thankfully the source data was in a consistent format with year first, and then day and month after if available, as a single string, which allowed for sorting a simple extracting of the first four characters using the JavaScript substr() method.

On the right a summary of an individual item record is displayed. The first item in the sorted list of object types is automatically loaded. Other items can be loaded by clicking on them in the display grid, or by clicking next/previous to cycle through the list. Mousing over the next/previous links also brings up the popup with title, as a preview. It was a critical design intention to keep the zoomed in display on the same screen as the full collection context, rather than in a pop up or new tab. The full record on the NMA catalogue is still linked to, for further information.

NMA object browser - mousing over a collection title highlights the objects within that collection

Like the sorting chronologically, an important intention of the browser was to hook up other ways of sorting and sub-sorting the NMA collections. I attempted and adequately demonstrated the potential of this, by hooking up collections data to the list of items of object type. I was able to build a list of the collections that these items were part of and at the top of the centre window list the 5 collections that contained the most items of object type with counts. Mousing over a collection title highlights the collection by fading all the items not in the collection. This is achieved by changing the opacity accessed neatly with getElementById(#id).style. The mouse over worked very nicely, except there were two interface issues: for long lists you couldn't scroll to the bottom of the list without mousing out; and I didn't have room at the top of the window to list more than 5 collections.

There would be some easy extensions to this browser, which I would pursue if it was to be hosted on the NMA labs website - that is basically more links, more context. Clicking on a collection would bring up that entire collection in the browser centre window, and browse mode could be flipped to browse by collection, with all collections listed on the left. With the same architecture it would be easy to add other browse modes, such as material type, date or associated people.

So although I didnt get time to add all of this extra context, or refine further the browser interface, or draw some graph/visualisations, I am very glad that I challenged myself and built it to be native to the web. Once set up with data, the linking and mouse events work seamlessly. I feel like I could have fun linking up more and more and more, and am now ready to tackle some more websites!

I do think I could tidy up the code and data work a little. For example I forgot about global variables for much of the project and found myself getting convoluted in passing information to functions. I also could have prebuilt more of the lists, and done all the sorting, in Processing - to speed things up at the browser/client end.

That said, the next step really would have been to develop the NMA API to handle all the data calls, and this would allow the data to always be up to date. I wouldn't want to prebuild lists every month, when the NMA catalogue is added to.

Even if in a rudimentary form, I have established my confidence in showing everything in a big data set in a meaningful way. A great project to finish the Masters of Digital Design. Big thanks to Mitchell, and also to the National Museum for the privilege of working with this special data (which now must be wiped from our systems).

NMA project update - debugging

All my focus seems to be on the technical side of things - getting it to work in the web world has been overwhelming to say the list.

The last couple of weeks I have been doing some series debugging. There are so many seemingly simple things that catch you! Here are some updates.

First to report. I prebuilt a list with each object type and a count in Processing. It made loading super fast! Great news. I am now able to handle easily the whole collection - at least at this zoomed out level and as a simple text list.

I still am sorting the list in the browser with JavaScript, although there is no need to do this dynamically so I could be saving more resources by presorting too.

A prebuilt list of object types

I also prebuilt lists of all the items of each object type, but I got totally stuck linking it up to the super list. I tried to embed the object type as a key in a mouseclick function so that the list of items would be loaded when the object type was clicked on. I realised, as before, that as the mouseclick event would not happen at the time of drawing, I would have to hardwire the key. This time however I couldn't get it to pass in the key as a string. Previously I was able to escape by using single and double quotation marks, but not this time. After much consternation it was an easy fix - visiting Mitchell. I needed to use backslash ' \' to denote that the character immediately after is real.

So great, now I was able to load a list of lists, and navigate to each... well almost..

Lists of item titles displayed for object types that have been clicked on

... not all the object types worked! It appeared to be those with spaces between multiple words.

Mitchell also showed me Firebug and how to write to the console - console.log(), which is neater than using JavaScript popup alerts to debug as I was earlier. The great thing about Firebug is that it is able to follow all the script, css etc from linked files and to show how it modifies the html.

So my initial though was that it couldn't load the json files that had spaces in the file names. This would make sense as I had previously learned that the web doesn't like spaces and often replaces that with % signs and other characters.

However  I was able to prove that I was loading the data by writing to the console the list length and each item's title. This was puzzling indeed.

Firebug console showing item titles for 'record covers' object type which dont display  on screen

So further investigations led me finally to discover that the id attribute can't contain spaces. This was my problem - I was using the object type to name the header div, so that I could call it later to append the list of items of that type.

The solution: I needed to find a way to parse the object type name and replace the space with a dash or underscore, which the id attribute would accept. (The id attribute is fussy - it wont allow the name to start with a number either).

Luckily I found a string.replace() function native to JavaScript. It took a bit of figuring out however. I couldnt get a standard regular expression like /s, which removes all whitespace, to work. I could however get my custom specified regex pattern enclosed by forward slashes to work,  ie literaly slash space slash, '/ /'. I then had to follow it with a 'g' to indicate global, which removes all the spaces not just the first as is the default otherwise.

So now I have to keep track of key and key2, because I still need the original with the space for display and to locate the file names. Anyway it works!

'head ornaments' and 'performance costumes' lists of item titles of that object type

However there were still a couple of object types that had parentheses in their name and so had the same problem with the id attribute. Writing a regex for parentheses was hard! Again I had to escape using the backslash, but I couldn't get it to work all in the one replace() function listing all characters in my regex pattern to replace at once as tutorials seemed to indicate was possible. I eventually through trial got it to work one character at a time with three subsequent replace() functions - one for the space, and one each for the opening and closing parentheses.

Once this was all working, I was also able to implement a few tidy ups.

I am now using the <span> tag rather than the <a> anchor tag, so that it doesn't refresh and lost my place on the page. With CSS cursor and hover properties I am still able to get the <span> to appear as a link.

I was also able to use the JQuery $.empty() to empty my container div that holds the list of items. This, coupled with a custom data-display = "on/off" attribute to act as a switch, means that clicking on an object type a second time hides the list of items rather drawing them twice. Neat.

Finally I plugged back in the images, put the item titles (truncated) in my place markers where there are no images, and linked them back to the NMA online catalogue. It is starting to come together, and look neat. Hooray!

'paintings' and 'bowls', items displayed with images if available else titles