Skip to content

Repository files navigation

Visual Protocol

Interactive automotive protocol learning platform. Learn car communication protocols through visual animations and interactive demos, following a recommended bottom-up learning path.

HTMLLicense

English · 中文

Supported Protocols

The protocols are ordered by stack layer, starting from the data link layer up to middleware:

OrderProtocolStandardLayerStatus
1CANISO 11898Data LinkAvailable
2EthernetIEEE 802.3Physical/NetworkAvailable
3DoIPISO 13400TransportAvailable
4UDSISO 14229ApplicationAvailable
5SOME/IPAUTOSARMiddlewareAvailable
6DDSOMG DDSMiddlewareAvailable

Additional protocol pages (LIN, MQTT, TCP, UDP) are also included.

Features

Each protocol learning page includes:

  • Core concepts — protocol fundamentals, architecture layers, relationships to other protocols
  • Packet analysis — frame/message format, field descriptions, interactive field cards
  • Interactive demos — controllable animations showing real-time protocol communication flows
  • Practical tools — message parsers, port mappings, code examples
  • Knowledge tests — instant quizzes to evaluate learning progress

Tech Stack

  • Pure HTML / CSS / JavaScript — zero external framework dependencies
  • Responsive design with dark mode support
  • Deployed as a static site on GitHub Pages
  • Accessible: ARIA labels, keyboard navigation

Quick Start

1. Clone

git clone https://github.com/turinglambdaai/visual-protocol.git
cd visual-protocol

2. Install & run

npm install
npm start # Start dev server with live reload

Or use Python's built-in HTTP server:

python -m http.server 8000 -d src

Build for Deployment

npm run build # Copies src/ to docs/ for GitHub Pages

Project Structure

src/
├── index.html # Landing page
├── assets/
│ ├── css/main.css # Global styles
│ └── js/main.js # Shared scripts
└── protocols/
├── can/index.html # CAN protocol
├── ethernet/index.html # Ethernet protocol
├── doip/index.html # DoIP protocol
├── uds/index.html # UDS protocol
├── someip/index.html # SOME/IP protocol
└── dds/index.html # DDS protocol

License

Licensed under the Apache License 2.0.

About

Interactive, visual learning platform for automotive communication protocols (CAN, Ethernet, DoIP, UDS, SOME/IP, DDS).

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages