<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angle-Distance Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f8f9fa;
}
#chartContainer {
width: 80%;
max-width: 800px;
}
canvas {
width: 100% !important;
height: 400px !important;
}
</style>
</head>
<body>
<div id="chartContainer">
<canvas id="chartCanvas"></canvas>
</div>
<script>
// Sanity check to make sure JS is running
console.log("🧪 JS is running!");
const socket = new WebSocket("ws://192.168.27.51:8080");
// Timeout warning if WebSocket connection isn't established in time
setTimeout(() => {
if (socket.readyState !== WebSocket.OPEN) {
console.warn("⏳ Still waiting for WebSocket connection...");
}
}, 3000);
socket.onopen = () => {
console.log("✅ Connected to ESP32 WebSocket!");
socket.send("hello from browser");
};
socket.onmessage = (event) => {
console.log("📩 Raw message from ESP32:", event.data);
try {
const data = JSON.parse(event.data);
console.log("✅ Parsed JSON:", data);
if (data.angle !== undefined && data.distance !== undefined) {
const angle = parseInt(data.angle);
const distance = parseFloat(data.distance);
console.log(
`📈 Updating graph → Angle: ${angle}, Distance: ${distance}`
);
console.log(
`🧪 Types → angle: ${typeof angle}, distance: ${typeof distance}`
);
updateGraph(angle, distance);
} else {
console.warn("⚠️ JSON missing angle or distance:", data);
}
} catch (error) {
console.error("🚨 JSON Parse Error:", error);
}
};
socket.onerror = (error) => {
console.error("🚨 WebSocket Error:", error);
};
socket.onclose = () => {
console.warn("🔴 WebSocket Disconnected");
};
// Chart.js setup
const ctx = document.getElementById("chartCanvas").getContext("2d");
const chartData = {
labels: [],
datasets: [
{
label: "Distance (cm)",
borderColor: "#17a2b8",
backgroundColor: "rgba(23, 162, 184, 0.2)",
data: [],
fill: true,
},
],
};
const chartOptions = {
scales: {
x: { title: { display: true, text: "Angle (degrees)" } },
y: {
title: { display: true, text: "Distance (cm)" },
min: 0,
max: 200,
},
},
};
const chart = new Chart(ctx, {
type: "line",
data: chartData,
options: chartOptions,
});
function updateGraph(angle, distance) {
console.log("🧩 Current Labels:", chartData.labels);
const index = chartData.labels.indexOf(angle);
if (index === -1) {
console.log(`➕ Adding new angle: ${angle}`);
chartData.labels.push(angle);
chartData.datasets[0].data.push(distance);
} else {
console.log(`🔁 Updating existing angle at index ${index}`);
chartData.datasets[0].data[index] = distance;
}
chart.update();
}
</script>
</body>
</html>
#include <ESP32Servo.h>
#include <WiFi.h>
#include <WebSocketsServer.h>
#define TRIG_PIN 32
#define ECHO_PIN 33
#define SERVO_PIN 18
#define BUZZER_PIN 15
const char* ssid = "Galaxy A12 306F";
const char* password = "vhgl3899";
Servo myServo;
WebSocketsServer webSocket(8080);
float distanceArray[181] = {0};
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
// ✅ Set pin modes
pinMode(TRIG_PIN, OUTPUT);
pinMode(ECHO_PIN, INPUT);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\n✅ WiFi connected");
Serial.print("📡 ESP32 IP Address: ");
Serial.println(WiFi.localIP());
webSocket.begin();
Serial.println("🟢 WebSocket server started on port 8080");
webSocket.onEvent([](uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
Serial.println("📩 WebSocket Event Triggered!");
if (type == WStype_TEXT) {
Serial.print("📨 Message received: ");
Serial.println((char*)payload);
if (strcmp((char*)payload, "hello from browser") == 0) {
webSocket.sendTXT(num, "hello from ESP");
Serial.println("📤 Sent reply: hello from ESP");
}
}
});
myServo.setPeriodHertz(50);
myServo.attach(SERVO_PIN, 1000, 2000);
myServo.write(90);
Serial.println("🔄 Testing Servo...");
myServo.write(0);
delay(1000);
myServo.write(180);
delay(1000);
myServo.write(90);
}
float getDistance() {
// 🛠 Ensure stable sensor signal
digitalWrite(TRIG_PIN, LOW);
delayMicroseconds(5);
digitalWrite(TRIG_PIN, HIGH);
delayMicroseconds(10);
digitalWrite(TRIG_PIN, LOW);
// ⏱ Increase timeout a bit more
long duration = pulseIn(ECHO_PIN, HIGH, 150000); // 150ms
if (duration == 0) {
Serial.println("⚠️ Sensor timeout (no echo)");
return -1;
}
float distance = duration * 0.0343 / 2;
if (distance < 2 || distance > 400) {
Serial.println("⚠️ Invalid distance (out of range)");
return -1;
}
return distance;
}
void loop() {
webSocket.loop();
float newDistanceArray[181] = {0};
for (int pos = 0; pos <= 180; pos += 5) {
myServo.write(pos);
delay(300);
float dist = getDistance();
if (dist != -1) {
newDistanceArray[pos] = dist;
sendWebData(pos, dist);
}
}
for (int pos = 180; pos >= 0; pos -= 5) {
myServo.write(pos);
delay(300);
float dist = getDistance();
if (dist != -1) {
newDistanceArray[pos] = dist;
sendWebData(pos, dist);
}
}
memcpy(distanceArray, newDistanceArray, sizeof(distanceArray));
delay(2000); // Wait before next full sweep
}
void sendWebData(int angle, float distance) {
String message = "{\"angle\": " + String(angle) + ", \"distance\": " + String(distance) + "}";
Serial.println("📤 Sending data: " + message);
webSocket.broadcastTXT(message);
}
outputs in the serial monitor: 
WiFi connected
ESP32 IP Address: 192.168.27.51
WebSocket server started on port 8080
Testing Servo...
Sending data: {"angle": 0, "distance": 13.98}
Sending data: {"angle": 5, "distance": 13.98}
outputs in the browser:"
Still waiting for WebSocket connection...
did anyone have a similar problem?
Edits should not be used in cases where you want to make additions or corrections to a post which changes its informational content.