Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FireGuardian 3000 - Arduino Fire Alarm System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <custom-header></custom-header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Schematic Diagram --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-red-600 mb-4 flex items-center"> | |
| <i data-feather="alert-triangle" class="mr-2"></i> | |
| System Schematic Diagram | |
| </h2> | |
| <div class="border-2 border-gray-200 rounded-lg p-4 bg-gray-50"> | |
| <div class="w-full bg-white p-4 rounded-lg"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Fire Alarm Schematic Preview" class="w-full h-auto rounded-lg mb-4 border"> | |
| <a href="schematic.html" class="block text-center bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition-colors"> | |
| <i data-feather="maximize-2" class="inline mr-2"></i> View Full Schematic Diagram | |
| </a> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-2"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-red-500 rounded-full mr-2"></div> | |
| <span>Arduino Microcontroller</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div> | |
| <span>Smoke Detectors</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div> | |
| <span>Manual Call Points</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-green-500 rounded-full mr-2"></div> | |
| <span>Alarm Bell</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-purple-500 rounded-full mr-2"></div> | |
| <span>LCD Display</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-orange-500 rounded-full mr-2"></div> | |
| <span>Control Buttons</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Arduino Code Section --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-blue-600 mb-4 flex items-center"> | |
| <i data-feather="code" class="mr-2"></i> | |
| Arduino Implementation | |
| </h2> | |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"> | |
| <pre><code class="language-c"> | |
| // Fire Alarm System Code for Arduino | |
| #include <LiquidCrystal.h> | |
| // Initialize LCD (RS, E, D4, D5, D6, D7) | |
| LiquidCrystal lcd(12, 11, 5, 4, 3, 2); | |
| // Pin Definitions | |
| const int smokeSensorPin = A0; | |
| const int manualCallPin = 7; | |
| const int alarmBellPin = 8; | |
| const int silenceButtonPin = 9; | |
| const int resetButtonPin = 10; | |
| // Variables | |
| int smokeValue = 0; | |
| bool alarmActive = false; | |
| bool systemSilenced = false; | |
| void setup() { | |
| // Initialize components | |
| pinMode(smokeSensorPin, INPUT); | |
| pinMode(manualCallPin, INPUT_PULLUP); | |
| pinMode(alarmBellPin, OUTPUT); | |
| pinMode(silenceButtonPin, INPUT_PULLUP); | |
| pinMode(resetButtonPin, INPUT_PULLUP); | |
| // LCD Setup | |
| lcd.begin(16, 2); | |
| lcd.print("FireGuardian 3000"); | |
| lcd.setCursor(0, 1); | |
| lcd.print("System Ready"); | |
| Serial.begin(9600); | |
| } | |
| void loop() { | |
| // Read sensor values | |
| smokeValue = analogRead(smokeSensorPin); | |
| bool manualTrigger = !digitalRead(manualCallPin); | |
| bool silencePressed = !digitalRead(silenceButtonPin); | |
| bool resetPressed = !digitalRead(resetButtonPin); | |
| // Check for fire condition | |
| if ((smokeValue > 300 || manualTrigger) && !systemSilenced) { | |
| triggerAlarm(); | |
| } | |
| // Handle silence button | |
| if (silencePressed && alarmActive) { | |
| silenceAlarm(); | |
| } | |
| // Handle reset button | |
| if (resetPressed) { | |
| resetSystem(); | |
| } | |
| // Update LCD | |
| updateDisplay(); | |
| delay(100); | |
| } | |
| void triggerAlarm() { | |
| alarmActive = true; | |
| digitalWrite(alarmBellPin, HIGH); | |
| lcd.clear(); | |
| lcd.print("FIRE DETECTED!"); | |
| lcd.setCursor(0, 1); | |
| lcd.print("EVACUATE AREA"); | |
| } | |
| void silenceAlarm() { | |
| systemSilenced = true; | |
| digitalWrite(alarmBellPin, LOW); | |
| lcd.clear(); | |
| lcd.print("ALARM SILENCED"); | |
| lcd.setCursor(0, 1); | |
| lcd.print("AWAITING RESET"); | |
| } | |
| void resetSystem() { | |
| alarmActive = false; | |
| systemSilenced = false; | |
| digitalWrite(alarmBellPin, LOW); | |
| lcd.clear(); | |
| lcd.print("FireGuardian 3000"); | |
| lcd.setCursor(0, 1); | |
| lcd.print("System Ready"); | |
| } | |
| void updateDisplay() { | |
| if (!alarmActive) { | |
| lcd.setCursor(0, 1); | |
| lcd.print("Smoke: "); | |
| lcd.print(smokeValue); | |
| lcd.print(" "); | |
| } | |
| } | |
| </code></pre> | |
| </div> | |
| <div class="mt-4 bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="alert-circle" class="text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <strong>Important:</strong> This code requires the LiquidCrystal library. | |
| Connect components as shown in the schematic diagram. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Component Details --> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i data-feather="list" class="mr-2"></i> | |
| System Components | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <h3 class="font-semibold text-lg text-red-600 flex items-center"> | |
| <i data-feather="cpu" class="mr-2"></i> | |
| Arduino Uno | |
| </h3> | |
| <p class="text-gray-600 mt-2">Microcontroller brain of the system that processes all inputs and controls outputs.</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <h3 class="font-semibold text-lg text-blue-600 flex items-center"> | |
| <i data-feather="eye" class="mr-2"></i> | |
| Smoke Detector | |
| </h3> | |
| <p class="text-gray-600 mt-2">Industrial-grade optical smoke detector (MQ-2 sensor recommended).</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <h3 class="font-semibold text-lg text-yellow-600 flex items-center"> | |
| <i data-feather="alert-circle" class="mr-2"></i> | |
| Manual Call Point | |
| </h3> | |
| <p class="text-gray-600 mt-2">Break-glass unit for manual fire alarm activation.</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <h3 class="font-semibold text-lg text-green-600 flex items-center"> | |
| <i data-feather="bell" class="mr-2"></i> | |
| Alarm Bell | |
| </h3> | |
| <p class="text-gray-600 mt-2">110dB piezoelectric alarm siren for audible alert.</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <h3 class="font-semibold text-lg text-purple-600 flex items-center"> | |
| <i data-feather="monitor" class="mr-2"></i> | |
| LCD Display | |
| </h3> | |
| <p class="text-gray-600 mt-2">16x2 character LCD for system status information.</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <h3 class="font-semibold text-lg text-orange-600 flex items-center"> | |
| <i data-feather="toggle-right" class="mr-2"></i> | |
| Control Buttons | |
| </h3> | |
| <p class="text-gray-600 mt-2">Momentary push buttons for silence and system reset functions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |