Just got your first Arduino, but you don’t have any additional hardware? Gotten a little tired of watching the LED blink by itself, with no interaction? Check this out.
This is the first thing I ever made for Arduino, as I had just received my first Uno and didn’t have any additional hardware. After playing with the included examples and some tutorials I got bored after about an hour (making the internal LED blink is only exciting for so long!).
So I decided to make it a bit more interesting; i wanted to be able to enable and disable the internal LED using a web interface. This is actually quite simple, and could easily be altered to enable remote control of relays or other different types of outputs. The great thing about using a web interface is that it is cross-platform and pretty much enables you to also control your Arduino using most devices with web browsing capabilities, such as smartphones and tablets.
Well, enough talk. Let’s get to it! Here’s what you need:
• An Arduino board with an internal LED (usually on pin 13) or a separate LED
• A webhosting service with PHP support
• The Arduino IDE
• The Processing IDE
• A text editor (e.g. Notepad++, Geany, or whatever you prefer)
First, we’ll start off with the web interface. It’s function is to give the user the choice to either switch the LED on or off. When either one of them is clicked, the command is written to a .txt-file as a 1 (ON) or 0 (OFF) value.
The interface consists of three files; a HTML frontend, a PHP document, and a .txt-file for storing values. So, firstly create these files using a text editor:
-
• index.html
• led.php
• LEDstate.txt
Index.html should contain the following:
<html> <head> <title>LED ON/OFF</title> </head> <body> <!-- This is just for aesthetics, centering the content within the paragraph --> <p align="center"> <font size="8"> <!-- This part is a a link, which also sends a request to the php-document, telling it to write 1 or 0 to LEDstate.txt --> <b><a href="led.php?state=1">ON</a></b> / <b><a href="led.php?state=0">OFF</a></b></font> </p> </body> </html>
Here’s an example of what it should look like.
Now for the PHP file :
<?php
$onoroff = $_GET["state"]; // Declares the request from index.html as a variable
$textfile = "LEDstate.txt"; // Declares the name and location of the .txt file
$fileLocation = "$textfile";
$fh = fopen($fileLocation, 'w ') or die("Something went wrong!"); // Opens up the .txt file for writing and replaces any previous content
$stringToWrite = "$onoroff"; // Write either 1 or 0 depending on request from index.html
fwrite($fh, $stringToWrite); // Writes it to the .txt file
fclose($fh);
header("Location: index.html"); // Return to frontend (index.html)
?>
The .txt file (LEDstate.txt) can be left empty.
Upload these three files to your website, and remember the location. We’re gonna need it for later.
Now it’s time to code the Arduino! For this, we can simply use the “Physical Pixel” example code from the Arduino website, written by David A. Mellis, Tom Igoe and Scott Fitzgerald. We only need the Arduino part of it though, so I’ll copy it onto here. What it does is to open up a serial connection to the host computer and listens for serial inputs. If the Arduino receives the command “H” it sets the LED to “HIGH” (ON), or “LOW” (OFF) if it receives the command “L”. (For more information on this, check out the “blink” tutorial).
const int ledPin = 13; // the pin that the LED is attached to - change this if you have a separate LED connected to another pin
int incomingByte; // a variable to read incoming serial data into
void setup() {
// initialize serial communication:
Serial.begin(9600);
// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
}
void loop() {
// see if there's incoming serial data:
if (Serial.available() > 0) {
// read the oldest byte in the serial buffer:
incomingByte = Serial.read();
// if it's a capital H (ASCII 72), turn on the LED:
if (incomingByte == 'H') {
digitalWrite(ledPin, HIGH);
}
// if it's an L (ASCII 76) turn off the LED:
if (incomingByte == 'L') {
digitalWrite(ledPin, LOW);
}
}
}
Upload the sketch to your Arduino using the Arduino IDE. To test if it works, open up the serial port monitor and type either “H” or “L” (without quotation marks), then click send. If the LED turns on and off, you’re good to go! If not, check if the pin variable is set to the actual pin your LED is connected to (if you’re not using the internal one – which usually is at pin 13).
Now for the last part that ties it all together! Open up the Processing IDE and enter the following:
/*
A simple Processing script for enabling or disabling the LED on an Arduino using a web interface and serial communication.
Author: Sindre Lindstad
Created: 19th of January 2011
http://projects.sindrelindstad.com
*/
import processing.serial.*;
Serial port;
void setup() {
/* This part must be altered to fit your local settings. The number in brackets after "Serial.list()" is where you declare what COM port your Arduino is connected to.
If you get error messages, try a different number starting from 0 (e.g. 0, 1, 2, 3...) . */
port = new Serial(this, Serial.list()[1], 9600); // Open the port that the Arduino board is connected to, at 9600 baud
}
void draw() {
String onoroff[] = loadStrings("http://YOURDOMAIN.COM/LEDstate.txt"); // Insert the location of your .txt file
print(onoroff[0]); // Prints whatever is in the file ("1" or "0")
if (onoroff[0].equals("1") == true) {
println(" - TELLING ARDUINO TO TURN LED ON");
port.write('H'); // Send "H" over serial to set LED to HIGH
} else {
println(" - TELLING ARDUINO TO TURN LED OFF");
port.write('L'); // Send "L" over serial to set LED to LOW
}
delay(7000); // Set your desired interval here, in milliseconds
}
Remember to edit it according to the comments. Now you should be all set to hit the Run/Play button! A small empty window will pop up, but your sketch should be running properly and posting messages in the Processing terminal window.
If you haven’t set it to connect to the right serial COM-port it will post an error to the terminal window. If you haven’t set the correct path to your .txt file, it will post “html” instead of “1″ or “0″. Also note that you cannot use the Arduino IDE serial port monitor (or any other serial monitor) while running the sketch.
If everything works; – hooray! Show your friends, and have them turn your LED on and off from whereever they might be in the world. If it doesn’t work, review everything and make sure it’s all set up properly. If it still won’t work; leave a comment.
-
Reddit user tenbatsu jazzed up the Arduino sketch a bit, and made it a little sexier. It’s designed for the use of three (external) LEDs. A blue LED to fade in and out, a green LED that indicates a “ready” state, and a red LED that indicates a “change” state. Have a look!
const int fadePin = 9; // The pretty blue LED
const int redPin = 10; // Red LED
const int greenPin = 11; // Green LED
const int fadeAmount = 5; // Increment to adjust brightness
int incomingByte; // A variable to read incoming serial data into
int brightness = 0; // How bright the LED is
void setup() {
// Initialize serial communication:
Serial.begin(9600);
// Declare outputs:
pinMode(fadePin, OUTPUT);
pinMode(redPin, OUTPUT);
pinMode(greenPin, OUTPUT);
}
void loop() {
// Indicate ready state
digitalWrite(greenPin, HIGH);
digitalWrite(redPin, LOW);
if (Serial.available() > 0) {
// Indicate change state
digitalWrite(redPin, HIGH);
digitalWrite(greenPin, LOW);
// See if there's incoming serial data:
incomingByte = Serial.read();
if (incomingByte == 'H' && brightness < 255) {
// Cycle the blue LED from dim to bright
for (brightness = 0; brightness < 255; brightness += fadeAmount) {
analogWrite(fadePin, brightness);
delay(30);
}
} else if (incomingByte == 'L' && brightness > 0) {
// Cycle the blue LED from bright to dim
for (brightness = 255; brightness > 0; brightness -= fadeAmount) {
analogWrite(fadePin, brightness);
delay(30);
}
}
}
}
Did you find this useful? Share it with others!
[...] a self described “Norwegian guy”, has put together this really neat tutorial for people getting started with the arduino. In this tutorial, you can learn how to remotely turn on/off the little blinking light on the [...]