NepaTronix Logo

© 2024 NepaTronix.
All rights reserved

Quick Links


Home

Services

About

Contact

Contact


+977 9803661701

support@nepatronix.com

Location


Lokanthali, Bhaktapur



Research on Web-Based Smoke and Gas Detection System

  Back To Blogs

This project presents a Smoke and Gas Detection System designed primarily for household applications but also suitable for industrial use. Utilizing an ESP32 microcontroller along with MQ-135 and MQ-3 sensors, the system effectively detects harmful gases and Smokes. Data from the sensors is transmitted to a web-based interface via the ThingSpeak platform, enabling real-time monitoring and alerts. The integration of a buzzer provides immediate audio notifications in the event of a detected hazard. This project aims to enhance safety by providing an efficient, reliable solution for early detection of Smoke and gas leaks, ultimately minimizing risks to life and property. By exploring various applications of the components used, this report further emphasizes the versatility and potential of IoT technology in safety systems.

1.    INTRODUCTION

 

The increasing incidents of gas leaks and Smoke accidents highlight the urgent need for effective detection systems in both residential and industrial settings. Gas leaks pose significant risks, leading to severe consequences such as explosions, poisoning, and environmental degradation. In recent years, the prevalence of these incidents has prompted the search for innovative solutions that can provide early warnings and enhance safety measures.

 

The traditional methods of detecting gas leaks and Smokes often rely on manual checks and basic alarm systems, which may not offer timely responses. This project addresses this critical need by developing a Smoke and Gas Detection System that combines Internet of Things (IoT) technology with advanced sensor capabilities. Utilizing an ESP32 microcontroller, along with MQ-135 and MQ-3 sensors, our system offers continuous monitoring of hazardous environments.

 

The MQ-135 gas sensor is designed to detect a wide range of harmful gases, including ammonia, benzene, and alcohol vapors, making it suitable for various applications beyond just Smoke safety. On the other hand, the MQ-3 sensor is primarily used for alcohol detection but can also be adapted for Smoke detection under specific conditions. By integrating these sensors with the ESP32 microcontroller, our system processes real-time data and provides immediate alerts through a buzzer and a web-based interface on the ThingSpeak platform.

 

This project not only aims to enhance safety by providing a reliable solution for early detection of Smoke and gas leaks but also emphasizes the importance of using IoT technology to foster proactive safety measures. By enabling real-time monitoring and alerting mechanisms, we aim to significantly minimize risks to life and property. Furthermore, the findings from this project can contribute to ongoing efforts to develop more sophisticated safety systems, paving the way for future innovations in Smoke and gas detection technology.


1.    METHODOLOGY


The Smoke and Gas Detection System operates by continuously monitoring the environment using the MQ-135 gas sensor and the MQ-3 Smoke sensor. When a gas leak or Smoke is detected, the ESP32 microcontroller processes this information and triggers the buzzer for immediate alert. Simultaneously, the data is sent to the ThingSpeak platform, where it can be accessed through a web interface for real-time monitoring.

 

1.1.   WORKING PRINCIPLE


The Smoke and Gas Detection System uses an ESP32 microcontroller to detect hazardous gases and Smokes, utilizing an MQ-135 gas sensor and an MQ-3 Smoke sensor. The MQ- 135 identifies harmful gases by sensing changes in its electrical conductivity based on gas concentrations, while the MQ-3 detects the presence of Smokes by measuring infrared light emitted from them. The ESP32 microcontroller processes the incoming analog signals from these sensors, converting them to digital values to evaluate whether gas concentrations exceed set thresholds or if Smokes are detected.

 

When a hazardous condition is identified, the system triggers a buzzer for an audible alert, signaling potential danger. In parallel, the ESP32 transmits the sensor data, including gas levels and Smoke detection status, to the ThingSpeak platform over Wi-Fi for remote monitoring. This allows users to access real-time data through a web interface on ThingSpeak, enabling them to track sensor readings and receive alerts, enhancing safety by providing timely warnings of gas leaks or Smoke incidents.

  

1.1.1.  ADVANTAGES

 

Ø Real-Time Detection and Alerts: The system promptly identifies gas leaks and Smokes, triggering immediate alerts to minimize response time during hazardous events.

Ø Remote Monitoring Through ThingSpeak: Users can access real-time sensor data remotely via ThingSpeak, allowing for continuous monitoring and rapid intervention from any location.

Ø Cost-Effective Safety Solution: Using affordable components like the ESP32 and MQ sensors offers a budget-friendly approach for Smoke and gas detection, making it accessible for various applications.

Ø Easy Installation and Scalability: The wireless connectivity of the ESP32 simplifies setup and allows for easy expansion to include additional sensors or modules as needed.


1.    COMPONENTS USED

1.1.   Microcontroller: ESP-WROOM-32

 Serves as the main processing unit for the system. The ESP32 is a powerful microcontroller that supports Wi-Fi and Bluetooth, enabling seamless connectivity for IoT applications. It can be used in various applications such as home automation, wearable electronics, and remote sensor networks.



1.2.   Gas Sensor: MQ-135

Designed for detecting a wide range of harmful gases, including ammonia, benzene, and alcohol vapors. Its versatility allows it to be used in air quality monitoring systems, industrial safety applications, and smart home devices.

   

1.3.   Smoke Sensor: MQ-3

Although primarily used for alcohol detection, it can also be utilized in Smoke detection applications with careful calibration. This sensor finds its applications in breath zfuel sources.


1.4.   Alert System: Buzzer

Provides immediate audio alerts when a gas leak or Smoke is detected, enhancing the system's responsiveness. Buzzers can be used in various alarm systems, including security alarms, smoke detectors, and notification systems.


1.5.   Connections: Jumper Wires

 Used for wiring components together. Jumper wires are essential in prototyping and can be utilized in various electronic projects, breadboarding, and educational setups.


1.6.   Power Supply: USB Type B Cable

Provides power to the ESP32 microcontroller. USB connections are standard in various devices for power supply and data transfer, making them versatile in electronic applications.

 

    

1.7.   Connectivity: Internet

Facilitates data transmission to the ThingSpeak platform, enabling real-time monitoring. Internet connectivity is critical in IoT applications, allowing devices to communicate and share data remotely.


1.    CIRCUIT DESIGN AND IMPLEMENTATION


The circuit consists of an MQ-3 sensor for Smoke detection and an MQ-135 sensor for gas detection, both powered by a 5V supply from the microcontroller. The VCC and GND pins of both sensors are connected to the 5V and GND pins of the microcontroller. The output pin of the MQ-3 is connected to digital pin D34 for Smoke detection, while the output pin of the MQ-135 is connected to digital pin D35 for gas detection. A buzzer is connected to digital pin D27, which will activate when either sensor detects a Smoke or harmful gas. The circuit is wired with 8 jumper wires to ensure all necessary connections.


1.    DRAWBACKS

 

During the development and testing phases, we encountered several challenges:

 

 

1.1.   Unfamiliarity with ESP32

 

Initially, our lack of familiarity with the ESP32 microcontroller posed difficulties in setting up and testing the system. This resulted in a slower start and required additional time for troubleshooting.

 

 

1.2.   Sensor Calibration Issues

 

Accurate readings from the sensors, particularly the MQ-135 gas sensor, proved to be challenging. The calibration process required multiple iterations to ensure reliable data.

 

 

1.3.   MQ-3 Sensor Limitation

 

The MQ-3 sensor, primarily designed for alcohol detection, was challenging to use for Smoke detection. Its sensitivity to alcohol vapor rather than direct Smoke required a different approach to adjust the system for detecting actual Smoke hazards, which affected the accuracy and consistency of the system's Smoke detection capabilities.


2.    FUTURE ENHANCEMENTS

Looking ahead, we aspire to explore the creation of PCB boards for more efficient and compact designs. Additionally, we aim to expand our knowledge by developing more detection systems utilizing different sensors, such as smoke detectors or temperature sensors.

Moreover, we plan to enhance the alert system to ensure that users receive timely notifications in various ways.

2.1.   Mobile Notifications

 

Integrating a mobile app or SMS notifications that alert users immediately upon detection of gas leaks or Smokes. This will enable users to respond quickly, even if they are not near the system.

2.2.   Automated Emergency Protocols

 

Implementing automated protocols that can trigger emergency services or predefined actions (such as turning off gas valves or activating Smoke suppression systems) when a hazardous condition is detected.

2.3.   Multi-Sensor Integration

 

Expanding the system to include additional sensors (such as smoke and carbon monoxide sensors) that can provide comprehensive monitoring. This will allow for more specific alerts based on the type of hazard detected.

2.4.   User-Friendly Dashboard

 

Developing a more intuitive web-based dashboard that not only displays real-time sensor data but also provides historical data analysis, trends, and predictive alerts based on usage patterns.

2.5.   Remote Access Control

 

Enabling users to remotely control and monitor the system through a secure web interface or mobile app, providing greater convenience and safety.

By incorporating these enhancements, the Smoke and Gas Detection System can evolve into a more robust safety solution, significantly improving its effectiveness in protecting lives and property.


3.    DISCUSSION AND CONCLUSION

The Smoke and Gas Detection System serves as a powerful example of how technology can genuinely make our lives safer. By combining the ESP32 microcontroller with gas and Smoke sensors, the system goes beyond just detecting hazards; it creates a proactive approach to safety. It’s not just about the technology itself, but about its ability to provide peace of mind by offering timely warnings that can prevent serious incidents. Whether it’s in a home or an industrial setting, the value of knowing that potential dangers like gas leaks or Smokes can be detected before they escalate cannot be overstated.

This project isn’t just a technical achievement; it’s a step towards making safety accessible to everyone. The integration with ThingsSpeak for remote monitoring means that anyone, even from miles away, can keep an eye on their environment, providing a sense of security. The buzzer's audible alert adds a human touch, ensuring that immediate on-site responses can happen when they’re needed most.

Ultimately, this system shows how simple components, when thoughtfully integrated, can create something truly impactful. It’s a reminder that technology's role isn’t just to innovate for innovation's sake, but to solve real problems and improve everyday life. As this project grows and evolves, there’s a real opportunity to make an even bigger difference in how we think about safety—not just as a feature, but as a fundamental human need that technvology can help fulfill in smarter and more reliable ways.


4.    CODING PART

 

4.1.   INDEX FILE

<!DOCTYPE html>

<html lang="en">

 

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Smoke and Smoke Sensor Data</title>

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">

<link rel="stylesheet" href="css/utility.css">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/notification.css">

<link rel="stylesheet" href="css/responsive.css">

<script defer src="script.js"></script>

</head>

 

 

<body>

<header>

<a href="#home" class="logo"><span class="glowText">AKN</span> Tech</a>

<i class="ri-menu-line" id="menuIcon"></i>

<nav id="navBar" class="hideTopNav">

<li><a href="#home" class="active">Home</a></li>

<li><a href="#data">Data</a></li>

<li><a href="#team">Team</a></li>

<li><a href="#contact">Contact</a></li>

</nav>

</header>

 

 

<main>


<section id="home">

<div class="slideshow-container">

 

 

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="images/5.jpg" style="width:100%">

<div class="text">Smoke and Gas Detector</div>

</div>

 

 

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="images/6.jpg" style="width:100%">

<div class="text">Members</div>

</div>

 

 

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="images/3.jpg" style="width:100%">

<div class="text">Working</div>

</div>

 

 

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>

 

 

</div>

<br>

 

 

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>


</div>

</section>

<section class="data" id="data">

<h1 class="sectionHeading">Sensor Data </h1>

<div class="chart">

<div class="chart1">

<iframe src="https://thingspeak.com/channels/2705751/charts/1?bgcolor=%23ffffff&color=% 23d62020&dynamic=true&results=60&title=Gas&type=line&xaxis=time&yaxis=LE VEL"></iframe>

<p>Gas Level: <span id="gasLevel">Loading...</span></p>

</div>

<div class="chart2">

<iframe src="https://thingspeak.com/channels/2705751/charts/2?bgcolor=%23ffffff&color=% 23d62020&dynamic=true&results=60&title=Smoke&type=line&xaxis=time"></ifra me>

<p>Smoke Level: <span id="SmokeLevel">Loading...</span></p>

