Microfluidic Flow Annotator

No image selected

Click: start or finish a line. Hold 'A' + click: add intermediate points for curved paths. Press 'U': toggle magnifier.
Exposure from metadata: N/A ms

Annotations

Actions	#	Pts	Start (px)	End (px)	Dist (µm)	±Err	Exp (ms)	±Err	Vel (µm/s)	±Err	Center Dist (µm)	Center Err (µm)

v1.4.3 Olympia

📖 How to Use the Microfluidic Flow Annotator

📁 1. Load Your Data

Prepare a .zip file with your images and metadata:

data/
  images/   # .tif/.tiff/.png/.jpg
  metadata/ # XML files with Exposure info
            # Format: xxxx.tif.cal.xml

Click "Use ZIP" to load. The app will index images and match metadata automatically.

✏️ 2. Annotate Particle Trajectories

Click on the image to start a trajectory line
Hold 'A' + click to add intermediate points for curved particle paths
Click again to finish the trajectory
The tool automatically calculates:
- Distance traveled (in µm) with propagated error
- Velocity (µm/s) with propagated error based on exposure time
- Error propagation: Distance error = ±0.25 pixels (converted to µm)
- Time error: adjustable in sidebar (default ±0.5 ms)
- Velocity error: √[(dist_err/dist)² + (time_err/time)²] × velocity

📏 2.5. Length Measurement Tool

Click "📏 Measure Length" to activate measurement mode
Draw lines just like annotations (click to add points, hold 'A' for curves)
Length is displayed in real-time but not saved to annotations
Useful for quick measurements or calibration checks
Click the button again to exit measurement mode

🎯 3. Trajectory Analysis Mode (Optional)

Enable advanced positioning analysis to measure particle distances from tube centerline:

Click "Enable Trajectory Analysis" button
Step 1: Draw the TOP boundary of your tube
- Click multiple points along the top edge
- Hold 'A' to add points for curved sections
- Click to finish the boundary line
Step 2: Draw the BOTTOM boundary of your tube
- Same process as top boundary
- Boundaries can have different lengths
The tool will compute a green centerline automatically
All trajectories now show Dist from Center (µm) data
Use "Clear Boundaries" to redraw or adjust boundaries

💾 4. Save & Export

Auto-save: Annotations save automatically to browser localStorage
CSV Export: Click "Save CSV" to download analysis data
- Includes all trajectory data
- Distance from center (if trajectory analysis enabled)
- Compatible with Excel, Python, R, and other analysis tools
CSV Import: Load previously saved annotations back into the tool

🔬 Data Compatibility

The exported data is ready for downstream analysis:

Statistical analysis (mean velocity, position distribution)
Flow profile characterization
Velocity vs. position correlation studies
Machine learning feature extraction
Laminar flow validation

� 5. Magnifier Tool

Press 'U' key to toggle magnifier on/off
When enabled, a 3× magnified view follows your cursor
Helps with precise point placement on particle trajectories
Magnifier shows a crosshair at the exact click location

🔎 Uncertainty model

The tool follows the uncertainty model used in the lab notes. Key points:

Distance calibration: if one pixel corresponds to s µm, then a measured streak spanning n pixels has length d = n · s.

Distance uncertainty (start and end point uncertainty):

\n\u03B4d = \sqrt{(\u03B4d_{start})^2 + (\u03B4d_{end})^2} \approx \sqrt{2} \cdot s\n

Time uncertainty: the exposure time uncertainty is taken as \u03B4t_{exp} = 0.1 ms (camera timing resolution estimate).

Velocity and propagated uncertainty:

\nv = d / t_{exp}\n\n\frac{\u03B4v}{v} = \sqrt{\left(\frac{\u03B4d}{d}\right)^2 + \left(\frac{\u03B4t_{exp}}{t_{exp}}\right)^2}\n

Uncertainty of distance to centerline (radial):

\n\u03B4d_r \approx \sqrt{(\u03B4d_{left})^2 + (\u03B4d_{right})^2} \approx 2 \cdot s\n

Implementation notes: the app computes s from the scale inputs as s = inpScaleUm / inpScalePx (µm per pixel). It uses \u03B4d = \sqrt{2}·s and \u03B4d_r = 2·s when populating the distance error and center error fields in the table and CSV.

�💡 Tips

Complex tube shapes are supported - just trace the actual boundaries
Each image maintains independent tube boundaries
Unsaved changes trigger a warning before closing
Use the undo button (↶) to remove the last annotation
Scale settings (px per µm) apply to all calculations
Adjust time error in sidebar to reflect your experimental uncertainty
Use measurement tool for quick checks without cluttering annotation data