Vehicle Digital Cockpit and BMCLI Data Integration
This example has two independent entry points: a cockpit for visual interaction and a basic read-only page for BMCLI signals. All page assets are local.
| Entry | Content | Data source |
|---|---|---|
| cockpit/index.html | Speedometer, steering wheel, gear, turn indicators, 60-second curve, and CSV export | Clearly labeled simulation; no hardware required |
| web/index.html | Basic read-only VehicleStatus signals and stale-data notices | BMCLI Web API; prepare the bench below |
Open the Digital Cockpit First
Section titled “Open the Digital Cockpit First”Open cockpit/index.html directly in a modern browser to run the page shown in the tutorial without frontend dependencies. SVG draws the speed scale and wheel; Canvas draws the curve.
Switch scenarios, pause/resume, and export the curve as CSV. Steering, gear, and indicators follow each scenario. Data is generated at 20 Hz, with a 60-second curve and prefilled history; browser rendering and data rates are separate. ?snapshot=1 opens the fixed screenshot scenario.
For a project, retain components and replace simulation with BMCLI signals. Bind speed, gear, steering, and turn indicators using the DBC, confirming names, units, enums, and steering direction. Show “Not configured” for unbound components. Real curves use actual API samples and timestamps.
Connect the Basic Read-Only BMCLI Page
Section titled “Connect the Basic Read-Only BMCLI Page”The basic page reads latest values about one second after each request finishes for lightweight observation.
Run these commands from bmcli-tutorial-series. They assume confirmed receive channel 10357/0, Classic CAN 500 kbit/s, and permission to use 120 Ω termination here. Adjust using Bench and wiring. Coordinate shared analyzers with the agreed global hardware lock.
Check for an existing daemon. Only if no usable session exists, start one without channels, then open this task’s channel:
bmcli daemon status --format=json# Run the next command only if no usable daemon exists; reuse an existing shared session otherwisebmcli daemon startbmcli channel open --channel=10357/0 --mode=listen-only ` --nbitrate=500 --dbitrate=500 --termination=120 --format=jsonbmcli database load --file=examples/02-from-bus-to-signals/network/vehicle-demo.dbc ` --name=tutorial-vehicle-demo --format=jsonbmcli web start --listen=127.0.0.1:18080 ` --web-root=examples/05-web-dashboard/web --history-capacity=4096Local /api/v1/openapi.json provides signal-plan request fields. The example uses channel/database/message/history_capacity. Reuse an existing matching plan instead of creating a duplicate:
$dashboardApi = 'http://127.0.0.1:18080/api/v1'Invoke-RestMethod "$dashboardApi/signals"$dashboardPlan = @{ channel = '10357/0' database = 'tutorial-vehicle-demo' message = 'VehicleStatus' history_capacity = 4096} | ConvertTo-JsonInvoke-RestMethod "$dashboardApi/signals/plans" -Method Post ` -ContentType 'application/json' -Body $dashboardPlanOpen http://127.0.0.1:18080/. If several plans use the same message name, specify the returned plan_id with ?plan=.... The bench needs an independent normal transmitter; the page generates no traffic. After restarting Web, check whether the plan remains and recreate it if needed.
Signal Data APIs
Section titled “Signal Data APIs”GET /api/v1/signals/latest and GET /api/v1/signals/history select data using plan and signal. history uses after for the last sample sequence, starting at 0 initially. A 409 means requested history expired; record oldest_available/newest_available and the gap, then continue with after=oldest_available-1. Relative web start --web-root paths resolve from the caller’s current directory.
Read the Page
Section titled “Read the Page”- The first cached value does not immediately turn the status green; mark data live only after speed and gear sequence numbers continue increasing.
- Distinguish bad quality, unavailable service/plan, and three seconds without a new sequence. Keep the error state when displaying old values.
- The curve retains valid new samples observed in the last 60 seconds, using browser observation time; show breaks for disconnection or stale data.
- Gear prefers returned enum text; the fallback P/R/N/D mapping matches only the bundled DBC.
- Refreshing restarts accumulated history. Full records, cursor catch-up, SSE reconnection, and long-term storage are extensions.
Finish and Check
Section titled “Finish and Check”Delete only plans this task created, stop only Web it started, close only its channels, and release the team hardware lock. Leave a reused shared daemon running. Delete a plan with DELETE /api/v1/signals/plans/{plan_id}.
Hardware-free page checks: run node test-dashboard.cjs in this directory. It validates page state using simulated API responses before bench connection.
Continue Developing the Application
Section titled “Continue Developing the Application”Extend these page sources with message operations, experiment records, and business pages, then deliver a desktop package or cloud application following the article.
Download companion examples (ZIP) · Return to the series contents