SW-420 Vibration sensor with Nodemcu ESP8266 Wifi Module: Vibration Monitoring using Web Server

Fawad February 18, 2024

0 92 8 minutes read

Table of Contents

Introduction:

SW-420 Vibration sensor with Nodemcu ESP8266 Wifi Module: Vibration Monitoring using Web Server- Looking to display SW-420 Vibration sensor data on the web using ESP8266? Look no further! In this article, we will create a web server with the help of the NodeMCU ESP8266 WiFi module that will monitor the SW-420 Vibration Sensor in real-time. For the web server, we will use HTML, CSS, and JavaScript.

With the ESP8266, a powerful and affordable Wi-Fi module, along with the SW-420 sensor, which detects vibrations, you can create a system that captures and displays real-time data on the web. Whether you’re monitoring vibrations in machinery, tracking seismic activity, or conducting research, this tutorial will guide you through the entire setup.

From connecting the sensor to the ESP8266 to programming the microcontroller, you’ll learn how to collect vibration data and transmit it wirelessly to a web server. We’ll also explore how to design a user-friendly web interface to visualize and interpret the incoming data.

Get ready to unlock the true potential of the SW-420 Vibration sensor and the ESP8266. By the end of this guide, you’ll have all the tools and knowledge you need to monitor the SW-420 Vibration sensor using Nodemcu ESP8266 Web Server. Let’s get started!

Amazon Links:

Nodemcu ESP8266 Wifi Module

SW-420 Vibration Sensor

Jumper Wires

breadboard

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

Understanding the SW-420 vibration sensor

The SW-420 vibration sensor is a small and versatile device that can detect vibrations in its surroundings. It consists of a metal spring that is sensitive to vibrations, and when it moves, it triggers the sensor. The sensor provides a digital output that can be read by a microcontroller, such as the ESP8266.

To use the SW-420 sensor, you’ll need to connect it to the appropriate pins on the ESP8266. The sensor has three pins: VCC, GND, and D0. VCC is the power supply pin, GND is the ground pin, and D0 is the digital output pin.

Connecting the SW-420 sensor to the ESP8266 is a straightforward process. You’ll need to connect the VCC pin to a 3.3V power source, the GND pin to the ground, and the D0 pin to a digital input pin on the ESP8266. It’s important to note that the ESP8266 operates at 3.3V, so make sure not to connect any pins to a higher voltage source.

SW-420 Vibration Sensor Features and Specifications:

Operating Voltage and Current: The sensor operates within a voltage range of 3.3V to 5V DC and requires a current of about 15mA.

Sensor Type: It utilizes the SW-420 normally closed type vibration sensor, which is known for its responsiveness to vibrations.

Comparator IC: The module includes an LM393 comparator, a standard component for comparing voltage levels and providing stable outputs.

Output Type: The sensor provides a digital output. When no vibration is detected, it offers a logic low signal, and when vibrations are sensed, it switches to a logic high.

Adjustable Sensitivity: Sensitivity to vibrations can be adjusted using an onboard potentiometer, allowing for customization based on application needs.

Indicators: There are LEDs indicating both power and output status, which help in easy monitoring of the sensor’s functioning.

Size and Availability: It is compact and widely available, making it a convenient choice for various projects.

Applications: The sensor is versatile and can be used in applications like shock triggering, theft alarms, smart cars, earthquake alarms, and motorcycle alarms.

Additional Features: The sensor is non-directional with high sensitivity. It can respond to both vibration and tilt. Notably, it is also waterproof and resistant to compression.

Overview of the ESP8266 microcontroller

The ESP8266 is a powerful and affordable Wi-Fi module that can be used for a wide range of applications, including Internet of Things (IoT) projects. It features a built-in Wi-Fi module, GPIO pins for connecting sensors and actuators, and a microcontroller that can be programmed using the Arduino IDE.

To program the ESP8266, you’ll need to install the necessary libraries and board definitions in the Arduino IDE.

The ESP8266 supports various programming languages, including C++ and MicroPython, making it versatile and accessible to developers with different skill levels. For this tutorial, we’ll be using the Arduino programming language, as it provides a user-friendly and beginner-friendly interface.

Specifications:

Specification	Detail
Microcontroller	Tensilica 32-bit RISC CPU Xtensa LX106
Operating Voltage	3.3V
Input Voltage	7-12V
Digital I/O Pins (DIO)	16
Analog Input Pins (ADC)	1
UARTs	1
Spis	1
I2Cs	1
Flash Memory	4 MB
SRAM	64 KB
Clock Speed	80 MHz, overclockable to 160 MHz
WiFi Capability	Built-in 802.11 b/g/n
Programming Compatibility	Arduino IDE
USB-TTL	Based on CP2102, enabling Plug n Play
Antenna	PCB Antenna
Additional Features	Deep Sleep Operating, built-in Wi-Fi/Bluetooth

