- Updated references in AGENTS.md, README.md, and various component files (DevicesPage, GeneralPage, IECPage, MediaManager, SearchOverlay, StatusPage) to reflect the new config structure. - Adjusted settings handling in settings.ts to accommodate the new structure. - Modified initial config in config.json to match the updated schema.
89 lines
3.8 KiB
Markdown
89 lines
3.8 KiB
Markdown
|
|
# Meatloaf Manipulator
|
|
|
|
A Progressive Web App (PWA) for configuring and managing [Meatloaf](https://meatloaf.cc) devices — open-source Commodore 64/128 hardware that adds modern networking, storage, and peripheral support.
|
|
|
|
## Features
|
|
|
|
- **Status** — live system status, activity log, file info, loading progress, directory and disk map overlays; WebSocket connection status; reset device or host (sends command via WebSocket)
|
|
- **Devices** — browse and manage attached IEC devices; Rescan Bus sends `iec scan` via WebSocket
|
|
- **IEC** — configure the IEC serial bus (fastloaders, chainloaders, directory options)
|
|
- **Network** — manage WiFi networks (scan, connect, remove); clicking a known network reconnects and moves it to the top; all connect/scan actions send commands via WebSocket
|
|
- **Media Manager** — WebDAV file browser with per-row action menus, folder configuration (`.config` editor), media set detection with existence checks, and smart `base_url` mount logic
|
|
- **Reality Override** — full-screen WebSocket command display over a Three.js Digital Tokamak vortex; double-tap to toggle background; twinkling star field when hidden
|
|
- **Reality Override Admin** — command palette for Image/Audio/Video conversion commands plus freeform input; broadcasts to all connected clients via WebSocket
|
|
- **Apps** — built-in tools grouped by category:
|
|
- **Management**: Media Manager, Print Manager, Serial Console, Short Codes
|
|
- **Disk**: RAM/ROM Explorer, BAM Editor, Directory Editor, Sector Editor, Disk Visualizer, Dump/Write Disk Image
|
|
- **Cartridge**: PRG to CRT, Magic Desk Cart Builder, Easy Flash Cart Builder
|
|
- **Development**: Basic Editor, Assembler, Sprite Editor, Character Set Editor, PETSCII Editor
|
|
- **Display**: Idle Animation, Loading Animation, Reality Override, Override Admin
|
|
- **PWA** — installable on desktop and mobile; runs offline via service worker; fullscreen-capable with safe-area insets for notched phones
|
|
|
|
## Architecture Highlights
|
|
|
|
### Shared WebSocket
|
|
A single `WebSocket` connection to `ws://<device-hostname>/ws` is managed by `WsProvider` (`src/app/ws.tsx`) and shared app-wide via React Context. Any component can send commands or subscribe to incoming frames via `useWs()`. The connection auto-reconnects every 3 s on drop.
|
|
|
|
### Split Config Storage
|
|
Device settings are stored in two separate files on the device (LittleFS erase-block friendly, ≤ 4 096 bytes each):
|
|
|
|
| File | Contents |
|
|
|---|---|
|
|
| `/.sys/config.json` | General, host, hardware, WiFi, network, Bluetooth, modem, cassette, BOIP, IEC bus settings |
|
|
| `/.sys/devices.json` | IEC device list (`devices.iec`) |
|
|
|
|
`useSettings()` loads both files in parallel and merges them; saves split them back automatically. A bundled fallback (`src/imports/config.json`) is used as the initial UI state while the device is being contacted.
|
|
|
|
### WebDAV Layer
|
|
All file I/O goes through `src/app/webdav.ts`, which wraps the vendored `webdav-component` (browser-native `fetch` + `DOMParser`, no npm dependencies).
|
|
|
|
## Requirements
|
|
|
|
- Node.js 18+
|
|
- npm or pnpm
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install
|
|
# or
|
|
pnpm install
|
|
```
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The app is served at `http://localhost:5173/config/` by default.
|
|
|
|
Start the local WebDAV + WebSocket dev server (requires Python 3):
|
|
|
|
```bash
|
|
python webdav3.py
|
|
```
|
|
|
|
This serves `files/` over WebDAV and provides a `/ws` WebSocket endpoint on port 80.
|
|
|
|
To use a different base path:
|
|
|
|
```bash
|
|
BASE_PATH=/my-path/ npm run dev
|
|
```
|
|
|
|
## Production Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Output is written to `dist/`. The build uses `/config/` as the base path by default. Override with the `BASE_PATH` environment variable at build time:
|
|
|
|
```bash
|
|
BASE_PATH=/config/ npm run build
|
|
```
|
|
|
|
Deploy the contents of `dist/` to the Meatloaf device web server under the configured base path.
|