Get Updates
Tags
Other Sites

Bit Zesty Labs

Twitter
Contributors
Filed under

javascript

See all posts on posterous with this tag »
 

XML to JSON API Proxy for Quick Mash-ups

While building our company dashboard, which was mentioned in our previous blog post on SVG with Raphael, I came across a problem with the project management tool we use, Pivotal Tracker. 

The Pivotal Tracker API is only in XML, which means you can't do cross-domain requests and access the API via javascript. This meant that, if I wanted to extract data about the status of our user stories, I would have to do it on the server side. As everything so far had been done with javascript on the client side, I was reluctant to start making things more complicated.

I contacted Pivotal, who said they might think about adding JSON at some point, but I didn't want to wait for them to sort it out. Instead, I built a quick API proxy that allows you to make a request to a XML API and get back JSON. So, now, I can do this in my javascript:

It will proxy the GET request to the API and convert the XML response into JSON, via http://xml2json.heroku.com (supports JSONP). I've put the code on GitHub http://github.com/bitzesty/xml2jsonp in case anyone else needs to do the same thing.

Filed under  //  API   javascript   open source   xml  
Comments (6)
Posted by Matthew Ford 
 

SVG Images and Animations on the Web with Raphaël

Last week I gave a talk at Google OSJam on Raphaël (a javascript SVG library), the library that makes it easy to draw and animate vector graphics on a browser.

SVG is one of the many methods of drawing images on the web. Some of the other technologies include Flash, Canvas and now WebGL.

The reason we used Raphael in some of our projects is that we needed to bind events to the shapes we drew. For example, we had to create an interactive gantt chart that displayed a form via Ajax when you clicked on a task. This functionality in Raphael is made possible by the fact that SVG paths are DOM elements, although it does mean you don't get the performance of pixel manipulation as you would with canvas. Raphael also renders VML when on IE, so in theory your graphics should be cross-browser compatible.

I gave a demo of an animated clock that I'd made a few hours beforehand with Raphael and the jquery.jclock library. The clock will eventually be apart of a Panic inspired dashboard we are building to increase visibility across all of our projects.

The clock itself is quite simple: I modified the jclock library to trigger a 'tick' event, which we later used to animate the SVG clock for the hand rotation. Since the talk, I have also developed an alternate style for the clock, but the original code and examples can be found here (the library is creatively called jquery.svgclock.js):

http://github.com/bitzesty/hud

Svgclocks


Brought to you by Bit Zesty - a 'crack' team of Ruby on Rails web developers

Filed under  //  development   javascript   open source   presentation   svg  
Comments (0)
Posted by Matthew Ford