1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
# TimePlot
TimePlot is now a clean restart: a small PixiJS time-series sandbox built around a simple state core, a pluggable data source layer, and toggleable UI panels.
## What it does
- Real-time scrolling plot with PixiJS
- Pause/resume plot time
- Adjustable playback speed
- Current real-time and plot-time labels
- Hover tooltip for data points
- Modular synthetic data input system
- CSV replay sources
- WebSocket live sources
- Persisted workspace settings
- Toggleable side panels for status, source config, app config, and help
## Getting started
```bash
bun install
bun run dev
```
Production build:
```bash
bun run build
bun run preview
```
Demo WebSocket source:
```bash
bun run ws:demo
```
## Controls
- `Space` — pause/resume
- `[` — slow down playback
- `]` — speed up playback
- `G` — toggle grid
- Hover plot — inspect nearest sample
## Demo data
Sample CSV replay files are included in [public/demo-data](public/demo-data):
- [public/demo-data/telemetry-sweep.csv](public/demo-data/telemetry-sweep.csv)
- [public/demo-data/chirp-ramp.csv](public/demo-data/chirp-ramp.csv)
- [public/demo-data/step-bursts.csv](public/demo-data/step-bursts.csv)
Use the `CSV replay` source type in the sidebar and upload one of those files.
## WebSocket source
TimePlot includes a local demo WebSocket server in [scripts/demo-websocket-server.mjs](scripts/demo-websocket-server.mjs).
Start it with:
```bash
bun run ws:demo
```
Then set a signal source to `WebSocket` and use `ws://localhost:8080`.
Optional environment variables:
```bash
PORT=8090 TIMEPLOT_PROFILE=chirp TIMEPLOT_INTERVAL_MS=50 bun run ws:demo
```
Supported demo profiles:
- `telemetry`
- `chirp`
- `steps`
- `burst`
Protocol details and accepted message formats are documented in [WEBSOCKET_FORMAT.md](WEBSOCKET_FORMAT.md).
## Persistence
TimePlot persists core workspace settings in `localStorage`, including:
- plot display settings
- playback speed
- panel visibility
- graph routing and transforms
- source configuration such as presets and WebSocket URLs
CSV replay files themselves are not persisted in storage. After a reload, TimePlot remembers which CSV file was selected but asks you to reload the file data.
## Project structure
```text
src/
├── app/
│ └── create-app.js # application composition root
├── core/
│ ├── event-bus.js # lightweight pub/sub
│ ├── store.js # centralized app state
│ └── time-controller.js # real time + plot time transport
├── data/
│ ├── base-source.js # source interface
│ ├── csv-replay-source.js
│ ├── parse-replay-csv.js
│ ├── source-registry.js # source lifecycle + routing
│ ├── synthetic-wave-source.js
│ └── websocket-source.js
├── plot/
│ ├── plot-buffer.js # bounded in-memory sample history
│ └── timeplot-view.js # Pixi rendering + hover picking
├── ui/
│ └── panel-manager.js # DOM shell, controls, panels, tooltip
├── bootstrap.js # startup entry
├── main.js # compatibility shim to bootstrap
├── styles.css # global UI styling
└── utils-format.js # display formatting helpers
public/
└── demo-data/ # sample CSV replay fixtures
scripts/
└── demo-websocket-server.mjs
```
## Design direction
This restart intentionally optimizes for a strong foundation instead of feature sprawl:
- transport and time are first-class systems
- data generation is isolated from rendering
- the plot owns visualization only
- DOM panels handle controls and diagnostics
- app composition happens in one predictable bootstrap path
- synthetic, file replay, and WebSocket sources share one source abstraction
- core workspace configuration survives reloads
## Next good additions
- richer external data sources (REST replay, binary streams, custom adapters)
- richer panel layout system with docking/persistence
- plot annotations and multiple stacked plots
- configurable schemas for incoming data types
- persistent user settings
|