</div>

 

 

<div class="gasDanger">

<iframe src="https://thingspeak.com/channels/2705751/widgets/949069"></iframe>

<p>Gas Status</p>

 

 

</div>

 

 

<div class="SmokeDanger">

<iframe src="https://thingspeak.com/channels/2705751/widgets/949070"></iframe>

<p>Smoke Status</p>

 

 

</div>

</div>


</section>

<section class="team" id="team">

<h1 class="sectionHeading">Our Team</h1>

<div class="teamCardsContainer">

<div class="teamCard">

<div class="memberImage">

<img src="images/aryan.jpg">

</div>

<h2 class="memberName">Aryan Khatri</h2>

<div class="clientRating"></div>

<p class="memberRole">"Aryan creates the IoT software, writes hardware codes for the product, and integrates various systems to ensure seamless operation of the Smoke and smoke detection system."</p>

</div>

 

 

<div class="teamCard">

<div class="memberImage">

<img src="images/kusum.jpg">

</div>

<h2 class="memberName">Kushum Kafle</h2>

<div class="clientRating"></div>

<p class="memberRole">"Kushum is an IoT expert and designs the final product, transforming concepts into a functional system that effectively responds to Smoke alerts."</p>

</div>

 

 

<div class="teamCard">

<div class="memberImage">

<img src="images/nischal.jpg">

</div>

<h2 class="memberName">Nischal Upadhayaya</h2>

<div class="clientRating"></div>


<p class="memberRole">"Nischal is our IoT engineer expert, specializing in integrating various sensors and devices to ensure real-time monitoring and data collection."</p>

</div>

</div>

</section>

 

 

 

<section class="contact" id="contact">

<h1 class="sectionHeading">Contact <span class="glowText">Us</span></h1>

 

 

 

<form action="https://api.web3forms.com/submit" method="POST">

<!-- Replace with your Access Key -->

<input type="hidden" name="access_key" value="fcce05fc-0974-46d7- 8fc5-a042ef60a69b">

 

 

<!-- Form Inputs. Each input must have a name="" attribute -->

<input type="text" placeholder="Full Name" name="fullName" required>

<input type="email" placeholder="Email" name="email">

<input type="tel" placeholder="Phone Number: 977-1234567891" name="phoneNumber" pattern="977-[0-9]{10}" required>

<input type="text" placeholder="Subject" name="subject" required>

<textarea placeholder="Your Message" name="message" required></textarea>

 

 


 

 

none;">


<!-- Honeypot Spam Protection -->

<input type="checkbox" name="botcheck" class="hidden" style="display:


 

 

<!-- Custom Confirmation / Success Page -->

<!-- <input type="hidden" name="redirect" value="https://mywebsite.com/thanks.html"> -->


<button type="submit" class="btn glowBtn" id="submitBtn">Submit</button>

</form>

 

 

</section>

</main>

 

 

<footer>

<div class="socialIcons">

<a href="#"><i class="ri-facebook-fill"></i></a>

<a href="#"><i class="ri-github-fill"></i></a>

<a href="#"><i class="ri-twitter-fill"></i></a>

<a href="#"><i class="ri-linkedin-fill"></i></a>

</div>

<nav>

<li><a href="#home">Home</a></li>

<li><a href="#data">Data</a></li>

<li><a href="#team">Team</a></li>

<li><a href="#contact">Contact</a></li>

</nav>

<p class="copyright">&copy;2024 AKN Tech | All rights reserved.</p>

</footer>

 

 

</body>

 

 

</html>


4.2.   CSS CODE

4.2.1.  Style Css

/* Default Configuration */

* {

margin: 0;

padding: 0;

box-sizing: border-box; outline: none;

text-decoration: none;

font-family: Verdana, Geneva, Tahoma, sans-serif; border: none;

scroll-behavior: smooth;

}

:root {

--text-color: white;

--bg-color: rgb(0, 0, 0);

--second-bg-color:rgb(8, 8, 8);

--main-color: aqua;

}

 

::-webkit-scrollbar{ width: .7rem;

}

 

::-webkit-scrollbar-thumb{

background-color: var(--main-color);

}

