Interactive teaching aid for explaining how tire slip ratio drives the friction coefficient (µ)
and how a simple mean squared error (MSE) workflow can compare measured data with a simplified
model. The project ships as a single static HTML file (index.html) so it can be opened directly in
any modern browser or dropped into course material without a build step.
- Interactive slip-µ curve with adjustable model parameters (peak friction, contact stiffness, shape factor, and normal load).
- Measurement table for telemetry or lab data, including add/remove rows, reset to defaults, and CSV export that also captures the modeled values for offline comparison.
- Real-time MSE calculation plus peak slip/µ readouts for classroom discussions.
- Accessible UI: skip links, semantic sections, responsive table layout, keyboard-friendly controls,
and persistent state stored in
localStoragefor workshops.
-
Clone or download this repository.
-
Open
index.htmlin your preferred browser. No build tooling or server is required. -
(Optional) Serve it locally to avoid browser security restrictions when exporting CSVs:
python3 -m http.server 8000 # visit http://localhost:8000 in your browser and open index.html
- Model parameters — Adjust the sliders/inputs at the top to see how friction reacts to different peak values, stiffness, shape factors, and vertical loads. Inputs are bounded to typical teaching ranges, and inline helper text explains each control.
- Measurement table — Enter slip ratios (as decimals, e.g.,
0.1for 10 %) and measured friction coefficients. Blank cells are ignored in the MSE calculation so you can focus on subsets of data. Use the action buttons to add, remove, reset, or export rows. - Visualization — The canvas overlays the theoretical slip curve with your data points and updates instantly. A textual description underneath mirrors the key insights for screen readers.
- Metrics — The MSE panel shows the current error, the estimated peak friction, and the slip at which that peak occurs. These values are useful anchors for exercises on parameter identification or optimization.
- CSV exports contain three columns:
slip_ratio,f_measured, andf_modelled. This makes it simple to continue analyzing the dataset in spreadsheets, MATLAB, or Python notebooks. - All state (parameters, measurements) is saved locally via
localStorageusing the keyslip-friction-state-v1. Clear browser storage if you want to start completely fresh.
- Keyboard-friendly controls with large hit targets, skip links, and visible focus styles.
- Responsive layout that collapses the data table into labeled cards on narrow screens.
- Canvas is paired with an ARIA description summarizing peak values and dataset counts to keep non-visual users in the loop.
- Comments in the HTML, CSS, and JavaScript describe the modeling approach so that students can read through the source as part of the lesson.
.
├── index.html # Stand-alone teaching tool with inline CSS/JS
├── LICENSE # MIT License
└── README.md # Project overview and usage instructions
- Replace the current simplified tire model with a configurable Pacejka/MF formula.
- Add multi-curve support to compare tires, compounds, or road surfaces side-by-side.
- Persist datasets in JSON and bundle example measurement files for offline assignments.
Released under the MIT License. See LICENSE for details.