An ESP32-powered IR detection system with real-time Web Serial dashboard integration.
Quantrix is a low-latency hardware-to-web solution designed for counting physical objects (industrial parts, people, or inventory) using an IR Obstacle sensor. It eliminates the need for complex cloud setups by using the Web Serial API to communicate directly between the ESP32 and a browser-based dashboard.
- Real-time Visualization: Instant UI updates via Web Serial.
- Dual-Feedback System: Physical (Buzzer/LED) and Digital (Web Dashboard) alerts.
- Responsive Analytics: Integrated Chart.js bar graphs for traffic overview.
- Bidirectional Control: Reset hardware counters directly from the web interface.
| Component | Description | Quantity |
|---|---|---|
| ESP32 DevKit V1 | Main Microcontroller with WiFi/Bluetooth | 1 |
| IR Obstacle Sensor | Active-Low Infrared proximity sensor | 1 |
| Active Buzzer | 3.3V - 5V Buzzer for audible feedback | 1 |
| Jumper Wires | Female-to-Female or Male-to-Female | 5+ |
| USB Data Cable | Micro-USB or USB-C (Must support Data) | 1 |
The system uses the following GPIO configuration. Ensure the ESP32 is unplugged during wiring.
| Component | Pin | ESP32 Pin (GPIO) |
|---|---|---|
| IR Sensor | VCC | 3.3V |
| IR Sensor | GND | GND |
| IR Sensor | OUT | GPIO 23 |
| Buzzer | Positive (+) | GPIO 18 |
| Buzzer | Negative (-) | GND |
| LED | Built-in | GPIO 2 |
The firmware monitors the IR sensor and sends a formatted string COUNT:X over Serial at 115200 baud. It also listens for a RESET string from the dashboard.
-
Set board to DOIT ESP32 DEVKIT V1.
-
Set Baud Rate to 115200.
-
Hold the BOOT button on the ESP32 if the upload fails with "Connecting...".
The dashboard uses the Web Serial API. Because this is a security-sensitive API, the following conditions must be met:
- Browser: Google Chrome or Microsoft Edge.
- Protocol: Must be served over
https://orlocalhost(or opened as a local file).
-
Flash the ESP32 with the provided firmware.
-
Open the Dashboard: Launch your index.html file.
-
Establish Handshake:
- Click the Settings (Gear) Icon in the top right.
- Select your ESP32's COM port from the browser popup.
- Click Connect.
- Detection: When an object breaks the IR beam, the sensor pulls GPIO 23 LOW.
- Hardware Action: The ESP32 increments the internal counter, beeps the buzzer, and sends
COUNT:[Value]to the USB port. - Web Processing: The JavaScript Buffer catches the fragments, reconstructs the line, and updates the Tailwind UI and Chart.js graph.
The communication follows a lightweight string-based protocol:
| Source | Direction | String | Action |
|---|---|---|---|
| ESP32 | TX | COUNT:5 | Updates UI counter to 5 |
| ESP32 | TX | STATUS:IDLE | Resets UI badge to "Idle" |
| Web | RX | RESET | Clears ESP32 memory and restarts count |
- Serial Port Busy: Ensure the Arduino IDE Serial Monitor is closed before connecting the web dashboard.
- Incomplete Data: If the counter skips, check the
serialBufferlogic in the JavaScript code to ensure fragments are being joined correctly. - No Buzzer Sound: Verify the buzzer is "Active" (beeps when connected directly to 3V) and not "Passive."
- Google Sheets Integration: Log every 10th count to a cloud spreadsheet.
- Peak Hour Detection: Algorithm to highlight the most active 60-minute window.
- PWA Support: Convert the dashboard into an offline-capable mobile app.
Instead of counting objects, you place the IR sensor at the entrance of a small shop or a library.
The Problem: Small business owners need to know their "Conversion Rate" (how many people entered vs. how many bought something).
The Implementation: The dashboard tracks total entries. By looking at the Daily Traffic Overview chart, the owner can see which hours require more staff.
Value Add: If the count exceeds a "Capacity Limit," the ESP32 buzzer sounds an alert to stop more people from entering.
Place the sensor on a production line where items move past on a belt.
The Problem: Manual counting is prone to human error and fatigue.
The Implementation: As each product (bottles, boxes, or components) passes, the ESP32 logs it.
Value Add: By adding a "Time since last detection" logic in your HTML, the dashboard can detect a Conveyor Jam. If the counter hasn't moved in 30 seconds while the motor is on, the dashboard highlights red to alert the floor manager.
Mount the sensors on the sides of a loading dock door or a warehouse shelf.
The Problem: Keeping track of how many boxes have been loaded onto a truck.
The Implementation: Every time a worker carries a box through the door, the counter increments.
Value Add: Using the Reset button on the dashboard for every new truck, providing a digital "manifest" of what was loaded.
Place the sensor at the entrance of a meeting room or a shared co-working space.
The Problem: Large offices need to know if "Quiet Zones" or "Meeting Rooms" are actually being used to justify the rent.
The Implementation: The dashboard tracks cumulative usage over a week.
Value Add: You can integrate a "Current Occupancy" logic where the counter increments when someone enters and (with a second sensor) decrements when they leave.
Position the sensor at the height of a car bumper at a private parking lot entrance.
The Problem: Small private lots need a cheap way to know if they are full without expensive underground loop sensors.
The Implementation: The ESP32 counts cars entering.
Value Add: Since the dashboard is web-based, the security guard can monitor the "Live Counter" on a tablet or phone from anywhere within Bluetooth/Serial range.