fretboard.js
fretboard.js copied to clipboard
moonwave99
Fretboard inlays
Is there a way to display fretboard inlays at 3,5,7,9 12 for example?
Also why is fret 11 the "middle fret" ? perhaps to a programmer used to a base 0 index, that makes sense, but to most players things repeat at the 12th? (unless Im missing the point completely) :-)
Re inlays: I thought about it, but I realised that more round elements would add just noise.
It is definitely feasible to have a separate g wrapper containing the inlays though ^^
A compromise may be to display just the 3-5-7-9-12 numbers below.
Re middle fret: you are right - I think the problem is the fact when one refers to the n-th fret, is actually talking about the neck portion right before it, hence the confusion.
I will mark fret 12 (i.e. the 13th drawn line) as middle!
personalty not a huge fan of the numbers below, that was why i was hoping for inlays... Agree it could be cluttered but maybe a default opacity .2 or something so they are subtle
inlayStyle: dot,diamond, trapezoid, PRS
inlayOpacity: .2
Could be relay fancy and make the inlayStyle except an object of svg items, and I can make my own PRS style inlays :-)
or perhaps take the same approach as for "middle" fret so the user can adjust the color of the actual frets 3,5,7,9,12...?
I think the highlight element should span the whole area between two consecutive frets (like in a real guitar), making it less ambiguous.
Guess I will add a showInlays(frets: number[], render: Function) method that renders a default style, and can render more stylish versions by appending svg to the exposed rectangular frame, what do you think?
Especially now that I am using the full populated fretboard, I think the inlays provide more noise than not.
Again, the implementation should not be complex so feel free to give it a go in case!
I'm also interested in this feature. @moonwave99, sounds like you're not opposed to this but you haven't implemented it yourself, is that right?
Awesome job on this, by the way! I'm using your library in a small proof of concept project that allows the user to reconfigure the fretboard using voice commands. Having lots of fun with this!
Hey @rodnolan, I am curious about your PoC, would love to see that!
Atm I have no time for new features. If anybody likes to work on the inlays themselves I am glad to receive PRs!
@moonwave99, my little app is at https://github.com/rodnolan/say-and-see-fretboard. I'll take a shot at implementing the overlays but it'll take me a while. @Aduffy, just curious if you've done anything around this?
@rodnolan no i have not had an opportunity to look at this... but I did quite like Diagos suggestion from Nov 26 "element should span the whole area between two consecutive frets" . I did attempt a quick hack using a BG image behind the fretboard element and based on that, the fret dots defenitly cluttered the display a bit. But just a 10% color fill on the 3,5,7,9 and 12 (etc) or maybe a Les Paul style inlays... Im not sure a showInlays() function is needed.. perhaps if the SVG elements where there with a class such as "fretinlay1" and we can just style them with CSS..
@Aduffy, @moonwave99 I took a brief look at the code last night and advanced my understanding a little but I still have a lot to figure out. I like the flexibility provided by exposing the inlays in css and I have no idea yet whether a showInlays() function makes sense. I'm envisioning an option to toggle the overlays on/off and to also adjust the opacity according to user preferences... to put the control in the user's hands.
I am also very intereted in this feature - I'll have a look and see I can implement it myself.
