VS Code Remote Development Architecture¶
Specification¶
The full specification below is extracted from Chapter 15: Software Setup and the Developer Environment on the Raspberry Pi 5.
Type: interactive-diagram
**sim-id:** vscode-remote-dev-architecture<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) which parts of a remote-development workflow run on the local laptop and which parts run on the Raspberry Pi 5.
Canvas: 700x420px, responsive — two labeled zones ("Your Laptop" and "Raspberry Pi 5") recomputed as fractions of `width`, stacked vertically below 560px wide instead of side by side.
Layout: left zone "Your Laptop" contains a box labeled "VS Code Window (editor UI, keyboard, screen)"; right zone "Raspberry Pi 5" contains three boxes labeled "Your Python Files," "Python Interpreter," and "GPIO / Camera / AI HAT+ Hardware." A dashed line labeled "SSH Connection" links the laptop zone to the Pi zone.
Interaction: clicking any box highlights it and opens an infobox stating in one sentence whether that component runs locally or remotely and why (for example, clicking "Python Interpreter" shows "Runs on the Pi — so your code can directly reach hardware like the camera and GPIO header without any extra network step"). A toggle `createButton()` labeled "Where does typing happen?" animates a small dot traveling from the laptop's VS Code box, across the dashed SSH line, into the Pi's file box, to visualize that every keystroke is relayed over the network connection rather than staying local.
Implementation: p5.js. Store the six components (one laptop box, three Pi boxes, the SSH line, the animated dot) with fixed relative positions computed from zone bounding boxes each `windowResized()` call. Hit-testing via rectangular bounds. Animate the dot along a simple linear or bezier path using an accumulating progress variable advanced each frame, resetting after reaching the destination.