Category Archives: JavaScript

http://www.mozilla.org/js/

Planet Timeline

JavaScript, RSS, SPARQL

Following up on the other day’s post on SPARQL and the Simile Timeline, here is another way of putting items on a timeline.

I’ve created a SPARQL template for Planet Planet, you can see it in action on my personal planet.

The template makes (optional) use of identifying icons for each feed, which are configured in the Planet config.ini (don’t forget to add the SPARQL template to the template_files configuration option as well):

[http://www.wasab.dk/morten/blog/feed/rdf]
name = Binary Relations
timeline_icon = dull-red-circle.png

Once set up, the generated SPARQL results (example) can be run through the SPARQL Timeline Service (example).

Integrating the timeline into the default Planet HTML isn’t hard, I’ve created a tweaked version of examples/basic/index.html.tmpl from the latest nightly — see it in action.

Getting this running on a working Planet installation should be as simple as downloading the two templates to the right location, and updating the Planet configuration file (default dull-blue icons will be used if not specificed per feed).

Update: Note that the planet-sparql.srx file needs to be returned by the web server with an XML mime type, preferably application/sparql-results+xml. If you’re unable to configure your server to make it do that, try renaming the template and file to use .xml instead of .srx as the file extension — that should make it return with application/xml. Thanks to Edward Summers for pointing this out on the Planet developer list.

SPARQL and SIMILE Timeline

JavaScript, RDF/XML, Redland, RSS, SPARQL

Danny Ayers has been working on getting the SIMILE Timeline to eat SPARQL through the use of its JSON interface and some XSLT, he has notes on the ESW wiki.

While trying to get his work running here, I realized that the trip through XSLT to create JSON output really wasn’t necessary.

Instead, I’ve created a custom SPARQL event source parser, to load SPARQL results directly into the timeline. This way, the SPARQL results format generated by running the query doesn’t need a round trip into either JSON or the custom Timeline XML format.

The SPARQL Timeline demo works with any RSS 1.0 feed (try it with the one from Planet RDF) .

Update: Now also works with “raw” SPARQL results, try it with photos of laptops from The Gargonza Experiment (scroll to April of 2005). Expected variable bindings are date, title, description, and link, although the latter is optional and the first can be replaced by start.

Update: Now really works with “raw” SPARQL results. Due to javascript’s security model, only files on this server worked — until now. Also, a buglet regarding empty literal elements have been fixed.

Dynamic Tabs for Metadata

CSS, Image Description, JavaScript, Release

I generate and store quite a lot of metadata with my photos, as can be gathered from my faceted photo index. Until now, I have simply displayed most of it beneath each photo on its page, but I wanted to make the interesting parts stand out more, while still providing access to the rest.

CSS and JavaScript to the rescue.

Simon Willison created a small script for toggling sections of page, easytoggle and debugging in Safari, which was subsequently improved to also handle Safari. That seemed like a great way to approach the problem — making it possible to structure the information, while still leaving it accessible to all.

However, there were (of course) a few quirks with that implementation, so I added a few lines of code to make it possible to not display the menu tabs when JavaScript isn’t enabled, and to make the inactive tabs dim until selected: easytoggle3.js

To designate a section as the tab section (to make it not show up without javascript), identify it with #toggle, and add a CSS instruction to make it not display: display: none. The rest of the script works just as the original, where links with class="toggle" are used to identify the parts that should be togglable.