Sensor Dashboard

A single-file live dashboard for the main.ino multi-sensor sketch. Reads the Arduino's USB serial output directly in the browser and plots it — no server, no backend, no build step.

How it works

GitHub Pages only serves static files, so it can't read your USB port. Instead the page uses the Web Serial API, which runs entirely in the browser and opens the port from the client side. That's why this works on Pages at all.

The page parses the human-readable text main.ino already prints, so the sketch needs no changes. It keys off these lines:

Distance: 12.3 cm          ->  distance   (also handles "OUT OF RANGE")
Gas Analog: 456            ->  gas level
Gas Digital: 1             ->  gas alarm  (active-LOW: 0 means gas detected)
Object Temp: 36.5 C        ->  IR object temp   (also handles "N/A")
Ambient Temp: 24.0 C       ->  IR ambient temp  (also handles "N/A")
UID: 04 A3 B2 C1           ->  RFID scan event
Access: GRANTED            ->  that card's result (DENIED for any other card)
Lock: LOCKED               ->  lock state, sent every second and after each tap

A sample is committed when Ambient Temp arrives, since that's the last field the sketch emits per loop.

Browser support — read this first

Browser	Works?
Chrome / Edge / Opera, desktop	Yes
Firefox, Safari	No — Web Serial not implemented
Anything on phone/tablet	No

This is a browser limitation, not a bug in the page. On an unsupported browser the dashboard still loads and the Demo data button still works — you just can't open a real port.

Deploying to GitHub Pages

1. Create a repo on GitHub (public, or private with Pages enabled).
2. Put index.html at the repo root.
3. Commit and push:

   git init
   git add index.html README.md
   git commit -m "Arduino sensor dashboard"
   git branch -M main
   git remote add origin https://github.com/<you>/<repo>.git
   git push -u origin main
   

4. On GitHub: Settings → Pages → Source = Deploy from a branch, branch main, folder / (root). Save.
5. Wait ~1 minute, then open https://<you>.github.io/<repo>/.

Pages serves over HTTPS, which is what Web Serial requires. Nothing else to configure.

Using it

1. Upload main.ino to the Arduino.
2. Close the Arduino IDE's Serial Monitor. Only one program can hold a COM port at a time — if the Serial Monitor is open, the browser can't connect. This is the single most common reason "Connect" appears to do nothing.
3. Open the Pages URL in Chrome or Edge.
4. Click Connect Arduino and pick your board's port from the dialog.
5. Readings start appearing within about a second.

Note that opening the port resets the Arduino (DTR), so you'll briefly see the sketch's startup banner in the raw serial panel before readings begin.

Testing locally

Web Serial needs a secure context, so open the page over http://localhost rather than double-clicking the file — a file:// URL is not reliable here.

cd dashboard
python -m http.server 8000
# then open http://localhost:8000

Or press Demo data on any browser to drive the dashboard with synthetic readings and no hardware attached — useful for checking the layout before you have the wiring finished.

WiFi mode (ESP32 bridge)

Adds an ESP32 so the laptop doesn't need a USB cable to the Uno. The Uno sketch is unchanged: its Serial.print output already appears on pin D1, so the ESP32 just listens there and re-broadcasts each line over WiFi.

Uno --D1 (serial)--> ESP32 --WiFi--> browser on any device

The ESP32 also serves the dashboard itself. That's not optional: a page loaded over HTTPS (GitHub Pages) is blocked from opening a plain-HTTP connection to a device on your LAN, so the Pages copy can't reach the ESP32. Served from the ESP32 it's the same page, and it works in any browser, phones included, since Web Serial isn't involved.

Wiring

Needs three 10 kΩ resistors.

Uno D1 (TX) ── 10k ──┬── ESP32 RX2 (GPIO16)
                     │
                    10k
                     │
                    10k
                     │
                    GND

From	To
Uno D1 (TX)	through the divider above → ESP32 RX2
Uno GND	ESP32 GND
ESP32 TX2	nothing — leave it unconnected
Uno D0 (RX)	nothing — leave it unconnected

The divider drops the Uno's 5 V signal to 5 × 20k / 30k ≈ 3.3 V. ESP32 pins are not 5 V tolerant, so don't wire D1 straight across. With only two 10k (a 1:1 split) you'd get 2.5 V, which is right at the ESP32's threshold and will drop bytes. Use all three.

Why this avoids the D0/D1 conflict: data only goes Uno → ESP32. D1 is the Uno's TX output, so the ESP32 just listens in on what the Uno already sends to USB. Uploads and the Serial Monitor keep working. The conflict only happens if something drives D0, so ESP32 TX2 must stay off Uno D0. No SoftwareSerial needed.

