Published September 13, 2023 © MIT

Async Webserver hosted on ESP 01 S devboard

Remotely Control any AC/DC appliance using an ESP 01 S devboard through a web interface.

AdvancedFull instructions provided4 hours648

Async Webserver hosted on ESP 01 S devboard

Things used in this project

Hardware components

ESP 01 S devboard

Software apps and online services

Arduino IDE

Story

Async-Webserver for ESP 01 S devboard

This project demonstrates how to control relays using an ESP 01 S devboard that runs Asynchronous web server. The code allows you to toggle the relays' state through a web interface, making it easy to control devices remotely.

Requirements

Arduino IDE
ESP 01 S devboard
Two-channel relay module

Device and web GUI

Serial data printed by the ESP 01 S dev module

Access the web server using the IP address shown in the Serial Monitor. The web page will display two toggle switches for each relay. You can toggle the switches to turn the relays on or off.

GUI of the webserver for controling the relays

Getting Started

Connect your ESP 01 S devboard to your computer

Open the Arduino IDE and install the required libraries:

Arduino Core for ESP8266 (should be installed by default for ESP8266 boards)
ESP8266WiFi library
ESPAsyncTCP library
ESPAsyncWebServer library
Open the Arduino IDE and install the required libraries:Arduino Core for ESP8266 (should be installed by default for ESP8266 boards)ESP8266WiFi libraryESPAsyncTCP libraryESPAsyncWebServer library
Replace the placeholders in the code with your Wi-Fi credentials (ssid and password).
Upload the sketch to your ESP8266 board.
Open the Serial Monitor to see the connection status and IP address.
Relays are respective connected to GPIO pins
(Relay1 -> GPIO 2, Relay2 -> GPIO 0).

How It Works

The code sets up an asynchronous web server on port 80, allowing you to access it through your web browser. The server serves an HTML page with two toggle switches, one for each relay. When you toggle the switches on the web page, it sends a request to the ESP8266 to update the relay state. The relays' output pins are set to either HIGH or LOW, depending on the state received from the web page.

Functions

connectify(const char* network, const char* pass): Connects the device to the specified Wi-Fi network.
outputState(int output): Checks the state of the given output (relay) and returns the corresponding "checked" or empty string for HTML rendering.
processor(const String& var): Custom processor function to render the HTML page with the relay status switches.
setup(): Initializes the output pins, connects to Wi-Fi, and starts the web server to serve the HTML page.
loop(): Empty loop as the server operates asynchronously, you can put your other code here just use millis() insted of delay().

Author

Aman Shaikh
Contact: amanshaikhw@gmail.com

License

This project is licensed under the MIT License.

Firmware code to host server

#include <Arduino.h>
#include<ESP8266WiFi.h>
#include<ESPAsyncTCP.h>
#include<ESPAsyncWebServer.h>

const char* ssid = "put SSID here";
const char* password = "put Password here";

// Assign output variables to GPIO pins
const char* PARAM_INPUT_1 = "output";
const char* PARAM_INPUT_2 = "state";

const uint8_t Relay1 = 2;
const uint8_t Relay2 = 0;

void connectify(const char* network,const char* pass){
  int times=0;
  Serial.println("connecting to ");
  Serial.print(network);
  Serial.println("----------------------------------------------------");
  WiFi.begin(network,pass);
  while (WiFi.status() != WL_CONNECTED){
    delay(500);
    Serial.print(".");
    times+=1;
  }
  Serial.println("----------------------------------------------------");
  Serial.println("Connecting tries = ");
  Serial.println(times);
  Serial.println("----------------------------------------------------");
  Serial.println("IP address ----> ");
  Serial.print(WiFi.localIP());

}


AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>ESP 01 S Relay Board</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 3.0rem;}
    p {font-size: 3.0rem;}
    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
    .switch {position: relative; display: inline-block; width: 120px; height: 68px} 
    .switch input {display: none}
    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
    input:checked+.slider {background-color: #90EE90}
    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
  </style>
</head>
<body>
  <h2>ESP 01 S Relay Board</h2>
  %BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
  else { xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
  xhr.send();
}
</script>
<p align="centre" style="color:grey;font-size:30px;">Made By Aman Shaikh</p>

</body>
</html>
)rawliteral";


String outputState(int output){
  if(digitalRead(output)==0){
    return "checked";
  }
  else {
    return "";
  }
}



String processor(const String& var){
  //Serial.println(var);
  if(var == "BUTTONPLACEHOLDER"){
    String buttons = "";
    buttons += "<h4>Relay1 status</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" " + outputState(Relay1) + "><span class=\"slider\"></span></label>";
    buttons += "<h4>Relay2 status</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"0\" " + outputState(Relay2) + "><span class=\"slider\"></span></label>";
    return buttons;
  }
  return String();
}


void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(Relay1,OUTPUT);
  pinMode(Relay2,OUTPUT);

  
  digitalWrite(Relay1, HIGH);
  digitalWrite(Relay2, HIGH);
  
  connectify(ssid,password);
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200,"text/html",index_html, processor);
  });

  server.on("/update",HTTP_GET, [](AsyncWebServerRequest *request){
    String inputMessage1;
    String inputMessage2;

    if(request->hasParam(PARAM_INPUT_1)&& request->hasParam(PARAM_INPUT_2)){
      inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
      inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
      digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());
    }
    else {
      inputMessage1 = "No message sent";
      inputMessage2 = "No message sent";
    }
    Serial.print("GPIO: ");
    Serial.print(inputMessage1);
    Serial.print(" - Set to: ");
    Serial.println(inputMessage2);
    request->send(200, "text/plain", "OK");
  });

  server.begin();

}

void loop() {
  
  //Warning 
  
  /*You can do anything here just do not use delay()*/
  
  /*Always use millis()*/
 
}

Credits

Aman Shaikh

5 projects • 2 followers

I am a passionate Embedded hardware and Software developer. I have 4 years of experience. Working beneath the surface is where I thrive.

Contact

Comments

Please log in or sign up to comment.

Embed the widget on your own site

Async Webserver hosted on ESP 01 S devboard

Async Webserver hosted on ESP 01 S devboard

Things used in this project

Hardware components

Software apps and online services

Story

Async-Webserver for ESP 01 S devboard

Requirements

Device and web GUI

Getting Started

How It Works

Functions

Author

License

Code

Firmware code to host server

Credits

Aman Shaikh

Comments

Related channels and tags