All projects

Navigation

Compass

A dedicated digital compass with an instrument-style dial, created to make heading information immediate and easy to read.

Open live project Download all code

Current build

360°Live heading

What it does

Built for a clear view

The Compass project gives heading data room to breathe. Its familiar dial format reduces interpretation time and works as a standalone instrument beside the wider dashboards.

Key features

01

Animated compass dial

02

Digital heading readout

03

Full-screen friendly layout

04

Standalone, browser-based display

Under the panel

How the system works

A practical map from the onboard sensor or controller to the value shown in the browser.

  1. 01

    The ESP reads three-axis magnetometer data through FastIMU and applies the stored calibration and heading offset.

  2. 02

    The corrected heading is normalised into the 0–359.9° range and sent to the HAL WebSocket server.

  3. 03

    The compass page listens only for compassDir messages.

  4. 04

    The browser chooses the shortest rotation between headings so the dial moves smoothly across north rather than spinning backwards.

Wire reference

Data format

Transport
ESP WebSocket → HAL server → secure browser WebSocket
Envelope
JSON chat message with a single heading value

Example payload

{
  "type": "chat",
  "text": "hal: compassDir 123.4"
}

Field reference

compassDir

Corrected magnetic heading in decimal degrees

precision

One decimal place from 0.0 to 359.9

update

Each valid magnetometer calculation produces a new message

Source code

Take it apart. Make it yours.

The ZIP contains the web project and its matching ESP/Arduino firmware. Passwords, private keys, tokens, logs and live location data have been removed.

Firmware: ESP compass transmitter firmware

  • Compass dial HTML
  • Arduino compass sketch
  • HAL WebSocket server
  • Node server package files
Download compass-source.zip