BLE GATT Structure Explorer¶
Specification¶
The full specification below is extracted from Chapter 10: Wireless Communication with the Pico W.
Type: graph-data-model
**sim-id:** ble-gatt-structure-explorer<br/>
**Library:** vis-network<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how a BLE peripheral organizes the data it exposes into services and characteristics, and how a central device connects to access them.
Canvas: 700x480px vis-network graph, responsive — call `network.fit()` inside a `window.addEventListener('resize', ...)` handler so the graph re-centers and rescales to its container.
Layout: a hierarchical vis-network graph with a "BLE Central (phone)" node at the top, connected by a labeled edge "connects to" down to a "BLE Peripheral (robot)" node. The peripheral node branches to two service nodes, "Motor Control Service" and "Battery Status Service," each colored circuit green `#2E7D32`. Each service branches further to its own characteristic nodes, colored copper gold `#D4AF37`: Motor Control Service branches to "Left Motor Speed" and "Right Motor Speed"; Battery Status Service branches to "Battery Percentage." The Central and Peripheral nodes are colored raspberry `#C2185B` and drawn larger than the service/characteristic nodes.
Interaction: clicking any node opens an infobox below the graph with a one-sentence definition matching the chapter's prose (e.g., clicking "Left Motor Speed" explains that a characteristic is an individual readable/writable value). Hovering any edge shows a vis-network tooltip describing the relationship ("connects to," "offers," "contains"). A small "Simulate Pairing" button (native HTML button, styled to match the book's theme) animates a brief highlight pulse traveling from Central to Peripheral along the "connects to" edge, representing the one-time pairing process described in the chapter text, then settles into a steady highlighted connection state.
Implementation: vis-network with a `hierarchical` layout option (direction top-down). Node and edge data defined as vis-network DataSet objects. Register a `click` event to populate the infobox from a lookup table keyed by node id. The pairing animation can be implemented by temporarily updating the edge's `width` and `color` properties on a `setTimeout` sequence, then reverting to a steady highlighted style.