# beavoice2021/padt-eoir architecture

> Architecture diagram of the GitHub repository beavoice2021/padt-eoir, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/beavoice2021/padt-eoir
- Repository: https://github.com/beavoice2021/padt-eoir

## Overview

#### Purpose and deployment shape
EOIR WSP Commander is a full-stack operator console for an EOIR camera. A Node/TypeScript backend bridges browser control and telemetry to physical camera interfaces; a Vue/Vuetify frontend provides the commander UI. Production serves the built frontend from the backend, while Vite supports proxied frontend development.
Paths: `backend/src/server.ts`, `frontend/src/main.ts`, `frontend/vite.config.ts`.

#### Backend bootstrap and public boundary
The HTTP server initializes Express and Socket.io, hosts the browser application, and exposes REST plus realtime communication on one configurable port. This is the browser/backend trust boundary; hardware connections remain backend-only.
Paths: `backend/src/server.ts`, `backend/src/routes.ts`, `backend/src/realtime.ts`.

#### Camera protocol and hardware adapter
The camera module is the core EOIR integration boundary. It manages TCP control-port communication, constructs/parses protocol packets, maintains heartbeat behavior, receives camera telemetry, and coordinates video ingestion/transcoding. Hardware addressing, ports, heartbeat, and FFmpeg location are environment-driven.
Path: `backend/src/camera.ts`.

#### Control-command flow
Operator actions in the Vue UI call the REST client, which sends commands to backend `/control` routes. Routes translate those requests into camera-protocol operations through the hardware adapter. UI controls cover camera-oriented functions such as LOS, pan/tilt, zoom, sensors, AGC, cooler, effects, modes, and port toggles.
Paths: `frontend/src/api.ts`, `backend/src/routes.ts`, `backend/src/camera.ts`.

#### Telemetry and realtime flow
Camera status/telemetry enters through the backend camera integration, then Socket.io broadcasts `status` events to connected browsers. The frontend socket client subscribes and makes that live state available to display panels rather than relying solely on REST polling.
Paths: `backend/src/camera.ts`, `backend/src/realtime.ts`, `frontend/src/socket.ts`.

#### Video pipeline
The backend receives the EOIR UDP video stream locally and uses FFmpeg to produce an HLS/browser-consumable stream. The frontend video panel renders that resulting stream; raw UDP and FFmpeg process management do not cross into the browser.
Paths: `backend/src/camera.ts`, `frontend/src/components/VideoPanel.vue`, `backend/src/server.ts`.

#### Frontend composition
`App.vue` assembles a command-console shell from focused panels. `CommanderShell` and header establish the layout, while central/control/status/video panels consume REST actions and live status to present and operate the camera system.
Paths: `frontend/src/App.vue`, `frontend/src/components/CommanderShell.vue`, `frontend/src/components/ControlSection.vue`.

#### Material runtime dependencies
Runtime components are Node.js with Express and Socket.io, a Vue 3/TypeScript browser client, TCP access to the EOIR control endpoint, UDP access for video, and an installed/configurable FFmpeg executable. External dependencies are the EOIR hardware device and its network video/control services.
Paths: `backend/package.json`, `frontend/package.json`, `backend/src/camera.ts`.

Main entry points: [`backend/src/camera.ts`](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/camera.ts) (Camera adapter), [`backend/src/server.ts`](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/server.ts) (HTTP server), [`frontend/src/components/CommanderShell.vue`](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/CommanderShell.vue) (Commander shell), [`frontend/src/App.vue`](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/App.vue) (Console composition)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser Console"]
  node_vue_entry["Vue entry<br/>Vue bootstrap<br/>[main.ts]"]
  node_app["Console composition<br/>Vue app<br/>[App.vue]"]
  node_shell["Commander shell<br/>layout<br/>[CommanderShell.vue]"]
  node_controls["Control section<br/>operator controls<br/>[ControlSection.vue]"]
  node_rest_client["REST client<br/>API client<br/>[api.ts]"]
  node_socket_client["Status subscriber<br/>Socket.io client<br/>[socket.ts]"]
  node_video_panel["Video panel<br/>HLS viewer<br/>[VideoPanel.vue]"]
  node_vite["Vite development proxy<br/>dev server<br/>[vite.config.ts]"]
end

subgraph group_backend["Node Backend"]
  node_server{{"HTTP server<br/>Express and Socket.io host<br/>[server.ts]"}}
  node_routes["Control routes<br/>REST routes<br/>[routes.ts]"]
  node_realtime["Realtime broadcaster<br/>Socket.io events<br/>[realtime.ts]"]
  node_camera{{"Camera adapter<br/>[camera.ts]"}}
  node_hls_output["HLS stream<br/>browser video output<br/>[server.ts]"]
end

subgraph group_external["Camera Environment"]
  node_eoip_control(("EOIR control endpoint<br/>hardware TCP service"))
  node_eoip_video(("EOIR video stream<br/>hardware UDP service"))
  node_ffmpeg{{"FFmpeg<br/>media transcoder"}}
end

node_vue_entry -->|"mounts"| node_app
node_app -->|"composes"| node_shell
node_shell -->|"hosts"| node_controls
node_shell -->|"hosts"| node_video_panel
node_controls -->|"issues commands"| node_rest_client
node_socket_client -->|"live status"| node_app
node_rest_client -->|"REST /control"| node_routes
node_vite -.->|"proxies development requests"| node_server
node_server -->|"mounts"| node_routes
node_server -->|"hosts Socket.io"| node_realtime
node_server -->|"serves"| node_hls_output
node_routes -->|"protocol operations"| node_camera
node_camera -->|"telemetry status"| node_realtime
node_realtime -->|"status events"| node_socket_client
node_camera -->|"TCP control and telemetry"| node_eoip_control
node_eoip_video -->|"UDP video"| node_camera
node_camera -->|"manages transcoding"| node_ffmpeg
node_ffmpeg -->|"produces HLS"| node_hls_output
node_hls_output -->|"renders"| node_video_panel

click node_vue_entry "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/main.ts"
click node_app "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/App.vue"
click node_shell "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/CommanderShell.vue"
click node_controls "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/ControlSection.vue"
click node_rest_client "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/api.ts"
click node_socket_client "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/socket.ts"
click node_video_panel "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/VideoPanel.vue"
click node_vite "https://github.com/beavoice2021/padt-eoir/blob/main/frontend/vite.config.ts"
click node_server "https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/server.ts"
click node_routes "https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/routes.ts"
click node_realtime "https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/realtime.ts"
click node_camera "https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/camera.ts"
click node_hls_output "https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/server.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vue_entry,node_app,node_shell,node_controls,node_rest_client,node_socket_client,node_video_panel,node_vite toneBlue
class node_server,node_routes,node_realtime,node_camera,node_hls_output toneAmber
class node_eoip_control,node_eoip_video,node_ffmpeg toneMint
```

## Components

### Browser Console

- [Vue entry](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/main.ts): Vue bootstrap · `frontend/src/main.ts`
- [Console composition](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/App.vue): Vue app · Assembles the commander interface. · `frontend/src/App.vue`
- [Commander shell](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/CommanderShell.vue): layout · `frontend/src/components/CommanderShell.vue`
- [Control section](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/ControlSection.vue): operator controls · `frontend/src/components/ControlSection.vue`
- [REST client](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/api.ts): API client · `frontend/src/api.ts`
- [Status subscriber](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/socket.ts): Socket.io client · `frontend/src/socket.ts`
- [Video panel](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/src/components/VideoPanel.vue): HLS viewer · `frontend/src/components/VideoPanel.vue`
- [Vite development proxy](https://github.com/beavoice2021/padt-eoir/blob/main/frontend/vite.config.ts): dev server · `frontend/vite.config.ts`

### Node Backend

- [HTTP server](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/server.ts): Express and Socket.io host · Serves the production frontend and browser API boundary. · `backend/src/server.ts`
- [Control routes](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/routes.ts): REST routes · Handles /control commands. · `backend/src/routes.ts`
- [Realtime broadcaster](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/realtime.ts): Socket.io events · Broadcasts status to browsers. · `backend/src/realtime.ts`
- [Camera adapter](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/camera.ts): EOIR protocol and video integration · Owns control TCP, telemetry, heartbeat, UDP ingestion, and FFmpeg orchestration. · `backend/src/camera.ts`
- [HLS stream](https://github.com/beavoice2021/padt-eoir/blob/main/backend/src/server.ts): browser video output · `backend/src/server.ts`

### Camera Environment

- **EOIR control endpoint**: hardware TCP service
- **EOIR video stream**: hardware UDP service
- **FFmpeg**: media transcoder · Converts UDP camera video into browser-consumable HLS.

## Connections

- Vue entry → Console composition: mounts
- Console composition → Commander shell: composes
- Commander shell → Control section: hosts
- Commander shell → Video panel: hosts
- Control section → REST client: issues commands
- Status subscriber → Console composition: live status
- REST client → Control routes: REST /control
- Vite development proxy → HTTP server: proxies development requests
- HTTP server → Control routes: mounts
- HTTP server → Realtime broadcaster: hosts Socket.io
- HTTP server → HLS stream: serves
- Control routes → Camera adapter: protocol operations
- Camera adapter → Realtime broadcaster: telemetry status
- Realtime broadcaster → Status subscriber: status events
- Camera adapter → EOIR control endpoint: TCP control and telemetry
- EOIR video stream → Camera adapter: UDP video
- Camera adapter → FFmpeg: manages transcoding
- FFmpeg → HLS stream: produces HLS
- HLS stream → Video panel: renders