How To Set Up Arduino Web Control Without an Ethernet Shield

For the past few weeks, I’ve been handing over control of my studio’s mood lighting to viewers during a live Technophilia podcast — the results of this can be seen in the recorded episode here. Today I thought I’d explain exactly how I did it using a little JavaScript , Processing and Arduino . The method I will describe does not require an Ethernet shield for your Arduino, and I will provide you with complete code examples that you can use as well.

Requirements:

• Arduino
• Backlight to control the corresponding circuit on the Arduino; see my background lighting tutorial from last week for the circuit diagram and component failure.
• Processing software on your PC or Mac
• Hosting
• Basic JavaScript and PHP programming skills, although I will provide the full code for you to customize.

Arduino setup

First of all, go back to last weeks tutorial to find out what an Arduino is. ; the code we’ll be using is identical as I’m using the same RGB LED strip control scheme so I won’t repeat it here. To sum it up, the Arduino will read RGB values ​​from a USB serial connection to the computer.

processing application

The processing application we’ll be using is very simple ( PASTEBIN ); it uses the base function loadStrings() to read a text file stored at a remote web address — in this case I used http://jamesbruce.me/lights/LED.txt . Create a sample text file on your web host to test this and make changes accordingly. The text file should contain only 3 lines of values ​​for R, G and B. You will also need to change the serial port to the one your USB is connected to. As before, the first thing the application will do is list the serial ports on the console — check which one is correct, then run it again. Your Arduino LED strip should light up with whatever random values ​​you added to the text file.

Arduino Web Control

On the control webpage, I chose a simple jQuery color picker plugin called Spectrum ; There are others, but I felt it was as simple as it should be and also works with a mobile phone, while the others I’ve tried won’t. Place the files spectrum.js and spectrum.css in the same directory as everything else (on my server I created a /lights subdirectory to keep things clean). We will use PHP as a way to display the web element management and processing entries in file LED.txt, if the variables are set in the POST request. When a user visits this page and selects a color, they send an AJAX request with the color variables back to themselves. This keeps everything contained in one file. Full PHP/HTML can be found in this folder (save it as index.php in a subdirectory along with other files) but let me give a short description of the code.

1. PHP : determine if there is a record variable called ‘colors’. If so, open the LED.txt file for writing and overwrite the post variables.
2. HTML : import jQuery , Spectrum.js and Spectrum.css
3. JavaScript : The getRGB function returns a comma-separated array of RGB values ​​for various CSS color formats, such as #aaaaa.
4. JavaScript : Create a Spectrum control and attach an AJAX call to the selected event’s changed color. AJAX calls this handler file with the RGB values ​​given by the control.

Finally, make sure your file LED.txt available to write to the server. Permission 655 or 777 should do it. Run the file and try; The processing application must be running and will update the file every second. If the color picker doesn’t even show up on the page, check the JavaScript console for errors.