Difference between revisions of "Interface"

Revision as of 21:58, 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. Check System 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).

@@ Line 9: / Line 9: @@
 The main screen consists of five areas:
-# '''Control Bar''' — Buttons to Start/Stop measurement, access Log Files, Settings, and Maintenance.
+# '''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, filter loading, and time synchronization status.
+# '''Status Panel''' — Device state (with color-coded status dot), filter loading indicator, and time synchronization status.
-# '''Statistics''' — Real-time averages: 1h Average, Session Average, Peak Value.
+# '''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.
+# '''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 parameter assignment, and denoise sliders.
+# '''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 ===
@@ Line 37: / Line 41: @@
 ==== Filter Loading Status ====
-The "Filter" indicator displays the loading percentage of the filter strip. Colors indicate loading level:
+The "Filter" indicator displays the loading percentage of the filter strip. The color of the progress bar changes based on loading level:
 {| class="wikitable"
@@ Line 50: / Line 54: @@
 | style="background:#343a40;color:#fff" | '''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 ===
@@ Line 67: / Line 82: @@
 * '''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 when peaks compress the view.
+* '''Axis Scaling:''' Manually override automatic Y-axis scaling (min/max per axis) when peaks compress the view.
 ==== View Log ====
@@ Line 75: / Line 90: @@
 ==== Y-Axis Controls ====
-Accordion menus (Y1, Y2) to assign plot parameters and adjust filtering:
+Each axis row (Y1, Y2, and any additional axes) provides:
-* '''Axis Selection:''' Choose which parameter to display on each axis (see [[Interface#Plot Parameters|Plot Parameters]]).
+* '''Toggle switch''' — Quickly show or hide the axis on the chart.
-* '''Denoise:''' Median filter slider per axis to smooth the signal.
+* '''Variable selector''' — Choose which parameter to display (see [[Interface#Plot Parameters|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 Y1 or Y2 axes:
+The following parameters can be assigned to any Y-axis:
 {| class="wikitable"
@@ Line 108: / Line 134: @@
 |-
 | '''Air Flow (l/min)''' || Current airflow rate through the filter (if flow sensor equipped).
-|-
-| '''Air Pressure (hPa)''' || Atmospheric pressure from the barometric sensor. Used for altitude estimation and pressure-corrected BC calculations. ''Optional — requires a BME280 pressure sensor.''
-|-
-| '''PM2.5 (µg/m³)''' || Fine particulate matter concentration (particles ≤ 2.5 µm). ''Optional — requires an SPS30 particulate matter sensor.''
-|-
-| '''PM10 (µg/m³)''' || Coarse particulate matter concentration (particles ≤ 10 µm). ''Optional — requires an SPS30 particulate matter sensor.''
 |}