Arduino & Titanium communication via PHP

Posted on:
4 Images
Reading Time:
Technology


arduino and titaniun developer part 1

As of last week, I was not able to find a method to connect my Arduino to a Titanium desktop project. The Titanium SDK doesn’t natively support serial communication, but I knew the Arduino would be much more valuable to me if I was able to integrate it natively with a desktop app for several reasons:

  1. With an Arduino I can enhance my ability to add layers of interaction & interface design to my projects.
  2. The majority of my experience developing comes from web development, Titanium allows me to program in the language of my choice.
  3. If I could figure out how to connect it, I wouldn’t need to re-write my current app in an app like Processing ( Holy shit, processing is hard ).

There were people out there that were wondering about this same thing, I followed up on the leads they were given and stepped away with something that worked.

For many, The main draw to Titanium is that it will package back-end languages like Pearl, Ruby, or PHP into cross platform applications. With the power of google and these 3 languages we can easily fill whatever “gaps” that titanium may have. Luckily for me, Rémy Sanchez released his class in PHP to communicate with the serial ports on mac + pc + *nix. Using Sanchez’s script as a basis, I started to play with serial communication & PHP the mac.

This tutorial assumes that you have setup the Arduino IDE to upload sketches and have Titanium desktop installed. Here is the Arduino getting started guide, along with the Titanium getting started guide.

First things first, your Arduino needs something to report about right?. In our example the Arduino is going read from a photocell at the A0 pin, and output it to the serial port every second.

Here’s a quick wiring diagram, photocell with a 10kΩ resistor. For more info on using a photocell, please visit this photocell tutorial.

Here’s the Arduino sketch for this project. For now it’s really basic, I will be expanding on this in part II.

Lets take a look at the sketch. In the setup() function we’re going to start the serial communications at 9600. Then our main programming goes into the loop() function. In the loop we read the A0 pin, print it to the serial, and wait for 1000ms.

Insert this code in your Arduino IDE, and upload it to your board and open up your serial monitor (there is a button for it, or a menu option, either works). In your serial monitor, make sure you set the baud rate to 9600, or you wont see anything.

If you don’t have a photocell or other sensor to read from, you can comment out the serial.println(sensorValue); line, and remove the comments on the Serial.println(“test”); line. That way you will still be posting some data for the Titanium app to see.

/* AnalogReadSerial Reads an analog input on pin 0, prints the result to the serial monitor
This example code is in the public domain. */

void setup() {
Serial.begin(9600);
}

void loop() {
int sensorValue = analogRead(A0);
Serial.println(sensorValue);
//Serial.println('test');
delay(1000);
}

If everything has worked correctly, your serial monitor should look something like this one.
Easy? I was hoping you’d say so, ‘cuz here comes the complicated stuff.

Please download the Arduino Serial Titanium project, in the comments it has better explanations of the functions that we will talk about later.

Before we can build anything, we need to need to import this project into titanium. This part shouldn’t stump you, import has its own button. In the titanium project’s resources folder you should be able to see the following files:

json.php

This is the most important file in the titanium project. It’s the bridge between your app and the Arduino, it contains the settings you need to update for this application to return the contents of the your Arduinos serial output. Currently the json.php file is outputting the A0 value along with the current time in a json encoded array. We later use jQuery to load this array into a table in our titanium project.

<!--?php<br /-->
<pre>header('Content-type: application/json');
$serial = new phpSerial();

//Specify the serial port to use...
$serial->deviceSet('/dev/cu.usbserial-A800etjJ');

// leave this alone
$serial->confBaudRate(9600); //Baud rate: 9600
$serial->confParity('none');
$serial->confCharacterLength(8);
$serial->confStopBits(1);
$serial->confFlowControl('none');
$serial->deviceOpen();

sleep(2);
$read = $serial->readPort();
// trim it down, there was an 'n' at the end of it.
$read = (substr($read, 0, -2));

$serial->deviceClose();

date_default_timezone_set('America/New_York');

$time = date('D, d M Y H:i:s O');
$json = '{
'serialdata': [
{ 'A0':''.$read.'',
'date':''.$time.''
}
]
}';
echo $json;
?>

You will need to know your Arduino’s serial port to get this to work correctly. This can be done using the Arduino IDE, From the menu selecting “Tools->SerialPort” will show you the serial port you are talking to the Arduino on. On windows it will look more like COM1, COM2, or COM3. In the Json.php file, replace the $serial->deviceSet(” “); value with your Arduino’s serial connection.


index.html

In our index, we are using jQuery to call the json.php. It then parses the results from the Arduino’s response and adds them to our data table. Also note that in Titanium, we have to initialize the php_serial.class.php in a script tag rather then include it in the header of the json.php.

Serial Monitor

<!-- blueprint css -->

<!-- jQuery Minified -->
<script src="jquery-1.5.min.js" type="text/javascript"><!--mce:0--></script>

<!-- Initialize php serial class -->
<script src="php_serial.class.php" type="text/php"><!--mce:1--></script>

<table id="data" border="0">
<thead>
<tr>
<th>A 0</th>
<th>date</th>
</tr>
</thead>
<tbody>
<!-- content will go here --></tbody>
</table>

<script type="text/javascript"></script>

And here is the final bare bones Titanium result:

Over the next few weeks I plan on releasing 2-3 tutorials as I dive into Arduino & titanium. Hopefully I’ll be able to get past the basic getting started guide and onto more advanced projects like using firmata to build custom code based on user interaction.

 

Last update: Options for individual tooltips can alternatively be specified through the use of data attributes.