# agirsailing/agir_boat_monitoring architecture

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

- Interactive diagram: https://gitdiagram.com/agirsailing/agir_boat_monitoring
- Repository: https://github.com/agirsailing/agir_boat_monitoring

## Overview

Ågir is a static boat-operations dashboard: an operator connects from the browser to an MQTT broker, views live telemetry and position, and can request recording start or stop when fresh boat state permits. The browser handles validation, freshness, request correlation, and display; the ROS gateway on the Raspberry handles boat-side commands and recording. Demo mode simulates instruments without broker access and disables recording commands. The README documents the Pages, broker, and ROS topology; implementation links below follow sampled source, so unsampled UI markup and styling details are not expanded.

Main entry points: [`index.html`](https://github.com/agirsailing/agir_boat_monitoring/blob/main/index.html) (Dashboard page), [`app.js`](https://github.com/agirsailing/agir_boat_monitoring/blob/main/app.js) (UI controller), [`mqtt-connection.js`](https://github.com/agirsailing/agir_boat_monitoring/blob/main/mqtt-connection.js) (Broker connection), [`state.js`](https://github.com/agirsailing/agir_boat_monitoring/blob/main/state.js) (Dashboard state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Operator interface"]
  node_html["Dashboard page<br/>[index.html]"]
  node_styles["Dashboard styles<br/>[styles.css]"]
  node_loginstyles["Login styles<br/>[login.css]"]
end

subgraph group_runtime["Browser runtime"]
  node_app["UI controller<br/>[app.js]"]
  node_state["Dashboard state<br/>[state.js]"]
  node_config["Topics and settings<br/>[config.js]"]
  node_demo["Demo instruments<br/>[app.js]"]
end

subgraph group_messaging["MQTT messaging"]
  node_connection["Broker connection<br/>[mqtt-connection.js]"]
end

subgraph group_environment["Boat and hosting"]
  node_broker{{"MQTT broker"}}
  node_boat{{"Raspberry ROS"}}
  node_pages{{"GitHub Pages"}}
  node_mqttjs{{"MQTT.js CDN"}}
end

node_operator(("Operator"))

node_operator -->|"uses"| node_html
node_pages -->|"serves files"| node_html
node_html -->|"loads"| node_styles
node_html -->|"loads"| node_loginstyles
node_html -->|"runs"| node_app
node_app -->|"reads and updates"| node_state
node_app -->|"connects and publishes"| node_connection
node_app -->|"starts demo"| node_demo
node_demo -->|"ingests samples"| node_state
node_app -->|"renders values"| node_state
node_connection -->|"validates broker URL"| node_state
node_connection -->|"reads topics"| node_config
node_state -->|"reads topics"| node_config
node_connection -->|"connects and exchanges MQTT"| node_broker
node_broker -->|"delivers messages"| node_connection
node_boat -->|"publishes boat data"| node_broker
node_broker -->|"forwards commands"| node_boat
node_html -.->|"loads library"| node_mqttjs

click node_html "https://github.com/agirsailing/agir_boat_monitoring/blob/main/index.html"
click node_styles "https://github.com/agirsailing/agir_boat_monitoring/blob/main/styles.css"
click node_loginstyles "https://github.com/agirsailing/agir_boat_monitoring/blob/main/login.css"
click node_app "https://github.com/agirsailing/agir_boat_monitoring/blob/main/app.js"
click node_state "https://github.com/agirsailing/agir_boat_monitoring/blob/main/state.js"
click node_config "https://github.com/agirsailing/agir_boat_monitoring/blob/main/config.js"
click node_demo "https://github.com/agirsailing/agir_boat_monitoring/blob/main/app.js"
click node_connection "https://github.com/agirsailing/agir_boat_monitoring/blob/main/mqtt-connection.js"

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_html,node_styles,node_loginstyles toneBlue
class node_app,node_state,node_config,node_demo toneAmber
class node_connection toneMint
class node_broker,node_boat,node_pages,node_mqttjs toneRose
class node_operator toneIndigo
```

## Components

### Operator interface

- [Dashboard page](https://github.com/agirsailing/agir_boat_monitoring/blob/main/index.html): `index.html`
- [Dashboard styles](https://github.com/agirsailing/agir_boat_monitoring/blob/main/styles.css): `styles.css`
- [Login styles](https://github.com/agirsailing/agir_boat_monitoring/blob/main/login.css): `login.css`

### Browser runtime

- [UI controller](https://github.com/agirsailing/agir_boat_monitoring/blob/main/app.js): `app.js`
- [Dashboard state](https://github.com/agirsailing/agir_boat_monitoring/blob/main/state.js): `state.js`
- [Topics and settings](https://github.com/agirsailing/agir_boat_monitoring/blob/main/config.js): `config.js`
- [Demo instruments](https://github.com/agirsailing/agir_boat_monitoring/blob/main/app.js): `app.js`

### MQTT messaging

- [Broker connection](https://github.com/agirsailing/agir_boat_monitoring/blob/main/mqtt-connection.js): `mqtt-connection.js`

### Boat and hosting

- **MQTT broker**
- **Raspberry ROS**
- **GitHub Pages**
- **MQTT.js CDN**

### Other components

- **Operator**

## Connections

- Operator → Dashboard page: uses
- GitHub Pages → Dashboard page: serves files
- Dashboard page → Dashboard styles: loads
- Dashboard page → Login styles: loads
- Dashboard page → UI controller: runs
- UI controller → Dashboard state: reads and updates
- UI controller → Broker connection: connects and publishes
- UI controller → Demo instruments: starts demo
- Demo instruments → Dashboard state: ingests samples
- UI controller → Dashboard state: renders values
- Broker connection → Dashboard state: validates broker URL
- Broker connection → Topics and settings: reads topics
- Dashboard state → Topics and settings: reads topics
- Broker connection → MQTT broker: connects and exchanges MQTT
- MQTT broker → Broker connection: delivers messages
- Raspberry ROS → MQTT broker: publishes boat data
- MQTT broker → Raspberry ROS: forwards commands
- Dashboard page → MQTT.js CDN: loads library