Difference between revisions of "Interface"

Latest revision as of 14:31, 26 March 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.
Status Panel — Device state, filter loading, and time synchronization status.
Statistics — Real-time averages: 1h Average, Session Average, Peak Value.
Live Plot — Visualizes Black Carbon concentration over time.
Plot Controls — Download options, zoom reset, axis scaling, log selection, Y-axis parameter assignment, and denoise sliders.

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. Colors indicate 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.

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 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

Accordion menus (Y1, Y2) to assign plot parameters and adjust filtering:

Axis Selection: Choose which parameter to display on each axis (see Plot Parameters).
Denoise: Median filter slider per axis to smooth the signal.
- Direct emission monitoring: Keep below 4 for fast response.
- Ambient monitoring: Higher settings acceptable for smoother signal.

Plot Parameters

The following parameters can be assigned to Y1 or Y2 axes:

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).
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.

@@ 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 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.
-''http://bcmeter01/''
+'''Try the live demo:''' [https://bcmeter.org/demo/ bcmeter.org/demo]
-or if you left the default configuration
+=== Dashboard Elements ===
-''raspberrypi/''
+The main screen consists of five areas:
-'''If the connection is failing, make sure the [[Installation#Configure_the_microSD_Card_for_WiFi_access|Wifi Configuration]] is correct. If so, try to add ".local" - i.e. raspberrypi.local/ or bcmeter.local/'''
+# '''Control Bar''' — Buttons to Start/Stop measurement, access Log Files, Settings, and Maintenance.
+# '''Status Panel''' — Device state, filter loading, and time synchronization status.
+# '''Statistics''' — Real-time averages: 1h Average, Session Average, Peak Value.
+# '''Live Plot''' — Visualizes Black Carbon concentration over time.
+# '''Plot Controls''' — Download options, zoom reset, axis scaling, log selection, Y-axis parameter assignment, and denoise sliders.
-Now you should see the empty [https://bcmeter.org/interface-test/ interface (demo from bcmeter.org shows hours of data)]
+=== Status Indicators ===
-[[File:BcMeter-interface.jpg|400px|left]]
+==== Device Status ====
-Over time, a graph will be visible. You can choose two data sources below the graph in the corresponding drop down menus.
+{| 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. Check System Logs in the Maintenance menu.
+|}
-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.
+==== Time Sync Status ====
-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.
+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 PNG Export saves a screenshot of the graph locally and ist not the best quality for print but intended to be used for Mails/Websites.
+==== Filter Loading Status ====
+The "Filter" indicator displays the loading percentage of the filter strip. Colors indicate 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.
+|}
+=== 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 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 ====
+Accordion menus (Y1, Y2) to assign plot parameters and adjust filtering:
+* '''Axis Selection:''' Choose which parameter to display on each axis (see [[Interface#Plot Parameters|Plot Parameters]]).
+* '''Denoise:''' Median filter slider per axis to smooth the signal.
+** ''Direct emission monitoring:'' Keep below 4 for fast response.
+** ''Ambient monitoring:'' Higher settings acceptable for smoother signal.
+=== Plot Parameters ===
+The following parameters can be assigned to Y1 or Y2 axes:
+{| 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.
+|-
+| '''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).
+|-
+| '''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.''
+|}