Published July 13, 2024 © LGPL

WEB- server Car

Car that can be controlled buy a web interface

IntermediateShowcase (no instructions)2 hours158

Things used in this project

Hardware components

DC motor (generic)

SparkFun Dual H-Bridge motor drivers L298

esp 8266

Rechargeable Battery, 7.2 V

Story

In a quiet neighborhood, where the loudest noise was usually the chirping of birds, something extraordinary was about to happen. Arka, a young tech enthusiast, had just finished his latest invention: an RC car controlled by an ESP8266 microcontroller through a web-based interface. It wasn’t just any RC car; it could move forward, backward, left, and right, with lights and a horn that could be controlled remotely. Little did he know, this car was about to become the protagonist of the most epic car chase the neighborhood had ever seen.

It all started on a sunny Saturday afternoon. Arka decided to test his RC car in the park. He had created a sleek web interface to control the car, accessible from any device with a browser. Armed with his smartphone, he set the car down and started to drive it around.

Suddenly, the car’s lights started flashing and the horn blared unexpectedly. Arka looked around, puzzled. That’s when he saw Nothing, the neighborhood’s most mischievous cat, pouncing on the car. In a panic, Arka tried to steer the car away, but Nothing was too quick. The cat, intrigued by the flashing lights and honking horn, gave chase.

What ensued was nothing short of a spectacle. The RC car zigzagged through the park, with Nothing hot on its tail. Arka’s friends, who were playing cricket nearby, noticed the commotion and joined in, trying to catch the elusive car and the cat. Laughter and shouts filled the air as the car led them on a wild chase around trees, over benches, and even through a puddle.

Parents and kids gathered to watch the hilarious scene. Some even took out their phones to record the chase. Arka, meanwhile, was frantically trying to regain control. He pressed the button to turn off the lights and horn, hoping it would deter Nothing. But the cat was determined. It wasn’t about the lights or the sound anymore; it was about the thrill of the chase.

Finally, after what felt like an eternity, Nothing got tired and sat down, panting. The RC car, equally exhausted, came to a stop right in front of the crowd. Everyone burst into applause, cheering for both the car and the cat. Arka picked up his car, smiling sheepishly.

“Well, that was one way to test the car’s durability, ” he said, as everyone laughed.

From that day on, the RC car became a local legend. Arka even added a feature to the web interface: a “Nothing Mode” that made the car perform random evasive maneuvers, just in case Nothing decided to chase it again. And every time someone saw Nothing, they couldn’t help but chuckle, remembering the great RC car chase of the neighborhood.

Technical Information

Project Overview

This project demonstrates how to control an RC car using an ESP8266 or ESP32 microcontroller through a web-based interface. The web interface allows users to remotely control the car's movements, lights, and horn by connecting to a local WiFi network.

Key Features

Remote Car Control

Control the car's movements: forward, backward, left, and right.
Stop the car with a single button press.
Remote Car ControlControl the car's movements: forward, backward, left, and right.Stop the car with a single button press.

Light and Horn Control

Turn the car's lights on and off.
Activate and deactivate the car's horn.
Light and Horn ControlTurn the car's lights on and off.Activate and deactivate the car's horn.

Web-Based Interface

Accessible on any device with a web browser (desktop, tablet, smartphone).
Simple and user-friendly design with buttons for each control action.
Web-Based InterfaceAccessible on any device with a web browser (desktop, tablet, smartphone).Simple and user-friendly design with buttons for each control action.

Real-Time Feedback

Immediate response to control commands sent from the web interface.
Visual and auditory feedback from the car (lights and horn).
Real-Time FeedbackImmediate response to control commands sent from the web interface.Visual and auditory feedback from the car (lights and horn).

Technical Details

Components

Microcontroller: ESP8266 or ESP32, which offers low cost and built-in WiFi capabilities.
Motor Control: Four GPIO pins control two motors for movement.
Light and Horn Control: Two GPIO pins control the light and horn.

Web Server

The microcontroller runs a web server on port 80 to serve the control interface.
The web interface uses HTML, CSS, and JavaScript for structure, styling, and interactivity.

Circuit Connections

Motors: Connected to GPIO pins D1, D2, D3, and D4.
Light: Connected to GPIO pin D6.
Horn: Connected to GPIO pin D7.

Setting Up the Project

Hardware Setup

Connect the motors to the appropriate GPIO pins on the ESP8266/ESP32.
Connect the light to GPIO pin D6.
Connect the horn to GPIO pin D7.
Power the ESP8266/ESP32 microcontroller.
Hardware SetupConnect the motors to the appropriate GPIO pins on the ESP8266/ESP32.Connect the light to GPIO pin D6.Connect the horn to GPIO pin D7.Power the ESP8266/ESP32 microcontroller.

Programming the Microcontroller

Use the Arduino IDE to write and upload the code to the ESP8266/ESP32.
The code should include setting up the WiFi connection, starting the web server, and defining the control functions for the motors, lights, and horn.
Programming the MicrocontrollerUse the Arduino IDE to write and upload the code to the ESP8266/ESP32.The code should include setting up the WiFi connection, starting the web server, and defining the control functions for the motors, lights, and horn.

Web Interface Design

Create an HTML file for the web interface with buttons for each control action.
Use CSS to style the interface for a clean, user-friendly design.
Add JavaScript to handle button clicks and send commands to the microcontroller.
Web Interface DesignCreate an HTML file for the web interface with buttons for each control action.Use CSS to style the interface for a clean, user-friendly design.Add JavaScript to handle button clicks and send commands to the microcontroller.

Testing and Debugging

Connect to the microcontroller's WiFi network using a device with a web browser.
Open the web interface and test each control function.
Debug any issues by checking connections, code, and web interface responsiveness.
Testing and DebuggingConnect to the microcontroller's WiFi network using a device with a web browser.Open the web interface and test each control function.Debug any issues by checking connections, code, and web interface responsiveness.

main code