The board dimensions vary slightly based on the package type, with the Amica NodeMCU being smaller (49mm x 26mm) compared to the Lolin NodeMCU (58mm x 32mm). The Lolin NodeMCU also has two additional pins: VU (connected to USB power) and an extra ground pin.

Circuit Diagram:

Connect the VCC pin of the SW-420 vibration sensor to the 3v3 pin on the NodeMCU ESP826 wifi module.

Connect the GND pin of the SW-420 vibration sensor to the GND pin of the NodeMCU ESP826 wifi module.

Connect the D0 pin of the SW-420 vibration sensor to the D1 pin of the NodeMCU ESP826 wifi module, which is GPIO5. The D0 pin on the SW-420 is a digital output that goes high when vibration is detected.

SW-420 Vibration Sensor with Nodemcu ESP8266 Code:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "your_network_name";
const char* password = "your_network_password";
ESP8266WebServer server(80);
const int vibrationSensor = D1;
bool vibrationDetected = false;
unsigned long lastVibrationTime = 0;
const unsigned long vibrationDisplayTime = 1000; // Time to display red color in milliseconds
void setup() {
  Serial.begin(115200);
  pinMode(vibrationSensor, INPUT);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/status", handleStatus);
  server.begin();
}
void loop() {
  server.handleClient();
  
  if (digitalRead(vibrationSensor)) {
    vibrationDetected = true;
    lastVibrationTime = millis();
  } else if (millis() - lastVibrationTime > vibrationDisplayTime) {
    vibrationDetected = false;
  }<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>
void handleRoot() {
  String html = "<html><head><script>";
  html += "function updateStatus() {";
  html += "var xhttp = new XMLHttpRequest();";
  html += "xhttp.onreadystatechange = function() {";
  html += "if (this.readyState == 4 && this.status == 200) {";
  html += "document.getElementById('status').innerHTML = this.responseText;";
  html += "}};";
  html += "xhttp.open('GET', '/status', true);";
  html += "xhttp.send();";
  html += "setTimeout(updateStatus, 500);";
  html += "}";
  html += "setInterval(updateStatus, 500);"; // Update every 500ms
  html += "</script></head><body onload='updateStatus()'>";
  html += "<h1 style='text-align: center;'>Vibration Sensor Status</h1><div id='status' style='text-align: center;'></div>";
  html += "</body></html>";

  server.send(200, "text/html", html);<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>
void handleStatus() {
  String statusHTML;
  if (vibrationDetected) {
    statusHTML = "<div style='width: 150px; height: 150px; background-color: red; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>Vibration Detected</p>";
  } else {
    statusHTML = "<div style='width: 150px; height: 150px; background-color: green; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>No Vibration</p>";<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
  }</span></span>
  server.send(200, "text/html", statusHTML);<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "your_network_name";

const char* password = "your_network_password";

ESP8266WebServer server(80);

const int vibrationSensor = D1;

bool vibrationDetected = false;

unsigned long lastVibrationTime = 0;

const unsigned long vibrationDisplayTime = 1000; // Time to display red color in milliseconds

void setup() {

Serial.begin(115200);

pinMode(vibrationSensor, INPUT);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi...");

}

Serial.println("Connected to WiFi");

Serial.println(WiFi.localIP());

server.on("/", handleRoot);

server.on("/status", handleStatus);

server.begin();

}

void loop() {

server.handleClient();

if (digitalRead(vibrationSensor)) {

vibrationDetected = true;

lastVibrationTime = millis();

} else if (millis() - lastVibrationTime > vibrationDisplayTime) {

vibrationDetected = false;

}<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">

}</span></span>

void handleRoot() {

String html = "<html><head><script>";

html += "function updateStatus() {";

html += "var xhttp = new XMLHttpRequest();";

html += "xhttp.onreadystatechange = function() {";

html += "if (this.readyState == 4 && this.status == 200) {";

html += "document.getElementById('status').innerHTML = this.responseText;";

html += "}};";

html += "xhttp.open('GET', '/status', true);";

html += "xhttp.send();";

html += "setTimeout(updateStatus, 500);";

html += "}";

html += "setInterval(updateStatus, 500);"; // Update every 500ms

html += "</script></head><body onload='updateStatus()'>";

html += "<h1 style='text-align: center;'>Vibration Sensor Status</h1><div id='status' style='text-align: center;'></div>";

html += "</body></html>";

server.send(200, "text/html", html);<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">

}</span></span>

void handleStatus() {

String statusHTML;

if (vibrationDetected) {

statusHTML = "<div style='width: 150px; height: 150px; background-color: red; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>Vibration Detected</p>";

} else {

statusHTML = "<div style='width: 150px; height: 150px; background-color: green; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>No Vibration</p>";<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">

}</span></span>

server.send(200, "text/html", statusHTML);<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">

}</span></span>

Practical Demonstration:

When the code is uploaded, then open the serial monitor and wait for the WiFi connection. Once the connection is established, copy the local network’s IP address and paste it into any browser. Also, make sure that all devices are connected to the same network.

Paste the copied IP address into the web browser, and press the Enter key.

After pressing the Enter button, you will see an interface like this.

Accessing the same IP address on mobile you will see the same interface.

When I touch the SW-420 Vibration Sensor, the circle’s color changes in the web browser, and the text also updates to ‘Vibration detected’.

You will see the same output on mobile or other devices connected to the same network.

Code Explanation:

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "your_network_name";

const char* password = "your_network_password";

ESP8266WebServer server(80);

const int vibrationSensor = D1;

bool vibrationDetected = false;

unsigned long lastVibrationTime = 0;

const unsigned long vibrationDisplayTime = 1000; // Time to display red color in milliseconds

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "your_network_name";

const char* password = "your_network_password";

ESP8266WebServer server(80);

const int vibrationSensor = D1;

bool vibrationDetected = false;

unsigned long lastVibrationTime = 0;

const unsigned long vibrationDisplayTime = 1000; // Time to display red color in milliseconds

The code snippet provided is part of a project that utilizes an ESP8266 WiFi module. The inclusion of the <ESP8266WiFi.h> and <ESP8266WebServer.h> libraries at the beginning of the code is crucial as they enable the utilization of WiFi functionalities and the setup of a web server on the ESP8266, respectively. The WiFi network’s credentials are specified with const char* ssid = “your_network_name”; and const char* password = “your_network_password”;, which are essential for establishing a connection to the designated network.

A web server is created on port 80 through the declaration ESP8266WebServer server(80);. This is where the device will listen for incoming HTTP requests. The physical connection to the vibration sensor is defined with const int vibrationSensor = D1;, assigning the sensor to the D1 GPIO pin on the ESP8266.

The state of vibration detection is monitored using a boolean variable bool vibrationDetected = false;. This variable serves as a flag to indicate whether a vibration has been detected or not. Additionally, unsigned long lastVibrationTime = 0; is used to record the timestamp of the last detected vibration, aiding in the management of sensor data over time. Finally, the variable const unsigned long vibrationDisplayTime = 1000; specifies the duration, in milliseconds, for which the detected vibration status is displayed, ensuring a consistent user interface experience.

void setup() {

  Serial.begin(115200);

  pinMode(vibrationSensor, INPUT);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi...");

  }

  Serial.println("Connected to WiFi");

  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);

  server.on("/status", handleStatus);

  server.begin();

}

