Project Demo, small Fixes & Deployment

In order to be ready to ship, I created a demo video using OpenScreen showing how to use the app, I also did some fixes here and there and finally deployed the app to GitHub Pages.

Tuanble Strings & Expandable Fretboard with Dynamic Staff Sizing

Users can now set how individual strings are tuned on the fretboard, as changing the tuning is required for some pieces on the guitar.

Additionally, players can now choose how many frets they are comfortable using - the staff resizes (more/less staff lines) so that the entire fretboard can be utilised without cluttering the screen with notes you cannot play at the selected fret count.

More Notes and Open Strings

Besides updating the layout I “added new notes”. Of course you can have as many as you want, but I wanted to make sure lines outside of the staff become muted, so everything is easier to see.

More importantly, open strings are now visualized on the fretboard - previously only notes where guitar players had to press down showed up. The architecture I talked about in previous devlogs worked wonderfully :)

Colored Notes and Architecture

I fixed the architectual issues i wrote about in my previous devlog using a dedicated class for visualization. It uses the builder pattern and should be extendable so that new visualizations on the fretboard can easily be added.

Moreover I gave each note its own color, numbered the frets and added little circle markers in the same pattern they appear on a guitar.

Fretboard shows Notes

The notes you pick in the staff show up on a guitar fretboard!

One thing I learned from this project so far, it is to always make dumb React components: Don’t manage the component’s state internally when it can make sense wanting to access it from the parent component in the future. In my case: The fretboard is a “smart” component and when passed a note it knows and shows all the possible locations to play it - this works for now, but it’s hardly extendable: For a feature I’m planning, the parent component needs to control precisely where to show the dots - which as of now is impossible, because the fretboard only works with notes + it will show all possible locations, not precisely the ones I want to show.

To fix this, I will expose a prop that controls not what notes to show, but what frets and strings dots should appear on.

Improved Note Picking and Support for Sharps/Flats

I improved the note picking: To prevent notes from overlapping the note now follows the mouse position, users can place notes freely wherever they want.

Additionally, I added support for sharp and flat notes, which can be toggled on the left side of the note’s name. It’s a bit quirky as e.g. a sharp F becomes “F#” but a sharp H becomes “C”, not “H#” (thanks music theory!)

Note Picker

First version of the note picker, it will need a re-do to prevent overlapping notes and to support sharps and flats.

I also wrote a system that converts into an internal representation from which it’s easy to get the names of the notes and hopefully to locate them on the guitar fretboard.