How dhanush777x/protoviz-3d works
Protoviz 3D is a browser-based teaching tool for exploring UART and I²C communication. Users select a protocol, configure a transmission, then inspect its evolving bit-level behavior in a 3D scene and waveform; tutorials and searchable deep dives provide guided learning. The README documents the protocol capabilities, while sampled sources confirm page orchestration, protocol-specific controls and state stores, and deep-dive UI. Scene-internal data wiring is not established by the excerpts, so those links are omitted.
Main entry points: page.tsx Page orchestrator · ControlPanel.tsx Protocol selector · DeepDive.tsx Searchable deep dive · FloatingNavBar.tsx Floating navigation
Components 26
Application shell
- Page orchestrator
app/page.tsx - Protocol scene selector
components/protocol-visualizer/ProtocolScene.tsx - Protocol selector
components/protocol-visualizer/ControlPanel.tsx
Shared learning UI
- Intro tutorial
components/ProtovizIntro.tsx - Floating navigation
components/FloatingNavBar.tsx - Shared UI state
components/protocol-visualizer/CommonStore.tsx
UART simulation
- UART controls
components/protocol-visualizer/protocols/uart/UARTControlPanel.tsx - UART transmission logic
components/protocol-visualizer/protocols/uart/useUARTLogic.tsx - UART 3D scene
components/protocol-visualizer/protocols/uart/UARTScene.tsx - UART wiring model
components/protocol-visualizer/protocols/uart/UARTBoard.tsx - UART wires
components/protocol-visualizer/protocols/uart/UARTWire.tsx - UART waveform
components/protocol-visualizer/protocols/uart/UARTWaveform.tsx - UART bit particles
components/protocol-visualizer/protocols/uart/UARTParticles.tsx - UART guided tutorial
components/protocol-visualizer/protocols/uart/UARTBasics.tsx
I²C simulation
- I²C controls
components/protocol-visualizer/protocols/i2c/I2CControlPanel.tsx - I²C bus logic
components/protocol-visualizer/protocols/i2c/useI2CLogic.tsx - I²C 3D scene
components/protocol-visualizer/protocols/i2c/I2CScene.tsx - I²C bus model
components/protocol-visualizer/protocols/i2c/I2CBoard.tsx - I²C bus wires
components/protocol-visualizer/protocols/i2c/I2CWire.tsx - I²C waveform
components/protocol-visualizer/protocols/i2c/I2CWaveform.tsx - I²C bit particles
components/protocol-visualizer/protocols/i2c/I2CParticles.tsx - I²C guided tutorial
components/protocol-visualizer/protocols/i2c/I2CBasics.tsx
Protocol learning content
- Searchable deep dive
components/protocol-visualizer/DeepDive.tsx - UART deep-dive content
public/deep-dive/uart.json - I²C deep-dive content
public/deep-dive/i2c.json
Other components
- Learner
Connections 13
- Learner → Page orchestrator: opens visualizer
- Page orchestrator → Intro tutorial: shows intro
- Page orchestrator → Protocol selector: renders controls
- Page orchestrator → Protocol scene selector: renders scene
- Page orchestrator → Floating navigation: renders navigation
- Protocol selector → UART controls: selects UART
- Protocol selector → I²C controls: selects I²C
- UART controls → UART transmission logic: updates state
- I²C controls → I²C bus logic: updates state
- Floating navigation → Shared UI state: sets overlay state
- Searchable deep dive → UART deep-dive content: loads content
- Searchable deep dive → I²C deep-dive content: loads content
- Page orchestrator → Searchable deep dive: presents deep dive