Remote Control: Interacting with an Arduino via Web Interface

Upon acquiring my initial Arduino board, my immediate aspiration was to administer it through a web interface. However, lacking an Ethernet shield initially, I deferred the idea. Recently, spurred by curiosity, I procured a shield from Amazon to explore the possibilities. The foremost step entailed drafting a basic sketch capable of rendering a web page and processing user input. Hence, in this tutorial, we delve precisely into this endeavor.

How to Control an Arduino from a Web Page

In this project tutorial, we will demonstrate how to set up an Arduino board with an Ethernet shield to enable control of a blue LED through a web browser. (Of course, you can opt for a different color LED if desired!)

Before delving into controlling an Arduino via a web page, the initial step is to connect the Ethernet shield to the Arduino board. Aligning the shield’s pins and gently pressing it down achieves this connection. However, caution is warranted not to press it down too firmly, as this may cause the bottom of the Ethernet shield to make contact with the top of the USB port. Such contact could potentially lead to a short circuit. The specific shield utilized in this project is the Wiznet W5100 variant manufactured by Sunfounder, which is essentially a clone of the official Arduino W5100 shield.

Parts List for this Project

If you lack the necessary components for this list, here’s a basic parts inventory:

1. Arduino UNO or Arduino Mega 2560
2. W5100 Ethernet Shield
3. Blue LED
4. 10K Ohm Resistor

Wiring Diagram for Ethernet Controlled LED

Typically, I would utilize the built-in LED allocated to pin 13 for a project like this. However, employing that approach presents two significant challenges in this particular project. Firstly, the LED is obscured and difficult to discern due to the presence of the Ethernet Shield. Secondly, pin 13 is already allocated for use by the W5100 Ethernet shield. Consequently, for this project, I will instead connect a blue LED, accompanied by a 10K ohm resistor, to pin 2.

The wiring configuration should adhere to the following diagram:

That’s essentially the entirety of the wiring process. Connect the board to Ethernet and plug it into your PC via USB. Incorporate the provided code and upload it to the Arduino. Now, you’re set to commence controlling an Arduino through a web page!

You may find it necessary to modify the IP address (I’ve used to align with your home network’s subnet. Apart from this adjustment, no other modifications are required.

// The Geek Pub - Controlling an Arduino Pin from a WebPage
// Freely distributable with attribution and link to
#include "SPI.h"
#include "Ethernet.h"
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xAD, 0xEE, 0xBE }; //physical mac address
byte ip[] = { 192, 168, 1, 212 }; // IP address in LAN – need to change according to your Network address
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port
String controlString; // Captures out URI querystring;;
int blueLEDPin = 2; // pin where our blue LED is connected
void setup(){
pinMode(blueLEDPin, OUTPUT); // change pin 2 to OUTPUT pin
// Initialize the Ethernet
Ethernet.begin(mac, ip, gateway, subnet);
void loop(){
// Create a client connection
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c =;
//read the HTTP request
if (controlString.length() < 100) {
// write characters to string
controlString += c;
//if HTTP request has ended– 0x0D is Carriage Return \n ASCII
if (c == 0x0D) {
client.println("HTTP/1.1 200 OK"); //send new page
client.println("Content-Type: text/html");
client.println("<title>The Geek Pub Arduino Ethernet Test Page</title>");
client.println("<img src=\"\") style=\"width: 55%; margin-left: auto; margin-right: auto; display: block;\" />");
<h1 style=\"color: blue; font-family: arial; text-align: center;\">THE GEEK PUB ARDUINO ETHERNET TEST PAGE</h1>
<h2 style=\"color: green; font-family: arial; text-align: center;\">LED ON/OFF FROM WEBPAGE</h2>
<h2 style=\"color: blue; font-family: arial; text-align: center;\"><a href=\"/?GPLED2ON\"\">Turn On The Blue LED</a> - <a href=\"/?GPLED2OFF\"\">Turn Off the Blue LED</a>
//stopping client
// control arduino pin
if(controlString.indexOf("?GPLED2ON") > -1) //checks for LEDON
digitalWrite(blueLEDPin, HIGH); // set pin high
if(controlString.indexOf("?GPLED2OFF") > -1) //checks for LEDOFF
digitalWrite(blueLEDPin, LOW); // set pin low
//clearing string for next read
Launch a command prompt and enter the command “ping” (or your specific IP address). Upon execution, you should observe the following output, confirming that your Arduino is successfully linked to the network:
Launch a web browser and enter the URL (or the address chosen for your network). You will be directed to the following screen:
Pressing the “Activate Blue LED” button should illuminate the LED, while pressing “Deactivate Blue LED” should extinguish it.

Understanding the Ethernet Shield Web Page Sketch

The connectivity of the W5100 Ethernet Shield with the Arduino occurs through the SPI connector, located at the center of the Arduino as a small 4-pin block. Consequently, integrating the Ethernet Shield into your project necessitates the inclusion of both the SPI library and the Ethernet library.
#include "SPI.h"
#include "Ethernet.h"
In the following code segment, the Ethernet shield is configured with a MAC address and an IP address. Additionally, the server is assigned to port 80, the conventional location for web server communication.
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xAD, 0xEE, 0xBE };
byte ip[] = { 192, 168, 1, 212 };
byte gateway[] = { 192, 168, 1, 1 };
byte subnet[] = { 255, 255, 255, 0 };
EthernetServer server(80);
Subsequently, we require a variable designated for the blue LED pin, in addition to a “control” variable intended for capturing the URI query string data. To activate the LED, we will transmit “?GPLED2ON” to the webpage, while “?GPLED2OFF” will deactivate it. The controlString variable will capture and interpret these commands.
String controlString;
int blueLEDPin = 2;
In the initialization segment of our code, we configure pin 2 as an OUTPUT to supply power to our LED when we set it to a high state. The Ethernet.begin function initializes the Ethernet shield, allocating the predetermined addresses to it. Subsequently, the Server.begin function initiates the web server, enabling it to listen for incoming connections on port 80.
pinMode(blueLEDPin, OUTPUT);
Ethernet.begin(mac, ip, gateway, subnet);

In this concluding section, I won’t delve deeply into the process of constructing an HTML page destined for your browser. The basics of HTML lie outside the purview of this tutorial.

Essentially, the loop routine is primed to await a command. Upon receiving one, it employs the digitalWrite function to alter the state of the blue LED.

Other Ideas for Controlling an Arduino from a Web Page

Apart from merely illuminating an LED, the versatility of this technology extends to a multitude of applications. Utilizing a relay enables control over devices requiring higher voltage or current, surpassing the Arduino’s capabilities. For instance, one could regulate a pump within a well house. Furthermore, integrating lighting systems facilitates home automation, while managing dust collection systems in woodworking shops. The potential applications for this technology are virtually limitless, spanning across various domains.

Wi-Fi Shield

Although we discussed the Ethernet shield in this article, it’s worth mentioning that Wi-Fi shields are also accessible for remotely controlling an Arduino via a web page wirelessly. This functionality is particularly advantageous for battery-powered projects such as robots and vehicles.

About The Author

Ibrar Ayyub

I am an experienced technical writer holding a Master's degree in computer science from BZU Multan, Pakistan University. With a background spanning various industries, particularly in home automation and engineering, I have honed my skills in crafting clear and concise content. Proficient in leveraging infographics and diagrams, I strive to simplify complex concepts for readers. My strength lies in thorough research and presenting information in a structured and logical format.

Follow Us:

Leave a Comment

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

Scroll to Top