Taking (and keeping) your temperature!

I swear I don’t have a penchant for medical terminology but this ioBridge stuff is making me feel like that time I stayed at a Holiday Inn… so refreshing, I think I could perform surgery!

After my heart hacks (see my previous posts) I had questions from some friends about how we could graph the data from an ioWidget’s (my term). Initially, I wanted to push the data into a Google Spreadsheet but unfortunately there doesn’t seem to be a higher level javascript library supporting Google Docs and sorting through the feed URL’s was just too complicated.

At the same time I was thinking through this request, I received a resounding response from the ioBridge team! Although I’d worked around the need for a simple API they quickly responded to the desire (apparently I wasn’t the only one with interesting ideas) and now there’s a full JSON API!

I won’t bore you with my initial graphing solution as the sample made it into their official API demo (along with some much needed code enhancements). However, there were a few pitfalls with that approach that I still didn’t like, most specifically that the data is “lost” every time you reload the page.

It took me until after the holiday break (along with a welcome return to python) but I’ve solved my initial frustration with great results.

Here’s a script which will poll my ioBridge module and then store the results of my tempreature sensor in a Google Spreadsheet that I created! Once the data’s there you can use Google’s visualization widgets to make some fun graphs!

Aside from some setup and “ease of use” code, the real work is done by two very brief classes. I deliberately didn’t add some error checking nor make the widget class generic (it’s actually proxying the full ioBridge module) so I think it should be straightforward enough to modify for your own uses!

All you need to do is create a spreadsheet and open it in your browser. Copy the key from that URL and paste it, along with your ioBridge feed URL, into the appropriate places in the script (the locations are commented).

I simply run this from a cron script every few minutes (once I get more data I’ll reduce the time) and although there’s not a lot of variation in the data (I deliberately introduced some to make the graph more interesting) it’s a spectacular way to record, visualization and act on the sensor’s findings!

Good luck with your own modifications and let me know if I can help!

Posted in code, Google, hardware, iobridge, python, visualization | 10 Comments

Open heart surgery!

It’s not quite a detailed tutorial but I hope any budding ioBridge cardiologists will find my latest foray into web2.0 useful.

I’ve recorded a video of my ioBridge project and posted it on Vimeo in the hope that it will help anyone looking to do something similar.

Unfortunately, pasting HTML into a blog post usually isn’t successful but I believe my source and previous writeup should be simple enough for others to follow. The trick is to include your widget script in your page and wrap it with a “div” using a specific, ID. In my case I used “#content” and was then able to use jQuery to mark this as hidden, CSS “display: hidden” would also work equally well.

I could then use jQuery to parse on this div ID (rather then having to find out the ioBridge widget number), which isn’t hard either and convert the html content to a floating point value. It’s a straightforward query though you may have to play with the “split()” function depending on your layout and sensor.

If you’ve got any questions feel free to email me, jay, at thecapacity.org or find me via http://wjhuie.com

Posted in uncategorized | 3 Comments

Bridge to my heart…

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;


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!

Posted in code, hardware, iobridge, technology, twitter | 3 Comments

Suggestions for Google Friend Connect

I’ve been building my personal site and one of the things I’m excited about is the chance to interconnect my work with the larger social networks out there.

I believe every site should do what it’s best at and my intent isn’t to manage comments, wall posts or user signups and security. So once I got a basic life aggregator put together my next step was to integrate Google Friend Connect and see what it was all about.

The idea of Friend Connect is to let Google proxy most of the “social interactions” for you so you can simply deal with what you do best (which is likely developing useful content and interacting with other humans… not swearing over spam and comment plugins).

It’s incredibility easy to get up and running, you simply copy two HTML files to your site and let Google give it a once over. After that things are “configured” but there’s still no interface for interacting “socially” with the site.

In order do that you add a members gadget (or a smaller signon module) and ‘viola – People are now able to “join” your site! To get one of these plugins installed you use Google’s site to generate the necessary Javascript and HTML. I simply copied these codes into a “friend.html” file which is loaded via a corresponding menu item.

It’s not very difficult but you need to have a fairly straightforward “color scheme” defined and I don’t understand why “Links” and “Secondary Links” are two separate categories. I also don’t like that the CSS Style information is coded inline but I understand this makes it a single step to setup.

Nontheless it’s pretty straightforward, but it annoys me that Google makes you re-enter your color settings each and every time, i.e. not only if you regenerate one of the plugins but a new plugin is similarly “blind” as to your preferences. You also have to pick a general “size” for your widget which isn’t difficult thanks to the Web Developer’s Dislpay Ruler (under Miscellaneous).

So once it’s up and running, what are my impressions?

Well it’s certainly a neat idea but I was a bit underwhelmed. Currently, there’s only a “Wall” a “Rate and Review” widgets available and neither of my two test posts “left” the walled garden of my site. What I’d like is the ability to control the publishing of these “events” so that my twitter friends currently know if I’m active and engadged on a site!

