During the Oredev speakers dinner last November, I was having an interesting discussion about the car industry and how Google in one swipe mangled up the turn-to-turn navigation market. During this discussion and other interesting conversations at the following JsConf, it it became more and more clear that we (web developers) should be able to write applications for instance for cars, write applications for phones we can plug into cars, and write those applications using web technologies – meaning JavaScript, HTML and CSS.

Since that discussion, the idea developed further and after some time, things started to take shape.

Lets take a look at the first prototype of a web based application (is this the first JavaScript ECG ever?) which reads your heart rate, sends it to the mobile phone via bluetooth and displays it in a native application driven by PhoneGap, meaning – the actual application is written using JavaScript, HTML(5), CSS.

Because the quality of the above video isn’t that good I have recorded a screencast from the iPhone simulator. This video only shows the applications look and feel since the simulator is not connected to the Polar hardware via Bluetooth.

More videos are available here

After I got a first prototype running, the thoughts of what this could potentially mean would not stop popping up in my mind – the consequences for the web-development community are immense and the challenges we as web developers can face are broadened in a way that tons of exciting new things are lying ahead of us.

In this blogpost I will give you a quick outline the features of this prototype and the components I used.

Setup

To get the HumanApi ECG running I used following components:

• PhoneGap
• iPhone
• Polar T31
• Arduino BT
• HRMI
• btstack
• little stuff

Lets take a quick look at each of the components:

PhoneGap

PhoneGap is one of the really cool projects out there. It not only allows you to deploy JS, HTML and CSS based applications on a range of mobile phones but it also gives you great APIs to access features of the phone. Because the iPhone SDK allows us to evaluate JavaScript from within Objective C it is relatively simple to execute JavaScript calls within the webkit webview. This essentially allows you to communicate with for instance bluetooth. If more widget runtimes would give us possibilities to inject APIs into the runtime (W3C?) and make available in JavaScript we would be able to write very cool apps! (More on that in a different blogpost soon).

iPhone

besides the fact that Apple is blocking certain functionality of the phone (bluetooth for instance), it is an amazing device and allows you to do all kinds of stuff (e.g. inject JS into the webkit view). Its performance is very good as well and therefor makes a great prototyping device. To get this HumanApi prototype running I unfortunately had to jailbreak the device. We are slowly reaching a point in time where blocking device functionality will hurt Apple and other manufacturers/operators, they are locking their devices out from an amazing amount of possible application usecases.

Polar T31

The Polar T31 is a simple heart rate transmitter which you can use to monitor your heart rate when doing sports. This device is perfect for our prototype because we indirectly can send the data to our iPhone.

Arduino BT

Because I can not communicate between the iPhone and the Polar T31 directly I had to create a bridge using the Arduino BT. Essentially the Arduino receives the heart rate (using the HRMI) from the T31 and sends it to my iPhone via bluetooth.

HRMI

The human heart rate interface is a great little project by Dan Julio, who developed this hardware to receive the heart rate signal from the T31. Furthermore you can easily connect the HRMI to the Arduino BT and therefore send the heart rate to your iPhone via bluetooth.

btstack

As I wrote before, Apple does not allow to access the full bluetooth stack on the device – even though the hardware is available. Luckily Matthias Ringwald has developed a library for the iPhone which lets you access the different bluetooth profiles – without his amazing work this HumanApi prototype never would have been able to exist.

Your own HumanApi

If you want to develop your own application accessing hardware, feel free to contribute to the HumanApi project. There would be nothing more amazing than seeing for instance the ECG app running on Andriod and other platforms.

A good start are the articles on humanapi.org, the forum, the GIT repository or these folks on twitter: @nonken, @humanapi, @uxebu.

Conclusion

Essentially we are at a point where we as JavaScript developers could be writing applications we never thought of a few years ago. It is to us and to the industry now to demand that we get better and more access to the devices hardware – there is no reason why JavaScript developers get “discriminated” over native developers in the way how we can access device features

I want to close this article with a short comparison:

Often mobile developers, using web technologies, are compared to native developers on the example of games. “Ohhh but you can not write amazing 3D games using JavaScript” – funnily enough I even hear JavaScript developers trying to “defend” themselves agreeing to the above stated fact – “Yes we can’t write games, but phones are getting better so one day we will”.

