Piano keys stickers

Try it live: https://denilsonsa.github.io/piano_keys_stickers/stickers.html

This tool generates "stickers" that you can print, cut, and put on top of your piano keys to help you play. It's useful for beginners, or for anyone who isn't a professional musician yet. These are also known as:

Piano stickers, piano keyboard stickers
Removable piano stickers for keys
Digital printable piano keyboard stickers
Stave strip, staff strip
Piano treble & bass clef staff note cutout chart

Inspiration

There are some sticker sets on the market, mostly manufactured from China. There are two main types:

Actual stickers with actual glue that you permanently place on your keys.
A strip of silicone (or some other material) cut in a special format, so that you can lay it over the top of the keys. Even though they are not strictly stickers, they are still called that because that's what people search for.

The second kind inspired me to build this tool. I can't know if the (pseudo-)stickers will fit my keys until I spend money buying them. I can't know if the print on them will have all the information I want (because their listings have multiple photos of different designs, and you never know which one you're going to get). And if they tear apart, I can't easily fix them.

Thus, this tool was born! It is very configurable and lets me print the stickers for the exact size I need, with the exact information and layout I want.

How to use this tool

Measure your keys, both the black keys and the white keys. How wide are they?
Select how many keys you have, or manually insert the first and the last note.
Measure the total width of your keyboard. Does it match the total width calculated by the tool? If it doesn't, you should review the previous measurements.
Choose the desired height for the stickers.
- A thin black-key height may fit in the space between your black key and the base of the piano, but it can be more fragile.
- Make sure the height of the white keys is short enough so the stickers won't get in the way.
This is already good enough. Feel free to print.
- You may want to print on a thicker sheet of paper.
- You may want to select the landscape paper orientation.
- Please set "Scale = 100%" when printing, otherwise the dimensions will be wrong.
- Please remember to enable colors and backgrounds while printing.
Now grab some scissors and cut the paper.
- You can also fold the top part backwards (follow the dashed line).
- You can optionally put a long strip of transparent tape along the top of the paper to prevent it from tearing.
Place the finished product on top of your keyboard.

There are more configuration options if you really want to tweak the look of your own stickers. They are self-explanatory, and you're free to explore.

Features

Do, Re, Mi Fa, Sol, La, Si (Solfège) note names
Alternative names for some notes (e.g. Si or Ti)
C, D, E, F, G, A, B note names
Octave numbers, forming scientific/international pitch notation
Boomwhacker color codes
Flat (bemolle) ♭ and sharp ♯ symbols for the notes that can have such symbols
Musical staff with 𝄞 and 𝄢 clefs
MIDI note number for each white key
Frequency (in Hz) for each key, both black and white
Instant feedback, you immediately see the effects of changing any configuration option
Client-side, runs in the browser, no server required

It also has the following dubious features (anti-features?):

Uses the browser to print, which means it suffers from all issues related to printing from the browser (e.g. are you sure it will be printed in the correct dimensions?)
Uses millimeters for dimensions, without any option to change units
Uses Vue.js 3 directly from CDN, no build steps required
Uses ES modules, which means this tool doesn't work over file://, always requiring a basic webserver

TODO

Visual stuff/fluff:

Revisit and improve the layout of the white keys. It's currently too messy and buggy.
- To be done whenever I add more customization options (such as font sizes and families).
Possibly rewrite the whole thing to generate one giant SVG file (instead of relying on HTML+CSS).
- Too much work for little benefit.
Add more configuration options to let the user change the dimensions of each element (Solfège, color, staff, letters, frequency).
Multiple and custom color palettes (e.g. Bontempi colors). Useful when following a songbook that uses a different color palette.
Let the color to be applied to the text and also to the SVG. With options to apply only to the note, or to the whole SVG.
Advanced options to fine-tune the dimensions used while generating the SVG. Useful when trying to fit to mini keys or to long keys.
Possibly show the clef in a different row than the note. Useful for tall but thin keys.
Let the user pick if they want the octave up/down clefs. Also, the symbol can be placed next to the note in case the clef is hidden.

Print-related stuff:

Let the user break the long strip into smaller printable sections (with extra keys to be overlapped while gluing together).
Prepare a print preview layout, something that looks like a piece of paper. Also needs support for multiple paper sizes.
Add a toggle for "print test mode" that would print the layout in a ink-saving way. Good to test the size before printing the full stickers. All the contents of the sticker will be hidden (except for one key), and the black keys would be white. Optionally, multiple keys can be printed, but with different sizes (so the user can decide the best size).
Add a "Print!" button.
Add a ruler to help calibrating the print. This lets the user quickly check if the printed size matches a real-world ruler.

Extra layer of polish:

Add some instructions and photos of printing, cutting, putting some tape for extra strength, etc. Not only it instructs people on how to use the tool, but it also shows the end result. Also add a screenshot of the tool to the README.
Add a favicon.
Use Web MIDI to detect the key range, and possibly highlight them live.
Add buttons to shift the whole strip one octave up or down (add/subtract 12 from both min_note_code and max_note_code). Useful for printing new guides for keyboards that can shift one octave up or down.
Improve the usability of the form. I literally spent zero effort in making it prettier, and it looks very ugly and scary.

Extra music stuff:

Let the user pick one clef to be used for the whole strip. Treble, Bass, Alto, and even the other not-so-common clefs.
Let the user choose a key signature (extra ♭ or ♯ symbols after the clef), adapting the notes as needed.
- Good luck fitting the key signature in the very limited width. Maybe replace the middle C note with the wide signature.
- Have to figure out how to display the displaced notes. Maybe just add the ♮ natural symbol.
- Might require a lot of refactoring of note.js for deeper understanding of music.

License

The code is licensed under a very permissive MIT license.

The images are either Public Domain or Creative Commons, please check each image for details.

Pricing and donations

This tool is provided for free for anyone to use. And it is also free software (as in freedom).

If you think this tool helped you, saved you time, or saved you money; feel free to send a donation. Let's say… maybe you were willing to buy some stickers of dubious quality from some website, but instead you decided to use this tool. Instead of spending the money on that website, you could send me a small donation. Or maybe you're a music shop and you've decided to print and sell the stickers generated from this tool. If you're earning money from this tool, it would be nice to donate a little bit to the author(s). Still, donations are voluntary, you don't have to donate if you don't want to.

denilsonsa / piano_keys_stickers