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.


  • 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. Arduino web control

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 . 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. Arduino web projects 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). Arduino web projects 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. Arduino web projects
  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. How to set up Arduino web control without Ethernet Shield web contrl get rgb
  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. Arduino web 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.

Pitfalls and further work

As I mentioned, this method didn’t use an ethernet shield on purpose, so anyone with basic hosting can set it up very quickly and inexpensively. However, this means that we need to use the Processing application to act as a gateway for data retrieval; without starting the PC, it simply will not work. With the addition of an Ethernet or WiFi shield, we can move the Arduino anywhere without being tethered to a PC and either fetch commands remotely or stream them directly to the Arduino with a little bit of port forwarding. I’ll deal with it another day. There’s also a concurrency issue — the way we’ve set it up is that the file will simply be overwritten every time someone selects a new color, and the delay between color changes is defined in the processing code. If you want multiple users to constantly adjust the color, a queued database system might be more appropriate; using a flat file to store values ​​can cause some changes to be ignored if updates occur more frequently than we update the file. Then of course you have no way of knowing if it worked then if you didn’t watch our live stream. Ideally, the control page should have a webcam installed and embedded. Although, as a tech demo, I think it’s pretty cool; I hope you can see the potential for remote control of just about anything over the internet via Arduino. Justin suggested that we hand over control of my oven ; I refused. Do you have interesting projects that you think can help?

Похожие записи