help me create simple web server


I’m trying to to control a car with 2 motors (left motor and right motor) using WiFi Module by running a http web server

I’m not familiar with these coding languages so I mostly copy and paste codes.

Now I can run web server and open the page and there are two buttons that let me turn the output pins 4 and 5 to on or off.

But as I want to control my car, I want have 2 input boxes that I enter a value in each one (value is time in millisecond) and then hit a button and send the values and then turn pins 4 and 5 on for that length of time and then turn them off.

for example i want to turn the left motor on for 3 seconds and the right one for 4 seconds so I enter 3000 and 4000 in those input boxes and click on a button, then the pin 4 goes HIGH for 3000ms and pin 5 goes HIGH for 4000 ms.

Here is the code I’m using, help me do this by editing these codes not another way of designing HTML webpage.

  Rui Santos
  Complete project details at  

// Load Wi-Fi library
#include <ESP8266WiFi.h>

// Replace with your network credentials
const char* ssid     = "BoomeRang ASHIYANE";
const char* password = "Mediators123456";

// Set web server port number to 8880
WiFiServer server(8880);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
  // Print local IP address and start web server
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      if (client.available()) {             // if there's bytes to read from the client,
        char c =;             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Connection: close");
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            // Display current state, and ON/OFF buttons for GPIO 5  
                    client.println("<p>Left Wheels<p>");
                    client.println("<p>Right Wheels<p>");
                    client.println("<p><a href=\"/go/left/right\"><button class=\"button\">GO!</button></a></p>");

                              client.println("<FORM ACTION=\"/5/on\" method=get >");

          client.println("Pin 4 \"on\" or \"off\": <INPUT TYPE=TEXT NAME=\"LED\" VALUE=\"\" SIZE=\"25\" MAXLENGTH=\"50\">
client.println("Pin 5 \"on\" or \"off\": <INPUT TYPE=TEXT NAME=\"LED2\" VALUE=\"\" SIZE=\"25\" MAXLENGTH=\"50\">

          client.println("<INPUT TYPE=SUBMIT NAME=\"submit\" VALUE=\"Change Pin 4!\">");



            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // If the output5State is off, it displays the ON button       
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button       
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
            // The HTTP response ends with another blank line
            // Break out of the while loop
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
    // Clear the header variable
    header = "";
    // Close the connection
    Serial.println("Client disconnected.");

I could find a way to put a text input with a button but I couldn’t figure out how to use it in the way that I want, I put this code in next comment

before posting the code, let me mention that I want to make the pins go High together not one after each other, for example pin 4 goes HIGH now for 3 secs, and pin 5 goes HIGH now for 5 secs.

//zoomkat 1-10-11
//web LED code
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html
//address will look like when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString;


void setup(){

  pinMode(4, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);

  //enable serial data print
  Serial.println("servertest1"); // so I can keep track of what is loaded

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c =;

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string
          readString += c;
          //Serial.print(c); //uncomment to see in serial monitor

        //if HTTP request has ended
        if (c == '\n') {


          //now output HTML data header

          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");

          client.println("<TITLE>Arduino GET test page</TITLE>");

          client.println("<H1>HTML form GET example</H1>");

          client.println("<FORM ACTION=\"\" method=get >");

          client.println("Pin 4 \"on\" or \"off\": <INPUT TYPE=TEXT NAME=\"LED\" VALUE=\"\" SIZE=\"25\" MAXLENGTH=\"50\">

          client.println("<INPUT TYPE=SUBMIT NAME=\"submit\" VALUE=\"Change Pin 4!\">");




          //stopping client

          if(readString.indexOf("on") >0)//checks for on
            digitalWrite(4, HIGH);    // set pin 4 high
            Serial.println("Led On");
          if(readString.indexOf("off") >0)//checks for off
            digitalWrite(4, LOW);    // set pin 4 low
            Serial.println("Led Off");
          //clearing string for next read


First of all "Karma added for actually creating a proper html page" How many people don't do that you can't believe.
Your html-code is difficult to read due to all those "client.println()" statements, and since on an ESP thee String class is quite usable (if kept local) i tend to first make the page into a single String and then send it. I always use ESPwebserver, it has better overview, but this is a bit beside the point.
The solution is not difficult, you need to create a form in which either you use 2 entry fields for each GPIO, and a separate 'submit' button, then the data from both fields will be included.

"I could find a way to put a text input with a button but I couldn't figure out how to use it in the way that I want,"

Have you googled "web page text box"? A text box will send the contents of the box to the server, where it can be evaluated and acted upon.