We don’t need to make these kind of comparisons and should start demanding better access to the devices hardware. What stops us from saying “We don’t have to develop games, we can write home automation systems, medical applications (#mhealth), apps for the cars industry and so much more amazing stuff – and we can do it cross platform! (And WebGL is on its way btw. )”?

Right now it is not the language which is stopping us. App store policies, manufacturers and operators are stopping us because we have to hack our way into the devices!

Enjoy hacking

If you are interested in how we can access hardware from within the browser, see real life examples in action and want to get a lookout on what types of applications we could be writing given the fact that we would have better access to apis, come by
Also make sure you won’t miss out the other tons of very cool talks during those two days!

Details:

Website
What: The Scandinavian Web Developer Conference 2010
Where: Skandia-Teatern, Drottninggatan 82, Stockholm
When: 24-25/5 2010

• iPhone
• iPhone Developer SDK, provisioning profiles, etc.
• Arduino BT + Developer Tools
• HRMI Module for Arduino
• Polar T31 Transmitter
• Soldering iron (never bad)
• Cables
• Breadboard

Lets get started

Make sure you follow the tutorials on how to get btstack running on your iPhone (this enables the full bluetooth stack on your device.

Also read the blog post on how you initialize a new humanapi project so you can get started right away. In this case the HumanApi project is called “ceg”.

Connecting the HRMI to the Arduino

You can use a breadboard to connect your HRMI to the Arduino or simple cables. Make sure that the outputs of the HRMI get put into following inputs/outputs of the Arduino BT:

Setting up the Arduino source code

If you haven’t yet cloned the git repository, do so now and take a look at the prototypes/src/ceg/arduino folder.
You need to have the Arduino Editor installed to be able to open the ecg.pde which contains all important code.

Before you can test the Polar gear with the Arduino BT, make sure you set the correct HRMI_I2C_ADDR in the Arduino source. It should be 0 which means that you have to install jumpers on the HRMI (If this sounds unclear to you, read the manual coming with the HRMI, everything is clearly explained there).

Also don’t forget to remove the SJ1 jumper and add a jumper at OP0 (Again, all of this is explained in the HRMI manual but I am explaining it anyways).

Testing the Arduino HRMI connection

To test the connection, open the serial monitor of the Arduino SDK and start wearing the Polar T31. After some time you should see the yellow LED on the HRMI blink according to your heart rate. At the same time the HRMI should transmit to the Arduino and you should see data in the serial monitor.

Baudrates

Set the baudrate in the Arduino source to 115200 – other values should work without problems but this always works well for me.

Installing the Sports CEG application on the iPhone

Creating HumanApi applications is simple and usually involves the same process. If you have read the tutorial everything should be working for you, otherwise take a look at the following screencast.

Does it work?

Now when wearing the T31 in not too far distance to the HRMI you should be able to record your ECG on your iPhone which should be connected to the Arduino via Bluetooth.

If you have trouble getting everything set up, join the forum and don’t hesitate to ask questions there. It is very likely that, to me, obvious steps are still missing in this guide and I will add them once they appear.

The next video shows some of the features of the application. Please excuse the quality of the video.

The next video shows the application running in the iPhone simulator.

Video

Take a look at following video which runs through all required steps. Every step then is explained in detail in this blogpost.

Prerequisites

I have created all prototypes on a MacBook Pro running Mac OSX 10.6.2 – if you encounter issues, please visit the HumanApi forum, we’ll try to figure out the issues there

You also already have to have the btstack deamon installed on your iPhone. If you don’t have it installed this prototype won’t be able to receive Bluetooth data. There is a very good tutorial on the btstack WIKI which describes all the steps you need to take to get btstack running.

1. Clone the HumanApi git repository

$ git clone git@github.com:nonken/humanapi.git

2. Make sure all git submodules are initialized and updated

$ git submodule init
$ git submodule update

3. Create the HumanApi prototype PhoneGap project for testing

$ cd build
$ make clean
$ make tempinfo

(tempinfo is the name of the HumanApi prototype you want to test)

Setting up Xcode

Now things get a little bit complicated, if you are used to iPhone provisioning though this should be fairly simple for you. If this is completely new, go take a look at the Apple Developer pages which give you excellent material on how to set up provisioning profiles for your applications.

1. Select the correct provisioning profile in the Projects Settings.

2. Change the Bundle Identifier in the appname-Info.plist to match your provisioning profile

Adding btstack header files and dylib

Now we are almost done with the required steps, all we have to do now is tell Xcode to also include the btstack header files and dylib when compiling the app.

1. The required files are already copied over to your dev/prototypename/iphone/Plugins directory. All you need to do is make Xcode aware of them by dragging them onto the Plugins folder within Xcode.

2. Open the Project settings again and add following line to the Other C Flags field:

-I/absolutepathto/git/humanapi/prototypes/dev/ecg/iphone/Plugins

On my machine this would be:

-I/Users/nikolaionken/dev/git/humanapi/prototypes/dev/ecg/iphone/Plugins

3. Include the Bluetooth header file (this will be made easier!)

Open up Classes/appnameAppDelegate.h and add following line:

#import "Bluetooth.h"

Then open up Classes/appnameAppDelegate.m and add folowing to “webViewDidFinishLoad”:

Bluetooth *myblue = [[Bluetooth alloc] init];
[myblue initBlueTooth:theWebView];

Testing the app

1. Open up the Xcode Organizer and open the Console tab of your connected device.

2. Compile the application in Xcode and wait for it to start on your device.

3. You now should see following logs (or something similar)

... : Turn on the Arduino BT
... : Please enter PIN 12345 on remote device
... : Channel successfully opened:

Enjoy