Smart Car Telemetry Dashboard (Full-Stack & Hardware Bridge)

📝 Project Summary

This repository contains the complete web-based user interface and the backend communication bridge for the Smart Car Central Control Unit project. It seamlessly connects a simulated hardware environment (STM32 microcontroller) to a clean, responsive, and modern telemetry dashboard, allowing users to monitor and visualize critical vehicle metrics in real-time without latency.

⚙️ Backend & Hardware Integration (Core Engine)

• Hardware Simulation Bridge: Connects to an STM32 microcontroller simulated in Proteus, receiving structured JSON telemetry data over UART.
• Serial Port Routing: Utilizes Virtual Serial Port Driver (VSPD) to capture hardware data streams via COM ports.
• Node.js Engine: A lightweight Express server equipped with @serialport/parser-readline to continuously parse incoming hardware data lines.
• Real-Time WebSockets: Powered by Socket.io to instantly broadcast the parsed vehicle data to all connected web clients, ensuring a live, refresh-free experience.

🎨 UI Modules & Features

The dashboard is designed with a modern dark-mode aesthetic (featuring purple and white accents) and is organized into 4 distinct modular cards:

• 🛡️ Safety Node: Visualizes tire pressure metrics and triggers real-time visual flashing alerts when emergency braking or danger flags are active.
• 🌡️ Environment Node: Displays ambient temperature readings and tracks the dynamic PWM intensity of the vehicle's lighting system.
• 📊 Status Node: Shows real-time speed tracking (Km/h) and features a dynamic battery charge progress bar.
• 🤖 AI Node: Logs obstacle detection status and automated path logs instantly.
• 🛠️ Simulation Mode: Includes a built-in "Mock Mode" generator to test UI behaviors and alert states when the physical/simulated hardware is disconnected.

🛠️ Tech Stack & Architecture

Backend & Embedded Hardware:

• Node.js & Express: Server environment and static file serving.
• Socket.io & SerialPort: Bidirectional real-time communication and physical/virtual COM port reading.
• Proteus & Keil (C/C++): Embedded systems simulation and STM32 firmware development.

Frontend:

• HTML5: Semantic layout structure designed for telemetry scannability.
• CSS3 (Grid & Flexbox): A fully responsive layout architecture that adapts to various screen sizes without external UI frameworks. Includes custom keyframe animations for critical alert states.
• JavaScript (ES6+): Pure DOM manipulation to receive incoming WebSocket data streams and update the UI components instantly.

👨‍💻 Authors

• Parinaz Kari - Frontend Architecture & UI Design (@ParinazKari)
• Hossein Ranjbari - Hardware Simulation, Node.js Backend & Real-Time Data Pipeline