This project is a web application that enables users to control LED strips connected to an ESP32 microcontroller running the WLED firmware. The app turns the LED strip into a visual metronome, displaying rhythmic light patterns synchronized with a chosen tempo.
WLED devices allow uploading files directly to the device, which can then be accessed through the built‑in web server — and that’s exactly what this project takes advantage of.
Mode with more prominent accent beats, 4/4 at 120 bpm, first beat accented:
Standard display mode, 7/8 at 200 bpm, 1st beat is the primary accent, 4th beat is the secondary accent:
The web app is a self contained HTML page with embedded Javascript. To generate that file from this repository you need NPM on your computer. If you don't have that already, download it from the Nodejs.org site. Any version >= 20.x should be fine.
Now in the root of the project execute:
npm iand
npm run buildand that's all. This call will generate the html file in the /dist folder (index.html).
Now open the file manager (ESP Editor) page of your WLED device (http://<wled-ip>/edit). Click "Select File" (or whatever is shown beside the "Refresh List" button, it's platform specific). Once you picked your file, click "Upload". After 1-2 seconds you should see it in the list on the left hand side of this page.
You now can open it using http://<wled-ip>/index.html. You should see a configuration page similar to this:
Important: Changes take effect the next time you start the metronome!
First, specify the IP address of your WLED device. When you run the app directly from the WLED device, this field should be filled in automatically. However, since the app can also be run locally on your computer (see the development section below), there needs to be a way for you to enter the address manually.
Next, set the total strip length — the same value you configured in WLED. The app will automatically divide the strip into segments based on that length. Each segment represents one beat and uses the “Normal Beat Color.” You can mark specific segments as accented beats (primary or secondary), which will make them use their dedicated accent colors instead of the normal one.
The segment configuration lets you define any number of segments for the metronome (at least one). Typically, you’ll set them according to the time signature of your rhythm (e.g., 4 for 4/4, 7 for 7/8, etc.), but you can choose fewer or more. If you define fewer segments than beats per bar, the last segment will be reused for all remaining beats. Defining more segments simply makes each segment shorter but doesn’t affect playback further.
Finally, configure what the metronome should display — the tempo (in beats per minute, BPM) and the meter. You can also make accented beats stand out more by selecting the second option in the Display Mode dropdown. When enabled, accented beats are removed from the normal segment pattern and instead trigger all segments in their respective accent color.
If you want to contribute to this project or just want to modify the app for your own needs, this is the section describing the technical details for you.
Once all 3rd party dependencies are installed, you can start a development server with:
npm run devAlternatively, you can run the server from the NPM SCRIPTS section in VS Code.
This local server runs at http://localhost:5173 (or another port if 5173 is already in use). You can open this URL in your browser to see the app running locally. Note that since the app needs to connect to a WLED device, you must specify its IP address in the corresponding field.
The development server supports hot module replacement (HMR), so any changes you make to the source code will automatically refresh the app in your browser. For debugging this vite preact application, you can start a debug session in VS Code using the "Launch" configuration in the "Run and Debug" panel. Or you just use the browser's built-in developer tools.