::-webkit-scrollbar-track{ background-color: var(--bg-color);

}

html {

font-size: 10px;

}

body {

color: var(--text-color); background-color: var(--bg-color); width: 100%;

overflow-x: hidden;

}

 

 

/* Header codes */ header {

position: fixed; width: 100%;

background: rgba(0, 0, 0, 0.9); display: flex;

justify-content: space-between;


align-items: center; padding: 2rem 2rem;

backdrop-filter: blur(0.6rem); z-index: 1000;

height: 6rem;

}

 

.logo {

font-size: 2.4rem; font-weight: bold;

color: var(--text-color); text-decoration: none; cursor: pointer; transition: 0.3s ease;

}

.logo:hover { transform: scale(1.1);

}

 

#menuIcon{

font-size: 2.5rem; display: none;

}

 

nav{

list-style: none; display: flex; gap: 1rem;

}

nav >li{

list-style: none;

}

nav a {

color: var(--text-color); font-weight: 500; padding: 0.5rem 1rem; transition: color 0.3s; font-size: 1.5rem;

}

 

header >nav a:hover, header >nav a.active { color: var(--main-color);

border-bottom: 2px solid var(--main-color); transition: slide 0.3s;

}


/* Main codes */

 

section{

min-height: 100vh; padding: 10rem 10%;

}

 

.socialIcons{

margin-top: 2rem;

}

.socialIcons >a{ display:inline-flex; justify-content: center; align-items: center; border: 1px solid aqua; border-radius: 50%; margin-right: 1rem; font-size: 2rem;

}

 

.socialIcons a{

color: var(--main-color); text-decoration: none; padding: 0.4rem;

}

.socialIcons > a:hover{ color: var(--text-color);

background-color: var(--main-color);

box-shadow: 0 0 2.5rem var(--main-color); transform: scale(1.3)translateY(-5px); transition: transform .3s ease;

}

.btnGroup{

margin-top: 1rem;

}

 

.sectionHeading{ font-size: 4rem; text-align: center;

margin-bottom: 6rem;

}

 

/* caraousel */

/* Slideshow container */

.slideshow-container { max-width: 1000px; position: relative; margin: auto;


overflow-y: hidden; height: 80vh;

}

 

/* Hide the images by default */

.mySlides { display: none;

}

 

/* Next & previous buttons */

.prev, .next { cursor: pointer; position: absolute; top: 50%;

width: auto; margin-top: -22px; padding: 16px; color: white;

font-weight: bold; font-size: 18px; transition: 0.6s ease;

border-radius: 0 3px 3px 0; user-select: none;

}

 

/* Position the "next button" to the right */

.next { right: 0;

border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);

}

/* Caption text */

.text {

color: #f2f2f2; font-size: 15px;

padding: 8px 12px; position: absolute; bottom: 8px; width: 100%;

text-align: center;

}

 

/* Number text (1/3 etc) */

.numbertext { color: #f2f2f2;


font-size: 12px; padding: 8px 12px; position: absolute; top: 0;

}

/* The dots/bullets/indicators */

.dot {

cursor: pointer; height: 15px; width: 15px; margin: 0 2px;

background-color: #bbb; border-radius: 50%; display: inline-block;

transition: background-color 0.6s ease;

}

 

.activeDot, .dot:hover { background-color: #717171;

}

 

/* Fading animation */

.fade {

animation-name: fade; animation-duration: 1.5s;

}

 

@keyframes fade { from {opacity: .4}

to {opacity: 1}

}

 

/* Smoke and Smoke Sensor Data Section */

 

.chart{

display: flex;

justify-content: center; align-items: center; gap: 1rem;

flex-wrap: wrap; gap: 1rem;

}

 

.chart p{

font-size: 2rem;

}


iframe {

display: block; border-radius: 10px;

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); width: 45rem;

height: 26rem;

}

 

 

/* Team CSS */

.team{

background-color: var(--second-bg-color);

}

.teamCardsContainer{ display: flex;

flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem;

 

}

 

.teamCard{ display: flex;

flex-direction: column; align-items: center; justify-content: center; text-align: center;

background-color: var(--bg-color); border: 1px solid grey;

border-radius: 1rem; gap: 1.5rem;

min-height: 40rem; transition: 0.3s ease-in-out; padding: 0 3rem;

width: 30rem;

 

 

}

 

