How To Set Up Arduino Web Control Without An Ethernet Shield

James Bruce 19-12-2012

arduino web controlFor the last few weeks, I handed over control of the mood lighting in my studio to viewers during the live broadcast of Technophilia Podcast – you can see the results of that in the recorded episode here. Today, I thought I will explain exactly how I accomplished that using a little JavaScript, Processing, and an Arduino. The method I’ll outline does not require an Ethernet shield for your Arduino, and I’ll provide full code samples for you to also use.



Arduino Setup

First up, refer back to last weeks tutorial for the Arduino side of things Build Your Own Dynamic Ambient Lighting For A Media Center If you watch a lot of movies on your PC or media center, I'm sure you've faced the lighting dilemma; do you completely turn off all lights? Do you keep them on full blast? Or... Read More ; 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. arduino web control

Processing App

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 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. arduino web projects 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). arduino web projects 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.

  1. 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.arduino web projects
  2. HTML: Import jQuery, Spectrum.js, and Spectrum.css
  3. JavaScript: getRGB function returns an array of comma separated RGB values given a variety of different CSS color formats, such as #aaaaa. How To Set Up Arduino Web Control Without An Ethernet Shield web contrl get rgb
  4. JavaScript: create the Spectrum control, and attach an AJAX call to the color chosen changed event. The AJAX calls this handler file with the RGB values given by the control.arduino web control

Finally, make sure your LED.txt file is writeable by the server. A 655 or 777 permission should do it. Launch the file and give it a go; the Processing app will need to be running and will refresh the file every second. If the color picker doesn’t even appear on the page, check the JavaScript console for errors.

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?


Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Diaz Guntur Febrian
    September 26, 2016 at 11:17 pm

    why the comparison condition on if using one = not two == ??

  2. hima_nandini
    March 18, 2016 at 3:22 pm

    how can i send the sensor values from arduino to php without using shield?

  3. michaelgadow
    June 3, 2015 at 5:34 pm

    Great tutorial! Exactly what I was looking for. Was able to follow along and get it up and running. Thanks!