It also wasn’t clear with the widgets how I’d solve typical “use cases”. For example currently my site’s “Wall” is only on a single page, but if you wanted to use this plugin for post comments how would that be done? How could I connect it to Akismet so I didn’t have to worry about spam filtering? How about other common features like emailing people when someone posts a folow up, or what about an RSS feed for this widget?

There doesn’t seem to be the typical wealth of developer documentation either. I haven’t yet investigated the “Lame Game Demonstration” or how to build a custom gadget. But given that it’s Google I think API’s and sample code is likely forthecoming.

Bottom line, it’s a start but given all the noise this has been making for so long I was expecting things to  be much farther along. Still get started and you’ll find yourself on the forefront of yet another Beta product from Google!

Posted in Google, social | Comments Off on Suggestions for Google Friend Connect

ioBridge setup

Although I’m often working with “web stuff” or Enterprise Architectures I’ve always had a soft spot for what used to be called “ubiquitious computing”. I once had an interview at IBM and their interpretation of the term was “the ability to buy something online wherever you are” (say wha!!?) so if you’re not familiar with the phrase I doubt it was ever popular enough to have an agreed upon meaning.

I much prefer the more current term, “augmented reality”, although that often has connotations of games or enhanced social interactions. If you ever get a chance to read Donnerjack I think it’s got some great illustrations of what life could be like once we unlock “computational intelligence” from the machine.

What’s always frustrated me about the computer is that for decades our most popular input device has been the mouse (although I’m a keyboard user myself). Why must I get RSI from paging through my Google Reader simply because the ‘j’ key (or repeated clicking) was the “least worse alternative” for “next post”?

One of the reasons I’ve loved my iPhone is that it’s given me another chance at decoupling my “interface” from the computer. Even if it’s via simple web pages it’s nice to have an alternate. I have a friend who has setup a page to control his streaming DVR, audio and much more. It’s a simple advancement but being able take the convenience of a remote and the scripting power of code has been really powerful. If we can get excited about “always on” video cameras for life streaming, well I’m even more so about the time when my computer ( or cloud companion ) knows I’m on the move (and how urgently) because it can read my Nike+ transmitter!

If you’ve seen any impact of the “Makers Movement” you’ll likely agree that we’re entering a time in history where we have the ability to shape the way we want to interact with our devices. From on demand fabrication and open interfaces there’s likely a good chance that you can find a way to interface with what you want, how you want!

However, even with the multitude of arduino tutorials I’ve found it hard to get started with some of the embedded programming. I have some friends who are interested in using embedded systems to remove their need for the computer. My desires are a little different in that I want to use embedded systems to even more strongly couple myself to my system but via better interface patterns.

In essence I want the reverse of augmenting reality with technology, I want to augment software with more realistic interfaces! Let’s call it “realistic augmentation” until O’Reilly coins a more acceptable term.

So it was with much excitement that I saw the announcement of iobridge coming to market! From the writeups it looked like iobridge was a painless way achive the interlocking I’ve been looking forward to for so long!

I managed to buy one of the last modules (and a temperature sensor for starters) before they sold out and when it came I was setup in less then 5 minutes!

Here’s a quick record of what I did to get my test setup going for anyone else who’s interested in it. I already have a “usage case” in mind but I’ve been messing with jQuery for my new site (wjhuie.com) and hadn’t gotten around to it yet.

When my order came there were all of 4 things to deal with, one of which was supplied by me (the network cable). I took the   module (part 1) connected it to my router via a self-supplied Cat5 (part 2) and then plugged in the power cable (part 3). The power pack is a very nicely build module which has very low profile.

Once the module’s plugged in you’ll see a numeric LED display light up (along with two onboard LED’s, one red and one green). I plugged my module in and then went to the iobridge site and signed up. It asks you for your confirmation code (which you get via email after your order) and you’ll also have to be prepared to read off the serial number (stamped on the top of your module). Once you’ve entered those you hold down the button on the side of the module till it presents a ‘-‘ sign and click “next” on the page.

ioBridge will instruct your module to display 3 random numbers (at least I assume they’re random) and you simply read them off the digital display and enter them into the site. Once that’s been done, you are done. Literally, it’s that simple!

I then plugged my temperature module into the port (which is keyed to only go in one way so you can’t mess it up) and was instantly reading analog input values taken by my sensor off their website! It was a bit unintuative but I realize you can click on the “Raw” specification and convert it to a different unit (in my case Fahrenheit).

From there you can create a widget if you’d like by clicking on the widget menu then selecting “Create Widget -> I/O Module -> Analog Input -> Module Select -> Channel 1″… If that seems complex to you, trust me it’s not. You simply hit “Next” 5 times and ‘viola!

You can change the “Analog Input Scale” here as well and select “Auto refresh” so the data’s automatically updated (or you can click on the number to refresh). From this page you can also easily copy some javascript to embed on your page and you’re done!

If you’ve noticed I’m not much for screen shots but it’s as easy as can be to get running and I’m excited about what’s in store from the company and for me! Until next time, get real… go augment your life!

Update: I forgot to include the widget!
Check this out and see how hot my office gets, even in the winter!

Posted in hardware, iobridge | 2 Comments