.teamCard:hover{

box-shadow: 0 0 2.5rem var(--main-color); cursor: pointer;

border: 1px solid var(--main-color); transform: scale(1.03) translateY(-1rem);

}


.memberImage{ width: 12rem; aspect-ratio: 1;

border-radius: 50%;

box-shadow: 0 0 1.5rem var(--main-color); overflow: hidden;

}

 

.memberImage > img{ width: 100%;

 

}

 

.memberName{ font-size: 2.3rem;

}

 

.memberRole{

font-size: 1.5rem; font-weight: bold; font-style:italic;

}

 

/* Contact me css */

.contact >form{ display: grid;

grid-template-columns: repeat(2,1fr); gap: 4rem;

background-color: transparent; justify-content: center;

align-items: center;

}

 

 

form input,form textarea{ padding: 2rem;

border-radius: 1rem; background-color: transparent;

border: 1px solid var(--main-color); color:var(--text-color);

width: 100%;

}

 

form >input:focus,form > textarea:focus{ box-shadow: 0 0 2.5rem var(--main-color); transform: scale(1.05);

transition: all .3s ease-in-out;

}


form >textarea{ height: 20rem; grid-column: 1 / 3;

}

form >button{ width: 10rem; margin: auto; cursor: pointer;

}

 

/* Footer css */ footer{

display: flex;

flex-direction: column; align-items: center; justify-content: center; gap: 1rem;

padding: 1rem 0; flex-wrap: wrap;

}

footer > nav >ul{ margin-bottom: 2rem; display: flex;

justify-content: center; text-align: center;

gap: 0;

}

 

.copyright{

font-size: 1.2rem;

}

 

 

4.2.2.  Responsive Css

 

/* Responsive design for mobile devices*/ @media only screen and (max-width: 550px) {

/* Smoke and Smoke Sensor Data Section */

.chart{

flex-direction: column;

}

 

 

iframe {


width: 100%; height: 26rem;

}

 

 

}

 

 

@media only screen and (max-width: 700px) {

.teamCardsContainer {

grid-template-columns: repeat(1, 1fr); gap: 1rem;

}

 

 

.contact > form {

grid-template-columns: repeat(1, 1fr);

}

form > textarea { height: 20rem; grid-column: 1 / 2;

}

 

 

#home{

padding-left: 0;

padding-right: 0;

}

}

 

 

@media screen and (max-width: 800px) { #menuIcon {

display: block; cursor: pointer;

}


header > nav { display: flex;

flex-direction: column; position: absolute;

left: -100%;

right: 0; top: 6rem;

text-align: center;

backdrop-filter: blur(0.6rem); padding: 6rem 0 2rem;

gap: 3rem;

}

.showTopNav { visibility: visible;

background: rgba(0, 0, 0, 0.9);

left: 0;

transition: left 0.5s ease;

}

 

 

.hideTopNav { visibility: hidden; left: -100%;

transition: left 0.5s ease-in;

}

 

 

#home{ height: 40vh;

}

.slideshow-container { height: 40vh;

}

}


 

 

 

 

 

4.2.3.  Utility Css

 

.glowText {

/* color: var(--main-color); */

text-shadow: 0 0 2.5rem var(--main-color);

}

 

 

.btn {

text-decoration: none; color: var(--text-color); border: 1px solid aqua; border-radius: 3rem; font-size: 1.5rem; margin-right: 1rem; padding: 0.5rem 2.5rem; color: var(--main-color);

}

 

 

.glowBtn {

background-color: var(--main-color); box-shadow: 0 0 1rem var(--main-color); color: black;

}

 

 

.btn:hover {

background-color: var(--main-color); color: black;


box-shadow: 0 0 1.5rem var(--main-color); transform: scale(1.1);

transition: transform 0.3s ease-in-out;

}

 

4.3.   JAVASCRIPT CODE

 

// Scroll based navigation highlighting

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('header nav a'); window.onscroll = () => {

sections.forEach(sec => { let top = window.scrollY;

let offset = sec.offsetTop - 150; let height = sec.offsetHeight; let id = sec.getAttribute('id');

if(top >= offset && top < offset + height) { navLinks.forEach(links => {

links.classList.remove('active');

document.querySelector('header nav a[href*=' + id + ']').classList.add('active');

});

};

});

};

 

 

// Menu icon function

const menuIconElem=document.getElementById('menuIcon'); const navBarElem=document.getElementById('navBar');

 

menuIconElem.addEventListener('click',function(){ if(navBarElem.classList.contains('showTopNav')){

navBarElem.classList.add('hideTopNav');


navBarElem.classList.remove('showTopNav');

}

else{

navBarElem.classList.add('showTopNav'); navBarElem.classList.remove('hideTopNav');

}

console.log("Hi")

})

 

 

// Home section let slideIndex = 0; showSlides();

 

function showSlides() { let i;

let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot");

 

// Hide all slides

for (i = 0; i < slides.length; i++) { slides[i].style.display = "none";

}

 

 

// Remove the "active" class from all dots for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" activeDot", "");

}

 

 

// Increment slideIndex, reset if it exceeds the total number of slides slideIndex++;

if (slideIndex > slides.length) { slideIndex = 1 }


// Display the current slide and mark the corresponding dot as active slides[slideIndex - 1].style.display = "block";

dots[slideIndex - 1].className += " activeDot";

 

 

// Auto-slide every 2 seconds setTimeout(showSlides, 4000);

}

 

 

// Next/previous controls function plusSlides(n) {

showCurrentSlide(slideIndex += n);

}

 

 

// Dot controls

function currentSlide(n) { showCurrentSlide(slideIndex = n);

}

 

 

function showCurrentSlide(n) { let i;

let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot");

 

// Ensure index is within bounds

if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length }

 

// Hide all slides

for (i = 0; i < slides.length; i++) { slides[i].style.display = "none";

}


// Remove the "activeDot" class from all dots for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" activeDot", "");

}

 

 

// Display the current slide and mark the corresponding dot as active slides[slideIndex - 1].style.display = "block";

dots[slideIndex - 1].className += " activeDot";

}

 

 

 

// Sensor Data

function fetchSensorData() { const url =

'https://api.thingspeak.com/channels/2705751/feeds.json?api_key=AKRX1TODJL8HDA FQ&results=1';

const offlineThreshold = 60000; // 60 seconds threshold to determine if the device is offline

 

 

fetch(url)

.then(response => response.json())

.then(data => {

if (data.feeds.length > 0) {

const gasLevel = parseFloat(data.feeds[0].field1); // Get gas level

const SmokeLevel = parseFloat(data.feeds[0].field2); // Get Smoke level const lastUpdatedTime = new Date(data.feeds[0].created_at).getTime(); const currentTime = new Date().getTime();

 

// Check if the device is online

if ((currentTime - lastUpdatedTime) <= offlineThreshold) { document.getElementById('gasLevel').innerText = gasLevel; document.getElementById('SmokeLevel').innerText = SmokeLevel;


// Set danger or safe status

document.getElementById('gasLevel').style.color = gasLevel > 1000 ? "red"

: "#5AA603";

document.getElementById('SmokeLevel').style.color = SmokeLevel > 300 ? "red" : "#5AA603";

} else {

setOffline();

}

} else {

setOffline();

}

})

.catch(error => {

console.error('Error fetching data:', error); setOffline();

});

}

 

 

// Set sensor data as offline function setOffline() {

document.getElementById('gasLevel').innerText = "offline"; document.getElementById('gasLevel').style.color = "white"; document.getElementById('SmokeLevel').innerText = "offline"; document.getElementById('SmokeLevel').style.color = "white";

}

 

 

// Fetch data every 15 seconds (15000 milliseconds) setInterval(fetchSensorData, 15000);

 

// Fetch data immediately after the page loads window.onload = fetchSensorData;


//Reset form after submission

const submitBtnElem=document.getElementById('submitBtn'); const contactFormElem=document.getElementById('contactForm'); contactFormElem.addEventListener('submit',(e)=>{

e.preventDefault(); contactFormElem.reset();

})

 

 

