How To Set Up Arduino Web Control Without An Ethernet Shield

Ads by Google

featured lighting control internet arduino   How To Set Up Arduino Web Control Without An Ethernet ShieldFor 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.

Requirements:

  • Arduino
  • 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
  • Basic coding skills with¬†JavaScript¬†and PHP, though I‚Äôll provide the full code which you can customize.

Arduino Setup

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. completed arduino   How To Set Up Arduino Web Control Without An Ethernet Shield

Ads by Google

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 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. processing app net control   How To Set Up Arduino Web Control Without An Ethernet Shield 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). web controller example   How To Set Up Arduino Web Control Without An Ethernet Shield 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.web control php   How To Set Up Arduino Web Control Without An Ethernet Shield
  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. web contrl get rgb   How To Set Up Arduino Web Control Without An Ethernet Shield
  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.webcontrol ajax   How To Set Up Arduino Web Control Without An Ethernet Shield

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?

Ads by Google

Write a Comment

Your comment