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: @@
-After the hardware is set up, start the Raspberry Pi by plugging in power (either USB or 12V DC, depending on the PCB you assembled)
+== Web Interface Overview ==
-If you have given your bcMeter a custom name (for example bcmeter01), you can connect to your bcMeter by entering the name in any webbrowser, followed by a forward slash, i.e.
+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.
-''bcmeter/''
+'''Try the live demo:''' [https://bcmeter.org/demo/ bcmeter.org/demo]
-or if you left the default configuration
+=== Dashboard Elements ===
-''raspberrypi/''
+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.
-'''If you see nothing, make sure the Wifi Configuration is correct. If so, try to add ".local" - i.e. raspberrypi.local/ or bcmeter.local/'''
+==== Dark Mode ====
-Now you should see the empty [https://bcmeter.org/interface-test/ interface (demo from bcmeter.org)]
+A dark mode toggle (moon/sun icon) is in the top-right corner of the navigation bar. The preference is saved in the browser.
-[[File:BcMeter-interface.jpg|400px|left]]
+=== Status Indicators ===
-Over time, a graph will be visible. You can choose two data sources below the graph in the corresponding drop down menus.
+==== Device Status ====
-Saving the data as .csv is a non-destructive way to save your data since you can import the file to Excel or any other application and do further evaluation.
+{| class="wikitable"
+! 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.
+|}
-Using the SVG export is best for print media since it is a vector format. You can open the file in Inkscape or Illustrator or any other application capable of editing vector formats.
+==== Time Sync Status ====
-The PNG is just a screenshot of the graph and not the best quality.
+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:
+{| class="wikitable"
+! Color !! Loading !! Meaning
+|-
+| style="background:#28a745;color:#fff" | '''Green''' || 0–30% || Filter is clean. Signal quality is optimal.
+|-
+| style="background:#ffc107" | '''Orange''' || 30–70% || Loading increasing. Mathematical compensation is active. Prepare a replacement.
+|-
+| style="background:#dc3545;color:#fff" | '''Red''' || 70–85% || Heavily loaded. Compensation becomes less reliable. Replace soon. Email alert sent every 12h when >70%.
+|-
+| style="background:#343a40;color:#fff" | '''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 [[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 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:
+{| 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 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).
+|}