Rotary Dial Media — reference prototype
A circular media player interface for a 360 × 360 round display, driven by a rotary
encoder and touch gestures. The intended target is an ESP32 running LVGL.
This repo is reference only. It records what the finished product should look like
and how it should behave, so the real build can be checked against it. It is
deliberately standalone: the firmware build lives elsewhere and doesn't link to or
depend on this repo.
Play with it
Live demo: https://sygad.github.io/rotary-dial-media-prototype/
Or open index.html locally in a browser. There's no build step and nothing to install.
open index.html
If your browser blocks local files, serve the folder instead:
python3 -m http.server 8000
Then go to http://localhost:8000.
The playground (index.html)
The round screen in the middle is the prototype, unchanged. The side panel is there to
help you explore it.
| Panel | What it does |
|---|
| Screen | Jump straight to any of the six screens. Each one shows its Figma frame number. |
| Rotary encoder | A virtual knob that stands in for the physical encoder, which is a separate input from the touch panel. Its pointer always sits where the arc on screen ends, in the arc's colour. Drag it round, scroll on it, or press [ / ]. |
| Touch gestures | Swipe and tap buttons, plus the on-screen taps (EQ zones, back button). |
| State | Live readout of the screen, album, track, playback, volume and EQ. |
Controls
| Input | Keyboard | Mouse / touch on the screen |
|---|
| Tap | Space / Enter | Click |
| Swipe | Arrow keys | Drag |
| Rotary encoder | [ / ] (or - / =) | Drag the outer ring in a circle, or use the scroll wheel |
| Tap an EQ zone | 1 treble · 2 bass · 3 subs | Click the icon |
| Skip back / forward 5s (while playing) | , / . | Click ◀◀ or ▶▶ on the transport bar |
| EQ back button | Esc | Click the button |
The original prototype (prototype/index.html)
This is the file exactly as it came out of the design sessions: a single file with the
album art embedded. It's the behavioural authority. The playground copies its engine
and only adds things alongside it (the panel, and loading the art from
assets/art/). If the two ever disagree, the prototype wins.
The screens
Clock ─tap─▶ Menu ─tap─▶ Album browse ─tap─▶ Now Playing ─swipe up─▶ EQ overview ─tap zone─▶ EQ focus
◀─swipe down─┘ ◀─swipe down─┘ ◀──────── swipe down ─────────┘
| # | Screen | What you can do |
|---|
| 01 | Clock | Tap to wake |
| 02 | Menu | Drag the list behind a fixed highlight; tap to choose |
| 03 | Album browse | Swipe left / right between albums; tap to open |
| 04 / 05 | Now Playing | Tap to play; while playing, ❚❚ pauses and ◀◀ / ▶▶ skip 5s; swipe left / right to change track; the dial sets volume |
| 06 | EQ overview | Tap treble, bass or subs |
| 13–15 | EQ focus | The dial adjusts the chosen parameter; back returns to the overview |
The full rules are in docs/SPEC.md.
Documentation
Layout
index.html playground: the prototype plus an exploration panel
prototype/index.html original prototype, self-contained (the authority)
assets/art/ album art used by the playground
docs/ spec, design tokens, timings, Figma map, open questions
Design source
Figma file jAaJDrPIrLTzMMPcqeqG4U, page "Prototype - Structured". Figma is the source of
truth for anything visual. Re-export values rather than adjusting them by eye.
Album art
The five covers are real album artwork, used only to show the interface with real titles
of different lengths. All rights belong to the artists and labels. This is a non-commercial
design demo.
