Example Code for Arduino-Control IO Status Web Page
Last revision 2025/12/09
This sample allows other devices on the same LAN to control the status of IO2 and IO3 via the Web page.
Hardware Preparation
- DFRduino UNO Controller x 1
- DFRduino Ethernet W5100S Expansion Board x 1
- Network Cable x 1
- Router or Switch x 1
- M-M/F-M/F-F Jumper wires
Software Preparation
- Arduino IDE
- Download and install the W5100S Library. (About how to install the library?)
Wiring Diagram
Other Preparation Work
Please replace the original W5100. CPP file with the downloaded file before use (the purpose of replacement is to be compatible with W5100S chip).
File path: Arduino\libraries\Ethernet\SRC\Utility in the Arduino installation directory.
Sample Code
/*!
* @file Webcontrol.ino
* @brief This demo implements the change of IO port 2 and 3 output state through the web page
* @copyright Copyright (c) 2010 DFRobot Co.Ltd (http://www.dfrobot.com)
* @licence The MIT License (MIT)
* @author [yangfeng]<[email protected]>
* @version V1.0
* @date 2021-07-14
* @get from https://www.dfrobot.com
*/
#include <SPI.h>
#include <Ethernet.h>
//Define digital output IO port
uint8_t D2 =2;
uint8_t D3 =3;
int value = LOW;
int value1 = LOW;
// Enter a MAC address and IP address for your controller below.
byte mac[] = {0xDE, 0xCD, 0xAE, 0x0F, 0xFE, 0xED };
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial); // wait for serial port to connect. Needed for Leonardo only
//Set digital IO port to output mode
pinMode(D2,OUTPUT);
pinMode(D3,OUTPUT);
// start the Ethernet connection:
if(Ethernet.begin(mac) == 0) {
Serial.println("Failed to configure Ethernet using DHCP");
// no point in carrying on, so do nothing forevermore:
for(;;);
}
// print your local IP address:
Serial.print("My IP address: ");
for(byte thisByte = 0; thisByte < 4; thisByte++){
// print the value of each byte of the IP address:
Serial.print(Ethernet.localIP()[thisByte], DEC);
Serial.print(".");
}
Serial.println();
// start the Ethernet connection and the server:
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}
void loop() {
// listen for incoming clients
EthernetClient client = server.available();
String request;
if(client){
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while(client.connected()){
if(client.available()){
char c = client.read();
Serial.write(c);
request +=c;
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == '\n' && currentLineIsBlank){
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
// add a meta refresh tag, so the browser pulls again every 5 seconds:
client.println("<meta http-equiv=\"refresh\" content=\"5\">");
client.println("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.dfrobot.com/ihome/stylesheet/stylesheet.css\" />");
client.println("<center> <a href=\"http://www.dfrobot.com\"><img src=\"http://alturl.com/qf6vz\"></a> </center> ");
client.println("<br />");
client.println("<div>");
client.flush();
/********************************Page display section***********************************/
//Determines whether there is information in the HTTP request that controls the output pins and, if so, sets the output state of the outlet based on the information
if(request.indexOf("GET /D2=ON") != -1){
digitalWrite(D2, HIGH);
value = HIGH;
}
if(request.indexOf("GET /D2=OFF") != -1){
digitalWrite(D2, LOW);
value = LOW;
}
//Reply the status of the set digital IO port according to the request message
client.print("Digital_2 output: ");
if(value == HIGH){
client.print("ON");
} else{
client.print("OFF");
}
client.println("<br><br>");
//In the web page set control D2 port hyperlink, used for web control development board digital output IO port state
client.println("Turn <a href=\"/D2=ON\">ON</a><br>");
client.println("Turn <a href=\"/D2=OFF\">OFF</a><br>");
if(request.indexOf("GET /D3=ON") != -1) {
digitalWrite(D3, HIGH);
value1 = HIGH;
}
if(request.indexOf("GET /D3=OFF") != -1){
digitalWrite(D3, LOW);
value1 = LOW;
}
client.println("<br />");
client.print("Digital_3 output: ");
if(value1 == HIGH){
client.print("ON");
} else{
client.print("OFF");
}
client.println("<br><br>");
client.println("Turn <a href=\"/D3=ON\">ON</a><br>");
client.println("Turn <a href=\"/D3=OFF\">OFF</a><br>");
/****************************************************************************/
client.println("</html>");
break;
}
if (c == '\n'){
// you're starting a new line
currentLineIsBlank = true;
} else if (c != '\r'){
// you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
//close the connection:
client.stop();
Serial.println("client disonnected");
}
}
Result
Open the serial monitor after uploading the code, and enter the IP address in the browser of another device on the same LAN to access the Web page and view or control the IO status through it.
You can also refer to the Arduino Getting Started with the Arduino Ethernet Shield for more details.
Was this article helpful?