void setup() {

Serial.begin(115200);

pinMode(vibrationSensor, INPUT);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi...");

}

Serial.println("Connected to WiFi");

Serial.println(WiFi.localIP());

server.on("/", handleRoot);

server.on("/status", handleStatus);

server.begin();

}

The first step in this setup is the initialization of serial communication, which is crucial for debugging and monitoring the status of the device. This step also includes setting up the vibration sensor pin as an input, establishing a direct line of communication between the sensor and the ESP8266.

Following this, the system connects to a predefined WiFi network, which is essential for enabling the remote monitoring and control capabilities of the device. Once the connection is established, the device’s IP address is printed to the Serial monitor. This action is significant as it provides the user with the necessary information to access the web server hosted on the ESP8266.

The code also specifies server endpoints, which are critical for web server functionality. The root endpoint, denoted by “/”, serves the main page of the web server, which is likely the interface for the vibration sensor system. Additionally, a “/status” endpoint is defined for checking the sensor’s current status. This organization of endpoints provides a structured and user-friendly way to interact with the system, allowing for easy access to both the system interface and real-time sensor status updates. Overall, these steps are fundamental in setting up a robust and interactive web-based interface for the vibration sensor system, leveraging the capabilities of the ESP8266 module.

void loop() {

  server.handleClient();

  if (digitalRead(vibrationSensor)) {

    vibrationDetected = true;

    lastVibrationTime = millis();

  } else if (millis() - lastVibrationTime > vibrationDisplayTime) {

    vibrationDetected = false;

  }

}

