Difference between revisions of "Interface"

Latest revision as of 20:47, 8 June 2026

Web Interface Overview

The bcMeter web interface is a local dashboard for measurement data, device control, and settings. Open it from a browser on the same network as the device.

Try the live demo: bcmeter.org/demo

Dashboard Elements

The main screen has 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 — 1h Average, Session Average, and Peak Value. The Peak Value card includes the timestamp of the peak and a Reset button.
Live Plot — Black Carbon concentration over time.
Plot Controls — Download, zoom reset, axis scaling, log selection, Y-axis assignment, resampling, and denoising.

Dark Mode

A dark mode toggle (moon/sun icon) is in the top-right corner of the navigation bar. The preference is saved in the browser.

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

The status bar shows whether the device clock is synced. If it shows "Time: not synced" in red, use Maintenance > Time Synchronization to sync the device clock with your browser.

Filter Loading Status

The "Filter" indicator shows how much of the filter strip is loaded. The color changes with 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 opens alert modals for these measurement conditions:

Filter Loading High — Filter loading exceeds the configured threshold. Replace the filter paper soon.
No Airflow Detected — Appears when airflow drops to near zero during measurement. Check pump tubing and connections.
High Humidity — Warning when humidity inside the device is too 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 graph shows measurements as a time series. The optical signal is analog, so the raw line is usually jagged. Smoothed values show the trend more clearly.

After starting a measurement, the graph needs about 3–4 samples before it appears. At the default 300s (5 min) sample interval, first data appears after 15–20 minutes.

Zoom: Click and drag to zoom in. Double-click to reset.

Plot Controls

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 for the current session or a previous log file stored on the device.

Y-Axis Controls

Each axis row (Y1, Y2, and added axes) includes:

Toggle switch — 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 default noise reduction.
- EMA — Exponential Moving Average. Gives more weight to recent values, good for tracking trends.
- ONA — Optimized Noise Average.
Denoise slider — Adjusts the strength/window size for the selected denoise mode. The number next to the slider shows the current value.
- Direct emission monitoring: Keep below 4 for fast response.
- Ambient monitoring: Higher values are acceptable when a smoother trend is more important than fast response.

Adding Extra Axes

Click + Add axis below Y2 to add more Y-axes. Each extra axis has the same controls. Use extra axes to compare values such as BC concentration, temperature, and airflow in one chart.

Plot Parameters

These 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 channels are in development (not available in shipped hardware).
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 — in development, not in shipped devices).
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 1: / Line 1: @@
 == 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.
+The bcMeter web interface is a local dashboard for measurement data, device control, and settings. Open it from a browser on the same network as the device.
 '''Try the live demo:''' [https://bcmeter.org/demo/ bcmeter.org/demo]
@@ Line 7: / Line 7: @@
 === Dashboard Elements ===
-The main screen consists of five areas:
+The main screen has 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.
+# '''Statistics''' — 1h Average, Session Average, and Peak Value. The Peak Value card includes the timestamp of the peak and a '''Reset''' button.
-# '''Live Plot''' — Visualizes Black Carbon concentration over time using an interactive canvas-based chart.
+# '''Live Plot''' — Black Carbon concentration over time.
-# '''Plot Controls''' — Download options, zoom reset, axis scaling, log selection, Y-axis configuration with filter type selection and smoothing controls.
+# '''Plot Controls''' — Download, zoom reset, axis scaling, log selection, Y-axis assignment, resampling, and denoising.
 ==== 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.
+A dark mode toggle (moon/sun icon) is in the top-right corner of the navigation bar. The preference is saved in the browser.
 === Status Indicators ===
@@ Line 37: / Line 37: @@
 ==== 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.
+The status bar shows whether the device clock is synced. If it shows "Time: not synced" in red, 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:
+The "Filter" indicator shows how much of the filter strip is loaded. The color changes with loading level:
 {| class="wikitable"
@@ Line 57: / Line 57: @@
 ==== Alert Modals ====
-The interface displays automatic alert modals when certain conditions are detected during measurement:
+The interface opens alert modals for these measurement conditions:
-* '''Filter Loading High''' — Appears when filter loading exceeds the configured threshold. Prompts the user to replace the filter paper.
+* '''Filter Loading High''' — Filter loading exceeds the configured threshold. Replace the filter paper soon.
 * '''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.
+* '''High Humidity''' — Warning when humidity inside the device is too high.
 * '''Low Disk Space''' — Warning when internal storage is running low.
@@ Line 70: / Line 70: @@
 ==== 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.
+The graph shows measurements as a time series. The optical signal is analog, so the raw line is usually jagged. Smoothed values show the trend more clearly.
-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.
+After starting a measurement, the graph needs about 3–4 samples before it appears. At the default 300s (5 min) sample interval, first data appears after 15–20 minutes.
 * '''Zoom:''' Click and drag to zoom in. Double-click to reset.
@@ Line 78: / Line 78: @@
 ==== Plot Controls ====
-Located below the live plot:
+Below the live plot:
 * '''Download View:''' Export current view as CSV, PNG, or SVG.
@@ Line 86: / Line 86: @@
 ==== View Log ====
-Dropdown to select which session log to display — current session or any previous log file stored on the device.
+Dropdown for the current session or a previous log file stored on the device.
 ==== Y-Axis Controls ====
-Each axis row (Y1, Y2, and any additional axes) provides:
+Each axis row (Y1, Y2, and added axes) includes:
-* '''Toggle switch''' — Quickly show or hide the axis on the chart.
+* '''Toggle switch''' — Show or hide the axis on the chart.
 * '''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.
+** '''Med''' — Median filter (default, highlighted in teal). Good default noise reduction.
 ** '''EMA''' — Exponential Moving Average. Gives more weight to recent values, good for tracking trends.
-** '''ONA''' — Optimized Noise Average. Advanced averaging algorithm.
+** '''ONA''' — Optimized Noise Average.
-* '''Denoise slider''' — Adjusts the strength/window size for the selected denoise mode. The number displayed next to the slider shows the current value.
+* '''Denoise slider''' — Adjusts the strength/window size for the selected denoise mode. The number 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.
+** ''Ambient monitoring:'' Higher values are acceptable when a smoother trend is more important than fast response.
 ==== 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.
+Click '''+ Add axis''' below Y2 to add more Y-axes. Each extra axis has the same controls. Use extra axes to compare values such as BC concentration, temperature, and airflow in one chart.
 === Plot Parameters ===
-The following parameters can be assigned to any Y-axis:
+These parameters can be assigned to any Y-axis:
 {| class="wikitable"
 ! 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.
+| '''Reference (880nm)''' || Light intensity from the 880nm LED through the clean portion of the filter — baseline for comparison. Optional 520nm / 370nm channels are in development (not available in shipped hardware).
 |-
 | '''Sensor (880nm)''' || Light intensity after passing through the particle-loaded spot.
@@ Line 127: / Line 127: @@
 | '''Relative Load''' || Filter spot saturation level (%), indicating when replacement is needed.
 |-
-| '''Ångström Exponent''' || Ratio indicating aerosol source characteristics (requires multi-wavelength hardware).
+| '''Ångström Exponent''' || Ratio indicating aerosol source characteristics (requires multi-wavelength hardware — in development, not in shipped devices).
 |-
 | '''Temperature (°C)''' || Internal operating temperature — important for measurement stability.