/*<!--***********************************************************************************************************************
******                                    Home Automation System with Theme Switching                                   *****
*****                                     Author: ARKA MANNA                                                            *****
*****                                                                                                                   *****
*****                                     Licensed under the Apache License, Version 2.0 (the "License") ;              *****
*****                                     you may not use this file except in compliance with the License.              *****
*****                                     You may obtain a copy of the License at                                       *****
*****                                                                                                                   *****
*****                                     http://www.apache.org/licenses/LICENSE-2.0                                    *****
*****                                                                                                                   *****
*****                                     Unless required by applicable law or agreed to in writing, software           *****
*****                                     distributed under the License is distributed on an "AS IS" BASIS,             *****
*****                                     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.      *****
*****                                     See the License for the specific language governing permissions and           *****
*****                                     limitations under the License.                                                *****
*****************************************************************************************************************************

*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);

// Motor pins
const int motor1Pin1 = 5; // D1
const int motor1Pin2 = 4; // D2
const int motor2Pin1 = 0; // D3
const int motor2Pin2 = 2; // D4

// Light and horn pins
const int lightPin = 12; // D6
const int hornPin = 13; // D7

void setup() {
  Serial.begin(115200);

  // Set up ESP8266 as an Access Point
  WiFi.softAP("ESP8266_RC_Car", "12345678"); // SSID and Password
  Serial.println("Access Point started");
  Serial.print("IP Address: ");
  Serial.println(WiFi.softAPIP());

  // Initialize motor pins
  pinMode(motor1Pin1, OUTPUT);
  pinMode(motor1Pin2, OUTPUT);
  pinMode(motor2Pin1, OUTPUT);
  pinMode(motor2Pin2, OUTPUT);

  // Initialize light and horn pins
  pinMode(lightPin, OUTPUT);
  pinMode(hornPin, OUTPUT);

  // Ensure car starts in the stopped state
  stopCar();

  // Set up web server
  server.on("/", handleRoot);
  server.on("/forward", handleForward);
  server.on("/backward", handleBackward);
  server.on("/left", handleLeft);
  server.on("/right", handleRight);
  server.on("/stop", handleStop);
  server.on("/lighton", handleLightOn);
  server.on("/lightoff", handleLightOff);
  server.on("/hornon", handleHornOn);
  server.on("/hornoff", handleHornOff);
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
}

void handleRoot() {
  String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>ESP8266 Robot</title>
<style>
  body { background-color: #121212; font-family: Arial, Helvetica, Sans-Serif; color: #ffffff; }
  #JD { text-align: center; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 24px; }
  .foot { text-align: center; font-family: "Comic Sans MS", cursive; font-size: 30px; color: #FF5722; }
  .button { border: none; color: white; padding: 17px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px; width: 100%; }
  .red {background-color: #D32F2F;}
  .green {background-color: #388E3C;}
  .yellow {background-color: #FBC02D;}
  .blue {background-color: #1976D2;}
</style>
<script>
  function sendRequest(path) {
    fetch(path).then(response => response.text()).then(text => console.log(text));
  }
  function handleButton(event, path, holdPath) {
    event.preventDefault();
    if (holdPath) {
      sendRequest(path);
      document.addEventListener('mouseup', () => sendRequest(holdPath), {once: true});
    } else {
      sendRequest(path);
    }
  }
</script>
</head>
<body>
  <table width="100%" border="1">
    <tr>
      <td bgcolor="#212121" id="JD">Robot Controller</td>
    </tr>
  </table>
  <table width="100" height="249" border="0" align="center">
    <tr>
      <td>&nbsp;</td>
      <td align="center" valign="middle">
        <button class="button green" onmousedown="handleButton(event, '/forward', '/stop')">Forward</button>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        <button class="button green" onmousedown="handleButton(event, '/left', '/stop')">Turn Left</button>
      </td>
      <td align="center" valign="middle">
        <button class="button red" onclick="handleButton(event, '/stop')">Stop</button>
      </td>
      <td align="center" valign="middle">
        <button class="button green" onmousedown="handleButton(event, '/right', '/stop')">Turn Right</button>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td align="center" valign="middle">
        <button class="button green" onmousedown="handleButton(event, '/backward', '/stop')">Backward</button>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        <button class="button blue" onclick="handleButton(event, '/lighton')">Light On</button>
      </td>
      <td align="center" valign="middle">
        <button class="button blue" onclick="handleButton(event, '/lightoff')">Light Off</button>
      </td>
      <td align="center" valign="middle">
        <button class="button yellow" onclick="handleButton(event, '/hornon')">Horn On</button>
      </td>
      <td align="center" valign="middle">
        <button class="button yellow" onclick="handleButton(event, '/hornoff')">Horn Off</button>
      </td>
    </tr>
  </table>
  <p class="foot">Arkenstine LAB</p>
</body>
</html>
)rawliteral";
  server.send(200, "text/html", html);
  Serial.println("Served root page");
}

void handleForward() {
  digitalWrite(motor1Pin1, HIGH);
  digitalWrite(motor1Pin2, LOW);
  digitalWrite(motor2Pin1, HIGH);
  digitalWrite(motor2Pin2, LOW);
  server.send(200, "text/plain", "Moving forward");
  Serial.println("Moving forward");
}

void handleBackward() {
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, HIGH);
  digitalWrite(motor2Pin1, LOW);
  digitalWrite(motor2Pin2, HIGH);
  server.send(200, "text/plain", "Moving backward");
  Serial.println("Moving backward");
}

void handleLeft() {
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, HIGH);
  digitalWrite(motor2Pin1, HIGH);
  digitalWrite(motor2Pin2, LOW);
  server.send(200, "text/plain", "Turning left");
  Serial.println("Turning left");
}

void handleRight() {
  digitalWrite(motor1Pin1, HIGH);
  digitalWrite(motor1Pin2, LOW);
  digitalWrite(motor2Pin1, LOW);
  digitalWrite(motor2Pin2, HIGH);
  server.send(200, "text/plain", "Turning right");
  Serial.println("Turning right");
}

void handleStop() {
  stopCar();
  server.send(200, "text/plain", "Stopped");
  Serial.println("Stopped");
}

void handleLightOn() {
  digitalWrite(lightPin, HIGH);
  server.send(200, "text/plain", "Light On");
  Serial.println("Light On");
}

void handleLightOff() {
  digitalWrite(lightPin, LOW);
  server.send(200, "text/plain", "Light Off");
  Serial.println("Light Off");
}

void handleHornOn() {
  digitalWrite(hornPin, HIGH);
  server.send(200, "text/plain", "Horn On");
  Serial.println("Horn On");
}

void handleHornOff() {
  digitalWrite(hornPin, LOW);
  server.send(200, "text/plain", "Horn Off");
  Serial.println("Horn Off");
}

void stopCar() {
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, LOW);
  digitalWrite(motor2Pin1, LOW);
  digitalWrite(motor2Pin2, LOW);
}

WEB- server Car

Things used in this project

Hardware components

Story

Technical Information

Project Overview

Key Features

Technical Details

Components

Web Server

Circuit Connections

Setting Up the Project

Code

main code

Credits

Arka Manna

Comments

Embed the widget on your own site

WEB- server Car

WEB- server Car

Things used in this project

Hardware components

Story

Technical Information

Project Overview

Key Features

Technical Details

Components

Web Server

Circuit Connections

Setting Up the Project

Code

main code

Credits

Arka Manna

Comments

Related channels and tags