4.4.   ESP CODE

 

#include <WiFi.h>

#include <ThingSpeak.h> // Include the ThingSpeak library

 

 

// Replace with your network credentials const char* ssid = "Mmc hall";

const char* password = "31219495";

 

 

// ThingSpeak channel details

unsigned long myChannelId = 2705751; // Replace with your channel number

const char* myWriteAPIKey = "R503Q8F0PNXO2L8J"; // Replace with your Write API Key

 

 

// Define the pins

const int gasSensorPin = 34; // Analog pin for gas sensor

const int SmokeSensorPin = 35; // Analog pin for Smoke sensor const int buzzerPin = 27; // Digital pin for buzzer

 

// Thresholds for gas and Smoke detection

const int gasThreshold = 1000; // Example threshold value const int SmokeThreshold = 300; // Example threshold value

 

// Wi-Fi client


WiFiClient client;

 

 

void setup() {

// Initialize serial communication for debugging Serial.begin(115200);

 

// Connect to Wi-Fi connectToWiFi();

 

// Initialize ThingSpeak ThingSpeak.begin(client);

 

// Set pin modes pinMode(gasSensorPin, INPUT); pinMode(SmokeSensorPin, INPUT); pinMode(buzzerPin, OUTPUT);

 

// Start with the buzzer off digitalWrite(buzzerPin, LOW);

}

 

 

void loop() {

 

 

// Check Wi-Fi connection and reconnect if necessary if (WiFi.status() != WL_CONNECTED) { connectToWiFi();

}

// Read the analog values from the gas and Smoke sensors int gasLevel = analogRead(gasSensorPin);

int SmokeLevel = analogRead(SmokeSensorPin);

 

 

// Print the gas and Smoke levels for debugging


Serial.print("Gas Level: "); Serial.println(gasLevel); Serial.print("Smoke Level: "); Serial.println(SmokeLevel);

 

// If gas or Smoke level exceeds the threshold, turn the buzzer on if (gasLevel > gasThreshold || SmokeLevel > SmokeThreshold) { digitalWrite(buzzerPin, HIGH); // Turn buzzer on Serial.println("Warning: Threshold exceeded, buzzer activated!");

} else {

digitalWrite(buzzerPin, LOW); // Turn buzzer off Serial.println("Thresholds not exceeded, buzzer deactivated.");

}

 

 

// Send data to ThingSpeak ThingSpeak.setField(1, gasLevel); ThingSpeak.setField(2, SmokeLevel);

 

// Write to the ThingSpeak channel

int response = ThingSpeak.writeFields(myChannelId, myWriteAPIKey); if (response == 200) {

Serial.println("Data sent to ThingSpeak successfully.");

} else {

Serial.print("Error sending data to ThingSpeak. Response code: "); Serial.println(response);

}

 

 

// Small delay before the next reading

delay(15000); // ThingSpeak allows updates every 15 seconds

}

 

 

// Function to connect to Wi-Fi


void connectToWiFi() { Serial.print("Connecting to Wi-Fi"); WiFi.begin(ssid, password);

 

// Wait for connection int retryCount = 0;

while (WiFi.status() != WL_CONNECTED && retryCount < 20) { delay(500);

Serial.print("."); retryCount++;

}

 

 

if (WiFi.status() == WL_CONNECTED) { Serial.println("\nConnected to Wi-Fi"); Serial.print("IP Address: "); Serial.println(WiFi.localIP());

} else {

Serial.println("\nFailed to connect to Wi-Fi. Retrying in 5 seconds..."); delay(5000);

}

}


5.    REFRENCES

i.                Random nerd tutorials

ii.              Sparkfun

iii.            Last minute Engineers

iv.             Youtube

v.               Esp circuit Designs


10.    ABOUT US


Aryan Singh Khatri: “This has been a great experience for me, it helped me experience new interesting things about hardware & software.”

Kamala Kafle: “I wanna thank our college and teachers for this wonderful BOOTCAMP in IoT. Which helped me understand many new things about circuit.”

Nischal Upadhyaya: “Before this whole Camp I was unsure but now this whole program has given me more strength to pursue new things related IoT and Robotics, Thank you MMC”