void loop() {

server.handleClient();

if (digitalRead(vibrationSensor)) {

vibrationDetected = true;

lastVibrationTime = millis();

} else if (millis() - lastVibrationTime > vibrationDisplayTime) {

vibrationDetected = false;

}

The code’s main functionality revolves around handling client requests and managing the data from the vibration sensor. It actively listens for and processes incoming requests from clients, ensuring the server is responsive and interactive. Concurrently, it continuously reads the state of the vibration sensor. This is a crucial aspect as it determines whether or not vibration has been detected. Upon detecting vibration, the code updates two key variables: vibrationDetected and lastVibrationTime. vibrationDetected is a boolean flag that indicates the presence or absence of vibration, serving as a key indicator for the system’s current state. lastVibrationTime, on the other hand, records the exact time when the vibration was last detected. This timestamp is essential for tracking the sensor’s activity over time and can be used for logging or triggering subsequent actions based on the detection of vibration. These functions ensure the system is not only monitoring the sensor in real-time but also accurately recording its status for any necessary analysis or response.

void handleRoot() {

  String html = "<html><head><script>";

  html += "function updateStatus() {";

  html += "var xhttp = new XMLHttpRequest();";

  html += "xhttp.onreadystatechange = function() {";

  html += "if (this.readyState == 4 && this.status == 200) {";

  html += "document.getElementById('status').innerHTML = this.responseText;";

  html += "}};";

  html += "xhttp.open('GET', '/status', true);";

  html += "xhttp.send();";

  html += "setTimeout(updateStatus, 500);";

  html += "}";

  html += "setInterval(updateStatus, 500);"; // Update every 500ms

  html += "</script></head><body onload='updateStatus()'>";

  html += "<h1 style='text-align: center;'>Vibration Sensor Status</h1><div id='status' style='text-align: center;'></div>";

  html += "</body></html>";

  server.send(200, "text/html", html);

}

void handleRoot() {

String html = "<html><head><script>";

html += "function updateStatus() {";

html += "var xhttp = new XMLHttpRequest();";

html += "xhttp.onreadystatechange = function() {";

html += "if (this.readyState == 4 && this.status == 200) {";

html += "document.getElementById('status').innerHTML = this.responseText;";

html += "}};";

html += "xhttp.open('GET', '/status', true);";

html += "xhttp.send();";

html += "setTimeout(updateStatus, 500);";

html += "}";

html += "setInterval(updateStatus, 500);"; // Update every 500ms

html += "</script></head><body onload='updateStatus()'>";

html += "<h1 style='text-align: center;'>Vibration Sensor Status</h1><div id='status' style='text-align: center;'></div>";

html += "</body></html>";

server.send(200, "text/html", html);

}

The user defined function is designed to serve HTML content for the root URL, which is a key part of the web server’s functionality. This HTML content is not static; it includes embedded JavaScript, which plays a crucial role in dynamically updating the sensor’s status. The JavaScript is programmed to periodically check the status of the vibration sensor. This means that the web page automatically refreshes the displayed information at regular intervals, ensuring that the user is presented with the most current status of the sensor without needing to manually reload the page. This feature enhances the interactivity and user-friendliness of the web interface, making it an efficient tool for real-time monitoring of the vibration sensor’s readings.

void handleStatus() {

  String statusHTML;

  if (vibrationDetected) {

    statusHTML = "<div style='width: 150px; height: 150px; background-color: red; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>Vibration Detected</p>";

  } else {

    statusHTML = "<div style='width: 150px; height: 150px; background-color: green; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>No Vibration</p>";

  }

  server.send(200, "text/html", statusHTML);
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
}</span></span>

void handleStatus() {

String statusHTML;

if (vibrationDetected) {

statusHTML = "<div style='width: 150px; height: 150px; background-color: red; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>Vibration Detected</p>";

} else {

statusHTML = "<div style='width: 150px; height: 150px; background-color: green; border-radius: 50%; margin: 0 auto;'></div><p style='text-align: center;'>No Vibration</p>";

}

server.send(200, "text/html", statusHTML);

}</span></span>

This portion of the code is responsible for sending HTML content back to the user, displaying the current status of the vibration sensor in a visually intuitive manner. When the sensor detects vibration, the HTML content dynamically updates to show a red circle accompanied by the message “Vibration Detected,” providing a clear and immediate indication of the sensor’s status. In the absence of vibration, the display changes to show a green circle with the message “No Vibration,” effectively communicating that the environment is stable and vibration-free. This feature ensures that the user receives real-time feedback from the sensor, with the color-coded visual cues (red for detected vibrations and green for no vibrations) enhancing the ease of interpretation and quick understanding of the sensor’s current state. This functionality is crucial for applications where monitoring vibrations and responding promptly is essential.