building-collatr

A dashboard that runs on the device

CollatrEdge has a built-in web UI. No cloud required. No external dependencies. It runs on the same device that collects the data.

The stack: Elysia for HTTP, server-sent events for real-time updates, ECharts for trend visualisation. All embedded in the compiled binary. No CDN calls. No npm install on the factory floor.

The dashboard shows live metrics as they flow through the pipeline. Trend charts load historical data from the local store and append new readings in real time. CSV export includes both UTC and local timezone columns, because the person reading the spreadsheet thinks in local time.

There is an OPC-UA certificate helper page. When the agent connects to a new OPC-UA server, it needs to trust the server’s certificate. The web UI shows the certificate details and lets the operator approve it. No command line required.

Six spikes validated the stack before I wrote a line of production code. Elysia with JSX templates. SSE streaming. HTML fragment patching. Chart rendering. Static asset embedding. Full integration.

The web UI is the product for most standalone and local network deployments. Built first-class, tested first-class.