Difference between revisions of "Interface"
(Update bcMeter ESP32 interface documentation and terminology (May 2026)) |
(Align status wording with current ESP32 UI) |
||
| Line 32: | Line 32: | ||
| '''Running''' || Active measurement. Data is being saved. | | '''Running''' || Active measurement. Data is being saved. | ||
|- | |- | ||
| '''Error''' || System error detected. | | '''Error''' || System error detected. Open System Status or download logs in the Maintenance menu. | ||
|} | |} | ||
Revision as of 22:01, 2 May 2026
Web Interface Overview
The bcMeter web interface is a real-time dashboard accessible from any browser on the same network. It provides measurement visualization, device control, and configuration — all from your phone or computer.
Try the live demo: bcmeter.org/demo
Dashboard Elements
The main screen consists of five areas:
- Control Bar — Buttons to Start/Stop measurement, access Log Files, Settings, and Maintenance. On mobile or narrow screens, the bar collapses into a hamburger menu (☰).
- Status Panel — Device state (with color-coded status dot), filter loading indicator, and time synchronization status.
- Statistics — Real-time metric cards: 1h Average, Session Average, and Peak Value. The Peak Value card includes the timestamp when the peak occurred and a Reset button to clear peak tracking.
- Live Plot — Visualizes Black Carbon concentration over time using an interactive canvas-based chart.
- Plot Controls — Download options, zoom reset, axis scaling, log selection, Y-axis configuration with filter type selection and smoothing controls.
Dark Mode
A dark mode toggle (moon/sun icon) is available in the top-right corner of the navigation bar. Dark mode switches the entire interface to a dark color scheme optimized for low-light environments. The preference is saved in the browser and persists across sessions.
Status Indicators
Device Status
| Status | Meaning |
|---|---|
| Ready | Device is idle. Pump is off. |
| Initializing | Pump is priming and the optical chamber is warming up. Data is not yet recorded. |
| Running | Active measurement. Data is being saved. |
| Error | System error detected. Open System Status or download logs in the Maintenance menu. |
Time Sync Status
A time synchronization indicator is displayed in the status bar. If the device clock is not synced, it shows "Time: not synced" in red. Accurate timestamps are essential for data analysis — use Maintenance > Time Synchronization to sync the device clock with your browser.
Filter Loading Status
The "Filter" indicator displays the loading percentage of the filter strip. The color of the progress bar changes based on loading level:
| Color | Loading | Meaning |
|---|---|---|
| Green | 0–30% | Filter is clean. Signal quality is optimal. |
| Orange | 30–70% | Loading increasing. Mathematical compensation is active. Prepare a replacement. |
| Red | 70–85% | Heavily loaded. Compensation becomes less reliable. Replace soon. Email alert sent every 12h when >70%. |
| Dark | 85%+ | Near saturation. Replace immediately. |
Alert Modals
The interface displays automatic alert modals when certain conditions are detected during measurement:
- Filter Loading High — Appears when filter loading exceeds the configured threshold. Prompts the user to replace the filter paper.
- No Airflow Detected — Appears when airflow drops to near zero during measurement. Check pump tubing and connections.
- High Humidity — Environmental warning when humidity inside the device is critically high.
- Low Disk Space — Warning when internal storage is running low.
These alerts appear once per condition and can be dismissed with "Got it."
Data Visualization
Plot Behavior
The interactive graph visualizes time-series data. Due to the analog nature of the signal and signal-to-noise ratio limitations, the graph typically shows a jagged, fluctuating line. The rolling average is closer to the "real" value.
After starting a measurement, it takes approximately 3–4 samples before the graph appears. At the default 300s (5 min) sample interval, the first data appears after 15–20 minutes.
- Zoom: Click and drag to zoom in. Double-click to reset.
Plot Controls
Located below the live plot:
- Download View: Export current view as CSV, PNG, or SVG.
- Reset Zoom: Restore default view after zooming.
- Axis Scaling: Manually override automatic Y-axis scaling (min/max per axis) when peaks compress the view.
View Log
Dropdown to select which session log to display — current session or any previous log file stored on the device.
Y-Axis Controls
Each axis row (Y1, Y2, and any additional axes) provides:
- Toggle switch — Quickly show or hide the axis on the chart.
- Variable selector — Choose which parameter to display (see Plot Parameters).
- Resample slider — Averages consecutive samples before plotting. "Off" shows every sample; higher values reduce visual noise and data density.
- Denoise mode — Segmented control with four options:
- Raw — Unfiltered signal, showing every data point as-is.
- Med — Median filter (default, highlighted in teal). Good general-purpose noise reduction.
- EMA — Exponential Moving Average. Gives more weight to recent values, good for tracking trends.
- ONA — Optimized Noise Average. Advanced averaging algorithm.
- Denoise slider — Adjusts the strength/window size for the selected denoise mode. The number displayed next to the slider shows the current value.
- Direct emission monitoring: Keep below 4 for fast response.
- Ambient monitoring: Higher settings acceptable for smoother signal.
Adding Extra Axes
Click the + Add axis button below Y2 to add additional Y-axes. Each extra axis has the same controls (toggle, variable, filter type, smoothing). Extra axes allow overlaying multiple parameters simultaneously — for example, plotting BC concentration, temperature, and airflow on the same chart.
Plot Parameters
The following parameters can be assigned to any Y-axis:
| Parameter | Description |
|---|---|
| Reference (880nm) | Light intensity from the 880nm LED through the clean portion of the filter — baseline for comparison. Optional: 520nm, 370nm if multi-wavelength hardware installed. |
| Sensor (880nm) | Light intensity after passing through the particle-loaded spot. |
| Attenuation (880nm) | Calculated reduction in light intensity caused by absorbing particles. |
| BC Unfiltered (880nm) | Real-time black carbon concentration without smoothing. |
| Black Carbon (880nm) | BC concentration in ng/m³, with rolling average applied. |
| Relative Load | Filter spot saturation level (%), indicating when replacement is needed. |
| Ångström Exponent | Ratio indicating aerosol source characteristics (requires multi-wavelength hardware). |
| Temperature (°C) | Internal operating temperature — important for measurement stability. |
| Humidity (%) | Relative humidity inside the device (if sensor equipped). |
| Air Flow (l/min) | Current airflow rate through the filter (if flow sensor equipped). |