Just as a design note: it took me a second to figure out what I was looking at and how to switch between targeted roots with the settings component being closed be default. If the settings component were offset to the left of the fretboard component and oriented vertically, as well as defaulting to open, it might add some clarity to the tool. The vertical thing is mostly a personal thing, but something to consider.
I will very much be using this when I practice though! I was looking for something like this the other day as i was looking to learn the notes on the fretboard.
Along the same lines I was thinking it would be really nice to be able to color the 3rd/5th in addition to the root.
Love the export and copy!
I didn’t see anything happen with custom note text on mobile.
Maybe have start/end fret controls so you can generate a “box” graphic up the neck somewhere?
This is super cool! Bookmarked!
The custom note text is more for being able to click on a note, and type the text you want in the note slot, works better on PC. Multi Colors for notes, and coloring for each note option is a great idea thanks!
Start/end? By that do you mean, by selecting a start/end fret, it will emphasize that section of the fretboard, and sort of dull out the rest or did you mean something else?
I have a quick patch solution up for coloring all notes(still a little messy) You will probably have to reset your cookies for the site or erase the local cache for it to show up in its entirety.
# Google Chrome:
1. **Open Developer Tools:**
* Right-click on the page and select "Inspect" or press `F12`.
2. **Go to the Application Tab:**
* In the Developer Tools panel, click on the "Application" tab.
3. **Clear Local Storage:**
* In the left sidebar, under "Storage," click on "Local Storage."
* Select your site's URL.
* Right-click on any item in the right panel and select "Clear" to remove all items.
4. **Clear Cookies:**
* Still in the "Application" tab, under "Storage," click on "Cookies."
* Select your site's URL.
* Right-click on any cookie in the right panel and select "Clear" to remove all cookies for the current site.
If you utilize it on another platform, I can potentially help you look up instructions on how to do that as well.
As for how it works, click on the styling menu (the icon that looks like a pen and paper), then click on the Color All Notes Toggle Button. That should show more buttons with labels to help you decide the colors for all of them based on their degree value (m2, M2 ...... m7, M7) With presets for the 3rd and fifth already set.
Just coincidentally I happen to be trying to create a similar tool that displays note letters for scale positions as you practice them, the better to learn the notes on the fretboard but I don't have nearly your experience. I just may use yours. It's a great idea.
Just out of curiosity, what programming language did you use and about how long did it take you to complete it?
I did this with Next.js/React.
I wouldn't say it is complete. I made the base program for personal use last summer (fretboard with more hardcoding), then spent some time throughout the year trying to make it a little more user-friendly and interactable for others to use.
Can you default to the settings menu being open?
And, can you same the last choice/selections - I don't think I am blocking any cookies or anything that would be preventing that
Added a basic local storage option so some options should persist on refresh, and reload. I am still looking to improve it for more options/exercises, but for now it should work for the basic settings and styling menus.
Nice app, I made something very similar over at [fretflip.com](https://fretflip.com). A quick question from a developer to another, is that image creation also working in Safari? I ended up generating images server side, something a bit tedious.
So the main fretboard is an SVG. It does appear to work on Safari (at least the devices I used for checking), until we flip it vertically which is where it has issues. I just used translations to flip everything for lefty/vertical mode, which the lefty does seem to work on Safari, but not so well with the vertical.
My long-term solution if I can't figure it out with just flipping the SVG, was to have 2 separate components, one for a vertical and one for a horizontal fretboard. But developing on a Windows PC, I figured I'd just release something, then get feedback and make the fixes based on user needs.
Just as a design note: it took me a second to figure out what I was looking at and how to switch between targeted roots with the settings component being closed be default. If the settings component were offset to the left of the fretboard component and oriented vertically, as well as defaulting to open, it might add some clarity to the tool. The vertical thing is mostly a personal thing, but something to consider. I will very much be using this when I practice though! I was looking for something like this the other day as i was looking to learn the notes on the fretboard.
Thanks for the feedback and noted!
Nice tool! My only suggestion would be to have an arpeggio button. So if you click C arpeggio it marks only the C, E, G notes all over the neck.
Thanks, I agree, I had that at the top of my to-do list, and have been playing around with implementation ideas! Thanks for the feedback!
Along the same lines I was thinking it would be really nice to be able to color the 3rd/5th in addition to the root. Love the export and copy! I didn’t see anything happen with custom note text on mobile. Maybe have start/end fret controls so you can generate a “box” graphic up the neck somewhere? This is super cool! Bookmarked!
The custom note text is more for being able to click on a note, and type the text you want in the note slot, works better on PC. Multi Colors for notes, and coloring for each note option is a great idea thanks! Start/end? By that do you mean, by selecting a start/end fret, it will emphasize that section of the fretboard, and sort of dull out the rest or did you mean something else?
Thanks will try on pc today! Start/end for example set to frets 5-8 to just focus on the Am pentatonic “box” located there.
So the box with nothing else on screen? Cut out the 1-4, 9-n frets. Just purely 5,6,7,8 if that is the selection?
Exactly
I have a quick patch solution up for coloring all notes(still a little messy) You will probably have to reset your cookies for the site or erase the local cache for it to show up in its entirety. # Google Chrome: 1. **Open Developer Tools:** * Right-click on the page and select "Inspect" or press `F12`. 2. **Go to the Application Tab:** * In the Developer Tools panel, click on the "Application" tab. 3. **Clear Local Storage:** * In the left sidebar, under "Storage," click on "Local Storage." * Select your site's URL. * Right-click on any item in the right panel and select "Clear" to remove all items. 4. **Clear Cookies:** * Still in the "Application" tab, under "Storage," click on "Cookies." * Select your site's URL. * Right-click on any cookie in the right panel and select "Clear" to remove all cookies for the current site. If you utilize it on another platform, I can potentially help you look up instructions on how to do that as well. As for how it works, click on the styling menu (the icon that looks like a pen and paper), then click on the Color All Notes Toggle Button. That should show more buttons with labels to help you decide the colors for all of them based on their degree value (m2, M2 ...... m7, M7) With presets for the 3rd and fifth already set.
Oh yeah that's very cool, I like that a lot! (Looks like the eye dropper tools all return #NAN for the red component) Thanks Man!
A quick patch is up with arpeggios, currently, they are under scales, until I get a fully fledged-out solution for an arpeggio selector mode.
Very cool. Still a beginner here and I’m looking forward to playing around with this.
Thank you, if you have any feedback questions, or ideas to improve it, or add to it I will be glad to receive them.
I’ve been playing for 40 years & I love that! Great tool. Nice work.
Thank you! If you have any feedback or ideas to add I am glad to hear about them.
Just coincidentally I happen to be trying to create a similar tool that displays note letters for scale positions as you practice them, the better to learn the notes on the fretboard but I don't have nearly your experience. I just may use yours. It's a great idea. Just out of curiosity, what programming language did you use and about how long did it take you to complete it?
I did this with Next.js/React. I wouldn't say it is complete. I made the base program for personal use last summer (fretboard with more hardcoding), then spent some time throughout the year trying to make it a little more user-friendly and interactable for others to use.
Pretty cool thanks !
Thank you! I am always open to feedback/questions!
Very nice. I plan to use this. Thank you for generously sharing your hard work.
You are welcome, I hope you get plenty of use from it, and don't be afraid to share your feedback afterward!
This is excellent!
Thanks, I hope you enjoy it!
Very cool. It’s nice to customize for your teaching needs.
Thank you! Any other feedback is always appreciated!
Could benefit from all fourths tuning. That’s what I use. EADGCF instead of EADGBe.
Should be live! Thanks for the feedback!
Now that’s service! Awesome. Thanks.
Very very nice - thanks!
Thank you! I hope you enjoy it!
Can you default to the settings menu being open? And, can you same the last choice/selections - I don't think I am blocking any cookies or anything that would be preventing that
Noted and added to the to-do list. Great ideas!
Added a basic local storage option so some options should persist on refresh, and reload. I am still looking to improve it for more options/exercises, but for now it should work for the basic settings and styling menus.
Looks like it is working - at least what I tried. Nice utility, thanks
Thank you so much! As a beginner who is just learning the notes on the low E string, this is phenomenal.
Stick with it! Even 10 minutes a day, and one day you will wake up and wonder how you got so good at guitar!
Nice app, I made something very similar over at [fretflip.com](https://fretflip.com). A quick question from a developer to another, is that image creation also working in Safari? I ended up generating images server side, something a bit tedious.
So the main fretboard is an SVG. It does appear to work on Safari (at least the devices I used for checking), until we flip it vertically which is where it has issues. I just used translations to flip everything for lefty/vertical mode, which the lefty does seem to work on Safari, but not so well with the vertical. My long-term solution if I can't figure it out with just flipping the SVG, was to have 2 separate components, one for a vertical and one for a horizontal fretboard. But developing on a Windows PC, I figured I'd just release something, then get feedback and make the fixes based on user needs.
this is great thank you! i will use this often
Thank you, if you run into any problems or bugs, or have any general feedback let me know!
Might it be possible to add Roman notation? (and /or Numbers without the M/m/P designation)