thecapacity

I’ve been using a lot of python, jQuery and web services recently and thought it was time to pull together those skills into a public app.

Like most developers, I often “scratch my own itch” and write code to solve a problem or learn something. I try to post what I can but some solutions are hosted internally and I know there are numerous code fragments scattered across my hard drives which haven’t made it into posts.

Many of these projects are “evolutionary dead ends” but I think it’s important to engage in “purposeful play” without anticipating success or failure. You really have to take time to nurture your childlike creativity and it’s often in these limitless exercises that we develop the foundation for real breakthroughs for more “respected” works.

I was reminded of this recently when I watched a presentation by Aaron Koblin on some of his creative works. His compositions are stunning and while I recall noticing many of those projects independently over time, it was seeing the evolution of his portfolio that really inspired me.

If you watch the video you can see how his work went from a type of deliberate play to having a full “application”. It’s a lesson I try to perpetually embody with a “just do it” attitude, and it’s rewarding to see someone having applied it with such success.

So in that vein, I decided to clean up one of my sites and pull together a lot of these components into something “useful”. I call it “twitterline”, because “twitterbar” may be more descriptive but doesn’t roll off the tongue as well. You can see an example and get a pretty good idea of what it’s used for.

The API is “RESTful” and is simply “http://twitterline.shelv.us/twitterline” followed by your twitter ID, e.g. “/wjhuie” and the number of days that you’d like to graph, e.g. “/4″. I’ve limited the number between [1, 14] and if you don’t supply a number the default is 7, which all make for reasonable defaults.

However, beyond just looking at the bar graph on my site, you should be able to embed it wherever you wish! You can check the source on my example, mostly you’ll need to make sure jQuery and jQuery.Flot are embedded first and you’ll likely want to tweak the CSS. Just let me know if you need help to it up and running or if you’d like some different defaults.

It’s intended to be a simple culmination of a more complex process (which I’ll blog more on later) but I hope it inspires you to dust off a project of your own or start a new one!

Yesterday I talked quickly about my new ioBridge module and how excited I was to get started with it!

As I mentioned, my real goal is to bring physical interactions into the digital world and I had a heartbreakingly simple desire to get started with! Like most of you I’m sure, I have a special someone who’s stuck on the other side of the tubes most of the day.

I’ve known several coworkers to spend quite some time on their cellphones with family members exchanging tidbits throughout the day. I’m lucky that my spouse has some significant technology savvy (who says they can’t be trained… j/k hon!) so we get a lot of our “chit chat” done without breaking the context of our mental modes by using gtalk.

I’m sure many of you use some form of instant messaging for work, and have developed an enjoyable bit of asynchronicity to your conversations. It’s rewarding to be able to stay in the zone and then pick up a conversation where you left off once you’ve got a moment’s break.

However, how many of you have started a conversation with “Hey, are you there?”. It’s a personal pet peeve of mine (i.e. tell me what you need so I can deal w/ it when I have a chance) but often there’s no need beyond wanting to know the other person’s there and still has a pulse.

So that’s where iobridge_project_v0.01 comes in!

If you’ve checked out the link and are a bit confused here’s the explanation!

1) I wanted to build a digital representation of my physical presence and I decided that a “heartbeat” was a pretty obvious analogy.

2) So I found a wonderful tutorial on how to draw animated gifs but stopped with a single heart jpg and then needed to animate this beating in correspondence with my presence.

3) Using the very simple iobridge widget script I’m able to display the temp from my sensor wherever I want. However,  I wanted to actually _act_ on this data!

I’ve already talked with some of the ioBridge guys about them providing an XML / JSON interface and they were really receptive but there’s so much excitement over their device that I knew it would take a little bit of time before they could put something together.

First I tried to use jQuery to make a JSONP call to their server, but that didn’t work. Although I’m not smart enough to understand exactly how JSONP works, but I know the server has to cooperate. Despite their enthusiasm I knew ioBridge had more important things to work on and couldn’t turn around an API in 10 minutes (though I’m sure they’d try if you asked)!

I consider myself a persistent fellow, so I broke out firebug and started tracing through their script! It’s not rocket science, but the session variables and timestamps were a bit daunting. I must say they’ve put some thought and effort in securing your data (they even use HTTPS) and I started to feel myself deflate.

However, I decided to have a bit of lunch before I gave up entirely and that’s when I had my brightest idea all day!

4) I realized I didn’t need to worry about “spoofing” the request I could simply let ioBridge’s code do what it did best, polling the data! In turn, I did what I could do best, which was utilize the power of jQuery to get to that data!

5) So I simply hid the content div that I’d wrapped the ioBridge Widget in and proceeded to parse out the data! It’s as simple as;

$("#content").hide();

Then to get the data you just need to do this;

var t = $("#content").text().split(";")[1];
new_temp = parseFloat(t);

6) After that you just need a little UI logic and you’re good to go! Here’s a description of what I settled on but check out the page for the full on code;

I build an “animate heart” function which is triggered to fade in and fade out the heart. This is a simple function and could get more complicated if you’re a better animator then I am. Then I build a control function which would query the current temperature and compare that to the previous temperature. If things had changed (up or down) it simply tweaked the timing interval and reset the trigger event on the heart icon to have it beat faster or slower!

So there you have it! I can tuck the tempreture gague under my laptop so you can see how hard I’m working, or I can put it the back of my chair so you can get visual feedback as my body heats up the seat!

I know you’ll have to take the pulsing example with a bit of faith, but compare that to the temerature results and see the correlation! Also you can twitter me if you want me to go hold the sensor and make sure I’m moslty human!

Lauren shares two fun twitter tools, which I don’t want to re-describe here but I thought I’d share since visualizations are so much fun!