# simonbogh/esp32-ibeacon-indoor-positioning architecture

> Architecture diagram of the GitHub repository simonbogh/esp32-ibeacon-indoor-positioning, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/simonbogh/esp32-ibeacon-indoor-positioning
- Repository: https://github.com/simonbogh/esp32-ibeacon-indoor-positioning

## Overview

This is an ESP32 iBeacon indoor-positioning demo. The workflow is: stations scan beacon tags and publish RSSI observations over MQTT; the dashboard subscribes, aggregates observations by beacon and station, estimates positions from three station measurements, and displays editable station anchors and beacon pins on a floorplan. The README documents the hardware-to-broker flow; sampled dashboard source shows the subscription, callback, rendering, and trilateration flow. The broker is external, and unsampled station internals are represented only at the documented capability level.

Main entry points: [`dashboard/src/Floorplan/Floorplan.js`](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Floorplan/Floorplan.js) (Floorplan view), [`dashboard/src/MessageStack/MessageStack.js`](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/MessageStack/MessageStack.js) (MQTT receiver), [`dashboard/src/App.js`](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/App.js) (Dashboard state), [`dashboard/src/Satellite/Satellite.js`](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Satellite/Satellite.js) (Station marker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_field["Beacon sensing"]
  node_tags(("iBeacon tags"))
  node_stations["ESP32 stations<br/>[ESP32_station.ino]"]
end

subgraph group_transport["MQTT transport"]
  node_broker(("Mosquitto broker"))
  node_mqttconfig["MQTT settings<br/>[config.js]"]
  node_messagestack["MQTT receiver<br/>[MessageStack.js]"]
end

subgraph group_dashboard["Dashboard workflow"]
  node_app["Dashboard state<br/>[App.js]"]
  node_positioner["Trilateration"]
end

subgraph group_presentation["Map and controls"]
  node_floorplan["Floorplan view<br/>[Floorplan.js]"]
  node_beaconpin["Beacon pin<br/>[BeaconPin.js]"]
  node_satellite["Station marker<br/>[Satellite.js]"]
  node_settings["Beacon sidebar<br/>[Settings.js]"]
  node_streetview["Beacon glyph<br/>[StreetView.js]"]
  node_bullseye["Station glyph<br/>[BullsEye.js]"]
  node_localstorage[("Browser storage")]
end

node_tags -->|"emit BLE signals"| node_stations
node_stations -->|"publish observations"| node_broker
node_broker -->|"deliver MQTT messages"| node_messagestack
node_messagestack -->|"reads settings"| node_mqttconfig
node_messagestack -->|"subscribes and publishes"| node_broker
node_messagestack -->|"reports observations"| node_app
node_app -->|"starts receiver"| node_messagestack
node_app -->|"renders map"| node_floorplan
node_app -->|"renders sidebar"| node_settings
node_floorplan -->|"calculates positions"| node_positioner
node_floorplan -->|"renders beacons"| node_beaconpin
node_floorplan -->|"renders stations"| node_satellite
node_satellite -->|"returns moved position"| node_floorplan
node_floorplan -->|"persists station positions"| node_localstorage
node_beaconpin -->|"renders glyph"| node_streetview
node_satellite -->|"renders glyph"| node_bullseye

click node_stations "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/ESP32_station/ESP32_station.ino"
click node_mqttconfig "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/MessageStack/config.js"
click node_messagestack "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/MessageStack/MessageStack.js"
click node_app "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/App.js"
click node_positioner "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Positioner/PositionCalculator.js"
click node_floorplan "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Floorplan/Floorplan.js"
click node_beaconpin "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Floorplan/BeaconPin.js"
click node_satellite "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Satellite/Satellite.js"
click node_settings "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Settings/Settings.js"
click node_streetview "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/SVGIconComponents/StreetView.js"
click node_bullseye "https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/SVGIconComponents/BullsEye.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_tags,node_stations toneBlue
class node_broker,node_mqttconfig,node_messagestack toneAmber
class node_app,node_positioner toneMint
class node_floorplan,node_beaconpin,node_satellite,node_settings,node_streetview,node_bullseye,node_localstorage toneRose
```

## Components

### Beacon sensing

- **iBeacon tags**
- [ESP32 stations](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/ESP32_station/ESP32_station.ino): `ESP32_station/ESP32_station.ino`

### MQTT transport

- **Mosquitto broker**
- [MQTT settings](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/MessageStack/config.js): `dashboard/src/MessageStack/config.js`
- [MQTT receiver](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/MessageStack/MessageStack.js): `dashboard/src/MessageStack/MessageStack.js`

### Dashboard workflow

- [Dashboard state](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/App.js): `dashboard/src/App.js`
- [Trilateration](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Positioner/PositionCalculator.js): `dashboard/src/Positioner/PositionCalculator.js`

### Map and controls

- [Floorplan view](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Floorplan/Floorplan.js): `dashboard/src/Floorplan/Floorplan.js`
- [Beacon pin](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Floorplan/BeaconPin.js): `dashboard/src/Floorplan/BeaconPin.js`
- [Station marker](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Satellite/Satellite.js): `dashboard/src/Satellite/Satellite.js`
- [Beacon sidebar](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/Settings/Settings.js): `dashboard/src/Settings/Settings.js`
- [Beacon glyph](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/SVGIconComponents/StreetView.js): `dashboard/src/SVGIconComponents/StreetView.js`
- [Station glyph](https://github.com/simonbogh/esp32-ibeacon-indoor-positioning/blob/master/dashboard/src/SVGIconComponents/BullsEye.js): `dashboard/src/SVGIconComponents/BullsEye.js`
- **Browser storage**

## Connections

- iBeacon tags → ESP32 stations: emit BLE signals (evidence: `README.md`)
- ESP32 stations → Mosquitto broker: publish observations (evidence: `README.md`)
- Mosquitto broker → MQTT receiver: deliver MQTT messages (evidence: `README.md`)
- MQTT receiver → MQTT settings: reads settings (evidence: `dashboard/src/MessageStack/MessageStack.js`)
- MQTT receiver → Mosquitto broker: subscribes and publishes (evidence: `dashboard/src/MessageStack/MessageStack.js`)
- MQTT receiver → Dashboard state: reports observations (evidence: `dashboard/src/App.js`)
- Dashboard state → MQTT receiver: starts receiver (evidence: `dashboard/src/App.js`)
- Dashboard state → Floorplan view: renders map (evidence: `dashboard/src/App.js`)
- Dashboard state → Beacon sidebar: renders sidebar (evidence: `dashboard/src/App.js`)
- Floorplan view → Trilateration: calculates positions (evidence: `dashboard/src/Floorplan/Floorplan.js`)
- Floorplan view → Beacon pin: renders beacons (evidence: `dashboard/src/Floorplan/Floorplan.js`)
- Floorplan view → Station marker: renders stations (evidence: `dashboard/src/Floorplan/Floorplan.js`)
- Station marker → Floorplan view: returns moved position (evidence: `dashboard/src/Satellite/Satellite.js`)
- Floorplan view → Browser storage: persists station positions (evidence: `dashboard/src/Floorplan/Floorplan.js`)
- Beacon pin → Beacon glyph: renders glyph (evidence: `dashboard/src/Floorplan/BeaconPin.js`)
- Station marker → Station glyph: renders glyph (evidence: `dashboard/src/Satellite/Satellite.js`)