Power the ESP32 from its own USB cable or phone charger. The Uno's 5 V pin can't supply the MQ heater plus the ESP32's WiFi bursts, and you'll get random resets.

Flashing the ESP32

1. Arduino IDE → Boards Manager → install esp32 by Espressif (3.x).
2. Open esp32_bridge/esp32_bridge.ino. The hotspot works as is. Optionally put a home WiFi in WIFI_SSID / WIFI_PASSWORD at the top (see below), or leave them empty.
3. Board: ESP32 Dev Module. Upload. No extra libraries needed.
4. Open the ESP32's Serial Monitor at 115200 baud. It prints the address to open, then echoes every line it receives from the Uno, which is the quickest way to confirm the D1 wire is right.

Opening the dashboard

The ESP32 runs its own WiFi hotspot all the time, so it works anywhere, college included, with no router or WiFi password to change:

1. On your phone or laptop, join WiFi SensorDashboard (password sensors123).
2. Open http://192.168.4.1. Type the http://, or Safari may search the web instead. It connects by itself.

The hotspot has no internet, so the phone may warn about that. Choose to stay connected. On Android, if the page won't load, turn off mobile data: Android otherwise sends the request over mobile data, where the ESP32 doesn't exist.

Home WiFi as well: if the network in WIFI_SSID is in range at power-up, the ESP32 joins it too. Then a PC on that router (even a wired one with no WiFi card) can open http://sensors.local or the IP the Serial Monitor prints. If it isn't found within 10 s (e.g. at college), the ESP32 stops looking and runs as hotspot only.

No WiFi at all: plug the ESP32 into the PC, open the GitHub Pages dashboard, pick 115200 baud, and connect to the ESP32's COM port. It echoes the Uno's readings over USB.

After editing index.html

The ESP32 serves a copy compiled into its flash, so regenerate it and re-upload:

python embed_dashboard.py

To try dashboard edits without re-flashing, serve the folder locally and point it at the ESP32: http://localhost:8000/?esp=192.168.1.50.

ESP32 only (no Uno)

esp32_standalone/esp32_standalone.ino drops the Uno: the ESP32 reads every sensor itself, prints the exact same lines, and serves the dashboard and stream like the bridge does. The dashboard needs no changes.

ESP32 pins are 3.3 V and not 5 V tolerant, so every sensor output that can reach 5 V goes through a divider made of 10 kΩ resistors. Needs seven 10 kΩ resistors in total. Pin names below are the DevKit V1 board labels.

Sensor pin	ESP32
HC-SR04 VCC	VIN
HC-SR04 TRIG	D26
HC-SR04 ECHO	10k → D27, then D27 → 10k → 10k → GND
MQ VCC	VIN
MQ AO	10k → D34, then D34 → 10k → GND
MQ DO	10k → D35, then D35 → 10k → GND
MLX90614 VCC	3V3
MLX90614 SDA / SCL	D21 / D22
RC522 3.3V	3V3 (never VIN)
RC522 SDA(SS) / SCK / MOSI / MISO / RST	D5 / D18 / D23 / D19 / D4
every GND	GND

• Both MQ pins are on ADC1 because ADC2 stops working once WiFi is on.
• Gas Analog is still reported on the Uno's 0–1023 (0–5 V) scale.
• MQ DO is read as a voltage, so it works whatever pull-up the module has.
• Power the ESP32 from a 1 A+ phone charger or a PC USB port. VIN is the USB 5 V, and the MQ heater draws about 150 mA from it.
• USB serial runs at 115200 (pick that baud on the Pages dashboard).
• Home WiFi is empty by default (hotspot only); fill in WIFI_SSID.

Features

• Live stat tiles with sparklines for distance, gas, object and ambient temperature
• Gas alarm status derived from the MQ digital pin (icon + label, never colour alone)
• RFID lock combined with the IR object temperature. Only the authorised card (AUTHORIZED_UID in the sketch) locks and unlocks; any other card shows Access denied. Above the trigger temperature while locked shows Theft detected, while unlocked shows Presence detected. The trigger is remembered per browser.
• Time-series charts with crosshair and tooltip (hover, or tap on a phone)
• Time-window filter (1 / 5 / 15 min / all) scoping every chart at once
• RFID scan log
• Table view with every numeric reading
• Raw serial console for debugging
• CSV export of the whole session
• Light and dark themes, both colour-validated for colour-vision deficiency

Chart design notes

Object and ambient temperature share one chart because they share a unit (°C) and therefore one axis. Distance (cm) and gas (ADC counts) get their own charts rather than being overlaid on a second y-axis — a dual-axis chart invents a correlation that isn't in the data.

Series colours are fixed per sensor and never reassigned, so a colour always means the same reading. Out-of-range distance readings break the line into a gap instead of plotting as zero.