UPDATE: New version found here: http://www.fritz-hut.com/arduinopi-v1-5-bluetooth-dongle-support/

The ArduinoPi is a web-based controller for the Arduino using the Raspberry Pi. The advantage of using a Raspberry Pi (€28) is that its cheaper than an Ethernet shield (€35) and actually more useful.

I talked about connecting the Raspberry Pi and Arduino over a serial connection and how to install and configure PHP serial class so PHP can talk with the Arduino.

The principal behind ArduinoPi

First a little clarification, the ArduinoPi isn’t really a library or a command set or an out of the box controller, its more a proof of concept using already know programming languages. If you want to use it be ready for some PHP, CSS, HTML, C++ and jQuery!

The principal is as follows: The Arduino is connected as a slave device, meaning it waits for a command, execute it and maybe return a value or something. Everything must be initiated from the web browser. A true slave device.

It’s also possible for the Arduino to execute its own program and the ArduinoPi can then be used as a controller to switch variables. For example I have an automatic light switching system but using the ArduinoPi controller and my web browser I’m able to manually override it.

The command set of the ArduinoPi

The Arduino will check for a valid command. Every command starts with @ and ends with :, variables can be separated with a comma. Of course other commands can be added yourself, I’ve found that these are the basics and cover enough to make some interesting interfaces.

Basic switch-port-high command

This command is sent to the Arduino, for example this will switch port 6 high (255 = HIGH). The first value in this command must be between 0-99, which corresponds to the port number. Note that there is no checking so always see the port is set in OUTPUT mode and you are addressing the right port.

RGB command

I’ve also added a RGB command for LEDs, this is a special command and is constructed as follows:

The 101 indicates the special command mode and the following 3 values are just the RGB values. In my example setup I’ve added 3 RGB LEDs and they all get turned on to the right value using the RGB command.

Read Sensor Command

The last command is the sensor command. It will read an analog sensor value and return it to the PHP script.

The 102 indicate a special command and the following value indicates the port that should be read using analogRead().

My test setup for the ArduinoPi

I’ve used the following components for testing various functions: 3 RGB LEDs + resistors and a light sensor. The example will work with the following configuration. The image does not contain the connection setup with level converter circuit from last time (to cut some space).

The Arduino code for ArduinoPi

SerialEvent1 gets called every time data is available on the Serial1 interface, the function will check for a valid command, if it found a valid command (meaning it starts with @ and ends with : ) it will switch the Boolean value cmdRec to true, in the loop function we always call handleCmd(); now the cmdRec is set so we process the command. The while loop will split out the values and save them in the data array. Because we also need the last command we repeat the same stuff out of the while loop once more, I should fix that btw.

If the first value has a number lower than 100 we turn the port on with the second value as second parameter, else we process it like a special command. I’ve used a switch so you can add your own special commands as needed.

The web browser interface for the ArduinoPi

As interface I decided to use 4 pages each showcasing the commands. I made use of the following scripts/plugins/blogs/code and I would like to thank the original authors: Bootstrap, jQuery, Farbtastic Color Picker, jQuery color picker using Farbtastic and jQuery UI and flot. The complete source is on Github, I’ll give a short overview of the different pages.

Hover example

The Hover example works as follows, we add a jQuery hover handler over all the buttons. If the user moves over the button we request the value of the button, this value corresponds with the port we want to switch. We then send an ajax call to a PHP script that will handle the communication with Arduino and sending the right command. For a value we use 255. When the mouse leaves the button we do the same but use the value 0 to turn it off.

Color picker

The color picker works as follows. The user selects the desired color the RGB LEDs should produce and then click on the big square. An AJAX request is then made to a PHP page that will send the special command 101 with the right values for red, green and blue.

 Basic Sensor Display

This has nothing to do with the Arduino, but remember my light measurements? I always had trouble displaying them and I’ve included an example how you can display graphs really easy using this tool. It’s really useful for offline measurements that are saved on a SD card and then need to be represented in a browser.

Live Sensor Data

This will execute live measurements. A PHP cron job needs to be setup to run every minute as follows:

The PHP script will execute a measurement and save the value in a JSON file. On the client side we refresh the graph every minute with an Ajax call. I’ve also include two buttons to clear the log or request your own value.

Conclusion

I gave a bare bone, alpha release of my ArduinoPi controller. This example can be expanded all the way and check the Github source, I’ve added a lot of comments to get people started.

There is one big limitation, the server (Raspberry Pi) always has to request data from the Arduino. It’s not possible to send data from the Arduino to the Raspberry Pi and then magically update the browser. When using for example Processing, it is possible to have a more live connection and build an interface in JAVA. But this web interface is accessible for any smartphone or laptop (assuming you don’t run IE6).