diff options
Diffstat (limited to 'web-timeplot/README.md')
| -rw-r--r-- | web-timeplot/README.md | 83 |
1 files changed, 56 insertions, 27 deletions
diff --git a/web-timeplot/README.md b/web-timeplot/README.md index 867ae7a..491753a 100644 --- a/web-timeplot/README.md +++ b/web-timeplot/README.md @@ -1,49 +1,78 @@ -# Web TimePlot - PixiJS Implementation +# TimePlot -A web-based waterfall display using PixiJS with WebGPU/WebGL support. +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. -## Features +## What it does -- **Dual Renderer Support**: Automatically uses WebGPU if available, falls back to WebGL -- **Real-time Performance Metrics**: FPS, frame timing, vertex counts -- **Interactive Controls**: Keyboard shortcuts and UI controls -- **Data Export**: Export performance metrics to CSV +- 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 +- Toggleable side panels for status, source config, app config, and help -## Getting Started +## Getting started ```bash -# Install dependencies npm install - -# Start development server npm run dev +``` -# Build for production -npm run build +Production build: -# Preview production build +```bash +npm run build npm run preview ``` ## Controls -- **G** - Toggle grid display -- **M** - Toggle metrics display -- **E** - Export metrics to CSV +- `Space` — pause/resume +- `[` — slow down playback +- `]` — speed up playback +- `G` — toggle grid +- Hover plot — inspect nearest sample -## Architecture +## Project structure -``` +```text src/ -├── main.js - Application entry point and orchestration -├── waterfall.js - Waterfall graph visualization component -└── metrics.js - Performance metrics collection and analysis +├── 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 +│ ├── source-registry.js # source lifecycle + routing +│ └── synthetic-wave-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 ``` -## Performance Comparison +## 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 -This implementation can be directly compared with: -- Rust/wgpu version (`../src/`) -- C++ version (`../cpp-timeplot/`) +## Next good additions -All three implementations track the same metrics for fair comparison. +- real external data sources (WebSocket, REST replay, files) +- richer panel layout system with docking/persistence +- plot annotations and multiple stacked plots +- configurable schemas for incoming data types +- persistent user settings |
