Any chance you would consider adding the ability to render a scale with all notes having a class name for all boxes it belonged to?

Thank you for the this library! I think it is extremely well made and I plan on using it after I figure out if the licensing is compatible.

What are the future plans of this project?

Hi,

Has anyone used this library successfully in Angular 8 I have added the reference ok and using example code it seems like its creating the object ok when I debug it. but the element is always empty.

There are no console errors - I suspect it may be because of Angulars built in html/dom sanitisation but wanted to check if anyone else has had it working.

thanks

I made my dots red using the dotFill config property, but the text color seems to be hardcoded. It would be nice to style the text color using the config. Or can that be done with the 'font' property as well?

Someone I know... is very fond of Guitar Pro 4 and likes to use the fretboard image as a background.

It would be cool to be able to pass the fret scaling function to make the scales fit. As well as pass in a background image of course, though that is relatively easy to do with CSS.

Thanks for the awesome library btw! Works really well, and the functionality is quite exhaustive so this must have been quite some work! Much respect.

Hi, I checked through all issues and PRs, codebase and docs, but I could not find anything related to flipping the fretboard for left-handed guitar players. Is the feature planned? Thanks.

Hi,

Firstly - awesome tool! I've been having some fun using it!

I spent hours thinking my code was broken, only to realise that if you go here:

https://moonwave99.github.io/fretboard.js/examples-chords.html

You will notice the barr-C chord renders fine... i.e. with dots against fret 5.

However, if you render the same chord using 'master/HEAD' (0.2.7?)... it just shows the bar but the notes are not rendered against fret 5. Guessing the offset is not being calculated properly or something (since any callbacks using {dots} param only passes dots on fret 3) - didn't dig in too deep as my needs are met by using 0.2.5 but figured I would flag it

If you could fix this, please, that would be awesome! 🙏

Proposed signature:

renderChord(
  chord: string,
  barres: {
    fret: number;
    fromString: number;
    toString: number;
 }[];
): { ...}

Would be great if Clicking on a fret/string that contains a dot returned that full note element and not just {string, fret}

there is a bit of a problem with the notWithOctive class names when dealing with sharps

"#" does not play well with class names, although it can be used as a selector by escaping it such as F#

Im doing some integrating of fretbboard.js with ABCjs.js (inspired by your playback example) and they way they handle sharps there is to use the b version of the name .. Gb3 instead of F#3

Perhaps both flavors of name could be used on those notes ? dot-noteWithOctave-F#3 and dot-noteWithOctave-Gb3 ?

An option for string thickness such as a true/false for "scaleStrings" would be nice.

Note names are off by one fret.

const fretboard = new Fretboard({
  el: '#fretboard',
  dotFill: ({ interval }) => interval === '1P' ? 'red' : 'white',
  dotText: ({note}) => note,
});

const  box3 = TNPString( { box: 3, root: 'A3', mode: 'major' });

fretboard.render(box3);

https://codepen.io/aduffy/pen/MWjJVPV

I'm using the library to build a fretboard/scale display with audio stream pitch detection to set a dot indicator to display the currently played note. I'm hoping to extend this to show the intervallic functions of the pitches surrounding the currently played note for the given chord scale. The idea being that a user could see: "I'm currently playing the 3rd of Mixolydian and the b7 is here".

Some features that I think would be highly useful are:

• Appending dots, or modifying dot styles without resetting or re-rendering the current scale display.
• Adding dots by note/octave (e.g. "A4") for the given tuning without having to calculate string/fret.
• Getting string/fret values for a given note/octave.

Is there a (built in) method of adding or removing a note from the fretboard with out having to completely re-render the fretboard ?

I see that I can style the dots with the built in style() function using he inBox: true/false. But could we also add a class name to the dot indicating it is inBox?

What i would like to archive is to have the full scale presented at .5 opacity, and the box at 1. But I would also like to have the dots go to full opacity on hover.

👋

In comparing fretboard.js to a couple of other sites, it seems like fretboard's TNPS system is using a different numerical index for the box shapes. As an example, here is an F minor, at position 1 across a few different implementations:

guitar-chords.org.uk

Positions aren't labeled here, but they are in numerical order from left to right.

Fretastic

fretboard.js

But if we swap to position 6, we see the same notes as the other two sites:

I don't know if there are any hard and fast rules when it comes to this, but it might be worth having consistency with existing implementations. Cheers!

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) :-)

I see in your road map you have plans to add Chord Shapes to fretboard.js. Do you plan on having this based off of a static database such as tombatossals / chords-db , or auto generated based on notes?

