Monday, March 31, 2014

Sending and Receiving Data from an Arduino Through a Webpage

I thought it would be kind of cool to be able to control an Arduino remotely so I hacked up a bunch of code that allows me to do this. The website can control multiple Arduino's at one time and recognizes them by their unique IDs that they send.

Basically, what you need is:

A computer running Linux
A webserver, Apache is nice with ability to run Javascript and Perl
An Arduino

How it works is like this:
1. Arduino sends data to the Serial port that is polled by and written to a file that is plotted using gnuplot to display on the webpage
3. Webpage uses web_interface.cgi to write data to a file that is read by and sent to Arudino
2. Arduino is polling Serial port to receive data and uses the data to modify variables that can change how the Arduino operates.

What this code was written for was having an Arduino controller multiple pieces of equipment in a Scientific lab but it can be ported to use for many other things.

Here is the Arduino Code:
Here is the
Here is the webinterface.cgi:
Here is the gnoplot formatting file should be in the same directory as
HTML file:
HTML Javascript:

1. Install gnuplot: apt-get install gnuplot or yum install gnuplot
2. Put the HTML files in /var/www/html
3. Setup Perl execution on your webserver  (
4. Make sure you Arduino has code loaded and is plugged in.
5. Run in background and make sure the gnuplot file is in the same directory
6. Use!

The webpage refreshes every 30 seconds you can change this in example.html.

The Javascript is just for giving the webpage a tabbed format to run multiple devices. This can easily be removed and changed so that you don't need the CSS or Javascript files.