How To Set Up Arduino Web Control Without An Ethernet Shield
- Lights to control the appropriate circuit on the Arduino; see my ambient backlight tutorial from last week for a circuit diagram and breakdown of components.
- Processing software on your PC or Mac
- Website hosting
First up, refer back to last weeks tutorial for the Arduino side of things ; the code we’ll be using is identical, as I’m using the same RGB LED strip control circuit, so I won’t repeat that here. To summarize, the Arduino will be reading RGB values from the USB serial connection to the computer.
The Processing app we’ll be using is very simple (PASTEBIN); it uses a basic loadStrings() function to read a text file stored at a remote web address – in this case I’ve used http://jamesbruce.me/lights/LED.txt. Create an example text file on your web host to test this, and adjust accordingly. The text file should just be 3 lines of values for the R, G, and B. You’ll also need to change the serial port to whatever your USB is connected to. As before, the first thing the app will do is output a list of serial ports to the console – check this for the correct one to use, then re-run. Your Arduino LED strip should light up with whatever random values you added to the text file.
Arduino Web Control
On the web control side I chose a simple color picker jQuery plugin called Spectrum; there are others out there, but I felt this was as simple as needed and also works with touch on a mobile, while others I tried wouldn’t. Place the spectrum.js and spectrum.css files in the same directory as everything else (I made a /lights sub-directory on my server to keep things clean). We’ll be using PHP to both display the web control, and handle the LED.txt file writing if variables are given in the POST request. When the user visits this page and chooses a color, it sends an AJAX request with the color variables back to itself. This keeps the whole thing contained within one file. The full PHP/HTML can be found at this pastebin (save it as index.php in a sub-directory along with the other files), but let me give a brief outline of the code involved.
- PHP: Detect if there’s a post variable called ‘colors’. If so, open the LED.txt file for writing, and overwrite with the post variables.
- HTML: Import jQuery, Spectrum.js, and Spectrum.css
Pitfalls and Further Work
As I mentioned, this method didn’t use an Ethernet shield on purpose, so anyone with basic website hosting could have it set up very quickly and inexpensively. However, this does mean that we need to use the Processing app to act as a gateway for fetching the data; without the PC running, it simply won’t work. With the addition of an Ethernet or WiFi shield, we could move the Arduino anywhere without being tethered to a PC, and either fetch commands remotely or push them straight to the Arduino with a little port forwarding. I’ll address this another day. There’s also an issue of concurrency – the way we have it set up is that the file will simply be overwritten every time someone chooses a new color, and the delay between color changes is decided in the Processing code. If you want to have lots of users constantly adjusting the color, a queued system with a database might be more appropriate; using a flat file to store the values can result in some changes being ignored if the updates occur more frequently than we’re refreshing the file. Then of course, you have no way of knowing if it even worked right then unless you were watching our live broadcast. Ideally, there would be a webcam set up and embedded on the control page. As a tech demo though, I think this is pretty awesome; I hope you can see the potential for remote controlling basically anything over the internet via an Arduino. Justin suggested we hand over control of my oven; I declined. Do you have any interesting projects you think this might help with?