0xfe / fretboard Goto Github PK

Hello,
First off, many thanks for Vex Fretboard. I have been using it quite a lot. There are no text-base utilities like it that I have been able to find online.

There are a couple of issues regarding the placement and size of the fingering dots and text on the fretboard when using MyVexflow.

1. Placement: Dots should be place right behind the fret wire when there is room, not in the middle of each fret. This is more apparent in six or more stringed diagrams where the dot size shrinks significantly. Dots right behind the frets would illustrate better technique and make the layout more consistent when there are dots label on the nut as well, as nut dots are displayed right on the nut, not further behind it.

Current placement of dots. They need to be moved to right behind the fret wire lines.

2. Size: The size of the dots should be tested on every fret of the neck, using various number of strings (e.g., 4,5,6,12),to ensure that the dot size fits in the upper register where the frets are much closer together. For example, right now, the dots for a 4-stringed bass with 22 frets are too large. They overlap each other in the upper part (right-side) of fretboard diagram. How about providing another user option to control the size of the dots?

3. Text: The text inside the dot needs to centered, moved up a tad, as it is currently slightly low. Also, I suggest that the font size inside the larger dots be increased for easier readability. As you see below, there is still some room to increase the text-size. Perhaps, add a text-size option as well for users?

Current default layout. Dots need to be smaller at least in the higher register to avoid overlapping when using four strings

Check out this fretboard generator which, in my opinion, has an ideal layout (e.g., size of dots and text and their placement.): https://www.studybass.com/tools/chord-scale-note-printer/
The limitation of the studybass fretboard generator is that it does not have the option to create custom fingering and intervals. It allows only predefined scales and chords by default. Because of this, I am relying on the greater flexibility of Vex Fretboard.

Thanks again,
Sam

Hello,
The usage description for Fretboard is minimal, at least for a novice like me.
(https://github.com/0xfe/fretboard). I don't know how to proceed from just the following:
"Simply instantiate a Vex.Fretboard.Div passing in the selector of a div element as the first parameter. Call build(code) on the instance to draw. If code is specified, it must be in the syntax described below. If code is not specified, the contents of the div element are parsed."

If it is not too much of a bother, could you post/email a simple html example of how to implement Fretboard. (I do have an understanding of html.)

Thanks,
Sam

I would like to be able to display tuning info of the fretboard, something like:
e |--------
B |--------
G |--------
D |--------
A |--------
E |--------

It should be also editable so I can edit what should be displayed

When you try to use Vex.Flow.FretboardDiv against multiple divs without an id attribute, you will see some strange behavior. All of the divs will have their original content removed (as expected), but all of the generated diagrams will be placed in the first div. This confused the hell out of me.

After banging on it for awhile, I found the workaround, which is obviously to add unique id attributes to each div.

This is easy enough to do, but it might be handy to throw an exception when something the developer doesn't expect is about to happen (like fretboards being rendered into the wrong div).

I would like to remove the dots and draw others without redrawing the board.

Hi,
Did someone compiled this to JS for a direct use?
Thanks.

I am creating new Fretboard using this simple code:

var d = $("#fDiv");
var f = new Vex.Flow.FretboardDiv(d).build();

There is also some div that contains some example code (or is empty).

After I tried to run the code there is error in my developer console:
Uncaught ReferenceError: _ is not defined fretboard.js:40

The code on this line is: _.extend(this.options, options);

After I comment this line (and another line like this) everything seems to be working, but I still feel like there is something not working right.

Is this problem of Fretboard or did I miss something?