Is there a dotOpacity option in config?

What I am trying to do is display all of the notes in a pentatonic scale on the full fretboard with the dots shown at .5 opacity. Then have buttons that used fretboard.style() to set the opacity of all notes in box 1, box 2 etc..

Is there a way to access the system boxes such as G Major TNPS box 1, as an array of notes/string/fret/etc as it was in under the old system?

Is there anything built in to do fret markers at 3, 5, 7, 9th and double dot at the 12th fret?

Is there a browser based version for non NPM users?
I have tried using UNPKG and jsdelivr but both get error "Cant find variable Fretboard"

`

<script src="https://cdn.jsdelivr.net/npm/@moonwave99/fretboard.js"></script>

<script>
	const fretboard = new Fretboard({
		  el: '#fretboard'
		});
	const box = CAGED({
		  mode: 'major',
		  root: 'C3',
		  box: 'C'
		});
	fretboard.render(box);
</script>`

Would you consider adding a built in function to create all notes of the scale (frets 0 to 24) with pre defined class names to identify the various box shapes they belong to?

Basically expanding on the idea you had here
Originally posted by @moonwave99 in #12 (comment)

but instead of just having the box 1,2,3,4.... it would also let me high light box 1-5 of full major scale, box 1-5 of penatonic, or position 1-7 of 3NPS shapes. All just by toggling the classes required.

If the notes in a box extend past "fretCount" then the render fails with error
"Uncaught TypeError: can't access property "x", positions[(string - 1)][(fret - dotOffset)] is undefined"

https://codepen.io/aduffy/pen/PoGpGvE

Expected behavior : Should just draw what it can and ignore notes that do not fit.

Im building a "merged" set of boxes for Major scale and want to include up to 24th fret in those. But in practice would typical want to render at a more realistic 5 fret view..

Compliments on the new renderScale in .2! It is friggin brilliant. I implemented it to replace my code that was using your previous merged boxes examples.. SIGNIFICANTLY less code!

Do you have plans to add additional box shapes such as 3 octave scales ?

If you click on the bottom part of a note on String 6, it returns that note from string 1
View console for output.
https://codepen.io/aduffy/pen/dypvjKa?editors=0001

The fretboard can't always show enough frets, especially on devices with small viewports. I found a way to indicate that the fret rendered outside of the viewable fretboard.

I'm working on adding different articulations and indicators. I'm starting to see a pattern emerge. Once I develop a proper abstraction, I want to contribute them to fretboard.js in a PR.

For now, I thought it would be nice to share :)

Code

type RenderTarget = {
  fret: number;
  string: number;
  fill: string;
  stroke: string;
};

declare var fb: Fretboard;

const targets: RenderTarget[] = [
  { fret: 20, string: 2, fill: 'red', stroke: 'black' },
  { fret: 18, string: 3, fill: 'green', stroke: 'blue' },
];

const maxFret = fb.positions[0].length - 1;
const totalWidth = fb.options.width + fb.options.leftPadding + fb.options.rightPadding;
const exceedLeftPaddingPx = 4;

fb.wrapper
  .append('g')
  .attr('class', 'exceeds')
  .selectAll('g')
  .data(targets.filter(({ fret }) => fret > maxFret))
  .enter()
  .append('g')
  .attr('class', ({ string, fret }: RenderTarget) => `exceed exceed-string-${string}-fret-${fret}`)
  .append('rect')
  .attr('class', 'exceed-rect')
  .attr('width', 4)
  .attr('height', fb.options.dotSize)
  .attr('x', totalWidth + exceedLeftPaddingPx)
  .attr('y', ({ string }: RenderTarget) => positions[string - 1][maxFret - fb.getDotOffset()].y - dotSize * 0.5)
  .attr('fill', ({ fill }: RenderTarget) => fill)
  .attr('stroke', ({ stroke }: RenderTarget) => stroke);

fb.render();

Result

My application generates 0-indexed fret/strings. Fretboard.js errored out on a line where it tried something like dots[string-1] which would go negative when passed a 0-indexed string. It would be good if it would validate string input/1-indexedness.

var box = pentatonic({ box: 1, root: 'A2', mode: 'minor' });

creates

But Box 1 should be

to get that shape I need to request box 5 ..

Is anyone able to run this library in React 18? If so could you provide an example?

the clear method clears all dots but does not clear any existing barres?

If I render an A Minor scale with CAGED G shape box, it renders the E shape box.

https://codepen.io/aduffy/pen/dypvjKa