Introduction: How to Connect Your Arduino BLE Shield to a Custom IOS/Android Application Developed in HTML5 and JavaScript.

By

This instructable shows you how to build a mobile application that communicates with your Bluetooth Low Energy (BLE) shield. In this tutorial I have used a BLE shield from RedBearLab, but this example should be easy to rebuild to work with any other BLE shield. The mobile application will be developed using nothing but web technologies such as HTML5 and JavaScript. This is made possible by using the popular open source framework Cordova and a development environment called Evothings Studio, which is also open source. You don’t need xCode or Android SDK to follow this instructable. Let’s get started!

In order to build this instructable you need a smartphone (iOS or Android), a computer and the following hardware:

Step 1: Prepare Your Hardware

Attach your BLE shield to your Arduino Uno (or similar) board and connect the LED and resistor in series according to the fritzing sketch above. In this example you should connect the LED the digital pin 2 but you can of course change that to whatever fits your purposes. Avoid pins 0 and 1 though, as they're also used in conversation between the computer and Arduino during when sketches are uploaded.

Step 2: Compile and Upload the Arduino Sketch

If you don’t have installed the software libraries required to use the RedBearLab BLE shield follow these instruction on how to do that.

Once the environment is fully installed, open the attached Arduino sketch and compile and upload the software to the board.

As mentioned in the introduction this instructable has been created using the RedBearLab BLE shield. If you have any other BLE shield or Arduino board with BLE support, it should not be that hard to create a sketch that mimics this sketches behaviour. The logic is pretty simple, if a '1’ is received turn on the LED on pin 2, and if a ‘0’ is received turn off the same LED.

Attachments

Step 3: Prepare the Mobile Application Development Environment

In this instructable you will use Evothings Studio to run the application. Evothings provides Cordova developers with a development environment that simplifies the development process. In order to run the mobile application you install Evothings Workbench (which is a node.js application also written in JavaScript) on your computer and Evothings client on your smartphone from one of the appstores. You can find detailed instructions on how to do that here.

Ensure that your computer and smartphone are connected to the same network, so that they can communicate with each other.

Step 4: Connect Client to the Workbench

Run the workbench on your computer and then start the client on your smartphone. Press the Scan for workbench button in the client. If everything works out as it is supposed to, you'll get a list of available workbenches. Click on one of them to connect to your computer. If there list shows up empty, you can try to connect direct to the IP Address of your computer. If that does not work either your network might have enabled a security feature called "Access Point isolation" or "client isolation", where computer on the same network aren't supposed to find one another, only the world outside. In order to run Evothings you have to disable client isolation, or start another access point invoked from your phone or computer instead.

Step 5: Run the Mobile Application

Next step is to extract the attached mobile application on your computer. Locate the index.html and drag and release that file into the examples window. Then click the Run button on the example. Now the application loads directly on your smart phone.

Attachments

Step 6: Connect to the BLE Shield

If everything worked as it is supposed to you should now have the application pictured above loaded on your smartphone. When you press the Connect button in the application the phone will begin to look for BLE enabled devices nearby. When it detects one that is named “ble_led” it will try to connect to that and change the status of the application. Once connected you can turn on and off the LED using the buttons.Start tinkering!

Step 7: Start Tinkering!

As you probably have discovered by now the application is really simple, it was created mainly so that you have something to use as a starting point for your own projects. Once you start to modify this application you will find one of the great features of Evothings Studio, the auto reload functionality. Whenever you make any change to your application the software will ensure that the new version is uploaded to the client automatically, this really simplifies the development process.

I would love to see what you create using this as an starting point, please inbox me if you create any instructable using this as a starting point.