Skip to content

Instantly share code, notes, and snippets.

@phptuts
Last active May 5, 2025 05:53
Show Gist options
  • Save phptuts/2d42573c9fcfa5e5237d602c3f1c0185 to your computer and use it in GitHub Desktop.
Save phptuts/2d42573c9fcfa5e5237d602c3f1c0185 to your computer and use it in GitHub Desktop.
Intruder Alert
#include <WiFi.h>
#include <WebServer.h>
#include <WebSocketsServer.h>
const char* ssid = "Noisebridge";
const char* password = "noisebridge";
const int irSensorPin = 13;
bool objectDetected = false;
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intruder Alert</title>
<style>
body { font-family: sans-serif; text-align: center; padding-top: 50px; background: #111; color: white; }
h1 { font-size: 3em; }
.flashing { animation: flash 1s infinite; }
@keyframes flash {
0% { color: red; }
50% { color: yellow; }
100% { color: red; }
}
</style>
</head>
<body>
<h1 id="alert">System Armed</h1>
<button id="enableSpeech" style="font-size: 1.5em; padding: 10px;">🗣️ Enable Voice Alerts</button>
<script>
const alertText = document.getElementById('alert');
const siren = document.getElementById('siren');
const ws = new WebSocket(`ws://${location.hostname}:81`);
let lastState = "";
let speechEnabled = false;
document.getElementById('enableSpeech').addEventListener('click', () => {
speechEnabled = true;
document.getElementById('enableSpeech').style.display = 'none';
// Prime the speech engine with a silent utterance
const u = new SpeechSynthesisUtterance(" ");
speechSynthesis.speak(u);
});
function speak(text) {
if (!speechEnabled) return;
const utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.cancel();
speechSynthesis.speak(utterance);
}
ws.onmessage = event => {
const msg = event.data;
if (msg.includes("Object detected")) {
if (lastState !== "detected") {
alertText.textContent = "🚨 Intruder Alert! 🚨";
alertText.classList.add("flashing");
speak("Intruder Alert");
siren.play();
lastState = "detected";
}
} else {
if (lastState !== "clear") {
alertText.textContent = "✅ All Clear";
alertText.classList.remove("flashing");
alertText.style.color = "green";
speak("All clear");
siren.pause();
siren.currentTime = 0;
lastState = "clear";
}
}
};
</script>
</body>
</html>
)rawliteral";
WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
void sendToClients(const char* msg) {
webSocket.broadcastTXT(msg);
}
void handleRoot() {
server.send(200, "text/html", index_html);
}
void setup() {
Serial.begin(115200);
pinMode(irSensorPin, INPUT);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500); Serial.print(".");
}
Serial.println("\nConnected! IP address: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
webSocket.begin();
webSocket.onEvent([](uint8_t, WStype_t, uint8_t*, size_t) {});
}
void loop() {
server.handleClient();
webSocket.loop();
bool current = digitalRead(irSensorPin) == LOW;
if (current != objectDetected) {
objectDetected = current;
if (objectDetected) {
sendToClients("Object detected!");
} else {
sendToClients("Object removed.");
}
}
delay(100);
}

Install Required library

  • WiFi

  • WebServer

  • WebSocketsServer

  • Install Espressif Boards

Wiring:

  • D13 for the out pin
  • VCC -> 3.3 V
  • GND to GND

Challenge

  • Change the sound or the website
  • Wire an ultrasonic sensor and sense the distance
  • Do something funny
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment